Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

OverviewOverview  

Excerpt

The Layout Creator in the CMS allows you to create custom layouts for various pages throughout your site. You can also even create a custom Theme layout, if you choose.

The layout creator essentially lets you add rows to a layout, and then divide those rows up into columns. Each row can be made up of one column, or many.
You can give each row a name, and likewise each column within that row.

Info

Layout Creator functionality is not on by default, but can be enabled in Settings → Website Features. Simply click to toggle the feature on.
Image Modified

Creating a New Layout

  1. Login to the CMS and navigate to the page you wish to design the layout for.
  2. In the layout preview pane is the current layout, with the ability to toggle between Desktop, Tablet, and Mobile views.
     
  3. Click ‘Change’. Any existing custom layouts will be displayed, followed by out-of-the-box BPD layouts.
  4. Hover over ‘Options’, and click ‘Add Custom Layout’.
  5. Give your Layout a Name.
  6. If you like, you can load an example layout, then edit as required.
     
  7. Otherwise, start by adding a row.
     
  8. The modal ‘Add New Row’ window launches. This is where you specify:
    • CSS classes to apply to the row display.
    • Whether the row is full width (e.g. no container wrapping the row)
    • How many columns you’d like (up to 6). If there are 2 or more columns, they will be created with equal width.
       
  9. Click ‘Confirm’ and voila! You’ve got your first row.
     

You can see the rows and columns are automatically named in the format Row1Column1, Row1Column2, and so on. Don’t worry – you can rename these to anything you like!

...

  • Add a new row
  • Change column widths and class names for the newly added row
  • Create a duplicate/copy of the layout


 

See how easy it is to use our Layout Creator! 

View file
nameDemoLayoutCreator.swf
height250

Content by Label
showLabelsfalse
max5
spacesKB
showSpacefalse
sortmodified
reversetrue
typepage
cqllabel in ("settings","how-to","cms") and type = "page" and space = "KB"
labelshow-to cms settings