# Page Editor
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
**Create Page**
This will take you to the **Create Page** section. For more information, see [Creating a Page](/user-guide/modules/page-editor.md#create-page)
### Per Page Actions
**Activate/Deactivate**
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**.
### Edit Page Settings
{% tabs %}
{% tab title="Page Details" %}
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 |
| {% endtab %} | |
{% tab title="SEO" %}
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 |
| {% endtab %} | |
{% tab title="Access" %}
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 |
| {% endtab %} | |
{% tab title="Advanced" %}
| 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** |
| |
| ------------ |
| {% endtab %} |
{% tab title="Misc" %}
This page will be filled with custom functionality for your site (**if applicable**).
{% endtab %}
{% endtabs %}
## 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
**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](/user-guide/modules/page-editor.md#creating-editing-layouts).
### Per Layout Actions
**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**.
### 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
| 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**
**Structural Elements**
{% tabs %}
{% tab title="New Container" %}
**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**.
{% endtab %}
{% tab title="New Fluid Container" %}
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.
{% endtab %}
{% tab title="New Row" %}
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.
{% endtab %}
{% tab title="New Column" %}
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.
{% endtab %}
{% tab title="New Div/Section" %}
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.
{% endtab %}
{% tab title="Clear Selections" %}
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.
{% endtab %}
{% endtabs %}
**Content Elements**
{% tabs %}
{% tab title="Editable Area" %}
**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**.
{% endtab %}
{% tab title="Add Module" %}
**Module Elements** are used to house S**ite Administrator Module Elements** such as **Forms**. **Photo Galleries**, **FAQ**'**s**, etc. This **Element** can also be used to house **Bootstrap Elements**.
{% endtab %}
{% tab title="Header Image" %}
This **Element** provides the **location** where the **Header Image** will be displayed on the page.
{% endtab %}
{% tab title="Submenu" %}
To be reviewed
{% endtab %}
{% tab title="HTML Block" %}
**HTML Blocks**, as their name suggests, allow you to include **HTML code** in your page. Normally, this is better left to **developers**.
{% endtab %}
{% endtabs %}
**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**.
{% hint style="info" %}
**Remember: Layout changes will carry forward to larger sizes, but not downward to smaller sizes.**
{% endhint %}
## Create Page
For more information on these sections, please see [Edit Page Settings](/user-guide/modules/page-editor.md#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** o**ptions** 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
**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.
### Hyperlinking Text
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.
{% tabs %}
{% tab title="URL" %}
URLs are the address of a Web page on the internet. For example, [https://www.siteadministrator.com](http://www.siteadministrator.com/)
| 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\:// & \ |
| 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 |
| ------------------------ | --------------------------------------------- |
| \ | \~ |
| \ | \~ |
| \ | \~ |
| 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) | \~ |
| {% endtab %} | |
{% tab title="Link to an anchor in the text " %}
TBD
{% endtab %}
{% tab title="E-Mail" %}
| 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 |
| {% endtab %} | |
{% tab title="Phone" %}
| Field | Description |
| ------------- | ------------------------------------------------------ |
| Phone Number | The phone number for the call you would like to create |
| {% endtab %} | |
| {% endtabs %} | |
### Pasting Text
{% tabs %}
{% tab title="Paste" %}
Clicking this button will paste the contents of your clipboard wherever your mouse cursor is currently resting in the editable area.
{% endtab %}
{% tab title="Paste as Plain Text" %}
Clicking this button will paste the contents of your clipboard (**without text** **formatting**) wherever your mouse cursor is currently resting in the editable area
{% endtab %}
{% tab title="Paste from Word" %}
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
{% endtab %}
{% endtabs %}
### 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
**Create Element**
This will take you to the **Create Element** section.
### Bootstrap Element Per Element Actions
**Edit Element**
This will allow you to **edit** the **element**.
**Delete element**
This will **delete** the **element**.
### Bootstrap Element Types
| 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. |
## Manage Menus
**Manages** the **menus** for the **website** (**Main Navigation**, **Header**, **Footer**, can be placed almost anywhere else)
### Menu Tables
**Each Menu** will have its own **table** inside the **menu editor**. Here you can **drag and drop** **menu elements**
* Title
* Destination
* Icon
* Target
### Menu Table Actions
**Edit Menu**
**Create Menu item**
**Delete Menu**
### Per Menu Actions
**Activate/Deactivate**
**Synced/Not Synced**
{% hint style="warning" %}
**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**
{% endhint %}
**Delete Menu Item**
{% hint style="info" %}
**Menu items cannot be deleted if they are currently Synced, or the parent of another menu item**
{% endhint %}
### Edit Menu Settings
Clicking the**Edit 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 |
## Create Menu
Creates menus for the aforementioned Manage Menu Section
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.siteadministrator.com/user-guide/modules/page-editor.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.