A way to code template Banner for e-Commerce Store.

Typical banner that you can create with this addon.

This is the publication of a work that has never been published before.

With graphic banner you can create beautiful banners for product announcement, sales and special offers. Creating a banner with a code will save your time if you write the code yourself and you will save money if you order a banner from designers. We’ve made different types of banner templates, so some of them will surely please you.

Banner’s base structure:

To make different types of banners, you should understand it’s code structure. The basis of the banner are background image, wrapper of the blocks and idependent content blocks.

#1 Background image

<div>
    <img 
      class=”ty-pict sd-wide-banner__image cm-image”
      src=”//your_site_url/images/banner/image_name.jpg”
      alt=”image_name”
      title=”image_title”
    >
</div>

To add a background image you should put it in the folders of your site, where “images” folder is common for all store images, then create your custom name folder for full width banner images, we named it “banner” here and put your image there. Then write the path to your image in “src” and give an image name in “alt” property.

Advices:

• For URL it’s not nessecary to write transfer protocols, but you can use both options like this //your_site_url and that https://your_site_url .
• Standard banner image resolution is 1920px×550px, but you can also make it 2560px×550px for 4k screen or try to set your custom height.
• Don’t forget to optimize banner images weight with on-line compressors, like TinyPNG, Copmress JPEG or others. The large weight of your images affects the download speed of the site.

# 2 Wrapper

This is a wrapper to all other blocks. It makes a box for content blocks inside it.

<div class=”sd-wide-banner__wrap”>Wrapper container
  <div class=”sd-wide-banner__content”>Container for the content
    … Content blocks
  </div>
</div>

# 3 Blocks

There are blocks with Title, Subtitle and a Button property. They all are independent blocks. Each block has its own html div with a specific class. You can swap blocks by changing the arrangement of their divs. You can add blocks of a certain type, vary their location and number.

To make a text title use this block:

<div class=”sd-wide-banner__content-title”>Title text here</div>

For subtitle:

<div class=”sd-wide-banner__content-subtitle”>Subtitle text here</div>

And the following code for the button:

<div class=”sd-wide-banner__content-button align-center”>
  <a href=”//your_url/page_to_redirect/” 
     class=”button”>Button name</a>
</div>

Where href is the page’s URL where to redirect by clicking on the button.

The example of blocks, that you can swap as you want

#4 Block’s content
Just add an extra class to each block’s class.

Add align-left to put content on the left side.
Add align-center to put it in the center.
Add align-right to put content on the right side.

We have here our button colored red. That’s because it was assigned a btn-red class. You can assign any of the following classes to the button.

Align text easily

You can quickly change the color of buttons adding to the button class the following classes

Two sides banner, in case we want to break the content into two identical parts:
# 1 Is the common wrapper for both two childs of content blocks.
# 2 Two separate content blocks.

Two sides banner

For editing HTML structure it is more convenient to use online code editors like Codepen or Repl It and then copy the finished code into the banner’s editor of the admin panel.
The blocks are flexible regarding parent container, so to place the block below create a new empty block and use <br> tag inside before required block, to place block above use block with <br> tag after the block you want to be slightly lower. <br> tag adds an extra blank line.
If we need to change a content position of our blocks. We want our title and button to be in the center and some subtitles to be left and right aligned.

These are the basic concepts when creating a banner.
See more live examples on our demo store.
Use banner’s demo code templates and just replace the content with the one you need.