With web design constantly evolving, this plugin aims to add responsive, engaging elements to your site, offering a customizable masonry gallery that integrates well with Divi.

The purpose of this review is to give you a straight-up, detailed look at the Divi Masonry Gallery plugin.

I’ll dig into how it works, its design flexibility, and what it really brings to the table for Divi users.

Given its advanced gallery features, It’s important to compare how it performs against the typical Divi image modules and determine if it’s a valuable tool for your web design toolkit.

Having designed numerous websites using the Divi theme, I have extensive experience with a range of Divi plugins and similar gallery tools.

This experience has sharpened my ability to spot what works and what doesn’t in web design tools. I’ve seen what different gallery plugins can do, along with their ups and downs.

This background will shape my review of the Divi Masonry Gallery, aiming to give you practical, well-grounded insights.

Join me as I explore the Divi Masonry Gallery, from setup to its practical use on a live site.

Detailed Overview of the Divi Masonry Gallery Plugin

The Divi Masonry Plugin is created by Destaca Imagen and with this plugin, you can easily create beautiful masonry galleries. This is a very popular plugin with over 4.500 sales on the Elegant Themes marketplace.

In this section, I’ll guide you through the installation and setup process for this plugin. I’ll also delve into creating a masonry gallery and explore some of the advanced features available.

See the pricing section for a 10% discount coupon for this plugin.

How to Install the Divi Masonry Gallery Plugin

From your WordPress dashboard navigate to Plugins and click on Add New. From here click on Choose File and locate the Divi Masonry plugin on your computer, then click on Install Now.

After the installation is completed, click on the Activate Plugin button to activate the plugin.

From here navigate to Divi Masonry Gallery and you can place the license code in the field and then click on the Activate button.

To find the license code, head over to the My Account page on their website.

Go to Orders and click on the View button.

Under your product license codes, you can find and copy the license code and paste it into the license code field of the plugin.

The plugin is now installed and activated, in the next chapter, I will be going to create a masonry gallery.

How to Create a Masonry Gallery on Your Page

Now that the plugin is installed, you will have an extra module available in the Divi Builder.

You can place this module on any of your pages.

Let’s explore the settings of this plugin.

I start with the Content tab in the Masonry Gallery Settings.

Content tab settings

Under Gallery Mode, you can choose between Normal or Minimized Gallery (1).

With the minimized mode you will get some extra options for your gallery.

Gallery Images Limit: here you can set the number of images that will be shown in your gallery (2).

Gallery Last Extra Text: you can add a text after the number (3).

Gallery Last Element Action: with the last image, you have the option to either open a lightbox or navigate to a different page.

Under the images section, you can add pictures to your gallery. You can easily rearrange the order of the images by dragging and dropping them.

Here you can adjust the number of columns for your gallery (5). You can set different numbers of columns for mobile, tablet, and desktop.

You can also change the space between the images (6). You can set different spaces for mobile, tablet, and desktop.

You can enable Images Zoom on Mouse Hover to give the images a zoom effect when you hover over them (7).

You can choose to show an image title or caption in the popup (8).

Here you can enable the Category Filter (9).

You can enable a pagination for your gallery (10).

How to Customize the Look of the Masonry Gallery

In this section, I will cover how you can further customize the styling of the masonry gallery.

When you navigate to the design tab you will find many customization options:

Overlay

Within the Overlay Content settings, you have the option to select either an icon overlay or to display a title/caption overlay when hovering over an image.

Once you select the “Overlay icon” option, you have the ability to customize the icon’s color.

By selecting the “Overlay image title/caption” option, you have the flexibility to customize the font type, size, weight, and style.

You can also set a background overlay color for your images.

Image

Within this tab, you’ll find various options for images including the ability to create rounded corners and add borders.

Gallery Filter

Under this tab, you’ll find more than 30 design options, allowing you to customize settings for both the active and inactive buttons.

Some of them are:

• Filter position
• Filter alignment
• Filter buttons background
• Active filter background
• Filters padding and margin
• All font options for either active or inactive filters

The image below showcases the gallery filter, which I have aligned to the left side; however, it can also be positioned at the top or bottom.

Gallery Pagination

Just like the gallery filter, you will have all the design options for the gallery pagination.

Minimized Gallery Options

Here, you’ll find all of the design choices for the minimized gallery mode, including options for text font, style, weight, alignment, and color schemes.

Default Design Options

This plugin contains all the standard design options you will find in any Divi plugin, including:

• Sizing
• Spacing
• Border
• Box Shadow
• Filters
• Transform
• Animation

Advanced Settings for the Masonry Gallery

The gallery masonry plugin also comes with some advanced options which I will cover here.

Link each image in your gallery to a separate page

You can do this by setting the option Image Onclick Action to Link To Other Pages.

Then you can place a destination URL in the Image Links field, separate this by {{link}}, and place another link for the second image in your gallery.

The order of the destination links is the same as the images in the gallery.

Create a filterable navigation

Another nice feature of this plugin is that you can create a filterable navigation.

I will demonstrate how you can do that.

To create a filterable navigation, you first need to create filter categories.

You will find a new option under the Media tab, Media Categories.

Here you can create categories for your gallery.

When your categories are created you can assign them to an image in your Media Library.

Open an image and you will find the option Edit More Details.

From here you can assign the image to a category.

When the images are assigned to a category you can hop back to your Gallery Masonry Plugin.

Set the show Categories Filter to yes and you can select the categories you want to show.

Examples of Masonry Galleries Created

You can create some beautiful masonry galleries with this plugin. I will show you some of the galleries that you can create.

Masonry Example 1

This example features a structure with 3 columns and includes top category navigation styled as buttons.

Masonry Example 2

This example features a layout with two columns and pagination at the bottom. Each image includes a descriptive caption.

Masonry Example 3

This is an example of a minimized gallery. This gallery is set up in a 5-column layout, limited to displaying 9 images at a time. You can click “Load More” to view additional images.

Performance Evaluation

I have explained how to install and customize the Divi Gallery Masonry plugin. And I also covered some advanced settings such as creating a filterable navigation and linking each image to a separate page.

But how does this plugin affect the performance of your website?

For comparison, I created a page with 9 image modules to compare the loading time with or without the Gallery Masonry plugin.

The tests are done with the following criteria:

• SiteGround hosting
• Divi static CSS cache enabled
• SiteGround’s Speed Optimizer enabled
• I use Pingdom for testing (https://tools.pingdom.com/)
• I conducted 5 tests for each and chose the median result.

The below image is the result of a page with 9 image modules with the same images used in the gallery.

Test results with the Divi Gallery Masonry plugin activated.

The images show that even though the page size is a bit larger, it now loads faster.

Comparison With Competitors

I will compare the Divi Masonry Gallery plugin to the popular Essential Grid plugin by ThemePunch. You’ll discover that while they address slightly different requirements, both are designed to improve the visual content of a website.

1. Purpose and Focus:
   • Divi Masonry Gallery: This is specifically designed to be used with the Divi theme, this plugin focuses on creating masonry-style gallery layouts. It is particularly useful for Divi theme users who want a simple, easy-to-integrate solution for stylish, responsive galleries.
   • Essential Grid: is a more versatile plugin that works with any WordPress theme, not just Divi. It offers extensive options for creating not only masonry grids but also various other types of layouts (e.g., sliders, carousels). Essential Grid is feature-rich and can handle a variety of content types including images, videos, and posts.
2. Customization and Flexibility:
   • Divi Masonry Gallery: Offers customization options that are generally easy to use, especially if you are already familiar with the Divi Builder. With its unique module, it integrates perfectly into the Divi environment, allowing you to adjust columns, spacing, and responsive settings.
   • Essential Grid: Provides a high level of customization with numerous presets and skins. You can customize nearly every aspect of your grids and layouts, including animations, light boxes, and even metadata handling. It also supports various sources of content and can be integrated with WooCommerce.
3. Ease of Use:
   • Divi Masonry Gallery: This is more straightforward and user-friendly, especially for those who do not require extensive customization and are looking for a plugin that works out of the box with Divi.
   • Essential Grid: While it offers more advanced features, it may have a steeper learning curve due to its extensive customization options. However, for power users, these features provide an advantage in terms of versatility and control over the galleries.
4. Support and Updates:
   • Divi Masonry Gallery: Users can expect good support and regular updates, particularly ensuring compatibility with the latest versions of Divi.
   • Essential Grid: It is supported by ThemePunch, known for its robust support and frequent updates. The plugin is maintained to work across multiple themes and WordPress updates.
5. Pricing:
   • Divi Masonry Gallery: A single license costs $39 (one website) and multiple licenses (infinite websites) cost $45, both licenses offer lifetime support, and updates.
   • Essential Grid: A single license costs $114 which includes future updates and 6 months of support.

In summary, your choice between these two should depend on your specific needs:

• Divi Masonry Gallery is best if you are already using the Divi theme and need a simple, effective gallery solution. The pricing is also significantly lower than Essential Grid.
• Essential Grid is ideal if you need a highly customizable and versatile grid plugin that works with any WordPress theme and supports a wider range of content types.

User Reviews

This plugin has an impressive average star rating of 4.5 out of 5, earning a lot of positive feedback for its simplicity and user-friendliness.

Users particularly like how well it integrates with the Divi theme, and its responsive design and customization options also receive high marks.

You can read some of the reviews below.

Product Updates

The developers have released four significant updates introducing new features for this plugin, alongside numerous updates aimed at bug fixes.

They ensure the plugin stays updated alongside the Divi theme to maintain compatibility as both progress. They pay attention to user feedback and constantly work to improve the plugin.

My Experience

I tested this plugin extensively and it works like a charm, creating masonry galleries is both straightforward and intuitive. There are no compatibility issues with the latest version of Divi and it is fully responsive on all devices.

With its many customization settings, it is easy to create unique and beautiful galleries. The filterable navigation feature also adds a nice touch of interactivity.

Pricing

You can purchase the plugin directly from their website or from the Elegant Themes marketplace.

Directly from the official website

Below you can find a 10% discount coupon.

One Site License

One site license costs $39 (you can use this for 1 website).

• Lifetime support, and updates.
• 15-day money-back guarantee

Infinite Website License

On their website, they offer 2 pricing plans.

The Infinite website license costs $45 (you can use this for as many websites as you like).

• Lifetime support, and updates.
• 15-day money-back guarantee

I have a great deal with the Team of Divi Masonry Plugin for my readers – you can get an exclusive 10% discount if you purchase it directly from their website.

You can use coupon code:

For the latest and greatest savings, make sure to visit the Divi discount page. Here, you’ll discover the most recent discount codes available for all Divi products, allowing you to get the best deals on your favorite Divi tools.

From Elegant Themes Marketplace

Here the plugin costs $25.

• Unlimited website usage
• 30-Day money-back guarantee
• 1 year support & updates

On the Elegant Themes marketplace, the initial price is lower however you have to extend it after one year for the same amount in order to have access to support and new updates.

Conclusion

The Divi Masonry Gallery plugin is a great choice for those who need an elegant, simplistic solution for showcasing visual content. It is particularly suitable for Divi theme users looking for a quick and easy way to add masonry galleries to their website.

Let me know in the comments what you think about this plugin.

The post In-depth Review of the Divi Masonry Gallery Plugin appeared first on Mark Hendriksen.

Not only does Divi offer a WordPress theme but they also offer two different versions of Divi; a stand-alone plugin and a full theme. If you’re someone who wants to build a WordPress site with a customized design, Divi Theme comes highly recommended.

By downloading the Divi Builder Plugin, you can get full control of your website’s design with easy drag-and-drop functions while having access to countless premade layout packs and other resources essential for building a Divi website that works best for your purpose.

Pros

• Visual builder is amazing
• Lifetime option
• A vibrant community with very active Facebook groups
• Many, many premade layout packs

Cons

• Backend builder can be slow on poor hosting or long pages (see the future of Divi 5.0)
• Shortcodes when you deactivate (see the future of Divi 5.0)

Table of Contents

• Divi Builder introduction
• The Divi Builder Drag & Drop Features
• Divi Theme Builder
• Hundreds of design options
• WooBuilder for WooCommerce
• 100+ Full Website layout Packs
• Things that could be better
• Divi marketplace & other Elegant Themes products
• The future of Divi 5.0
• Divi Builder Pricing
• Final Thoughts

Divi Builder Introduction

The Divi builder was introduced in 2015 as a stand-alone plugin by Elegant Themes and has since then evolved into one of the best page builder plugins on the market. With the Divi builder plugin, you can build websites without the need for any coding skills.

The Divi Builder Plugin broke from the traditional WordPress page-building structure by allowing users to easily create pages with any number of components. It features an advanced drag-and-drop editor and an ever-growing library of pre-made layouts.

Difference between the Divi Builder plugin and Divi Theme

The Divi Builder Plugin and the Divi Theme are both created by Elegant Themes, but each serves a different purpose.

Divi Builder plugin
The Divi builder is a stand-alone plugin that you can use on any WordPress theme. You just install it as any other WordPress plugin.

Divi Theme
The Divi theme is a fully functional responsive WordPress theme and it includes the Divi builder.

The Divi Builder Drag & Drop Features

In this section of our Divi Builder review, we are going to cover the most important features of the Divi builder.

 Let’s see the features and functionalities the Divi builder has to offer.

The Visual Builder Experience

The Divi Builder interface has both the ‘back-end Builder’ and the Front-end ‘visual builder’ interfaces. Divi builder’s best use is in the visual mode which allows front-end page building on websites.

The visual builder which is it’s latest gives a revamping and amazing experience. It is not confined by the dashboard like the standard Back-end Builder.

The visual builder has more configuration and customization options. All its features and functions make content creation and design adjustments faster and easier.

Responsive Editing

Responsive editing is necessitated by the ever-increasing mobile devices in the world. A large percentage of website visitors will use smartphones and tablets instead of desktops.

The Divi builder has Native SRCSET support for all images. The Divi builder automatically makes images responsive to size adjustments.

Its Responsive editing feature allows you to make changes to any element. This will allow you to make your website look good on any device.

46 Divi modules and 16 WooCommerce modules

Divi builder modules are the content building blocks used to create websites when using the Divi builder plugin. Without modules, website developers would have to use codes to build their sites.

The aim of Divi is to make website development easy. Text can be added through a text module and an image with an image module.

It is much easier to use Divi builder when you have great modules. All the modules are designed to allow you to easily add specific types of content to your website.

The Divi builder comes with 46 innovative modules for the builder Recently Elegant Themes have added an additional 16 new modules for WooCommerce.

Each module can be adjusted and customized to the developers’ preference. These modules can be moved by drag and drop within pages. They can also be saved for use on other sites or pages.

Tons of Column Options

Divi visual builder currently has column options and an improved column editing interface. The developer now has an endless list of column structure design possibilities and options.

You can easily add or delete and rearrange columns on the page. The entire column structures can be changed and columns full of modules dragged to new locations. It makes page building a whole new and improved experience for every developer.

Dynamic content

Dynamic content refers to content pulled from your website’s database. Usually, dynamic content is managed via WordPress or your plugins. It can be the website’s title or description.

It can even be used in custom fields created by you or your plugins. In the past, all contents of posts built with Divi builder were quite static. Dynamic content allows all static content to be connected to dynamic content entries.

When you click the dynamic content icon, you’ll get a full list of all available content. Then choose your desired item. Thereafter you can customize its output and connect it to the module.

Whenever that content is changed, it will automatically update. It will update within the module, on the page, and across the website.

With dynamic content, it is possible to generate content for an entire layout from dynamic sources. It makes the process of creating and updating blog posts simplified. Without touching the builder, you can automatically build posts

Divi Portability Import & Export

The import and export of layouts with the Divi builder are clearly one of its most valuable features. This feature is used to save and send data from one website to another.

Improved versions of the builder have more portability options. This portability system provides flexibility for website development. In addition to layouts, libraries, settings, pages, and modules are now portable.

Thus the Divi builder portability system works anywhere and transfers anything. The speed and simplicity of achieving this task are quite impressive.

Global Elements & Styles

A Global library item is a Divi module; a row or section that syncs between all pages it is used on. It appears exactly the same on any page it is added to.

When changed on one page, it will be updated on other pages to which it has been added. This way, you don’t have to edit every single page when you want to make changes.

It is very time-consuming to keep adding the same element on several pages. You can simply make any repeated module or section on your site global.

You can selectively sync individual settings for each module. Global modules are not just time savers but they also ensure consistency on your site.

Wireframe mode

In Divi’s wireframe view, you can edit your website with blocks.

It makes the visual builder more flexible to varieties of building styles and It can adapt to individual developers’ editing styles, experiences, and preferences.

Making transitions from a visual, mobile device, or wireframe view while editing your page is easy. This will come in very handy for those who prefer simple interfaces for editing pages.

The Divi Role Editor

The role editor is a feature used for enabling and disabling permission settings for Divi user roles. It gives the developer the power to control what a WordPress account user can view.

Giving WordPress users full access to the dashboard may have consequences. A good number of clients are not familiar with WordPress. They may ruin the design or the website as a whole leaving it to the developer to fix.

The Divi Role Editor has a very easy-to-use interface. There are usually five different roles on WordPress to choose from. The administrator role gives unlimited access and complete control over the site. This role should be disabled in order to protect the site’s themes, plugins, and core files.

The ‘editor’ role is a better option for the client. It gives access to edit pages, posts, comments, links, tags, and categories. The user cannot access the site’s themes, core files, and plugins.

The third role is the ‘author’; authors can only access personal posts. The ‘contributor’ can write access and edit but not publish posts. The ‘subscriber’ can only receive updates, read and comment on posts.

After assigning a role, you can define the capabilities and access of the roles. You can also control what types of settings they are allowed to edit. The client will have just the tools required to edit content.

The Divi Builder Helper With +70 Videos

The Divi builder comes with a help system to assist Divi users. This system consists of over 70 instructional videos.

The instructions videos cover a wide range of topics. For almost any issue you encounter, there is a help system. It is a unique system that allows you to watch and follow along while building.

You can resize, relocate, pause, turn off, and turn on the video while building. It makes website building a worthwhile experience, especially for newbies.

Multiselect and Bulk Editing

The ‘multi-select’ and bulk editing features give speed and efficiency to developers. It allows multiple items to be selected at once.

You can select as many items as possible to perform a single action. These bulk actions include drag, drop, cut, copy, delete, and paste. The items can come from different rows, columns, modules, and sections within a page.

You can even perform a bulk edit on a collection of different items. This feature saves designers time spent on repetitive and tedious tasks. It is also easy to execute; you hold down the shift key and then select the items within the page. Once you select it, you can edit the entire collection of items.

Divi Color Manager and Magic Color Suggestions

Divi builder comes with a new interface that makes it easy to manage colors on your site. All the colors are expanded into their own color schemes on the color scope. Each row consists of unique color schemes built from colors in your palette.

The color manager is designed to boost the designer’s creativity. This powerful functionality will also save time and ensure design consistency. It gives quick access to a customizable color palette for creating desired color schemes. This color system is very efficient in many ways:

Access to Recently Used Colors
A ‘Recent Colours’ tab system saves all the recent colors used. It keeps track of all colors designers use. If you cannot recall the colors used previously, you can always find them. As you explore different ideas, the colors you recently used can be accessed with just a click.

Color Suggestions
Selecting colors can be quite difficult, time, and energy-consuming for designers. To make the designers’ job easier, the Divi builder gives amazing color suggestions.

It uses saved and recently used colors to provide color suggestions. The color algorithm works with the principles of color combinations.

The system is automated to find colors that complement the ones in use. These suggestions are displayed in the color pallet for easy access.

Email Opt-in Provider Support

Divi builder comes with an email opt-in module for visitors to subscribe to your mailing list. This module supports about 20 popular email marketing providers.

Thus, you can build your list from so many platforms. The module is also flexible to accommodate your creative custom designs.

You can create custom fields and build segmented lists of subscribers. This module allows you to use a spam protection third-party service.

Contact Form Builder

There is a built-in contact forms module for building simple or complex contact forms. The module consists of features such as dropdowns, checkboxes, and radio buttons.

The Divi contact form module comes with field validation rules and conditional logic. Contact forms can be customized to suit the nature of the information required.

Split Testing

Divi builder comes with a function that allows split testing to evaluate your WordPress website. This function is known as Divi Leads.

Visitors are used to validating the content and design of the website. You can use Divi Leads to broadcast different versions of your site to other visitors. Divi Leads is a built-in conversion tracking system. It tells how effective each tested variant is.

You can test varying colors, headlines, or layouts using this method. It gives an insight into how the website is in accomplishing the owner’s goals. With this method, you can figure out the effect of each change you make on your site.

It tells you whether a change will improve or reduce your conversion rate.

Undo, Redo, & Revisions

Every action you perform while building in the Divi builder is saved in your editing history. You can undo, redo and make revisions with ease.

Divi builder automatically saves your progress when you are working. It works like a digital sketchbook where you can flip forward and backward.

You can make comparisons between changes and navigate through with ease and speed.

Save, Import & Export Elements

Divi builder comes with layout pack designs that include modules, rows, sections, and pages. However, you are not restricted to using just these premade layouts.

You can create and save your layouts on the Divi library. These layout packs can be easily accessed, edited, or re-used on any page on your site.

You can also import Divi layouts shared or sold by others into your Divi library. The layouts you created and saved can be exported to other websites.

Translated into 32 Languages

Divi builder is a global platform that recognizes the needs of non-English speaking users. Hence, Divi builder has been professionally translated into 32 languages.

These are the front-end elements, interface, form fields, and descriptions. This benefits not just owners and developers but also the website’s visitors.

The right-to-left RTL language support can be enabled on the WordPress dashboard. This changes both the interface and front-end elements to the desired language.

Divi Theme Builder 4.0

The Divi builder version 4.0 comes with a brand new theme builder. It is a fully-featured system for building WordPress website templates.

With this, you can create your desired website structure. You can edit the headers, footers, or any part of the Divi theme.

You can assign your customized template designs to specific parts of your Divi website. It could be blog posts, category pages, or your entire website template design. You create the template and assign it as you desire.

There are so many design possibilities that you can make with the theme builder. Here is a list of a few:

Custom Header & Footer Builder

With Divi builder, you are not restricted to the standard headers and footers. Divi builder gives you complete control of these using its builder and modules.

The current Divi 4.0 update gives you more layout options and more control over its elements and design. You can create custom headers and footers for individual parts of the website.

You can also create a global header and footer that affects the whole website.

Site-Wide Post & Product Templates

With Divi’s Theme Builder, you can create site-wide posts (with a custom featured image) and product templates.

These posts and templates will change the structure of posts across your website. You don’t need to code Child Themes to modify your theme’s structure. Everything can be designed in the Divi builder.

Posts can be displayed automatically using Divi’s Dynamic Content system.

Custom Category Page

The Theme Builder can also be used to create custom index page designs. This includes custom category feeds. It provides complete control over your website’s category designs.

You can use the Divi blog module and its design settings to customize those post feeds.

Other Custom Pages

You can use the theme builder to create custom templates for absolutely anything: Search results, archives, tags, homepages, 404 pages, and more. Since you have complete control, you can create your desired structures.

Hundreds of design options

With the Divi builder, you have access to amazing design options.

Fonts & Text Styling

Typography is an indispensable part of website design. It sets the tone of professionalism in the mind of readers. It improves user experience and can influence the success of your website.

Thankfully, you get access to a full range of text and Divi fonts. There are over 1400 Google fonts and a thousand weights and styles. You can pick from these hundreds of web fonts or upload your own.

Customization of text sizes, spacing, and line height is possible. You can control all standard text elements like Divi anchor links, lists, and block quotes.

Divi Hover Effects

Using Divi’s hover options, you can create all kinds of stunning hover effects. You can carry out very interesting and creative experiments with your hover effects.

The hover options have a unique and amazing interface for design and customization. Customizing a module’s design on hover is really easy.

Enable the hover options by clicking the icon above the desired design. Thereafter, you switch to the hover tab to modify and preview the design.

Shape Dividers

Divi’s shape divider is a feature that you can use to give your website a unique flair. It gives you the option of adding custom shapes and effects to your website.

They can be used as transitions between blocks of content on your pages. You can achieve this by placing them above or below sections on your pages.

There are twenty-six shapes to choose from. Each of these can be resized, flipped, combined, or repeated.

You can get creative in designing perfect shapes to add beauty to your website. Divi’s shape dividers are very easy to use and customize.

Border Options

Divi builder makes it easy to manage border options. For all modules, rows, and sections you can use the new border options interface. It is a very simple and intuitive UI.

You can customize your border color, size, and style. Each edge can be adjusted individually to suit your taste.

Animations

Good animations can lure users to engage on your website and give life to your page. Animations on Divi builder have seven different styles.

They include; Fade Slide, Bounce, Zoom, Flip, Fold, and Roll. Each different animation style creates a unique effect for different types of content. Each style can be highly customized using advanced animation controls.

You can make your animations fast and snappy or slow and subtle. You can add and combine animations to any elements on your website. The right speed, intensity, and timing can make your page come alive.

Drop Shadows

Every module, row, and section in the Divi Builder has a full set of box shadow options. Creating and customizing these shadows is very easy to do in Visual Builder.

You can control the shadows’ color, position, blur, and strength and build inset and outset shadows.

Text Shadows

Adding great text shadows to your page is now simpler than ever. Thanks to the shadow that can be applied to any text element with a single click. It has five pre-designed text-shadow styles that work great with any text size.

These styles are perfect starting points for further customizations. The current text shadows interface works with all modules.

Transform Controls & Effects

The Transforms interface has been built to allow for visual control over your design. With Transform controls, you can adjust the appearance of any module, row, or section.

This is easily done using a combination of settings. Divi builder visual controls describe each transformation in an attractive way.

You can watch elements transform right before your eyes on the page. This feature is made more perfect by the tons of design possibilities available.

Filters & Effects

Divi builder has a full range of colors, filters, effects, and blend modes for website building. These can be applied to any image, module, row, or section.

There are Hue, Saturation, Brightness, Contrast, Invert, Blur, Opacity and Sepia controls. These controls allow you to quickly adjust the appearance of any element.

Background Options

The sections, rows, columns, and modules on Divi builder have background options. These background options come in four tabs: Color, Image, Gradient, and Video.

Within each tab, you can enable the background style. Relevant settings for particular styles can be configured in the tabs. Every option related to background images is inside the background image tab. This is the same for the other tabs.

Advanced Code Editing

Developers who use custom CSS and custom code in Divi builder will find this feature exciting. Using your CSS rules, every part of every module can be customized. The custom code can be added to various parts of the website.

It features rich syntax highlighting that makes it much easier to read and understand codes. Everything you write will be color coded and formatted automatically. Also, all lines will be numbered for your reference. The advanced code editor makes writing and editing code much easier.

WooBuilder for WooCommerce

The WooCommerce Builder consists of modules that can customize products, carts, and checkout pages for online shops. It can also be used to build product listings on your website.

Enabling Divi builder on a WooCommerce product automatically transforms the standard product template. The template is transformed into a collection of customizable WooCommerce modules.

16 WooCommerce Modules

The Divi builder has 16 Modules for WooCommerce that allow you to create and control any WooCommerce element. You can decide what shows up on your product listings and move things around.

You can even mix WooCommerce modules with standard Divi modules to create anything. These modules come with a full range of countless Divi builder design settings.

100+ Full Website Packs

Divi Builder has over 100+ website packs that you can browse through and import onto your page. Divi layouts are organized into complete website packs.

Each pack has 7 to 8 individually-designed pages suited for each particular type of website. These packs are designed in a unique and cohesive style that can be modified to meet your needs.

Every Divi user has instant access to countless world-class designs. These designs are on a variety of subjects inside the Divi Builder. All you need to do is import the design and add your content.

Quick Access to Premade Layouts

All of Divi’s amazing layout pack designs can now be browsed and searched within the builder. You can click on your desired category for a list of relevant layout packs.

Thereafter, you click on any pack to view all of the page layouts it includes. Once you find a layout that you want to use, it can be imported directly onto your page. That is the page where the design and content can be easily customized.

Premium Divi Child Themes

There are many Divi developers in the community that build custom Divi child themes. A child theme is a customized design with more functions and pages. These designs can be bought from several marketplaces such as our own Divi marketplace.

Things That Could Be Better

The backend builder can be slow on long pages

Compared to other page builders, the backend of the Divi builder can be quite slow. This occurs when it is used in a poor hosting environment or on long pages. It may affect your workflow. However, if you have decent hosting, this should not be an issue for you.

Shortcodes When You Deactivate

Divi builder is a shortcode-based builder. As long as the Divi builder is active, these shortcodes will be replaced with your intended layout.

Unfortunately, Divi’s custom shortcodes do not transfer to other page builders like Elementor, Beaver Builder, or WPBakery. In other words, it’s a pain switching away from Divi to another page builder.

If you plan to use only Divi, this is not a problem. However, if you want to switch to another page builder, you’ll have to build the website from scratch.

Divi marketplace & other Elegant Themes products

Elegant Themes has its own marketplace where third-party developers create plugins, Divi child themes, and layout packs. If you need something that is not available in Divi builder then you can get it here.

Divi Cloud

Divi Cloud is like having your own personal library filled with all of your layouts at your fingertips. The innovative Divi Cloud feature makes it easy to save all your layouts on the cloud and access them whenever you need them, no matter where you are or what device you’re working on.

Divi Teams

Divi Teams make running a successful web design business easier than ever before. Invite team members and your clients to join you on the Divi platform and control what they can do with it – from building an entire website together to delegating tasks with ease.

Take the hassle out of running your business and collaborate with others in the Divi ecosystem. As an added bonus you’ll also be able to provide your clients with access to the support team system for quick help anytime.

The future of Divi 5.0

The developers of Elegant Themes are working on a huge Divi 5.0 update. They will basically rebuild the entire Divi builder.

I will give you the main points that they will focus on:

• They are working on Divi 5.0, a new version of Divi that will use different technologies.
• Divi 5.0 is an update that improves performance, stability, scalability, and extendability.
• It will come with a new API that will allow our team and the Divi development community to build features better, faster, and with fewer mistakes.
• Divi 5.0 will use a different way to store information than previous versions. This means no more shortcodes!

You can read all about it here:
https://www.elegantthemes.com/blog/general-news/the-future-of-divi

Divi Builder Pricing

With all these attractive features, how much does Divi really cost? Elegant Themes offers you two Divi pricing packages. You can get an Elegant Themes membership for the $89/year package or go with the $249 one-time payment.

All packages come with Divi theme, Divi builder plugin, Extra, Bloom, Monarch, and product updates. Stellar support, hundreds of website packs, and unlimited website usage are also part of the pack.

Make sure to check out my “Divi official promo code” page for the latest discount on Div builder and other Divi products.

Final Thoughts

Divi builder is a truly flexible tool that can be used to create any type of website with WordPress. Its years of existence have witnessed so many thoughtful improvements. Divi builder gets more attractive with each new update.

The Divi builder is my to-go page builder for many years.

You might also like…

• How To Speed Up Your Divi Website (Guide)
• How to Make a Divi Child Theme
• How to Make a Website With Divi Theme in 2024
• The Best Divi Plugins For 2024
• The Best Divi Child Themes For 2024
• The Best Divi WooCommerce Layouts For 2024
• How To Choose The Best Divi Hosting In 2024

The post Divi Builder Plugin Review 2024 (updated) appeared first on Mark Hendriksen.

With Divi Supreme, you get access to 50+ Divi custom modules that extend what Divi can do and make it easier than ever for you to create amazing Divi websites quickly. On top of that, Divi Supreme is easy to use and makes adding more power and design flexibility to Divi incredibly simple – even for Divi newcomers.

Table of Contents

• 50+ Divi Supreme Modules
• Overview of the 7 extensions included in Divi Supreme
• Divi Supreme Pro vs Lite
• Premium Layouts
• Divi Supreme Price
• Special Discount Coupon Code
• Ending Thoughts

50+ Divi Supreme Modules

Divi Supreme comes with 50 new custom modules to the Divi Builder. Let’s look at a few of them.

Animated Gradient Text

Animated Gradient Text applies a gradient to text. Choose the styles, create gradients with multiple colors, and adjust the direction and speed of the animation. In this example, I’ve increased the size of the font, added padding, and added a box shadow.

Before/After Image Slider

The Before and After Image Slider lets you add two images, a before and after, and includes a slider to compare them. It also adds labels and an overlay on hover. You can customize the labels, overlay, and handle slider. This is great for comparing photos, graphics, etc.

Business Hours

The Divi Business Hours module includes sub-modules for each day with fields for the day and time. Adjust the design of each individual or the entire module. Adjust the styling for the day, time, and the separator between them. I’ve added four days and increased the size, width, and height of the days, the color and size of the hours, and added a dashed line with a custom color.

Supreme Button

Supreme Button provides two different buttons in the same module with individual controls and extras. Adjust the text, alignment, background, lightbox, separator text, and tooltip text. I’ve adjusted both buttons in this example and added separator text.

Supreme Card

Supreme Card works like a blurb, but with a lot more control over every element. Adjust the image size and location, choose between two different layouts, and adjust the badge, button, text, and a lot more. I’ve only adjusted the badge colors in this example.

This one uses the Inline layout. I’ve placed the image on the left and moved the badge to the bottom left.

This one places the image on the right. I’ve adjusted the image height, added a custom badge position, and adjusted the font size and background color of the badge.

Card Carousel

The Card Carousel works the same as the Supreme Card, but it adds multiple sub-cards that display as a carousel with the slider navigation. You have control over the cards and carousel settings. I’ve added three cards to this example with different images for each. I’ve adjusted the badge for one card.

Dual Heading Text

Dual Heading Text includes three different sets of text: Before, Middle, and After. You have control over each one. In this example, I’ve increased the size of the main text (which controls all of the text together). The Before text is semi-bold. I gave the Middle text a box shadow and made the After text smaller and changed its color. You can make them inline (like in this example) or stack any of the three.

Embedded Google Map

Embedded Google Map is a simple map that doesn’t require a Google API. Just enter the address and adjust your zoom.

Embedded Twitter Timeline

Embedded Twitter Timeline displays a Twitter feed. You can embed any feed and you can limit the number of tweets, choose a light or dark theme, show the header, footer, border, and scrollbar, and remove the background color. You can adjust it with the standard design settings. These are the default settings.

Facebook Comments

Facebook Comments can replace your standard WordPress comments. This provides comment sorting, marking as spam, reporting to Facebook, etc. Users need a Facebook account to comment, which can provide increased security. Enter a Facebook App ID, page URL, limited the number of posts, choose between light and dark colors, and the sorting order. You can also adjust it with normal design settings. These are the default settings.

Breadcrumbs module

Divi Breadcrumbs are a great way to make your website navigation easier for users and better for SEO.

It displays a collection of links on a page that represents the “hierarchy” of a particular visitor’s journey from page to page.

This can be helpful in allowing visitors to quickly find their way around the website without having to search through menus or remember long URLs.

Additionally, these breadcrumbs can be beneficial to search engine optimization because they offer structure and context that help crawlers crawl and index web pages more efficiently.

Icon Divider

Icon Divider adds divider lines around a Divi icon or an image. Adjust the image and icon size, color, alignment with the divider, etc. You can also adjust the divider’s color, weight, position with the icon or image, and more. For this example, I’ve added an icon and adjusted its size and color, and increased the weight of the divider so it stands out.

Image Hotspot

Image Hotpot lets you place icons or text within your images with tooltips that open on hover or click. Adjust the colors, text, icons, animations, etc. This is great for product images to provide information. Add as many as you want and customize them individually.

Timeline layout

The Divi Timeline Module is a powerful tool that enables you to quickly and easily create stylish and engaging timelines using your content.

Its intuitive interface makes it easy for anyone to assemble a timeline in just minutes – no coding necessary! Plus, the module is designed for responsive viewing, giving you the reassurance of knowing that your work will look fantastic on any device.

Floating Multiple Images

Floating Multiple Images lets you add any number of images with settings for each one. The images float over each other. It doesn’t provide control over the floating, so you can’t change the speed or direction. It does include all of the standard module settings, so you can adjust the size of the module’s area, add borders, etc.

Mask Text

Mask Text is one of my favorite modules. Enter the text you want to display and make all of the standard text adjustments and add an image. The text displays as a cutout and reveals the image behind it. All of the standard image controls are here. I’m using the supplied text and changed the size, made it all-caps, selected ultra bold, and added a text shadow.

Shapes

Shapes can display one of 17 shapes in any size and color you want. Choose the shape, set the size, add a border, shadow, etc. These are great for adding interesting background elements.

Tilt Image

Tilt Image lets you place an image that will tilt on hover based on the location of the mouse cursor. Adjust the tilt settings, add a 3D pop-out effect, create an image overlay with media and an icon, and adjust each element with the style settings. I’ve added an image with glare, 3D, and an overlay with an icon, heading, and body text.

Divi Lottie Module

Spice up your Divi website with attractive, animated visuals using the powerful and convenient Divi Lottie Module! With its library of thousands of premium animations created by an international selection of professional designers, you can quickly find something that complements your site’s look + feel while boosting conversions. It only takes a couple of clicks to make it happen.

Divi Supreme Masonry Gallery Module

Create an eye-catching portfolio with Divi Supreme’s Masonry Gallery Module! Whether you’re a web designer, photographer, or something else entirely, this module is perfect for making your work stand out and giving it the attention it deserves. Impressive images don’t have to be hard—showcase them in style today!

Image Carousel Module

Using the Divi Supreme Image Carousel Module is an easy and effective way to bring a unique touch of beauty and style to any website. Not only does it provide fast and straightforward creation of beautiful image carousels, but it is also packed with powerful features such as hover effects, autoplay, looping, and many others. With this module, users now have the capability to customize the settings in order to create truly spectacular image carousels tailored perfectly to their needs. Whether you want to present your portfolio pieces, product images, or client logos, this module offers a great opportunity for creating slideshow elements with stunning visual impact.

Floating multi images module

Showcase your images in an all-new way with the Floating Multi Images module! Transform any page by adding eye-catching animations that can move up, down, and left or right.

Text Divider Module

Make your headlines stand out with Supreme Text Divider Module! From borders to text in between the dividers, you’ll be able to customize each headline and perfectly align it for a stunning look.

Supreme Image Module

With the Supreme Image module, you can now easily and effortlessly experience the fantastic freedom of 3D-manipulated images. Now, it’s easier than ever to rotate your image just as you’ve always imagined – all without a single line of code!

Caldera Forms Module

Get the best of both worlds with Divi Supreme’s Caldera Forms module. Easily and quickly select your desired contact form right from a dropdown list and experience a seamless transition between Visual Builder & Caldera Forms settings page – no more toggling back and forth!

Overview of the 7 extensions included in Divi Supreme

Divi Supreme includes 7 extensions that you can enable in the plugin’s settings. Let’s look at a few of them.

Divi Popup

Divi Popup is a setting that’s added to Divi modules in the Advanced tab. Select a popup type, which can be a layout from your Divi Library, iFrame, image, or video, and then choose the layout and add a trigger. The trigger can be a click, page load, scroll, or exit intent. Also choose how it closes, the exit animation, position, width, overlay, and close button styles. Opening on load lets you use it as a cookie consent. You can set the cookie expiration, time delay, and lots more. This is a powerful popup tool.

Scheduled Element

Scheduled Element adds a new option in the Advanced settings of sections, columns, rows, and modules under the Visibility tab. Here, you can have the element to show or hide based on the date that you choose. Select between certain times, and business times, and choose which users it applies to.

Responsive Viewer

Responsive web design has never been easier. With the Breakpoint Presets Preview, you can save time and have full control over your project. Just select a preset option and immediately preview the design in different breakpoint sizes – it’s that easy! Plus, with custom breakpoint previews, you can set your own responsive sizes, giving you the ultimate flexibility when it comes to creating mobile Divi sites. Thanks to Breakpoint Presets Preview, all your Divi websites will be optimized for all types of devices ranging from iPhones, iPads, Androids, and all other mobile devices. So take advantage of this great resource and start elevating your responsive designs.

Easy Theme Builder For Header

Easy Theme Builder lets you enable and configure settings for the Divi Theme Builder. It includes settings to fix the header, push the body down, shrink on scroll, and shrink padding, images by a certain percentage, threshold, and the logo.

Fixed header: Make your website experience even better with a fixed header! With just a few clicks, you can use Theme Builder to create an awesome custom-built one that follows visitors wherever they go on your site. Be the master of navigation and let them explore what you have to offer in style.

Shrink On Scroll: Stop cluttering your visitors’ screens! Shrink the Theme Builder header with just a few clicks to reduce its size and maximize its viewport height – no coding is necessary. Make scrolling smooth without sacrificing high-performance design today!

Switching Logo On Scroll: When your visitors are scrolling, you can switch to a unique logo in just moments! With custom header logos, you’ll have more control over the design of your site and be able to make it truly one-of-a-kind.

Divi Library Widget

Divi Library Widget adds a widget that will display any layout from your Divi library. This is especially good for small layouts that you’ve designed for your sidebars.

Read More

Read More adds a new setting to the Advanced tab of text, blurb, blog, and call to action modules. The setting adds Read More and Close links and lets you set the collapsed height, enter the text, adjust the font, add a shadow, and add custom CSS.

Divi Library Shortcodes

Divi Library Shortcodes adds a new column to your Divi library with a shortcode. You can copy and paste this shortcode to display the layout within Divi modules and your PHP code.

General Settings

One of the key features of Divi Supreme is a notable settings page with several tabs, each of which explores different customization options for users to explore. On the Divi Supreme settings page you will find the General Settings tab, Divi Supreme offers different toggles to enable scheduled elements, a popup feature, library widgets, read more content links, library shortcodes, and more. 

Menu Settings

Along with the Divi Extensions, the settings menu also includes a few other features.

Social Media

Social Media settings include the Facebook API and a box that allows Divi modules to use your WordPress site language.

Misc

Misc lets you remove data on uninstall, allow for JSON file uploads, change the Divi Supreme Pro menu name, and specify an image for the menu icon.

Divi Supreme Pro vs Lite

Divi Supreme Lite is a free version that includes a limited set of features and options. It is primarily intended for users who want to test the plugin before purchasing the Pro version, or for users who do not need all of the advanced features offered by the Pro version.

Divi Supreme Pro includes 50+ modules, more options, and more extensions. Plus, the modules in the pro version have more features than in the free version.

Premium Layouts

You will get access to stunning Divi layouts specially designed with the Divi Supreme plugin. These layouts feature an array of designs and elements that have been carefully crafted to make your website stand out above the rest. Whether you’re looking for a modern, sleek look or something more traditional, you’ll find plenty of options.

Divi Supreme Price

Divi Supreme has three pricing options:

• Personal= $49 for 1 site and 1 year of support and updates.
• Professional= $79 for unlimited sites and 1 year of support and updates.
• Agency= $219 for unlimited sites, support, and updates (Lifetime).

Special 10% Discount Coupon Code

We have a great deal with the Team of Divi Supreme for our readers – get an exclusive 10% discount with coupon code MH10!

With this special offer, you can get a discount for every plan!

Check out my Divi coupon code page for all the latest discounts.

Ending Thoughts

Divi Supreme Pro is an impressive plugin to create stunning interactive content on your Divi websites. It’s easy to use and filled with features that add lots of design options that are normally only available by adding code. Divi Supreme makes these features easy to add, plus the fact that most are Divi modules means that you can easily style them to fit your website. Divi Supreme allows you to build amazing websites quickly and easily. If you’re interested in adding lots of new features to your Divi website, Divi Supreme is worth a look.

Have you tried Divi Supreme? Let us know what you think about it in the comments.

The post Divi Supreme Plugin Review 2024 (Updated) appeared first on Mark Hendriksen.

Divi Supreme

Divi Supreme adds over 40 modules to the Divi Builder and 7 extensions to expand the abilities of Divi. Modules add text effects, social media feeds, menus, price lists, shapes to use as background elements and designs, image effects, dividers, business hours, star ratings, and lots more. Extensions add features to the Divi sections, rows, and columns, certain modules, and the Divi library. They allow you to schedule when elements will show, add features to the header, create popups with multiple trigger options, add a read more link, add shortcodes to the library, and add a library widget. The shortcodes and the widget allow you to place Divi layouts anywhere you want.

Use coupon code MH10 for a 10% Discount

Price: $40 | More Information | Divi Supreme Review

Divi Mobile

Divi Mobile plugin gives you a lot of control over mobile headers. It adds lots of new features to create custom mobile menus. Add premade menus, hamburger icons, sub-menus, inject layouts into specific locations, and more. Adjust the search icon, cart icon, hamburger icon, and logo positions. Customize the icons, choose animations, adjust height and colors of the header elements, and create mega menus using Divi layouts. It also includes a stop-stacking option to give you more control over how menus display on different screen sizes. The menus include several layout and viewing options with lots of animation styles and settings to choose from.

Price: £12 | More Information

Divi Mega Pro

Divi Mega Pro is a mega menu builder that lets you create mega menus and popups using the Divi Builder. It works with all of Divi’s design tools and features, and it even works with third-party Divi modules and other WordPress plugins that work with Divi layouts. Mega Tooltips allows you to create small popups with the Divi Builder that will provide information and other types of content while keeping visitors on the page. Use anything as a trigger, such as links, buttons, images, etc., to open the menu or tooltips.

Price: $24 | More Information

Divi Blog Module

Divi Blog Module is a new blog module that adds a lot more layouts and features than the standard blog module. Layouts include masonry, magazine/newspaper, grid, full-width, and lots more. You have full control over post content, read more buttons, featured images, separated borders, and meta customization. Set the featured image as a background, style pagination, control spacing for content, meta, and buttons, set equal heights, and more. It has 45 pre-made templates to help you get a head start on your blog designs.

Price: $25 | More Information

Divi Pixel

Divi Pixel adds over 200 custom options, 19 modules, and mobile menu features to Divi. Options allow you to customize your Divi headers, footers, back-to-top buttons, 404 pages, preloaders, and login pages, and upload files such as custom map markers and SVGs. A layout injector lets you use Divi layouts in multiple places within your Divi website. Modules add counters, breadcrumbs, before and after sliders, typing text effects, flip boxes, and more. The mobile menu settings make it easy to create a completely custom mobile menu with social icons, animated hamburger icons, overlays, and menu items.

Price: $49 | More Information

Image Intense

Image Intense adds a new module to the Divi Builder that’s a combination of three modules: images, text, and buttons to create custom blurbs, images, CTAs, and lots more. It has 22 overlay and hover effects and lots of options for your images, text, and buttons to create designs that pop. Image effects include hover transitions, mix blend modes, opacity, and more. The visual effects work great for custom call-to-action elements. Buttons can be added anywhere within a 3×3 grid. Opacity and blends can be changed before and after hover to create interesting custom designs.

Price: $39 | More Information

Divi Carousel Module

Divi Carousel Module adds a new module to both Divi and Extra to add an unlimited number of carousel sliders to your website and style them like any Divi module. Types of carousels include content, image, testimonial, logo, team, and lots more. Features include a rating option, social media links, image positioning, hover effects, arrow color and positioning, dots color and positioning, element positioning, sizing, button settings, custom transitions, advanced slide effects, and more. It comes with over 50 templates to get you started.

Price: $15 | More Information

Mighty Header & Menu Maker

Mighty Header & Menu Maker makes it easy to create custom headers, menus, and mega menus with the Divi Builder. You can set custom breakpoints to determine when the desktop menu will change to a mobile menu. Show a different header and menu on each page, have the header stick to the bottom of the page on scroll, change the logo position, and lots more. It comes with 8 premade layouts to get you started and it also includes the Stop Stacking plugin that keeps modules from stacking on mobile to give you more control over menu designs for tablets and phones.

Price: $59 | More Information

BodyCommerce

BodyCommerce is a WooCommerce page builder that adds more WooCommerce features to Divi than any other plugin. Features include 61 modules and page builders for the checkout, cart, account, login, password, registration, search results, thank you, and attributes. It also includes custom pagination, galleries, a mini cart, email templates, product gallery slider, a custom cart icon, AJAX add-to-cart, custom badges, variation swatches, a form field customizer, custom product tabs, a checkout funnel, and lots more. It has 4 free layout packs to help you get started on your WooCommerce shop design. You can even try the plugin for free.

Price: $31 | More Information

Divi Ghoster

Divi Ghoster is a white labeling plugin for Divi and Extra that lets you customize the branding for both yours and your clients’ websites. Change the name of Divi and all related elements including the author name, library, builder, etc., so clients and WordPress theme detectors won’t be able to know what theme you’re using. You can also hide all Divi plugins including Divi Ghoster. Links are provided so you can still access all of the settings. You can also customize the Divi elements to use your own icon, replace the Divi screenshot, and customize all of the colors. A login customizer is added to the theme customizer where you can add your own background image, change the fonts, colors, etc.

Price: $18 | More Information

Ending Thoughts

That’s our look at the 10 recommended plugins for Divi. The plugins are well-designed, work great with Divi, and provide a wide range of new features and options. Most include multiple license options, so they can be purchased just for your own use or for use with clients’ websites. I have personally used every one of them and I can’t recommend them enough.

We want to hear from you. Have you tried any of these 10 best plugins for Divi? Let us know what you think about them in the comments.

You Might Also Like…

• How To Speed Up Your Divi Website (Guide)
• How to Make a Divi Child Theme
• How to Make a Website With Divi Theme in 2024
• The Best Divi Plugins For 2024
• The Best Divi Child Themes For 2024
• The Best Divi WooCommerce Layouts For 2024
• How To Choose The Best Divi Hosting In 2024

The post 10 Recommended Divi Plugins appeared first on Mark Hendriksen.

WP Rocket is only available as a premium plugin. This can make it difficult to know if it’s the best solution for your needs. In this article, we’ll look at WP Rocket, see how easy it is to use, and see what it can do to help you decide if it’s the right plugin for your website.

Table of Contents

• 1 WP Rocket Settings and Features
  • 1.1 Dashboard
  • 1.2 Cache
  • 1.3 File Optimization
  • 1.4 Media
  • 1.5 Preload
  • 1.6 Advanced Rules
  • 1.7 Database
  • 1.8 CDN
  • 1.9 Heartbeat
  • 2.0 Add-Ons
  • 2.1 Image Optimization
  • 2.2 Tools
  • 2.3 Tutorials
• 2 WP Rocket and Divi
  • 2.1 A/B Testing
  • 2.2 Blog Module
  • 2.3 Slider Module
  • 2.4 Masonry Post List
  • 2.5 Shopping Cart Icon
  • 2.6 Older Versions of Divi
• 3 WP Rocket and SiteGround
• 4 WP Rocket Before and After Tests
  • 4.1 Before
  • 4.2 After
  • 4.3 After Compressing Images
  • 4.4 Results
• 5 Price
• 6 Documentation
• 7 Ending Thoughts

WP Rocket Settings and Features

WP Rocket starts caching your website as soon as you activate it. The main features are enabled by default. It doesn’t require a lot of setup and there are no complex settings. I recommend activating a few more features to get the best results possible. If you want to make adjustments or activate features, go to the dashboard menu under Settings and enable the features you want. Here’s a look at the menu and settings.

Dashboard

The Dashboard tab provides information about your account, getting help, getting started, documentation, and FAQs. Quick Actions provide links for clearing cache, starting the cache preloading, purging content, and regenerating critical CSS.

Cache

The Cache tab includes settings for mobile cache, enabling caching for logged-in users, and cache lifespan. The cached pages are saved as static files and then served to your visitors. This gives you control over who gets those cached files and how long to keep the cache before clearing it.

File Optimization

File Optimization has several sections that include basic settings to minify HTML, combine Google font files, and remove the query strings from static resources.

For CSS and JavaScript, settings include minify, combine, optimize CSS delivery, and load JS deferred. When you select to minify or combine CSS or JS, you’ll get a message warning that it can break your site. It does seem to handle JS and CSS minification without breaking the website. Fortunately, if it does break the site, all you have to do is deactivate this feature. The minified files are cached.

Media

The Media tab adds features for lazy loading, disabling emojis, disabling WordPress embeds, and enabling WebP caching. Rather than loading every image on the page at once, only the images that will be visible to the reader. As the reader scrolls, the next set of images are loaded. Lazy Loading is done with JS.

You can enable lazy loading for images and videos independently. If you enable lazy loading for video, you’re given another option to replace YouTube iFrames with a preview image. This will greatly improve your loading time if you have a lot of YouTube videos on the page.

Preload

Preloading generates the cache starting with links on your homepage. It’s triggered automatically when you update your content. You can also trigger it manually.

Prefetch DNS Requests allows you to specify external hosts to prefecth from in order to make external files load faster.

Advanced Rules

Advanced Rules allows you to specify URLs, cookies, and user agents that you want it to never cache. You can also specify which URLs to always purge and which query strings to cache. This is helpful for checkout pages, student pages, searches, or other pages where the information changes every time.

Database

The Database tab includes lots of cleanup options. It allows you to permanently delete revisions, auto drafts, trashed posts, spam comments, trashed comments, expired transients, and all transients independently from a single dashboard. You can also optimize the tables and schedule automatic cleanup. This helps keep your database clean, which speeds up access to the data and saves server resources.

CDN

CDN allows you to add a CDN network and specify files to exclude from CDN. When you add a network you can also choose the types of files that it will handle. Select all files, images, CSS and JS together, and CSS and JS independently. This helps save resources for your CDN servers. Most cache plugins don’t have this level of detail for CDN control.

Heartbeat

Heartbeat lets you have control over the Heartbeat API activity to save on server resources. You can enable heartbeat control and reduce or disable activity for the background, post editor, and frontend. It changes the activity from 1 heartbeat frequency per minute to 1 every two minutes.

Add-Ons

The Add-ons tab makes it easy to expand WP Rocket. Enable most of the add-ons with a single button click. Add-ons include Google Analytics, Facebook Pixel, Varnish, Cloudflare, and Sucuri.

The last two require some additional setup, but it’s still simple. This is Cloudflare, which requires a global API, email, and zone ID. You can then enable a few simple selections or clear the cache. Sucuri is even simpler with just a single API field.

Image Optimization

Image optimization allows you to install a plugin called Imagify. This is an image compression tool that reduces the file sizes of images while keeping the image quality. You can also make adjustments to the quality to suit your needs. The free account has a limit on monthly usage.

Imagify requires a separate account and API key. The account is free and setup is easy.

Once you’ve added your API key you can open the settings. The General Settings let you choose the optimization level. Choose between:

• Normal – lossless with no visible change in quality.
• Aggressive – highly optimizes images with no significant loss in quality.
• Ultra – applies all available optimizations for maximum compression level.

You can also set them to optimize automatically on upload, backup the original images, and keep all of the information (EXIF data) for the images.

Optimization allows you to create webp version of images, resize larger images to your specs, and optimize based on image size. Each of the sizes counts toward your monthly usage. You can also add custom folders and your theme for optimization. I added the theme, and the site’s root and wp-content folders.

Display options let you enable the toolbar menu so you can have quick access to the tools. Once you’ve completed your settings, you can save and go to the bulk optimizer.

The bulk optimizer shows an overview with the number of files you’ve optimized and the percentage of space-savings. A circle graph shows the percentages. The overview will show information once you’ve done the optimization.

To do the optimization, you must first select media files to optimize. My choices are the media library and custom folders. Once you make your selections click the button.

This opens a modal that shows the amount of credit you have left and what to expect while the bulk optimizer is working.

It will show animated icons so you’ll know the optimizer is working. It also shows a percentage bar so you’ll know how much of the work is completed. You have to stay on this page until the optimization is completed. If you leave the page and come back later it will start where it left off. Optimization can take a while.

Once the optimization is completed you’ll see the results. In my case, I chose Ultra, which optimized 180 images and saved 71%. The files started at 21.7MB and were reduced to 6.3MB.

It optimized 38 media files in the media library and 171 media files in custom folders.

The images in my test site still look amazing. The level of compression you’ll need will depend on the purpose of your images. For most sites, I’d recommend Aggressive, which is the default.

Tools

Tools lets you export your settings, import your settings, and rollback the plugin to the previous version.

Tutorials

The Tutorials tab includes lots of embedded videos that take you step-by-step through using the plugin. They cover getting started, the best settings, checking your cache, measuring speed, troubleshooting display issues, finding which JS files to exclude, how external content slows down your website, preloading, and setting up the Cloudflare add-on. They play within a modal directly from this screen, so you’re not taken to another website.

WP Rocket and Divi

There are a few issues with using WP Rocket with Divi. Some can be fixed in code. Others require you to disable certain features for specific pages. Here are the issues that I’ve found.

A/B Testing

A/B split testing doesn’t work with WP Rocket. Split testing uses PHP. The cached pages are HTML, so PHP isn’t available on cached pages. You can exclude any pages from the cache that you want to test.

Blog Module

If you’re using the Divi blog module, you won’t be able to use WP Rocket’s Optimize CSS Delivery feature. The blog module won’t display with that feature enabled. You can either disable the feature on the page with the module or exclude the main Divi style sheet.

Slider Module

The lazy loading feature displaces slider images. You’ll need to disable lazy loading for any page using the slider module. This can be solved by adding some code to your child theme.

Masonry Post List

The Masonry list of posts doesn’t show up when you’re minifying JS. This can be solved by excluding a line of code from your builder script.

Shopping Cart Icon

The shopping cart in the menu caches the number of items in the shopping cart. This means the number of items in the shopping cart for the next visitor will be inaccurate since they’ll see a cached version of the page. Shopping carts that are updated with AJAX work fine.

Older Versions of Divi

Divi versions older than 3.26.8 have issues with Divi’s static CSS cache clearing not being synced with WP Rocket’s cache clearing. This can break the post and page styling. To fix it, you’ll need to disable Divi’s Static CSS File Generation feature in the theme options.

WP Rocket and SiteGround

SiteGround offers multiple ways to improve your website’s performance. Their hosting provides caching on the server-side with their SG Optimizer WordPress plugin and their SuperCacher plugin that includes Varnish and Memcached support.

Of course, websites can be optimized further by utilizing browser caching. To improve caching and website speed even further, SiteGround has partnered with makers of WP Rocket to provide optimization for WordPress websites.

If you’re already using SG Optimizer and SuperCacher the results of adding WP Rocket could be small, but it’s still worth adding WP Rocket. WP Rocket does improve your cache and it adds a lot of features that are not available with the SG Optimizer such as Heartbeat API control, tracking of third-party scripts, and more. It works with all three levels of SiteGround’s caching, so they work together well.

WP Rocket has been extensively tested with SiteGround’s servers and they’ve added SuperCacher support. The SG Optimizer detects WP Rocket and disables its own duplicated features automatically. If you delete WP Rocket, your dynamic cache is automatically purged.

WP Rocket Before and After Tests

I’m using WP Rocket on a test site with the Divi builder and a single page that’s built with the landing page from the Digital Marketing layout pack. It includes several full-screen sections with graphics, testimonials, blurbs, embedded video, CTAs, opt-in form, social media buttons, etc.

For my WP Rocket settings, I’ve enabled all of the optimizations with the exception of adding a CDN. I’ve enabled image optimization separately in order to show results with and without the image compression add-on.

Also, keep in mind that the amount of speed improvement will vary depending on the types of pages and content your website has, plugins, hosting, etc. WP Rocket’s tests resulted in a 57% improvement. The results will vary.

I’m testing the site using GTmetrix. Here’s a look at the site before and after I activate WP Rocket. I’ve tested the site multiple times within the same time-frame in order to get the best average.

Before

Here are the GTmetrix results before activating WP Rocket.

• PageSpeed score = D (67%)
• YSlow score = B (80%)
• Fully Loaded Time = 4.9s
• Total Page Size = 2.31MB
• Requests = 53

PageSpeed recommends serving scaled images, optimizing images, defer parsing of JavaScript, minimizing redirects, and optimizing the order of styles and scripts. YSlow recommends using a CDN, making fewer HTTP requests, adding expires headers, avoid URL redirects, and reducing DNS lookups.

After

Here are the results after activating WP Rocket and enabling the settings.

• PageSpeed Score = B (82%)
• YSlow score = A (91%)
• Fully Loaded Time = 2.8s
• Total Page Size = 669KB
• Requests = 17

The PageSpeed and YSlow scores have improved dramatically. The fully loaded time has reduced by almost half, the total page size has reduced by 72%. The number of requests has reduced by 68%. PageSpeed recommends serving scaled images. YSlow recommends using a CDN and adding expires headers.

After Compressing Images

Here are the results after running image compression.

• PageSpeed Score = B (87%)
• YSlow score = A (91%)
• Fully Loaded Time = 2.4s
• Total Page Size = 560KB
• Requests = 17

The PageSpeed score has noticeably improved. The YSlow score has remained the same. The fully loaded time is .4s faster. The total page size is 109KB lower. The number of requests has remained the same. PageSpeed recommends serving scaled images, which is now a score of 10 instead of 0. YSlow recommends using a CDN and adding expiry headers.

Results

The overall results took the

• PageSpeed score from D (67%) to B (87%)
• YSlow score from B (80%) to A (91%)
• Fully Loaded Time from 4.9 seconds to 2.4
• Total Page Size from 2.31MB to 560KB
• Requests from 53 to 17

The fully loaded time was reduced by 49% and the total page size was reduced by 76%. This is an impressive improvement that will see a major impact on the server load and the page-loading time, which will help reduce the bounce rate.

Price

There are three purchasing options:

• Single site – $49
• 3 sites – $99
• Unlimited sites – $249

Each option includes all of the features. Each comes with a year of support and updates. Support is handled through a ticket system Monday through Saturday during normal business hours.

See my discount code page if there is any discount for WP rocket available.

Documentation

Documentation includes lots of articles that cover the features, compatibility, tips and tutorials, troubleshooting, license, and codex. You can look through the topics and sort them. You can also search based on keywords. The articles include step-by-step instructions and links to related articles.

Ending Thoughts

I found WP Rocket to be among the easiest to use of all the cache plugins I’ve tried. It was highly intuitive and I never needed to check the tutorials or documentation, but I’m glad that it does have a lot of help available if I wanted it. The results of my test site were impressive; taking the load time down by half and reducing the page size by 76%. If you’re interested in a cache plugin that’s easy to use, expandable, and offers excellent results, WP Rocket is worth a look.

Have you tried WP Rocket? Tell us about your experience in the comments.

The post WP Rocket Review & Tutorial 2021 appeared first on Mark Hendriksen.

Table of Contents

• 1 Divi Booster Settings
  • 1.1 Site-Wide Settings
    • 1.1.1 Icons
    • 1.1.2 Layout
    • 1.1.3 Links
    • 1.1.4 Site Speed
  • 1.2 Header
    • 1.2.1 Top Header
    • 1.2.2 Main Header
    • 1.2.3 Mobile Header
  • 1.3 Posts
  • 1.4 Sidebar
  • 1.5 Footer
  • 1.6 Divi Builder
    • 1.6.1 Standard Builder
    • 1.6.2 Visual Builder
    • 1.6.3 Modules
    • 1.6.4 Plugins
    • 1.6.5 CSS manager
    • 1.6.6 Developer tools
  • 2 Ending Thoughts

Check my “Elegant themes discount” page if there is a discount available for Divi Booster.

Divi Booster Settings

Divi Booster adds a menu item to the Divi dashboard menu. Its settings screen contains 11 accordions with settings where you can make choices and set up features by choosing colors, adding links, etc. Each includes a link to the documentation. The save button floats at the top of the screen, always keeping it within reach.

Site-Wide Settings

Icons

Icons gives you an upload feature to add new icons to be used in modules, add icons of specific social platforms, and an option to open the social media links in a new tab.
Adding multiple icons is simple, but it does take a couple of steps. There isn’t a way to add them in bulk. Add an icon, save the settings, add the next one, etc., until you’ve added all of your icons.

Layout

Layout lets you add an image before the header and add a URL to it, add a sticky widget, make the main content overlap in a box layout, remove the shadow, and set the content width for mobile. The image and widget are helpful in creating calls-to-action such as sales, signups, etc. The content overlap is helpful for giving your header a different look.

I’ve added an image as a CTA above the menu and an image as the sticky sidebar.

Links

Links can fix the Divi anchor links for scrolling. This ensures that the visitor is taken to the correct location instead of past the anchor link. It also adds an option to open all of the linked images in a lightbox. This is helpful for keeping the visitor on the same page. They can close the image instead of having to click the back button to return to the page they were on.

Site Speed

Site Speed includes a compression option and a feature to stop the Divi map module excerpts from loading scripts that are not needed. Both can reduce the load-times even further than the compression that’s already built into Divi.

Header

With Divi booster you will get ton of options for the top, main and mobile header.

Top header

The Top Header lets you place all of the icons on the right, show the secondary menu social icons on mobile devices, change the link hover color, place all social icons on the left, add text, and make the phone number clickable. These give you a lot more control over the fine details.

I’ve moved all of the top icons to the right, made the phone number clickable, added my own text, and changed the hover color. I’m hovering over the phone number.

Main header

Main Header adds the most options to the header area and a great way to create a custom Divi header. Add a new widget below the links. This is great for CTAs, images, links, testimonials, etc. You can vertically center the header links to get a unique design. It can fix the width/magnifying glass issue. Set the number of pixels the user will scroll before the header shrinks. Add the mobile header to desktop.

Hide the bottom border. Disable the shrink on scroll. Hide the header completely. Set the minimum height. Set the hover colors. Fix sub-link colors on single posts. Specify the space between the menu items. Change the logo link. Change the search icon hover color. Specify where to show the title and tagline and show just one or the other. Add vertical bars between the menu items.

I’ve added the sticky widget, the tagline, the vertical bars between menu items, and increased the space between them. These settings are great for creating headers that can’t normally be made with Divi.

Mobile header

Mobile Header adds several interesting features for mobile devices. Use an app-style header layout. Hide the search icon on mobile. Add text before the menu button. Change the font size. Hide the secondary menu. Change the text. Customize the colors. This is a great way to create a custom menu just for mobile.

Posts

Posts options allow you to make the featured images the same width as the content area, fix the comment button responsiveness, prevent the featured post height from cropping, and to keep from stretching the featured images. These are simple but they can make a difference in the way the content is presented.

Sidebar

Sidebar settings include a customizer for the background color, hiding the divider line, and making the sidebar collapsible. This means you can have some styling options while using the standard WordPress layout instead of using the Divi Builder to create the layout.

I’ve added color, removed the line, and added the collapsible option, which shows an arrow on the right that hides the sidebar.

Footer

Footer settings give you an easy way to create your own custom Divi footer. You can center the links, replace the links for your own text or HTML, and set the content width percentage.

This example uses text and HTML. I’ve set the text styles, added an image, and set the content to 80% of the page width.

Divi Builder

Standard Builder

Standard Builder adds lots of helpful settings to make using it easier and use it in more places. Make the module pop-ups full-screen. Enabled on custom post types and use the main library. Set the minimum width of the CTA button. Add a page layout option. Enable the builder by default on pages and posts. Show the mobile icon on hover in the module settings.

I’d like the ability to enable the builder by default to a specific post type. This would allow me to always have the builder enabled on pages but not posts.

Here’s a Text module opened in full-screen. This is on a WooCommerce product post type using the Classic Divi Builder.

Visual Builder

Visual Builder settings let you show the hover border on modules, hide the builder, and move the publish buttons to the left. This helps make building visually a little easier.

Modules

For the Accordion module, make them start as closed and make them closable. Make left-placed Blurb icons larger. Hide the leading zero for days on the Countdown.

I’ve replaced the coffee image with an icon. Icons are normally about two lines tall.

For the Gallery module, set the default images per row and sizes, the border color, show actual size for small images, disable the slide-in effect, and hide the gallery image titles.

For the Full Width Header, make the scroll down icon bounce and fix an IE issue. Map lets you upload your own map pin icon. Set the Portfolio grid layout’s images per row and sizes, and make the images fill the container.

Set the Filterable Portfolio image sizes and to fill the container. For the Full Width Portfolio, add space between the images and stop them from being stretched. For Post Navigation you can swap the links.

Here’s a look at the post navigation links swapped to the opposite sides.

The Post Slider can make the image link to the post, make the controls square, and make them hollow.

I’ve made them square and hollow.

For the Pricing Table, you can fix the excluded feature space problem, use an improved style, use rounded corners, use + and x for bullet graphics, and use strikethrough to show something is unavailable. For the Signup, use a horizontal style. Most of these features are by Geno.

The nice pricing table style basically creates a new look to the table, almost like a different module.

Here’s the new design for the email opt-in (signup) form.

The Slider module lets you set the default height, add a background color, place images on the right, open links in a new tab, disable the slide-in effect, make the controls square, make the controls hollow, and make the image link to a URL. For the Text module, we can increase the spacing around bullet lists.

Here’s the new slider design. I’ve added the background behind the text, moved the image to the right, and made the navigation hollow.

Plugins

Plugins lets you hide Divi components at checkout for Easy Digital Downloads. For WooCommerce it can remove the cart icon in the header and display 4 items per row. It also fixes issues with Simple Lightbox and PageLoader.

CSS Manager

CSS Manager adds a new custom CSS box that connects to the regular WordPress and Divi CSS options. It also adds a feature where you can create any number of custom locations of how and where the CSS will be used. Choose the user type, page, Divi layout, browser, device, and screen width. Add as many custom CSS boxes as you want. This is an excellent way to target CSS.

Developer Tools

Developer Tools adds a few features that handle code. Import/Export lets you import or export files. Generate CSS lets you generate inline CSS and disable CSS minification. Generate JS lets you use inline JavaScript and disable JS minification. Click the links to see the generated code.

Generated Footer HTML and Generated .htaccess Rules let you see the generated code.

Ending Thoughts

Divi Booster has a lot to offer for its price. It provides useful features for just about every aspect of Divi and it’s easy to use. All of the features are placed within one screen and the controls are intuitive. If you want to add lots of new features to Divi in the easiest way possible, Divi Booster is worth a look.

Have you tried Divi Booster? Let us know what you think about it in the comments.

You might also like…

• The Best Divi Plugins On Elegant Themes Marketplace

The post Divi Booster Plugin Review appeared first on Mark Hendriksen.