It overwrites the default styles of your CSS and Edit Head section.
The Advanced
Style Editor
draggable-hero h-overflow has-no-gutter color-white g-font has-transparent-header
Customize
Everything
Without any coding
The Matrix Themes installed from November 2021 come with a new Style Switcher.
You can customize any element of your website with your own colors without using any coding.
Documentation
How to edit
01. Find the style Editor
Log in to your website
and on the top of the page find the new Style Editor.
hs-fullwidth bg-darkgray
02. Customize the colors
Select an element you'd like to edit and add your own colors.
bg-darkgray hs-fullwidth
See the options
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 |
Note: All changes made here will be applied to your entire website.
bg-darkgray hs-fullwidth
03. Style the other elements
You can style the navigation alignment and the global styles of the buttons, contact form, template width etc
bg-darkgray hs-fullwidth
F.A.Q.
How can I update my website with the new Style editor?
You'll need to request a new installation.
Can I disable the Style switcher and use the previous version using the CSS?
Yes, you can easily remove the new Style Editor following the instructions in documentation.
Which package includes the Advanced Style Editor
Enterprise and Advanced packages.
GET INSPIRED
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 |
Other elements
| social icons | |
| navigation color | |
| subnav background |
Mobile navigation
| background color | |
| navigation color |
Template configurations
| has-right-nav |
navigation styles
| is-uppercase snip-nav --effect01 --line01 |
content styles
| form-white |
footer styles
| o-form |
Typography
Heading H1
| is-uppercase weight-600 |
Heading H2
| is-uppercase weight-600 |
Heading H3
| is-uppercase weight-600 |
Buttons
| weight-600 is-uppercase |
is-switcher admin-only
MATRIX THEMES
STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE