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:

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

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


<var> draggable-logo </var>

03 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;)

Important notes!

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. Setup the brand colors

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

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

Other elements

	social icons
	navigation color
	subnav background

Mobile navigation

	background color
	navigation color

Template configurations

has-right-nav g-font

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

Buttons

weight-600 is-uppercase

Animations

wow fadeInUp

Note: All changes made here will be applied to your entire website.

Editing with Style Editor

Style Editor Components

Preset Styles

Please check the section 'Style Editor components' to see more details.

The above Editor code can be used in order to reset the Style editor in case of any error in the code. The colors and template configurations used in this example belong to Alsten and Zion themes. You can use the 'Preset style' to find your template design.


<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: #115cfa; 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: #efefee; 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: #59c3c3; 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: #ff4f79; 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: #000000; 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: #115cfa; 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: #3574f2; 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: #115cfa; 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: #115cfa; 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: #115cfa; 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: #115cfa; 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>Template configurations</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="min-width: 200px; border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0); float: left;">
<tbody>
<tr style="height: 32px;">
<td class="config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; border-radius: 3px; width: 100%; color: #888888;">has-right-nav g-font</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>navigation styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="min-width: 200px; border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0); float: left;">
<tbody>
<tr style="height: 32px;">
<td class="config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; border-radius: 3px; width: 100%; color: #888888;">size-16 weight-400 snip-nav</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>content styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="min-width: 200px; border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0); float: left;">
<tbody>
<tr style="height: 32px;">
<td class="config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; border-radius: 3px; width: 100%; color: #888888;">form-white</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>footer styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="min-width: 200px; border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0); float: left;">
<tbody>
<tr style="height: 32px;">
<td class="config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; border-radius: 3px; min-width: 100%; color: #888888;">o-form color-white</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Typography</span></div>
<div class="c"></div>
<div class="add-left-10 is-brandon-font"><span>Heading H1</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="min-width: 200px; border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0); float: left;">
<tbody>
<tr style="height: 32px;">
<td class="config5 col-7" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; border-radius: 3px; width: 100%; color: #888888;">weight-600</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="add-left-10 is-brandon-font"><span>Heading H2</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="min-width: 200px; border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0); float: left;">
<tbody>
<tr style="height: 32px;">
<td class="config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; border-radius: 3px; width: 100%; color: #888888;">weight-600</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="add-left-10 is-brandon-font"><span>Heading H3</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="min-width: 200px; border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0); float: left;">
<tbody>
<tr style="height: 32px;">
<td class="config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; border-radius: 3px; width: 100%; color: #888888;">weight-600</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="add-left-10 is-brandon-font"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="min-width: 200px; border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0); float: left;">
<tbody>
<tr style="height: 32px;">
<td class="config8 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; border-radius: 3px; width: 100%; color: #888888;">weight-600 is-uppercase</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="add-left-10 is-brandon-font"><span>Animations</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="min-width: 200px; border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0); float: left;">
<tbody>
<tr style="height: 32px;">
<td class="config9 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; border-radius: 3px; width: 100%; color: #888888;">wow fadeInUp</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>


<script type="text/javascript">
//<![CDATA[
     jQuery.noConflict();  
