Create 5/6/7/8 column rows in Divi
*Update 15/2/17 – See full tutorial on Elegant Themes* The Divi builder only allows you to add 4 columns per row, but with a little bit of creativity and custom CSS you can create more than 4 columns per row. You will need to have a single column with...
Change number counter % to $ in Divi
To change the percentage (%) sign in your Divi Number counter module to a dollar ($) sign you will need to; 1 – Add a Numer Counter Module into your page. 2 – In the module general settings, Set the PERCENTAGE SIGN to OFF. 3 – Set a CSS Class of...
Make Divi Theme non-responsive
I have been asked a few times the past few weeks how to make the Divi theme non-responsive. My first thought and question is why would you want to make Divi non-responsive, and to be honest I haven’t heard a compelling reason to do it. But, some clients...
Make contact form 7 look like Divi contact form
Contact form 7 is a good option for those who want to add a more complex form than the Divi contact form allows, but once added the contact form 7 doesn’t have the Divi look and feel. So, to make your Contact Form 7 look like a Divi contact form add the...Move secondary menu social icons to the right in Divi
If you want to move the secondary menu social icons to the right in your Divi website, rather than left aligned with the phone number and email on the left, you can use the following code, Add the following into your Divi theme options custom CSS box, or into your...Show Divi mobile menu on desktops
If you want to show the mobile (burger) menu on desktops as well as mobiles you can use the following code from SJ @ Gritty Social. Just add the following code into your Divi child theme CSS file or into the ePanel custom CSS tab. @media only screen and (...Adding a full width RevSlider to your Divi website
The Divi slider works well for many sites, but some people want a little extra functionality than it can offer. There are numerous request in the various Divi Facebook groups for Divi slider alternatives and Rev Slider (along with Layer Slider) is the one that usually...Stop the menu shrinking in Divi
The shrinking menu in Divi 2.4 looks nice, but it’s not for everyone, so if that’s you and you want the Divi menu to stay the same size before and after scroll all you need to do is go into the Divi Theme Customizer > header & navigation and set the...Add a bouncing down arrow to you Divi full width header.
**Updated for Divi 2.5** Now the down arrow is added as an option in the Full width header module, and you can add the following code into your ePanel custom CSS box to make it bounce. /* BOUNCING MORE ICON */ @-webkit-keyframes bounce { 0%, 100% { -moz-transform:...Change the Divi dropdown menu arrow to +
On the Divi theme dropdown menu there is a down arrow. If you want to replace this with a + (or whatever) you can add the following CSS code into your ePanel or Divi Child theme. Use this list (the CSS column) to add your own icons into the menu. #top-menu...Swap home text for icon in Divi
If you want to swap your home text for a home icon in your Divi menu you need to; 1. Upload an image icon to your media library and copy the image path (click on the image in the library once uploaded to get the image path URL). 2. In your Appearance>menu settings,...
Divi Theme reviews
I obviously like the Divi Theme and give it good reviews, as I set this website up to showcase sites made using it, but what are others saying about the Divi theme. Here are a few Divi Theme reviews I came across online. As you can see Divi is getting some pretty good...Monarch Facebook API
You may have noticed the following notice in your Divi Admin. Due to changes in Facebook’s API, Monarch must be authorized to obtain follow/share counts from Facebook. Please get an App ID and App Secret from Facebook and save them here. | Hide Notice Facebook...Pre-defined Divi Theme layouts
preview all 32 pre-defined layouts for Divi Your Divi theme comes with 32 pre installed page layouts ready to load into a page via your Divi page builder. You can view a demo site with all 32 Divi page layouts loaded on a fresh install of WP and Divi Theme. VIEW ALL...Adding custom icons to Divi blurb module
The Divi theme blurb module comes with quite a few icons you can use in your blurb, but being the creative soul that you are you want a way to add your own custom icons and stand out from the Divi crowd. There are a few ways to do this, but by far the easiest is to...Custom sidebar navigation in Divi
**not tested in Divi 2.4+ If you activate the sidebar navigation in Divi you will get the dot navigation on the right of your screen that helps users scroll to sections on 1 page websites or on longer pages. In this example we will be adding text to replace each dot...Change the height of a single slider in Divi
If you want to change the height of your slider in Divi, you will need to add some custom CSS to your ePanel Divi Theme Options (Divi>theme options) or Divi child themes style.css file. 1 – Give the slider you want to change a CSS class (myslider in this...
Create animated CSS background in Divi
Add a bit of extra movement into your Divi website like on the homepage of Divi Theme Examples with CSS gradient animations. The technique was created using the gradient animator site with a few edits of the code to make it work how I needed. 1 – First you will...Create colored Google maps in Divi
With almost every website having a Google map integrated, you may want to add some custom colour to make your map stand out from the crowd. You can use the snazzy maps plugin ($5) or with a little extra work can just follow their instructions to add the code and get...Show slider text and button on mobile in Divi
By default the slider text and button will NOTshow on mobiles. If you want to show your slider text and button on mobile in Divi using the following code in your ePanel or child themes style.css file. @media only screen and (max-width: 767px) { .et_pb_slide_content,...Add pointer between Divi sections
If you want to add a dividing arrow between your sections in Divi, add the following code to your ePanel cutom CSS, or into your child themes CSS file. So, give your Section a class name of downarrow. If your following section is a different colour than #fff, you will...Make the Divi header menu transparent
Having a transparent header in Divi is a common design trend which allows your hero section to have a greater impact when the user first visits your site. The Navigation menu is still visible but the menu bar it sits in is transparent as in the screenshot below....
Add greyscale maps in Divi
Grey (google) maps look cool, so here is the custom CSS code you need to add to your ePanel, or Divi Child theme to turn off the colour on your Divi map module. .et_pb_map_container { filter: url("data:image/svg+xml;utf8,<svg...
Remove box shadow from Divi slider
If you have white images in your slider then the box shadow that is added looks quite ugly, so add this custom CSS to your Divi ePanel or Divi child theme style.css to remove the box shadow on your sliders. Updated to more stable code. Thanks to Nettie .et_pb_slider...
Bloom Email opt-in Plugin
After a much anticipation and excitement, the Elegant Themes Bloom opt-in Plugin has arrived. This is a must have plugin if you want to grow your email subscription lists. Building your email list is the hard part, and that’s why we built Bloom. We have spent months...
Remove minutes and seconds on Divi countdown timer
Countdowns to the minute and second can be a bit to specific for many, so you can remove the minutes and seconds on Divi countdown timer by adding this custom CSS in your Divi ePanel or Divi child themes style.css /* countdown timer – hide minutes and seconds*/...
*affiliate link
