Divi Hacks Plugin

Examples & Documentation

Row Layouts

Create custom row layouts, change column structure on mobile devices, and modify column widths.

learn more

Center Alignment

Vertically center content inside sections, rows, and modules

learn more

Mobile Menus

Jazz up the boring mobile menu with a slide-in or fullscreen mobile menu.

learn more

Force Footer to Bottom

This hack stops the footer from floating in the middle of pages that have very little or no content.

learn more

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.

learn more

Custom Lightboxes

Put any section, row, or module inside a lightbox or popup. Go ahead, click me to try it out!

learn more

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.

learn more

Mobile Parallax

Enable the background parallax effect on mobile devices.

learn more

User Meta Shortcodes

Easily display the first, last, full, and display names, email, and avatar of the currently logged in user.

learn more

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.

learn more

Parallax Elements

Give an entire row, column, or module a parallax effect. Works on mobile too!

learn more

Wider Visual Builder Popup

This hack makes it easier to browse the modules in the visual builder by making the add module popup wider.

learn more

Custom 404 Page

Display a custom page when visitors navigate to a page that doesn't exist and get the 404 error page.

learn more

Custom Login Page & Default Login Customizations

Customize the default WordPress login page, or create your own custom page.

learn more

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.

learn more

Exit Intent Popups

Choose an element from the Divi Library and display it in a popup when the user’s mouse leaves the document window.

learn more

Hide/Show Elements based on Date & Time

Hide and show elements based on the time and /or date.

learn more

Closeable Elements

Make any element closable and optionally keep the element closed until the user’s browser session ends.

learn more

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

learn more

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.

learn more

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.

learn more

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.

learn more

Custom SVGs

Create Custom SVG shapes and add them easily inside your pages.

learn more

ToolTips

Create a message which appears when you hover over or click on an icon, image, link, or other element.

learn more

Custom Scrollbars

Customize the look of the scrollbars in webkit-enabled browsers

learn more

Custom Reveals

Create custom reveals to reveal entire sections, rows, columns, or modules. Use this feature to create custom tabs, toggles, or accordions.

learn more

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.

learn more

Custom Tables

Customize tables with CSS variables and automatic responsiveness.

learn more

Better Password-Protected Page Login Screen

Adds some custom styling to improve the password form for password-protected post types.

learn more

Custom Footer

Use a Divi Library global section as a custom footer

learn more

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.

learn more

Mobile Reverse

Reverse the order of columns in a row on both tablets and phones.

learn more

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.

learn more

Parallax Overlays

Enable a background overlay color and gradient on parallaxed background images and add additional classes to reflect and rotate the gradient.

learn more

Blur Backgrounds

Make your content stand out by blurring the background images.

learn more

Text Styles

Give any text in a button or text module some fancy, 3D styles.

learn more

Module Shapes

Give your elements shapes to add perspective and make your content stand out.

learn more

Image Shapes

Turn your images into shapes.

learn more

Mobile Headers

Transform the default header on mobile devices.

learn more

Over 1,000 Font Awesome Icons

Swap out the default Divi icons by adding the font awesome class names to the module.

learn more

White Label

Customize how the word "hacks" appears on the admin backend

learn more

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.

learn more

Device Specific Alignment

Customize how rows, modules, and text are aligned on different devices.

learn more

Space Between Classes

This little hack add space between the classes in the settings panel to help you read them easier.

learn more

Custom Dividers on any Element

Add section dividers to any row, column, or module, plus 10 additional custom dividers.

learn more

Edit in Visual Builder

Add a link to your WordPress pages page to open and edit the page using the front-end Visual Builder.

learn more

Replace RSS Icon with Instagram Icon

Who uses that RSS icon? This replaces it with the Instagram icon.

learn more

Turn the blurb into a perfect circle.

Turn the blurb into a perfect circle.

learn more

Heading Banner

Give the blurb module a cool banner background for the blurb title.

learn more

This is an example of using the testimonial module as an event box. learn more

Presented by Event Facilitator or Subtitle

27 JUN, Event Box

Instagram Filters

Give any module, column, row, or section one of 41 different Instagram filters.

learn more

Elegant Sidebar Shadow

Give the sidebar an elegant shadow to the inside of the page.

learn more

Instagram Icon Gradient

Give your Instagram Icon in the Social Media Follow Module the cool Instagram gradient.

learn more

Animations

Add cool animations to your elements when the page loads, and also when you hover over the element.

learn more

Menu Animations

Add some hover animations to your default menus.

learn more

Blurb Effects

Create cool animated blurbs with hover effects.

learn more

Blog Styles

Transform a boring full-width blog module layout into 3 different layouts.

learn more

Hide/Show Content if Logged In/Out

Easily hide or show content to people who are logged in or out.

learn more

Element Shadows

Add shadows to elements for a more 3D, realistic style.

learn more

Divi Theme Options Tweaks

Improve your experience when adding CSS to the Custom CSS box in the Divi Theme Options.

learn more

Modules Inside Modules

Easily insert modules inside other modules by using a shortcode.

learn more

Collapse Mobile Submenus

Collapse your submenus on mobile devices

learn more

Device-Specific Classes

Write Custom CSS for specific devices (responsive css) without the need for media queries.

learn more

Mobile-Friendly Backend Builder

Edit your website on the go with a fully responsive backend builder.

learn more

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.

learn more

Section Divider Shadows

Add elegant shadows to your section dividers

learn more

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.

learn more

Columns in Dropdowns

Enable columns in the primary and secondary menu dropdowns.

learn more

Font Awesome Icons in Menus

Enable over 1,000 icons from Font Awesome in the primary, secondary, and footer menus.

learn more

Duplicate Post types

Easily duplicate a post, page, or Divi layout from the admin dashboard.

learn more

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.

learn more

SVG Uploads

We've enabled SVG support so your graphics and logo can look super crisp no matter what size!

learn more

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!

learn more

Here's an Example of a Custom Tooltip