Header, content & footer elements

Create your first layout

We are going to create our first page layout. It's recommended that you start with the standard layout for a content page. In a later phase you can create layout variants for homepage, sidebar, etc... 

If you started from a theme or layout these layouts are already created for you. You can however delete, edit and add your own elements to these pre-installed layouts. In this case click the edit button to open the layout in the design editor.

Screenshot_327

When you started from scratch go to the design start page, add a name for your first layouts and click create new (1).

Add design elements

The design editor opens in placeholder mode. This mode uses placeholder content when rendering design elements and page content.

To add a design element to your layout simply click the plus button next to header (1), content (2) & footer (3).

Screenshot_328

 

Browse through the available catalogue of design elements per section (1). Made your own (3) custom layout components? Ask our support to make your personal design store (2) for each section . 

Screenshot_329

 

Click the preview button to see a wireframe example of the design element. Click the Add to site button to install the element to the corresponding section.

Learn more about layout structures

 

Style Elements

This is how a layout structure might look like after adding multiple design elements.

Screenshot_330

(1) Click the paintbrush icon next to the design element to style the element

(2) Click on the gear icon to change javascript functionalities

(3) Go to the code editor of this element

(4) Delete this element from your layout

(5) Click the save layout button when you are happy with how your placeholder layout structure looks. Your layout is now ready to use for the CMS application. More about publishing layouts 

(6) Go back to the design app overview page

(7) Change the responsive view of the preview in your screen

 

Screenshot_331-1

Browse through the style properties (1) of the design element. When you see an orange ! circle (2) next to the property it indicates that the property has been used.

(3) Change the custom css build for this layout component with teh css editor

(4) Change the style properties for an element and click the green save button to save your changes. Learn more about the design editor here