Customizing the Divi Wordpress Theme

This post is a collection of tips and tricks for getting the most out of the powerful Divi Theme by Elegant Themes. If you've installed the Divi theme and need some help adjusting the appearance to suit your needs, let me know in them comments and I'll do my best to help you out.

About the Divi Theme by Elegant Themes

The Divi WordPress Theme is a slick, modern theme from Elegant Themes. It has recently become one of the top 10 most used WordPress themes, thanks to its impressive flexibility and ease-of-use.

Chances are that if you've made it to this post theme you are already using the theme and are looking to squeeze every last ounce of awesome out of it.

But if you still shopping around for a new WordPress theme you may want to take a look at the Divi Theme (or one of the other 87 themes by Elegant Themes).

 

Removing Image Backgrounds

When you add captioned images into your posts, they are given a grey background and border. If you want to remove this, add the following to the end of the theme's style.css file:

.wp-caption { background-color:white; border:0; }

Adjusting Image Sizes

If you want to adjust the size of the images embedded in your posts, add something like this to the end of your style.css file:

.wp-caption { width: 400px !important; }
.wp-caption img { width: 390px !important }

Note: set the width to suit your needs and keep a 10px difference between widths in the two CSS rules.

Hiding the Related Posts Widget

To hide the related posts widget, add the following to the end of your theme's style.css file:

#recent-posts-2 { display:none; }

Hide the Divi Header When You Scroll Down

By default, the main Divi header will start off large, then shrink to a smaller version when you scroll down.

The best way to prevent the header from hovering over the content when you scroll down via the ePanel. There is a "Fixed Navigation Bar" option under "General Settings". Set this to disabled and the header will no longer shrink and hover over the content.

If you need a CSS solution, you can hide it instead by adding this the end of the Divi theme’s style.css file:

.et-fixed-header { display:none; }

With this, when you scroll down the header will disappear instead of shrinking.

Hide the Divi Header

You can completely hide the main Divi header bar using the following CSS:

#main-header { display:none; }
#page-container { padding-top:0px !important }

It hides the header, then moves the rest of the page up into the space the header occupied.

Apply a Style to a Single Text Module

To apply a style to a single text module, we can use a CSS rule like this:

.post-57                                   /* apply to page / post with ID 57 */ 
.et_pb_section:nth-of-type(1)  /* apply the the first page builder section */
.et_pb_row:nth-of-type(1)        /* apply to the first row of the section */
.et_pb_column:nth-of-type(2)  /* apply to the second column of the row */
.et_pb_text:nth-of-type(2)        /* apply to the second text module in the column */
{ 
  font-size: 14pt; 
}

This looks quite complicated, but it's actually fairly simple.

The page builder lays out pages in sections. Each section is then split into a number of rows, and each row into a number of columns. Each column contains a number of modules, some of which may be text modules (which have the .et_pb_text class). The rule above uses the nth-of-type operator to navigate this structure, picking the correct section, row, column and text module within the required page.

Finally, we can set the style attributes (such as the font-size) for the targeted text module.

Hide the Divi Logo

You can remove the Divi logo, without needing to remove the header or add your own logo, by adding the following CSS:

#logo { display:none !important; }

Add a Widget Area to the Divi Header

The following code will create a new widget area named "Header" and then (using jQuery) add it below the links on the right of the Divi header (see here if you also want to remove the header links). The code below should be added to your functions.php file, or better yet, to a child theme.

// Create the new widget area
function myprefix_widget_area() {
    register_sidebar(array(
        'name' => 'Header',
        'id' => 'myprefix-widget-area',
        'before_widget' => '<div id="%1$s" class="et_pb_widget %2$s">',
        'after_widget' => '</div> <!-- end .et_pb_widget -->',
        'before_title' => '<h4 class="widgettitle">',
        'after_title' => '</h4>',
    ));
}
add_action('widgets_init', 'myprefix_widget_area');

// Create the widget area and then move into place
function myprefix_footer() { ?>
    <div id="myprefix-widget-area-wrap">
        <?php dynamic_sidebar('myprefix-widget-area'); ?>
    </div>
    <script>
        jQuery(function($){
            $("#et-top-navigation").after($("#myprefix-widget-area-wrap"));
            $("#myprefix-widget-area-wrap").show();
        });
    </script>
<?php 
} 
add_action('wp_footer', 'myprefix_footer');

