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.

Divi’s Aspect Ratios

Understanding aspect ratios help in designing layouts, using images in multiple layouts, and moving images from one layout to another. For example, it helps in setting featured images that work well both the blog post and within the blog modules for any layout or size screen. This also helps keep the sizes uniform.

What is aspect ratio?

An aspect ratio is the proportions of the width and height of an image or a screen. It is expressed by the proportions of the width and the same proportions of the height separated by a colon such as x:y or 2:3. If 2 represented 100 pixels then 3 would represent 150 pixels. 100×150 has an aspect ratio of 2:3.

Aspect ratios need to be chosen for the medium they’re displayed on. For example, an image designed for a widescreen will be different from one designed for a tall and narrow screen.

Popular aspect ratios

The most popular example is 16:9. This expresses 16 of a unit of measurement times 9 of the same measurement. This is the ratio of today’s standard high definition TV or computer monitor and is expressed in pixels. Many 16×9 screens display 1920×1080 pixels.

Divi aspect ratios and sizes

Knowing the best ratios and image sizes for Divi helps us to design the best layouts possible. Divi was designed with several aspect ratios on mind including 16:9, 4:3, and 3:4. These are common ratios for images.

Share this Image On Your Site

You can download a pdf version of this cheat sheet in your membership dashboard under the tab cheat sheets. Not a member yet? you can sign up here for free.

For Divi, the images need to be as wide as the column they’re placed in. Also, be sure to include space for padding if you plan to have space between your images. There are several ways you can measure the space needed. For example, you can add a placeholder image and then check the size of the image in Google Chrome Tools or using a measuring tool.

Measurement tools, such as a Chrome extension called Page Ruler, allows you to measure areas of the screen. This is useful for measuring the width of the modules.

Divi columns and sizes

16:9 is the standard ratio for monitors. It’s great for full-width images and headers.

Here are the general image sizes for the main column widths:

• 1 column: 1080 x 608px
• ¾ column: 795 x 447
• ⅔ column: 700 x 394
• ½ column: 510 x 287
• ⅓ column: 320 x 181
• ¼ column: 225 x 128

4:3 is slightly wider than it is tall. This was the standard ratio for older monitors and it’s a good ratio for most images.

Here are the general image sizes for the main column widths:

• 1 column: 1080 x 810px
• ¾ column: 795 x 597
• ⅔ column: 700 x 526
• ½ column: 510 x 384
• ⅓ column: 320 x 241
• ¼ column: 225 x 170

3:4 is slightly taller than it is wide and is a great choice for displaying portraits.

Here are the general image sizes for the main column widths:

• 1 column: 810 x 1080px
• ¾ column: 597 x 795
• ⅔ column: 526 x 700
• ½ column: 384 x 510
• ⅓ column: 241 x 320
• ¼ column: 170 x 225

1280px wide and 1920px wide can be used for full-screen images.

These dimensions are just guidelines. Although Divi can accommodate any size image, these ratios work best in Divi layouts. Your actual sizes will vary based on the content and needs, but they will help you get an idea of what works best where. To help you determine the image sizes for these ratios, take a look at an online tool called Aspect Ratio Calculator.

Optimizing Your Images to Reduce Page-Load

The larger the file size of your images the longer the page will take to load. It’s important to optimize your images so your pages will load as fast as possible. Images that take too long to load will increase your bounce rate and reduce your SEO. Keep your images between 60 and 200kb for the best performance and good quality.

Resize Images

Resize the images so they fit within the space you want to use them. Don’t use a 1920px wide image in a space that only needs a 225px image. Resizing the image dramatically reduces the file size and it looks the same as a larger image in the small space. If you plan to use the same images in multiple places it’s best to create a new image that’s sized specifically for each location.

Compress Images

Once the images are resized their file size can be reduced further by compressing them. Compression tools reduce the number of colors and removing unneeded metadata. Files can be reduced as much as 70% or more without a noticeable difference in quality. Images can be compressed with image editing apps or with online tools (more about tools later).

File Types and File Sizes

The most common file-types for the web are JPEGs and PNGs. Both are highly compatible with browsers across multiple platforms. Both have their advantages and both use compression to reduce their file sizes. GIFs are also popular for animated images.

File sizes will vary based on the number of colors and detail in the image.

JPEGs are excellent for photos with lots of colors. They’re good choices for background images and featured images. They compress well without losing much quality. They’re not recommended for icons because it can’t be guaranteed that they’ll have clean edges. They tend to be larger files than PNGs and they can’t have transparent backgrounds.

PNGs are great for small images with lots of detail, which makes them great for screenshots. They have clean edges and support transparent backgrounds. This makes them ideal for buttons, icons, and logos. They compress well, but the file sizes can get large if they have a lot of colors.

GIFs are great for short animations with a few colors and low resolution. They’re ideal for showing how a feature works, what happens when a button is clicked, etc. They can become large files really fast if the animation goes on for more than a few frames.

Image Compression Tools

There are lots of good quality free and premium tools available to compress your images while retaining excellent quality. Here’s a look at a few options.

Offline compression apps

ImageOptim – is a free, open-source, app for Mac that combines the best optimization tools to shrink images for use on the web.

Squash – is a premium app for Mac that lets you tweak the level of compression to get your preferred quality to file size ratio. It can also convert file types.

Caesium Image Compressor – is a free, open-source, compression tool for Windows, Mac, and Linux that can compress images up to 90% without noticeable loss of quality. It has a preview and multi-image processing.