(function($) {  
// Init 
$(document).ready(function() { 
   // main primary color
      var color = $(".color1").css("background-color");
$(".bg-primary").attr('style', 'background-color: '+ color +'!important');
    
    // accent light color
     var color = $(".color2").css("background-color");
$(".bg-primary-light,.bg-grey,.bg-gray").css("background-color",color);
    
    // primary dark color
    var color = $(".color3").css("background-color");
$(".bg-primary-dark").css("background-color",color);
    
    // secondary color
    var color = $(".color4").css("background-color");
$(".bg-secondary").css("background-color",color);
    
    // secondary dark color
    var color = $(".color5").css("background-color");
$(".bg-secondary-dark").css("background-color",color);
    
    // body
    var color = $(".color6").css("background-color");
$(".body").css("background-color",color);
    
    // top header background
    var color = $(".color7").css("background-color");
$(".hs-top-header").css("background-color",color);
    
    // header background
    var color = $(".color8").css("background-color");
    $(".top-nav,.hs-header:not(.has-transparent-header .hs-header),.sticky-wrapper .max-inner:not(.has-transparent-header .sticky-wrapper .max-inner)").css("background-color",color);
    
    // content background
    var color = $(".color9").css("background-color");
$(".hs-content").css("background-color",color);
    
    // footer background
    var color = $(".color10").css("background-color");
$(".hs-footer,.footer-btm").attr('style', 'background-color: '+ color +'!important');
    
    // footer text color
     var color = $(".color11").css("background-color");
$(".hs-footer .inner,.hs-footer .inner h1,.hs-footer .inner h2,.hs-footer .inner h3,#contentfooter").attr('style', 'color: '+ color +'');
    
    // footer link color
    var color = $(".color12").css("background-color");
$("#contentfooter a,.hs-footer .jtext-a,.hs-footer .cc-m-form-view-input-wrapper a").attr('style', 'color: '+ color +'');
    
    // footer horizontal line
    var color = $(".color13").css("background-color");
$(".hs-footer .hr").css("background-color",color);    
    
    // buttons
    var color = $(".color14").css("background-color");
    $("#hs-container .j-downloadDocument .cc-m-download-link,#cc-inner .commententry input[type='submit'],#cc-inner .brand-bg a.j-calltoaction-link,.j-calltoaction-link.j-calltoaction-link-style-1,.hs-button:not(.ghost-white):not(.bg-white):not(.cd-btn.hs-button):not(.ghost-dark),.j-formnew input[type='submit'],a.blogreadmore").css("background-color",color);
    
    var color = $(".color15").css("background-color");
$(".j-calltoaction-link.j-calltoaction-link-style-2").css("background-color",color);
    
    var color = $(".color16").css("background-color"); 
$(".j-calltoaction-link.j-calltoaction-link-style-3").css("background-color",color);
  
    // social icons
    var color = $(".color17").css("background-color");
$(".hs-social a").css("background-color",color);

    // nav link color
    var color = $(".color18").css("background-color");
    $(".nav-options a,.snip-nav ul li a:not(.snip-nav ul li ul li a),.is-varmdo .hs-menu .nav a").attr('style', 'color: '+ color +'!important');
    
    // subnav background
    var color = $(".color19").css("background-color");
    $(".hs-menu nav ul ul,.hs-mega .j-nav-variant-nested > ul > li > ul ").css("background-color",color);

     // mobile background
    var color = $(".color20").css("background-color");
    $("#cc-inner .overlay,ul.slimmenu.collapsed ").attr('style', 'background-color: '+ color +'!important');
     
    // mobile navigation color
    var color = $(".color21").css("background-color");
    $(".nav-mobile-options a,#cc-inner .slicknav_nav a,ul.slimmenu li a").attr('style', 'color: '+ color +'');
     
    

    // config classes
    $('.config').each(function() {
        $("#hs-container").removeClass().addClass( $(this).text()); 
        
});
   $('.config2').each(function() {
       $(".nav-options,.hs-menu nav,.is-varmdo .hs-menu .nav a").removeClass().addClass( $(this).text()); 
});
             
   $('.config3').each(function() {
       $("#content_area").removeClass().addClass( $(this).text()); 
        
});
    $('.config4').each(function() {
       $(".hs-matrix").removeClass().addClass( $(this).text()); 
});
    $('.config5').each(function() {
       $(".j-header h1,.j-htmlCode h1,h1.j-blog-header").removeClass().addClass( $(this).text()); 
        
});
    
    $('.config6').each(function() {
       $(".j-header h2,.j-htmlCode h2,.blogselection h2").removeClass().addClass( $(this).text()); 
        
});
    $('.config7').each(function() {
       $(".j-header h3,.j-htmlCode h3").removeClass().addClass( $(this).text()); 
        
});
    $('.config8').each(function() {
     $("a.blogreadmore,.cc-m-download-file-link a,.hs-button,.j-calltoaction-link, #cc-inner  .j-formnew input[type='submit']").addClass( $(this).text()); 
        
});
    $('.config9').each(function() {
     $(".hs-content .j-hgrid,.is-anim-block").addClass( $(this).text()); 
        
});
    
});
})(jQuery); 
//]]>
</script><br />

