2 Best Divi Plugins to Create Mega Menu

Menu is one of the areas you can maximize to increase the user experience of your website. In Divi, the options to customize your site menu are limitless thanks to Divi theme builder feature whereby you can create a custom header template and use the Menu module to add a menu and then customize it to your liking. Divi offers no module to create a mega menu, though. If you want to create a mega menu on your Divi-powered WordPress site, you can use one of the following plugins.

As mentioned above, mega menu is one of ways to increase the user experience on your website. It allows you to add additional content other than navigation menu. From a contact form, map, blog posts, and so on. Without further ado, here are Divi plugins that you can use to create a mega menu.

Divi Plugins to Create a Mega Menu

1. Divi Mega Menu

Divi Mega Menu is the first Divi plugin to create a mega menu. It is a product of Divi Engine, a prominent developer in the Divi community. You can see the demos of mega menus created with Divi Mega Menu on this page. As you can see on the page, there are a wide range of mega menu types you can add with the plugin. You can add content types like blog posts, map, contact form, and so on — on your mega menu. Divi Mega Menu itself offers two modules dedicated to creating the mega menu:

  • Vertical Tabs
  • Mega Drop Down

The ability to customize the mega menu via Divi Builder allows you to create a decent-look mega menu more effortlessly. The Divi Mega Menu itself is available on the Divi Marketplace. You can also get it on the official website of Divi Engine.

2. Divi Mega Pro

As you might guess from its name, Divi Mega Pro is a Divi plugin designed to create a mega menu. In addition, you can also use to create a mega tooltip. You can use the Divi Mega Pro plugin on any website type, even an e-commerce website. If you have an e-commerce website powered by Divi and WooCommerce, you can use the Divi Mega Pro to display your products on your navigation menu. Running a blog? Divi Mega Pro is a great plugin to increase the user experience then. You can display your blog posts on the navigation menu of your website.

Of course, you can also display other content types on your navigation menu. From contact form, map, image, and so on. The creation of mega menu itself is done via Divi Builder.

As said above, Divi Mega Pro can also be used to create a mega tooltip. What is that? Take a look at the following screencast.

The Bottom Line

People are more interested with visual content. If you want to increase the user experience of your website, you can add more visual content on your website by creating a mega menu. A mega menu allows you to display blog posts (that contain featured images), products, image, or contact form on the navigation menu of your website. Since Divi has no built-in feature to create mega menu, you can install a plugin to create a mega menu on your Divi-powered WordPress. Divi Mega Pro and Divi Mega Menu are two examples of Divi plugins that you can use to create a mega menu. You can get them on Divi Marketplace or the official website of each plugin.

5 Divi Plugins to Create a Popup

One of the features that is not available in Divi is a popup builder. Whereas its competitors like Elementor (read: Elementor vs Divi) and Brizy have one. You can actually install the Bloom plugin, a popup builder plugin by Elegant Themes, to create a popup on your Divi-powered WordPress site. However, the use of Bloom is limited to email opt-in popup. Also, there is no option to create the popup using the visual editor of Divi Builder. You can install a plugin to create a beautiful popup using Divi Builder. Have no idea which plugin to use? We have compiled some options you can opt to.

One of the things you need to notice when selecting a popup builder plugin is the offered features. Particularly, you need to learn the trigger type offered by the plugin you want to use. For instance, if you want your popup to appear when a visitor clicks a certain element on a page, you need to make sure the popup builder plugin supports on click trigger. Here are some of Divi plugins to create a popup.

Divi Plugins to Create a Popup

1. Divi Overlays

Divi Overlays is the first plugin you can consider if you want to create a popup on your Divi-powered website. The plugin is designed specifically to create popups in Divi. You can use it to create a wide range of popup types, not limited to email opt-in popup like Bloom. Also, Divi Overlays allows you to design the popup using Divi Builder so that you can create a beautiful popup more easily. Divi Overlays supports both automatic triggers and manual triggers.

Automatic triggers:

  • Timed delay
  • Scroll delay
  • Exit intent
  • URL

Manual trigger:

  • On click

To use the on click trigger, you can use the Divi Button module. Or you can also use the manual trigger on Divi elements like section, and row. With a bit creativity, you can also use the manual trigger to create a full-width menu. Another appealing feature offered by Divi Overlays is the ability to set the location of the popup to appear. You can set the popup to appear on the entire website or specific page(s) only. There are also readymade popup templates to save you time in creating a popup. Divi Overlays is available on Divi Marketplace.

2. BrainConKit

Unlike Divi Overlays above, BrainConKit is a multipurpose Divi plugin. Meaning that it is not designed specifically to be a popup builder plugin. Popup builder is just one of the features offered by BrainConKit. With BrainConKit, you can add creative elements to your page using the offered modules like Video Popup, Icon Box, Image Masking, Lottie Animation, and so on. There are about 36 modules offered by BrainConKit in total.

The popup builder feature of BrainConKit itself supports the following trigger types:

  • Page load
  • Page scroll
  • On click
  • Exit intent

You can also set where the popup to appear. Whether on the entire website or specific page(s). With the popup builder of BrainConKit you can create popup types like promotional banner, email opt-in, welcome, and so on. BrainConKit is also available on Divi Marketplace.

3. Divi Supreme

Divi Supreme is one of the most popular Divi plugins. The developer strategy to release Divi Supreme as a freemium plugin makes it gain more users than other Divi plugins which mostly released as paid plugins. Divi Supreme is also designed to be a multipurpose plugin like BrainConKit above. The pro version of Divi Supreme comes with a popup builder to allow you to create a beautiful popup on your Divi-powered WordPress site. You can read our previous article to learn how to create a popup in Divi using Divi Supreme.

The popup builder feature of Divi Supreme itself supports four trigger types as follows:

  • On click
  • On page load
  • On exit intent
  • On page scroll

A downside of the Divi Supreme popup builder is that it doesn’t support display condition. You need a little trick to display a popup on the entire website.

4. Divi Areas Pro

Divi Areas Pro is a feature-rich popup builder plugin for Divi. It offers all features that all of the first three plugins above offer. Divi Areas Pro comes with more advanced features, though. Its display conditions feature allows you to set where the popup to appear. If you want it, you can also hide a popup on a certain device type (desktop, tablet, smartphone). Divi Areas Pro also offers more trigger types than other plugins above. Here are the trigger types offered by Divi Areas Pro:

  • On click
  • On hover
  • On page scroll
  • After delay
  • On inactivity
  • URL
  • Exit intent

Divi Areas Pro offers a dedicated tab on the settings panel of Divi to control your popup. You can see the tab after installing and activating the Divi Areas Pro plugin on your WordPress site.

The Divi Areas Pro plugin is developed by Divimode. The developer also offers the free version of its popup builder plugin with fewer features.

5. Divi Modal Popup

Another popup builder plugin you can use on your Divi-powered WordPress site is Divi Modal Popup. It is a more affordable solution compared other plugins above as you can get it at under $30. Divi Modal Popup allows you to create a modal popup. You can add content types like text and image to the popup. It is also possible to create a popup from a layout and then call it using the supported by trigger types. The trigger types offered by Divi Modal Popup are:

  • On click
  • On page load
  • Time delay

The on click trigger type can be implemented on Divi modules like Button, Text, and Image.

The Bottom Line

Being a paid member of Elegant Themes, you can install the Bloom plugin if you need to create a popup on your Divi-powered WordPress website. However, there is only one popup type you can create as we have mentioned earlier above. Plus, Bloom doesn’t allow you to create the popup from Divi Builder. Installing a plugin is a better idea to create a popup in Divi. You have more options to customize your popup. More importantly, you can make use of the Divi Builder visual editor to create the popup.

