General
To add a custom widget to your website in the Matrix theme admin menu, navigate to Shortcodes, select any widget by clicking the Copy button. Then, paste the code inside the Widget/HTML module of your website.
Adding full width sections
In the Matrix theme's admin menu, select "Block elements" and choose any full-width widget. Just like widgets from Shortcodes, paste the code inside the Widget/HTML module.
Please note that, unlike the shortcodes widgets that can be used as a standalone widget or inside the columns, the code for Block sections cannot be pasted into the Widgets/HTML module inside the Columns unless you are using only one column.
Fluid sections
This type of widget is referred to as "fluid" since you can drag and drop, resize, delete, and add various elements inside the editing area.
The code for Fluid sections should be pasted inside the Text module and not the Widget/HTML.If you add the code inside Widget/HTML, you'll have a simple static widget.
01. Add a module "Text"
02. Click the button "Edit HTML"
03. Paste the code inside the Source code and click "OK" and then "Save" button.
04. In order to activate the sizing option, click the button "apply the style" of the style editor.
Matrix add-ons
Additional widgets and plugins can be found in the "Matrix Add-ons" section. Here, you will also discover further customized default widgets from Shortcodes, including buttons, animations, etc.
Resources
Documentation
Quick links
| bg-primary | |
| bg-primary-light | |
| bg-primary-dark | |
| bg-secondary | |
| bg-secondary-dark |
| body | |
| top-header | |
| top-header-inner | |
| header | |
| header-inner | |
| navigation-inner | |
| navigation color | |
| dropdown background color | |
| content |
| background | |
| text color | |
| link color | |
| horizontal line |
| style 1 | |
| style 2 | |
| style 3 | |
| text color |
| background color | |
| navigation color |
| social icons | |
| top header border | |
| header border | |
| nav inner border |
| Template configurations | |
|
|
| Top header inner | |
| Header inner | |
| Navigation inner | |
| Navigation styles | |
| size-15 weight-400 snip-nav --line01 | |
| Sub-menu (breadcrumbs) styles | |
| size-15 | |
| Mobile Navigation styles | |
| size-30 | |
| Content styles | |
| form-white | |
| Footer styles | |
| o-form color-white | |
| Footer background image | |
|
Typography |
|
| Heading H1 | |
| weight-400 | |
| Heading H2 | |
| weight-400 | |
| Heading H3 | |
| weight-400 | |
| Buttons | |
| weight-400 | |
| Advanced settings | |
| Custom CSS | |
|
#cc-inner .my-class { color:#f0f0f0; }
|
Note: All changes made here will be applied to your entire website.