Customizing the Divi Wordpress Theme

Written by Dan Mossop

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.

Enhance Your Divi Theme Customizations

Unlock the full potential of your Divi site with Divi Booster. Our plugin offers hundreds of features to make customizing the Divi theme easier and more powerful than ever. Perfect for tweaking every detail of your site’s appearance and functionality.

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

160 Comments

  1. Hi Dan, I'm thinking about buying Divi Booster. Does it include a way to have a menu anywhere on the site, instead of a fullwidth section? Like on a smaller regular section module.

    Also, are there tools in the plugin that makes content spacing, adjustment, resizing, etc, easier across desktop, tablet, and mobile? The Divi theme gives a few adjustments for responsive design, but I'm finding it really limited since I don't have coding experience. Thank you for your time.

    Reply
    • Hey Nathan, thanks for getting in touch.

      Divi Booster doesn't currently include a way to add a menu in a regular section, but I believe the Divi Menu Module (Standard Width) plugin allows you to do this.

      Divi actually allows most of its module settings to be set to differently on desktop, mobile and tablet, but it's not particularly obvious how to do this, so perhaps you haven't found it yet? If you hover over any setting within the Divi section, row or module settings you should see some icons appear next to the setting name. For many settings, there'll be a little square "phone" icon. Click this and some tabs will appear allowing you to set different values on desktop, mobile and tablet.

      Divi Booster aims to fill some of the gaps where Divi doesn't allow you to control certain things. I'd suggest checking for the "phone" icon on the settings you're interested in first, and if the settings you're interested in don't have it, let me know and I'll do my best to help out. Thanks!

      Reply
  2. Hello!
    Great and helpful website!

    I would like to put the title, subtitle, and text for a fullwidth header to the right. I don't just wanted aligned to the right, but I want it to be almost like a column. My background image has it's main focus on the left and I would like to keep that with no text in front.

    Basically, I want all my text to look like it would look if I added an image to the left with Divi.

    I hope this makes sense.

    Thanks!
    Vero

    Reply
    • Hi Vero, that all makes sense. While it would be possible to do it via CSS, there's an easier way. If you just create a transparent image (i.e. an image with nothing but a transparent background color) and use that as the slide image, it will push the text to the right and let your background image be seen.

      Reply
  3. I am new to the wordpress. Where do I add the above Changing the sidebar width CSS code? Is there a specific file that I need to edit it?

    Reply
  4. Hello, how do I shorten the white part on the logo? Look at my site

    Reply
    • Hi Mario,

      Do you mean you want less space between the logo and the top of the page?

      I notice you have this in your style.css file:

      /* modifica */
      #main-header {
      padding: 50px 0 0;
      z-index: 1;
      }

      It is setting a top padding of 50px on the main header, which is pushing the logo down. The space should be reduced if you remove padding line, or override it with the following:

      #main-header { padding-top: 0px !important; }

      Reply
  5. Thanks for putting this together. I used several customizations listed. I was wondering how to change the font color, height, etc. of the title of the sidebar widgets. Thank you.

    Reply
    • Hi Lisa, you can easily do so with a bit of CSS such as this:

      .widgettitle { 
          color: red; 
          font-size: 24px; 
      }
      

      This will make the widget titles bigger and red.

      Hopefully that answers your question, but let me know if there is a particular effect you are trying to achieve, etc.

      Reply
  6. Hello,

    quick question, is there a way to remove the little phone icon from the secondary navigation bar (not needed in this case) but keep the social icons and email?

    Thank You

    Reply
  7. Hi !

    how to change the size of thumbnail on fullwidth portfolio ?
    I mean to have 3 column instead of 4 and to change the size
    of thumbnail from square to rectangle ?

    Thanks

    Reply
  8. Hi Dan

    On the suggestion that you gave above:

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

    I want to add a rule for the first row on a specific page to remove the padding so that a masterslider shortcode I am using in the first text box in the first row – single column loses the padding so that the background video in the Masterslider butts up to the menu – at the moment there is a gap of some 20 or more pixels.

    I can add this to the CSS to target the gap successfully

    .post-3649
    .et_pb_row {
    padding: 0px 0 0;
    }

    but that of course applies to all row padding for all rows in the page and cannot use since it looks wrong on subsequent rows.

    Your example above is specific to the CSS for the text within the module – I am targeting the first row padding only and not the contents of the text module.

    Any suggestions Dan or anyone?

    I am a paying customer of yours by the way – your plugin is awesome!

    Cliff

    Reply
    • Hey Cliff, either of these should work:

      .post-3649 .et_pb_row:first-child { padding:0; }
      .post-3649 .et_pb_row:nth-child(1) { padding:0; }
      

      The first is neatest, but the second one is useful to know in case you ever want to apply rules to other rows, etc.

      Reply
      • Perfect :-)

        Cheers Dan!

        I also added
        .post-3649 .et_pb_section:first-child { padding-top: 0px !important; }

        to lose the other padding that Divi adds above the content. I had put that in also against all page content – targeting modules like this increases the flexibility of this theme even further.

        Thanks for the full response since I am going to need to use the second method also in other pages.

        Thanks again and keep up the excellent work!

        Reply
        • You're welcome and thanks for the update, Cliff :)

          Reply
  9. Dan,

    You are awesome. I am a semi-newb, css illiterate mostly, but you have some great stuff here. just saying thanks, you've already answered all my questions! Totally like to send you a Manly Box from ManlyBoxes.com as a token of appreciation! Email me!

    Thanks,

    Steve

    Reply
    • Ha ha! Thanks Steve – the Manly Boxes look amazing!

      I've sent you an email :)

      Reply
  10. Dan… this is awesome that you take the time to help people. Really great.

    My question may be way beyond the scope of your help, but I'm curious; Do you know a way to "Turn On" the DIVI Page Builder for Posts?

    Reply
  11. Thank You very much for part "Add a Full-Width image Above the Header"! :-)

    Reply
  12. What's the best way to keep the fixed header, but make it so it doesn't shrink down in size when you scroll the page? I'd like to keep the logo and menu the size it is when you're at the top of the page…even after scrolling. CSS mod?

    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.