How to Import Header and Footer Layout in Divi

The Divi theme offers plenty enough options to customize your site header. You can set the header color, header size, typography of the menu, and so on. You can also add items like search icon, social media icon, email address, and so on. Still, you might want more. If it is the case, you can use the theme builder feature of Divi to create your own custom header template. Unlike Elementor (read: Elementor vs Divi) and Brizy, Divi offers no premade templates (called layouts in Divi) for header and footer on its library. However, it doesn’t mean you always need to start from scratch every time you want to create a new custom header or footer layout. Elegant Themes — the developer of Divi — regularly releases new free premade header and footer layouts via blog posts.

How to Import a Premade Header and Footer Layout in Divi

Working with a premade layout is a bit tricky in Divi. The reason is that in Divi, layout is divided into three types:

  • Regular layout (et_builde): A layout exported from a page or post
  • Library layout (et_builder_layouts): A layout exported from Divi Library.
  • Theme Builder Layout (et_theme_builder): A layout exported from Divi theme builder.

Each layout type can only be imported based on their respective context. For instance, you can only import a header layout on theme builder. You can’t import a header layout from the Divi Builder editor. When importing a header layout from the Divi Builder editor, you will see the following error message.

You can read our previous article to learn more.

Importing a Header/Footer Layout

As mentioned earlier, Divi offers no premade header/footer layouts on its library. Instead, you can get a premade header/footer layout from the official blog of Elegant Themes. Here is an example of a premade header/footer layout you can download.

After downloading the layout (which is available in a ZIP format), unzip to get the JSON file. Next, go to Divi -> Theme Builder on your WordPress dashboard. Click the two-arrow icon on the right side.

On the appearing dialog, click the Import tab followed by NO FILE SELECTED to select the JSON file of the header/footer layout you want to import. Click the Import Divi Theme Builder Templates once the file is selected.

Wait until Divi is done importing the layout. Divi will automatically add a new template block on theme builder once the importing process is done.

To change the display conditions, you can click the gear icon on the template block, which will appear when you hover your cursor over it.

Don’t forget to click the Save Changes button to apply the changes.

11 Common Elementor Errors and How to Fix Them

Elementor is the main option for WordPress users who put design on the emphasis. It allows you to create a beautiful website in a visual way without needing to deal with either CSS or HTML. When working with Elementor, you might experience some errors like the widgets panel not working or the editor can’t load. We have summarized the most common Elementor errors and show you the list in this article. Each error is also added the solution how fix it.

Common Elementor Errors

1. Widgets Panel Not Loading

Elementor comes with a centralized panel which lies on the left side of the editor. You can use the panel to add a widget, set the basic settings (e.g., setting up the page layout), make the customizations to a widget, and so on. On certain moments, you might be unable to add a new widget as the widgets cannot be loaded. This error usually happens when you have too many Elementor add-ons activated. Another possible error cause is that your hosting specs don’t meet the minimum requirements of Elementor.

How to fix the error:

There are at least two ways to fix the error type above. First, you can temporarily deactivate the installed WordPress plugins (except Elementor) to find which plugin causing the error. Particularly, you can deactivate the active Elementor add-ons. Second, you can switch to another theme. Temporarily switching to a default WordPress theme (e.g., Twenty Seventeen) would be great. You can read our previous article to learn more about how to fix this error type.

2. Form Not Sent

Elementor Pro comes with a widget — the Form widget — to allow you to create a form. You can use the Form widget to create any type of form, including a contact form. The common error when creating a contact form in Elementor is that the form data is not sent. The error usually happens when you set the form action to email.

How to fix the error:

Just like other form builder plugins, Elementor also uses the wp_mail function as the mail delivery service. The wp_mail function itself depends on send_mail belongs to PHP to work. The problem is, not all hosting providers enable this function. Thus, you need to ask your hosting provider to enable the send_mail function to make the wp_mail function work. Alternatively, you can use a custom SMTP service on your WordPress site. You can read our previous article to learn more about how to fix the form not sent error in Elementor.

