*Tip Before inserting code into the DDC page editor, you must compress it. You can do that by using this tool

HERO BOXES

Hero Slideshow Images

For McGrathAuto.com, DDC offers a slideshow widget that enables you to display a series of rotating images. Your images for the slideshow must be set at the following dimensions: 940px wide x 294px high. You can see a demonstration of this tool here. You don't HAVE to only use it as a heading. Be creative!

If you wish to display a simple static image as your heading, the image should be at least 940px wide, but height is not restricted. However, I recommend not eating up an excessive amount of space "above the fold".

Logo Hero Heading

The Hero heading box is made up of three elements, a logo, a button row and containing background. The logo can be any size and the button row supports one to four buttons when the appropriate class is applied. The container background is also customizable, but keep branding in mind and use wisely. Sometimes, less is more.

To view the file used for the heading logo, click here.

Logo Hero Heading - Default w/Button Row

About
Us Finance
Application Related
Articles Contact
Us 
<div class="hero">
   <img class="logo" width="512" height="132" src="https://pictures.dealer.com/m/mcgrathgroup/0536/5a7945cfd3b0651e0f259ea75faf675bx.jpg" />
   <div class="ctaRow fourButtons">
      <a class="ctaButton" title="#" href="#">About<br>Us</a>
      <a class="ctaButton" title="#" href="#">Finance<br>Application</a>
      <a class="ctaButton" title="#" href="#">Related<br>Articles</a>
      <a class="ctaButton" title="#" href="#">Contact<br>Us</a>
   </div>
</div>

Logo Hero Heading - Customized w/Button Row

The Hero heading box below demonstrates a larger logo and is customized with it's own background image. This is achieved by amending the hero class with the class of custom, and applying your background image of choice through inline styling.

To view the file used for the heading background, click here.
To view the file used for the heading logo, click here.

About
Us Finance
Application Related
Articles 
<div class="hero custom" style="background-image: url('http://www.mcgrathauto.org/guide/img/bg-nails.jpg');">
   <img class="logo" width="700" height="230" src="http://www.mcgrathauto.org/guide/img/hammercoat-logo.png" />
   <div class="ctaRow threeButtons">
      <a class="ctaButton red" title="#" href="#">About<br>Us</a>
      <a class="ctaButton red" title="#" href="#">Finance<br>Application</a>
      <a class="ctaButton red" title="#" href="#">Related<br>Articles</a>
   </div>
</div>

Logo Hero Heading - Blue Leather Background w/Button Row

By applying the class blueLeather to the Hero heading box, a nice blue leather background pattern is achieved.

About
Us Finance
Application Related
Articles Contact
Us 
<div class="hero blueLeather">
   <img class="logo" width="512" height="132" src="https://pictures.dealer.com/m/mcgrathgroup/0536/5a7945cfd3b0651e0f259ea75faf675bx.jpg" />
   <div class="ctaRow fourButtons">
      <a class="ctaButton" title="#" href="#">About<br>Us</a>
      <a class="ctaButton" title="#" href="#">Finance<br>Application</a>
      <a class="ctaButton" title="#" href="#">Related<br>Articles</a>
      <a class="ctaButton" title="#" href="#">Contact<br>Us</a>
   </div>
</div>

Logo Hero Heading - Dark Texture Background w/Button Row

By applying the class darkTexture to the Hero heading box, a dark stone background pattern is achieved.

Shop Our Ram Inventory Finance
Application Value Your
Trade Contact
Us 
<div class="hero darkTexture">
   <img class="logo" width="512" height="132" src="https://pictures.dealer.com/m/mcgrathgroup/0798/df3dd763c3a4d06b91e927461f8ec32cx.jpg" />
   <div class="ctaRow fourButtons">
      <a class="ctaButton" title="#" href="#">Shop Our Ram Inventory</a>
      <a class="ctaButton" title="#" href="#">Finance<br>Application</a>
      <a class="ctaButton" title="#" href="#">Value Your<br>Trade</a>
      <a class="ctaButton" title="#" href="#">Contact<br>Us</a>
   </div>
</div>

Hero Heading - White Leather Background w/Button Row

By applying the class whiteLeather to the Hero heading box, a white leather background pattern is achieved.

