01. Logo image
The logo image in Matrix Themes can be changed with drag&drop tools.
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>
Click the button "apply the styles" of the style editor or just reload the page to see the column in header section where you can add your logo using the module 'Photo'. Instead of the Photo, you can add a module "Text" with a title. 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.In this case you need to 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.
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.
Install the Style Editor
Step 01
- Add a module 'Columns' to your footer with only one column(!).
- Inside the 'Columns' 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.
<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: #2156fa; 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: #f1eeee; 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: #00ff91; 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: #3b28cc; 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: rgba(0, 0, 0, 0); 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: #2156fa; 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: #2156fa; 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: #2156fa; 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: #2156fa; 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: #2156fa; 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: #2156fa; 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>
<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;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);"> 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;"> </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>
<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> </td>
</tr>
<tr>
<td class="cc-config 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 has-large-header g-font</td>
</tr>
<tr>
<td> </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> </td>
</tr>
<tr>
<td class="cc-config 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> </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> </td>
</tr>
<tr>
<td class="cc-config 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> </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> </td>
</tr>
<tr>
<td class="cc-config 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> </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="cc-config 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> </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="cc-config 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> </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="cc-config 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> </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="cc-config config8 col-6">weight-400</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td> </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="cc-config config9 col-6"> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p> </p>
<p>#cc-inner .my-class {</p>
<p> background: #000;</p>
<p>}</p>
<p> </p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>
Step 02
- Below the Tables, add a module 'Widget/HTML' with the following js code inside. When you click the save button, the new styles will be applied to your website and you can start using the editor
Version 5.2 (11.11.2023)
<var>is-switcher</var>
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict(),function(e){e(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(o){t[o]=e(o).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"])}e(".config, .config2, .config3, .config4, .config5, .config6, .config7, .config8, .config10").each(function(){var t=e(this);if(t.hasClass("config10")){var o=t.find("p").map(function(){return e(this).text().trim()}).get().join("");o=o.replace(/ /g,"").trim();var s=e('style[data-type="custom-css"]');s.length>0&&!o?s.remove():(s.remove(),e("head").append('<style data-type="custom-css">'+o+"<\/style>"))}else{var n=t[0].textContent.trim().replace(/ /g," ").replace(/\s+/g," ").trim().split(" ");t.hasClass("config")?e("#hs-container").removeClass().addClass(n.join(" ")):t.hasClass("config2")?e(".hs-menu nav, .hs-mega nav, .onepager .hs-menu nav a, .sidebar-options").removeClass().addClass(n.join(" ")):t.hasClass("config3")?e("#content_area").removeClass().addClass(n.join(" ")):t.hasClass("config4")?e(".hs-matrix").removeClass().addClass(n.join(" ")):t.hasClass("config5")?e(".j-header h1, .j-htmlCode h1, h1.j-blog-header, .j-text h1").removeClass().addClass(n.join(" ")):t.hasClass("config6")?e(".j-header h2, .j-htmlCode h2, .blogselection h2, .j-text h2, .j-blog-post--headline").removeClass().addClass(n.join(" ")):t.hasClass("config7")?e(".j-header h3, .j-htmlCode h3, .j-text h3").removeClass().addClass(n.join(" ")):t.hasClass("config8")&&(e(".j-calltoaction-link").each(function(){var t=e(this);t.hasClass("j-calltoaction-link-style-1")?t.removeClass().addClass("j-calltoaction-link j-calltoaction-link-style-1"):t.hasClass("j-calltoaction-link-style-2")?t.removeClass().addClass("j-calltoaction-link j-calltoaction-link-style-2"):t.hasClass("j-calltoaction-link-style-3")&&t.removeClass().addClass("j-calltoaction-link j-calltoaction-link-style-3"),e.each(n,function(e,o){t.addClass(o)})}),e(".j-formnew input[type='submit']").each(function(){var t=e(this);t.removeClass().addClass("j-formnew input[type='submit']"),e.each(n,function(e,o){t.addClass(o)})}),e(".cc-m-download-file-link").each(function(){var t=e(this);t.removeClass().addClass("cc-m-download-file-link"),e.each(n,function(e,o){t.addClass(o)})}))}});var o,s=e('<div class="guide-lines-container"><\/div>').appendTo(".matrix .is-fluid-area");function n(t){s.empty();var o=t.position(),n=t.outerWidth();t.parent(),e('<div class="guide-line-vertical"><\/div>').css({left:o.left+n/2,top:0,bottom:0}).appendTo(s)}function l(){s.empty()}e(".matrix .is-fluid").draggable({containment:"parent",grid:[1,1],stop:function(){var t=e(this).parent().width(),o=e(this).parent().height(),s=e(this).position().left/t*100+"%",n=e(this).position().top/o*100+"%";e(this).css("left",s),e(this).css("top",n),l()},drag:function(e,t){n(t.helper)}}),e(".matrix .is-fluid").dblclick(function(t){e(t.target).hasClass("btn-radius-plus")||e(t.target).hasClass("btn-radius-minus")||e(this).draggable({disabled:!0})}),e(document).on("click",function(t){e(t.target).closest(".matrix .is-fluid").length||e(".matrix .is-fluid").draggable({disabled:!1})}),e(".matrix .is-fluid-area .is-fluid").resizable({containment:"parent",autoHide:!0,resize:function(e,t){var s=t.element.parent(),n=t.element.width()/s.width()*100+"%";t.element.css({width:n,height:"auto",left:o.left,top:o.top}),l()},start:function(e,t){o=t.element.position(),n(t.helper)},stop:function(){l()}}),e(".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+"%"})}}),e(".matrix .mask-section").resizable({containment:"parent",autoHide:!0,resize:function(e,t){var o=t.element.parent(),s=(t.element.width()+a)/o.width()*100+"%",n=t.element.height()/o.height()*100+"%",a=4;t.element.css({width:s,height:n,left:0,top:0}),l()},start:function(e,t){n(t.helper)},stop:function(){l()}}),e(".matrix .fluid-img").resizable({containment:"parent",autoHide:!0,aspectRatio:!1,resize:function(e,t){var s=t.element.parent(),n=(t.element.width()+i)/s.width()*100+"%",a=t.element.height()/s.height()*100+"%",i=4;t.element.css({width:n,height:a,left:o.left,top:o.top}),l();var r=t.position.left/t.size.width*100+"%",c=t.position.top/t.size.height*100+"%";t.element.css("background-position",r+" "+c)},start:function(e,t){o=t.element.position(),n(t.helper)},stop:function(){l()}}),new MutationObserver(function(o){o.forEach(function(o){"childList"===o.type&&o.addedNodes.length>0&&(t(),e(".bg-custom-color").each(function(){var t=e(this).find("span").css("color");e(this).parent().attr("style","background-color: "+t+"!important")}))})}).observe(document.body,{childList:!0,subtree:!0}),t(),e(".config8").each(function(){e(".hs-button").addClass(e(this).text())}),e(".config9").each(function(){e(".hs-content .j-hgrid,.is-anim-block").addClass(e(this).text())}),e(".j-hgrid").unwrap().wrap("<div class='m-section' />"),e(".cc-m-htmlcode").on({mouseenter:function(){e(this).find("var, ins").show().css("display","block")},mouseleave:function(){e(this).find("var, ins").hide()}}),e("var").each(function(){e(this).closest(".m-section").removeClass().addClass(e(this).text())}),e(".matrix-reload").click(function(){location.reload(),e(".matrix .cc-content-parent").animate({opacity:".5"},500)}),e(".matrix-view").on("click",function(t){t.preventDefault(),e("#cms",window.parent.document).parent().parent().parent().toggleClass("j-prev-phone-portrait")}),e(".cc-m-all-opened .is-fluid").removeAttr("data-mce-style"),e(".draggable-logo").appendTo(e(".hs-logo")),e(".cc-m-hgrid").each(function(){e(this).find(".draggable-hero").length>0&&e(this).appendTo(e(".is-hero-draggable"))}),e("body").hasClass("matrix")||e(".draggable-hero").appendTo(e(".is-hero-draggable"));let a=document.querySelector(".is-hero-draggable");if(a&&!a.classList.contains("draggable-hero")){let i=a.querySelector(".m-section");i&&i.remove()}var r=e(".magic-field");r.find(".hs-magic, .draggable-right-header").length||e(".hs-magic, .draggable-right-header").remove().appendTo(r),e(".reset-btn").click(function(){e(".matrix .is-fluid").draggable("destroy"),e(".matrix .is-fluid").draggable()}),e(".edit-btn").click(function(){e(".matrix .is-fluid").draggable("destroy")}),e(".btn-delete").click(function(){e(this).parent().remove()}),e(".btn-add").click(function(){var t=e(this).parent(".is-fluid"),o=t.clone();t.hasClass("is-rel")&&o.removeClass("is-rel"),o.css({left:"+=10px",top:"+=10px"}),o.insertAfter(t)}),e(".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"> </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"> </button>
</center>
<!-- end style editor buttons -->
<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"> </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"> </button>
</center>
<!-- end style editor buttons -->
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
Preset Google fonts
02. Open the Style Editor and add the class 'g-font' for the main elements of your website:
In case you wanted to apply the google font for all elements of your website, use the first line of 'Template configurations'
General Font settings
In admin menu, navigate Design> Font Settings and here you setup the following elements:
- the headings size and colors
- the global link color
- the style of horizontal line in content section
Additional tutorials:
https://www.matrix-themes.com/2015/04/17/matrix-themes-typography-options/
04. Hero section
The hero section is a background image, slideshow or simple background color that can be added to your website in Admin menu> Design> Background
This section will be displayed on the top of your website between the header and content.
How to activate
1. In admin menu > Design> Background select an image to display on your page.
2. On the top of content section add the module 'Columns' and inside of it display 'widget/HTML' with the following code:
<var> draggable-hero color-white g-font </var>
3. Click the 'Refresh' button or reload the page to see the columns module inside the hero section.
4. Adding the module 'Spacing' you can resize the hero section for your own preference.
| color-white | adds white color text |
| has-transparent-header | adds transparent background to the header |
| has-fullscreen-hero | adds fullscreen hero image |
| has-primary-overlay | adds the primary color for the hero overlay |
| has-secondary-overlay | adds the secondary color for the hero overlay |
| has-gradient-overlay | adds the gradient color for the hero overlay |
| has-no-gutter | removes the top padding between content and hero |
| has-btm-arrow | adds the arrow to the hero |
| has-nav-inverted | makes nav color white ( with transparent header) |
| has-logo-inverted | makes logo image white ( with transparent header) |
Useful links and tutorials:
https://support.jimdo.com/design/backgrounds/ (English)
https://de.jimdo.com/magazin/das-richtige-hintergrundbild/ ( Deutsch)
https://de.jimdo.com/magazin/hintergrundbilder-fur-eure-unterseiten/ ( Deutsch)
How to edit the hero section ( Matrix Themes )
Do you have any further questions?
You can ask here!
Quick links
hide-in-doc-page
draggable-logo
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-right-nav has-large-header g-font m-text-16 |
| Navigation styles |
| size-16 weight-400 snip-nav |
| Content styles |
| form-white |
| Footer styles |
| o-form color-white |
|
Typography |
| Heading H1 |
| weight-600 |
| Heading H2 |
| weight-600 |
| Heading H3 |
| weight-500 |
| Buttons |
| weight-400 |
| Animations |
Note: All changes made here will be applied to your entire website.
is-switcher
Stand out with professional Jimdo website
Serhiy (Friday, 06 November 2020 17:22)
@Janina please get in touch from support page indicating all details.
Thank you
Janina (Friday, 06 November 2020 13:18)
Hi Serhiy,
how can I change the colours of the main menu of my website. I would like to have a white background and a black font. Thanks and sorry for my bad English!
Matrix themes (Monday, 06 July 2020)
@Frederic in Matrix themes menu > documentation> theme features
Frederic (Monday, 06 July 2020 18:33)
Ok thanks. Coockie Message Styles are changed. Do i have an chance to Put a Video as the background on The Startpage of my Website ? (Fullscreen)
Thanks
www.kopfkinomedia.de
Matrix themes (Thursday, 18 June 2020 23:01)
@Frederic first of all, you need to update the cookie message styles:
https://www.matrix-themes.com/support/help/cookies/
The template you're using has a transparent header with absolute position. I don't suggest you to change the background because you will need to change other elements too.
Frederic (Thursday, 18 June 2020 19:50)
https://www.kopfkinomedia.com
Matrix themes (Thursday, 18 June 2020 19:28)
@Frederic please add the url of your website
Frederic (Thursday, 18 June 2020 19:23)
Hey Serhiy,
How can I make the taskbar appear instantly after I opened the website and not after the first scroll downwards. I would like to have the black bar constantly on the top of my website.
Thanks :)
Matrix themes (Friday, 28 February 2020 14:37)
@Kevin the template has been customized by werbragentur.
You can add a simple buttom with link like they did:
<a class="hs-button mid-round left-align" href="*#scroll" target="">zum Leistungsangebot</a>
or contact directly them asking for further questions.
Keivn (Friday, 28 February 2020 14:25)
Sorry I Mean the Lemberg Templete
Kevin (Friday, 28 February 2020 14:24)
https://www.steinmetz-werbeagentur.de/
Kevin (Friday, 28 February 2020 14:23)
I found this page. This is the Lviv theme. Here was a button with a label. How was that heard?
Matrix themes (Friday, 28 February 2020 13:57)
@Kevin probably not in Matrix themes
Kevin Redmann (Friday, 28 February 2020 12:57)
@Matrix Theme
Thank you! But how can I program a button in the header to be a scroll down button. The button should be labeled. I've seen it on another website before
Matrix themes (Friday, 28 February 2020 00:07)
@Kevin the scrolldown button is displayed in all themes having the section 100% height " hero" image
Kevin Redmann (Thursday, 27 February 2020 21:00)
How can I insert a scroll button down in the header
Matrix themes (Tuesday, 11 February 2020 10:00)
@Peter please check the section "documentation" of Matrix themes menu or visit this page:
https://www.matrix-themes.com/2015/07/26/common-jimdo-support-issues/
Peter (Tuesday, 11 February 2020 09:58)
Hi, how can I change the phonenummber and the E-Mail in the header (Bergen)
Serhiy (Saturday, 09 November 2019 13:18)
@sparton this option is not available.
sparton (Saturday, 09 November 2019 13:15)
Sorry, yes that is clear but I need to move it more to the top
Serhiy (Saturday, 09 November 2019 12:38)
@sparton in section "shortocodes" you can find 3 different styles for hero title ( left, center and right align)
sparton (Saturday, 09 November 2019 12:10)
Hi how I can change the position of my hero text ?
Thank you
Karlyn (Tuesday, 15 October 2019 15:20)
Hi my website is www.poweruponplants.com
And i did as you mentioned above.
Serhiy (Tuesday, 15 October 2019 15:01)
@Karlyn go to Design> custom templates> files and make sure that image with the name logo.png exists in your directory.
P.S. Leaving a comment here, it would be great to add the URL of the website, otherwise it's difficult to solve the problem without seeing an example.
Thank you.
Karlyn (Tuesday, 15 October 2019 14:46)
Hi Serhiy,
I tried changing my logo i named the new file logo.png and uploaded it. But somehow it did remove the old one but the new one doesn't show.
Hope you can help
Thanks
Serhiy (Wednesday, 07 August 2019 21:30)
@Martin in Altona theme the hero section has class 'brand-gradient'. You can remove it using a default overlay dark background:
<div class="hs-overlay opacity-8 brand-gradient">
Martin Braun (Wednesday, 07 August 2019 14:42)
Hello Serhiy,
I'm sorry for this question now! I'm quite sure that you explained it somewhere but I'm looking for it for ages now without success.
How can I change the color of the overlay over the JAB. In http://altona-template.jimdo.com it's a kind of blue-to-violett. I'd like to have a red-to-yellow. However, as standard, it is just a grey overlay.
Thanks indeed for your help and sorry again that I'm such a stupid guy... :-D
Serhiy (Thursday, 04 July 2019 00:18)
@Bruno You cannot change bg-color of content for the bg image. You can change the color but anyway it should be a white/grey one.
Bruno Matter (Wednesday, 03 July 2019 23:25)
Hi, how do I change the bg color for the content or replace it with a picture?
thanks!
Tian (Wednesday, 01 May 2019 19:46)
Hi,
how can I change the color of the textbox of an overlay teaser?
Thanks!
Serhiy (Friday, 22 February 2019 18:08)
@Daniel please check the documentation of Matrix Themes menu or this post:
https://www.matrix-themes.com/2015/07/26/common-jimdo-support-issues/
Daniel (Friday, 22 February 2019 11:29)
The Images of the header are darker than the original. Where i can change this?
Serhiy (Friday, 18 January 2019 23:51)
@Karsten I cannot see any website.Please fill out the form from this page indicating all details:
https://www.matrix-themes.com/support/
Karsten (Friday, 18 January 2019 20:18)
Hello,
when you look on my homepage you see a white space between the hero pic and the Fullwidth bg section. Also you see a big space after the Fullwidth bg and the footer.
How can I reduce the space?
Thank you!
Serhiy (Friday, 19 October 2018 21:52)
@Michael, you can edit it directly in HTML ( design>custom templates> HTML tab)
Michael Lindfield (Friday, 19 October 2018 21:50)
Hi,
i have proabably overlooked it but how can i change the telephone number and email address on the header \top of page?
thanks
Serhiy (Tuesday, 07 August 2018 10:59)
@Michael The body class height depends on the content itself and you can't set up the height for it.
If I missed something or misunderstood, please get in touch from Support page indicating all details.
Michael Siegle (Tuesday, 07 August 2018)
Hello Serhiy,
how can I reduce the height of the body class from 702px to 300px?
Serhiy (Friday, 18 May 2018 15:47)
@Claudia, this section about general Matrix themes setup. Regarding your website, I cannot see anything,- it's under constructio mode. Please get in touch from support page indication also the website access. Thank you
https://www.matrix-themes.com/support/
Claudia Paz (Friday, 18 May 2018 14:42)
something is working wrong with the new layout. From the administrator area everything works perfect, the links, the photos, the presentation, but once I want to see the page from the phone or directly from the internet, the problems begin.
From the phone you can not see the buttons, so I can not click on them. When I want to go to some category, he asks me to enter my jimdo data. Being that I am using the phone navigator. From the website itself, clicking on any button directs me immediately to the administrator area, that is, enters my protected area. My webseite is www.mamalanas.de
Serhiy (Monday, 14 May 2018 22:36)
@Clara you chan use the following helper classes for icon colors:
link-dark, link-white, link-grey
for example:
<div class="hs-social left-align link-white">
Clara (Monday, 14 May 2018 17:35)
Hi Serhiy.
How can I change the color of the Fa icons? I need them in white or some light color.
Best regards,
Clara
Serhiy (Sunday, 13 May 2018 20:29)
@Nacho please check the section "documentation>theme features"
Nacho (Sunday, 13 May 2018 18:10)
Hello, how do you put a video-hero on the Altona theme?
Serhiy (Saturday, 12 May 2018 06:18)
@Claudia just remove the following line:
<div class="hs-overlay bg-primary white-solid-border">
</div>
Claudia (Friday, 11 May 2018 23:35)
Hi Serhiy,
how can I place a button on a photo, such as: "Overlay teaser style 3" but only a simple photo, without effect on it.
Serhiy (Sunday, 26 November 2017 11:05)
Hi Andreas,
as I wrote before, you need to remove everything you added to the caption and just the correct code caption from documentation. The caption of hero image should have only the title and button.
Andreas Schmidt (Sunday, 26 November 2017 11:02)
Hi Serhiy,
when you look at my website, you see there´s a lot of free space between the navigation and the first button on the fullwidth image. (I placed a table on the caption and that´s the highest position I can get.) When I go to the website with my Android mobile phone, the last two buttons are cut off.
Is it possible to reduce the upper free space so I can see the lower buttons as well?
Best regards,
Andreas
Ignacio (Sunday, 10 September 2017 19:58)
Hi, I would like to add this resource to my website.
I do not know if you could help me put it on my website.
I sent you the resource link:
https://demo.accesspressthemes.com/parallaxsome/#section-services
Thank you very much!!