Matrix themes - Updates #14

The latest updates of Matrix Themes including the new features, bug fixes and much more. You will also find some further customizations of custom widgets with the live examples.

In the latest Matrix.js update, I removed the superfish.js plugin. It's been used since the early Matrix templates, but due to conflicts and new features, the dropdown menu now relies solely on CSS.

I've also improved the default dropdown and mega menu styles. After updating the JS file and updates.css, you'll find more navigation style options available.

• In the mega menu, the underline styles can now be applied to all subpages as well.

• An option to display 3 icons of your choice for indicating the presence of a submenu. To set up the submenu indicators, navigate to Style Editor > Template Configurations > Navigation Styles, where you can configure three styles:
• has-icon-1
• has-icon-2
• has-icon-3

• An option to reduce the navigation by displaying the label 'more' with a dropdown menu. The plugin is available in 'Add-ons' as a custom menu and allows you to manually set up how many items you'd like to display and the label name. So, it works exactly the same as in Dolphin Jimdo websites.

I've enhanced the color customizations for all buttons in custom layout.

In the Style Editor, you can configure three styles for all buttons. 'Style 1' is usually applied to the default buttons used in Widgets/HTML and now you  have the flexibility to change this style to any other color available in the Style Editor.

All you need to do is change the class "hs-button" to "hs-btn" and include any other class from your brand colors.

<a class="hs-btn bg-secondary" href="https://www.matrix-themes.com/" target="">Custom Button</a>

<a class="hs-btn bg-primary-light has-dark-link" href="https://www.matrix-themes.com/" target="">Custom Button</a>

In the 'Shortcodes' section and in some widgets of 'Block Elements' you can find buttons with outline styles. By default, the button border is set to 2px, and I have noticed that some users struggle to change this value to 1px. It might not be easy since the button styles are set up in the file 'custom-widgets.css,' and it's not recommended to change the default theme styles. Therefore, the solution would be to introduce another helper class '--thin-line' that you can add to your outline buttons.

<a class="hs-button ghost-dark --thin-line" href="https://www.matrix-themes.com/" target="">Custom Button</a>

For the default Jimdo buttons and the buttons in the contact form, module "download," etc., there are two options for this scenario:

• Global Setup:

Open the style editor, select "Template Configurations" > "Content Styles" or "Footer Styles" (depending on where you'd like to apply the styles), and add the class 'dark-outline-btn --thin-line' or 'white-outline-btn --thin-line'. This will apply the styles to all default Jimdo buttons.

• Local Setup (Recommended):

Display your buttons inside the "Columns" module and then add the same variable tags 'dark-outline-btn --thin-line' or 'white-outline-btn --thin-line'. In this case, you will display the custom button styles only in this template section.

I just added 3 new classes for the buttons to make them 100% width:

• fullwidth-btn: This class can be added directly to default HTML buttons to make them full width on all devices.
• has-fullwidth-btn: This class can be used for the parent div containing buttons to make them 100% width. This class can also be used as a variable tag if you wish to apply it to default Jimdo modules such as the "Button" module, contact forms, or 'add-to-cart' buttons.
• mobile-fullwidth-btn: This class can be used for the parent div and as a variable tag to apply the rule only for mobile devices.

In the 'Shortcodes' section, you can find 2 new widgets called 'Mask Card.' There are 40 different shapes that can be customized to suit your needs.

<div class="mask-img resp-img" style="mask-image: url(https://u.jimcdn.com/cms/o/s77270d56027027a9/userlayout/font/mask-06.svg);">

Given the uncertainty surrounding the future of Jimdo Creator, a question frequently asked by many Jimdo customers is about possible alternatives. Drawing from my personal experience (having tried each of them), I've compiled a list of potential alternatives for Jimdo.

It's important to note that I have no affiliate links with any of the platforms mentioned.

The popup banner available in the Add-ons section has been further customized with the following options:

• Displaying the banner only once the user visits the website (cookie options).
• Displaying the banner anytime the user visits the page after 3 sec.
• Displaying the popup banner exactly in the place where the banner code is located on the page.

Additional variable tags to customize the default 'Spacing' module in Matrix themes and Matrix Page Builder to make it smaller for mobile devices.

An option to use the image caption as a custom tag for the default Jimdo module "Photo".

All you have to do is place an image inside the columns and then add a variable tag with a caption description.

Additional custom widgets "Sticky elements" can be now found in section "add-ons".

In addition to the two animations with the fold effect in the 'Add-ons' section, I have added another 10 that can be used by adding a custom class as alt text to any image or variable tag inside the columns.