3. Excerpt Length Not Working

The Posts widget of Elementor allows you to display blog posts on your WordPress site on any page. It comes with some setting options, including the excerpt length. On some cases, the length of the excerpt doesn’t appear as you have set when you preview or publish the page. The error usually happens when you use Elementor on WordPress themes that have a built-in setting option to set the excerpt length.

How to fix the error:

Instead of setting the excerpt length via Elementor settings panel, you can set the excerpt length via theme customizer (Appearance -> Customize). You can read our previous article to learn more.

4. Editor Failed to Load

This error type is similar to error number one above, but a bit more fatal. All you see is a preloader on a grey page. There are some causes that trigger the error. One of which is insufficient server resource caused by too many loads.

How to fix the error:

There are some alternatives you can try to fix the error.

  • Deactivate plugins

One of the causes of this error type is a conflict between Elementor and another plugin. Thus, you can deactivate the plugins — except Elementor, of course — to find out which plugin causing the conflict.

  • Disable theme preloader

Some WordPress themes come with a default preloader. If you use a theme that has a default preloader, you may need to disable it in order for Elementor editor to open.

  • Disable browser extensions

Sometimes, the error type is caused by an extension installed on your web browser. To figure it out, you can use a different web browser. If the Elementor editor opens normally on another browser, you can disable extensions on your main browser to figure out which one causing the error.

  • Make sure the Elementor versions are compatible

If you use both Elementor Free and Elementor Pro (read: Elementor Free vs Elementor Pro), make sure they are compatible. If you use one older than another, this can cause the incompatibility. When updating Elementor Free, make sure you also update Elementor Pro version when available — and vice versa.

5. 500 Internal Server Error

Another common error you might experience when working with Elementor is 500 internal server error. When you face this error, the error is on your server side instead of Elementor. There are several causes that trigger this error type. It can be PHP memory limit, wrong file permissions, corrupted .htaccess file, browser cache, corrupted database, and so on.

How to fix the error:

As mentioned above, there are a wide range of scenarios that cause the 500 internal server error. Thus, you can fix error according to the error cause. If the cause is PHP memory limit, you can ask your hosting provider to increase the PHP memory limit. You can refer to this page to learn more about the 500 internal server error in WordPress.

6. Changes Not Applied on the Live Page

Elementor has a visual editor that comes with a live editor. Meaning that what you see on the editor will look precisely the same on the live page. However, there is a scenario where the stylings you applied on the editor are not applied on the live page. This error is usually caused by caching issue.

How to fix the error:

  • Clear the cache

You have learned the error cause — caching. So, you can fix the error by clearing the cache on your web browser. If you have a caching plugin on your WordPress site, you can also temporarily deactivate it.

  • Regenerate CSS

If the method above doesn’t work, you can regenerate CSS. To do so, go to Elementor -> Tools on your WordPress dashboard. Click the Regenerate Files & Data button.

You can also combine the two methods above.

7. The Publish/Update Button Not Working

Once you are done editing a page with Elementor, you can click the Publish/Update button on the bottom side of the settings panel to publish/update your page. What if the button doesn’t work?

There are two main reasons to cause the publish/update button doesn’t work in Elementor. First, it can be memory limit. Second, it can be security issue.

How to fix the error:

  • Increase the PHP memory limit

In order to make Elementor work properly on your WordPress site, your server needs to have at least 128 MB of PHP memory limit, with 256 MB or higher is more recommended. If your hosting provider only offers 128 MB of PHP memory limit, you can make a request to increase it.

  • Install SSL on your site

Today, most websites have used SSL (HTTPS). In case you haven’t used one, you can install it on your WordPress site. Most hosting provider offer SSL as a default feature. If your hosting provider uses cPanel, you can install SSL via cPanel.

8. Custom CSS Not Working

