Nav - Image Blocks (3 col) Template | Communifire Documentation

Create a three column version of the Nav - Image Blocks template for the Navigation widget.

Add Template

1. Click the gear icon > Page Builder > Templates.
2. Click Add a new template.
3. In Template Name, enter Nav - Image Blocks (3 col).
4. In Widget Type, select Navigation.
5. In Link item template, select Nav - Image Blocks Item.
6. In the editor, paste the following code.

   <div class="axero-navigation-image-blocks nav-img-blocks-three-col {{CustomCSSClass}}">
   	<ul>
   		{{{Contents.ChildWidgetHTML}}}
   	</ul>
   </div>

7. Click Save Template.

Add CSS Overrides

1. Click System > CSS Overrides.
2. Add the following code, at the bottom.

   /*Style for Nav - Image Blocks (3 col) template*/
   .nav-img-blocks-three-col ul li {
       width: 32%;
       float: left;
   }
   
   .nav-img-blocks-three-col ul li {
       margin-right: 2%;
   }
   .nav-img-blocks-three-col ul li:nth-child(3n+3) {
       margin-right: 0;
   }
   
   .nav-img-blocks-three-col ul li .tile-content-text {
       min-height: 120px;
   }

3. Click Save CSS Overrides.

How to Use the Template

1. In the Control Panel, click System > Page Builder.
2. Add or edit a page.
3. Click the Layouts tab and add a layout onto the page.
4. Click Widgets.
5. Add a Navigation widget. This template is best used in a 12-column layout.
6. Edit the widget.
7. Update the Title.
8. In Navigation items, configure an item:
   1. Enter a Title.
   2. Select the Item type.
   3. Select or enter additional options for the item type.
   4. For the navigation item, click Advanced.
   5. Click Foreground image.
   6. Upload an image.
   7. Crop the image and save it.
   8. Add more navigation items and configure them. (Upload a foreground image for each item.)
9. Click Template.
10. Select the Nav - Image Blocks (3 col) template.
11. Click Save Widget.
12. Click Publish changes.
13. Click Go to page.