Divi Hacks Plugin
Examples & DocumentationRow Layouts
Create custom row layouts, change column structure on mobile devices, and modify column widths.
Center Alignment
Vertically center content inside sections, rows, and modules
Mobile Menus
Jazz up the boring mobile menu with a slide-in or fullscreen mobile menu.
Force Footer to Bottom
This hack stops the footer from floating in the middle of pages that have very little or no content.
Sticky Element
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.
Custom Lightboxes
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.
Mobile Parallax
Enable the background parallax effect on mobile devices.
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.
Parallax Elements
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.
Closeable Elements
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.
Custom Menu
This hack removes a lot of the default styles that go with the menu module, giving you more control over how the menu looks.
Background Effects
This hack allows you to add custom transform and filter properties on background images when you hover over that element using CSS variables.
Custom SVGs
Create Custom SVG shapes and add them easily inside your pages.
ToolTips
Custom Scrollbars
Custom Reveals
WOAH!!
Here's an example of a custom revealed CTA module
Equal-Height Modules
Set a group of elements to the same height, regardless of how much or how little content there is inside.
Custom Tables
Customize tables with CSS variables and automatic responsiveness.
Better Password-Protected Page Login Screen
Adds some custom styling to improve the password form for password-protected post types.
Custom Footer
Use a Divi Library global section as a custom footer
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.
Mobile Reverse
Reverse the order of columns in a row on both tablets and phones.
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.
Text Styles
Give any text in a button or text module some fancy, 3D styles.
Module Shapes
Give your elements shapes to add perspective and make your content stand out.
Image Shapes
Turn your images into shapes.
Mobile Headers
Transform the default header on mobile devices.
Over 1,000 Font Awesome Icons
Swap out the default Divi icons by adding the font awesome class names to the module.
White Label
Customize how the word "hacks" appears on the admin backend
Reveal Footer
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.
Turn the blurb into a perfect circle.
Turn the blurb into a perfect circle.
This is an example of using the testimonial module as an event box. learn more
Instagram Filters
Give any module, column, row, or section one of 41 different Instagram filters.
Elegant Sidebar Shadow
Give the sidebar an elegant shadow to the inside of the page.
Instagram Icon Gradient
Give your Instagram Icon in the Social Media Follow Module the cool Instagram gradient.
Animations
Add cool animations to your elements when the page loads, and also when you hover over the element.
Menu Animations
Add some hover animations to your default menus.
Blurb Effects
Create cool animated blurbs with hover effects.
Blog Styles
Transform a boring full-width blog module layout into 3 different layouts.
Hide/Show Content if Logged In/Out
Easily hide or show content to people who are logged in or out.
Element Shadows
Add shadows to elements for a more 3D, realistic style.
Divi Theme Options Tweaks
Improve your experience when adding CSS to the Custom CSS box in the Divi Theme Options.
Modules Inside Modules
Easily insert modules inside other modules by using a shortcode.
Collapse Mobile Submenus
Collapse your submenus on mobile devices
Device-Specific Classes
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.
Section Divider Shadows
Add elegant shadows to your section dividers
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.
Columns in Dropdowns
Enable columns in the primary and secondary menu dropdowns.
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.
SVG Uploads
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!
Here's an example of a Lightbox Popup
