Divi Hacks PluginExamples & Documentation
Create custom row layouts, change column structure on mobile devices, and modify column widths.
Force Footer to Bottom
This hack stops the footer from floating in the middle of pages that have very little or no content.
Stick any menu to the bottom of the header or top of the window when it scrolls to that point.
The documentation menu above is an example.
Put any section, row, or module inside a lightbox or popup. Go ahead, click me to try it out!
Auto-Hide Admin Bar
Hide the admin bar while on the front-end and activating it by hovering over the top 10px of the window.
User Meta Shortcodes
Easily display the first, last, full, and display names, email, and avatar of the currently logged in user.
Coming Soon/Maintenance Mode
Create a custom coming soon/maintenance mode page to show to non-logged-in visitors, instead of the rest of the website.
Give an entire row, column, or module a parallax effect. Works on mobile too!
Wider Visual Builder Popup
This hack makes it easier to browse the modules in the visual builder by making the add module popup wider.
Custom 404 Page
Display a custom page when visitors navigate to a page that doesn't exist and get the 404 error page.
Custom Login Page & Default Login Customizations
Customize the default WordPress login page, or create your own custom page.
Custom Tab Alignment
Align the tabs to the top, bottom, left, or right side of the tab content. Plus a bunch of other tab design customizations.
Exit Intent Popups
Hide/Show Elements based on Date & Time
Hide and show elements based on the time and /or date.
Make any element closable and optionally keep the element closed until the user’s browser session ends.
Dim the Visual Builder Controls
This hack makes allows you to dim the Visual Builder control buttons so you can view the full screen easier
Show the Admin Bar & Menu Inside the Theme Builder
This hack allows you to see the Admin Bar and Side Menu when you hover your mouse over the top and left edge of the window.
This hack removes a lot of the default styles that go with the menu module, giving you more control over how the menu looks.
This hack allows you to add custom transform and filter properties on background images when you hover over that element using CSS variables.
Here's an example of a custom revealed CTA module
Set a group of elements to the same height, regardless of how much or how little content there is inside.
Better Password-Protected Page Login Screen
Adds some custom styling to improve the password form for password-protected post types.
Open Social Links in New Tab
This hack opens social media links in the header and footer, and the footer credit links in a new tab.
Full Height Element
Make any section, row, or element the full height of the browser window. You can also subtract the height of the headers and footer for more customization.
Give your elements shapes to add perspective and make your content stand out.
Over 1,000 Font Awesome Icons
Swap out the default Divi icons by adding the font awesome class names to the module.
Stick the main footer or a custom footer section to the bottom of window and reveal it when you scroll to the bottom of the page.
Device Specific Alignment
Customize how rows, modules, and text are aligned on different devices.
Space Between Classes
This little hack add space between the classes in the settings panel to help you read them easier.
Custom Dividers on any Element
Add section dividers to any row, column, or module, plus 10 additional custom dividers.
Edit in Visual Builder
Add a link to your WordPress pages page to open and edit the page using the front-end Visual Builder.
Replace RSS Icon with Instagram Icon
Who uses that RSS icon? This replaces it with the Instagram icon.
Give any module, column, row, or section one of 41 different Instagram filters.
Instagram Icon Gradient
Give your Instagram Icon in the Social Media Follow Module the cool Instagram gradient.
Add cool animations to your elements when the page loads, and also when you hover over the element.
Hide/Show Content if Logged In/Out
Easily hide or show content to people who are logged in or out.
Divi Theme Options Tweaks
Improve your experience when adding CSS to the Custom CSS box in the Divi Theme Options.
Write Custom CSS for specific devices (responsive css) without the need for media queries.
Mobile-Friendly Backend Builder
Edit your website on the go with a fully responsive backend builder.
Visual Builder Module Hover Helper
Edit your content in visual builder's hover mode without all the grey boxes getting in the way of your text.
Add Quick Links to Admin Bar
Edit your website on your mobile device easier with quick links to the visual builder and Divi theme options page.
Font Awesome Icons in Menus
Enable over 1,000 icons from Font Awesome in the primary, secondary, and footer menus.
Duplicate Post types
Easily duplicate a post, page, or Divi layout from the admin dashboard.
Hide Headers, Footer, & Logo on a Page-by-Page Basis
Easily hide the primary menu bar, the secondary menu bar, the logo, and/or the footer on a page-by-page basis by adding simple custom fields to the page or post.
We've enabled SVG support so your graphics and logo can look super crisp no matter what size!
Extended Theme Customizer
We've added tons of new settings to the default Divi Theme Customizer to make customizing the header and footer a whole lot easier!