Molti Theme Customization
Last updated
Last updated
So you’ve purchased Molti Child Theme? You’ve made one of the best decisions in your life. So In this guide, we’ll see how you can customize the Molti Child Theme to make sure the Molti is your very own website.
Molti Comes with 6 different and cool-looking Header Designs to choose from. So If you’d like to change to any of the other designs for your Main Header. First, go to Dashboard -> Pages and search for “Header Designs” and Edit with Divi Builder. Once you’re in the Divi Builder, copy the Header section you’d like to use and then come to Divi -> Theme Builder -> Edit Global Header and paste the Section here. That’s it.
Molti Theme also provides you 6 awesome-looking Footer Designs to choose from. The process is pretty much the same as you’ll do to change the Header Design. Go to Dashboard -> Pages and search for “Footer Designs” and Edit with Divi Builder. Once you’re in the Divi Builder, copy the Footer section you’d like to use and then come to Divi -> Theme Builder -> Edit Global Footer and paste the Section here. Said you, It’s pretty much the same process!
Want to change those Testimonial Images on the Homepage of the Molti Theme? Then this will help you with that. For that, please go to Appearance -> Theme Editor and then Select Molti Theme and then select style.css file. And then scroll to the line 330 and from there you’ll be able to change the Images easily. You’ll have to change the Image URLs on line 334 for the first Image and so on. As in this image.
You can easily make your Molti Header Sticky on Scroll. For that, go to Divi -> Theme Builder -> Edit Global Header, and open the Section/Row Settings that you want to make sticky on Scroll. In the Settings go to Advanced Tab -> Scroll Effects -> Sticky Position -> Stick to Top. Then Save the Changes and check your Header on Frontend.
On the Homepage Feature Section, you see Icon Hover Effect and to change their color you can follow the screenshot below.
The Services Cards shown on the Services Page looks really cool with an awesome hover effect. But here's how to change the color of that card. Go to the Row settings -> Column Settings -> Advanced tab -> Custom CSS -> Before and here change the color code. This video will help:
If you want to customize the Advance Dropdown Content, go to Dashboard -> Divi -> Theme Builder -> Edit Global Header and here Enable the Layers View and look for 3rd Section and you can expand the Layers View to edit the content of Dropdown.
Video Walkthrough:
We get this question often, that the footer is reverted to Molti's Default footer on Mobile. That's because, we've built a separate section for Mobile Footer, due to responsiveness. To edit it, you'll have Edit the Global Footer and then go to Mobile/Tablet View and then you'll be able to edit.
Alternatively, you can enable the switch "Show Disabled Module at 50% Opacity" to see the Mobile Footer on the Desktop to edit it while being in Desktop view. See this image.
This is the Testimonial section that you'll find on the Services page, and here's a video to help you edit the content of all 4 Testimonials in this design:
Do you want to change the test in the "New" indicator in the Menu or Want to change the test in the "New" indicator in Menu or change the Background color? For that, go to Dashboard -> Appearance -> Theme Editor -> select Molti - Ecommerce -> Go to style.css and search for "new symbol," and you'll see the CSS for the New indicator. You can see the screenshot below to learn how to customize things:
To add the New Indicator to any Menu Item you wish, you need to add Class to the Menu Item.
To see the "CSS Classes" option for menu items, click "Screen Options" at the top and check the "CSS Classes" options.
For Main Item = molti-new-icon main
For Sub Menu Item = molti-new-icon
To edit the content of the Tabs that you see in Home V2, you can simply go to Layers View and remove a letter from the class that is added to the Row to show that Row in the Divi Builder and edit the content.
Once you're done with editing the content, add the class letter back to hide the row so that it only shows once the user opens the tab.
Here's an easy video guide:
Adding More tabs is super simple; simply duplicate the tabs and the content and remove the active class, and you're done.
Here's a video guide:
Do you want to change the text in the "New" indicator Badge in the Menu or change the Background color and more? For that, go to Dashboard -> Appearance -> Theme Editor -> select Molti - Ecommerce -> Go to style.css and search for "new symbol," and you'll see the CSS for the New indicator. You can see the screenshot below to learn how to customize things:
To add the New Indicator to any Menu Item you wish, you need to add Class to the Menu Item.
To see the "CSS Classes" option for menu items, click "Screen Options" at the top and check the "CSS Classes" options.
For Main Item = molti-new-icon main
For Sub Menu Item = molti-new-icon
If you want to remove the Badge from the Menu Item, remove the Class from that Menu Item.
In Molti, we have added custom CSS to change the option for equalizing column height and enabling vertical content centering in a section. However, some users would like the "Equalize Column Height" option to be restored. No worries! It's a simple process. Just remove the CSS mentioned below from the style.css file:
