Pages Entity

The pages module controls the page content. The pages module can be found on the menu under Content » Pages.

It is also possible to create page hierarchies and organise pages into groups. In this case the page URL’s will be reflected as per the hierarchy setup. It is also possible to override the URL structure by assigning “custom urls” to a page. 

The Pages application is located under the Content applications category:

Manage Pages
Menu options

• List - Lists all the pages, both published and unpublished. This is where you can create new pages, edit and delete existing pages.

• Configuration - Controls options for tagging & category support, as well as how the page tree list is displayed.

List Pages

All the pages are presented within a table format. It is possible to filter results by Title, Slug or Created date, as well as reordering the results by simply dragging and dropping the items into a new position (the same action can be performed by editing the page and changing the parent category). 

The publish status on each page item can be changed from List page, as well as “Edit Page” & “View More Actions”:

If permissions allow users can also do the following actions

• Add child - create a page underneath the current page

• Duplicate - duplicate the page with the same configuration, including components

• View in Frontend - visit the URL that this page is viewable on

• Delete - remove the page and its contents from the CMS 

• Permissions - manage the permissions settings

• Check Access - Use this tool to check who has/does not have access to a specific page

Configuration

Within this area, it is possible to modify some of the default pages functionality, such as:

• Use tags for pages: Determine whether pages should be taggable. This does not remove existing tags from pages.

• Use categories for pages: Determine whether pages should be categorizable. This does not remove existing categories from pages.

• Display property to use in tree / hierarchical navigation (Page Title or Page Slug)

• Default published: Controls whether pages are published by default (when permissions are sufficient)

Generally, this is not needed once the system is set up. 

Create a Page

In order to create a page we first need to determine under which page this new page will live. Once that has been defined click on the “three-dots” and select the “Add subpage” action item. 

For example, to create a page under the parent “General” page click the “three dots” on the General page to do so:

To add a page on the same level as the General page, then click on the “three dots” > Create subpage under “User docs” page on the above example.

“Add subpage” will redirect to the Edit Page admin where the page can be built and configured.

The Page admin area is divided into 4 main configuration areas:

• Content: this area is reserved for any content related updates such as Page Title, Layouts, Page Areas etc. which also includes the use of components to build unique page layouts.

• Details: this area holds specific page information such as Owner, Slug, Parent, Tags, Categories etc. 

• SEO: this area is reserved for expanding the SEO information on the page by adding SEO Page Titles, Descriptions, Robot Settings etc. 

• Permissions: use the permissions tool to configure who has access to this particular page. Set Read/Write/Publish/Admin permissions to single users or user groups. 

Add the Page Title

The title of the page is used in the listing page. If required Pages can also have an alternative title for SEO purposes (see SEO Settings). 

Define the Page Layout Template

(Optional) Depending on the system setup, you may see the option to select from multiple page layouts. In general, the default layout is used for building simple layout pages such as standard full-width pages. 

In addition to the default layout, it is also possible to include structurally more advanced layouts, for example a Page with a Sidebar, or Page divided into two columns etc. 

Depending on the selected layout, the structure of the Page admin will change accordingly which will include all the features and content areas the selected layout may hold. 

For example, the default layout on the above example includes Layout Style & Page Sections area, while Two Column Page includes Left-Section & Right-Section areas:

Default Layout:

Two Columns Layout:

Layouts can hold custom fields, single components, components collections etc. In terms of customisations there are no limits at all. 

Layouts templates can have different layout areas and supported component layouts. These are managed in Content » Common » Layouts. This way only relevant components to the layout will be available for the admin to use, which greatly improves the user experience and ability to create quite complex pages with ease. 

Add Content & Assets via Components

Pages are made up of component areas, your pages templates may have one or more areas for content to be displayed. 

In the example below we can see a library of components that are ready to use on any page on the website. Some of them might be layout specific, however the system allows us to determine that within the admin. Instructions how to do so can be found in the Layouts documentation section. 

To add a new component to a Page click the “Add new component” button, the popup will open with all the available components assigned to this particular layout, in this case Default layout:

There are two types of components:

• Default Components: components that can be used on every page, however they will need to be configured and setup each time

• Global Components: components that can be setup only once and used across many pages. The great benefit of the Global Component is that its content can be managed from one central location. So if the GC is present on 100 pages, this can be changed only once, and all the components on other pages will update accordingly at the same time. Global Components can be setup in the Content >> Common > Global Components area, and added to the page via above pop-up (Global Components tab)

Use the search bar to quickly find the component you would like to use on the page, or click on the component from the list if it is already there. 

Note: it is also possible to replace the “Puzzle” icons, which are set as a default for all components. This can be done in Content >> Common >> Layouts area (edit each layout and upload a custom image). 

The added component will be loaded into the Page area:

