Page Comparison

...

Info

title	Deprecated Function

As of July 2019 this function is deprecated and you should use the

...

Hero Banners

...

language	xml
title	Dynamic Banners
linenumbers	true

...

Dynamic Banners and Image Banners method for managing CMS banner blocks in Lumarix if your version has been updated to include the feature.

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="

...

Banner-Items:

In the img element you can then enter that src of the image you want to use, and add in a description of the image in the alt tag.
The div labelled "banner-overlay" is the overlay that is placed over the image.
1. Just after the "banner-overlay" class you can also type "left", "right" or "center" to choose how the overlay will align over the background image.
2. You can also use the inline-style of the banner overlay to control the colour of the text on this overlay.
3. It contains two spans. The first is the heading span, and the second is the description span:
  1. The first span will be larger and is where you can type in the main headline of this banner.
  2. The second span is where you can type in further details on the banner. Ensure to keep it to a short sentence.
4. This is then followed by a link button, which can be one of four types:
  1. Green Button (Primary Bike UK Colour):
    1. Ensure the a tag has a class of "action primary" to get a green button.
    2. You can change the text in the link by edited the text within the A tag.
  2. Blue Button (Secondary Bike UK Colour):
    1. Ensure the a tag has a class of "action secondary" to get a blue button.
      1. You can change the text in the link by edited the text within the A tag.
  3. Red Button (Tertiary Bike UK Colour):
    1. Ensure the a tag has a class of "action tertiary" to get a red button.
      1. You can change the text in the link by edited the text within the A tag.
  4. Normal Link (Bold White Text):
    1. Ensure the a tag has a class of "action" without any other class to get a normal bold white link.
    2. You can change the text in the link by edited the text within the A tag.
5. And finally there is a div labelled "overlay-background":
  1. Using inline styles, you can customise the colours of this overlay
    1. Changing the "background-color" will change the colour of the overlay background.
    2. Changing the "opacity" will change the opacity of the overlay.

Static Image w/o Overlay

A static image can be placed within a "banner-item" div, replacing all the markup described above. Allowing you to have a simple static image link rather than a background image with an overlay.

To create a Static Image, Copy the "banner-item" div from any parent banner type, and remove everything inside of it.
Then Create an a tag link with a href of the link you wish to point to for this static image.
Then place an img within this and point to the image using the src, and give it an alt description.
This "banner-item" div can now be placed in any of the Parent Banner types detailed above. (In a 2col / 3col / 4col / wide / hero etc.)

See many examples of this in the block called Template | Generic | All Banners in the Magento Admin panel under Content → Blocks. (One example is called Wide Banner STATIC EXAMPLE at the bottom for example.)

MORE COLUMN TYPES

TWO COLUMN BANNER:

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

Ensure the parent div has a class of "banner-2col" (instead of "banner-hero" as it has in the hero banner.)
Ensure you place two "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.

...

language	xml

...

{{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

<!--

...

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>

...

THREE COLUMN BANNER:

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

Ensure the parent div has a class of "banner-3col" (instead of "banner-hero" as it has in the hero banner.)
Ensure you place three "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.

...

language	xml

...

 	<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_2.png"}}" alt="All Lumarix images can have alt tags"  />

...

<div class="

...

banner-overlay

...

center"

...

style="

...

color: #006bb4;">
        	<span>3 Column

...

Banners</span> 
        	<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_3.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>
<

...

4 COLUMN BANNER:

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

...

/div>
<!--3 Col Banner END-->

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-overlay left" style="color: #fff;">
        	<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

...

WIDE BANNER:

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

...

 Col Banner END-->

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 4	New Version Current
Changes made by	Christopher Gee	Christopher Gee
Saved on	Aug 21, 2018	Jul 29, 2019

Versions Compared

Key

Hero Banners

How Dynamic Banners Work

MORE COLUMN TYPES

Banner Options

Hero Banner Template Code

Two Column Banners

Three Column Banners

Four Column Banners

IMAGE DIMENSION GUIDE