Page Comparison

...

1. Add the layout format as shown in the example (index.hbs file) below.

   Code Block
   language js
   <div class="row"> <div id="a" class="col-md-3 ues-component-box"></div> <div id="b" class="col-md-6 ues-component-box"></div> <div id="c" class="col-md-3 ues-component-box"></div> </div> <div class="row"> <div id="d" class="col-md-6 ues-component-box"></div> <div id="e" class="col-md-6 ues-component-box"></div> </div> <div class="row"> <div id="f" class="col-md-4 ues-component-box"></div> <div id="g" class="col-md-4 ues-component-box"></div> <div id="h" class="col-md-4 ues-component-box"></div> </div>

2. Add the layout definition as shown in the example (layout.json file) below.

   Code Block
   language js
   { "id": "my-layout", "title": "My Layout", "description": "This is a sample grid", "thumbnail": "local://store/layout/my-layout/index.png", "url": "local://store/layout/my-layout/index.hbs" }

3. Add a thumbnail image (index.jpg) to display in the list of layouts in the analytics dashboard as the below example.
   
   
4. Refresh the analytics dashboard application.
   
   Now, you view the new layout you created added to the list of available layouts as shown in the below example. 
   You can add this custom layout to a new dashboard or to a new page.