Customize your Divi Theme

Use custom code to enhance your Divi Theme

Divi Theme Community Round-up #2

Divi stuff I found this week, published in a weekly Divi roundup Every Wednesday I will be posting links to Divi tutorials, child themes, resources...and stuff that has caught my eye. As with last week, and for the next 12 weeks or so, we have been busy absorbing all...

read more

Web design inspiration sites

Use web design showcase sites to get inspired and create better Divi websites So, of course we all love Divi Theme Examples, but there is more to the tinterweb than Divi and there are some awesome non-Divi sites out there that can provide inspiration and creative...

read more

Divi Switch customizer plugin

43 Divi customizations at the flick of a switch The Divi Module Editor has been a great success for SJ over at divi.space*, and the new Divi Switch Plugin* is it's updated replacement. The plugin adds 43 switches to your WP dashboard that allows cistomizations to be...

read more

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 the CSS...

read more

Custom 404 page in Divi Theme

A Custom 404 page for Divi is a good idea so that users don't just see the (rather plain and ugly) default 404 page that is served when they arrive at a page that no longer exists on your site. You can create a custom 404 page for Divi by getting mixed up in the code,...

read more

Center Align Divi secondary Menu

To center align Divi secondary menu (the one with the phone number/email/social) just add the following to your ePanel custom CSS box or into your Divi Child theme style.css. /* Secondary menu alignment */ #et-info { float: none !important; text-align: center; }

read more

Hamburger menu a default on Divi Theme

If you missed this weeks episode of The Divi Nation podcast (Episode 9 – Transitioning from Web Designer to Digital Strategist with Marie Poulin), you will have also missed this nice little quick-tip from presenter Nathan B. Weller, that shows how to make the...

read more

Divi Theme Slider Height

** Update Divi 2.6 - You can add a height for your slider directly into the modules custom CSS tab. Just add height: 600px; into the main element section ** I keep seeing questions like how do i change the Divi Theme Slider Height? or how do i set the height of the...

read more

Hide Divi modules on mobile

** UPDATE DIVI 2.6 - You can now select to disable a module for either desktop, tablet or mobile via the module settings. Just right click on the section, row or module and select disable, or select the checkboxes within the settings.. ** If you want to hide any of...

read more

Open Divi social icons in new window

If you want to open the social icons links in the secondary navigation in a new window you can go to admin > Divi Theme Options > Integration > Add code to the < head > of your blog ** Tested OK in Divi version 3.0 ** ** Tested Version: 2.7.8 ** Tested in Divi 2.6.2...

read more

Divi call to action module on 1 line

If you would like the Divi call to action module to display on 1 line (example 2 below), so that the button is to the right of the content rather than below it (default example 1 below) , you can add the following CSS to your Divi ePanel or into your Divi child themes...

read more

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...

read more

My Divi WP admin panel menu has a bug and is falling apart

Help, my Divi WP admin panel menu has a bug and is falling apart If you use the Chrome web browser to access your Divi website admin panel, you may have noticed the annoying bug that makes your menu items sit on top of each other and dance around like a drunk sailor....

read more

Divi Shortcodes showing up on mobile

Are you are seeing strange shortcodes when you view your Divi website on a mobile like in the picture below? If so, you have Jetpack plugin installed and the Jetpack mobile menu theme activated, which is overriding the Divi theme mobile design. Divi is a responsive...

read more

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 your...

read more

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...

read more

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 don't take...

read more

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 following code...

read more

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 from Dan Mossop (Divi Booster); Add the following into your Divi theme options...

read more

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 (...

read more

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...

read more

Change the footer credits using ePanel

*** UPDATE *** As of Divi 3.0.1 you can now edit the Divi footer credits using the Theme Customizer. I posted earlier about hiding the Elegant Themes footer credits using css, but if you want to edit the details you can do so by adding some custom javascript into your...

read more

Stop the menu shrinking in Divi 2.4

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 menu/logo...

read more

Remove the Elegant Themes credits in Divi

*** UPDATE *** As of Divi 3.0.1 you can now edit the Divi footer credits using the Theme Customizer. Click on the Theme customizer (top left dropdown) then Footer > Bottom Bar > EDIT FOOTER CREDITS .... add your own credits in here. *** UPDATE *** The following code...

read more

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% {...

read more

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...

read more

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,...

read more

Hide Divi modules on mobile

If you want to hide certain Divi modules when a visitor is viewing on  mobile device, you can add the following custom CSS to your Divi child theme, or into your Divi theme ePanel. @media screen and (max-width: 900px) { .notonmobile {display: none;} } Then on each...

read more

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...

read more

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. With a little extra code (from Carl @ One Guy Website ) you...

read more

Add text shadow to slider titles in Divi

If you want your slider header text to stand out from the background image you can add the following code into your ePanel or child theme style.css file .et_pb_slide_description h2 {color:#fff !important; text-shadow: 3px 2px 2px rgba(0,0,0,1); font-weight:200;...

read more

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 case) 2 - Add...

read more

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 need...

read more

Create coloured 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...

read more

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,...

read more

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...

read more

Make the Divi header menu transparent

***UPDATE**** The new options that came with Divi 2.4 allow for greater control over the Divi header, including making it transparent. Check out the Divi header options here. To make the Divi main menu transparent you can add the following CSS code into your ePanel or...

read more

Divi Fonts Preview

Divi Font Preview on Divi Theme Examples. Divi 2.4 3 comes pre-packaged with 86 91 unique fonts as default so you should be able to find a font that works well with your Divi theme design. Below are the Divi fonts with a H2 heading, bbold, italic and a bit of lorem...

read more

Open Divi call to action in a new tab

***UPDATE*** THE DIVI CALL TO ACTION MODULE NOW HAS THE OPTION TO OPEN IN THE SAME WINDOW/NEW TAB AS PART OF THE GENERAL SETTINGS *** UPDATE*** *****When you copy and paste the code below, go in and manually retype the " " ' ' as copy/paste causes issues with these...

read more

Add ghost buttons anywhere in Divi

**UPDATE** Divi 2.6 now has a button module so you can add buttons anywhere you like, and style them easily using the module settings.... Divi buttons. So, You want to add buttons into your Divi page, but notice that the add ET button doesn't give the option for ghost...

read more
Page 1 of 3123
divi 3 freebies post
divi theme fonts preview
divi nation podcast list
blank child theme for divi
download Divi layouts
preview Divi child themes
Divi theme resources guide
edit divi footer credits in theme options
best divi theme demos
make divi site load faster
Divi child theme guide

Pin It on Pinterest