Molti Theme Customization

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.

How to Change Header and Footer

Change Header

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.

Change Footer

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!

Change Testimonial Images

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.

Make Divi Header Sticky on Scroll

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.

Change Features Section Hover Icon Color

On the Homepage Feature Section, you see Icon Hover Effect and to change their color you can follow the screenshot below.

Services Card Hover Color

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:

Edit Footer For Mobile

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.

Changing the Images-Based Testimonials Content

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

Changing Content for Tabs on Home V2

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:

Add More Tabs in Home V2

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.

Make Equalize Column Height Option Work

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:

PreviousChange Color Scheme NextComplete Video Tutorial

Last updated 5 months ago