Page Editor
This module allows you to edit and organize the front-end content for your site.
The Page Editor module is probably one of the most important parts of your CMS (if not the most). It allows you to access the text and images that appear in key parts of your website and change them with an editing tool similar in nature to tools such as Microsoft Word.
The Manage Pages page will present you a list of all pages on your website. There are actions for each individual page which can be found on the row for that page which will allow you to perform such tasks as previewing the page, copying the page, edit page layout, edit page settings, edit page content and deleting the page. You also have the static action to create a new page.
The following columns are available on the Manage Pages Page:
- Page
- # Sub Pages
- Last Updated
This action is available at the top of the table containing the page data
Create Page
This indicator will let you know if the respective page is currently showing on the front end of your site. If the indicator is green, the page is active. If the indicator is red, the page is inactive. You can change the current setting by clicking the indicator.
Preview Page
This button will take you to the page on the front end of your site as it appears to your visitors.
Copy Page
This will create a duplicate page which will have - copy added to the page name.
Edit Layout
This will take you to the Layout editor where you can manipulate the sizing/spacing of the sections for the page.
Edit Page Settings
This will allow you to change settings for the page itself, such as Page Name, Title, URL, SEO Settings, Permissions, Header Images, etc.
Edit Page Content
This will take you to the Front End Visual Page Editor where you will be able to make text, image and formatting changes to the content on the page.
Delete
This will delete the respective page.
Page Details
SEO
Access
Advanced
Misc
This section will give you the ability to edit the following fields:
Field | Description |
Parent Page | Sets where this page will fall in page hierarchy |
Name | Sets the name of the page |
Title | Sets the title that will appear in the web browser for the page |
Header | Sets the text that will appear in the header of the page |
Page Layout | Sets which pre-created layout the page will use |
Page Type | Sets whether the page is a built-out page or a file (i.e. pdf) |
File Name/URL | Sets the URL for the page |
Owner | Sets the owner user for the page |
This section will allow you to edit the Meta information for the page which will affect your SEO (Search Engine Optimization)
Field | Description |
Meta Description | Sets the description that Search Engines will display for your page in search results |
Meta Keywords | Sets keywords used for searching by Search Engines |
Change Frequency | Sets expected frequency that the page will be updated for SEO purposes |
Allow robots to index this page. | Sets whether robots (i.e. Google, Bing etc.) will be able to cache this page for their search engine |
Allow robots to follow links on this page. | Sets whether robots (i.e. Google, Bing etc.) will be able to use links on the page |
Show in Sitemap. | Sets whether this page will appear in your sitemap for your website |
This section allows you to set who has access to your page.
Field | Description |
Is this page active? | Sets whether this page can be accessed through the front end of your site |
What groups of members have access to this page? | Sets which groups have access to this page |
Show login screen when a guest tries to access a protected page? | Sets whether a login page will be shown if a visitor isn't signed in to your site and tried to access this page |
Field | Description |
Header Image | Sets the main image for the page |
Inherit Header Image | If set to yes, this page will use the header image from its' parent page |
Header Image HTML | This field is used for developers, please check the Developer Guide for more information |
Header Image Height | Sets the height attribute for the header image |
View Template | This field is used for developers, please check the Developer Guide for more information |
Icon Name | This field is used for developers, please check the Developer Guide for more information |
Show Subnav on this page? | Needs review |
Show Page in Main Navigation | Sets whether this page appears in the navigation bar on your website |
Show Page in Sub Navigation | Needs review |
|
This page will be filled with custom functionality for your site (if applicable).
In Manage Layouts, you can create new layouts, or modify existing ones.
The Layouts Table contains all the page layouts for your site. There are actions for each individual layout which can be found on the row for that page which will allow you to perform such tasks as duplicating the layout, editing the layout and deleting the layout. You also have the static action to create a new page.
The following columns are available on the Manage Layouts Page:
- Name
- Pages
Search
This will allow you to search for a specific layout.
Create Layout
This will bring you to the Create Layout section. For more information, please see Creating/Editing Layouts.
Duplicate Layout
This will create a duplicate layout which will have Copy of - added to the name.
Edit Layout
This will allow you to make changes to the layout.
Delete
This will delete the respective layout.
Layouts tell your page how it will be visually organized. This section allows you to edit the layout for your page.
Field | Description |
Save | Saves changes you have made to this Layout |
Layout Name | The name for this Layout |
Bootstrap Version | Sets what version of Bootstrap is being used to generate the layout. Normally, this is better left to developers. |
Pages | Lists what page(s) are currently using this layout |
Id | Displays the Layout Id of the element currently selected. |
Classes | You can enter custom CSS classes here separated by a single space to style the selected element. Normally, this is better left to developers. |
Styles | You can enter in-line custom CSS styles here separated by a single semi-colon. Normally, this is better left to developers. |
Tool Box
These layout elements are available for use in the Layout Editor
Structural Elements
New Container
New Fluid Container
New Row
New Column
New Div/Section
Clear Selections
A Container after being added to the Layout Sandbox
Containers are the base structural element for building a page layout. Normally, most other elements will need to go inside a container.
You may have more than one container in a page layout.
A Fluid Container after being added to the Layout Sandbox
Much like a normal Container, a Fluid Container is used to house other elements for your page layout.
The most important difference is that Fluid Containers are not limited by the sizing restrictions placed on regular Containers, namely the width restrictions.
A row after being added to the Layout Sandbox
Rows are another structural element, which must be placed inside a Container. The basic function of a Row is to be used to organize Column elements.
You may have more than one Row per Container.
A Column inside a Row after being added to the Layout Sandbox
Columns are structural elements which control the spacing and width of the elements inside them. They can be resized to shape the overall feel of the Row they are in. Clicking a Column in the Sandbox will give you the following options:
Show/Hide Column
This will set whether the Column and its' contents are visible to your visitors.
Delete
This will delete the Column and its' contents.
Move
This will move the Column within the Layout Sandbox when clicked and dragged.
Offset Left/Right
This will push the Column left or right within the row for spacing purposes.
Resize
This will change the width of the Column and its' contents, which will allow you to place multiple Columns on the same Row.
A Div/Section after being added to the Layout Sandbox
Div's perform the same functions as containers, however they are usually nested inside other elements with the express purpose of applying CSS styling classes.
The Clear Selections Button
This will deselect the currently selected element in the Sandbox which is useful for adding a new container-type elements that you don't want inside other containers.
Content Elements
Editable Area
Add Module
Header Image
Submenu
HTML Block
An Editable Region after being added to the Layout Sandbox
Editable Regions are the most used Content Element in most Layouts. These Regions can be used for anything from simple text to housing images/videos for your front end. Placing Editable Regions inside Columns allow them to be resized to fit multiple Regions next to each other on the same Row.
A Module Element after being added to the Layout Sandbox
Module Elements are used to house Site Administrator Module Elements such as Forms. Photo Galleries, FAQ's, etc. This Element can also be used to house Bootstrap Elements.
A Header Image Element after being added to the Layout Sandbox
This Element provides the location where the Header Image will be displayed on the page.
To be reviewed
An HTML Block Element after being added to the Layout Sandbox
HTML Blocks, as their name suggests, allow you to include HTML code in your page. Normally, this is better left to developers.
Example of a Normal Page Layout
Responsive Tabs
The Layout Sandbox allows you to design how your page will be visually represented on various sized devices. By clicking the tabs, you can manipulate how the sizing of the Elements will appear on the given device.
Something to note, due to Standard Best Practices, new elements can only be added in the Extra Small Screen tab. This gives you a mobile-ready design. Best practice is to finalize from the smallest screen to the largest screen.
Remember: Layout changes will carry forward to larger sizes, but not downward to smaller sizes.
This section will detail how you will make changes to the content on your website. To start, we have created a basic layout for a page, shown below:
Clicking the name of the page that you want to edit will bring you to the Visual Editor where you will have a preview of your changes before they are saved. Below, you can see the page using the basic layout from the above screenshot.
As can be expected, the sections on the Visual Editor align with the structure of the Page Layout.
Clicking into the Editable Region in the Visual Editor will provide the following toolbar:
This toolbar will give you access to formatting options that you may be familiar with such as Bold, Italic, etc.
To upload an image for use in an Editable Region, locate the above Image Button.
Clicking the button will bring up the Image Properties modal. Clicking Browse Server will open the Site Administrator File Browser.
Site Administrator File Browser
File Browser Action Buttons
Search
Allows you to search for a specific file based on its' file name within the selected folder.
Create New Folder
Creates a new folder to upload images to within the Site Administrator File Browser.
Select Folder
This drop down will allow you to select the folder you wish to browse for uploaded content.
Upload
This button will bring you to your system file browser which will allow you to select an image/file to upload.
Selecting the desired file and clicking Open will bring the file into the Site Administrator File Browser where you can then select it to add to the page.
Again, select the file and click OK-> to bring the file to the Image Properties Modal. Where you can now define attributes such as Width, Height, Alternative Text and Alignment.
Clicking OK will show you the newly uploaded file in the Page Editor along with your other content.
To insert a hyperlink for use in an Editable Region, locate the above Link Button.
Field | Description |
Display Text | Text that is displayed |
Link Type | Type of hyperlink, such as: URL, Link to anchor in the text, E-Mail & Phone |
Changing the Link Type will change the context menu, we will go over those here.
URL
Link to an anchor in the text
E-Mail
Phone
Field | Description |
Protocol | The method by which data is sent from one computer to another on the Internet. You can choose from: http://, https://, ftp://, news:// & <other> |
URL | The URL you would like the Display Text to link to |
Browse Server | Browse Site Administrator files to link to a specific file, a PDF for example. |
For URL there is a second Target tab on the Link modal. In this tab you can set the target of the link. Here are your choices :
Field | Description |
<not set> | ~ |
<frame> | ~ |
<popup window> | ~ |
New Window (_blank) | Opens link in new window |
Topmost Window (_top) | ~ |
Same Window (_self) | Opens in the window you are currently viewing |
Parent Window (_parent) | ~ |
TBD
Field | Description |
E-Mail Address | The email address that you would like to link to |
Message Subject | The default subject for the email |
Message Body | The default text you want to add to the email |
Field | Description |
Phone Number | The phone number for the call you would like to create |
Paste
Paste as Plain Text
Paste from Word
Clicking this button will paste the contents of your clipboard wherever your mouse cursor is currently resting in the editable area.
Clicking this button will paste the contents of your clipboard (without text formatting) wherever your mouse cursor is currently resting in the editable area
Clicking this button will paste the contents of your clipboard (removing Word-specific text encoding) wherever your mouse cursor is currently resting in the editable area
When selecting the module in the Page Editor, you will see the above drop-down box. This will allow you to choose which type of element you would like to include in the specified section.
The options in the drop-down box include, but are not limited to, Photo Gallery Module, Bootstrap Element, FAQ, Form Module, etc.
Once you have made your selection, clicking Apply will allow you to choose the specific item you want to include.
This section will allow you create and modify complex HTML elements such as Text Carousels, Accordions, Horizontal and Vertical tabbed sections.
The following columns are available on the Bootstrap Elements Page:
- Name
- Type
- Number of Items
This will take you to the Create Element section.
This will allow you to edit the element.
This will delete the element.
Field | Description |
Accordion | A component that organizes content within collapsible items. Accordion allows the display of only one collapsed item at a time. |
Horizontal Tabs | A component that organizes content within a series of horizontal tabs. Horizontal Tabs allow the display of only one tab at a time. |
Vertical Tabs | A component that organizes content within a series of vertical tabs. Vertical Tabs allow the display of only one tab at a time. |
Carousel | A component that organizes content within a revolving section. Carousel allows the display of one section at a time. |
Manages the menus for the website (Main Navigation, Header, Footer, can be placed almost anywhere else)
Each Menu will have its own table inside the menu editor. Here you can drag and drop menu elements
- Title
- Destination
- Icon
- Target
Edit Menu
Synced/Not Synced
Once a menu item is de-synced it cannot be synced again - you must create a new menu item, or drag that item back to the menu in question from the Menu:Page Editor menu
Menu items cannot be deleted if they are currently Synced, or the parent of another menu item
Clicking theEdit Menu button will bring you to this page:
Field | Description |
Name | Set the name for this Menu |
Menu Type/View | For Developer Use |
Is Available | Sets whether this menu is available for use, or hidden from use |
Creates menus for the aforementioned Manage Menu Section
Last modified 3yr ago