// Adjust the layout so that it fits into the header better
function myprefix_css() { ?>
    <style>
    #myprefix-widget-area-wrap { display:none; float:right; max-width: 500px; clear:right }
    #myprefix-widget-area-wrap .et_pb_widget { margin-right:0px }
    #myprefix-widget-area-wrap .et_pb_widget:last-child { margin-bottom: 18px; }
    .et-fixed-header #myprefix-widget-area-wrap .et_pb_widget:last-child { margin-bottom: 10px; }
    @media only screen and ( max-width: 980px ) { 
        #myprefix-widget-area-wrap .et_pb_widget:last-child { margin-bottom: 0px; }
    }
    @media only screen and ( max-width: 768px ) {
        #myprefix-widget-area-wrap .et_pb_widget:first-child { margin-top: 18px; }
    }
    </style>
<?php
}
add_action('wp_head', 'myprefix_css');

Make Gallery Images Show Caption instead of the Title

To show a caption instead of the title when viewing the full size image from a gallery, you can change this bit of code (located around line 3625 of the Divi functions.php file):

$image_output = sprintf(
    '<a href="%1$s" title="%2$s" rel="nofollow">
        <img src="%3$s" alt="%2$s" /><span class="et_overlay"></span>
    </a>',
    esc_attr( $full_src ),
    esc_attr( $attachment->post_title ),
    esc_attr( $thumb_src )
);

To:

$image_output = sprintf(
    '<a href="%1$s" title="%2$s" rel="nofollow">
        <img src="%3$s" alt="%2$s" /><span class="et_overlay"></span>
    </a>',
    esc_attr( $full_src ),
    esc_attr( $attachment->post_excerpt ),
    esc_attr( $thumb_src )
);

Note that all I've done is change the "post_title" part to "post_excerpt".

Add a Full-Width image Above the Header

You can make Divi show a full-width image above the navigation bar by adding the following to the Divi functions.php file, or to a child theme:

// load jQuery
wp_enqueue_script('jquery');

// hook the widget area into the footer, then move into place in the header
function myprefix_add_header_img() { ?>
<div style="display:none">
    <img id="myprefix-page-start-img" src="http://www.mysite.com/my-image-url.jpg"/>
</div>
<script>jQuery("#myprefix-page-start-img").prependTo(jQuery("body"));</script>
<?php
}
add_action('wp_footer', 'myprefix_add_header_img');

// CSS to display the image and header correctly
function myprefix_css() { ?>
<style>
/* Change header to float correctly wherever it is in the page */
@media only screen and ( min-width:981px ) {
    #main-header { position:relative !important; top:0px !important; } 
    #main-header.et-fixed-header { position:fixed !important; margin-bottom:0px; top:0px !important; } 
    body.admin-bar #main-header.et-fixed-header { top:32px !important; } 
    #page-container { overflow:hidden; } 
}

/* Style the image for full screen layouts */
@media only screen and ( min-width:981px ) {
    #myprefix-page-start-img { margin-bottom:-80px; width:100%;}
}

/* Style the image for box layout */
@media only screen and (min-width: 1200px) {
    .et_boxed_layout #myprefix-page-start-img {
         width:1200px;
         -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
         -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
         box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
         display:block !important;
         margin-left:auto;
         margin-right:auto;
    }
}

/* Hide the image on smaller screens */
@media only screen and ( max-width:980px ) {
    #myprefix-page-start-img { display:none; }
}
</style>
<?php
}
add_action('wp_head', 'myprefix_css');

The only thing you should need to change is the image url in the myprefix_add_header_img function.

Changing the Height of the Divi Slider

The Divi Theme comes with a slider module to let you display a gallery of images. It has a fixed height, but this can easily be changed by adding a bit of CSS to the theme, e.g.:

