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.

 

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.