Rixxo Responsive Banner Blocks [Deprecated]
Deprecated Function
As of July 2019 this function is deprecated and you should use the 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
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.
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 |
| 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
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 -->
Two Column Banners
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
<!-- 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_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>
</div>
<!--3 Col Banner END-->
Four Column Banners
<!-- 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 Banners
<!-- 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.