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
    08. May 2019

    Play of columns 5 - Tile banner


    Create a cool widget with standard Jimdo tools

    • Before you use any below example, it is suggested to activate the animation effect for your module inside the columns. The details can be found in my previous post

    How to use

    Add a simple columns module with 2 rows:  left aligned image and on the right side add any element you'd like to display here. In my example I use title, text and button


    Now as the last module on the left, display "widget/HTML" by adding different styles from this page


    tile banner 1

    This is a title

    Praesent congue erat at massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra

    New Button

    <div class="t01">
    </div>
    <script type="text/javascript">
    //<![CDATA[
         jQuery.noConflict();
    (function($) {
    // Init
    $(document).ready(function() {
    $('.j-module:has(.t01)').addClass('bg-grey is-tile');
    });
    })(jQuery);
    //]]>
    </script>
    

    Tile banner 2

    This is a title

    Praesent congue erat at massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra

    New Button

    <div class="t02">
    </div>
    <script type="text/javascript">
    //<![CDATA[
         jQuery.noConflict();
    (function($) {
    // Init
    $(document).ready(function() {
    $('.j-module:has(.t02)').addClass('bg-dark color-white white-outline-btn is-tile');
    });
    })(jQuery);
    //]]>
    </script>
    

    Tile banner 3

    This is a title

    Aliquam eu nunc. Donec vitae sapien ut libero venenatis faucibus. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

     

    Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Praesent blandit laoreet nibh. Cras id dui.

    New Button

    <div class="t03">
    </div>
    <script type="text/javascript">
    //<![CDATA[
         jQuery.noConflict();
    (function($) {
    // Init
    $(document).ready(function() {
    $('.j-module:has(.t03)').addClass('bg-grey is-fullwidth is-tile');
    });
    })(jQuery);
    //]]>
    </script>
    

    Tile Banner 4

    This is a title

    Aliquam eu nunc. Donec vitae sapien ut libero venenatis faucibus. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

     

    Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Praesent blandit laoreet nibh. Cras id dui.

    New Button

    <div class="t04">
    </div>
    <script type="text/javascript">
    //<![CDATA[
         jQuery.noConflict();
    (function($) {
    // Init
    $(document).ready(function() {
    $('.j-module:has(.t04)').addClass('bg-dark color-white white-outline-btn is-fullwidth is-tile is--flex is-flex-block is-img-100');
    });
    })(jQuery);
    //]]>
    </script>
    

    Tile banner 5

    This is a title

    Aliquam eu nunc. Donec vitae sapien ut libero venenatis faucibus.

    New Button

    <div class="t05">
    </div>
    <script type="text/javascript">
    //<![CDATA[
         jQuery.noConflict();
    (function($) {
    // Init
    $(document).ready(function() {
    $('.j-module:has(.t05)').addClass('has-custom-heading is-tile');
    });
    })(jQuery);
    //]]>
    </script>
    

    Tile Banner 6

    This is a title

    Aliquam eu nunc. Donec vitae sapien ut libero venenatis faucibus.

    New Button

    <div class="t06">
    </div>
    <script type="text/javascript">
    //<![CDATA[
         jQuery.noConflict();
    (function($) {
    // Init
    $(document).ready(function() {
    $('.j-module:has(.t06)').addClass('has-mask  rel is-tile');
    });
    })(jQuery);
    //]]>
    </script>
    
    tagPlaceholderTags:

    Write a comment

    Comments: 2
    • #1

      Peter Litke (Friday, 11 October 2019 07:09)

      Hi,

      I would like to use "Tile Banner 6", I think it bugs.
      It puts a gray background from bottom to top on the page
      as you can see here: https://www.bdm-litke.de/start-2/

      The other Tile Banners do work on my page.
      Thank you for your help, Peter

    • #2

      Serhiy (Friday, 11 October 2019 10:00)

      @Peter thank you for letting me know, I just fixed it.

    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