Divi Slider Look: Use Navigation Dots as Text Links
Sliders are known to not be great for conversion so I like to find other uses for them because visuals are so important for so many users. The demo site shows a coming soon example as well as an alternate gallery look, both using the navigation dots as text links to...
Divi Default Header Dropdown Styling
This code styles dropdown menus on desktop. I'm using the slide effect on the dropdown (in customizer settings) but instead of having it slide in left to right I'm changing it to slide up from the bottom. A bit of space is also added between the header and the...
Move Additional Information Below Billing Details on WooCommerce Checkout Page
This code makes the checkout form one-column instead of two and moves the Additional Information section below the Billing Details.NotesThe code should work on any WordPress site, not just those using the Divi theme, but adjustments might be needed.Alternatively you...
Divi Blurb Look: Sliding Cards with Text on Hover
This code turns Divi blurbs into slider style cards with blurb text showing on hover.NotesDownload, unzip, and import the .json file into a new page, not the Divi library.Most of the styling (text color, font weight, etc) is in the module settings.CSS Code /***...
Divi Navigation Look: Event / Announcement Header (Theme Builder)
Free Divi fullwidth header layout with countdown timer, business info, social media links, and main button. For use with events countdown or coming soon announcement, or switch out modules to customize the layout further. On the demo site I'm using WooCommerce so I've...
Divi Gallery Look: First Image Fullwidth with Thumbnail Row Below
This is a customized look using the Divi gallery module. It makes the first image fullwidth and puts the remaining images in a row of thumbnails below it. A child theme is required to change the image sizes Divi uses for the gallery items. If you don't do that then...
Make Divi WooCommerce Pages Fullwidth and Remove Sidebar Line
Remove the grey line between the main content and sidebar on WooCommerce single product, cart, and checkout pages and also make the pages fullwidth.NotesAlternatively you could create templates for all WooCommerce pages using Divi's theme builder, like a single...
Divi Video Background Section for Google Reviews
This is a very simple section with video background using ET icons for Google reviews. HTML for icons is included.NotesDownload, unzip, and import the .json file into a new page, not the Divi library.If you want to use the section for something else and replace stars...
Customize WooCommerce Cart, Checkout, and Account Pages
CSS code for changing areas of your WooCommerce cart, checkout, and account pages to match the rest of your site. Some elements that are changed: background color of forms form fields placeholder text form table borders payment boxes on checkout coupon box dropdowns...
Remove Divi Hover Icons from WooCommerce Buttons
July 2018
Gravity Forms Plugin Customization with CSS
If you have a heavily designed website and are using Gravity Forms* chances are a default form will stand out in a negative way. Some CSS can get your form matching the rest of your site so everything looks more cohesive and consistent. * this is an affiliate...
Center Align Divi Fullwidth Header Buttons on Mobile
When using the centered fullwidth header module the the alignment of the buttons is off on mobile. This code will fix that.NotesThis post/code is for mobile only. You may need to change the 479px screen size based on your button text.CSS Code /*** FULLWIDTH...
Divi Coming Soon Layout with Background Slider and Email Signup
Free coming soon page layout with fullscreen background slider, social media follow, and email signup/optin.NotesDownload, unzip, and import the .json file into a new page, not the Divi library. Most of the styling (background colors, social media colors, etc) is in...