About
Us Finance
Application Related
Articles Contact
Us 
<div class="hero whiteLeather">
   <img class="logo" width="512" height="132" src="https://pictures.dealer.com/m/mcgrathgroup/0536/5a7945cfd3b0651e0f259ea75faf675bx.jpg" />
   <div class="ctaRow fourButtons">
      <a class="ctaButton" title="#" href="#">About<br>Us</a>
      <a class="ctaButton" title="#" href="#">Finance<br>Application</a>
      <a class="ctaButton" title="#" href="#">Related<br>Articles</a>
      <a class="ctaButton" title="#" href="#">Contact<br>Us</a>
   </div>
</div>

Hero Heading / Elements Demonstration

Below demonstrates various elements you can include in the Hero block, including a headline, YouTube embed and paragraph entry. In addition to the background customizations above, you can also change the color of the headline and buttons. Keep scrolling for demonstrations. Play around to see what options you can combine.

Bad Credit? No Credit? No Problem!

We're kicking off the new year announcing a brand new addition to Iowa's used car headquarters at Pat McGrath Chevyland and you will save thousands! Introducing the Special Purchase Zone!

<div class="hero">
   <img class="logo" width="512" height="132" src="https://pictures.dealer.com/m/mcgrathgroup/0536/5a7945cfd3b0651e0f259ea75faf675bx.jpg" />
   <h2 class="headline">BAD CREDIT? NO CREDIT? NO PROBLEM!</h2>
   <div class="customYouTube">
      <div class="align-center">
         <iframe src="https://www.youtube.com/embed/Qm_6NToVE-U?showinfo=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>
      </div>
   </div>
   <p>We're kicking off the new year announcing a brand new addition to Iowa's used car headquarters at Pat McGrath Chevyland and you will save thousands! Introducing the Special Purchase Zone!</p>
   <div class="ctaRow fourButtons">
      <a class="ctaButton" title="#" href="#">About<br>Us</a>
      <a class="ctaButton" title="#" href="#">Finance<br>Application</a>
      <a class="ctaButton" title="#" href="#">Related<br>Articles</a>
      <a class="ctaButton" title="#" href="#">Contact<br>Us</a>
   </div>
</div>

Hero Heading / Blue Elements Demonstration

Below demonstrates the same hero element as above, only with the YouTube embed removed and the class of blue amended to the headline and ctaButton elements.

Bad Credit? No Credit? No Problem!

We're kicking off the new year announcing a brand new addition to Iowa's used car headquarters at Pat McGrath Chevyland and you will save thousands! Introducing the Special Purchase Zone!

About
Us Finance
Application Related
Articles Contact
Us 
<div class="hero">
   <img class="logo" width="512" height="132" src="https://pictures.dealer.com/m/mcgrathgroup/0536/5a7945cfd3b0651e0f259ea75faf675bx.jpg" />
   <h2 class="headline">BAD CREDIT? NO CREDIT? NO PROBLEM!</h2>
   <div class="customYouTube">
      <div class="align-center">
         <iframe src="https://www.youtube.com/embed/Qm_6NToVE-U?showinfo=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>
      </div>
   </div>
   <p>We're kicking off the new year announcing a brand new addition to Iowa's used car headquarters at Pat McGrath Chevyland and you will save thousands! Introducing the Special Purchase Zone!</p>
   <div class="ctaRow fourButtons">
      <a class="ctaButton" title="#" href="#">About<br>Us</a>
      <a class="ctaButton" title="#" href="#">Finance<br>Application</a>
      <a class="ctaButton" title="#" href="#">Related<br>Articles</a>
      <a class="ctaButton" title="#" href="#">Contact<br>Us</a>
   </div>
</div>

Hero Heading - Blue Leather / Elements Demonstration

Below demonstrates the blueLeather texture along with various elements included in the Hero block, including a headline, YouTube embed and paragraph styling. Colors are still customizable but make sure your page is cohesive.

Bad Credit? No Credit? No Problem!

We're kicking off the new year announcing a brand new addition to Iowa's used car headquarters at Pat McGrath Chevyland and you will save thousands! Introducing the Special Purchase Zone!

