Adding Design Structures

A design structure is defined as the 'Frame of the Page'. 

This means Everything Surrounding the main Bar of the body is part of The design Structure:

  • The Header
  • The Footer
  • The Side Columns (In two/three columned website layouts)
Additionally it includes also the  Layout of the page : 

  • Page Width  
  • Number of side Columns
And also predefined attributes of the main bar/ the body:

  • Default Fonts
  • Spacing
  • Background
  • Border

Note: The Spacing/backgrounds/Border of Rows/Columns in the page are not a part of the design structure


You can add unlimited Design Structures to your website. 

Each Page can be assigned  a different design structure or the same structure.



Having the same design structures for a few pages means the same properties for that specific design structure will appear in all the pages that follow it. The main benefit is to allow you to change the surrounding design of a set of pages at once (Without changing each page one by one).



Some benefits of having different design structures include creating LANDING PAGES within your website that have a completely different design to the other sites inner pages. By having multiple design structures you may even have a different design for each page.


Here is how to add a design structure:

Step 1: Get into Page Settings by selecting the GEARS icon on the dashboard. 

Step 2: Select Page Settings from the drop down menu

Step 3: Select the page you want to change design structure or add a new design structure to. The page you're editing will be in BLUE. Step 4: Add a new design structure or assign an existing design structure to the page

Below is an example of applying 2 different design structures to 2 different pages on the same website. Design Structure 1 and Design Structure 2. Now creating another page in your site and assigning either design structure (1 or 2) will have that page INHERIT the same properties (ie any spacing you set, or fonts etc).

Design Structure 1

One Column Page

Design Structure 2

Two Column Page

Below is another example of applying 2 different design structures-a one column and two column page for each design. Assigning any one of these to your next page will see all the same properties inherited by that page. This can minimize workload when designing pages because you can design one page with all it's properties (fonts size,type,spacing , borders etc) and have it applied throughout your site on all other inner pages.

Design Structure 1

One Column Page

Layout size 1320

Different Menu Subjects

Design Structure 2

Two Column Page

Layout Size 1520 (Larger)

Different Menu Subjects