Offline image editors

Photoshop – has been the industry standard image editor for many years. It’s available for Windows and Mac. It’s the most expensive and complex, but it also has the most features.

Gimp – is a free, open-source, professional-quality graphics editor for Mac, Windows, and Linux. It’s an excellent Photoshop alternative.

Paint.NET – is a free image editor for Windows. It’s simpler than most editors but still has features such as layers. It’s an excellent option for a free app that’s simple to use.

Paintshop Pro – is a professional graphics editor for Windows that provides a lot of image editing features at a relatively low cost.

Affinity Photo – is a premium image editor for Mac that provides professional-level photography tools at a relatively low cost.

Online tools

Bulk Resize – an online tool that resizes images on your computer so you don’t have to upload them.

TinyPNG – compresses PNG’s and JPEG’s using a smart lossy compression that reduces the number of colors, but is almost non-detectable.

Compress JPEG – part of a series of sites that compresses and converts JPG, PNG, and PDF files. It also has a manual mode if you want more control over the compression.

WordPress plugins

Smush – Resizes and compresses any image in any directory using lossless compression. It will resize the images, compress in bulk, compress on upload, add a lazy loader, and more.

WP-Optimize – uses lossy compression to compress and convert JPG, PNG, GIF, BMP, and TIF file-types. It will also clean your database and cache your site. It will compress in bulk, compress on upload, and has a restore feature.

EWWW Image Optimizer – has lossy compression for JPG, PNG, and PDF files with intelligent conversion so you always have the right file-type for the job including JPG, PNG, or GIF. Its goal is to increase page speed without sacrificing quality.

Ending Thoughts

That’s our look at the best Divi image sizes for your website. Every website is different, but understanding the aspect ratios and best image sizes for Divi will help you create the best images for your Divi website.

What aspect ratios and image sizes do you prefer for your Divi website? Let us know in the comments.

You Might Also Like…

• How To Change Divi Featured Image Size For Your Blog
• How To Change The Divi Gallery Thumbnail Size

The post Best Divi Image Sizes for Your Website appeared first on Mark Hendriksen.

This can be frustrating to deal with (especially when you’re trying to get work done). Fortunately, it isn’t that difficult to fix. In this article, we’ll look at how to fix the Divi Builder timeout error.

What Causes the Divi Builder Timeout Error

There are several causes for the timeout error:

1. Divi needs to be updated
2. A plugin needs to be updated
3. A plugin is conflicting with Divi
4. Your PHP version needs to be updated
5. Your website’s memory limits need to be increased

If updating Divi, updating your plugins, or disabling plugins to troubleshooting a conflict do not solve the problem you’ll need to check your PHP version and memory limits. Here’s how to do this.

Updating Your PHP Version

You might need to change your PHP to a newer version. To see your PHP version, login to your host’s cPanel and scroll to the section labeled Software. Here, you’ll see an app labeled PHP Configuration or PHP Version (or something similar). Every host looks different, but they mostly work the same way.

Here, you’ll see the current version, the system default, a dropdown box with PHP versions, and links to see information about each version to help you decide which is best for you. In this image, the most recent version of PHP that is available to me is 7.3 and the default is 7.0. Many hosts have version 7.0 set as the default. As you can see, this host goes back to version 5.3. You might see other links for help with the PHP versions.

Select a higher version of PHP and click Update. Test your Divi website again. If the problem continues, then try a different version.

Increasing Your Website’s Memory Limits

There are several ways to increase the memory limit of your WordPress website. You might have to try them all. Make sure you have a recent backup before making these changes.

PHP Options

Some hosting providers include memory options in the PHP options configuration settings in the cPanel. Your hosting provider can make these changes if you don’t have access to these settings. If you have a feature to select options and make changes, then you’ll want to set your memory limits to something like this:

• post_max_size 128M
• max_execution_time 180
• upload_max_filesize 256M
• max_input_time 600
• max_input_vars 5000
• memory_limit 512M

.htaccess

In your cPanel (or using SSH or FTP), go to the WordPress root directory. Scroll down or search for a file named .htaccess. Select to edit this file and add this code:

php_value memory_limit 256M

If you get an error when loading your website, such as an internal server error, remove the code and contact your host for help.

wp-config.php

Edit your wp-config.php file. You’ll find this in your WordPress root directory.

Scroll to the bottom and find a line that says “That’s all” and add this code above that line:

define(‘WP_MEMORY_LIMIT’, ‘256M’);

Edit your PHP.ini file

Search for your PHP.ini file in your WordPress directory in cPanel.

Look for a line that shows the maximum amount of memory a script can consume. Make sure the amount is at least 256M.

Ending Thoughts

The Divi Builder timeout error can be frustrating, but it’s usually easy to fix. Updating PHP is the most popular fix, followed by .htaccess. Always keep a recent backup before making changes to your code.

It’s also possible that a conflict with a plugin could cause the problem. Try disabling plugins one at a time to see which one could be the problem. Also, try a different browser. If none of this works, then you might consider reverting back to an older edition of Divi.

If none of this works, contact your host to see what they can do to increase the memory limits for you. There may be something you don’t have access to that they can change.

You Might Also Like…

• How To Fix Missing Post Content Module
• How To Fix Divi Flashing Unstyled Content On Page Load

The post How to Fix the Divi Builder Timeout Error appeared first on Mark Hendriksen.