Advanced Style Editor

Documentation

Editor

If you removed the style editor by mistake or made some errors in the code, - here's the way to to install it from scratch.

Step 01

  • Add a module 'Columns' to your footer with only one column(!).
  • Inside the 'Column' add the module 'Tables', Click on 'Edit HTML' button and replace the existing code with the following one and at the end click the save button.

Style Editor

default styles 



<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: #2156fa; 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: #f1eeee; 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: #00ff91; 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: #3b28cc; 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: rgba(0, 0, 0, 0); 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: #2156fa; 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: #2156fa; 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: #2156fa; 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: #2156fa; 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: #2156fa; 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: #2156fa; 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 data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-large-content, no-shopping-cart, g-font" data-tooltip-position="top">Template configurations</span></div>
<div class="config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-right-nav g-font</div>
<div class="c"></div>
<div class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05" data-tooltip-position="top">navigation styles</span></div>
<div class="config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15 weight-400 snip-nav</div>
<div class="c"></div>
<div class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">content styles</span></div>
<div class="config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white</div>
<div class="c"></div>
<div class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">footer styles</span></div>
<div class="config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form color-white</div>
<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 data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></div>
<div class="config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400</div>
<div class="c"></div>
<div class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-25" data-tooltip-position="top">Heading H2</span></div>
<div class="config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400</div>
<div class="c"></div>
<div class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-20" data-tooltip-position="top">Heading H3</span></div>
<div class="config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400</div>
<div class="c"></div>
<div class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></div>
<div class="config8 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400</div>
<div class="c"></div>
<div class="add-left-10 is-brandon-font"><span data-tooltip="wow animate__fadeIn, wow animate__fadeInUp" data-tooltip-position="top">Animations</span></div>
<div class="config9 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"></div>
<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 Zion theme. For specific template ( Lemberg, Bergen etc), you can use the preset styles.

preset styles

Step 02

  • Below the Tables, add a module 'Widget/HTML' with the following code inside. When you  click the save button, the new styles will be applied to your website and you can start using the editor

Last Updated: 08.07.2023 

<var>is-switcher</var> 

