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

All Preset Styles

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

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