01. Logo image

Quick setup

01. Logo image

The logo image in Matrix Themes can be changed with drag&drop tools.

If you can't see the option to change the logo or you deleted the logo area by mistake, here's a detailed tutorial about how to restore it step by step:

Add a module 'Columns' to your footer section with only one column

Inside the column, add a module 'Widget/HTML' with the following code:


<var> draggable-logo </var>

Reload the page to see the column in header section where you can add your logo using the module 'Photo'. Please don't forget to add a link to it of your homepage;)

In previous Matrix Themes, the logo image is edited directly in HTML. Upload your own image with the name logo.png ( Design > Custom template > Files ). Every new uploaded file will automatically overwrite the old one. It is suggested to use an image with maximum width of 400px. However, you can customize the logo size by changing the helper class directly in HTML ( Design > Custom template > HTML )

02. Advanced style editor

You can setup the main colors of your website with the Advanced style editor available in admin mode

Please check the additional resources working with the advanced style editor.

The section 'components' will help you to reset the whole block of the style editor.

Editing with Style Editor

Style Editor Components

Default style editor shortcodes:

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>
<tr style="height: 32px;">
<td class="color22" 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);">&nbsp;text color</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>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td 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, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H2</span></td>
</tr>
<tr>
<td 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H3</span></td>
</tr>
<tr>
<td 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td 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;" data-keep="true">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="wow animate__fadeIn, wow animate__fadeInUp" data-tooltip-position="top">Animations</span></td>
</tr>
<tr>
<td 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;">&nbsp;</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

All Preset Styles

<var>is-switcher</var> 

