• Home
    • Templates
      • Alsten
      • Lemberg
      • Bergen
      • Hafen
      • Altona
      • Enkel
      • Horten
      • Hisingen
      • Agen
      • Tjörn
      • Halmstad
      • Öland
    • Support
    • Purchase
    • Blog
  • Home
  • Templates
    • Alsten
    • Lemberg
    • Bergen
    • Hafen
    • Altona
    • Enkel
    • Horten
    • Hisingen
    • Agen
    • Tjörn
    • Halmstad
    • Öland
  • Support
  • Purchase
  • Blog
    22. April 2019

    Play of columns

    Make your Jimdo website more creative and awesome with the new features "play of columns"

    Available in Enterprise package and as Ultimate widgets.

    Check the demo features in the latest version of Hafen theme ( v.2.9)

    How it works

    Instead of adding new widgets, I decided to use a different approach - making different styles of default Jimdo widgets if there're special conditions. For example, the module "Image with text" added  inside the columns, will have a different style

     

    Standalone module "text with image"

    Fusce neque. Donec sodales sagittis magna. Maecenas vestibulum mollis diam. Maecenas malesuada. Fusce neque. Donec sodales sagittis magna. Maecenas vestibulum mollis diam. Maecenas malesuada.

    Module "Text with image" inside the columns

    Fusce neque. Donec sodales sagittis magna. Maecenas vestibulum mollis diam. Maecenas malesuada. Fusce neque. Donec sodales sagittis magna. Maecenas vestibulum mollis diam. Maecenas malesuada.


    And if you add it to the last columns, it will have a white overlap element:

    Fusce neque. Donec sodales sagittis magna. Maecenas vestibulum mollis diam. Maecenas malesuada. Fusce neque. Donec sodales sagittis magna. Maecenas vestibulum mollis diam. Maecenas malesuada.


    Additional overlap styles

    You can also get  the same overlap effect with 2 columns: you add a simple image to the first column and  Widget/HTML to the second one

    Your 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


    Button

    <!-- right overlap banner -->
    
    <div class="is-overlap hs-description bg-primary color-white" style="margin: 5% 0px 0px -50%;z-index:99;">
        <h3 class="">
            Your 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 />
        <!-- ************* default button ************* -->
         <a class="hs-button bg-round ghost-white small-btn" href="http://www.matrix-themes.com/" target="">Button</a>
    </div>
    <!-- end right overlap banner -->
    

    Your 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


    Button

    <!-- left overlap banner -->
    
    <div class="is-overlap hs-description bg-primary-dark color-white" style="margin: 5% -80% 0px 0%; z-index:99;">
        <h3 class="">
            Your 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 />
        <!-- ************* default button ************* -->
         <a class="hs-button bg-round ghost-white small-btn" href="http://www.matrix-themes.com/" target="">Button</a>
    </div>
    <!-- end left overlap -->
    

    Your 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


    Button

    <!-- centered overlap banner -->
    
    <div class="is-overlap hs-description center-align opacity-6 color-white" style="margin: -50% 5%; z-index:99;">
        <h3 class="">
            Your 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 />
        <!-- ************* default button ************* -->
         <a class="hs-button bg-round ghost-white small-btn" href="http://www.matrix-themes.com/" target="">Button</a>
    </div>
    <!-- end centered overlap banner -->
    

    Any further questions or error, please leave your message/ comment below

    tagPlaceholderTags:

    Write a comment

    Comments: 8
    • #1

      Peter S. (Tuesday, 23 April 2019 15:39)

      Hi Serhiy, great work, thanks!

    • #2

      Kerstin (Wednesday, 29 January 2020 14:54)

      but I can't handle the instructions. How can I change the images for images with text? If I insert a banner in the next column next to an image according to the instructions, the text does not appear completely on the mobile phone.

    • #3

      Matrix Themes (Wednesday, 29 January 2020 16:11)

      @Kerstin please contact via support page providing all details. Thank you.

    • #4

      Jana (Thursday, 23 April 2020 16:46)

      Hi Serhiy, can't copy the code. It shows 'copied', but it does not copy the code.

    • #5

      Matrix themes (Thursday, 23 April 2020 16:56)

      @Jana just fixed it

    • #6

      Jana (Thursday, 23 April 2020 17:24)

      Hi Serhiy, The 'centered overlap banner' does not work on any of my websites.

    • #7

      Matrix themes (Thursday, 23 April 2020 17:39)

      The center overlap banner has been removed in recent themes

    • #8

      Jana (Friday, 24 April 2020 10:22)

      Pity

    SUPPORT

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

    QUICK LINKS

    • Features
    • Pricing
    • Pre Purchase Questions
    • Partners
    • Custom Installation
    • Zødiac Framework

    GET INSPIRED

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

    Showcase
    draggable-logo

    STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE

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