Divi Theme Tutorials
When I started with WordPress more than 5 years ago, I started with free themes I found online, and learned how to edit them to make them look like a customized site. Then, I found out about Divi, the best (in my opinion) WordPress Theme & Drag-and-Drop Visual Page Builder. When I became more experienced with it, there was no more turning back. I started using it for every website that I made, my own and my clients’.
Maybe it’s just me but I believe Page Builders are the future of website development. If you are looking to make money with website development, then these Divi Theme tutorials are for you!
Disclaimer: I am an affiliate of Elegant Themes (the developers of the Divi Theme), and if you purchase the theme from the links above, I will receive an affiliate commission. This will definitely help with supporting the creation of these tutorials, and I absolutely thank you and appreciate the support. Do let me know if you have any questions, and I will be more than happy to help!
How To Edit & Change The Default Blue Color Bar On Divi Mobile Menu
It may look difficult to change the default blue color bar on Divi's mobile menu, but don't you worry! It is pretty straight-forward to do, and I got you your CSS code that you could use to change the color and maybe to even play around with it a bit! Let's get...
How To Create Links Within The Same Page (Anchor Links) On WordPress Using The Divi Theme
I always found anchor links fascinating and useful. Before I learned about them, I just know that what it does is you click a link or a button and it scrolls down to a specific part of the same page. If you're looking to add this to your WordPress website that's using...
How To Edit or Customize The Slider Arrows Using The Slider Module in Divi
For some reason, there is no easy or simple way to edit or customize the slider arrows on the Slider Module in the Divi Theme. I had to resort to using CSS codes to make the changes, and if you're looking to play around with the slider arrows, you've come to the right...
How & Where To Add CSS Codes To Your WordPress Website Using The Divi Theme
When you're starting out with creating your very own WordPress website while using the Divi theme, one way or another, you'll have to start adding CSS codes. It's very important to know how & where to add them properly to make sure that the changes you're making...
How To Change The % Sign To Other Characters & Place It Before Or After The Number Using The Number Counter Module In Divi
The Number Counter Module by Divi is such a nice effect to have on your website, especially when you want to put the focus on some important numbers for your business. The default icon with this module is a percent (%) sign that is placed on the left or before the...
How To Add Javascript & jQuery Code On WordPress Using The Divi Theme
There will be a time that you will have to add a Javascript & jQuery code to your WordPress Divi website, and if that is now, then you've come to the right place! There are 2 ways to do this: 1) Adding the code to a specific page 2) Adding the code to the whole...
How To Align Buttons To The Bottom Of The Row On WordPress Using The Divi Theme
Alignment is such an important thing to me, so having a way to align buttons to the bottom of the row is a must! In this tutorial and example, I'm only focusing on adding 3 columns into one row with a Text Module into each of them and a Button Module at the bottom....
How To Make Accordion Module Tabs Closable And Change Icon On WordPress Using The Divi Theme
By default, the tabs of the Accordion Module in Divi cannot be closed. The opened tab can only be closed when clicking on another accordion tab. Today, we will be focusing on how to close an open accordion tab without having to press another, and also to have a...
How To Make All Accordions Closed By Default Using The Divi Theme
When you use the Accordion Module by Divi, the very first tab is open immediately. Then, when you click the other tabs, the initially opened tab will close. So, basically, only one tab can be opened when using the Accordion Module. For some, even for myself, I do...
How To Have A 2 Column Shop Mobile Layout On WordPress Using The Divi Theme
By default, Divi's mobile layout of the Shop page or Shop module is just 1 column stacked on top of each other. This layout is not as preferable, especially when you have a lot of products in your store. So, today, we will be focusing on how to make the Shop page or...
How To Vertically Align Modules Or Content On WordPress Using The Divi Theme
Alignment is something that's quite a big deal for me. I think it's the perfectionist in me, or maybe it's OCD. But anyway, if that's how you feel as well, this tutorial is for you! Let's get to aligning our modules/content vertically!SampleVideo Tutorial:...
How To Edit The Submit Comment Button On The Comment Section on WordPress Using The Divi Theme
It's quite important to be able to edit the Submit Comment button on the comment section of the blog pages, especially if you're not going to use other comment plugins. The default Submit Comment can definitely make your site look unprofessional or a bit aesthetically...
How To Remove The Default Footer On WordPress Using The Divi Theme
The default footer of Divi (image below) is pretty basic and standard. It's not bad but removing it is quite necessary, especially if you are planning to create a custom footer for your website. However, if something simple is what you're looking for at the moment, it...
How To Change The Color Of The Mobile Hamburger Menu Icon Button on WordPress using the Divi Theme
When no editing has been done yet to Divi's mobile hamburger menu icon button, the color of it will be blue; the default color. Of course, we'd want the color to be according to what we like or to our website's branding color! So, here's a tutorial on how to change...
How to Fix Divi Layouts Loading Forever & Showing No Results Found When Building on Front End
It does get annoying when you're trying to edit your Divi Layouts, but then can't edit them on the front end where you can immediately see your changes. So, I made this simple tutorial on how to fix that! The images below might be something that you see when you try...
How To Increase or Decrease Social Media Follow Icons Module Size on Divi Theme
The Social Media Follow module by Divi Theme is such a useful module, especially if you or your client has a lot of social media channels. The issue that I found with it is the sizes of the icons aren't as easy to adjust. That's why I thought of doing this tutorial,...
How To Create a Sliding Clickable Button to Reveal Information on WordPress Using Divi Theme
Sometimes, we do not want to use the normal "Toggle" module of Divi, and so we want to make the "Button" module as the trigger to show the hidden content. This is definitely useful especially if there are going to be too many content/information on one page. It does...