In order to build a page different components with different look and feel can be added to the list. In that case each component would be its own section on the page. To add a new component repeat the above, as an example here we will use the Features component:

Each component will have a set of settings which can control the presentation of the content / section. For example on the Two Column component we have the following:

• Section Style: ability to change the style of the section, eg. changing the background color which will then update the content colours as well. For example, if we choose a dark colour the content will automatically be updated to light colour so it stands out. 

• Right Width / Left Width: these settings control the width of each column, this allows us to create many different width compilations such as 1/3 & 2/3, or 1/2 & 1/2 etc. where content can be on one side and image on the other. This can also include forms, accordions, tabs - all depending on the component functionality requirements which are defined at the start of each project. 

• Left Content / Right Content: similar to page sections on the main Page admin, each component can have the same, this is called a Component Collection area. Within the admin we can define which layouts should be included under each component, making it easier to manage as only relevant layouts will be present. In the Two Column component example the only supported layouts are: Image, Page Title, Simple Content. 
  
  

Two Column = supported layouts:

The next step is to go back and populate the information in the Two Columns component. 

After that, we should do the same with the Features component. With the Features component the structure is slightly different compared to the Two Columns component, where all the inner layouts are kept under one component collection area. In this case, in order to control the width on each item, it has to be configured within each inner component. This demonstrates how components can be configured in many different ways, while achieving a similar end result. 

DefaultWidth: this setting defines the width of all boxes in the below list, in which case the width does not have to be configured within each box item. 

As a next step let’s now create a couple of boxes in the features component and see how that will look like on the frontend. Below is the example of the configured page:

• Two Columns: ½ Image + ½ Content

• Features: three boxes, ⅓ width each
  
  

Update SEO Settings

SEO Title - Used for optimization of the title tag

Robots Setting - used to tell search engines what to do with pages and links on those pages. There are 2 settings index and follow, and 4 possible setups

• Index & follow

• Index but don't follow

• Don't index, but follow

• Don't index and follow 

Index - allows pages be in the search engine index 

Follow - allows linked pages to be passed 'link equity' for that page, i.e. to show a connection between that page and the linked pages.

Meta Description - can be used for the description on search engines results

Meta Keywords - can be used for meta keywords, used by some search engines

Canonical URL - used to be a pointer to the single source of a page. In the case that there are multiple or similar versions of pages, you can tell the search which one is the canonical version of this content. See rel="canonical" on Google Search for Developers.

Alternative URLs - used to tell search engines about other locations of the pages content. See rel="alternate" on Google Search for Developers. 

Share image - can be used for certain sharing services, see meta property="og:image"

Publish the Page

Once done with editing the page click “Save” to create the page. In order to publish the page enable the publish toggle positioned under the “Save” button in the right hand sidebar. 

The end result can be viewed on the link below:

https://theme3.coredna.com/documentation 

In the event you have access to the Core dna Theme 3 Sandbox the page is also available for review in the Pages application in the Admin:

Please review the below quick how-to videos for more examples on how to use Core dna Components for building pages:

https://theme3.coredna.com/docs/page/welcome

Page Tools

Core dna pages support saving drafts, versioning, publishing settings and a live preview as native functionality. 

Page Drafts

Use Page Drafts action to save a page while editing, and continue at a later stage without publishing the site. The draft will be saved within the versioning area on the page admin. 

Visibility Options

Use the visibility options positioned within the right sidebar to schedule the page to be published sometime in the future, or immediately by enabling the Publish toggle button:

Content Versioning

All saved changes to the page are recorded in the content versioning area. This can help restore content to its previous version in the event there is an issue on the published page that needs to be resolved. 

Versioning supports four actions:

1. Set the version as the current page version (restore to previous version)

2. View the previous page version

3. Compare the previous page version with the current version

4. Delete the page version (only available for super admins, not normal admin users) 

Custom URL

In certain circumstances, you may want to have a page be available at a different location. For example, there is a landing page at yourdomain.com/landing-page, but for organizational purposes this page is somewhere else in the folder structure (yourdomain.com/other/landing-page). With the custom URL feature, it is possible to set a link that will open the page on the yourdomain.com/landing-page URL. 

Note: the slash before the URL is important. We also check to make sure the URL is valid and not currently in use, you will see the green arrow if this is an allowed URL.

Example Scenario:

We have a page available only at yourdomain.com/example

By adding /tv-campaign in the Custom URL field the same page will be available on yourdomain.com/tv-campaign

Preview

Live preview allows you to preview the content and the relevant content areas as it would appear on the page. This feature is useful to see what a page would look like before publishing a new version.

Click on the Preview button on the page positioned next to the Save button in the page sidebar. Once clicked the admin page will narrow down to half and the preview page will be shown on the right: