This post covers some of the ways you can increase, reduce or eliminate the space around Divi Builder modules, rows and sections to get the right amount of white space for your design.Adjusting the Vertical Gap Between Divi Builder Modules If you have modules stacked...
Features
Disable Divi Slider Image "Slide In" Effect
When you first view a Divi Theme slider, the slider image will "slide in" from the left. If you don't want this slide in effect on your slider images, you can disable it with the following CSS: .et_pb_slide_image, .et_pb_slide:first-child .et_pb_slide_image img.active...
Change the Divi Header Font Size
To change the Divi Theme's header menu font size, you can simply use the following CSS: #top-menu a { font-size: 16px; } Just change the 16px to your choice of font-size. It will also apply to the sub-menus.
Center the Divi Footer Credit Links
Centering the footer credit links on your Divi-powered website creates a more balanced and visually appealing layout, enhancing the overall professionalism of your site. This adjustment can help unify your design and ensure important site information or branding in...
Change Divi Filterable Portfolio Grid Thumbnail Sizes
The Divi Theme’s filterable portfolio module gives you the option of displaying your projects as a series of thumbnails (grid view). To adjust the size and spacing of the images in your thumbnail grid, you can use the following CSS: /* Set the image widths */...
Right Align the Divi Top Header Contact Info Icons
The Divi Theme allows you to set a phone number and email address to be shown at the top of the header, as well as a number of social media icons. To right align these top header text and icons, you can use the following CSS: @media only screen and (min-width: 768px)...
Making Simple Lightbox Work with Divi
The Simple Lightbox plugin lets you add a "lightbox" effect to your blog images. Click on an image in one of your posts and, if it's linked to the (larger) original image will open in a slick semi-transparent overlay to the page, rather than in an otherwise bleak and...
Changing the Divi Submenu Link Hover Color
On the Divi theme, when you open a drop-down menu and hover over a particular menu item, the item's background color is changed to highlight the item. If you want to change this color, or get rid of the hover effect (by setting its color to the same as the actual...
Change Divi Image Portfolio Grid Thumbnail Sizes
The Divi Theme’s portfolio module gives you the option of displaying your projects as a series of thumbnails (grid view). To adjust the size and spacing of the images in your thumbnail grid, you can use the following CSS:Related Post: Adding CSS to the Divi Theme It...
Change the Height of the Divi Header
To change the height of the Divi Theme header, you can do so by adding CSS to Divi, like so:A couple of notes: This sets the minimum height rather than the absolute height to allow the header to grow if you add more content too it. The first min-height sets the...