Adding a New Multi Pane Content Page

This is especially useful if you want to create a page that has sections that have alternating background colours.

The below screen grab shows the effect that can be created.

To set this up initially, log into the CMS and create a new page content page.

Before saving the initial page, set the page template to be used to ‘Parallax Template - Editor’

Once the page has been created, edit the page and go to the ‘Content’ tab at the top.

You should see a blue button ‘Add New Content Pane’ at the top of the page. Press this button.

You will now be asked to set some parameters for this page. (Don’t worry you’ll be able to add the actual content in a later step).

Let’s study the most commonly used options on this screen.

Ref Name: Give the content pane a name (this will only appear in the CMS as a point of reference for yourself.) Give it a meaningful name like Top section.

Content Width: If you tick this box, the background colour for this container will extend out to the very edge of the screen, I recommend that you click this to get the best visual effect for this template.

Show on Website: This is ticked by default, if you untick this it will not show on the website.

Padding Top & Padding Bottom: This setting refers to the gap between your content and the edge of the content pane (vertically). By default, it is set to 60px but you can alter this if you like.

Background Colour & Background Image: If you want each section to alternate background colours or background images, you can define those here. If you want to use a background image, use a large one (1200px wide) they generally tend to work better with no content overlayed on the top of them.

Background Videos: As an alternative to using colours or images you can also embed YouTube videos to act as a background, just paste in the YouTube embed id.

Once you have saved you’re changes, you will be taken back to the previous screen, you should see you new content pane on the list. Note that the title of the pane will be the Ref Name that you defined first.

Now that the pane has been set up, you will be able to add content to it.

Let’s look at the actions dropdown list on the right hand side.

Select ‘Edit Content’ from this list, you will then be taken to the familiar content editor where you will be able to add content for your first content pane.

Once you have finished adding content, click on the green ‘Save Changes’ button in the top right-hand corner.

That’s all there is too it for your first content pane, you can now add as many as you like.

Once you have added a few content panes, you screen should look something like this.

Its worth noting that the website will display the content panes in the order in which they appear on this screen. If you need to re-order items on this screen, you have a few options available to you in the action’s dropdown menu on the right-hand side. Lets look at these in detail now.

 

Move up: Will move the current pane above the pane above.

Move Down: Will move the current pane blow the pane below.

Duplicate Pane: This will make a copy of the current pane, which can be useful to save time when adding content.

Delete: Deletes the current row.

Edit Properties: Will take you back to the properties screen, which will allow you to change background colours or images etc.

Don’t forget to check in your changes once you have finished adding or editing panes.