Content Grid Template | Axero Documentation

Create a template for the Content List Widget that displays content in a bold grid. The Content List widget is great for keeping everyone updated on the latest news and announcements.

Add Template

1. Click the gear icon > Control Panel > System > Page Builder Templates.
2. Click Add a new template.
3. Enter Content Grid as the Template Name.
4. Select Content List as the Widget Type.
5. Select Content List as the Widget Sub Type.
6. In the editor, paste the following code.

   <div class="bdaia-feature-posts bdaia-fp-grids bdaia-fp-grid3">
      <div class="bd-container">
         <div class="bdaia-fp-grids-content">
            <div class="bdaia-fp-grids-inner">
               <div class="big-grids big-grids-uid5 big-grids-disable-nav bdaia-img-show">
                  <div class="big-grids-single-slide flex-active-slide"
                  style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 1; display: block; z-index: 2;">
                     {{#each Contents}}
                     <div class="big-grid big-grid-{{math @index "+" 1}} fea-{{math @index "+" 1}}">
                        <div class="big-grid-inner">
                           <a class="img" href="{{ContentURL}}" style="display: block; background-image: url({{ContentImageURL}});"></a>
                           <div class="featured-title">
                              <div class="featured-cat">
                                 <a class="bd-cat-link bd-cat-5">{{{ContentCategoryName}}}</a>
                              </div>
                           <h2 class="post-title">
                              <a href="{{ContentURL}}">{{{Title}}}</a>
                           </h2><span class="bdayh-date">{{DatePublishedString}}</span>
                           </div>
                        </div>
                     </div>
                     {{/each}}
                  </div>
               </div>
            <div class="cfix"></div>
            </div>
         </div>
      </div>
   </div>

7. Click Save Template.

Add CSS Overrides

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

   /*Style for Content Grid template*/
   .bdaia-feature-posts{margin-bottom: 30px;border-radius: 4px;overflow: hidden;}
   .flex-direction-nav{*height:0!important;line-height:0!important;font-size:0!important;list-style:none!important;}
   .flex-direction-nav li{*height:0!important;line-height:0!important;font-size:0!important;list-style:none!important;}
   .flex-direction-nav a{text-decoration:none;display:block;width:40px;height:40px;margin:-20px 0 0;position:absolute;top:50%;z-index:10;overflow:hidden;opacity:0;cursor:pointer;color:rgba(0,0,0,.8);text-shadow:1px 1px 0 rgba(255,255,255,.3);-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
   .flex-direction-nav a.flex-next:before{content:"\e95d";}
   .flex-direction-nav .flex-prev{left:-50px;}
   .flex-direction-nav .flex-next{right:-50px;text-align:right;}
   .flex-direction-nav .flex-disabled{opacity:0!important;filter:alpha(opacity=0);cursor:default;}
   .bdaia-lazyload .big-grids{opacity:0;}
   .bdaia-lazyload .big-grids.bdaia-img-show{opacity:1;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out;}
   .bdaia-img-show{position:relative;}
   *{zoom:1;}
   .bd-cat-link{font-size:11px;font-weight:500;line-height:1;padding:3px 7px;margin:0 2px 2px 0;white-space:nowrap;display:inline-block;position:relative;background-color:#000;background-color:rgba(0,0,0,.7);color:#fff!important;-webkit-border-radius:0!important;-moz-border-radius:0!important;border-radius:0!important;text-transform:uppercase;-webkit-text-shadow:none!important;-moz-text-shadow:none!important;text-shadow:none!important;}
   *:before,*:after{box-sizing:border-box;}
   .cfix{clear:both;zoom:1;font-size:0;line-height:0;overflow:hidden;width:100%;position:relative;display:block;height:0;}
   .cfix:before,.cfix:after{display:table;content:"";clear:both;}
   .big-grids{display:block;position:relative;overflow:hidden;margin:0 auto;}
   .big-grids:after,.big-grids:before{content:'';display:table;clear:both;}
   .big-grids .big-grid.fea-1,.big-grids .big-grid.fea-2,.big-grids .big-grid.fea-3{display:block;}
   .big-grids .big-grids-single-slide{display:none;opacity:0;padding:0;position:relative;}
   .big-grids .big-grids-single-slide .big-grid{display:block;}
   .big-grids .big-grids-single-slide:first-child{display:block!important;}
   .big-grids .big-grid{float:left;position:relative;overflow:hidden;}
   .big-grids .big-grid-inner{position:relative;line-height:0;color:#FFF;background-position:center;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;overflow:hidden;-webkit-transition:0.15s;-moz-transition:0.15s;-o-transition:0.15s;transition:0.15s;box-sizing:border-box;outline:none;zoom:1;}
   .big-grids .big-grid-inner:before,.big-grids .big-grid-inner:after{content:"";display:table;clear:both;}
   .big-grids .big-grid-inner .img{background-color:#eee;background-position:center center;background-size:cover;bottom:0;left:0;position:absolute;right:0;top:0;z-index:0;width:100%;height:100%;visibility:visible;-webkit-transition:0.15s;-moz-transition:0.15s;-o-transition:0.15s;transition:0.15s;max-width:none;}
   .big-grids .big-grid-inner:hover .img{transform:scale3d(1.1,1.1,1);-webkit-transform:scale3d(1.1,1.1,1);-moz-transform:scale3d(1.1,1.1,1) rotate(0.02deg);}
   .big-grids .big-grid-inner .img:before{bottom:0;content:"";display:block;height:100%;width:100%;position:absolute;z-index:1;background:-moz-linear-gradient(top,transparent 40%,rgba(0,0,0,.7) 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(40%,transparent),color-stop(100%,rgba(0,0,0,.7)));background:-webkit-linear-gradient(top,transparent 40%,rgba(0,0,0,.7) 100%);background:-o-linear-gradient(top,transparent 40%,rgba(0,0,0,.7) 100%);background:-ms-linear-gradient(top,transparent 40%,rgba(0,0,0,.7) 100%);background:linear-gradient(to bottom,transparent 40%,rgba(0,0,0,.7) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000',endColorstr='#b3000000',GradientType=0);}
   div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid-1{width:50%;}
   div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid-1 .big-grid-inner{height:490px;}
   div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid-2,div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid-3,div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid-4,div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid-5{width:25%;}
   div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid-2 .big-grid-inner,div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid-3 .big-grid-inner,div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid-4 .big-grid-inner,div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid-5 .big-grid-inner{height:244px;}
   div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid-1{padding:0 2px 0 0;}
   div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid-2{padding:0 2px 2px 0;}
   div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid-4{padding:0 2px 0 0;}
   div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid-3{padding:0 0 2px 0;}
   
   @media only screen and (max-width:919px){
   div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid{width:100%;}
   div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid .big-grid-inner{height:360px;}
   div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid-1,div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid-2,div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid-3,div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid-4{padding:0 0 2px 0;}
   div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .bdayh-date{display:none;}
   }
   @media only screen and (max-width:630px){
   div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid .big-grid-inner{height:220px;}
   div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid-2 .big-grid-inner,div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid-3 .big-grid-inner,div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid-4 .big-grid-inner,div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid-5 .big-grid-inner{height:180px;}
   }
   .big-grids .featured-title{position:absolute;width:100%;bottom:0;padding:20px;-webkit-text-shadow:1px 1px 1px rgba(0,0,0,.3);-moz-text-shadow:1px 1px 1px rgba(0,0,0,.3);-ms-text-shadow:1px 1px 1px rgba(0,0,0,.3);-o-text-shadow:1px 1px 1px rgba(0,0,0,.3);text-shadow:1px 1px 1px rgba(0,0,0,.3);-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;}
   .big-grids .featured-title h2{padding:0;margin:5px 0 10px;text-shadow:rgba(0,0,0,.5) 0 1px 1px;font-size:21px;line-height:26px;font-weight:400;}
   div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid-1 .featured-title h2{max-width:98%;}
   div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .featured-title h2{font-size:16px;line-height:21px;}
   div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid-1 .featured-title h2{font-size:37px;line-height:46px;}
   .big-grids .featured-title a{color:#FFF;}
   .big-grids .featured-title .bdayh-date{font-size:12px;line-height:12px;}
   @media only screen and (max-width:1024px){
   .big-grids .featured-title{max-width:100%;padding:14px;}
   div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid-1 .featured-title h2{font-size:22px;line-height:29px;margin-bottom:9px;}
   }
   .big-grids .flex-direction-nav a{width:25px;height:44px;margin:-22px 0 0 0;display:block;position:absolute;top:50%;left:0;cursor:pointer;opacity:0;z-index:2;background:#FFF;color:inherit;}
   .big-grids .flex-direction-nav a::before{color:inherit;}
   .big-grids .flex-direction-nav a:hover{color:#FFF!important;}
   .big-grids.big-grids-disable-nav .flex-direction-nav{display:none!important;}
   .big-grids .flex-direction-nav .flex-next{right:-1px!important;left:auto!important;}
   .big-grids .flex-direction-nav .flex-prev{left:-1px!important;right:auto!important;}
   .big-grids .flex-direction-nav .flex-next:before,.big-grids .flex-direction-nav .flex-prev:before{display:block;text-align:center;text-rendering:auto;-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto;transform:translate(0,0);}
   .big-grids .flex-direction-nav .flex-next:before,.big-grids .flex-direction-nav .flex-prev:before{width:25px;height:44px;font-size:18px;line-height:44px;display:block;text-align:center;text-shadow:none!important;}
   .big-grids:hover .flex-next,.big-grids:hover .flex-prev{opacity:1;}
   .big-grids .flex-next:hover,.big-grids .flex-prev:hover{background:#EA0253;}
   .big-grids .big-grid-inner:hover .featured-title{bottom:0;}
   @media only screen and (max-width:985px){
   .big-grids .big-grid-2 .featured-title .featured-cat{display:none;}
   .big-grids .big-grid-3 .featured-title .featured-cat{display:none;}
   div.bdaia-feature-posts.bdaia-fp-grid3 div.featured-title div.featured-cat{display:block;}
   .big-grids .flex-direction-nav a{width:40px;height:40px;margin:0 0 0 0;color:#FFF;top:5px;left:0;background:#222;}
   .big-grids .flex-direction-nav .flex-next{left:50px!important;right:auto!important;}
   .big-grids .flex-direction-nav .flex-prev{left:5px!important;right:auto!important;}
   .big-grids .flex-direction-nav .flex-next:before,.big-grids .flex-direction-nav .flex-prev:before{height:40px;line-height:40px;font-size:20pt;}
   .big-grids .flex-next:hover,.big-grids .flex-prev:hover{background:#222!important;opacity:.8;}
   }
   @media only screen and (max-width:767px){
   .big-grids .big-grid .featured-title h2{font-size:16px;line-height:20px;}
   .big-grids .big-grid-2 .featured-title .featured-cat{display:none;}
   .big-grids .big-grid-3 .featured-title .featured-cat{display:none;}
   .big-grids .big-grid-4 .featured-title .featured-cat,.big-grids .big-grid-5 .featured-title .featured-cat{display:none;}
   .big-grids .flex-direction-nav a{width:40px;height:40px;margin:0 0 0 0;color:#FFF;top:5px;left:0;background:#222;}
   .big-grids .flex-direction-nav .flex-next{left:50px!important;right:auto!important;}
   .big-grids .flex-direction-nav .flex-prev{left:5px!important;right:auto!important;}
   .big-grids .flex-direction-nav .flex-next:before,.big-grids .flex-direction-nav .flex-prev:before{height:40px;line-height:40px;font-size:20pt;}
   .big-grids .flex-next:hover,.big-grids .flex-prev:hover{background:#222!important;opacity:.8;}
   }
   @media only screen and (max-width:479px){
   .big-grids .big-grid .featured-title h2{font-size:14px;line-height:18px;}
   .big-grids .flex-direction-nav a{width:40px;height:40px;margin:0 0 0 0;color:#FFF;top:5px;left:0;background:#222;}
   .big-grids .flex-direction-nav .flex-next{left:50px!important;right:auto!important;}
   .big-grids .flex-direction-nav .flex-prev{left:5px!important;right:auto!important;}
   .big-grids .flex-direction-nav .flex-next:before,.big-grids .flex-direction-nav .flex-prev:before{height:40px;line-height:40px;font-size:20pt;}
   .big-grids .flex-next:hover,.big-grids .flex-prev:hover{background:#222!important;opacity:.8;}
   }
   *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;}
   *:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;}
   .featured-title:hover .featured-cat a{color:#FFF!important;}
   @media (max-width:919px){
   div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid{padding:1px!important;}
   div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid.big-grid-1{width:100%;}
   div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid.big-grid-2,div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid.big-grid-3,div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid.big-grid-4,div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid.big-grid-5{width:50%;}
   div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid.big-grid-1 .big-grid-inner{height:420px;}
   div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid.big-grid-2 .big-grid-inner,div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid.big-grid-3 .big-grid-inner,div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid.big-grid-4 .big-grid-inner,div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid.big-grid-5 .big-grid-inner{height:160px;}
   div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid.big-grid-1 .bdayh-date{display:block!important;}
   }
   @media (max-width:414px){
   div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid.big-grid-1,div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid.big-grid-2,div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid.big-grid-3,div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid.big-grid-4,div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid.big-grid-5{width:100%;}
   div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid.big-grid-1 .big-grid-inner{height:312px;}
   div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid.big-grid-2 .big-grid-inner,div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid.big-grid-3 .big-grid-inner,div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid.big-grid-4 .big-grid-inner,div.bdaia-feature-posts.bdaia-fp-grids.bdaia-fp-grid3 .big-grid.big-grid-5 .big-grid-inner{height:126px;}
   }
   }
   /*! CSS Used from: Embedded */
   .bd-cat-3{background:#7E69EF!important;}
   .bd-cat-3:before{border-top-color:#7E69EF!important;}
   .bd-cat-5{background:#E29C04!important;}
   .bd-cat-5:before{border-top-color:#E29C04!important;}
   .bd-cat-8{background:#45ACE4!important;}
   .bd-cat-8:before{border-top-color:#45ACE4!important;}
   /*! CSS Used fontfaces */
   /*End style for Content Grid template*/

3. Click Save CSS Overrides.

How to Use the Template

1. Add or edit a Page Builder page in Control Panel > System > Page Builder.
2. Click the Layouts tab and add a layout onto the page. 
3. Click the Widgets tab.
4. Drag a Content List widget onto the page. This template is best used in wider columns - 6 or greater.
5. On the Content List widget, click the gear icon > Edit properties.
6. Update the widget Title.
7. Configure widget properties. This template is best used to display 5 items.
8. Click Template.
9. Select the Content Grid template.
10. Click Save Widget.
11. Click Publish changes.
12. Click Go to page.