The custom CSS feature offered by Elementor Pro allows you to achieve certain stylings that are not offered by Elementorby default. Normally, after you add a custom CSS code, the change is applied to the live page once you publish/update the page. If not, there might be caching issue on your website.

How to fix the error:

Same as error number six above, you can clear the cache to fix this error type. You can clear the cache of both your web browser and your website. Before doing so, you can regenerate CSS as shown on number six above.

9. Text Color Not Changing

In Elementor, there are two widgets to add text elements to a page — the Text Editor widget and the Heading widget. When working with these widgets (and other widgets that have options to customize the text), you can set the text color. In some cases, the text color doesn’t work on the live page.

How to fix the error:

If you have set the text color, yet it is not applied on the live page, chances are there is a conflict between Elementor and the theme you use. Some WordPress themes come with advanced setting options to control the colors of your site elements, including the text. To fix the conflict, you can reset the color settings of your theme in order for the Elementor styles to take effect. You can do so from theme customizer (Appearance -> Customize) or the settings panel of your theme if it has one.

10. Theme Builder Conflict

If you use Elementor Pro, you can customize every single part of your WordPress site in a visual way thanks to theme builder feature. From the header, footer, archive pages, single post, single page, 404 page, search results page, and so on. Some Elementor add-ons (e.g., JetThemeCore) also have similar feature. If you have created a certain custom template using Elementor theme builder (e.g., custom header template) and install JetThemeCore, there is a big chance that your custom template won’t work.

How to fix the error:

If you use JetThemeCore, you can install JetThemeCore Compatibility Kit. It is a WordPress plugin developed by Crocoblock to overcome the incompatibility issue between Elementor theme builder and JetThemeCore.

11. Custom Fields Not Showing Up in the Canvas Area

The ability to add custom fields is another feature offered by Elementor Pro. You can make use of this feature to create a complex dynamic website. Elementor itself supports popular custom field plugins like ACF, Pods, Meta Box, Toolset, to JetEngine. When trying to add a custom field in Elementor, you might face a problem whereby the custom field data doesn’t appear on the canvas area of the Elementor editor.

How to fix the error:

One thing you need to know first. Custom fields can only be added to a custom template (e.g., custom single post template). You can’t add a custom field to a regular page.

If you have added a custom field to a custom template but the associated custom field doesn’t appear, you can change the preview setting. Click the gear icon on the bottom-left corner and open the Preview Settings block. Select the content type associated with the custom template you are working on and select an existing content. Click the APPLY & PREVIEW button.

You can read our previous article to learn more about how to fix this error type.

The Bottom Line

You have known it. That Elementor is the most popular page builder plugin for WordPress. There are some common errors experienced by Elementor users as we have mentioned above. Before you install Elementor on your WordPress site, you can make sure that the specs of your hosting meet the minimum requirements demanded by Elementor to minimize the error when working with Elementor. Here are the system requirements of Elementor:

  • WordPress version: 5.2 or higher
  • PHP version: 7 or higher
  • MySQL version: 5.6 or higher
  • PHP memory limit: 128 MB or higher

Although Elementor supports add-ons to extend its functionality, you better install an add-on only when you really need it. This can also minimize the error potential as each add-on you install consumes server resource. Another thing to notice. Make sure to install one page builder plugin on your WordPress site as installing two or more page builder plugins can cause a conflict.

How to Add Image Hotspots in Divi

There are a lot of ways to convey a message or something via an image. One of which is by implementing image hotspots. In the context of web design, the implementation of image hotspots is great if you want to explain something to your audience. For instance, you can use image hotspots to explain parts/components of a by bicycle. Another example, you can use image hotspots to explain the anatomy of the human body. Take a look at the following screencast to learn how image hotspots work.

As you can see on the screencast above, a tooltip appears as the cursor is hovered over the icon (hotspot). There is also a little animation effect to make everything looks more appealing. If you have a WordPress site built with Divi, you can effortlessly add image hotspots using Divi Supreme. Read on to learn more.

