Style Editor Docs
     
  • Home
  • Add-ons
  • Templates
    • Zion
    • Alsten
    • Lemberg
    • Bergen
    • Hafen
    • Altona
    • Enkel
    • Horten
    • Hisingen
    • Agen
    • Tjörn
    • Halmstad
    • Öland
  • Support
    • Style Switcher
    • Common Issues
    • Installation
    • Guides
    • Blog
    • Updates
    • Marketplace
  • Home
  • Add-ons
  • Templates
    • Zion
    • Alsten
    • Lemberg
    • Bergen
    • Hafen
    • Altona
    • Enkel
    • Horten
    • Hisingen
    • Agen
    • Tjörn
    • Halmstad
    • Öland
  • Support
    • Style Switcher
    • Common Issues
    • Installation
    • Guides
    • Blog
    • Updates
    • Marketplace
    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.

    banner 1

    is-100

    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


    Custom button
    is-100

    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


    Custom button

    <div class="hs-description left-align 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

    is-100

    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


    Custom button
    is-100

    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


    Custom button

    <div class="hs-description left-align 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

    is-100

    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


    Custom button
    is-100

    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


    Custom button

    <div class="hs-description  left-align 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

    is-100

    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


    Custom button

    <div class="m-banner hs-description left-align  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 5

    is-100

    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


    Custom button

    <div class="m-banner hs-description left-align 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 to use the alternative text 'is-100' in order to have images 100% width

    tagPlaceholderTags:

    Write a comment

    Comments: 5
    • #1

      Alice (Thursday, 18 June 2020 19:48)

      I want to center two columns and they shouldn't be as wide as shown here. How can I do it?

    • #2

      Alice (Thursday, 18 June 2020 19:49)

      I want to center two columns and they shouldn't be as wide as shown here. How can I do it?

    • #3

      Matrix themes (Thursday, 18 June 2020 23:02)

      @Alice just use 2 columns without custom code.

    • #4

      Alice (Tuesday, 30 June 2020 12:41)

      Yes, but the two columns are too wide. I need fats the same width as yours.

    • #5

      Matrix Themes (Tuesday, 30 June 2020 13:31)

      @Alice just use 2 columns without custom code

    SUPPORT

    • Blog
    • Support center
    • Tutorials
    • Common Support issues
    • Updates

    QUICK LINKS

    • Advanced Style Editor
    • Features
    • Pricing
    • Pre Purchase Questions
    • Marketplace
    • Zødiac Framework
    • Jimdo Creator

    WIDGETS

    • Instagram feed
    • Team Showcase
    • Animations
    • Parallax widget
    • Full width widgets
    • Countdown Timer
    • All Widgets

    GET INSPIRED

    • Showcase
    • Custom widgets
    • Enterprise Package
    • No coding features
    • Matrix variables
    • Dolphin Block Elements
    hide-in-doc-page

    Showcase
    draggable-logo

     

    Main colors
       bg-primary
       bg-primary-light
       bg-primary-dark
       bg-secondary
       bg-secondary-dark
    Template sections
       body
       top-header
       header
       content
    Footer Styles
       background
       text color
       link color
       horizontal line
    Buttons
       style 1
       style 2
       style 3
    Other elements
      social icons
      navigation color
      subnav background
    Mobile navigation
       background color
       navigation color
    Template configurations
    has-center-nav g-font
    navigation styles
    size-15 weight-400 snip-nav is-uppercase --line01
    content styles
    form-white
    footer styles
    o-form  color-white
    Typography
    Heading H1
    weight-600 is-uppercase
    Heading H2
    weight-600 is-uppercase
    Heading H3
    weight-600 is-uppercase
    Buttons
    weight-600 is-uppercase
    Animations
    none

    Note:
    All changes made here will be applied to your entire website.
    is-switcher admin-only

    MATRIX THEMES

    STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE

    About | Privacy Policy | Cookie Policy | Sitemap
    Copyright © 2022 All rights reserved
    Log in Log out | Edit
    • Scroll to top
    Close