01. Logo image

Quick setup

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

Matrix themes come with an Advanced Style Editor, which allows you to set up global colors, fonts, and template design options.

Here’s how to install it:

In the Matrix themes admin menu, navigate to "Design Library" (or "Templates" in previous theme versions). Choose the design for your website by clicking the Copy button next to the selected design.

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 one you copied and at the end click the save button.

Opening agan the "Design Library" section, locate the "JS Code Editor" and copy it. Paste the code inside the "Widget/HTML" module just below the "Tables" you added to your website. Ensure that both the Tables and Widget/HTML modules are placed within the same column module.

Refresh the page to see the "Columns" module appear at the top of the style editor. Once it's visible, you can start editing your website using the Advanced Style Editor

For a more detailed tutorial, complete with screenshots on installing and editing the style editor, please visit the documentation page.

Documentation

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[ */
:root {      
--primary-font: 'Poppins', sans-serif;
}

/*]]>*/
</style>

For the previous version of Matrix themes, you should use the following code:


 <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