<center>
    <button class="btn btn-sm cc-m-save btn-save btn-float-left matrix-msg matrix-save invisible" style=
    "width: 32px;height: 32px;position:fixed;text-align: center;top:1px;left:35px;z-index:999999;border:1px solid transparent;padding:5px;font-size:30px;background: #1ba9e1;color: #fff;-webkit-border-radius: 2px;border-radius:4px;"
    data-action="save"> &#160;</button>
</center>


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

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 the 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[ */
#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. You can use the below website to pickup your own google font

Font CDN

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

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!

Comments: 49

#49
Serhiy (Friday, 06 November 2020 17:22)

@Janina please get in touch from support page indicating all details.

Thank you
#48
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!
#47
Matrix themes (Monday, 06 July 2020)

@Frederic in Matrix themes menu > documentation> theme features
#46
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
#45
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.
#44
Frederic (Thursday, 18 June 2020 19:50)

https://www.kopfkinomedia.com
#43
Matrix themes (Thursday, 18 June 2020 19:28)

@Frederic please add the url of your website
#42
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 :)
#41
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.
#40
Keivn (Friday, 28 February 2020 14:25)

Sorry I Mean the Lemberg Templete
#39
Kevin (Friday, 28 February 2020 14:24)

https://www.steinmetz-werbeagentur.de/
#38
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?
#37
Matrix themes (Friday, 28 February 2020 13:57)

@Kevin probably not in Matrix themes
#36
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
#35
Matrix themes (Friday, 28 February 2020 00:07)

@Kevin the scrolldown button is displayed in all themes having the section 100% height " hero" image
#34
Kevin Redmann (Thursday, 27 February 2020 21:00)

How can I insert a scroll button down in the header
#33
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/
#32
Peter (Tuesday, 11 February 2020 09:58)

Hi, how can I change the phonenummber and the E-Mail in the header (Bergen)
#31
Serhiy (Saturday, 09 November 2019 13:18)

@sparton this option is not available.
#30
sparton (Saturday, 09 November 2019 13:15)

Sorry, yes that is clear but I need to move it more to the top
#29
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)
#28
sparton (Saturday, 09 November 2019 12:10)

Hi how I can change the position of my hero text ?
Thank you
#27
Karlyn (Tuesday, 15 October 2019 15:20)

Hi my website is www.poweruponplants.com

And i did as you mentioned above.
#26
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.
#25
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
#24
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">
#23
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
#22
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.
#21
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!
#20
Tian (Wednesday, 01 May 2019 19:46)

Hi,

how can I change the color of the textbox of an overlay teaser?

Thanks!
#19
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/
#18
Daniel (Friday, 22 February 2019 11:29)

The Images of the header are darker than the original. Where i can change this?
#17
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/
#16
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!
#15
Serhiy (Friday, 19 October 2018 21:52)

@Michael, you can edit it directly in HTML ( design>custom templates> HTML tab)
#14
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
#13
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.
#12
Michael Siegle (Tuesday, 07 August 2018)

Hello Serhiy,
how can I reduce the height of the body class from 702px to 300px?
#11
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/
#10
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
#9
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">
#8
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
#7
Serhiy (Sunday, 13 May 2018 20:29)

@Nacho please check the section "documentation>theme features"
#6
Nacho (Sunday, 13 May 2018 18:10)

Hello, how do you put a video-hero on the Altona theme?
#5
Serhiy (Saturday, 12 May 2018 06:18)

@Claudia just remove the following line:
<div class="hs-overlay bg-primary white-solid-border">
</div>
#4
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.
#3
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.
#2
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
#1
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!!

Quick setup

01. Logo image

02. Setup the brand colors

Color settings without the Style Editor

03. Adding the Google Font

General Font settings

04. Hero section

Do you have any further questions?

SUPPORT

QUICK LINKS

WIDGETS

GET INSPIRED