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.

createlayout

When you started from scratch go to the design start page, add a name for your first layouts and clickcreate new.

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 green plus button next to header, content & footer.

step 1

Browsethrough the available catalogue ofdesign elements per section.

step 2

Click thepreviewbutton to see awireframe exampleof the design element. Click theAdd to sitebutton to install the element to the corresponding section.

step 3

Learn more about layout structures: http://knowledge.sitemanager.io/sitemanager-design/design-editor/layout-structure

Style Elements

This is how a layout structure might look like after adding multiple design elements. To style an element we click thegreen painbrush iconnext to the design element as shown below.

step 5

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

Browse through thestyle propertiesof the design element. When you see adark green ! circlenext to the property it indicates that the property has been set and used.

step 6

Change the style properties for an element andclick the green save buttonto save and generate a new css file.

step 7

Learn more about the design editor here: http://knowledge.sitemanager.io/sitemanager-developer/introduction/design-editor-components

Publish Layout

Click the publish layout button when you are happy with how yourplaceholder layout structurelooks.

Your layout is no ready to use for the CMS application.

step 8

More about publishing layouts: http://knowledge.sitemanager.io/sitemanager-design/design-editor/publish-layout