• Home
  • Templates
    • Zion
    • Alsten
    • Lemberg
    • Bergen
    • Altona
    • Hafen
    • Enkel
    • Horten
    • Agen
    • Hisingen
    • Tjörn
    • Lacksund
    • Öland
  • Page builder
  • Support
  • Blog
  • Home
  • Templates
    • Zion
    • Alsten
    • Lemberg
    • Bergen
    • Altona
    • Hafen
    • Enkel
    • Horten
    • Agen
    • Hisingen
    • Tjörn
    • Lacksund
    • Öland
  • Page builder
  • Support
  • Blog
    18. April 2020

    April Updates

    A post with the latest updates of Matrix themes and some new features such as revealed blocks, additional styles for Jimdo images, animated buttons and much more.

    01. Ultimate widgets updates

    If you're using Enterprise package, please visit  the section Enterpise package > Updates and add the latest updates of Ultimate widgets of 17/04/2020

    The latest updates include:

    Custom shapes for default Jimdo images
    is-round
    is-round

    is-mid-round
    is-mid-round

    Added 2 classes

    • is-round
    • is-mid-round

    You simply upload any image using the module "Photo" and add  the right class to the alt text as shown in below screenshot

    * The rounded image should have a square form ( 100x100px, 300x300px etc)

    Animated buttons

    You can add some additional animation effects to your buttons

    Animated button
    Animated button
    Animated button
    
    <!-- *** animated button *** -->
    <a class="hs-button is-animate is-dark" href="http://www.matrix-themes.com/" target="">Animated btn </a>
    
    <!-- *** animated button for ghost white styles *** -->
    <a class="hs-button is-animate is-white ghost-white" href="http://www.matrix-themes.com/" target="">Animated btn </a>
    CSS styles for Font Awesome icons

    Substituted the downbutton arrow in hero image and plus icon in overlay teaser

    Overlay teaser



    Read more

    Overlay teaser


    Custom button

    Jimdo Image captions

    Custom caption styles inside the columns

    left caption
    left caption
    right caption
    right caption

    center caption
    center caption

    Standalone center aligned caption ( no inside the columns )

    center caption in standalone image
    center caption in standalone image

    You can combine the center aligned caption and alt text ' is-fullwidth'

    is-fullwidth
    Fullwidth image & caption

    If you're using multipy images, you can reduce the top or bottom margin with the following classes:

    • pull-top
    • pull-btm
    is-fullwidth
    is-fullwidth pull-top
    is-fullwidth pull-top

    A possibility to use fullwidth image, caption and overlay.

    a) Add the module "Columns" with only one row and upload your image with center aligned caption and alt text 'is-fullwidth'

    b) Below the image, inside the same column, add the following code using "Widget/HTML)

     

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

    Fullwidth image and caption with 1,2 or 3 columns

    a) Prepare 3 columns and center aligned images with caption and link to portfolio or other pages of your site.

    b) Below the last image inside the same column add the following code and refresh the page

    
    <div class="f0010">
    </div>
    <script type="text/javascript">
    //<![CDATA[
         jQuery.noConflict();
    (function($) {
    // Init
    $(document).ready(function() {
    $('.j-module:has(.f0010)').addClass('has-padding__ is-fullwidth has-cool-caption is-img-maxed has-col-3');
    });
    })(jQuery);
    //]]>
    </script>
    Project 01
    Project 01
    Project 02
    Project 02
    Project 03
    Project 03

    Tip!

    To avoid bad quality of fullwidth images in big screens, you need to zoom out the browser window ( cmd+"-") before uploading an image and resizing it to the maximum size

    New Designs

    The design  of Heisenberg template has been completely redesigned with  revealed hero image and  hamburger navigation. The template is available in two versions: default and Heisenberg Arch:

    Heisenberg

    Heisenberg Arch


    You can also find  out the full collection of new designs  ( Alsten construction, Oland Spa, Hisingen Freelancer and others)

    Full collection

    That's all for now;)

    Once again I'd like to remind all Matrix Themes partners and Jimdo Experts a possibility to  install any template for free ( up to 5 different templates )  filling out the form from this page.

    Stay safe
    tagPlaceholderTags:

    Support

    • Docs
    • Guides
    • Style Editor
    • Global Updates
    • Theme Updates
    • Helper classes
    • Common support issues
    • Contact

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