How to Add Image Hotspots in Divi Using Divi Supreme

It’s very rare to find a page builder plugin that come with a default element to add image hotspots. To date (August 3, 2021), Divi Builder and Elementor — the two most popular page builders — have no such default element (read: Elementor vs Divi). In Divi, you can use Divi Supreme to add image hotspots on your page.

Divi Supreme is one of the most popular Divi plugins with over 90,000 users. It is released as a freemium plugin. However, you need to use the pro version to add image hotspots as the module to do so is only available on the pro version. You can get the pro version of Divi Supreme on Divi Marketplace.

Assuming you have installed the pro version of Divi Supreme, edit the page you want to add the image hotspots to using Divi Builder. Once the Divi Builder editor opens, add a new module by clicking the grey button and select Supreme Image Hotspots. On the appearing settings panel, select the image you want to use on the Image block under the Content tab.

Still on the Content tab, click the Add New Item button to add your first hotspot item.

Select the hotspot type on the Type dropdown on the Hostpot block. There are three hotspot types you can choose from: icon, image, and text. If you want to use an icon, simply pick your preferred icon from the available options.

Once done with the hotspot, you can open the Tooltip block to add the tooltip content. Make sure to enable the Use Tooltip toggle to add the tooltip content.

If you want to add a link to the tooltip, you can simply open the Link block. Click the return icon on the top-left corner of the panel to switch back to the main window of the settings panel of the Supreme Image Hotspots module. You can click the Add New Item button to add another hotspot.

Customizing the Hotspots

To customize a hotspot item, first, click the gear icon of the hotspot item you want to customize on the main window of the settings panel.

Next, open the Hotspot Settings block on the settings panel to set the position of the hotspot item. From this block, you can also set the padding, hotspot border radius, hotspot border width, hotspot border color, and hotspot border style.

Next, you can open the Hotspot Text block, Hotspot Icon block, or Hotspot Image block to customize the hotspot, depending on the hotspot type you use.

To customize the tooltip, you can open the Tooltip Settings block. From this block, you can set the tooltip placement, background color of the tooltip, and max width of the tooltip.

To customize the tooltip content, you can open the Tooltip Body block. From this block, you can set the typography (font family, font style, font size, and so on) of the tooltip content, text color, and font size.

There are five other blocks you can open to customize the hotspots. On the bottom block (the Animation block), you can enable the Use Pulse Animation option to enable the pulse animation effect.

Once done customizing the first hotspot item, you can click the return icon on the top-left corner of the settings panel to return to the main window of the settings panel of the Supreme Image Hotspots module. Repeat the steps above to customize the remaining hotspot items.

Setting Up the Trigger Type

By default, the tooltip will appear when you hover your cursor over the hotspot item. You can change it to on-click if you want it. To do so, on the main window of the settings panel of the Supreme Image Hotspots module, open the Hotspot Settings block under the Design tab. You can select the trigger type on the Trigger Event dropdown.

As you can see, there are blocks with the same names on the main window of the settings panel of Supreme Image Hotspots module as the ones on the settings panel of the individual hotspot items. You can use these blocks to make the global customizations to the hotspot items.

The Bottom Line

Divi Builder, just like other page builders like Elementor and Brizy, has no default element (module) to add image hotspots. Divi Supreme is one of the plugins you can use if you want to add image hotspots to a page. The implementation of image hotspots itself will be useful for certain cases. For instance, you can add image hotspots when you want to explain the anatomy of the human body, components of hardware, and so on. You can rewatch the screencast we added on the beginning section above to learn the implementation example of image hotspots.

Pin It on Pinterest

Creating with WordPress?‚Äč

Subscribe and join 1,500+ WordPress users receiving tips and insights on creating with WordPress in the no-code era. At WP Pagebuilders, we write about the following topics a lot.