Table of Contents
Creating a Page
While the website template includes already established pages, it is also possible to add a new page. In order to do so, you will need to be editing the website. You can edit the page by navigating to My Sites and selecting the edit icon or Edit Site from the dropdown arrow on the relevant site tile.
Alternatively, you can access the site dashboard and select Edit Site.
Once you are editing your site, select the page icon located in the secondary toolbar at the top left-hand side of the page, then choose + Add New Page from the bottom of the menu. You will then be presented with the following page options.
- Page – A standard blank page
- Dynamic Page – Including a range of customizable widgets
- Member’s Page – Only visible to site members
Once the page has been added, it will immediately appear in the page menu. You will need to name the page either as the page was added or by selecting the 3-dot menu and choosing Rename.
Additionally, you will also need to select SEO basics from the 3-dot menu. This will provide options to add a URL Slug which is an extension of your domain name, for example www.mysite.com/newpage. You will also be presented with options to give the page a title and add a description of the page. These are useful options to increase the site’s visibility on search engines such as Google. For further information about Search Engine Optimisation (SEO) tips and tricks, click here.
Now that the page has been created, you can begin editing and customizing this by either selecting the relevant page from the page menu or by selecting the corresponding 3-dot menu and choosing Edit Page.
Sections
The header and the footer will appear on the new page by default, along with a large section in the middle. The remainder of the page will be blank, this blank page is often referred to as the Workspace or Canvas.
A section acts as the building block for each page, this is where you can add a range of elements and content. You can move the section around and adjust this by using the resize handles.
You can also add as many sections as you like by selecting the + icon at the top or bottom of the section. There are three options when adding a section:
- Blank – a blank rectangular area spanning the width of the page
- Grid – a 2-dimensional layout that allows you to arrange content in columns and rows
- Layouter – a selection of Columns, Rows, Mosaic, Slideror Slideshow
A section can be reordered by selecting the 3-dot menu from the floating action bar and selecting Move Up or Move Down. Sections can also be reordered using by selecting the Layers option from the secondary tool bar, then dragging the section to the desired position.
Padding
Using padding will maintain a set distance between the area of section and its edges. From the Inspector panel in the top right-hand corner, under Position, choose your desired value in pixels (px) or percent (%). These paddings act like a buffer between the sections within the page.
Adding Elements
You can add an element by selecting the + icon in the top left-hand corner. It is usually recommended to add a container which then holds additional elements such as text, media, and widgets. This allows you to control the design of the area in which the container sits.
Editor X has a smart docking system. When you drag an element into a container, it automatically docks to the closest edges. You can override this and manually set your docking from the Inspector menu.
Similar to padding, using the margins will maintain a set distance between an element and the edges of the container it’s docked to. From the Inspector panel, under Margins, choose your desired value in pixels (px) or percent (%). You can also add margins to the sides of an element that isn’t docked. These margins act like a buffer between the element and the container or gridlines around it.
The image below provides an example of some of the element options available when creating a page. The area at the top is a Grid with two columns, whereas the area below is a Section.
Note: Each group of elements sits within its own container within a section (2 sections and 4 containers). For information about Element hierarchy, click here.
While this article explains the basics of creating a new page, there are a range of Editor X tutorials available here.
Once you are satisfied with the newly created page, we highly recommend adding the page to a menu in the header. For information about managing menus, click here.