05. May 2019

Play of columns 2: Overlay banner

The combination of columns with simple image and Widget/HTML placed inside of the same column.

You can use one or more columns. The image should be always center aligned in order to have 100% width also in mobile devices

banner 1

Your custom title

This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use to add content to your website

Your custom title

This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use to add content to your website

<div class="hs-description pull-top-10">
    <h3>
        Your custom title
    </h3>

    <p>
        This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use
        to add content to your website
    </p>
    <br />
    <a class="hs-button small-btn" href="http://www.matrix-themes.com/purchase" target="">Custom button</a>
</div>

Banner 2

Your custom title

This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use to add content to your website

Your custom title

This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use to add content to your website

<div class="hs-description bg-dark color-white pull-top-20">
    <h3>
        Your custom title
    </h3>

    <p>
        This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use
        to add content to your website
    </p>
    <br />
    <a class="hs-button small-btn" href="http://www.matrix-themes.com/purchase" target="">Custom button</a>
</div>

Banner 3

Your custom title

This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use to add content to your website

Your custom title

This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use to add content to your website

<div class="hs-description bg-transparent pull-top-10" style="border:1px solid #ccc;border-top:none;">
    <h3>
        Your custom title
    </h3>

    <p>
        This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use
        to add content to your website
    </p>
    <br />
    <a class="hs-button small-btn" href="http://www.matrix-themes.com/purchase" target="">Custom button</a>
</div>

Banner 4

Your custom title

This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use to add content to your website

<div class="m-banner hs-description col-10 pull-top-30 cc-box" style="margin-left:10px;">
    <h3>
        Your custom title
    </h3>

    <p>
        This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use
        to add content to your website
    </p>
    <br />
    <a class="hs-button small-btn" href="http://www.matrix-themes.com/purchase" target="">Custom button</a>
</div>

Banner 5

Your custom title

This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use to add content to your website

<div class="m-banner hs-description bg-white center-align cc-box col-10 pull-top-30">
    <h3>
        Your custom title
    </h3>

    <p>
        This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use
        to add content to your website
    </p>
    <br />
    <a class="hs-button small-btn" href="http://www.matrix-themes.com/purchase" target="">Custom button</a>
</div>

Banner 6

Your custom title

This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use to add content to your website

<div class="m-banner hs-description m-banner bg-dark color-white col-6 cc-box" style="position:absolute;bottom:0; left:-5px;">
    <h3>
        Your custom title
    </h3>

    <p>
        This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use
        to add content to your website
    </p>
    <br />
    <a class="hs-button small-btn" href="http://www.matrix-themes.com/purchase" target="">Custom button</a>
</div>

Banner 7

Your custom title

This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use to add content to your website

<div class="m-banner hs-description bg-white has-shadow col-6 cc-box" style="position:absolute;bottom:0; right:-5px;">
    <h3>
        Your custom title
    </h3>

    <p>
        This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use
        to add content to your website
    </p>
    <br />
    <a class="hs-button small-btn" href="http://www.matrix-themes.com/purchase" target="">Custom button</a>
</div>

Important!

Please make sure your image inside the columns is always center aligned

Write a comment

Comments: 0

Matrix themes

Close

Documentation Quick setup Select a color Select a font Shortcodes Helper classes Updates Enterprise package Help Showcase Marketplace