If you'd like to add a semi-transparent background to the Divi Theme header bar, 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;...
Divi
Vertically Center the Divi Header Links
If you change the height of the logo in the Divi Theme you may find that the links to the right of the header bar are no longer nicely vertically centered in the header bar. This happens because Divi uses a fixed amount of padding to move the links into the correct...
Setting the Divi Theme Sidebar Background Color
The Divi Theme has a flexible sidebar which can be positioned on either the left or right of the page (or hidden altogether). Unfortunately, the way that the sidebar is structured actually makes it very difficult to set the background color with margins, etc, that...
Removing the Divi Theme Dividing Line
By default the Divi Theme displays a dividing line between the main content and the sidebar. It's possible to remove this dividing line using CSS, like so: .container:before { background-color:transparent !important; } .et_pb_widget_area_right { border-left:0...
Adjusting the Divi Page-Container Padding-Top
If you're doing customization work on the Divi Theme's header, you may find you need to adjust the top padding of the page-container div element, in order to move the rest of the page content up or down. It's relatively easy to adjust this padding, but it is not...
Add a Full-Width Image Above the Divi Header
One feature missing from the Divi Theme which can be found in some other themes is the ability to have a full-width image displayed right at the top of the page, above the main header bar. We can add such a "banner" image to Divi in the several ways: Adding an Image...
Add Widget Area Below the Divi Header Navigation Links
Several people have asked me whether it's possible to add a widget area to the right hand-side of the Divi Theme header bar. Here's the code to do so. It adds a widget area just below the Divi header navigation links (if you want to replace the Divi header navigation...
Change Font Size in Single Divi Text Module
Brent asks "Is it possible to change the font size in only one text module with CSS in Divi?" It is indeed possible in the Divi Theme to change the font size on a single text module. Here are two ways to do it. Changing the Font Size in the Text Module Settings The...
Adding CSS to the Divi Theme
Many of my Divi Theme tips and tricks will involve adding some CSS to your theme. Here is how to add your own CSS to the Divi Theme. Adding CSS to Divi via the Theme Options The easiest, and perhaps best way to add CSS to the Divi Theme is via the Custom CSS box in...
Hide the Standard Divi Theme Header
There are scenarios where you might want to remove the default header provided by the Divi theme—such as designing a custom header, improving focus on page content, or achieving a cleaner page layout. Hiding the standard Divi header allows for greater control over the...