About
Us Finance
Application Related
Articles Contact
Us 
<div class="hero blueLeather">
   <img class="logo" width="512" height="132" src="https://pictures.dealer.com/m/mcgrathgroup/0536/5a7945cfd3b0651e0f259ea75faf675bx.jpg" />
   <h2 class="headline">BAD CREDIT? NO CREDIT? NO PROBLEM!</h2>
   <div class="customYouTube">
      <div class="align-center">
         <iframe src="https://www.youtube.com/embed/Qm_6NToVE-U?showinfo=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>
      </div>
   </div>
   <p>We're kicking off the new year announcing a brand new addition to Iowa's used car headquarters at Pat McGrath Chevyland and you will save thousands! Introducing the Special Purchase Zone!</p>
   <div class="ctaRow fourButtons">
      <a class="ctaButton" title="#" href="#">About<br>Us</a>
      <a class="ctaButton" title="#" href="#">Finance<br>Application</a>
      <a class="ctaButton" title="#" href="#">Related<br>Articles</a>
      <a class="ctaButton" title="#" href="#">Contact<br>Us</a>
   </div>
</div>

Hero Heading - Dark Texture / Elements Demonstration

Introducing Pat McGrath Ram Country!

From freeway to farm, truck drivers are as passionate as it gets. Options when shopping for a new truck are better than ever and Ram has quickly emerged as the frontrunner. Outselling Silverado and others by thousands, it’s the hottest truck on the market.

Shop Our Ram Inventory Finance
Application Value Your
Trade Contact
Us 
<div class="hero darkTexture">
   <img class="logo" width="512" height="132" src="https://pictures.dealer.com/m/mcgrathgroup/0798/df3dd763c3a4d06b91e927461f8ec32cx.jpg" />
   <h2 class="headline">Introducing Pat McGrath Ram Country!</h2>
   <div class="customYouTube">
      <div class="align-center">
         <iframe src="https://www.youtube.com/embed/y44lzUjgqkg?showinfo=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>
      </div>
   </div>
   <p>From freeway to farm, truck drivers are as passionate as it gets. Options when shopping for a new truck are better than ever and Ram has quickly emerged as the frontrunner. Outselling Silverado and others by thousands, it’s the hottest truck on the market.</p>
   <div class="ctaRow fourButtons">
      <a class="ctaButton" title="#" href="#">Shop Our Ram Inventory</a>
      <a class="ctaButton" title="#" href="#">Finance<br>Application</a>
      <a class="ctaButton" title="#" href="#">Value Your<br>Trade</a>
      <a class="ctaButton" title="#" href="#">Contact<br>Us</a>
   </div>
</div>

Hero Heading - Dark Texture / Red / Elements Demonstration

The example below demonstrates the darkTexture hero, only with red element classes thrown in the mix.

Introducing Pat McGrath Ram Country!

From freeway to farm, truck drivers are as passionate as it gets. Options when shopping for a new truck are better than ever and Ram has quickly emerged as the frontrunner. Outselling Silverado and others by thousands, it’s the hottest truck on the market.

Shop Our Ram Inventory Finance
Application Value Your
Trade Contact
Us 
<div class="hero darkTexture">
   <img class="logo" width="512" height="132" src="https://pictures.dealer.com/m/mcgrathgroup/0798/df3dd763c3a4d06b91e927461f8ec32cx.jpg" />
   <h2 class="headline red">Introducing Pat McGrath Ram Country!</h2>
   <div class="customYouTube">
      <div class="align-center">
         <iframe src="https://www.youtube.com/embed/y44lzUjgqkg?showinfo=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>
      </div>
   </div>
   <p>From freeway to farm, truck drivers are as passionate as it gets. Options when shopping for a new truck are better than ever and Ram has quickly emerged as the frontrunner. Outselling Silverado and others by thousands, it’s the hottest truck on the market.</p>
   <div class="ctaRow fourButtons">
      <a class="ctaButton red" title="#" href="#">Shop Our Ram Inventory</a>
      <a class="ctaButton red" title="#" href="#">Finance<br>Application</a>
      <a class="ctaButton red" title="#" href="#">Value Your<br>Trade</a>
      <a class="ctaButton red" title="#" href="#">Contact<br>Us</a>
   </div>
</div>