/* Set the slider height */
@media only screen and (min-width:981px) {
    .et_pb_slider, .et_pb_slider .et_pb_container { 
        height: 425px; 
    }
    .et_pb_slider, .et_pb_slider .et_pb_slide { 
        max-height: 425px; 
    }
    .et_pb_slider .et_pb_slide_description { 
        position: relative; 
        top: 25%; 
        padding-top: 0 !important; 
        padding-bottom:0 !important; 
        height:auto !important; 
    }
}

Note that this will change the height of the Divi slider on all pages with a slider – just change the two occurrences of "425px" with your desired height. The height change is only applied on desktops; on mobiles it defaults to the standard Divi height.

If you want to affect just one slider, you can add a CSS class in the slider module options, and then replace the 5 occurrences of "et_pb_slider" in the above with the name you choose for your CSS class.

I've used "top: 25%" to display the slide titles 1/4 of the way down the slide (so that all slide titles appear in the same place). Increase this if you want the slide titles and descriptions to be moved lower down the slide.

Changing the Sidebar Background Color

We can start by setting our desired background color on the "sidebar" element, like so:

#sidebar { background-color: #fafafa; }

For a light-grey background. Or for a semi-opaque black background:

#sidebar { background-color: rgb(0,0,0,0.5); }

You'll notice however, if you do this, that it doesn't look particularly good. The sidebar element tightly surrounds the content meaning that the contents of the sidebar are right up against the edge of the sidebar.

To fix this we can adjust the padding and margins. We need to specify several sets of padding and margins to handle the various screen sizes supported by Divi. Here is an example set of padding and margin rules which I think gives a nicer result:

#sidebar { background-color: #fafafa; }

@media only screen and (min-width: 1100px) { /* full-size screens */
    .et_left_sidebar #sidebar {  /*left*/
        padding:70px 0 200px 30px; 
        margin:-70px 0 0 -30px;
    }
    .et_right_sidebar #sidebar { /*right*/
        padding:70px 30px 200px 0px; 
        margin:-70px -30px 0 0;
    } 
}
@media only screen and (min-width: 981px) { /* medium-size displays */
    #sidebar { 
        padding:70px 30px 200px 30px; 
        margin:-70px -30px 0 -30px; 
    }
}
@media only screen and (max-width: 981px) { /* mobiles, etc */
    #sidebar { 
        padding:30px 
    }
}

This code works for both left and right sidebars.

Removing the Divi Sidebar Dividing Line

To remove the thin dividing line between the page content and the sidebar, add the following CSS:

.container::before { display:none; }
.et_pb_widget_area_right { border-left:0; }

Fix the Header Bar Links Vertical Alignment

If you change the logo height you may find that links on the right of the header bar are no longer vertically centered. You should be able to fix this by using the following CSS to vertically center the links and search icon in the header area:

@media only screen and ( min-width: 981px ) { 

	/* Vertically center the top navigation */
	#et-top-navigation { display:table-cell; vertical-align: middle; float:none !important;}
	.container { display:table; }

	/* Right align the contents of the top navigation area */
	#et-top-navigation { text-align:right; }
	#et-top-navigation > * { text-align:left; }
	#top-menu-nav, #et_top_search { float:none !important; display:inline-block !important}
	#et_top_search { vertical-align: top !important; margin-top:3px }

}

Adding a Semi-Transparent Background Image to the Header

If you'd like to add a semi-transparent background image to the Divi Header, you can do so by adding the following CSS to your theme:

#main-header::after {
    content: "";
    background-image: url('myimage.png');
    background-size:cover;
    opacity: 0.5;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}

Just replace 'myimage.png' with the URL of your desired background image.

Changing the Sidebar Width

The Divi sidebar is quite narrow, and increasing its width is not particularly easy. But the following code will allow you to increase (or decrease) the divi sidebar width. In this example, I'm setting the width to 300px, but you can replace it with your choice of width.

@media only screen and ( min-width: 1100px ) {

    .et_right_sidebar #sidebar .et_pb_widget { 
        margin-right:30px !important;
    }
	.et_left_sidebar #sidebar .et_pb_widget { 
        margin-left:30px !important;
    }
	
    .et_right_sidebar #left-area, 
    .et_left_sidebar #left-area { 
        width:720px !important; /* 1020 - width */
    }
    .et_right_sidebar #main-content .container:before { 
        right:300px !important; /* width */
    }
    .et_left_sidebar #main-content .container:before { 
        left:300px !important; /* width */
    }
    .et_right_sidebar #sidebar,
	.et_left_sidebar #sidebar { 
        width:300px !important; /* width */
    }
}

