A "sticky" widget area lets you add widgets to your theme and have theme remain on display while the user scrolls down the page. Here's how to add a "sticky" sidebar widget area to the Divi Theme. What is a "Sticky" Widget Area? A sticky widget area gives you a place...
Divi
CSS Media Queries for the Divi Theme
The Divi Theme uses a responsive design, meaning it adjusts its layout to look good on any size of screen. This is achieved using CSS styles targeted at particular screen sizes using a technique called "media queries". If we're looking to make changes to Divi using...
Adding a Video Background to the Divi Theme
Divi has a nice option to add a video background to page sections. This lets you show videos instead of simple images behind your content. This post explains how to add a video background section to your Divi layouts. Step 1: Create a New Page Hopefully you know how...
Fixing the Team Member Description Bug
There is a minor bug in the Divi Theme which can occur when you use team member modules within a specialty section. The Divi theme incorrectly applies a 350px margin to the team member descriptions, meaning that the team member descriptions appear under the wrong...
Adding a Semi-Transparent Background to the Divi Header
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;...
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...