Page History

The guide below will show you how to create your own page layouts quickly and easily; there's even a video demonstration at the end of the article.

Enable Layout Creator

Layout Creator functionality is not on by default, but we can enabled it for you in a flash. Contact our Support Team to . Contact Commerce Vision to request it.

Create a New Layout

1. Login to In the CMS and navigate , go to the page/template you wish to design the layout for.
   
   
2. In the layout preview pane is , the current layout , with the ability to is displayed. You can toggle between Desktop, Tablet, and Mobile views.
   Image RemovedImage Added 
   
   
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’.
   Image RemovedImage Added
   
   
5. Give your Layout a Name.
   
   
6. If you like, you can load an example layout, then edit as required. Hover over Options, then click Load Example Layout.
   Image RemovedImage Added 
   
   
7. Otherwise, start by adding a row.
    
   
   
8. The modal ‘Add New Row’ window  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.
     Image RemovedImage Added 
     
     
9. Click ‘Confirm’ and voila! You’ve got your first rowTo save the row, click Confirm.
   (The rows and columns are automatically named in the format Row1Column1, Row1Column2, and so on. Don’t worry – you You can rename these to anything you like!)
    
   
   
10. Click the 'Add a row' button to continue building your layout, adding . Add as many rows as required. 
    Click 'Save & Exit
    
11. ' to To save your new layout, click Save or Save & Exit . 

Edit a Column

1. Hover over one of the columns in your row – you’ll . You’ll see 2 two options appear: Edit & Delete.
   
   
2. Click ‘Edit’.
   
3. The Column Options modal window launches. Here’s where you can:
   • Give the column a unique name - one that is meaningful to you.
   • Specify an additional CSS class for the column’s display.
   • Change the column width. The row will never exceed 100% width, so your column options will take that into account. If you want to increase the width of one column, you may need to first delete or decrease the width of another.
     Image Removed
     
4. Click ‘Confirm’ to save your changes.

1. • Image Added
     
     
2. To save any changes, click Confirm.

Edit a Row

1. On the right hand side of each row, you’ll see 2 two buttons: ‘Edit' and ‘Options’.
   Image RemovedImage Added 
2. Clicking ‘Edit’ gives you the ability to Click Edit to make changes to the CSS classes and the Full Width setting for that row.
   Image RemovedImage Added 
3. Hovering Hover over the ‘Options’ button gives you 2 choicesto:
   • Add Column
   • Delete Row
     Image RemovedImage Added 
     
     
4. Keep in mind that your row cannot exceed 100% width. If you have 3 columns at 33% and you click ‘Add Column’, a message will appear advising displays to tell you to resize other columns first.
   Image RemovedImage Added 

Edit a currently used Layout

A layout that is currently in use somewhere on the website will have only limited editing options. This is to protect the look and functionality of the page(s) currently using with that layout.
If a layout is in use, you will be shown a message regarding which pages are currently using the layouta message displays to tell you the layout cannot be edited and which templates are using it.

 

You will also be able to:

• 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 Watch a video on how to use our Layout Creator! 

(Firefox users may need to use another browser to view video)

Additional Information

Related help