Sun
26
Jul
2015
The collection of the most common support issues and mistakes using a Matrix theme.
* Last Updated: April 2022
01
02
03
04
05
06
07
08
09
10
11
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.
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
____
02. Install a custom theme on your website
____
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
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">
...
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:
All body classes for Hero Image:
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">
...
There are 2 ways to add a hero title:
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>
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.
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
This kind of error appears in old templates installed in 2013-2017
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
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.
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:
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;"> </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;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"> 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;"> </span></td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"><span style="color: #ffffff;"> 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;"> </span></td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"><span style="color: #ffffff;"> 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;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"><span style="color: #ffffff;"> 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;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32.5382px;"><span style="color: #ffffff;"> 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;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"> 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;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"> 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;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"> 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;"> </span></td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"><span style="color: #ffffff;"> 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;"> </span></td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"><span style="color: #ffffff;"> 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;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);"> 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;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);"> 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;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);"> 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;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);"> 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;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);"> 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;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);"> 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;"> </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;"> </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;"> </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;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);"> background 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;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);"> navigation 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.
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">  </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: