This chapter explains in details how web pages are created on YumpeeCMS. Topics to be addressed in this chapter include ;
-
What is a Page and different page types
-
Creating a Web Page
-
Working with a Contact Page
-
Setting Permissions for Page access
-
Styling a web page
What is a Page
Pages are content display containers and can be used to display both static and dynamic information in YumpeeCMS. Each page in YumpeeCMS can be reached through a unique address also called the Page's url.
Understanding Page Templates Types
There are 13 different types of Page Template types in YumpeeCMS. A page template indicates how a particular request will be routed and also how the information will be displayed. Every template type is mapped to a specific route within the Yumpee framework.
Within YumpeeCMS, you are also able to setup child templates from any of the core parent templates. When a child template is setup, the system will route the URL call the same way it would have routed the parent template but you now have the option of presenting the data in a different way. This means that the same data can be presented in multiple page layouts using child templates. More of this will be discussed in Chapter 12 – Extending Your Application.
-
Creating a web Page
The following section explains in details how you will create a web page in YumpeeCMS. Once a web page has been created and published, you will be able to view the web page by entering the address
[http(s)://host-name]/[url]
For example, if your website domain is http://www.yumpeecms.com, then a web page with URL “services” will be located on http://www.yumpeecms.com/services
After clicking on the Web --> Pages menu option, scroll down and you'll be shown a list of Pages that your site contains. Among the information displayed is the Page title, Menu title, Template used, URL, Parent page etc. The Pages screen will look similar to screen below.
At the right hand side of each row, a few icons appears assigned to each page;
-
Edit (The pencil icon) – Will allow you to edit your Page. It opens up the main content of the page on a content editor, which is similar to a word processor interface where you can edit the contents of the page.
-
Preview (The eye icon)– Open up the page on a browser for you to preview.
-
Trash (The bin icon) – Will send the Page to the Trash. Once this is done, the page is deleted
Adding your site content
Adding content to your site is an easy process no matter whether you’re creating an Article or a Page. The procedure for both is almost identical. Apart from how they display on your site, which was described earlier, the other main difference is that Articles allow you to associate a category index or a blog index whereas Pages don’t. More will be discussed on Articles in Chapter 4.
Adding a New Page and assigning Menu
Step 1: To add a new Page, hover your cursor over the Web menu option in the left hand navigation menu and in the fly-out menu, click the Pages menu. You will be presented with a page similar to the screenshot below.
Following are the details of the fields on new page.
-
Title Tag / On-page Title: This is where you write the title of the page, which is later displayed on the page.
-
Featured Image: upload a featured image, either from your local system or your image Directory.
-
Lead Paragraph/ Meta Description: This is where you add the main content of the page. This is a WYSIWYG Editor, which is similar to a word processor interface where you can add or edit the contents of the page.
-
Menu Title: To every page created, a Menu is assigned. The Menu Title Displays the Title of the Menu that is assigned to the page created.
-
Breadcrumb Title: is a type of secondary navigation scheme that reveals the user's location
-
Template: Make a selection from defined templates available.
-
URL: Enter the URL of the page as you would want it displayed on the page.
-
Parent Page: Enter a Parent page if necessary.
-
Layout: Select a layout for your page from the list of available customised layouts.
-
CSS Profile: Specify a CSS Profile which is already defined if necessary.
-
Menu Profile: Specify a Menu Profile which is already defined if necessary.
Step (2): Click on Save to publish the page to the user on the website.
Adding Content with Visual Editor
The editor used to enter content into your Page or Article is very easy to use. It’s much like using a regular word processor, with toolbar buttons that allow you to Bold () or Italicise (), align left (), middle (), right, ( ) justify () or bullet points ( ). You can even use most of the basic keyboard shortcuts used in other text editors. For example: Shift+Enter inserts a line break, Ctrl+C/Cmd+C = copy, Ctrl+X/Cmd+X = cut, Ctrl+Z/Cmd+Z = undo, Ctrl+Y/Cmd+Y = redo, Ctrl+A/Cmd+A = select all, etc. (use the Ctrl key on a PC or the Cmd key on a Mac).
Note: When you move your cursor over each of the toolbar buttons, it reveals the name of the button, and you can tell the use of such button.
Assessing Source Code
The Source code view will enable you to view the HTML code that makes up your content. For the more experienced users this can be helpful at times but for those not familiar with HTML tags, it’s not recommended.
To access the Source code; click on View, then a fly-out drop-down appears, and then click on Source code. This displays the HTML Codes that make up your content.
-
Working with Contact Page
With YumpeeCMS, you can easily add a contact page to your website so your visitors can contact you. On default Installation of YumpeeCMS, a Contact Us Page is created. If you however wish to create another one, then go through the process of creating a page and select template Type to be 'Contact'. Once created, the information entered on the Contact Page will be forwarded to the email address registered in the Systems → Settings under the Contact Us section. If a Google Key is present, YumpeeCMS will include the Google Map on the Contact us page.
-
Setting Permission and Page Access
In YumpeeCMS you can decide if you wish for users to login before they can access a particular page. To request for loggin in when they are not already logged in, set the 'Require Login to View' field to 'Yes'.
-
Setting Menu Permissions
You can also set which menu profile a page may be created under. A menu profile means that when the page is called, only the menus within the Menu profile pre-defined will appear.
Before you create a menu profile, be sure to create menus. Below is an explanation of how menus are created and assigned to pages.
-
Menus and Pages
For every page created, a Menu is also created but disabled. The following steps will show how we can enable the Menu and assign it to the page created.
Step (1): Click on Web --> Menus as shown in the following screenshot.
Step (2): Hold and drag the Menu created on the Disabled section to the Enabled section.
Step (3): Click on Save at the right corner of the Menu interface. This automatically makes the Menu published on your website.
Step (4): Go to the Page URL and refresh to see the Menu displayed on the site.
-
Page Styling with CSS Profiles
There are two main options to style a page in YumpeeCMS.
-
You can use a different template from the templates directory. Go to System->Settings and under the appearance section change the current theme value. This however changes the overall look and feel of the entire website
-
To change the specific style of the page you are working on, change the CSS Profile attribute to any of your choice which must have been previously defined in Web-> CSS Profiles
Adding Images and Other Media
Adding images and other media files such as videos, documents or PDFs is extremely easy within YumpeeCMS. All your images and files are stored in the Media Library. Once they’re uploaded into the Media Library, it’s a very simple matter to insert them into your Page or Article content. In the case of files such as Word Documents or PDFs, if necessary, it’s a simple process to create links to those files so that people can then download them. More on Media is discussed in Chapter 5 – Working with Images and Galleries.