Editor Basics

To build your Contentbox page add preset snippet blocks to the page then change the text and images to your own content.

Contentbox pages can also have different backgrounds, background images and section heights.

The Contentbox editor has two main areas - Section & Content

Section Area

Affect the outer container, height, background image, padding etc

Content Area

Affect the inner content where the snippet blocks are added - content width, background colour, alignment etc.

Editing your Contentbox Section

Adding content to a Contentbox Section

Click into an existing snippet block to bring up the ADD SNIPPET BLOCK button, or click and drag the content snippets into the page area from the right hand snippet sidebar.



Adding a new Section

Click the + ADD SECTION button top right when editing a section, then choose the section layout required from the popup.


Changing the Section Background image

If your Section already has a Background Image

Click the BACKGROUND button at the bottom of the section.


If adding a Background Image

Click the section settings cog icons, either at the top-left or the bottom right to bring up the Contentbox settings popup window.


Launch the settings modal as per the above instructions then click the blue camera icon under BACKGROUND IMAGE to launch the image wizard.



Changing the Section Background colour

Click the section settings cog icons, either at the top-left or the bottom right to bring up the Contentbox settings popup window.


Launch the settings modal as per the above instructions then click BACKGROUND COLOUR field to launch a colour picker, or paste in a colour value.



Setting the Section Height.

Click the section settings cog icons, either at the top-left or the bottom right to bring up the Contentbox settings popup window.


From the settings that appear, choose a Section Height from the GENERAL PROPERTIES dropdown.


Click into the BACKGROUND COLOUR setting to bring up the colour picker.

Setting the Content Width

Click the section settings cog icons, either at the top-left or the bottom right to bring up the Contentbox settings popup window.


From the settings that appear, choose the Content Width from the GENERAL PROPERTIES dropdown.



Special Content Width settings

Default Width - Applies the max-width as set in the template.

Full Width - Sets the content to full width of the browser, but allows some spacing on the left and right edge.

Max Width - Sets the content to full width of the browser, no padding.


Changing the Padding above and below the Content

Click the section settings cog icons, either at the top-left or the bottom right to bring up the Contentbox settings popup window.


From the settings that appear, choose the Vertical Spacing  from the GENERAL PROPERTIES dropdown.




A Section can have more than one Content Area

Two Section Column Layout

Each Section Column has its own background image, padding etc

Each Section Column can have its own Content Area

As with the standard Section you can add background images, padding etc.