• Home
  • Templates
  • Page builder
  • Support
  • Blog
  • Home
  • Templates
  • Page builder
  • Support
  • Blog
    09. May 2019

    Play of columns 6: Fullwidth sections


    Display any Jimdo module as fullwidth section

    • 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 it

    Add the module "Columns" with only one column. Then display any Jimdo module inside  you'd like to be fullwidth. Now as the last module at the bottom of the column, display "widget/HTML" with the following code


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

    Simple image


    Slideshow


    Text with Photo

    Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Sed aliquam ultrices mauris. Mauris sollicitudin fermentum libero. Phasellus dolor.


    Google maps

    Google Maps content is not displayed due to your current cookie settings. Click on the cookie policy (functional) to agree to the Google Maps cookie policy and view the content. You can find out more about this in the Google Maps privacy policy.

    Fullwidth section with background color

    <div class="f02">
    </div>
    <script type="text/javascript">
    //<![CDATA[
         jQuery.noConflict();
    (function($) {
    // Init
    $(document).ready(function() {
    $( ".j-module:has(.f02)" ).wrap( "<div class='hs-fullwidth bg-primary color-white link-white white-outline-btn' />" );
    });
    })(jQuery);
    //]]>
    </script>
    

    This is a title

    Morbi nec metus. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Cras ultricies mi eu turpis hendrerit fringilla. Vivamus quis mi.

     

    Aliquam lobortis. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Phasellus consectetuer vestibulum elit.

     

    Nullam sagittis. Fusce convallis metus id felis luctus adipiscing. Integer tincidunt. Fusce convallis metus id felis luctus adipiscing.


    This is a title

    Morbi nec metus. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Cras ultricies mi eu turpis hendrerit fringilla. Vivamus quis mi.

     

    Aliquam lobortis. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Phasellus consectetuer vestibulum elit.

     

    Nullam sagittis. Fusce convallis metus id felis luctus adipiscing. Integer tincidunt. Fusce convallis metus id felis luctus adipiscing.

    New Button

    tagPlaceholderTags:

    Write a comment

    Comments: 6
    • #1

      Sean (Wednesday, 03 July 2019 14:06)

      Thank you for the amazing job that you are doing.

      I wanted to ask how you would "Add the module "Columns" with only one column" when all columns come in pairs?

    • #2

      Serhiy (Wednesday, 03 July 2019 20:36)

      @Sean you need to remove one column, so it will be only one

    • #3

      Matrix themes (Wednesday, 11 March 2020 10:25)

      @Kathi you need to zoom out the page in admin mode and then resize the image to the full width size.

    • #4

      Alice (Wednesday, 29 July 2020 11:58)

      How can you set Google map as a fullwidth without background? as you did above.

    • #5

      Matrix themes (Wednesday, 29 July 2020 13:28)

      @Alice please provide your website url

    • #6

      Tom (Friday, 25 December 2020 08:50)

      Now that javascript gets banned, how are we going to do this in the future?

    Support

    • Docs
    • Guides
    • Style Editor
    • Global Updates
    • Theme Updates
    • Common support issues

    Features

    • Templates
    • Page Builder
    • Add-ons
    • Landing pages
    • Alt Classes
    • Matrix variables

    Get inspired

    • Most popular templates
    • Website examples
    • Custom widgets
    • Block Elements
    • Fluid Sections

    Quick links

    • Marketplace
    • Matrix Themes for Agencies
    • Matrix Themes for Web Designers
    • Small Business websites
    • Create a new website
    • Pricing
    hide-in-doc-page

    draggable-logo

    Showcase

     

    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
       text color
    Other elements
      social icons
      navigation color
      subnav background
    Mobile navigation
       background color
       navigation color
    Template configurations
     
    has-center-nav g-font has-large-header
     
    Navigation styles
     
    size-15 weight-400 snip-nav --line01 is-uppercase
     
    Content styles
     
    form-white
     
    Footer styles
     
    o-form color-white

     

    Typography

    Heading H1
    weight-600 is-uppercase
     
    Heading H2
    weight-400 is-uppercase
     
    Heading H3
    weight-600 is-uppercase
     
    Buttons
    weight-600 is-uppercase
     
    Animations
     

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

    MATRIX THEMES

    STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE

    About | Privacy Policy | Cookie Policy | Sitemap
    Created with Jimdo
    Log in Log out | Edit
    • Scroll to top
    Close