Nav - Image Blocks with Background Template | Communifire Documentation

Create a template for the Navigation Widget that displays links with an image background. 

Add Template

1. Click the gear icon > Control Panel > Page Builder > Templates.
2. Click Add a new template.
3. In Template Name, enter Nav - Image Blocks Item with Background.
4. In Widget Type, select Button.
5. In the editor, paste the following code.

   <li class="{{CustomCSSClass}}">
       <a href="{{{Contents.URL}}}" {{{Contents.ngCode}}}>
           <img src="{{Contents.BackgroundImageURL}}" />
           <div class="tile-content">
               <div class="tile-media"></div>
               {{#if ShowWidgetHeader}}
               <div class="tile-content-text">
                   <h2>{{{WidgetTitle}}}</h2>
               </div>
               {{/if}}
           </div>
       </a>
   </li>

6. Click Save Template.
7. Click Add a new template.
8. In Template Name, enter Nav - Image Blocks with Background.
9. In Widget Type, select Navigation.
10. In Link item template, select Nav - Image Blocks Item with Background.
11. In the editor, paste the following code.

    <div class="axero-navigation-image-blocks with-background {{CustomCSSClass}}">
    	<ul>
    	   {{{Contents.ChildWidgetHTML}}}
    	</ul>
    </div>

12. Click Save Template.

Add CSS Overrides

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

   /*Style for Nav - Image Blocks with Background template*/
   .axero-navigation-image-blocks.with-background ul li a .tile-content .tile-media {
       flex: 0;
   }
   
   .axero-navigation-image-blocks.with-background ul li a .tile-content .tile-content-text {
       background-color: transparent;
   }
   
   .axero-navigation-image-blocks.with-background img {
       position: absolute;
       top: 0;
       opacity: 0.8;
       display: block !important;
   }
   
   .axero-navigation-image-blocks.with-background h2 {
       color: black;
       background-color: #f7f7f7b3;
       padding: 5px;
       text-align: center;
   }

3. Click Save CSS Overrides.

How to Use the Template

1. In Control Panel > System > Page Builder, add or edit a page.
2. Click the Layouts tab and add a layout onto the page. 
3. Click the Widgets tab.
4. Add a Navigation widget. This template is best used in narrow columns - 3 or 4.
5. On the Navigation widget, click the gear icon > Edit properties.
6. Update the Title.
7. 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 Background image.
   6. Upload an image.
   7. Crop the image and save it.
   8. Click Save.
8. Add more navigation items and configure them. Upload a background image for each item.
9. Click Template.
10. Select the Nav - Image Blocks with Background template.
11. Click Save Widget.
12. Click Publish changes.
13. Click Go to page.