Customize your Divi Theme

Use custom code to enhance your Divi Theme

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

read more

8 Divi Child Theme developers websites built with Divi

Divi developers use Divi too! Divi Child themes have been around now for a few years now and there are 100's of child themes available from various Divi developers from the Divi community. If you are short on time or skills, a good quality Divi child theme can allow...

read more

Control Divi slider with external links

Use text links or buttons to control Divi sliders It was recently asked in one of the Divi Facebook groups how to control content in a slider using external text links. I had been looking at a post from Fixit Press the other day that showed how to use...

read more

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

read more

Fix the Divi jumping header on Divi Theme Examples

How do I stop my Divi header jumping? Like many people using Divi, the header on my Divi site has been jumping on load for a while now. I did fix it when it 1st started which was a long, long time ago, but this Divi bug seems to have found it's way back...

read more

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

read more

17 eCommerce shops built with Divi

Online stores built with the Divi Theme + Woocommerce The following Divi website examples all use the free Woocommerce plugin to create their online store for products ranging from Teak wood Ganesha to sports cars (yes, you can buy a car online!) and everything...

read more

The Divi Layout Directory is live!

Finding, previewing and saving your Divi Layouts just got easier. Problem - With an ever growing collection of 200+ Divi layouts listed on the Divi Layout pages on Divi Theme Examples, it was becoming hard to find the layout I wanted. Solution - Move to Bali for a...

read more

Divi demo sites from Elegant Themes

Divi demo sites created by Elegant Themes The talented team behind Elegant Themes* not only create 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...

read more

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 organsise the many demo pages. As default the Divi mega menu when...

read more

5 Awesome 1-page Divi Theme examples

5 awesome examples of 1 page websites built with Divi. Clear & concise, easy to access via mobiles and easy to maintain, a 1 page websites may just be the thing you're looking for. You may have already seen the blog post from Elegant Themes, which shows you how to...

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

MontereyBayFun.com

Monterey Bay Fun: Magazine/Newspaper Style Website Design Using Divi MontereyBayFun.com is an online guide to all the fun activities, events and location throughout the Monterey Bay Area. It features local restaurants, hotels, shopping centers, beaches and more. We...

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

Divi Theme Slider Height

I keep seeing questions like how do i change the Divi Theme Slider Height? or how do i set the height of the Divi Theme Slider? in the various Divi Theme Facebook groups so here is a quick bit of custom CSS you can add to your theme options custom css box or into your...

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

Divi Shortcodes showing up on mobile

how to stop Divi Shortcodes showing on your mobile site Are you are seeing the Divi 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...

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, Add the following into your Divi theme options custom CSS box, or into your...

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

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

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

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.  In this example we will be adding text to replace each dot...

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

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

read more

Pin It on Pinterest

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close