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.
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).
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 .
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.
(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
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