Basic Page Creation

Page Structure

The pages in the site are built using Paragraphs. Paragraphs represent sections of the page, there is a paragraph for the Header section and a paragraph for the body text. Sliders and maps are also contained inside a paragraph. Paragraphs can be nested, for example the title has a main "Background Image" paragraph and inside it there is a "Basic" paragraph that has the Title of the page.

Paragraph types

The available paragraph types are:

  • Basic: The most basic type, creates a paragraph with a WYSIWYG box where you can write any content.
  • Background Image: Used as a container, allows to add an image that is used as the background and allows to add children paragraphs inside as the content.
  • Column Wrapper: Allows to add children 2 paragraphs that will be displayed one besides the other horizontally.
  • Image Gallery: Adds a paragraph that can hold images to create a gallery like the one in the Room pages.
  • Blank Paragraph: Adds a blank container paragraph, it is used to create complex sections where the elements inside have specific positioning rules.
  • From Library: Adds a paragraph from the library of stored paragraphs. These are paragraphs that are shared between different pages, a list of them can be seen here. Any change to this paragraphs will be reflected in any page it is being used.

To add a new paragraph you can go to the bottom of a container paragraph or the bottom of the edit page and add one:

 

Creating a new Page

The easiest way to create a new page is by cloning an existing one. In the main tabs menu click the "Clone" tab, select all the checkboxes and click the "Clone" button at the bottom. This will create a new page with a copy of the Content

 

In the new page, after adding all content you can modify the page settings in the panel to the right, there you'll find:

  • Current Revision and Status: All pages are attached to a revision system that stores the edits of the page. you can specify in the Log Message the edits made to keep track of what is different. In the tab menu, clicking on revision will take you to a page that lists all the revisions. You can revert back to a different version of the page at any time. By default, all edits that are saved will create a new revision. If you uncheck the "Create New Revision" box, the current revision will be updated.
  • Menu Settings: This section allows to add a link to the page in a menu. 
  • SEO: This section allows to edit the page Metadata
  • Simple XML Sitemap: Allows to configure how the page is added to the sitemap, by default all published pages are set to be added to the sitemap.
  • URL Alias: Allows to configure the Page URL here as a relative path.
  • URL Redirects: Shows the list of redirects that point to the page, if there are any.
  • Authoring information: Allows to set information about the user that created the page as well as date and time.
  • Promotion Options is not used.

 

Once Everything is set and ready to publish, just make sure the "Published" checkbox is marked and then click "Save" at the bottom of the page.

 

Editing Content

Al text inside the WYSIWYG box in a Paragraph can be formatted, you can use the Format Dropdown to select any predefined format.

formatting list

 

Special Elements

To add special predefined formatting to certain elements, you'll need to add a Styling Class. To do this, select the element, then click the "Selector Panel" button:

options

This opens the "Abbreviation Properties" panel. In there you'll need to add the corresponding Class to format the selected element:

properties

 

The classes for special elements you need to add are:

You can also select any element and open the "Abbreviation Properties" panel to see the classes that the element uses so you can copy them to another element.

 

Adding Images

To add images in the WYSIWYG yoneed to click the "Assets" button.


This opens the Media Browser where you can search for an image or Upload a new one.


After selecting an image you'll be presented with a panel to confirm your selection, click "Next". This will load the Image Settings panel. Make sure to set the option of "Display As" to "Thumbnail" and click "Embed."