• Home
  • Templates
  • Page builder
  • Support
  • Blog
  • Home
  • Templates
  • Page builder
  • Support
  • Blog
    26. July 2015

    Common Jimdo Support Issues

    Matrix themes support is-mid-rounded

    The collection of the most common support issues and mistakes using a Matrix theme.

     

    * Last Updated: April 2022

     

    Index


    • Issue with support email

      01

    • Theme installation

      02

    • Hide the shopping cart

      03

    • How to edit the info box

      04

    • Social links in header

      05

    • Editing the hero image

      06

    • Editing the hero title

      07

    • How to change the color links in footer

      08

    • How to fix the admin menu links

      09

    • When your website is blocked

      10

    • How to reset the Style Editor

      11

    01. The correct Support email

    Theme support via email is available only through the contact forms from support page or Matrix theme admin > help section.

    Sending an email request directly or from a previously sent email, might end up in the spam folder.

    Correct support email

    02. How to install a Matrix theme

    If you asked the installation of Matrix theme on your test Jimdo website, here's a quick guide about how to transfer it to your main website


    01. Make the back up first

    ____

    • Copy the HTML code using a simple text editor (designs> custom template> html
    • Copy the links you will find in Edit HEAD section (settings> edit HEAD)
    • Save all files on your computer. Go to designs > custom template> files. 
    has-timeline-list bg-secondary color-white add-10 mid-round

    02. Install a custom theme on your website

    ____

    • Upload all files ( designs>custom template>files )
    • Paste the HTML ( designs>custom template>html )
    • Paste the CSS styles ( designs>custom template>css )
    • Click the save button to save all changes
    • Add all links or custom code to Edit HEAD area ( settings>Edit HEAD )
    • Disable the Jimdo mobile version ( settings>mobile view )
    has-timeline-list bg-secondary color-white add-10 mid-round

    03. Hide shopping cart if empty

    bg-grey add-5

    If you're not using online store and want to hide  the shopping cart, simply add the class 'no-icon'  to 'sc-wrapper' directly in HTML ( design>custom template>HTML)


    <div class="sc-wrapper no-icon"> <var>shoppingcart</var>
    </div>

    The shopping cart in Matrix themes is not displayed if you don't have any module 'Store item' on your website


    04. How to edit the info box

    bg-grey add-5

    Some of Matrix Themes include the info box above the header. You can edit this section directly in HTML Design> Custom template> HTML :

    
    <div class="fa fa-mobile">
    </div>
       (+46) 432‑582-02,
    <div class="fa fa-envelope">
    </div> <a href="mailto:office@mail.se">office@mail.se</a>


    How to remove the header top section

    Go to Design> Custom template> HTML and add the class 'hidden' to the following line:

    
    <div class="hs-top-header hidden">
    ...
    • Note:
    • Depending on the template structure, the section hs-top-header can include the magic area ( header social links) or shopping cart. So if you remove it, you will remove the other important elements of your website.

    05. Display the social icons in header

    bg-grey add-5

    How to edit:

    Add the social icons widget to your footer and then class hs-magic to make it appear in header ( you need to refresh the page to see the effect)

    When the icons will be displayed in header, you can edit them in the same position of footer


    06. Editing the hero section

    Hero Image can be edited in Design> Background.

    You can select different image for each page of your website.

    Advanced settings

    To disable the hero section for specific page, you need to add

    the body class 'no-hero' in Edit Head:

    bg-grey add-5

    All body classes for Hero Image:

    • no-hero - deactivate the background image for specific page
    • main-page -  display the same image size as on your homepage
    • no-hero-overlay -  remove the overlay filter

    Deactivating the hero section from the whole website

    In this case  the body class 'no-hero' should be placed directly in HTML like shown below:

    
      <div class="global-colors brand-bg brand-link has-custom-text large-inner no-hero">
            ...   
    
    
    

    07. Edit the hero title

    There are 2 ways to add a hero title:

    • Widget from Shortcodes section (old templates)
    • Draggable option

    1. HTML/Widget

    In Matrix theme admin 'Shortcodes' you can find a widget 'Hero Title"  with 3 styles. Once copied, you paste it inside the content section and refresh the page. The hero title will be displayed inside the hero image but can be edited in content

    In case of any error of the hero title code, the red box might disappear. If you can't see it anymore, you still will be able to find it on mouseover like shown below:

    How to fix it:

    1. Once found the code of the hero title, you can delete it and add a new one from 'Shortcodes'.

     

    2. Make sure your hero title code  and the end looks like this:

    <div class="matrix-msg invisible">

         Edit here your hero image 

    </div>

    • Note:
    • The hero title from the section shortcodes in recent Matrix themes has been replaced by draggable options with variables

    Hero title with variables

    1. Add a module columns with 2 columns
    2. Inside the left column add the following code using the Widget/HTML

     

    
    <var> draggable-hero color-white g-font </var>

    3. Refresh the page and start editing the hero section by adding any element inside the columns

     

    Editing the columns

    Once your module will appear inside the hero section, it's not possible to change the columns by adding or removing a new one. The only way to do it is to remove the Widget/HTML with the variables, refresh the page  and edit the columns inside the content section. 

    When you finish, replace the variables code for the draggable hero.

    08. Setup the link color of the footer

    To set up the color of global links in content and footer section, just go to Design> Font Settings and change the color of Link/Navigation.

    In this section you can also change the Headings size/color and style of horizontal line

    09. How to fix the admin menu links

    This kind of error appears in old templates installed in 2013-2017

    How To Fix

    Go to Design> Custom Template> HTML and find the section of Matrix Themes menu:

    
    <!-- ************* Vimeo Popup ************* -->
    <div class="invisibleh">
    <a class="popup-vimeo" href="http://www.matrix-themes.com/support/documentation/" title="">Documentation</a><br/>
    <br/>
    <a class="popup-vimeo" href="http://www.matrix-themes.com/support/quick-setup/" title="">Quick setup</a><br/>
    <br/>
    <a class="popup-vimeo" href="http://brand-colors.com/" title="">Select a color</a><br/>
    <br/>
    <a class="popup-vimeo" href="http://fontcdn.org/" title="">Select a font</a><br/>
    <br/>
    <a class="popup-vimeo" href="http://www.matrix-themes.com/support/shortcodes/" title="">Shortcodes</a><br/>
    <br/>
    <a class="popup-vimeo" href="http://www.matrix-themes.com/support/helper-classes/" title="">Helper classes</a><br/>
    <br/>
    <a class="popup-vimeo" href="http://www.matrix-themes.com/support/updates" title="">Updates</a><br/>
    <br/>
    <a class="popup-vimeo" href="http://www.matrix-themes.com/support/help/" title="">Help</a><br/>
    <br/>
    </div> <!-- ************* End Vimeo Popup ************* -->

    All you have to do is to change the URL  from

    http://www.matrix-themes.com/support/documentation/  to

    https://www.matrix-themes.com/support/documentation/ and so on

    • Note:
    • The admin menu in Matrix themes installed in 2021 is injected by js file and not available anymore in HTML.

    13. When your website is blocked by Jimdo

    bg-darkgray add-5

    Your website is blocked?

    Recently Jimdo started blocking the new websites of free account (This is due to a technical error). If it happened to your own website, just send an email to official Jimdo support asking to unblock it. Usually, you will get the answer in 24h. It is recommended to save the original source files ( HTML, CSS and js file ) before making any change in custom template.


    Contact Jimdo support

    14. How to reset the Style Editor

    Being drag&drop area, you can move any element  of your website to that area even another columns module. As a result,  you'll need to reset the whole block of the style editor explained below:

    1. Identify the HTML module with the class is-switcher

    This class makes your style editor appear on the top of the page, so you can deactivate it ( e.g. change it's name from is-switcher to is-switcher__ ) or  simply move it using drag&drop tools to the content section.  Then refresh the page and you'll find your style editor module inside the footer.

     

    2. Editing inside the footer

    Inside the footer, you can decide whether to edit it here or completely replace a new one:

    • Add a module 'Columns' with only one column.
    • Inside of it, add the following 3 modules:

    01) module 'Tables' with the following code:


    <div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;"> <p style="color: #ffffff!important;">&nbsp;</p> <div class="cc-map-additional-devider"><span>Main colors</span></div> <table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"> <tbody> <tr class="" style="height: 32px;"> <td class="color1" style="cursor: pointer; background-color: #115cfa; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;">&nbsp;</td> <td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;">&nbsp;bg-primary</td> </tr> <tr class="" style="height: 32px;"> <td class="color2" style="cursor: pointer; background-color: #efefee; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;"><span style="color: #ffffff;">&nbsp;</span></td> <td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"><span style="color: #ffffff;">&nbsp;bg-primary-light</span></td> </tr> <tr class="" style="height: 32px;"> <td class="color3" style="cursor: pointer; background-color: #1e2022; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;"><span style="color: #ffffff;">&nbsp;</span></td> <td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"><span style="color: #ffffff;">&nbsp;bg-primary-dark</span></td> </tr> <tr class="" style="height: 32px;"> <td class="color4" style="cursor: pointer; background-color: #59c3c3; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;">&nbsp;</td> <td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"><span style="color: #ffffff;">&nbsp;bg-secondary</span></td> </tr> <tr class="" style="height: 32px;"> <td class="color5" style="cursor: pointer; background-color: #ff4f79; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;">&nbsp;</td> <td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32.5382px;"><span style="color: #ffffff;">&nbsp;bg-secondary-dark</span></td> </tr> </tbody> </table> <div class="cc-map-additional-devider"><span>Template sections</span></div> <table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"> <tbody> <tr class="" style="height: 32px;"> <td class="color6" style="cursor: pointer; background-color: #000000; width: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666; height: 32px;">&nbsp;</td> <td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;">&nbsp;body</td> </tr> <tr class="" style="height: 32px;"> <td class="color7" style="cursor: pointer; background-color: #115cfa; width: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666; height: 32px;">&nbsp;</td> <td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;">&nbsp;top-header</td> </tr> <tr class="" style="height: 32px;"> <td class="color8" style="cursor: pointer; background-color: #ffffff; width: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666; height: 32px;">&nbsp;</td> <td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;">&nbsp;header</td> </tr> <tr class="" style="height: 32px;"> <td class="color9" style="cursor: pointer; background-color: #ffffff; width: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666; height: 32px;"><span style="color: #ffffff;">&nbsp;</span></td> <td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"><span style="color: #ffffff;">&nbsp;content</span></td> </tr> </tbody> </table> <div class="cc-map-additional-devider"><span>Footer Styles</span></div> <table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"> <tbody> <tr style="height: 32px;"> <td class="color10" style="cursor: pointer; background-color: #1e2022; width: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666; height: 32px;"><span style="color: #ffffff;">&nbsp;</span></td> <td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"><span style="color: #ffffff;">&nbsp;background</span></td> </tr> <tr style="height: 32px;"> <td class="color11" style="cursor: pointer; background-color: #ffffff; width: 32px; text-align: center; border-radius: 500px; border: 1px solid #ffffff;">&nbsp;</td> <td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);">&nbsp;text color</td> </tr> <tr style="height: 32px;"> <td class="color12" style="cursor: pointer; background-color: #3574f2; width: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;">&nbsp;</td> <td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);">&nbsp;link color</td> </tr> <tr style="height: 32px;"> <td class="color13" style="cursor: pointer; background-color: #115cfa; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;">&nbsp;</td> <td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);">&nbsp;horizontal line</td> </tr> </tbody> </table> <table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table> <div class="cc-map-additional-devider"><span>Buttons</span></div> <table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"> <tbody> <tr style="height: 32px;"> <td class="color14" style="cursor: pointer; background-color: #115cfa; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;">&nbsp;</td> <td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);">&nbsp;style 1</td> </tr> <tr style="height: 32px;"> <td class="color15" style="cursor: pointer; background-color: #115cfa; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;">&nbsp;</td> <td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);">&nbsp;style 2</td> </tr> <tr style="height: 32px;"> <td class="color16" style="cursor: pointer; background-color: #115cfa; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;">&nbsp;</td> <td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);">&nbsp;style 3</td> </tr> </tbody> </table> <div class="cc-map-additional-devider"><span>Other elements</span></div> <table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"> <tbody> <tr style="height: 32px;"> <td class="color17" style="cursor: pointer; background-color: rgba(0, 0, 0, 0); width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;">&nbsp;</td> <td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);">social icons</td> </tr> <tr style="height: 32px;"> <td class="color18" style="cursor: pointer; background-color: #1e2022; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;">&nbsp;</td> <td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);">navigation color</td> </tr> <tr style="height: 32px;"> <td class="color19" style="cursor: pointer; background-color: #ffffff; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;">&nbsp;</td> <td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);">subnav background</td> </tr> </tbody> </table> <div class="c"></div> <div class="cc-map-additional-devider"><span>Mobile navigation</span></div> <table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0"> <tbody> <tr style="height: 32px;"> <td class="color20" style="background-color: #ffffff; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;">&nbsp;</td> <td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);">&nbsp;background&nbsp;color</td> </tr> <tr style="height: 32px;"> <td class="color21" style="background-color: #444444; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;">&nbsp;</td> <td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);">&nbsp;navigation&nbsp;color</td> </tr> </tbody> </table> <div class="c"></div> <div class="cc-map-additional-devider"><span>Template configurations</span></div> <table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="min-width: 200px; border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0); float: left;"> <tbody> <tr style="height: 32px;"> <td class="config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; border-radius: 3px; width: 100%; color: #888888;">has-right-nav g-font</td> </tr> </tbody> </table> <div class="c"></div> <div class="cc-map-additional-devider"><span>navigation styles</span></div> <table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="min-width: 200px; border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0); float: left;"> <tbody> <tr style="height: 32px;"> <td class="config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; border-radius: 3px; width: 100%; color: #888888;">size-16 weight-400 snip-nav</td> </tr> </tbody> </table> <div class="c"></div> <div class="cc-map-additional-devider"><span>content styles</span></div> <table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="min-width: 200px; border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0); float: left;"> <tbody> <tr style="height: 32px;"> <td class="config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; border-radius: 3px; width: 100%; color: #888888;">form-white</td> </tr> </tbody> </table> <div class="c"></div> <div class="cc-map-additional-devider"><span>footer styles</span></div> <table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="min-width: 200px; border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0); float: left;"> <tbody> <tr style="height: 32px;"> <td class="config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; border-radius: 3px; min-width: 100%; color: #888888;">o-form color-white</td> </tr> </tbody> </table> <div class="c"></div> <div class="cc-map-additional-devider"><span>Typography</span></div> <div class="c"></div> <div class="add-left-10 is-brandon-font"><span>Heading H1</span></div> <table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="min-width: 200px; border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0); float: left;"> <tbody> <tr style="height: 32px;"> <td class="config5 col-7" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; border-radius: 3px; width: 100%; color: #888888;">weight-600</td> </tr> </tbody> </table> <div class="c"></div> <div class="add-left-10 is-brandon-font"><span>Heading H2</span></div> <table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="min-width: 200px; border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0); float: left;"> <tbody> <tr style="height: 32px;"> <td class="config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; border-radius: 3px; width: 100%; color: #888888;">weight-600</td> </tr> </tbody> </table> <div class="c"></div> <div class="add-left-10 is-brandon-font"><span>Heading H3</span></div> <table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="min-width: 200px; border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0); float: left;"> <tbody> <tr style="height: 32px;"> <td class="config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; border-radius: 3px; width: 100%; color: #888888;">weight-600</td> </tr> </tbody> </table> <div class="c"></div> <div class="add-left-10 is-brandon-font"><span>Buttons</span></div> <table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="min-width: 200px; border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0); float: left;"> <tbody> <tr style="height: 32px;"> <td class="config8 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; border-radius: 3px; width: 100%; color: #888888;">weight-600 is-uppercase</td> </tr> </tbody> </table> <div class="c"></div> <div class="add-left-10 is-brandon-font"><span>Animations</span></div> <table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="min-width: 200px; border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0); float: left;"> <tbody> <tr style="height: 32px;"> <td class="config9 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; border-radius: 3px; width: 100%; color: #888888;">wow fadeInUp</td> </tr> </tbody> </table> <div class="c"></div> <div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div> </div>

    The above color settings are based on Alsten theme. For specific template ( Lemberg, Bergen etc), use the preset styles.

    preset styles

    02) Module 'Widget/HTML'

    
    <script type="text/javascript">
    //<![CDATA[
         jQuery.noConflict();  
    (function($) {  
    // Init 
    $(document).ready(function() { 
       // main primary color
          var color = $(".color1").css("background-color");
    $(".bg-primary").attr('style', 'background-color: '+ color +'!important');
        
        // accent light color
         var color = $(".color2").css("background-color");
    $(".bg-primary-light,.bg-grey,.bg-gray").css("background-color",color);
        
        // primary dark color
        var color = $(".color3").css("background-color");
    $(".bg-primary-dark").css("background-color",color);
        
        // secondary color
        var color = $(".color4").css("background-color");
    $(".bg-secondary").css("background-color",color);
        
        // secondary dark color
        var color = $(".color5").css("background-color");
    $(".bg-secondary-dark").css("background-color",color);
        
        // body
        var color = $(".color6").css("background-color");
    $(".body").css("background-color",color);
        
        // top header background
        var color = $(".color7").css("background-color");
    $(".hs-top-header").css("background-color",color);
        
        // header background
        var color = $(".color8").css("background-color");
        $(".top-nav,.hs-header:not(.has-transparent-header .hs-header),.sticky-wrapper .max-inner:not(.has-transparent-header .sticky-wrapper .max-inner)").css("background-color",color);
        
        // content background
        var color = $(".color9").css("background-color");
    $(".hs-content").css("background-color",color);
        
        // footer background
        var color = $(".color10").css("background-color");
    $(".hs-footer,.footer-btm").attr('style', 'background-color: '+ color +'!important');
        
        // footer text color
         var color = $(".color11").css("background-color");
    $(".hs-footer .inner,.hs-footer .inner h1,.hs-footer .inner h2,.hs-footer .inner h3,#contentfooter").attr('style', 'color: '+ color +'');
        
        // footer link color
        var color = $(".color12").css("background-color");
    $("#contentfooter a,.hs-footer .jtext-a,.hs-footer .cc-m-form-view-input-wrapper a").attr('style', 'color: '+ color +'');
        
        // footer horizontal line
        var color = $(".color13").css("background-color");
    $(".hs-footer .hr").css("background-color",color);    
        
        // buttons
        var color = $(".color14").css("background-color");
        $("#hs-container .j-downloadDocument .cc-m-download-link,#cc-inner .commententry input[type='submit'],#cc-inner .brand-bg a.j-calltoaction-link,.j-calltoaction-link.j-calltoaction-link-style-1,.hs-button:not(.ghost-white):not(.bg-white):not(.cd-btn.hs-button):not(.ghost-dark),.j-formnew input[type='submit'],a.blogreadmore").css("background-color",color);
        
        var color = $(".color15").css("background-color");
    $(".j-calltoaction-link.j-calltoaction-link-style-2").css("background-color",color);
        
        var color = $(".color16").css("background-color"); 
    $(".j-calltoaction-link.j-calltoaction-link-style-3").css("background-color",color);
      
        // social icons
        var color = $(".color17").css("background-color");
    $(".hs-social a").css("background-color",color);
    
        // nav link color
        var color = $(".color18").css("background-color");
        $(".nav-options a,.snip-nav ul li a:not(.snip-nav ul li ul li a),.is-varmdo .hs-menu .nav a").attr('style', 'color: '+ color +'!important');
        
        // subnav background
        var color = $(".color19").css("background-color");
        $(".hs-menu nav ul ul,.hs-mega .j-nav-variant-nested > ul > li > ul ").css("background-color",color);
    
         // mobile background
        var color = $(".color20").css("background-color");
        $("#cc-inner .overlay,ul.slimmenu.collapsed ").attr('style', 'background-color: '+ color +'!important');
         
        // mobile navigation color
        var color = $(".color21").css("background-color");
        $(".nav-mobile-options a,#cc-inner .slicknav_nav a,ul.slimmenu li a").attr('style', 'color: '+ color +'');
         
        
    
        // config classes
        $('.config').each(function() {
            $("#hs-container").removeClass().addClass( $(this).text()); 
            
    });
       $('.config2').each(function() {
           $(".nav-options,.hs-menu nav,.is-varmdo .hs-menu .nav a").removeClass().addClass( $(this).text()); 
    });
                 
       $('.config3').each(function() {
           $("#content_area").removeClass().addClass( $(this).text()); 
            
    });
        $('.config4').each(function() {
           $(".hs-matrix").removeClass().addClass( $(this).text()); 
    });
        $('.config5').each(function() {
           $(".j-header h1,.j-htmlCode h1,h1.j-blog-header").removeClass().addClass( $(this).text()); 
            
    });
        
        $('.config6').each(function() {
           $(".j-header h2,.j-htmlCode h2,.blogselection h2").removeClass().addClass( $(this).text()); 
            
    });
        $('.config7').each(function() {
           $(".j-header h3,.j-htmlCode h3").removeClass().addClass( $(this).text()); 
            
    });
        $('.config8').each(function() {
         $("a.blogreadmore,.cc-m-download-file-link a,.hs-button,.j-calltoaction-link, #cc-inner  .j-formnew input[type='submit']").addClass( $(this).text()); 
            
    });
        $('.config9').each(function() {
         $(".hs-content .j-hgrid,.is-anim-block").addClass( $(this).text()); 
            
    });
        
    });
    })(jQuery); 
    //]]>
    </script><br />
    
    <center>
        <button class="btn btn-sm cc-m-save btn-save btn-float-left matrix-msg matrix-save invisible" style=
        "width: 32px;height: 32px;position:fixed;text-align: center;top:1px;left:35px;z-index:999999;border:1px solid transparent;padding:5px;font-size:30px;background: #1ba9e1;color: #fff;-webkit-border-radius: 2px;border-radius:4px;"
        data-action="save"> &#160;</button>
    </center>


    03) Another module 'Widget/HTML'


    <var> is-switcher admin-only </var>

    The last step is to refresh the page to see the style editor on the top of the page.

     

    How to edit your website with the Style editor and all available classes can be found on official documentation page:

    documentation page
    tagPlaceholderTags: tutorials, issues

    Write a comment

    Comments: 17
    • #1

      Piombo Camille (Tuesday, 28 March 2017 19:41)

      Hello,

      Please, how create anchor ling on page ?

      Thank
      Camille

    • #2

      john (Friday, 02 June 2017 05:50)

      If your brand color is hardy visible on the dark background of footer or other section, you can solve this problem with helper classes.

    • #3

      Thorsten Nathan (Thursday, 24 August 2017 12:59)

      Hi,
      I'm using the Bergen Theme and added a parallax header to each content site. I managed to upload my own picture and change the css file-name. In the preview on the laptop everything looks just fine. If I change to a mobile device (iPhone) I DON'T see any picture, just the overlay (info). How is that possible? How can I change it, so my picture appears on every device.
      Thanks for your help!
      Best regards
      Thorsten

    • #4

      Serhiy (Thursday, 24 August 2017 13:07)

      @Thorsten the parallax from section 'shortcodes' is displayed in all devices including tablet and mobile.
      If you're using the smooth parallax from Enterprise package, the image is hidden in mobile devices, so you will have the overlay color instead of the image. It is also explained above the code in Enterprise package.

    • #5

      Peyman (Monday, 02 October 2017 22:20)

      Hi, funktioniert deine Neue Theme für Jimdo (Hafen) auch mit Plugsin von Powr.io ? ich freue mich für deine Rückmeldung!

    • #6

      Serhiy (Tuesday, 03 October 2017 17:43)

      @Peyman yes, it works fine

    • #7

      claudia (Sunday, 18 February 2018 14:46)

      Ich möchte mir das Business Theme zulegen. Vorher will ich aber wissen ob ich dann auch die tolle Kommentarsektion dabei habe. Die Kommentarsektion von Jimdo ist nämlich schlecht, weil ich da keine Antwort auf ein Kommentar geben kann.

      Liebe Grüße
      Claudia

    • #8

      Karl (Tuesday, 15 May 2018 18:08)

      how can I lengthen my parallax image so that it has the same width of the page (such as the header image)

    • #9

      Serhiy (Friday, 18 May 2018 13:19)

      @Karl the parallax widget is fullwidth by default even though in admin mode you can't see it.
      If you have a problem with your Matrix theme, please contact support service:
      https://www.matrix-themes.com/support/

    • #10

      Karlijn (Wednesday, 26 September 2018 14:54)

      Hi
      Is there any other way of uploading bigger image files.? With some of the widgets my image ends up being tiny...??
      thanks

    • #11

      Karlijn (Wednesday, 26 September 2018 15:12)

      and can I replace the header with a full width slide just on one page?

    • #12

      Raima (Saturday, 02 February 2019 12:25)

      I have question how add to cart in a button? I want to add the add to cart button to a single button without using the store item. There is some option for that?

      Another question I put all images in the hs-slider-fullwidth but when the slider moves to the second image they all appear in white, and only view one image. How I fix it?

    • #13

      Serhiy (Saturday, 02 February 2019 12:49)

      @Raima
      Please fill out the form from support page indicating all details:
      https://www.matrix-themes.com/support/

    • #14

      Camillus (Tuesday, 30 April 2019 10:36)

      Hi, I updated my gallery but now it’s not visible anymore?
      Thank you

    • #15

      Serhiy (Tuesday, 30 April 2019 10:39)

      @Camillus you're not using Matrix theme

    • #16

      Alejandro (Monday, 27 July 2020 00:56)

      Hallo,

      kann ich all die styles und was ihr sonst so bietet auch ohne eure Matrix themes verwenden? Ich möchte gerne das standard Jimdo theme CAPETOWN nutzen und eben darauf alles umsetzen, ist das möglich beim Kauf eures Angebots?

    • #17

      Matrix themes (Monday, 27 July 2020 07:49)

      @Alejandro no, the Matrix themes can be used only as a custom layout. To use the same widgets in standard Jimdo template, I suggest you to check the Zodiac framework:
      https://www.zodiac-framework.com/getting-started/

    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