To make Divi Theme's slider button links open in a new tab, you can add the following into the footer.php file (of the theme itself, or a child theme): <script> jQuery(function($){ $('.et_pb_more_button').attr('target', '_blank'); }); </script> This is...
Divi
Greyscale Google Maps in the Divi Map Module
The Divi Theme comes with a map module that makes it easy to embed Google Maps into your webpages. Here's a quick cross-browser CSS snippet for displaying the map in greyscale rather than the standard Google Map colors:
Changing the Divi Logo Height
The Divi theme lets you put your site logo in the header. As you scroll down, the header shrinks to take up less space, and the logo shrinks with it. Here's how to change the height of both the normal and shrunken state of the logo. How to Set the Divi Logo Height...
Add Dividing Line Between Divi Sidebar Widgets
To add a dividing line between the individual widgets in the Divi Theme's sidebar, we can add the following 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;...
Changing the Divi Post Title Style
To change the style of the post titles in the Divi Theme, 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,...
Removing the Divi Header Bottom Border
Eliminating the bottom border bar from the Divi standard header creates a cleaner and more modern look on your website. This change can help your header blend seamlessly with the rest of the page, offering a sleeker appearance and improved visual consistency. In this...
Prevent Distortion on Divi Gallery Images
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:...
Put Divi Slide Images on the Right
Divi includes a slider module (and fullwidth slider module) which lets you display a slideshow of slides, each containing a description and (optionally) an image. By default the image is on the left and the description on the right. If you'd like to swap the position...
Make Divi Featured Images Full-Width
By default, the Divi Theme shows featured images at the top of posts, just after the post title. Here's how to have the featured images fill the full content width, above the post title (and sidebar). First, we can put the image into position with the following...
Creating and Formatting "Unordered" Bullet Lists in Divi
Here are some tips for creating and formatting bullet lists (aka "unordered lists") within the Divi theme.Create a Bullet List To create a bullet list (or "unordered" list) in Divi, first place the items you want to include in the list in a text module (or other...