Templates

1. Place your cursor in a new line/paragraph where you want your template to appear.
2. Go “Insert template” (the Rubber Stamp icon).
3. Select the type of template your require.
4. SAVE. You should see your template in the text editor.
5. Fill in the areas with your content.
6. SAVE PAGE

TAKE NOTE when adding content to your templates

Code can be easily missed or deleted which is why these templates get messed up. Just placing your cursor in the correct place is difficult to do when open closed containers are already in place.

Have a look at the code structure of the layout by:

Clicking the “show blocks” icon. You can now see that formatting of the page, that’s the dotted lines and the small text div etc. (They may not look inline in editing mode but will be ok when viewed live.)

To get your cursor in the correct place:

Go to the Source code

Under the menu: view/source code (in the editor above Bold, Italic etc).
See if you can find the place where you want to insert your new Open/Close container template.
On a new line in the code, type in 'xxxxx' so you will be able to see it in the editor area.
Click OK

eg.
<p>your code may look something like this</p>
</div>
Your new template should go in here, add in a marker, type xxxx here
<div class="details-opener">
<h4>Hawkes Bay</h4>
</div>

Different types of templates

Place your cursor in a new line/paragraph where you want your template to appear.
Go “Insert template” (the Rubber Stamp icon).
Select the type of template your require.

Link with Popup

Columns

To make columns on your website

The page layout is based on a 12 column per row layout, so if you want 3 columns choose 3 Cols Equal (3cols by 4cells). Choose 'stacked' so that the columns will stack under one another on a mobile screen.
Select the template that you want.
SAVE You should see a number of cells in your editor.
Be careful not to delete the formatting, leave the cell text in there and delete it after you have placed in your images and copy.
Place your images and text in the cells. Delete the word cell.
Start a new paragraph (return). Repeat step 2. to 6.

12 column per row layout: All cols must to add up to 12.

The 12 column grid is an invisible design system that holds a design together. The grid is made up of a series of invisible (or sometimes visible) vertical lines that break the screen into 12 separate columns.

3cols= 3x4cells, 2cols= 2x6cells, 4cols= 4x3cells or 2cols= 2cells + 10cells etc

See ready made templates in action that you can copy and paste into your page layout.

BACK TO MENU

Content Container for Extra & Bottom Content

(Responsive Container from bootstrap)

To limit content to a max-width of 1300px and have space either side of your content, use a 'Container'.

A single responsive container for adding content. Used mainly in Extra Content or Bottom Content to contain the width of text and images to a 1300px max. Use as a single container or insert other templates within it. eg rows and columns.

Place your cursor in a new line/paragraph where you want your 'Container' to contain your content to appear.
Go “Insert template” (the Rubber Stamp icon).
Scroll down and select 'Responsive Container from Bootstrap'
CLICK SAVE
Your container will appear in the page editor
This content will be contained in a box that has max width of approx 1140px that will shrink on smaller devices. You may now add more content or add a bootstrap row template.
Highlight the text above and place your new content in that Container.
You can also place template columns inside that container.
Save Page

BACK TO MENU

Open/Close container

The plus/negative open closing thingy

To close the container, click on the negative icon above.

Insert an Open/Close container into your page layout

Place your cursor in a new line/paragraph where you want your Open Close container to appear.
Go “Insert template” (the Rubber Stamp icon).
Scroll down and select Open/Close container
CLICK OK
Highlight the text that says "Place image or text here that will open the container"
Type in your Heading that will appear next to the +.
Delete the extra + it's not needed.
Style it with a Heading levels.
Highlight the text that says "Place content here that will be hidden and revealed by the opener"
Type in your text that will be revealed when the user clicks onto the +.
Add any links to the text and style it.
Save Page

Plus/minus symbols not showing?

Contact yvonne@flightdec.com

Want to have different symbols instead of plus minus?