Page Comparison

A CMS block can be made into a set of banners. Any combination of the banners below can be used in any order on a page. To add a new set of banners to a page you will need to know how to add a CMS block to a page and this is covered in the basic Magento Training and also in the Core Magento User Guides.

Create a new CMS Static Block
Configure your banners as content
Add your block to your page or category according to normal Magento procedure

Please use the Block called Dynamic Banner Template in the Magento Admin panel under Content → Blocks, as a reference.

Page Contents

Table of Contents

How Dynamic Banners Work

Here is a block of code similar to the banners in the site. Below we break down each line and how it work when making dynamic banners.

Code Block

language	xml
title	Example Banner Code
linenumbers	true

<!-- Hero Banner START -->
<div class="banner-hero">
<div class="banner-item">
<img src="{{media url="wysiwyg/lumarix/hero_1.png"}}" alt="All Lumarix images can have alt tags" />
<div class="banner-overlay" style="color: #F2923B;">
<span>Hero Image Banners</span> 
<span>Easy to make and edit</span> 
<a class="action primary" href="#">Shop Now</a>
<!-- Background Panel That Sits Behind Text -->
<div class="overlay-background" style="background-color: #fff; opacity: 0.85;"></div>
</div>
</div>
</div>
<!-- Hero Banner END -->

Banner Options

Dynamic Banners have a number of options that can be set. You will need a little html and css knowledge here. But once you have it you'll find this very easy.

Line(s)	Description	Option
2	This sets the type of banner, their size and how they act. Here the bit between class=" " is the part that changes.	banner-hero banner-2col banner-3col banner-4col banner-wide
3	This creates a container for the dynamic content. All banners need this part and it is the same on them all.	None
4	This is the URL of your image and it's title tag.	URL and Title Tag
5	This line set the colour of your font in the banner. You cannot change fonts unless you have advanced experience and should stick to the style guide. Change the # colour reference and all fonts will change colour.	Any # colour
6	This is the large text on the banner. Edit the text between the <span> tags. You are limited to an amount of text that works across devices.	Any text
7	This is the smaller sub title text. Edit the text between the <span> tags. You are limited to an amount of text that works across devices.	Any Text Delete this line for no text.
8	<a class="action primary" href="#">Shop Now</a> Change the button text by changing the text between the > and </a>	1-3 words for the call to action.
8	<a class="action primary" href="#">Shop Now</a> Change the button colour to your Primary, Secondary or Tertiary brand colours set in your theme.	primary secondary tertiary
8	<a class="action primary" href="#">Shop Now</a> Change the link destination by changing between the href=" " as indicated by the #. This should be a valid URL and can use the Magento URL variables	Any valid URL
8	A link instead of a button. If you would prefer a link look instead of a button look remove the word action	action
10	Change the background colour of the text box and opacity. Change the # colour to the colour you desire and change the opacity number to any value between 0 and 1 with 1 being 100% opaque.	Any # colour Opacity between 0 and 1
11 onwards	In HTML open tags need closing tags. A closing tag is the same as an opening tag with a / at the start. If something isn't working you may not have closed the tags correctly. Ensure these are always present.	None

Hero Banner Template Code

Code Block

language	xml
title	Dynamic Banners
linenumbers	true

<!-- Hero Banner START -->
<div class="banner-hero">
<div class="banner-item">
<img src="{{media url="wysiwyg/lumarix/hero_1.png"}}" alt="All Lumarix images can have alt tags" />
<div class="banner-overlay" style="color: #F2923B;">
<span>Hero Image Banners</span> 
<span>Easy to make and edit</span> 
<a class="action primary" href="#">Shop Now</a>
<!-- Background Panel That Sits Behind Text -->
<div class="overlay-background" style="background-color: #fff; opacity: 0.85;"></div>
</div>
</div>
</div>
<!-- Hero Banner END -->

Two Column Banners

Code Block

language	xml
title	Dynamic 2 Column Banners

<!-- 2 Col Banner START -->
<div class="banner-2col">
    <div class="banner-item">
    	<img src="{{media url="wysiwyg/lumarix/2col_1.png"}}" alt="All Lumarix images can have alt tags" />
        <div class="banner-overlay left" style="color: #006bb4;">
        	<span>Half Size | Full Power</span> 
        	<span>I show full size on mobile!</span> 
        	<a class="normal" href="#">Shop Now</a>
            <!-- Background Panel That Sits Behind Text -->
            <div class="overlay-background" style="background-color: #fff; opacity: 0.95;"></div>
        </div>
    </div>
     <div class="banner-item">
    	<img src="{{media url="wysiwyg/lumarix/2col_2.png"}}" alt="All Lumarix images can have alt tags" />
        <div class="banner-overlay right" style="color: #fff;">
        	<span>50% Off Banners</span> 
        	<span>2 column dynamic banners</span> 
        	<a class="action secondary" href="#">Shop Now</a>
            <!-- Background Panel That Sits Behind Text -->
            <div class="overlay-background" style="background-color: #01456a; opacity: 0.95;"></div>
        </div>
    </div>
</div>
<!--2 Col Banner END-->

Three Column Banners

Code Block

language	xml