Other than replacing each instance of 300px with your desired width, you need to replace the 720px with 1020 minus your desired width.

This should set the sidebar (either right or left sidebar) to a width of 300px, on full screens. On smaller screens, the default Divi sidebar width is used.

Changing the Header Phone Number and Email Font Sizes

Divi lets you to set a phone number and email address to be shown at the top of the header. You can adjust the font size of these items with the following CSS:

#et-info-phone { font-size:130% } /* phone number */
#et-info-email { font-size:130% } /* email address */
#et-info { font-size:130% } /* both at once */

Note that the default font-size is 100% so anything bigger than this will increase the font size and anything smaller will decrease it.

Full-Width Featured Images

First, we can put the image into position with the following CSS:

body.single article.has-post-thumbnail > img:nth-of-type(1) { 
    position:absolute; left:0; top:0; 
}

Now we need to move the post title and content, and the sidebar, below the image. We can do this by setting a top-margin on the content-area element, which is equal to the height of the featured image. It is easiest to do it using jQuery, which lets us easily adjust the margin as the image height changes between posts and on browser resizes. Here's the jQuery code, which can be added into footer.php:

<script>
jQuery(function($){
    var featured = $('body.single article.has-post-thumbnail img:nth-of-type(1)');
    var contentarea = $('#content-area');

    if (featured.length) {
        adjust_margin();
        $(window).resize(function(){ adjust_margin(); });
    }

    function adjust_margin() {
        contentarea.css('margin-top', featured.height());
    }
});
</script>

Swap the Slide Image and Slide Description Positions

If you'd like to have your slide images on the right instead of the left, you can use the following CSS:

.et_pb_slide_description { float:left !important; padding-left:100px !important }
.et_pb_slide_image { right:100px; }

To make the change to just a single slide (e.g. the first one) on a particular slider, give the slider a CSS class, such as "myslider" and use:

.myslider .et_pb_slide:nth-of-type(1) .et_pb_slide_description { 
    float:left !important; padding-left:100px !important 
}
.myslider .et_pb_slide:nth-of-type(1) .et_pb_slide_image { 
    right:100px; 
}

Prevent Image Gallery Thumbnail Stretching

The Divi Theme gallery module has a grid view which shows thumbnails of the images in the gallery. Sometimes the thumbnails will appear distorted, as small images are stretched to fill the thumbnail area. To prevent the image stretching, we can use the following CSS:

.et_pb_gallery_image img { 
    min-width:0 !important; min-height:0 !important; 
    position: relative;
    left: 50%; top: 50%;
    transform: translateY(-50%) translateX(-50%);
}

This removes the minimum height and width setting which was causing the stretching, and centers the image in the thumbnail area.

Remove the Header Bar Bottom Border

If you'd like to remove the border from the bottom of the header bar, you can do the following:

#main-header{
    -webkit-box-shadow:none !important;
    -moz-box-shadow:none !important;
    box-shadow:none !important;
}

Changing the Look of Post Titles

To change the style of the post titles in Divi, you use CSS like the following:

.single h1 { 
    font-family: Courier;
    font-size: 30pt; 
    color: green; 
    border-bottom: 1px solid #ddd;
} 

This example change the post title font to Courier, makes the font size bigger, makes the title green, and adds a thin grey line under it (by adding a bottom border).

Adding Dividing Lines Between Widgets

To add a dividing line between the individual widgets in the sidebar, you can add this CSS:

#sidebar .et_pb_widget { 
    border-bottom: 1px solid #ddd; 
    padding-bottom: 20px; 
    margin-bottom: 20px; 
}
#sidebar .et_pb_widget:last-of-type { 
   border-bottom:0; 
}

The first part adds a bottom border to each widget (the same color as the vertical sidebar divider), and positions it mid-way between successive widgets. The second part removes the bottom border on the final widget.

