How to Fix the “This file should not be imported in this context” in Divi Builder

When working with Divi Builder, you can either export or import a layout. Thanks to this feature, you can save time in working on a page with Divi Builder. But sometimes, you will see the following error message when importing a Divi Builder layout.

Actually, the error message itself has provided a clue about the error. When you export a layout in Divi Builder, the exported layout is assigned a context to it. For instance, if you export a layout from an individual page/post, the exported layout is assigned an et_builder context. A layout assigned the et_builder context can only be imported from an individual page/post and cannot be imported from the Divi Library or Theme Builder. There are at least three layout contexts in Divi Builder.

  • et_builder: For a layout exported from an individual page or post
  • et_builder_layouts: For a layout exported from Divi Library (Divi -> Library)
  • et_theme_builder: For a layout exported from Theme Builder (Divi -> Theme Builder)

How to know the context of the layout? You can open the JSON file of the layout you want to check the context of with a text editor such as Notepad or Notepad++. You can find the context in the beginning section of the file.

How to fix the problem

If you see the error message like the one we have covered above when importing a Divi layout, you can open the JSON file to check its context and make sure that you import the layout from the right place.

A layout with et_builder context should be imported from an individual page or post, a layout with et_builder_layouts context should be imported from Divi Library, and a layout with et_theme_builder context should be imported from Theme Builder.

How to Fix “Server error. Form not sent” When Creating a Form in Elementor

Elementor Pro has a Form widget that you can use to create a wide range of form types. However, creating a form with this widget might is not as easy as it looks like especially if your website is hosted to a shared hosting service. When testing your form, you might see a “Server error. Form not sent” message like the following.

You will see the error message above if you set the button action to email (which means your form submissions will be sent to the specified email address). In this post, we will show you how to fix the error.

The Error Cause

There is a function called wp_mail in WordPress. Elementor uses this function to send emails. When you click the submit button on your form, your web hosting service takes the sent email, processes it, and sends it to the specified email address. Unfortunately, some web hosting providers disable the PHP function used to send emails.

The WordPress wp_mail function uses the PHP send_mail function by default. So, when this function is disabled by your hosting provider, WordPress unable to send emails.

How to Fix the Problem

There are two ways you can do to fix this problem. First, you can contact your web hosting provider and request to enable the PHP send_mail function. Alternatively, you can use an SMTP server.

In this post, we will show you how to fix this problem using the second method. No, you don’t need to install an SMTP server. We will use a plugin to add an SMTP feature to your WordPress. The plugin is Post SMTP and it’s completely free. This plugin allows you to use either an SMTP server of your own or SMTP server of services like Gmail, Mandrill, and SendGrid (via an API). We use Gmail in this case. You can use whether the free version of Gmail (gmail.com) or G Suite (Gmail with a custom domain).

  • Get the Google app Client ID and Secret Key

Before installing and using the Post SMTP plugin, you need to create a Google app to get its Client ID and Secret Key. To do so, visit Google API Console and login with your Google account. Select a project from the dropdown menu on the top side.

If you have no project yet, create a new one by clicking NEW PROJECT.

Give your project a name and click the CREATE button.

Before getting the client ID and the Secret Key, you need to add your domain first. Make sure that your domain has been verified via Google Search Console (formerly Google Webmasters). Also make sure that you use the same Google account for the verified domain. To add your verified domain, click Domain verification on the left panel and click the Add Domain button.