<script type="text/javascript">
//<![CDATA[
     jQuery.noConflict(),function(c){c(document).ready(function(){function t(){var t={};[".color1",".color2",".color3",".color4",".color5",".color6",".color7",".color8",".color9",".color10",".color11",".color12",".color13",".color14",".color15",".color16",".color17",".color18",".color19",".color20",".color21",".color22"].forEach(function(e){t[e]=c(e).css("background-color")}),document.documentElement.style.setProperty("--bg-primary",t[".color1"]),document.documentElement.style.setProperty("--bg-primary-light",t[".color2"]),document.documentElement.style.setProperty("--bg-primary-dark",t[".color3"]),document.documentElement.style.setProperty("--bg-secondary",t[".color4"]),document.documentElement.style.setProperty("--bg-secondary-dark",t[".color5"]),document.documentElement.style.setProperty("--bg-body",t[".color6"]),document.documentElement.style.setProperty("--bg-top-header",t[".color7"]),document.documentElement.style.setProperty("--bg-header",t[".color8"]),document.documentElement.style.setProperty("--bg-content",t[".color9"]),document.documentElement.style.setProperty("--bg-footer",t[".color10"]),document.documentElement.style.setProperty("--footer-color",t[".color11"]),document.documentElement.style.setProperty("--footer-link",t[".color12"]),document.documentElement.style.setProperty("--bg-hr",t[".color13"]),document.documentElement.style.setProperty("--bg-btn-01",t[".color14"]),document.documentElement.style.setProperty("--bg-btn-02",t[".color15"]),document.documentElement.style.setProperty("--bg-btn-03",t[".color16"]),document.documentElement.style.setProperty("--bg-social",t[".color17"]),document.documentElement.style.setProperty("--nav-color",t[".color18"]),document.documentElement.style.setProperty("--bg-subnav",t[".color19"]),document.documentElement.style.setProperty("--bg-overlay",t[".color20"]),document.documentElement.style.setProperty("--mobile-nav-color",t[".color21"]),document.documentElement.style.setProperty("--text-btn",t[".color22"])}c(".config, .config2, .config3, .config4, .config5, .config6, .config7,.config8").each(function(){var e,t=c(this);t.hasClass("config")?c("#hs-container").removeClass().addClass(t.text()):t.hasClass("config2")?c(".hs-menu nav,.hs-mega nav,.onepager .hs-menu nav a,.sidebar-options").removeClass().addClass(t.text()):t.hasClass("config3")?c("#content_area").removeClass().addClass(t.text()):t.hasClass("config4")?c(".hs-matrix").removeClass().addClass(t.text()):t.hasClass("config5")?c(".j-header h1,.j-htmlCode h1,h1.j-blog-header,.j-text h1").removeClass().addClass(t.text()):t.hasClass("config6")?c(".j-header h2,.j-htmlCode h2,.blogselection h2,.j-text h2,.j-blog-post--headline").removeClass().addClass(t.text()):t.hasClass("config7")?c(".j-header h3,.j-htmlCode h3,.j-text h3").removeClass().addClass(t.text()):t.hasClass("config8")&&(e=t.text().split(" "),c(".j-calltoaction-link").each(function(){var o=c(this);o.hasClass("j-calltoaction-link-style-1")?o.removeClass().addClass("j-calltoaction-link j-calltoaction-link-style-1"):o.hasClass("j-calltoaction-link-style-2")?o.removeClass().addClass("j-calltoaction-link j-calltoaction-link-style-2"):o.hasClass("j-calltoaction-link-style-3")&&o.removeClass().addClass("j-calltoaction-link j-calltoaction-link-style-3"),c.each(e,function(e,t){o.addClass(t)})}),c(".j-formnew input[type='submit']").each(function(){var o=c(this);o.removeClass().addClass("j-formnew input[type='submit']"),c.each(e,function(e,t){o.addClass(t)})}),c(".cc-m-download-file-link").each(function(){var o=c(this);o.removeClass().addClass("cc-m-download-file-link"),c.each(e,function(e,t){o.addClass(t)})}))});var l=c('<div class="guide-lines-container"><\/div>').appendTo(".matrix .is-fluid-area");function o(e){l.empty();var t=e.position(),o=e.outerWidth(),n=e.outerHeight();e.parent(),c('<div class="guide-line-horizontal"><\/div>').css({top:t.top+n/2,left:0,right:0}).appendTo(l),c('<div class="guide-line-vertical"><\/div>').css({left:t.left+o/2,top:0,bottom:0}).appendTo(l)}function s(){l.empty()}c(".matrix .is-fluid").draggable({containment:"parent",grid:[1,1],stop:function(){var e=100*parseFloat(c(this).position().left/parseFloat(c(this).parent().width()))+"%",t=100*parseFloat(c(this).position().top/parseFloat(c(this).parent().height()))+"%";c(this).css("left",e),c(this).css("top",t),s()},drag:function(e,t){o(t.helper)}}).click(function(){c(this).draggable({disabled:!1})}).dblclick(function(){c(this).draggable({disabled:!0})}),c(".matrix .is-fluid-area .is-fluid").resizable({containment:"parent",autoHide:!0,resize:function(e,t){var o=t.element.parent(),n=t.element.width()/o.width()*100+"%",o=t.element.height()/o.height()*100+"%";t.element.css({width:n,height:o,left:0,top:0}),s()},start:function(e,t){o(t.helper)},stop:function(){s()}}),c(".matrix .is-fluid-area").resizable({handles:"s",autoHide:!0,stop:function(e,t){var o=t.element.parent();t.element.css({height:t.element.height()+"px",width:t.element.width()/o.width()*100+"%"})}}),new MutationObserver(function(e){e.forEach(function(e){"childList"===e.type&&0<e.addedNodes.length&&(t(),c(".bg-custom-color").each(function(){var e=c(this).find("span").css("color");c(this).parent().attr("style","background-color: "+e+"!important")}))})}).observe(document.body,{childList:!0,subtree:!0}),t(),c(".config8").each(function(){c(".hs-button").addClass(c(this).text())}),c(".config9").each(function(){c(".hs-content .j-hgrid,.is-anim-block").addClass(c(this).text())}),c(".j-hgrid").unwrap().wrap("<div class='m-section' />"),c(".cc-m-htmlcode").on({mouseenter:function(){c(this).find("var, ins").show().css("display","block")},mouseleave:function(){c(this).find("var, ins").hide()}}),c("var").each(function(){c(this).closest(".m-section").removeClass().addClass(c(this).text())}),c(".matrix-reload").click(function(){location.reload(),c(".matrix .cc-content-parent").animate({opacity:".5"},500)}),c(".matrix-view").on("click",function(e){e.preventDefault(),c("#cms",window.parent.document).parent().parent().parent().toggleClass("j-prev-phone-portrait")}),c(".cc-m-all-opened .is-fluid").removeAttr("data-mce-style"),c(".draggable-logo").appendTo(c(".hs-logo")),c(".cc-m-hgrid").each(function(){0<c(this).find(".draggable-hero").length&&c(this).appendTo(c(".is-hero-draggable"))}),c("body").hasClass("matrix")||c(".draggable-hero").appendTo(c(".is-hero-draggable"));const e=document.querySelector(".is-hero-draggable");if(e&&!e.classList.contains("draggable-hero")){const a=e.querySelector(".m-section");a&&a.remove()}var n=c(".magic-field");n.find(".hs-magic, .draggable-right-header").length||c(".hs-magic, .draggable-right-header").remove().appendTo(n),c(".reset-btn").click(function(){c(".matrix .is-fluid").draggable("destroy"),c(".matrix .is-fluid").draggable()}),c(".edit-btn").click(function(){c(".matrix .is-fluid").draggable("destroy")}),c(".btn-delete").click(function(){c(this).parent().remove()}),c(".btn-add").click(function(){var e=c(this).parent(".is-fluid"),t=e.clone();t.css({left:"+=10px",top:"+=10px"}),t.insertAfter(e)}),c(".is-fluid").removeAttr("data-mce-style")})}(jQuery);
//]]>
</script> 

<!-- style editor buttons -->
<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> <button class="btn btn-sm btn-float-left matrix-msg invisible matrix-view" style=
    "width: 32px;height: 32px;position:fixed;text-align: center;top:1px;left:69px;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>
<!-- end style editor buttons -->

Step 03

Move your Style switcher on the top of the page.

  • Refresh the page to see the Style Editor on the top of the page.

To summarize, you should have a module 'Columns' with only one column and inside of it you place 2 different elements:

  1. module 'Tables' with style editor
  2. module 'Widget/HTML' with js code

How to Edit

Find out how to edit your website using the advanced style editor.

read more
bg-dark color-white add-20 mid-round

Preset styles

9 preset Matrix Themes styles to restore the style editor.

read more
bg-dark color-white add-20 mid-round


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