<script type="text/javascript">
//<![CDATA[
    jQuery.noConflict(),function(n){n(document).ready(function(){var t;n(".config, .config2, .config3, .config4, .config5, .config6, .config7,.config8").each(function(){var e,t=n(this);t.hasClass("config")?n("#hs-container").removeClass().addClass(t.text()):t.hasClass("config2")?n(".hs-menu nav,.hs-mega nav,.onepager .hs-menu nav a,.sidebar-options").removeClass().addClass(t.text()):t.hasClass("config3")?n("#content_area").removeClass().addClass(t.text()):t.hasClass("config4")?n(".hs-matrix").removeClass().addClass(t.text()):t.hasClass("config5")?n(".j-header h1,.j-htmlCode h1,h1.j-blog-header,.j-text h1").removeClass().addClass(t.text()):t.hasClass("config6")?n(".j-header h2,.j-htmlCode h2,.blogselection h2,.j-text h2,.j-blog-post--headline").removeClass().addClass(t.text()):t.hasClass("config7")?n(".j-header h3,.j-htmlCode h3,.j-text h3").removeClass().addClass(t.text()):t.hasClass("config8")&&(e=t.text().split(" "),n(".j-calltoaction-link").each(function(){var o=n(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"),n.each(e,function(e,t){o.addClass(t)})}),n(".j-formnew input[type='submit']").each(function(){var o=n(this);o.removeClass().addClass("j-formnew input[type='submit']"),n.each(e,function(e,t){o.addClass(t)})}),n(".cc-m-download-file-link").each(function(){var o=n(this);o.removeClass().addClass("cc-m-download-file-link"),n.each(e,function(e,t){o.addClass(t)})}))}),n(".matrix .is-fluid").draggable({containment:"parent",stop:function(){var e=100*parseFloat(n(this).position().left/parseFloat(n(this).parent().width()))+"%",t=100*parseFloat(n(this).position().top/parseFloat(n(this).parent().height()))+"%";n(this).css("left",e),n(this).css("top",t)}}).click(function(){n(this).draggable({disabled:!1})}).dblclick(function(){n(this).draggable({disabled:!0})}),n(".matrix .is-fluid-area .is-fluid").resizable({containment:"parent",autoHide:!0,stop:function(e,t){var o=t.element.parent();t.element.css({width:t.element.width()/o.width()*100+"%",height:t.element.height()/o.height()*100+"%"})}}),n(".bg-custom-color").each(function(){var e=n(this).find("span").css("color");n(this).parent().attr("style","background-color: "+e+"!important")}),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]=n(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"]),n(".config8").each(function(){n(".hs-button").addClass(n(this).text())}),n(".config9").each(function(){n(".hs-content .j-hgrid,.is-anim-block").addClass(n(this).text())}),n(".j-hgrid").unwrap().wrap("<div class='m-section' />"),n(".cc-m-htmlcode").on({mouseenter:function(){n(this).find("var, ins").show().css("display","block")},mouseleave:function(){n(this).find("var, ins").hide()}}),n("var").each(function(){n(this).closest(".m-section").removeClass().addClass(n(this).text())}),n(".matrix-reload").click(function(){location.reload(),n(".matrix .cc-content-parent").animate({opacity:".5"},500)}),n(".matrix-view").on("click",function(e){e.preventDefault(),n("#cms",window.parent.document).parent().parent().parent().toggleClass("j-prev-phone-portrait")}),n(".cc-m-all-opened .is-fluid").removeAttr("data-mce-style"),n(".draggable-logo").appendTo(n(".hs-logo")),n(".cc-m-hgrid").each(function(){0<n(this).find(".draggable-hero").length&&n(this).appendTo(n(".is-hero-draggable"))}),n("body").hasClass("matrix")||n(".draggable-hero").appendTo(n(".is-hero-draggable"));const e=document.querySelector(".is-hero-draggable");if(e&&!e.classList.contains("draggable-hero")){const l=e.querySelector(".m-section");l&&l.remove()}var o=n(".magic-field");o.find(".hs-magic, .draggable-right-header").length||n(".hs-magic, .draggable-right-header").remove().appendTo(o),n(".reset-btn").click(function(){n(".matrix .is-fluid").draggable("destroy"),n(".matrix .is-fluid").draggable()}),n(".edit-btn").click(function(){n(".matrix .is-fluid").draggable("destroy")}),n(".btn-delete").click(function(){n(this).parent().remove()}),n(".btn-add").click(function(){var e=n(this).parent(".is-fluid"),t=e.clone();t.css({left:"+=10px",top:"+=10px"}),t.insertAfter(e)}),n(".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 -->

previous version

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

<script type="text/javascript">
//<![CDATA[
jQuery.noConflict(),function(r){r(document).ready(function(){r(".j-hgrid").unwrap().wrap("<div class='m-section' />"),r(".cc-m-htmlcode").hover(function(){r("var,ins",this).show().css("display","block")},function(){r("var,ins",this).hide()}),r("var").each(function(){r(this).closest(".m-section").removeClass().addClass(r(this).text())});var o=r(".color1").css("background-color");r(".bg-primary").attr("style","background-color: "+o+"!important");o=r(".color2").css("background-color");r(".bg-primary-light,.bg-grey,.bg-gray").css("background-color",o);o=r(".color3").css("background-color");r(".bg-primary-dark").css("background-color",o);o=r(".color4").css("background-color");r(".bg-secondary").css("background-color",o);o=r(".color5").css("background-color");r(".bg-secondary-dark").css("background-color",o);o=r(".color6").css("background-color");r(".body").css("background-color",o);o=r(".color7").css("background-color");r(".hs-top-header").css("background-color",o);o=r(".color8").css("background-color");r(".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",o);o=r(".color9").css("background-color");r(".hs-content").css("background-color",o);o=r(".color10").css("background-color");r(".hs-footer,.footer-btm").attr("style","background-color: "+o+"!important");o=r(".color11").css("background-color");r(".hs-footer .inner,.hs-footer .inner h1,.hs-footer .inner h2,.hs-footer .inner h3,#contentfooter").attr("style","color: "+o);o=r(".color12").css("background-color");r("#contentfooter a,.hs-footer .j-text a,.hs-footer .cc-m-form-view-input-wrapper a").attr("style","color: "+o);o=r(".color13").css("background-color");r(".hs-footer .hr").css("background-color",o);o=r(".color14").css("background-color");r("#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",o);o=r(".color15").css("background-color");r(".j-calltoaction-link.j-calltoaction-link-style-2").css("background-color",o);o=r(".color16").css("background-color");r(".j-calltoaction-link.j-calltoaction-link-style-3").css("background-color",o);o=r(".color17").css("background-color");r(".hs-social a").css("background-color",o);o=r(".color18").css("background-color");r(".nav-options a,.snip-nav ul li a:not(.snip-nav ul li ul li a),.onepager .hs-menu nav a").attr("style","color: "+o+"!important");o=r(".color19").css("background-color");r(".hs-menu nav ul ul,.hs-mega .j-nav-variant-nested > ul > li > ul ").css("background-color",o);o=r(".color20").css("background-color");r("#cc-inner .overlay,ul.slimmenu.collapsed ").attr("style","background-color: "+o+"!important");o=r(".color21").css("background-color");r(".nav-mobile-options a,#cc-inner .slicknav_nav a,ul.slimmenu li a").attr("style","color: "+o),r(".config").each(function(){r("#hs-container").removeClass().addClass(r(this).text())}),r(".config2").each(function(){r(".nav-options,.hs-menu nav,.hs-mega nav,.onepager .hs-menu nav a").removeClass().addClass(r(this).text())}),r(".config3").each(function(){r("#content_area").removeClass().addClass(r(this).text())}),r(".config4").each(function(){r(".hs-matrix").removeClass().addClass(r(this).text())}),r(".config5").each(function(){r(".j-header h1,.j-htmlCode h1,h1.j-blog-header,.j-text h1").removeClass().addClass(r(this).text())}),r(".config6").each(function(){r(".j-header h2,.j-htmlCode h2,.blogselection h2,.j-text h2,.j-blog-post--headline").removeClass().addClass(r(this).text())}),r(".config7").each(function(){r(".j-header h3,.j-htmlCode h3,.j-text h3").removeClass().addClass(r(this).text())}),r(".config8").each(function(){r("a.blogreadmore,.cc-m-download-file-link,.hs-button,.j-calltoaction-link, #cc-inner  .j-formnew input[type='submit']").addClass(r(this).text())}),r(".config9").each(function(){r(".hs-content .j-hgrid,.is-anim-block").addClass(r(this).text())}),r(".matrix-reload").click(function(){location.reload(),r(".matrix .cc-content-parent").animate({opacity:".5"},500)}),r(".matrix-view").on("click",function(o){o.preventDefault(),r("#cms",window.parent.document).parent().parent().parent().toggleClass("j-prev-phone-portrait")}),r(".cc-m-all-opened .is-fluid").removeAttr("data-mce-style"),r(".cc-m-hgrid").each(function(){0<r(this).find(".draggable-logo").length&&r(this).appendTo(r(".hs-logo"))}),r(".cc-m-hgrid").each(function(){0<r(this).find(".draggable-hero").length&&r(this).appendTo(r(".is-hero-draggable"))}),r("body").hasClass("matrix")||r(".draggable-hero").appendTo(r(".is-hero-draggable")),r("body").hasClass("matrix")||r(".draggable-logo").appendTo(r(".hs-logo")),r('img[alt="draggable-logo"]').each(function(){var o=r(this).closest('div[id^="cc-m-1"]').attr("id"),o=r("#"+o+".cc-m-imagesubtitle");0<o.find('img[alt="draggable-logo"]').length&&o.appendTo(r(".hs-logo"))});const c=document.querySelector(".is-hero-draggable");if(c&&!c.classList.contains("draggable-hero")){const a=c.querySelector(".m-section");a&&a.remove()}o=r(".magic-field");o.find(".hs-magic, .draggable-right-header").length||r(".hs-magic, .draggable-right-header").remove().appendTo(o)})}(jQuery);//]]>
</script> 

<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();(function($){$(document).ready(function(){$(".matrix .is-fluid").draggable({containment:"parent",stop:function(){var l=(100*parseFloat($(this).position().left/parseFloat($(this).parent().width())))+"%";var t=(100*parseFloat($(this).position().top/parseFloat($(this).parent().height())))+"%";$(this).css("left",l);$(this).css("top",t)}});$(".matrix .is-fluid-area .is-fluid").resizable({containment:"parent",autoHide:!0,stop:function(e,ui){var parent=ui.element.parent();ui.element.css({width:ui.element.width()/parent.width()*100+"%",height:ui.element.height()/parent.height()*100+"%"})}});$(".reset-btn").click(function(){$(".matrix .is-fluid").draggable("destroy");$(".matrix .is-fluid").draggable()});$(".edit-btn").click(function(){$(".matrix .is-fluid").draggable("destroy")});$(".btn-delete").click(function(){$(this).parent().remove()});$('.btn-add').click(function(){$(this).parent('.is-fluid').clone().insertAfter($(this).parent())});$(".matrix .is-fluid").draggable().click(function(){$(this).draggable({disabled:!1})}).dblclick(function(){$(this).draggable({disabled:!0})});$('.is-fluid').removeAttr('data-mce-style');$('.bg-custom-color').each(function(){var bgColor=$(this).find('span').css('color');$(this).parent().attr('style','background-color: '+bgColor+'!important')})})})(jQuery)
//]]>
</script>

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

Color palette shortcodes

You can add this shortcode to your website to check the global theme colors


<div class="is-matrix bg-white g-font add-20" style="border:1px solid #ccc;">
    <h3 style="color:#333;">
        Theme color palette
    </h3>

    <div class="hr">
    </div>
    <br />

    <div class="color-white">
        <div class="tagcloud mid-round cc-clearover is--flex is--center no-padding no-margin">
            <div class="w-100 bg-primary add-10">
                bg-primary
            </div>
        </div>

        <div class="tagcloud mid-round cc-clearover is--flex is--center no-padding no-margin">
            <div class="w-100 bg-primary-light add-10 color-dark">
                bg-primary-light
            </div>
        </div>

        <div class="tagcloud mid-round cc-clearover is--flex is--center no-padding no-margin">
            <div class="w-100 bg-primary-dark add-10">
                bg-primary-dark
            </div>
        </div>

        <div class="tagcloud mid-round cc-clearover is--flex is--center no-padding no-margin">
            <div class="w-100 bg-secondary add-10">
                bg-secondary
            </div>
        </div>

        <div class="tagcloud mid-round cc-clearover is--flex is--center no-padding no-margin">
            <div class="w-100 bg-secondary-dark add-10">
                bg-secondary-dark
            </div>
        </div>
    </div>
    <br />

    <h3 style="color:#333;">
        Button styles
    </h3>

    <div class="hr">
    </div>
    <br />
    <a class="j-calltoaction-link j-calltoaction-link-style-1" data-action="button" href="/" data-title="Style 1">Style 1</a>
    <div class="c">
    </div>
    <a class="j-calltoaction-link j-calltoaction-link-style-2" data-action="button" href="/" data-title="Style 2">Style 2</a>
    <div class="c">
    </div>
    <a class="j-calltoaction-link j-calltoaction-link-style-3" data-action="button" href="/" data-title="Style 3">Style 3</a>
    <div class="c">
    </div>
    <br />

    <h3 style="color:#333;">
        Typography
    </h3>

    <div class="hr">
    </div>
    <br />

    <h1>
        Large Heading H1
    </h1>

    <div class="c">
    </div>

    <h2>
        Medium Heading H2
    </h2>

    <div class="c">
    </div>

    <h3>
        Small Heading
    </h3>

    <div class="c">
    </div>

    <p>
        This is a simple text, Vivamus quis mi. Curabitur a felis in nunc fringilla tristique. Donec posuere vulputate arcu. Nunc sed turpis. Praesent porttitor, nulla vitae posuere iaculis, arcu
        nisl dignissim dolor, a pretium mi sem ut ipsum.
    </p>

    <p>
        This is a <a href="/" title="Home">simple link</a>.
    </p>
</div>

Color settings without the Style Editor

A previous way to change the accent colors of the template without using the Style Editor or CSS.

Go to the Color Palettes section, select your colors and paste the code in Edit Head without reloading the page

Designer Palettes

bg-primary

bg-primary-light

bg-primary-dark

bg-primary - the background color of your buttons, navigation(hover & active states)
bg-primary-light - the gray background color of custom widgets
bg-primary-dark - the background color of the footer.

03. Adding A Google Font

01. Copy the below preset font and paste it to Edit Head section ( in Admin menu> Settings> Edit Head )


 <link href="https://fonts.jimstatic.com/css?family=Poppins:400,500,600,700,800" rel="stylesheet" type="text/css"/>

<style>
/* <![CDATA[ */
.g-font .j-nav-variant-nested,.g-font .j-nav-variant-standard,#cc-inner .j-product .cc-shop-product-desc .cc-shop-addtocard,#cc-inner span.fn,.hs-mega a,body .has-custom-text,#cc-inner h2.j-blog-post--headline,.g-font #cc-checkout-wrapper #cc-checkout-gutter .cc-checkout-btn,#hs-container .j-downloadDocument .cc-m-download-link,#hs-container .commententry input[type="submit"],.has-custom-text #contentfooter,#hs-container .has-custom-text .j-module,#cc-inner h1.g-font,#cc-inner h2.g-font,#cc-inner h3.g-font,
#hs-container.g-font,#hs-container.g-font h1,#hs-container.g-font h2,#hs-container.g-font h3,#hs-container.g-font h4,#hs-container.g-font span.fn,#hs-container.g-font p, #hs-container.g-font table, #hs-container.g-font td,#hs-container.g-font .hs-menu .nav li a,#hs-container.g-font .j-nav-variant-nested,#hs-container.g-font .j-nav-variant-standard,#hs-container.g-font .j-nav-variant-breadcrumb,#hs-container.g-font .slicknav_nav a,#hs-container.g-font ul.slimmenu li a,#hs-container.g-font .j-formnew input,#hs-container.g-font .hs-button,#hs-container.g-font a.j-calltoaction-link,#hs-container.g-font .cc-shop-addtocard,#cc-inner nav.g-font a,#cc-inner .j-formnew input.g-font,#cc-inner a.j-calltoaction-link.g-font,#cc-inner .hs-button.g-font {
    font-family: 'Poppins', sans-serif;
}

/*]]>*/
</style>

To change the preset google font, just change the font name (yellow color) for your own one.

Use the style editor > template configuration to apply the google font for the whole website or just specific section