How to make Divi accordions closed by default
The 1st Divi accordion module item is set to be open by default and there is no option to set it to be closed. If you would like all your accordion items to be closed by default there is a simple trick that makes the 1st (open) item of your accordion invisible. This...
Add a button into Divi navigation menu
By making one of your Divi menu items appear as a button it will really stand out on your navigation menu and increase your Click-Through-Rate, so if that’s something you want, use this css trick to drive people to the page you really want them to visit. If you...
Divi Blurb module + button on hover
The blurb module is one of the most popular of all 46 Divi modules and this little bit of customization will allow you to increase your click-through rates to the content you are highlighting by adding an animated button when the user hovers over your module.All that...
Team member page examples built with Divi
Team member and staff page are win-win Seeing as I work alone on Divi Theme Examples, a team member page would look a bit rubbish, but if you have a talented team of staff in your business and want your customers to get to now them a bit better, then a team member...
Best fitness website examples built with Divi + WordPress
Divi Theme Fitness examples We are about to hit the excesses of the festive season which means way too much food & alcohol and way to little exercise. Good times ahead, but, once the New Years Eve hangover has subsided, it will be time to start thinking about the...
Contact page examples built with WordPress + Divi
17 of the best examples of contact pages built with Divi The contact page is an important, yet often overlooked, page in any website so it really pays off to spend the extra time creating a great looking, informative, functional and easy to use page. If a user has...
Control Divi slider with external links
Use text links or buttons to control Divi sliders By default, the slides in the Divi slider module can be controlled using the left and right navigation arrows or the circle buttons/slide indicators at the bottom of the slider. These can be toggled on or off in the...
Black/dark websites built with Divi
Examples of Divi Websites with black or dark designs Black websites can look kind of tacky, kind of dated, kind of hard to look at… but when designed well they can also look really cool and set just the right mood for your niche. Getting it right with a black...
Fix the Divi jumping header on Divi Theme Examples
Divi has an infamous jumping header that shifts up slightly as the page is loading. In this quick step-by-step tutorial, I will show you how to fix the jumping header issue in Divi with a few lines of CSS. What is the Divi jumping header? When a Divi web page is...
Divi scroll to section with mousewheel
Divi Scroll to next section This quick tutorial will show you how to set up a scroll to section effect using the Divi dot navigation and some Javascript code from Christian Behrends added into a code module in the Divi builder. SCROLL YOUR MOUSE ! STEP 1 – Use...
Divi demo sites from Elegant Themes
Divi demo sites created by Elegant Themes The talented team behind Elegant Themes* not only creates the leading WordPress Theme available today, but they can also use it to create some stunning Divi demo sites. Take a look at the following sites and get inspired to...
Divi mega menu with 6 columns
Add extra columns into your Divi mega menu with some custom CSS. I was revamping the layout of my Divi layouts Demo Zone install and decided to make use of the built-in Divi mega menu feature to help organize the many demo pages. As a default, the Divi mega menu when...
Divi Timeline with CSS
Timeline for Divi using CSS After reading the latest blog post at Elegant Themes, titled, 9 Useful Divi CSS Snippets You Can Add To ePanel In Seconds*, i was a bit disappointed to see that No. 6, Add Connected Bullet Lists, wasn’t working for me after pasting...
Center Align Divi secondary Menu
When you add any of the optional elements into your Divi secondary header navigation they will appear left aligned as shown in the 1st navigation menu below. If you want to move the secondary menu telephone, email and social icons to the center of your navigation as...
Divi Theme Slider Height
The Divi slider module allows you to add content sliders to your Divi website. The module allows you to add text, images, and videos to your slides that can be controlled via left & right navigation arrows or dot navigation. As with all Divi mdules, there are...
Animate the Divi toggle icon
Customizing and animating the Divi toggle icon takes just a few lines of custom CSS in your ePanel or Divi Child Theme and you will get a really cool effect as you may have seen in some sites, such as Brewlife. This example changes the colour of the icon when it is...
Change number counter % to $ in Divi
By default, the Number Counter module in Divi has the option to either display a number with a percent sign or just the number on its own. There is no option to change the % sign to anything else within the module settings. We can swap the % sign for a $ sign by...
Move secondary menu social icons to the right in Divi
When you add any of the optional elements into your secondary header navigation they will appear left aligned as in the top image below. If you want to move the secondary menu social icons to the right in your navigation as in the lower image below, you can use a few...
Show Divi mobile menu on desktops
Divi has a navigation menu style for desktop and a different one for the smaller tablet and mobile devices. When your website screen size is reduced, a mobile breakpoint is activated which causes the navigation menu to change to the mobile-style. The mobile menu comes...
Change the Divi dropdown menu arrow to +
The main navigation menu in Divi will add a down arrow icon to any parent navigation items that have sub-menu links within, to let your users know that there are more menu links available. The image below shows the default sub-menu drop-down icon on the left as a blue...
Adding custom icons to Divi blurb module
The Divi Blurb module is a pre-designed element for Divi that includes a text title, content area and option to use either an image or icon. When the option to “Use Icon” is selected you will be able to choose from 380 icons that are included within Divi....
Remove minutes and seconds on Divi countdown timer
The Divi Countdown Timer module is a visual timer that counts down to a date you set in the module. By default, the countdown will add days, hours, minutes and seconds to the output of the module. There is no option within the module to hide the days, hours, minutes...
Divi blog post offsets
With the latest release of Divi, there was an option added to your blog module called Offset number, which basically allows you to set a number of posts that that blog module skips/doesn’t show. This means that you can style and set a number of posts to show in...
Slide image missing on Divi full width slider on mobile
When you add a Full-Width Slider module in Divi and add a Slide image, that image is not displayed on mobile devices by default. There is an option to in the module settings to enable the image or video in the module settings along with 2 other switches to control...
Add text before the Divi captcha
The Divi contact form module comes with a CAPTCHA that is enabled by default when you add a contact form module to your page. CAPTCHA is an acronym for “completely automated public Turing test to tell computers and humans apart” and is a challenge-response...How to edit Divi Image Gallery Grid Thumbnail Sizes
The ideal size for the default gallery images is 400x284px or larger, but if you use larger images you should use the same aspect ratio. The aspect ratio by default would be 400px width by 284px height which would give 100:71. So an image 1000px wide should be 710...
Verified 3rd party Divi extensions, child themes & layouts. *Affiliate link