<!-- 3 Col Banner START -->
<div class="banner-3col">
    <div class="banner-item">
        <img src="{{media url="wysiwyg/lumarix/34col_1.png"}}" alt="All Lumarix images can have alt tags"  />
         <div class="banner-overlay left" style="color: #006bb4;">
        	<span>3 Column Banners</span> 
        	<span>Left alignment example</span> 
        	<a class="action primary" href="#">Shop Now</a>
            <!-- Background Panel That Sits Behind Text -->
            <div class="overlay-background" style="background-color: #fff; opacity: 0.95;"></div>
        </div>
    </div>
    <div class="banner-item">
       <img src="{{media url="wysiwyg/lumarix/34col_12.png"}}" alt="All Lumarix images can have alt tags"  />
         <div class="banner-overlay center" style="color: #006bb4;">
        	<span>3 Column Banners</span> 
        	<span>Left<span>Center alignment example</span> 
        	<a class="action secondary" href="#">Shop Now</a>
            <!-- Background Panel That Sits Behind Text -->
            <div class="overlay-background" style="background-color: #fff; opacity: 0.95;"></div>
        </div>
    </div>
    <div class="banner-item">
         <img src="{{media url="wysiwyg/lumarix/34col_13.png"}}" alt="All Lumarix images can have alt tags"  />
         <div class="banner-overlay right" style="color: #006bb4;">
        	<span>3 Column Banners</span> 
        	<span>Right alignment example</span> 
        	<a class="action tertiary" href="#">Shop Now</a>
            <!-- Background Panel That Sits Behind Text -->
            <div class="overlay-background" style="background-color: #fff; opacity: 0.95;"></div>
        </div>
    </div>
</div>
<!--3 Col Banner END-->

4 COLUMN BANNER:

All you need to do to create a 4 Column Banner is to follow the instructions above, but make these changes:

Ensure the parent div has a class of "banner-4col" (instead of "banner-hero" as it has in the hero banner.)
Ensure you place four "banner-items" within this parent div (Instead of just one that goes into the hero banner.)
1. Fill in the IMG, Spans, Button Style, and Background Colors for each Banner Item, as per the instructions above.

Code Block

language	xml

<!-- 4 Col Banner START -->
<div class="banner-4col">

Four Column Banners

Code Block

language	xml

<!-- 4 Col Banner START -->
<div class="banner-4col">
    <div class="banner-item">
    	<img src="/pub/media/wysiwyg/home/homepage-cyclewear.jpg" alt="Spring / Summer Cyclewear" />
        <div class="banner-item">
    	<img src="/pub/media/wysiwyg/home/homepage-cyclewear.jpg" alt="Spring / Summer Cyclewear" /overlay left" style="color: #fff;">
        <div class="banner-overlay left" style="color: #fff;">
        	<span>Spring 	<span>Spring / Summer Cyclewear</span> 
        	<span>Grab the new range and take in the sun!</span> 
        	<a class="action primary" href="/free-servicing">Shop Now</a>
            <!-- Background Panel That Sits Behind Text -->
            <div class="overlay-background" style="background-color: #01456a; opacity: 0.95;"></div>
        </div>
    </div>
    <div class="banner-item">
        <img src="/pub/media/wysiwyg/home/homepage-clearance.jpg" alt="Clearance Items" />
        <div class="banner-overlay center" style="color: #fff;">
        	<span>Clearance Items</span> 
        	<span>Grab a bargain with our clearance range</span> 
        	<a class="action secondary" href="/free-servicing">Shop Now</a>
            <!-- Background Panel That Sits Behind Text -->
            <div class="overlay-background" style="background-color: #01456a; opacity: 0.95;"></div>
        </div>
    </div>
    <div class="banner-item">
        <img src="/pub/media/wysiwyg/home/homepage-helmets.jpg" alt="Helmets & Road Safety" />
        <div class="banner-overlay right" style="color: #fff;">
        	<span>Spring / Summer Cyclewear</span> 
        	<span>The latest gear to keep you protected</span> 
        	<a class="action tertiary" href="/free-servicing">Shop Now</a>
            <!-- Background Panel That Sits Behind Text -->
            <div class="overlay-background" style="background-color: #01456a; opacity: 0.95;"></div>
        </div>
    </div>
    <div class="banner-item">
        <a href="#">
            <img src="/pub/media/wysiwyg/home/homepage-cyclewear.jpg" alt="Cycle Wear" />
        </a>
    </div>
</div>
<!--4 Col Banner END-->

WIDE BANNER:

All you need to do to create a Wide Banner is to follow the instructions above, but make these changes:

Ensure the parent div has a class of "banner-wide" (instead of "banner-hero" as it has in the hero banner.)

Fill in the IMG, Spans, Button Style, and Background Colors for single Banner Item within the parent div, as per the instructions above.

Wide Banners

Code Block

language	xml

<!-- Wide Banner START-->
<div class="banner-wide">
    <div class="banner-item">
    	<img src="/pub/media/wysiwyg/clearance.png" alt="Spring / Summer Cyclewear" />
        <div class="banner-overlay right" style="color: #fff;">
        	<span>1 Col Wide Letterbox</span> 
        	<span>Opacity and BG Colour. Right/Center</span> 
        	<a class="action primary" href="/free-servicing">Shop Now</a>
            <!-- Background Panel That Sits Behind Text -->
            <div class="overlay-background" style="background-color: #01456a; opacity: 0.95;"></div>
        </div>
    </div>
</div>
<!--Wide Banner END-->

IMAGE DIMENSION GUIDE

Dimension Guidelines:

Hero: 1240px x 450px
2 Row: 625px x 375px
3 Col / 4 Col : 415px x 370px
Wide : 1240px x 255px

Some guidelines on how to ensure you promos look good in the layouts:

Ensure if you are placing images in a 2 / 3 / 4 column, that they have the exact same dimensions, (or at least they must have the same height,) to display properly.
If you are placing mages in hero or wide banners, make sure they meet the minimum width requirements above.
Stick to the guidleines resolutions above for best results.

Version	Old Version 7	New Version 8
Changes made by	Christopher Gee	Christopher Gee
Saved on	Aug 21, 2018	Aug 22, 2018

Versions Compared

Key

How Dynamic Banners Work

Banner Options

Hero Banner Template Code

Two Column Banners

Three Column Banners

Four Column Banners

IMAGE DIMENSION GUIDE