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.

Manage Pages

Pages Table

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

Page Table Actions

This will take you to the Create Page section. For more information, see Creating a Page

Per Page Actions

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.

This button will take you to the page on the front end of your site as it appears to your visitors.

This will create a duplicate page which will have - copy added to the page name.

This will take you to the Layout editor where you can manipulate the sizing/spacing of the sections for the page.

This will allow you to change settings for the page itself, such as Page Name, Title, URL, SEO Settings, Permissions, Header Images, etc.

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.

This will delete the respective page.

Edit Page Settings

This section will give you the ability to edit the following fields:

Manage Layouts

In Manage Layouts, you can create new layouts, or modify existing ones.

Layouts Table

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

Layouts Table Actions

This will allow you to search for a specific layout.

This will bring you to the Create Layout section. For more information, please see Creating/Editing Layouts.

Per Layout Actions

This will create a duplicate layout which will have Copy of - added to the name.

This will allow you to make changes to the layout.

This will delete the respective layout.

Creating/Editing Layouts

Layouts tell your page how it will be visually organized. This section allows you to edit the layout for your page.

Properties

Tool Box

Structural Elements

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.

Content Elements

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.

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.

Create Page

For more information on these sections, please see Edit Page Settings

Edit Page

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.

Uploading an Image

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.

File Browser Action Buttons

Allows you to search for a specific file based on its' file name within the selected folder.

Creates a new folder to upload images to within the Site Administrator File Browser.

This drop down will allow you to select the folder you wish to browse for uploaded content.

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.

Hyperlinking Text

To insert a hyperlink for use in an Editable Region, locate the above Link Button.

Changing the Link Type will change the context menu, we will go over those here.

URLs are the address of a Web page on the internet. For example, https://www.siteadministrator.com

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 :

Pasting Text

Clicking this button will paste the contents of your clipboard wherever your mouse cursor is currently resting in the editable area.

Adding a Module Element

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.

Bootstrap Elements

Bootstrap Elements Table

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

Bootstrap Element Table Actions

This will take you to the Create Element section.

Bootstrap Element Per Element Actions

This will allow you to edit the element.

This will delete the element.

Bootstrap Element Types

Manage Menus

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

Per Menu Actions

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

Edit Menu Settings

Create Menu

Creates menus for the aforementioned Manage Menu Section

Last updated