Type your domain name (without http:// or https://) and click the ADD DOMAIN button. A little note, if you use “www” on your site, make sure to type it on the field.

Once your domain is added, click OAaut consent screen on the left panel, select the External option, and click the CREATE button.

Add Application name, select Support email and add Authorized domain. Then click on the Save button on the bottom.

Click Credentials on the left panel. Click the Create credentials button and select OAuth client ID.

On the Application type section, select Web application. Enter your domain on the Authorized JavaScript origins and the redirect page (https://www.yourdomain.com/wp-admin/options-general.php?page=postman) on the Authorized redirect URls section and click the Create button.

A popup will appear, showing your client ID as well as client secret.

  • Install Post SMTP plugin

To install the Post SMTP plugin, login to your WordPress dashboard and go to Plugins -> Add New. Type “POST SMTP” on the search box and click the Install Now button once you found it.

Activate the plugin immediately once installed. You will see a new menu item on your WordPress dashboard called Post SMTP. Click this menu item and select Post SMTP.

Click the Start the Wizard button.

Type the email address you use on your Elementor form and click the Next button.

On the next page, click the Next button.

Select the socket and authentication method. Since we use Gmail, we recommend you to choose the SMTP – gmail.com:587 and the OAuth 2.0 (requires Client ID and Client Secret) options. Click the Next button once you make your choice.

Enther the client ID as well as the client secret you have just created above and click the Next button.

Select a notification service to notify you when an email is failed to deliver and click the Next button.

On the next page, click the Finish button.

You need to grant permission to the Post SMTP plugin to send the email. To do so, click the Grant permission with Google link.

On the next step, you will be asked to select your Google account. After selecting your account, big chances are you will see the following error message. If so, click the Advanced link followed by Go to yourdomain.com (unsafe).

On the appearing popup, click the Allow button.

Perform a test by clicking the Send a Test Email link.

If you see a Success message like the following, then everything has gone well.

Return to the Elementor editor to edit your form. Open the Email option and make sure that you have entered the same email address as the one you used on Google API Console we have covered at length above. Click the UPDATE button.

Alternatives to Post SMTP

In our example, we use Post SMTP to configure the SMTP server in WordPress. If you don’t the find the plugin suit you, there are some alternatives you can use. You can read this article to learn more.

Here are five of the alternatives you can replace Post SMTP.

  • WP Mail SMTP
  • SMTP Mailer
  • Gmail SMTP
  • WP Mail Bank
  • Easy WP SMTP

The Bottom Line

WordPress comes with a built-in mail delivery function called wp_mail. The function requires the send_mail function belongs to PHP to work. Unfortunately, not all web hosting providers enable the send_mail function. As a result, the wp_mail function of WordPress unable to work. You can configure an SMTP to replace the job of wp_mail function to handle the mail delivery on your WordPress system. In the context of Elementor, you can set the form action to other options like Collect Submissions or Webhook instead of Email.

Boosted Elements, An Affordable Non-Subscription Add-on for Elementor

One of the big issues about Elementor that many users complain about is it only accepts subscription-based payment. The issue is getting more complicated as most Elementor add-ons also adopt the same business model. Some popular add-ons like JetElements and Essential Addons actually offer a one-time purchase option, but they require you to spend money in a large enough amount. Boosted Elements can be a solution if you are looking for an affordable premium Elementor add-on that doesn’t require to pay a subscription fee. This add-on pricing only $22.

Boosted Elements will add 20 extra widgets to your Elementor once you install it. All of these widgets are not available on the free version of Elementor. Well, there is a widget (Advanced Button) that basically already available in Elementor Free, but the Advanced Button from Boosted Elements comes with more advanced options than Elementor Free’s native Button widget.

In this post, we will provide a short review of this simple, yet useful add-on.

Boosted Elements widgets

Boosted Elements offers only 20 extra widgets, way fewer than JetElements and Essential Addons which offer more than 30 extra widgets, respectively. But, the widgets offered by Boosted Elements are very functional. There is a widget to work with the dynamic content of WordPress (blog posts in this case) and useful widgets to create specific pages (such as a pricing page, team page or restaurant menu page).

Here is the list of the widgets offered by Boosted Elements.

  • Advanced Button
  • Floating Button
  • Contact Form 7
  • Image Comparison
  • Image Slideshow
  • PopUp Modal
  • Price/Menu
  • Scroll Navigation
  • Team Member
  • Categories (for WooCommerce)
  • Add to Cart (for WooCommerce)
  • Products (for WooCommerce)
  • Slider
  • Pricing Table
  • Post List
  • Maps
  • Image Grid
  • Flip Box
  • Countdown
  • Animated Typing

With those widgets, you can add creative elements to the page you are working on, which you cannot accomplish with Elementor Free. For instance, you can add a countdown element to an event landing page, your team members on a team page, an animated flip box, a pricing table on the plan page, and so on.

Here are the key widgets of Boosted Elements:

  • Post List

Elementor Pro has a widget called Posts. This widget is used to display the latest posts on your website. The Posts widget is great if you are designing the homepage of your website. You can display the latest posts on your website on any section of your homepage.

The Post List widget of Boosted Elements has the same functionality as Elementor Pro’s Posts widget. You can also use it to display the latest posts on your website.

This widget will automatically load the 12 latest posts on your website once you add it to the canvas. From the Query option under the Content tab, you can set the articles that appear. You can filter the articles by author, category, and tag.

The query options offered by this widget are not much different from the Elementor Pro’s Posts widget. When you open the Pagination option, you will see more options. There are three pagination styles offered by this widget: numbers, infinite load, and load more button. All of the elements on this widget are customizable. Be it the image, excerpt, metadata, and pagination.

There are two post layouts offered by this widget: Default and overlay.

  • Popup Modal

The pro version of Elementor comes with a Popup Builder, allowing you to create popups without installing an extra WordPress plugin. Boosted Elements also has a widget to create a popup, although not as fancy as Elementor Pro’s Popup Builder. The widget is Popup Modal.

The Popup Modal widget is useful enough to display a welcome popup or promotional banner popups. The popup content can be created directly from the settings panel. You can also display a popup from a template. There are two trigger types you can use to display the popup: button click ad image click. There is also an option to automatically display the popup once a page is loaded.

The features offered by the Popup Modal of Boosted Elements are limited enough compared to Elementor Pro’s Popup Builder or JetPopup, but this widget is useful enough to create a simple popup as mentioned above.

  • Image Comparison

Elementor — be it free or pro — has no widget to add an image comparison element to a page. You will need this widget when creating a page to promote a service like a photo editing service, dentist, makeup artist and so on. You can use this widget to display a before-after comparison like the following.

The Boosted Elements developer demonstrates how to use this widget on one of the templates they created.

  • Pricing Table

You can actually create a pricing table using Elementor Free by combining the available widgets, but it a bit time-consuming. In Elementor Pro, you can effortlessly create a pricing table using the Price Table widget. Boosted Elements also has a widget with the same functionality: Pricing Table. The demonstration of the use of this widget is also available on one of the templates created by the Boosted Elements team.

Unfortunately, the default styling of this widget is a bit confusing since everything is set to the same color (blue). So, all you see when adding the widget (before making any styling option) is a blue box. You need to at least change the background to see the real pricing table.

  • Team Member

The Team Member widget is useful enough when you are creating a startup website or any website type that has a team. Be it Elementor Free or Elementor Pro has no specific widget dedicated to creating a team member. Boosted Elements has a Team Member widget that allows you to effortlessly create add a team member to a page you are working on. You can add elements like image, name, job position, and image social icons to each team member.

  • Price/Menu

This widget is especially useful to create a restaurant website as you can display the menu you offer as well as the price of each item on the menu. Elementor also has a native widget to create a price list, but only available on the pro version. The implementation of the Price/Menu widget can be found on this template.

  • Slider and Image Slideshow

If you have ever noticed, some websites have a slideshow on the section of their homepage that showcases the main content or service they offer. With Elementor, you don’t need to install any extra plugin to add an element like that one as Elementor has a Slides widget. But again, this widget is only available on Elementor Pro.

Boosted Elements comes with a Slider widget that allows you to add a slideshow element to your page. Each slide can contain text and button. There is also an option to add an overlay to the background of each slide.


In addition to Slider, Boosted Elements also comes with an Image Slideshow widget that allows you to create an image gallery. This widget is great to create a photography website.

  • Flip Box and Animated Typing

Flip Box and Animated Typing are great widgets to add animated elements to your page. The Flip Box widget allows you to add animated content like the following.

While the Animated Typing allows you to add animated content like this one:

In addition to the key widgets above, there are several other widgets offered by Boosted Elements. If you use WordPress to create an e-commerce website, there are three widgets you will love about: Categories, Add to Chart, and Product.

Templates

Templates are great to get your website up and running quickly. At the time of writing (December 28, 2019), Boosted Elements is available in version 2.7. This version comes with 14 templates. Here are some of them.

Each template basically demonstrates how Boosted Elements widgets are supposed to use. But if find them fit the need of your website, you can definitely use them.

Unlike, — for instance, JetElements –, the templates offered by Boosted Elements are not included in the plugin. We mean, Boosted Elements doesn’t add the templates to the Elementor template library. Boosted Elements only provides the JSON files of the templates, you need to import them manually one by one. You can read this post in case you have no idea how to import an Elementor template.

Technical support

Technical support is a crucial enough thing to consider before you buy an online product. To be honest, we haven’t had any experience with the technical support of Boosted Elements so we cannot say whether the technical support of this add-on is good or not.

But, if you need technical support, the Boosted Elements team is there to help. They can be reached via Ticksy.

How to install Boosted Elements

Boosted Elements is basically a WordPress plugin so you can install it via the plugin manager of WordPress.

You can get Boosted Elements on Codecanyon. From Codecanyon, you will get a ZIP file. Unzip this file to get another ZIP file named Boosted-Plugin.zip. This is the file you need to install.

After installing and activating the plugin, you will see 20 new widgets on your Elementor.

The verdict

Boosted Elements is a nice add-on if you want to enhance your experience in using Elementor, yet lazy enough to upgrade to Pro since you hate the subscription-based payment model. The widgets offered by this widget are not plenty enough compared to other premium Elementor add-ons like JetElements and Essential Addons, but they are very functional. Some WordPress themes — such as White Rock, Solus, Wise Mountain, and MudRace — offer Boosted Elements as one of the default features. Boosted Elements is specifically a great solution if you are looking for an affordable non-subscription Elementor add-on.

How to Customize a Button in Divi Builder

Divi Builder comes with a Button module, allowing you to add a button element on the page you are working on. If you are new to Divi Builder, working with the Button module might is a bit confusing. In this post, we will show you how to customize a button in Divi Builder.

The customization options offered by the Button module are basically rich enough. You can, for instance, add a gradient background to your button without special tricks. The same option (at the time of writing), is not offered by Elementor. In Elementor, you need a little trick to create a gradient button.

Customizing a button in Divi Builder

To get started, add a Button module by clicking the grey plus icon inside a row.

The settings panel will appear once you clicked the Button module. Before making further customization, replace the default text of the button on the Button field under the Content tab.

To add a link to your button, you can open the Link option and paste your link here.

To really customize your button, go to the Design tab. Open the Button option and enable the Use Custom Styles For Button option by sliding the button.

As you can see, there are more customization options you can set once you activated the Use Custom Styles For Button option. To set the button text size, you can simply slide the selector rightward to increase the size and leftward to decrease the size. Or you can simply type the exact size on the available field. To set the button text color, simply select the color you want on the Button Text Color section.

To set the background color of the button, you can scroll a bit further down to the Button Background section. There are three background types you can select: solid, gradient, and image. Simply select your choice and set the background.

Scroll a bit further down to set the border size, border color, and border radius. You can set the border size on the Button Border Width section, border color on the Button Border Color section, and border radius (in case you want to create rounded corners) on the Button Border Radius section.

To change the font of the button text, you can scroll down to the Button Font section. Below this section, there are also options to set the font weight as well as the font style.

When adding a new button with the Button module in Divi Builder, your button will have an arrow icon by default, which will appear when you hover your mouse over the button. You can change this default icon by selecting your preferred icon on the Button Icon section. If you don’t use an icon on your button, you can disable the Show Button Icon option.

To change the color of the icon, you can scroll down to the Button Icon Color section. Select the color you want. Below this section, there is an also option to set the icon placement as well as an option whether you want to show the icon only on hover.

Set the custom size

To set the custom size for your button, you can leave the Button option and make a switch to the Spacing option, still under the Design tab. You can set the custom size by setting the padding.

Those are the basic customizations you can set on a button in Divi Builder. There several other customization options you can set to. You can play around on the Design tab on the settings panel to set other customization options. Don’t forget to click the checklist icon before you close the settings panel to apply the customizations you have set.

The bottom line

The Button module allows you to add a beautiful button when working with Divi Builder. Whether you are creating a page, creating a custom footer, or creating a custom header. There are a bunch of customization options offered by this module, like adding a gradient background or adding an icon to the button. There are also some missed customization options, though. For instance, there is no option to set the hover background color.

How to Create A Custom Footer in WordPress with Divi Builder

When creating a website with Divi theme, you can customize the footer via Theme Customizer (Divi -> Theme Customizer). There are about 20 different column layouts you can choose from to customize your footer. You can add content to each column via the WordPress widget manager (Appearance -> Widgets). However, since WordPress has limited enough widgets, the content you can add to your footer is also limited. You won’t be able to add content like social media buttons, email subscription form, or button — unless you install additional plugins.

Since version 4.0, Divi Builder (the default page builder of Divi theme) allows you to create custom elements for your theme, including the footer. And, since Divi Builder can now be used on WordPress themes other than Divi and Extra, you can basically create a custom footer (or other theme elements) with Divi Builder, no matter the theme you use.

In this post, we will show you how to create a custom footer with Divi Builder. The theme we use here is Divi.

How to Create a Custom Footer with Divi Builder

There are two ways to create a custom footer with Divi Builder: via a layout and from scratch. We will cover both methods.

# Creating the Custom Footer from a Premade Layout

Unlike, for instance, Elementor that offers premade footer templates, Divi Builder offers no footer template (called layout in Divi Builder) on its layout library. But, you can download a footer layout created by Elegant Themes (the developer of Divi Builder) on one of its blog posts. Click the button below to download the file. The file is available in a ZIP format.

Once the file is downloaded, UNZIP it to get the JSON file. This is the layout file you need. Login to your WordPress dashboard and go to Divi -> Theme Builder. On the Theme Builder page, click the two-arrow icon on the right side.

Click the Import tab and select the layout file (the JSON file) you have just extracted above by clicking NO FILE SELECTED. Once the file is selected, click the Import Divi Theme Builder Templates button.

Click the pencil icon to edit the footer. You need to edit the footer to tailor the default content with your own content.

You will be taken to the Divi Builder editor after clicking the pencil icon above. You can edit your footer here. Remove the unnecessary elements. To edit an element, you can hover your mouse over an element (module) you want to edit and click the gear icon to display the settings window.

Once you are done editing the footer, click the SAVE button to apply the changes and close the Divi Builder editor by clicking the x icon on the top-right corner.

You will be taken back to the Theme Builder page. Click the Save Changes button to apply the custom footer you have created.

# Creating the Custom Footer from Scratch

When creating a custom footer with Divi Builder, you can set on which pages the footer to appear. On the first example we have covered above, the footer will appear on every part of the website. In this second example, we will create a custom footer for a specific page (the contact page). We will create a simple footer that consists of 3 columns. The end result of the footer will look like this.

First off, login to WordPress dashboard and go to Divi -> Theme Builder. Add a new template and specify on which page the template to appear. Since we want to create the custom footer for the contact page then select Contact (take a look at the screencast below).

If you see a yellow button (which means a custom footer already exists), click the trash icon to delete it. Add a new custom footer by clicking Add Custom Footer and select Build Custom Footer.

Since we want to create the footer from scratch, select the Build from Scratch option.

Your default section might contain a divider. To remove it, open the settings window by clicking the gear icon.

Go to the Design tab and open the Dividers option. Click the dropdown menu on Divider Style and select None. Don’t forget to click the checklist icon to apply the new change.

Set the background of the section. To do so, click the gear icon once again to open the settings window. Click the Background option under the Content tab. Click the plus button to set the color. Don’t forget to click the checklist icon to apply the background color.

Add a new row by clicking the green plus button. Select the three-column structure.

  • The first column

Go the first column to add the content to it. We will add two modules to this column (Images and Text) to place the site logo and a disclosure. So first, click the grey plus icon and select the Image module. Select your image (site logo in this case) from the settings window.

Go to the Design tab and open the Sizing option to set the image size.

Add another module (Text module) beneath the Image module.

Replace the default text with your own text. Go to the Design tab and open the Text option to set the text color and text size.

  • Second column

We will use the second column to place the email subscription form. We will connect this form with MailChimp.

Go to the second column and add the Email Optin module.

Change the default title on the Title section under the Content tab. Also change the default description on the Body section. In this example, we don’t use a description so we just delete the content on the Body section.

Still on the Content tab, open the Emai Account option and select the email marketing platform you want to connect with (Mailchimp in this case). Select a Mailchimp list and click the FETCH LIST button

Note: The email field might don’t appear when you publish your footer if you don’t select a MailChimp list. You can read this post to learn more about integrating Divi Builder with MailChimp.

Open the Fields option to remove the unnecessary fields. In this example, we add only the email field to the email subscription form so we disable all fields on this option.

Open the Background option to change the background of your form. In this example, we set the background to transparent.

Go to the Design tab to customize the look of your form. To change the field background and the field text background, you can open the Fields option.

To set the typography of the title (text color, text size, font style, and so on) you can open the Title Text option.

There are many other customization options you can set. You can play around on the Design tab until you get satisfied with the look of your form. Just don’t forget to click the checklist button to apply the customization options you have made.

  • Third column

We will use the third column to place the links to the important pages on your site (about page, contact and privacy policy page) as well as the social media icons.

First, add the Text module for the heading.

Replace the default text with a title like “THE SITE”, “COMPANY” or something similar.

Go to the Design tab and open the Text option to set the typography.

Add another Text module to place the links. Replace the default text with your own text with the following formation (hit enter to add a new line).

To add a link to each text, you can highlight the text and click the chain icon.

Go to the Design tab and open the Text option. To set the color of the link text, you can click the chain icon.

Go to the Link Text Color and Link Text Size to set the link text color and the link text size.

Lastly, add the Social Media Follow module.

By default, the Social Media Follow module contains only two social media platforms (Facebook and Twitter). To add a new social media platform, simply click the plus button under the Content tab.

To add a link to each social media platform, you can click the gear icon of each platform to open the settings option.

Open the Link option and paste the URL of the associated social media account. You can also set the background of the social media platform from the Background option. Don’t forget to click the checklist icon to apply the link you added.

Once done adding the links to each social media platform, go to the Design tab to customize the icons. To set the icon color as well as the icon size, you can open the Icon option.

To set the border radius (in case you want to have rounded corners) you can open the Border option.

To add a little space between the Social Media Follow module and the Text module, you can open the Spacing option. Set the top padding to 8px or 10px.

There are many other customization options you can set. You can play around on the Design tab until you get satisfied with the result.

Once you are done, click the Save button on the bottom-right corner to apply the new changes to your footer, followed by the x button on the top-right corner to close the Divi Builder editor.

You will be taken back to the Theme Builder page. Click the Save Changes button to save all of the new changes you have made.

The Bottom Line

Footer is a crucial enough element of a website. With the Theme Builder feature of Divi Builder, you can create a custom footer for your WordPress site. The custom footer you created will replace the default footer of your theme.

Creating a custom footer with Divi Builder gives you the freedom to add more elements without installing additional WordPress plugin, such as email subscription form, latest posts, button, social media icons. You can basically add all modules offered by Divi Builder to your footer. The Divi Builder is now available for all WordPress themes, not limited to Divi Theme and Extra Theme anymore.

How to Add Table of Contents in Elementor

When writing a long article — such as a list of tools or places — you might want to add a table of contents. In WordPress, there are a bunch of plugins that you can use to create a table of contents on your article. But with Elementor, you don’t need to install any table of contents plugin if you want to add a table of contents. Elementor has a default widget that allows you to add a table of contents on your long article. We will cover it here.

Table of Contents is a new widget recently introduced by Elementor. With this widget, you can provide an additional on-page navigation on your long article, allowing your visitors to easily jump between sections on your article. The Table of Contents widget of Elementor allows you to pick the exact heading tags to appear on your table of content (TOC). You can also use headings from a specific container on the page.

Note: Table of Contents is a pro widget. You need to use the pro version of Elementor to use it.

How to use the Table of Contents widget in Elementor

There are two ideal ways to use the Table of Contents widget in Elementor. First, you can use it on Elemetor pages and posts (pages and posts fully created with Elementor). Alternatively, you can implement the Table of Contents widget on the single post template on your WordPress site. Of course, the single post template has to be made with Elementor. By implementing the Table of Contents widget on the single post template, a TOC will automatically be generated on your article as long as the article contains the heading tags according to the heading levels you have set on the Table of Contents widget.

Implementing the Table of Contents widget on a single post template

In this post, we will show you how to implement the Table of Contents widget on a single post template. You can either create a new single post template or edit the existing one. We will create a new single post template in this example.

To get started, login to your WordPress dashboard and go to Templates -> Theme Builder. On the Theme Builder page, go to the Single tab and click the Add New button to create a new template.

On the Select Post Type section select Post. Give your template a name and click the CREATE TEMPLATE button.

We will create the single post template from scratch, so you can simply close the template library.

Add a new section by clicking the plus button on the canvas area and select the three-column structure.

set the width of the columns with a comparison of about 28%:61%:10%.

Add common elements — such as Post Title, Post Info, and Post Content — to the second column and make the customization accordingly. Once done, add the Table of Contents widget to the first column.

Set the title of your TOC on the Title section and set the heading levels you want to include on the TOC on the Anchors By Tags section.

If you have CSS knowledge, you can exclude CSS selectors to prevent them from appearing on the TOC.

On the Marker View section, you can set the marker of the content items (bullets or numbers). If you select bullets, you can set the icon from the icon library.

Open Additional Options to see more setting options and select the settings you want.

Now go to the Style tab to customize your TOC. You can set the background color, the border color, the border width, and the border radius on the Box section. While to set the header color, header typography, and header text, you can go to the Header section.

On the List section, you can set the text color of the active item, text color of the item when you hover your mouse over it and the text color of the items in the normal mode. You can also set the color of the marker as well as the typography of the content items here.

In order to make your TOC be more useful, you can make it keep visible when your visitors scroll the mouse further down. To do so, open the Advanced tab and go to the Motion Effection option. Set the Sticky to Top and set the offset to about 80. If you want, you can also set the entrance animation on the Entrance Animation section.

You can play around with the left panel until you get satisfied with your TOC. Once done, click the PUBLISH button and set the display condition. Here is the example of the TOC we created.

If you set the display condition of the single post template you created above to Entire Site, you will automatically have a TOC every time you write a long article that contains the heading tags according to the heading level you have specified.

The bottom line

Adding a table of contents to a long article provides a better user experience for your visitors. They can easily jump between sections on your article by clicking the items on the table of contents. With the new widget from Elementor, you don’t need to install an additional plugin to add a table of contents to an article.

You can use the Table of Contents widget when creating a page or post with Elementor. Alternatively, you can also add the Table of Contents widget on the single post template of your WordPress site so that every time you write a long article containing heading tags, the table of contents will be automatically generated.

How to Create Popups with Elementor

Elementor is not merely a page builder. It’s a versatile WordPress plugin. There are several other things you can do with Elementor other than creating web pages. One of which is popups. In this post, we will show you how to create a popup with the Popup Builder feature of Elementor.

Creating a popup with Elementor is super easy. You can design your popup with the visual interface of Elementor where everything is drag and drop. Your job is getting easier since Elementor also offers premade popup templates. You can simply select a template, publish it, and set the trigger. That’s it!

Before going further, it’s crucial to note that the Popup Builder of Elementor is only available on the pro version.

How to create a popup with Elementor

When creating a popup with Elementor, you can set a trigger (an action to show the pop) and display condition (in which pages you want your popup to appear). In addition, you can also set an advanced rule (covered later below).

In this example, we will create a call-to-action popup with a button click trigger. The popup will appear when a user clicks on a button.

Assuming you have installed Elementor Pro, login to WordPress dashboard and go to Templates -> Popups and click the Add New button on the top side.

Give your popup a name and click the CREATE TEMPLATE button.

Select a popup template you want to use. Hover your mouse over it and click the Insert button to take it to the Elementor editor.

If you prefer to create the popup from scratch, you can simply close the template library to open the Elementor editor.

On the Elementor editor, you can customize the popup. You can replace the default content (texts in particular) with your own content. Use the Navigator to make it easier for you to jump between sections and widgets. You can also add an entrance/exit animation, enable/disable the overlay, and enable/disable the close button.

Once you are done, click the PUBLISH button.

On the next step, you will be asked to set display conditions and triggers. There is also an option to set advanced rules:

  • Display conditions: Determine on which pages the popup appears throughout your website. You can set the popup to appear on the entire website, specific pages, specific posts, specific categories, and so on.
  • Triggers: A trigger is an action to show the popup. Elementor supports 6 trigger types: On Page Load, On Scroll, On Scroll To Element, On Click, After Inactivity, On Page Exit Intent
  • Advanced Rules: The requirements need to be met for the popup to appear. For instance, you can set the popup to appear if a visitor comes to your website via a search engine or certain UR. Elementor Popup Builder itself has 7 advanced rule options you can set choose from.

Since we want to display the popup when a user clicks a button, open the Triggers tab and activate the On Click option. Click Save & CLOSE.

Create a new page/post and edit it with Elementor (you can also edit an existing).

Add the Button widget by dragging it from the left panel to the canvas area. Or, if you are editing an existing page that already contains a button, click the Button widget to turn it into an editing mode. On the Button option under the Content tab, set the link to Popup. To do so, you can click Dynamic on the Link section.

Click the wrench icon on the Popup field and select the popup you have just created. Type the popup name to find your popup.

Click the PUBLISH/UPDATE once done editing the page. Before clicking the PUBLISH/UPDATE button, you can preview your page first to see if the popup already works.

The Bottom Line

With Elementor Pro, you don’t need to install a popup plugin anymore since the features offered by Elementor Pro include a popup builder. The Popup Builder of Elementor allows you to create any kind of popup. From a call to cation popup as we have just created above, a registration form popup, notification bar, social share button, and so on. Since the popup is created with the Elementor editor, you can basically add any widget to your popup. With the Popup Builder of Elementor, you can also create a creative website menu as follows:

Elementor offers premade popup templates to save you time in creating a popup. You can also use a template if you are run out of idea about the design of the popup you want to create.

How to Embed a YouTube Playlist in Elementor with JetBlog Plugin

If you are a YouTuber and have a website created with WordPress+Elementor, you might want to embed your YouTube playlists to your website. Unfortunately, Elementor has no default widget to allow you to embed a YouTube playlist on your website. All Elementor has is a Video widget, which only allows you to embed a single YouTube video. To embed a YouTube playlist in Elementor, you can use JetBlog. What is JetBlog?

JetBlog is an Elementor add-on developed by Crocoblock. This add-on is designed to help you to create an online magazine or news website. JetBlog add-on adds 6 new widgets to your Elementor, including Video Playlist which you can use to embed a playlist from YouTube.

How to use JetBlog to embed a YouTube playlist in Elementor

Please note that you can only embed a YouTube playlist of your own. You can’t embed a YouTube playlist from other users. Also, you need to set the playlist as a public playlist instead of private.

Before being able to embed a video playlist from YouTube, you need to create a YouTube API key first.

# Creating the YouTube API Key

Visit Google API Console and login with your Google account. Select a project from the dropdown menu on Select a project. If you haven’t had a project yet, create a new one by clicking the dropdown menu and click NEW PROJECT.

Give your project a name and click the CREATE button.

With your new project selected, click Library on the left panel.

Scroll down to the YouTube section and select YouTube Data API v3.

Click the ENABLE button to enable the API key for your project.

Click Credentials on the left panel, followed by Create credentials button and select API key.

Copy the API key.

Login to your WordPress dashboard and go to JetPlugins -> JetBlog Settings. Paste the API key you have just copied to the YouTube API Key field.

# Embedding the YouTube playlist

Once done with the YoTube API key, you can start embedding your playlist. To do so, create a new page or post and edit it with Elementor (of course, you can also edit an existing page). Add the Video Playlist widget by dragging it from the left panel to the canvas area.

Under the Content tab on the left panel, set the source to YouTube Channel or Playlist and paste the URL of YouTube playlist you want to embed.

You can set the number of videos on the playlist by changing the number on Number of videos (see the screenshot above).

By default, thumbnails orientation is set to vertical. You can set it to horizontal. To do so, open the Settings option under the Content tab. Set the orientation of the thumbnails on the Thumbnails Orientation section. From here, you can also set the playlist height.

There are several other settings you can set, including the thumbnails position, thumbnail list width, heading text, heading icon, counter suffix, and so on. Just play around and try each setting.

# Customizing the playlist

Once done with the basic settings, you can customize the look of your playlist. To do so, go to the Style tab on the left panel.

There is one thing you need to note before start customizing your playlist. By default, texts and background are set to white. So, if you click the preview button without making any setting on the Style tab, your playlist will look like the following.

You can start customizing your playlist by setting the background of the canvas, thumbnails, and heading.

You can then set the typography of the heading title. To do so, you can g to Heading Title section. Click the pencil icon to open the typography controller and click the color selector to set the text color of the heading title.

To customize the thumbnails, you can open the Thumbnail Styles option. From here, you can set things like the gab between thumbnails, the typography of the title of each video on the playlist — as well as the color — and so on.

To set the gab between thumbnails, you can set the top and the bottom paddings.

To set the typography of the title of each video on the playlist, you can click the pencil icon on the Title section.

To change the color of the text of the video titles, you can click the color selector on the Title Color section. You can set the color of the title on the normal condition, hover and active.

There several other settings you can set, you can play around until you get satisfied with the results. Once you are done, you can click the PUBLISH/UPDATE button to apply your playlist on your page.

The bottom line

JetBlog is a great add-on if you need to embed a YouTube playlist on your Elementor-based website. This add-on comes with a Video Playlist widget which you can use to embed a YouTube playlist. In addition to embedding a YouTube playlist, you can also create a new playlist by setting the source to Custom Video List.

JetBlog itself is a premium Elementor add-on, costing you $15 per year for a single website. If you are the sort of person who hates the subscription-based business model, you can get JetBlog by using the Monstroid2 WordPress theme. This theme is bundled with JetBlog and other Elementor add-ons developed by Crocoblock. You can get this theme with a one-time purchase option.

JetBlog is a Great Plugin to Create an Online Magazine with Elementor

If you have ever noticed, most online magazines have a grid section on their homepage. This section is usually used to display the latest posts or posts on certain categories. If you want to build an online magazine with Elementor, JetBlog is a great plugin that you can use to add a grid section on the homepage of your website.

JetBlog is a premium Elementor add-on developed by Crocoblock. This add-on is designed specifically to build dynamic websites — including online magazines. In addition to a grid section, you can also add a news ticker on the homepage of your website. If you are building a video news website, JetBlog also allows you to add a YouTube video playlist on your website.

Widgets offered by JetBlog

After installing JetBlog, you will have the following new widgets on your Elementor.

  • Video Playlist
  • Text Ticker
  • Smart Posts Tiles
  • Smart Posts List
  • Posts Navigation
  • Posts Pagination

You can use the widgets above to add the common elements of an online magazine such as news ticker, grid section, and video playlist.

# Video Playlist

You can use JetBlog to add a YouTube video playlist on your website with the Video Playlist widget. To add a playlist, you can simply paste the URL of the playlist. JetBlog also allows you to create a playlist from your YouTube channel. If you want to add YouTube videos to the playlist from the random creators, you can also manually select the videos. Here is the example of the YouTube video playlist created with JetBlog.

Of course, JetBlog allows you to customize your playlist. You can set the typography, playlist height, thumbnail size, and so on.

# Text Ticker

On some news websites or online magazines, you will see a news ticker, a running text that is usually used to deliver a news headline, hottest issue, and so on. With the Text Ticker widget, you can also add a news ticker on your website. You can use this widget whether to deliver the hottest issue, the trending article on your website, news headline or anything.

You can add the news ticker anywhere on your website. Whether on the header or below the grid section on the homepage. You can select the posts to appear on the news ticker from the query setting. JetBlog allows you to select posts by category, tag or post ID.

# Smart Posts Tiles

This is the widget you will love the most if you want to build an online magazine with Elementor. The Smart Posts Tiles allows you to add a grid section on the homepage of your website. By default, this widget display the latest posts on your website, but you can set it to display posts from specific categories, tags or by post ID.

The Smart Posts Tiles offers 9 different layouts you can choose from. Each layout has a different number of boxes. You can set the gap between boxes from the Style.

Here is an example of the use of this widget.

JetBlog offers lots of setting options you can use to customize the Smart Posts Tiles widget. For instance, you can add an overlay to the boxes (solid and gradient) to make your grid section looks more attractive. Or, you might want to apply a hover effect to the grid.

# Smart Posts List

You can use this widget to display posts on your website in a more creative way. This widget is also great to be added on the homepage of your online magazine or other types of dynamic websites. Here is an example use of this widget.

The Smart Posts List widget is great to be added to the top section of the homepage of your online magazine or beneath the grid section. You can set the number of the columns as well as the number of rows according to your needs. The posts on this widget are also filterable. You can display whether the latest posts, post from certain categories/tags or posts by ID.

The settings options you can set on the Smart Posts List widget are not much different from the Smart Posts Tiles widget. There are also settings to add an overlay to the posts and to add the hover effect.

The bottom line

Elementor Pro has a Posts widget to display the posts on your website. However, there is no option or widget to display the posts in a unique, creative way. JetBlog — which comes with a Smart Posts Tiles widget and a Smart Posts List widget — is a great add-on to display your posts in a more attractive way. You can display your posts in a creative grid or list as we have covered above. This add-on also comes with a Text Ticket widget to add a news ticker on your website and a Video Playlist widget to add a YouTube video playlist to your website. JetBlog is a great plugin to create an online magazine with Elementor.

JetBlog itself is a premium Elementor add-on developed by Crocoblock. It costs you $15 per year for a single site. There is a better option to get this add-on with a lifetime license: Monstroid2, a WordPress theme that is bundled with add-ons from Crocoblock, including JetBlog.

How to Add Custom Fonts in Divi Builder

Selecting the proper font is one of the tricky tasks in web design since it can determine the overall result of your design. In Divi Builder, you have hundreds of font options to choose from since Divi Builder is integrated with Google Fonts, allowing you use to use a font from Google Fonts directly from the Divi Builder editor without needing to download and install it first. However, you might prefer to use a font you created yourself or the one you downloaded from Adobe Fonts.

Divi Builder allows you to add a new font. The font you want to add has to be in either a TTF or OTF format.

To add a new font in Divi Builder, you can edit a module that involves a font setting (the Text module is the easiest example). You can hover your mouse over a module and click the gear icon to open the popup of the settings window.

On the popup of the settings window, go to the Design tab and open the Text option. Select a font from the dropdown menu on the Text Font section. You will see an UPLOAD button. Click this button.

Click the CHOOSE FONT FILES button to select the font file you want to install. Give your font a name and click the UPLOAD button.

Your font might use different files for different styles. If you download a font from sites like Adobe Fonts or DaFont and get several TTF files after you extract the ZIP file, you need to upload all of the TFT files so that you can use the different styles (bold, italic) when using the font.

That’s it. You have successfully added your font to Divi Builder.

Final words

As mentioned, Divi Builder is integrated with Google Fonts by default. This integration allows you to select a font from the Google Fonts collection right from the Divi Builder editor without needing to download or install the font first. If you want to simplify the font options on your Divi Builder, you can disable this integration by going to Divi -> Theme Option. On the General tab, slide the button on the Use Google Fonts section to disable the integration.

Essential Addons vs JetElements: The Comparison of Two Popular Elementor Add-ons

The free version of Elementor provides about 30 widgets. There are two options you can opt to if you need more widgets. First, you can upgrade to Elementor Pro, which provides more than 60 extra widgets. Alternatively, you can install an add-on. Commonly, an Elementor add-on adds extra widgets, which can enrich your experience in using Elementor.

There are a bunch of Elementor add-ons out there. Be it free or paid. We have compiled some of the most-popular premium Elementor add-ons in case you need a reference. In this post, we will compare two of them: Essential Addons and JetElements.

Both Essential Addons and JetElements offer extra widgets to your Elementor. Essential Addons comes with extra 59 widgets, while JetElements comes with extra 34 widgets.

Widgets

Widgets are the most crucial thing you need to notice when you want to install an Elementor add-on. With the unique widgets, you can add unique content and features to your page. Basically, some widgets offered by either Essential Addons and JetElements are already available on Elementor. For instance, Essential Addons comes with an EA Flip Box widget while JetElements comes with an Animated Box widget, respectively. Both widgets have the same functionality as Elementor’s native Flip Box widget.

Some widgets are not available on Elementor, though. Both Essential Addons and JetElements have a widget that allows you to display your Instagram feed to the page you are working on. The same widget is not available natively on Elementor. Essential Addons and JetElements also have a widget to add an image comparison to your page, which is not available on Elementor.

Here are the details of the widgets offered by Essential Addons and JetElements.

  • Essential Addons

EA Advanced AccordionEA Flip BoxEA Post Carousel
EA Google MapEA Flip CarouselEA Post Grid
EA Advanced TabsEA Fluent FormEA Smart Post List
EA Advanced MenuEA Gravity FormsEA Post Timeline
EA Caldera FormsEA Image AccordionEA Price Menu
EA Call to ActionEA Image HotspotsEA Pricing Table
EA Contact From 7EA Image ScrollerEA Progress Bar
EA Content TickerEA Image ComparisonEA Protected Content
EA Content TimelineEA Info BoxEA Static Product
EA CountdownEA Instagram FeedEA Team Member Carousel
EA CounterEA Interactive CardEA Team Member
EA Creative ButtonEA Interactive PromoEA Testimonial Slider
EA Data TableEA LearnDash Course ListEA Testimonial
EA DividerEA Lightbox & ModalEA Toggle
EA Dual Color HeadingEA Logo CarouselEA Tooltip
EA Dynamic GalleryEA MailchimpEA Twitter Feed
EA Facebook FeedEA Ninja FormsEA Twitter Carousel
EA Fancy TextEA OffcanvasEA WeForm
EA Feature ListEA One Page NavigationEA WPForms
EA Filterable GalleryEA Post Block

  • JetElements

Advanced CarouselHeadlineScroll Navigation
Advanced MapHorizontal TimelineService
Animated BoxImage ComparisonSlider
Animated TextImage LayoutSubscribe
Audio PlayerInline SVGTable
BannerInstagramTeam Member
Logo ShowcasePie ChartTestimonials
ButtonPortfolioVertical Timeline
Circle ProgressPostsVideo Player
Countdown TimerPrice ListWeather
Download ButtonPricing Table
DropbarProgress Bar

As you can see, Essential Addons has more widgets than JetElements. However, it also has a more expensive price. Both Essential Addons and JetElements offer a demo for each widget they offer, showing you how a widget is supposed to used to.

Features and integration

More widgets allow you to implement all of the web design ideas on your mind with Elementor. However, having more widgets is not always delighting. Especially if you use Elementor Pro. You will have too many widgets to choose from (more than 100), making your Elementor editor heavier to load.

As we mentioned earlier, some widgets offered by Essential Addons and JetElements are basically already available on Elementor (pro version in particular) although they might offer different setting options to Elementor’s native widgets. If you find the Elementor’s native widgets are better than the widgets offered by Essential Addons or JetElements (with the similar functionalities), you can disable the widgets of Essential Addons and JetElements.

Both Essential Addons and JetElements allow you to disable the widgets you don’t need.

Both Essential Addons and JetElements also offer extensions. An extension adds an extra setting to Elementor. For instance, if you enable the Parallax extension, you will have an option to enable the Parallax effect to a section in Elementor.

Essential Addons offers 6 extensions, while JetElements offers only one extension (Parallax). The extensions offered by Essential Addons are:

  • Parallax
  • Advanced Tooltip
  • Reading Progress bar
  • Particles
  • Content Protection
  • Duplicator

At the time of writing (December 17, 2019), Essential Addons doesn’t offer templates, while JetElements does. JetElements offers about 9 page templates and tens of section templates.

# Integrations

Integrations allow you to connect your Elementor with third-party services and tools. Here are the third-party services/tools you can integrate Essential Addons/JetElements with:

Essential AddonsJetElements
InstagramYesYes
MailChimpYesYes
TwitterYesNo
LearnDashYesNo

Pricing and support

There is a fundamental difference between Essential Addons and JetElements. Essential Addons is released as a freemium add-on. The lite version of this add-on (the free version) is available on the official plugin directory of WordPress. Meanwhile, JetElements is released as a fully paid add-on. There is no free version offered by this add-on.

The pro version of Essential Addons costs $29.97 per year for a single site, while JetElements costs $17 per year for a single site. Both Essential Addons and JetElements also offer a one-time purchase option in case you hate the subscription business model. The amount you need to spend to get the lifetime license of JetElements is a bit painful, though. You need to spend $499 (this price includes all add-ons developed by Crocoblock, including JetMenu, JetBlog, JetTricks, JetTabs, and so on).

On the other hand, you only need to pay $199.97 to get the lifetime license of Essential Addons. This license also allows you to use Essential Addons on as many websites as you want.

Both Essential Addons and JetElements offer free updates during the active year of the license.

The verdict

Both Essential Addons and JetElements are two of the popular Elementor add-ons. They add extra widgets to your Elementor. Essential Addons comes with 59 widgets. More than JetElements which has 34 widgets. Essential Addons — which is developed by WPDeveloper.net — has unique widgets like EA Protected Content to allow you to password-protect your content. There are also Post Grid, Post Timeline, Post Block, Smart Post Lit, and Post Carousel widgets to display your posts in unique, creative ways.

JetElements — which is developed by Crocoblock — also has unique widgets, with unique settings. However, you are required to install other add-ons developed by Crocoblock to get the most of it, especially if you want to create a website like an online magazine or e-commerce. JetElements has only a single widget (Posts) to display your posts. It has no widget to display your products if you use WooCommerse, while Essential Addons has ones.

If you find JetElements is better suited to your needs and want to install other add-ons developed by Crocoblock, there is a better alternative you can opt to: Monstroid2. Monstroid2 is a WordPress theme that is bundled with all add-ons developed by Crocoblock. You can get this theme — as well as the bundled add-ons — with a one-time purchase option.

How to Install A Divi Plugin

When working on a web page with Divi Builder, you are provided modules to add the content to your web page. By default, Divi Builder comes with about 38 modules. Way fewer than, for instance, Elementor which offers more than 90 modules (called widgets).

If you need to add the type of content in which the module is not available in Divi Builder, you can install a Divi Plugin. Commonly, a Divi Builder adds additional modules to your Divi Builder, allowing you to enrich the features of your web page. For instance, the Before After Slider plugin allows you to add image comparison feature (before-after) to the page you are working on, which is great if you are creating a landing page of services like professional photo editing, makeup artist, and so on.

Elegant Themes — the developer of Divi Builder — allows third-party developers to develop plugins to enrich the functionality of the Divi Builder. You can download Divi plugins on marketplaces like Divi Cake and Elegant Marketplace.

How to install a Divi Builder plugin

Technically, a Divi plugin is a WordPress plugin. To install it, you can go to Plugins -> Add new.

Click the Upload Plugin button, followed by the Choose File button to select the ZIP file of the Divi plugin you want to install. Click the Install Now button once the ZIP file is selected.

Activate the plugin once installed. Once done, try to edit a page or post with Divi Builder. Add a new module and see if there are new modules available. If yes, then you have successfully installed your Divi plugin.

If some cases, you might be required to enter the license key of the plugin you downloaded. If this is the case, simply enter the license key. If a plugin requires you to enter a license key, you will typically see a new sub-menu item on the Divi menu on your WordPress dashboard.

Pin It on Pinterest

Creating with WordPress?‚Äč

Subscribe and join 1,000+ 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.