Rixxo Responsive Banner Blocks

How Dynamic Banners Work

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

Example Banner Code

<!-- 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
7	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
8	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.
9	<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.
9	<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
9	<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
11	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
12 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 Banners

Dynamic Banners

<!-- 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-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.

<!-- 2 Col Banner START -->
<div class="banner-2col">
    <div class="banner-item">
    	<img src="/pub/media/wysiwyg/Road.png" 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">
    	 <a href="#">
            <img src="/pub/media/wysiwyg/mountain.png" alt="Clearance Items" />
        </a>
    </div>
</div>
<!--2 Col Banner END-->

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.

<!-- 3 Col Banner START -->
<div class="banner-3col">
    <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">
         <a href="#">
            <img src="/pub/media/wysiwyg/home/homepage-helmets.jpg" alt="Helmets & Road Safety" />
        </a>
    </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.

<!-- 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 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 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.