160 Comments

  1. Hi Dan – I just want to commend you on this website, and all the wonderful code/help you've provided to folks like myself. You're doing an awesome job, and this website has been very, very, helpful!! THANK YOU!!!

    Reply
  2. Found you through an awesome group on Divi. I don't have a question yet but I am sure it won't be long before I do. Just wanted to say, I am totally impressed with how you have seamlessly helped so many Divi users. The community of developers and designers is nothing I have come across before and it humbles me.

    Reply
    • Thanks Tracey! Yeah, they are a good bunch over on the Divi group. I look forward to your questions! I've been busy with a few other things recently so I've developed a bit of a backlog (okay, a really big backlog) of questions, but hopefully I'll be getting through them in time to help you out!

      Reply
  3. Hi Dan
    Please can you help me? In my Divi theme, I have successfully made the full width slider a smaller height using your code. The problem I now have is that the text in the right-hand part of the slider is now either too far down on the bottom of the header, or is sometimes non-existent. The CSS code I have at the moment is as follows using a class called homeslider:

    /* Set the slider height */
    .homeslider .et_pb_slider, .et_pb_slider .et_pb_container {
    height: 300px;
    }
    .homeslider .et_pb_slider, .et_pb_slider .et_pb_slide {
    max-height: 300px;
    }
    .homeslider .et_pb_slider .et_pb_slide_description {
    position: relative;
    top: 0%;
    padding-top: 0 !important;
    padding-bottom:0 !important;
    height:auto !important;
    }
    Thanks for your help.
    Pete

    Reply
    • Hey Pete,

      Try this.

      @media only screen and (min-width:981px) {
      /* Set the slider height */
      .homeslider, .homeslider .et_pb_container {
      height: 300px;
      }
      .homeslider, .homeslider .et_pb_slide {
      max-height: 300px;
      }
      .homeslider .et_pb_slide_description {
      position: relative;
      top: 0%;
      padding-top: 0 !important;
      padding-bottom:0 !important;
      height:auto !important;
      }
      }

      I've changed where the .homeslider references are placed. I've also updated the code to the latest version which fixes a responsiveness issue with mobiles.

      Reply
  4. Hi Dan–

    Just bought Divi and the Divi Children plugin (to make a child theme). I know no code but saw your post about placing a full width image above the header. Just to be clear, I paste the entire snippet below exactly as is (except with my substituted image url) in the E Panel>General settings>Custom CSS box? Or someplace else? I tried this but got no result. I'm sure I'm missing something simple…
    Thanks!

    // load jQuery
    wp_enqueue_script('jquery');

    // hook the widget area into the footer, then move into place in the header
    function myprefix_add_header_img() { ?>

    jQuery("#myprefix-page-start-img").prependTo(jQuery("body"));

    /* Change header to float correctly wherever it is in the page */
    @media only screen and ( min-width:981px ) {
    #main-header { position:relative !important; top:0px !important; }
    #main-header.et-fixed-header { position:fixed !important; margin-bottom:0px; top:0px !important; }
    body.admin-bar #main-header.et-fixed-header { top:32px !important; }
    #page-container { overflow:hidden; }
    }

    /* Style the image for full screen layouts */
    @media only screen and ( min-width:981px ) {
    #myprefix-page-start-img { margin-bottom:-80px; width:100%;}
    }

    /* Style the image for box layout */
    @media only screen and (min-width: 1200px) {
    .et_boxed_layout #myprefix-page-start-img {
    width:1200px;
    -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    display:block !important;
    margin-left:auto;
    margin-right:auto;
    }
    }

    /* Hide the image on smaller screens */
    @media only screen and ( max-width:980px ) {
    #myprefix-page-start-img { display:none; }
    }

    <?php
    }
    add_action('wp_head', 'myprefix_css');

    Reply
    • Hey David, this code is PHP code and needs to be added to the functions.php file, not in the Custom CSS box. The following post explains how to add PHP code to Divi.

      Hope that helps!

      Reply
  5. Hey Dan are you available or hire on a freelance basis? I couldn't find a more straight-forward way to contact you, sorry. I have a Divi website and I need a few minor tweaks.

    Reply
    • Hi Scott, I just dropped you an email regarding this. The short answer is unfortunately not (contractual reasons), but I'm happy to answer your questions for free here if you're happy to put up with the long wait (I've been receiving a very high volume of questions recently which will take me quite a while to work through).

      Thanks for the kind offer!
      Dan

      Reply
  6. Hi Dan,

    I'm trying to add a full-width image above the header but when I go open to the Divi functions.php file its saying:

    Fatal error: Out of memory (allocated 30932992) (tried to allocate 262144 bytes) in /homepages/24/d538610013/htdocs/Play By Play Site/wp-admin/includes/misc.php on line 318

    Any ideas?

    Also, do I add the image URL and stick all that code in or do i need to pick elements out?

    Cheers, James

    Reply
    • Hey James, check out my answer in the comments of this post for how to deal with the error. Yes, add the image URL and stick all the code in – it looks like a lot of code, but it's all needed to get the effect.

      Reply
  7. Hi Dan, great resource!
    I had a question about "Replace the Header Links with a Widget Area".

    I am looking to add social media icons (specifically Monarch) to the newly created Header widget.
    I have added your code to function.php child, and the menu does get removed – but no matter what I add to the Header widget, nothing appears. Thanks again for this great resource.

    Reply
    • Hey Rich, sorry it wasn't working. The WordPress editor had stripped out the critical bit of PHP code that actually placed the widget area in the page. I've fixed it now. You can see the updated code here.

      Reply
  8. Dan,

    Thank you for all the work you have put into answering everyone's questions. I am truly impressed. I searched through the questions and your replies but couldn't find anything that appeared to be related to my question. I am trying to figure out how I could adjust the appearance (color, font, rounded edges) of the Pricing Tables module within the theme. I am happy to explore but am not even sure where I would start for something like that.

    Any advice you can give would be greatly appreciated. I did see that on the first page of the module it gives the option of picking a CSS class or ID. Do I need to create a CSS ID or Class to adjust those?

    Reply
    • Hi Luc, Geno has written a great post on customizing the divi pricing table. I think it should tell you everything you need to know (including what to do with the CSS class), but if there's anything you are still unclear on let me know!

      Reply
  9. Hi, When I remove the header, it works on my desktop, but on mobile it shows up. Any ideas?
    Thanks
    #main-header { display:none; }
    #page-container { padding-top:0px !important }

    Reply
    • Sorry, it doesn't show up on mobile.

      Reply
      • OK, now I am getting this confusing.
        When I remove it with the code, when I view it on my desktop the header is gone, when I view it on my mobile the header shows up. Hope that makes sense. Sorry.

        Reply
        • Hey Greg, it sounds like it might be caching problem (where your mobile phone is showing an old version of the page rather than reloading it from the server). As you wrote to me quite a while ago, I'm guessing the issue will probably have cleared itself up by now. But if not, try this: 1) clear the caches in any performance plugins you have installed in your WordPress, 2) clear your mobile browser's history, 3) reload the page on your mobile. If the header is still there, send me a link to the site and I'll take a look.

          Reply
  10. Thank you for such a great resource! But I do have a question… I resized the Divi slider to 425

    .et_pb_slider { height: 425px; }

    actually used .slider1 { height: 425px; } because I have other sliders on the site.

    But now the photo, text and button inside the slider contents are not vertically centered! How can I have it center the contents of the slide. I had hoped that making it shorter would adjust everything else. All this did was cut off the bottom of the slider background. The content still shows full size and now its not centered. :(

    Reply
    • Hi John. Sorry about that. I've updated the divi slider height code above to re-position the slide content, slide image and background image to match the new slider height. Hope that helps – but let me know if anything still looks wrong.

      Reply
  11. i can't reposition the image of inside the slider. it was cropped my client want the slider make smaller. i already edit the height but the image and the text was cropped. what can i do. please help me…

    Reply
    • Hi zyl. I've updated the slider height code to make the image and text fit the slider. Hope that helps!

      Reply
  12. Thank you Dan – you are very generous with your time and knowledge :)

    Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.

We may earn a commission when you visit links on our website.