How to Add Custom Fields in Elementor (The Comprehensive Guide)

One of the features offered by WordPress is the ability to add custom fields. This feature is very useful if you want to create a complex, dynamic website that involves lots of additional meta fields that are not offered by WordPress by default. Elementor (the pro version) supports dynamic content that allows you to process WordPress custom fields. You can add WordPress custom fields to your Elementor designs (pages or templates). But how to add custom fields themselves? Read on to learn more.

What are WordPress Custom Fields?

Before we jump to the how-to section, let’s cover this first. Custom fields are a set of metadata that store additional information about blog posts, pages, custom post types, or taxonomies. The information can be vary depending on your purpose. For instance, if you want to create a bike rental website, you might want to add information like hourly rate, pick up location, drop location, pick up date, drop date, and so on.

Or, if you want to create a movie review website, you might want to add information like score, genre, and review summary.

In the example above, score, genre and review summary are called custom fields.

You might be asking, why don’t just add the score, genre, and review summary on the WordPress editor?

Of course, you can do so. But, imagine if you wan to create a “greatest movies of all-time” list and you want your users to be able to sort the movie by score, title, or genre. How could you accomplish it? This is how custom fields come into play. Custom fields offer more flexibility to sort and manage and content on your WordPress site.

Custom fields are especially crucial for complex sites like real estate listing sites or trip agency websites as you will be able to offer better experiences for users such as the ability to sort the item by price, rating, facility, and so on.

In order to get the most out of custom fields, you can also create a custom post type. A custom post type allows you to create a new content type on your WordPress site other than the default content types offered by WordPress such as blog posts and pages. If you use WooCommerce, it is a perfect example of the implementation of custom fields and a custom post type.

How to Add Custom Fields in Elementor

There are two WordPress plugins we recommend to add custom fields in Elementor or WordPress in general:

ACF is a great solution if you are looking for a free plugin to add custom fields in Elementor, but Elementor Pro is required. ACF has native integration support with Elementor Pro.

Being a paid plugin, JetEngine offers more features than ACF. In addition to creating custom fields, you can also use it to create custom post types, custom taxonomies, custom forms, and listing items.

Adding Custom Fields in Elementor Using ACF

Before being able to add custom fields using ACF, make sure you have installed and activated the ACF plugin on your WordPress site. The free version of this plugin is available on the WordPress plugin directory. Make sure that you have upgraded your Elementor to the pro version as well in case you haven’t done so.

Once everything is ready, go to Custom Fields -> Add New to add a new custom field group.

Give your field group a name and click the Add Field button to add a custom field.

The custom field form will open once you clicked the Add Field above. Add the required parameters like field label, field name, field type, place holder, and so on.

You can click the Add Field button to add more custom fields. You can set the order of the custom fields by dragging them up and down.

Once done adding the custom fields, switch to the Location section beneath the custom field form. Set post type where you want to show the custom field group on. Whether on the blog posts, pages, custom post types, or taxonomies.

Next, go to the Settings section to set the location of the custom field group, style, label placement, and instruction placement. Once done, click the Publish button to apply the custom fields to the selected content type.

If there are some fields you missed or there some parameters you want to edit, you can edit your custom field group by going to Custom Fields -> Field Groups. Hover your mouse over the custom field group you want to edit and click the Edit link.

Adding the Custom Field Types Created with ACF to an Elementor Design

You can use the custom fields you have created with ACF above on your Elementor designs. Be it pages or theme builder templates. To do so, edit a page/template you want to add your custom fields to with Elementor. Add a new widget (i.e. the Heading widget). Once the widget is added, go to the left panel to set the content and click the database icon and select ACF Field.

Click the wrench icon and select the field you want to add from the dropdown menu on the Key option.

Adding Custom Fields in Elementor Using JetEngine

To add custom fields using JetEngine, make sure you have installed and activated the JetEngine plugin on your WordPress site. You can get it from the Crocoblock website. Crocoblock is the developer of JetEngine.

Unlike ACF, JetEngine works on both Elementor Free and Elementor Pro.

To start adding custom fields with JetEngine, go to JetEngine -> Meta Boxes.

Click the Add New button to start adding the custom meta field group.

On the General Settings section, give your custom meta field group a name and set a content type where they to be displayed. Just like ACF, you can also display the custom field group whether on blog posts, pages, custom post types, or taxonomies.

To add the custom meta fields, switch to the Meta fields section and click the New Meta Field button to add a new custom field.

Add the required parameters like field label, field name, field type, and so on. On the Object type section — since you want to create custom fields — set it to Field.

You can simply click the New Meta Field button to add more custom fields. You can set the order of the custom field types by dragging them up and down.

Once done adding the custom fields, you can click the the custom fields button to apply the custom meta fields to the selected content type.

Adding the Custom Field Types Created with JetEngine to an Elementor Design

To use the custom fields you have just added with JetEngine to an Elementor design, simply edit the page/page you want to add the custom fields to with Elementor. Add a new widget (i.e. the Heading widget). Once the widget is added, go to the left panel to set the content. Click the database icon and select Custom Field on the JetEngine section.

Click the wrench icon and select a custom field you want to use from the dropdown menu on the Field option.

The Bottom Line

Custom fields are crucial to unlocking the power of WordPress. Thanks to them, you can create a dynamic, complex website like e-commerce, real estate listing, and so on. The ability to handle custom fields is one of the things that makes Elementor so special as a page builder plugin. You can add tailored dynamic content to your designs by taking advantage of custom fields.

The Ultimate Toolkit to Create a Professional Blog with WordPress

With the right tools, you can turn your blog into a serious business, just like us here. We use this blog to share what we know about Elementor, Divi Builder, and WordPress at large — while also generating money from it. In case you have a passion in blogging or writing and want to create a professional blog with WordPress, we will share the ultimate toolkit you can use to create your professional blog in this article.

Being open-source software, WordPress has a very open ecosystem. You have a bunch of options for each entity. From plugin, theme, web hosting, to optimization tool. Conducting research to find the appropriate option for each entity can take you lots of time. You need to compare the features offered by a tool with another’s, as well as pricing, functionality, and so on. That is why we created this article to help you save time by narrowing down your options.

Here are the tools we use to run this blog and the reasons why we use them.

Web hosting: SiteGround

Click to learn more

Web hosting is the first tool you need if you want to create a website. For a professional need, you need a web hosting that offers a solid performance. We use SiteGround as our web hosting provider. There are 6 reasons why we use SiteGround as we described in this article with Google Cloud being the main reason. We subscribed to one of its managed WordPress hosting plans.

Another reason that convinces us to use SiteGround is that SiteGround is recommended by both WordPress.org and Elementor. We prefer to use a managed WordPress hosting as it offers some easiness for bloggers like us. With a managed WordPress hosting, you don’t need to be a hassle on taking care of technical aspects regarding your website as they are handled by the associated hosting provider (SiteGround in our case). The technical aspects include:

  • Security
  • WordPress updates
  • Speed/performance
  • Daily backups

Since the crucial technical aspects of your website are handled by your hosting provider, you can focus on business aspects (like marketing and analytics) and content creation.

Page builder: Elementor

Click to learn more

Page builder is a new norm in the WordPress industry. Today, most modern WordPress themes are bundled with a default page builder. Divi with Divi Builder, Jupiter X with Elementor, Newspaper X with tagDiv Composer, and so on. We use Elementor on this site with one main reason: it comes with a theme builder feature.

What is theme builder?

Theme builder is a page builder feature that allows you to create custom templates for your theme parts. All parts of this website — from the header, footer, homepage, single post template, 404 page, category page, search results page, and so on — are created with Elementor theme builder. Elementor comes with an intuitive visual editor that you can use to create beautiful pages and templates for your website. It offers 90+ design elements (called widgets).

Elementor itself is a freemium plugin and the theme builder feature is available on the pro version. We use the Personal plan ($49/year) as we only need Elementor Pro for one website (this website). In addition to theme builder, Elementor also comes with a popup builder feature to create beautiful popups and form builder to create beautiful forms (including email opt-in forms). If you see some forms or popups on this website, they are created with Elementor.

There are at least 12 plugin types that can be replaced by Elementor. It is great as you can save lots of money. Also, fewer plugins mean less resource usage which eventually leads to better site performance.

Theme: Agency Plus

Elementor is compatible with most WordPress themes. As you can use its page builder feature to create custom templates for your theme parts, you can use any theme you like. Hello, Astra, and GeneratePress are popular themes widely used by Elementor users. We personally use Agency Plus as it is simple, lightweight, and free.

Email marketing: Mailchimp

Email marketing is the main foundation of the entire internet marketing process, above social media marketing. Every online business should invest in email marketing. Blog is no exception. We use Mailchimp as our email marketing tool as it has wide integration supports with other tools and services. Most WordPress themes and page builder plugins support integration with Mailchimp, including Elementor. You can create email opt-in forms with Elementor and connect them with your Mailchimp account.

You can use Mailchimp to collect email subscribers and run certain campaigns like weekly newsletter, send promotions, and so on. In some cases, the number of email subscribers can be used as one of the selling tools.

SEO: Yoast

Search engine is one of the most main traffic sources of a website. To get traffic from search engines, you need to optimize your website to make it appears on the search results page of search engines. Yoast is the most popular SEO plugin for WordPress with over 5 active installations. It allows you to optimize every element of your website. From the home page, blog posts, category pages, and so on.

Yoast comes with crucial SEO features like XML sitemap, breadcrumbs, and content optimization analyzer. When writing a new blog post, Yoast will provide indicators whether your article already has a good SEO or haven’t. The article components that are analyzed by Yoast are:

  • Outbound links
  • Internal links
  • Keyphrase length
  • Meta description length
  • Text length
  • Image alt attributes
  • SEO title width

Yoast itself is a freemium plugin. All basic SEO features mentioned above are available on the free version.

Analytics tool: Google Analytics

As a blogger (who is also a webmaster), it is crucial to always learn the statistics of your website. How many daily visitors you gain, bounce rate, how your campaign goes, and so on. Google Analytics is second to none when it comes to the analytics tool. You can install it on your WordPress site to monitor the number of visitors as well as supporting data such as demography, geolocation, how they get to your website, and so on. Google Analytics offers detailed metrics and most importantly, you can use it for free.

While you can see your website statistics from the Google Analytics dashboard, you can install the Site Kit plugin to monitor your site statistics via the WordPress dashboard.

Site optimization: SG Optimizer and CloudFlare

As we mentioned earlier, we use a managed WordPress hosting as we don’t want to be a hassle on taking care of the site performance. It’s our hosting provider job (SiteGound in this case) to taking care of our site performance. However, for maximum optimization, we still make some optimization efforts by installing SG Optimizer plugin and configuring CDN (CloudFlare). Both SG Optimizer and CloudFlare help you to optimize the content of your website, while SiteGround helps you optimize your site on the service configuration side.

SG Optimizer itself is a free caching plugin developed by SiteGround. It offers some optimization options like lazy load, DNS pre-fetch for external domains, GZIP compression, browser caching, minify JavaScript files, minify CSS files, and so on.

Meanwhile, CloudFlare allows you to configure a free CDN for your website. SiteGround itself offers free CDN that is powered by CloudFlare, making it easier for you to configure CDN on your website.

The bottom line

Starting an online business — be it a blog, e-commerce site, membership site, or anything — requires the right tools. With so many options out there, it can be time-consuming to find the right option for every component of your website. If you want to start a blog with WordPress, we have narrowed down your choices so that you don’t need to conduct the research from the ground (if you still need to do so). We use all of the tools above on this website. If, in the future, we use other tools, we will add them to this list as well.

How to Create a Custom Post Type in Elementor

Before we jump into the how-to section, let’s cover first what is a custom post type in WordPress. Let’s start by re-understanding the core of WordPress itself. WordPress is a content management system in which its core function is to manage the content of your website. Content is the main keyword here. In the WordPress system, there are two main default content types: posts (also known as blog posts) and pages.

While posts and pages are enough for general website types like blogs, company profiles, and CV sites, you need custom post types on more complex websites like bike rental websites, real estate listing websites, job vacancy websites, and other website types that require specific content type other than blog posts and pages. In such a case, you can create a custom post type (CPT). A custom post type allows you to create a new content type on your WordPress site, other than blog posts and pages.

With Elementor Pro, you can then manage how the custom post types to appear on your website using the Posts widget. You will see a new option on the Query settings block of the Posts widget once you have created a new custom post type.

When creating a new custom post type, you can add the required custom fields according to your need. For instance, if you want to create a custom post type for a bike rental site, you might want to add the following custom fields.

  • Hourly rate
  • Daily rate dicstount
  • Pick up location
  • Pick date
  • And so on

Custom fields are the additional information you can add to your custom post type. You can find them beneath the WordPress editor. We a separate article that covers custom fields. Read it to learn more. Here are the examples of the custom fields of a custom post type.

How to create a custom post type in Elementor

Just like other tasks that involve function addition in WordPress. There are two ways to create a custom post type in Elementor or WordPress in general: manually and with a plugin.

# Creating a custom post type manually

You can use this method if you have knowledge of PHP. You can add a new function on your WordPress theme to add a new custom post type. On your WordPress dashboard, go to Appearance -> Theme Editor. Select the functions.php file on the right panel to edit it.

Add the PHP script of the custom post type you want to add to the end section of the file. Here is the example of the script you can use.

function create_post_type() {
    register_post_type( 'elementor_vehicle',
        array(
            'labels' => array(
                'name'=> _('Vehicles'),
                'singular_name' => _('Vehicle')
             ),
            'public' => true,
            'has_archive' => true,
        )
    );
}
add_action( 'init', 'create_post_type' );

Here is the example of the script placement. Click the Update File button to update the functions.php file.

# Creating a custom post type using JetEngine

JetEngine is a solution if you want to create a custom post type on your Elementor-powered WordPress site yet have no coding skills. JetEngine is a premium Elementor add-on (costing $26/year) that helps you to add dynamic content to your designs (pages and templates). Post type is one of the dynamic content types you can create with JetEngine.

You can use JetEngine to create the following dynamic content types:

  • Custom post types
  • Custom fields
  • Custom taxonomy
  • Custom forms. You can use this feature to create front-end post submission form and other front-end form types
  • Listing items

You can visit the official page of JetEngine to learn more about it.

To create a new post type with JetEngine, go to JetEngine -> Post Types (make sure you have installed and activated the JetEngine plugin). You can toggle the Built-in option on the right side to see the built-in custom post types offered by JetEngine. To create a new one, click the Add New button.

You will be presented with 5 settings blocks:

  • General Settings. You can open this settings block to add the name of your custom post type and the post type slug.
  • Labels: You can open this block to set the labels of your custom post type. Labels refer to the texts that appear on the WordPress dashboard for a certain operation related to your custom post type.
  • Advanced Settings: You can open this block to set advanced settings such as control how the post type is visible to authors and readers, exclude it from the search, show/hide admin UI, and so on.
  • Meta fields: You can open this block to add custom meta fields of your custom post types. You can add custom meta fields as many as you need.
  • Admin Columns: You can open this block if you want to add additional information when you visit the list of the custom post type table (i.e. Post -> All Posts for WordPress’ default post type).

You can click the Add Post Type button on the upper right side once you are done making the necessary settings.

That’s it. You have done creating your custom post type. If there are some settings you missed, you can edit your custom post type by going to JetEngine -> Post Types. Simply click the Edit link to edit your post type.

The bottom line

Creating custom post types is a great idea to create a complex website with WordPress+Elementor. You can create custom types to create custom content types that are not offered by WordPress by default. If you have advanced PHP skills, you can create custom post types manually. If you don’t, you can use a plugin like JetEngine.

There are many other plugins actually you can use out there. We suggest JetEngine if you use Elementor as JetEngine is developed exclusively for Elementor. You can use it to add dynamic content to your designs such as custom fields, custom taxonomies, and so on. Not just custom post types.

How to Integrate Elementor with HubSpot

HubSpot is a popular online CRM software. You can use it to maintain your relationship with your customers. Before doing so, you need to build the customer database on your HubSpot account. You can create forms to generate leads and turn the leads into your customers. If you use Elementor, you can use the Form widget to create a form and connect it with your HubSpot account to generate leads. This article will show you how.

Integrating Elementor and HubSpot is pretty easy as HubSpot offers a WordPress plugin that you can use to integrate your HubSpot account with your WordPress site. Especially for Elementor, the plugin allows you to connect an Elementor form to your HubSpot account. Just like email marketing tools such as MailChimp and MailerLite.

Integrating Elementor and HubSpot

Install the HubSpot plugin

Before installing the HubSpot plugin on your WordPress site, you need to enable the Collect data from website forms option on your HubSpot account. To do so, visit the HubSpot website and login with your account. Click the Marketing menu and select Forms.

Click the Non‑HubSpot Forms and make sure this option is enabled. If it is not, you can click the settings link to enable it.

Once done, you can start installing the HubSpot plugin. From your WordPress dashboard, go to Plugins -> Add New. Type “hubspot” on the search box to find the HubSpot plugin. Once you found it, click the Install Now button to install it to your WordPress site. Activate the plugin right away once installed.

Once the plugin is activated, you will see a new menu item called HubSpot on your WordPress dashboard. Click it. Login with your HubSpot account by clicking the Sign in here link on the upper-right corner. Continue by clicking the Continue with this account button.

HubSpot is now connected with your WordPress site. No need to enter the API key just like when you are integrating MailChimp and other email marketing tools.

Create an Elementor form to collect leads with HubSpot

Once done with the steps above, you can create a new form (or edit an existing one) to collect leads and save them (the leads) to your HubSpot account.

To create a form, first, create a new page by going to Pages -> Add New and edit it with Elementor. On the Elementor editor, drag the Form widget from the left panel to the canvas area.

Go to the left panel to customize the form. Set the fields you need on the Form Fields block under the Content tab. You can also give your form a name from this block.

Open the Additional Options block and set an ID form your form. Form ID cannot contain a space character.

Publish/update your page once you are done editing it. Next, you can test the form you have just created by filling it out. To test if the form has worked, visit the HubSpot website and go to Marketing -> Forms. Make sure your new form is on the list.

Next, go to Contacts -> Contacts. If you the submission you have just submitted appears here, everything has gone well.

Divi Theme Review: A Perfect Theme for Agencies and Professionals

Expensive. That’s probably your first impression on Divi. No wonder because Divi is priced more expensive than popular themes on ThemeForest like Jupiter X and Newspaper X. Divi is sold at $89. Getting more expensive as it is not a one-time purchase option. Instead, it is an annual fee. Elegant Themes, the developer of Divi, adopts a subscription-based business model. You can download Divi by becoming its member that costs $89 per year. There is also a lifetime membership plan, but you need to pay threefold.

Of course, the Elegant Themes team has its own reasons in making the pricing plan for Divi. But still, there is a big enough question, does $89 a worth price?

Understanding the Divi Pricing Plan

Before answering the question above, let’s understand why Divi is sold at that high price.

Divi is developed by Elegant Themes and Elegant Themes adopts a membership-based business model. You need to be an Elegant Themes member to be able to download Divi. Elegant Themes offers two membership plans:

  • Yearly membership: 89/year
  • Lifetime membership: $249

A crucial thing you need to know. Divi is not the only product developed by Elegant Themes. Instead, it also develops the following WordPress products.

  • Extra (A WordPress theme)
  • Divi Builder (A page builder plugin)
  • Monarch (A social media sharing plugin)
  • Bloom (An email marketing plugin)

After becoming an Elegant Themes member, you will have access to all of the products above, along with Divi theme (please note that Divi and Divi Builder are two different products. Divi — just “Divi” — is a theme while Divi Builder is a page builder plugin).

You can use your membership account to download the Elegant Themes products as many times as you want and install them on as many websites as you like. Be it your own websites or your clients’ websites. With this concept, Divi is a perfect theme if you are an agency as you only need to spend $89 per year (outside hosting) to build as many sites as you want.

Divi is also a great theme for professionals as you don’t need to buy additional plugins for email marketing and social media marketing. Both Monarch and Bloom come with a built-in analytics feature to track the performance of your marketing progress and campaigns.

Divi Theme Features:

After you have understood why Divi is sold at that high price, let’s find out what features you will get.

More Options on Theme Customizer

WordPress — as you know — has a theme customizer feature to customize your theme. You can access it by going to Appearance -> Customize. The customization options available on the theme customizer are vary depending on the theme you use. Hello theme, for instance, only has 6 option blocks where you can set your site logo, color, menu, and widget. There are even no options to customize the header.

Divi comes with more option blocks. There are 11 option blocks in total with each block contains other option blocks.

Some key optimization options you can set are:

  • Website layout which covers content width, sidebar width, and accent color.
  • Typography which covers body text size, header text size, header font, header font style, body font, body link color.
  • Header. You can set menu height, header background color, dropdown menu background color, dropdown menu animation, disable/enable the fixed navigation, show/hide header elements (social media icons and search icon).
  • Footer. You can set the footer layout, set the background color, add widgets, show/hide social media icons.
  • Mobile. You can customize your website header on mobile devices such as setting the hamburger icon color, setting the header text size, and setting the body text size.

There is also an option to export the customization you made. This feature is pretty useful if you have multiple sites. You can apply the same customization from one site to another one.

Settings Panel

While the theme customizer allows you to customize the appearance of your Divi theme, settings panel allows you to enable/disable the features offered by the Divi theme (outside the theme customizer). You can, for instance, exclude certain categories from the navigation bar, integrate your Divi theme with Google Analytics, and so on. Settings panel itself is a common feature found on paid themes. Jupiter X and Newspaper X also have one.

You can access the Divi settings panel by going to Divi -> Theme Options. From this panel, you can do such things as enable/disable the sticky header (fixed header), add your social media accounts, set the sidebar location, integrate your website with Google Analytics, and so on.

Here are some key Divi features you can access via this panel:

  • Ads Manager

If you rely on ads — banner ads in particular –to generate money from your website, the built-in ads manager offered by Divi is useful enough. You can display your ads on several locations such as header and single post. Unfortunately, Divi only supports ads banner with a dimension of 468×60.

  • SEO

SEO is a crucial aspect of a website. With proper optimization, you can generate tons of free visitors from search engines. Divi comes with a built-in SEO feature which you can access via the settings panel. Unfortunately, the optimization options offered by Divi’s built-in SEO feature are very basic. You can only set the custom title of the homepage, custom description of the homepage, custom meta, and enable the canonical. There are no options like breadcrumbs and sitemap.

We still recommend you install a dedicated SEO plugin like Yoast to optimize every single article and page on your website. If you just need to optimize the homepage then Divi’s built-in SEO feature is enough.

  • Integration

There is an Integration tab on the Divi settings panel. You can open this tab to integrate Divi with some services or tools you use. One of which is Google Analytics. You can simply paste your Google Analytics tracking code to the available field to integrate it with your Divi theme. You can also use this feature to display ads banner (via JavaScript script) on either the top of the single post or bottom of the single post.

Page Builder

Page builder is a crucial plugin to create a website with WordPress. Especially if you have no skills in CSS and HTML. You need it to create a professional-looking page. As mentioned earlier, the Elegant Themes membership allows you to download all WordPress products developed Elegant Themes, including Divi and Divi Builder.

If you install Divi theme, you don’t need to install Divi Builder anymore as Divi Builder has been integrated with Divi theme and Extra theme. If you have installed and activated the Divi Builder plugin before installing the Divi theme, the Divi Builder plugin will automatically be disabled. Divi Builder itself is one of the most popular WordPress page builder plugins, other than Elementor and Beaver Builder. It comes with a visual editor where you can create a beautiful page without dealing with CSS or HTML.

Divi Builder works on both posts and pages (you can set Divi Builder to work on posts or pages only via the settings panel). Divi Builder comes with quite a lot of design elements (called modules) you can add to the page you create. There are about 38 native modules offered by Divi Builder:

AccordionEmail OptionPricing Tables
AudioFilter PortfolioSearch
Bar CountersGalleryShop
BlogImageSidebar
BlurbLoginSlider
ButtonMapSocial Media Follow
Call To ActionMenuTabs
Circle CounterNumber CounterTestimonial
CodePersonText
CommentsPortfolioToggle
Contact FormPost NavigationVideo
Countdown TimerPost SliderVideo Slider
DividerPost Title

Here are some key features offered by Divi Builder:

  • Dynamic Content

Since version 4.0 — which was released in the late of 2019 — Divi comes with a theme builder that allows you to create custom templates for theme parts such as header, footer, single post, category pages, 404 page, and so on. When creating a custom template using Divi Builder, you can use dynamic content for components like post title, author name, featured post, site title, and so on. There are about 13 dynamic content types supported by Divi Builder:

  • Page/archive title
  • Page excerpt
  • Page bublish date
  • Page comment count
  • Page link
  • Page author
  • Author bio
  • Site title
  • Site tagline
  • Current date
  • Featured image
  • Author profile picture
  • Site logo
  • Layout Library

When creating a page with Divi Builder, you have two options to start from. First, you can create the page from scratch. Second, you can create the page from a template (Elegant Themes uses the term “layout” instead of “template”).

There are over 1000 page layouts offered by Divi Builder in total. They are grouped into layout packs. A layout pack it a set of layouts designed for a specific website type. They have a consistent design concept. A layout pack allows you to create a website (a complete website) more quickly. If the materials to create the website are ready, you can complete your website in a day. Or less.

In addition to the layouts on the layout library, Divi also offers weekly layout pack.

  • Form Builder

With Divi Builder, you don’t need to install any additional form builder plugin like Contact Form 7 or Ninja Forms. Divi Builder comes with two modules that you can use to create a form: Contact Form and Email Optin. You can use the Contact Form module to create a contact form. There are 6 field types you can use: Input, Email, Textarea, Checkbox, Radio button, and Dropdown.

While for the Email Optin module, you can use it to create an email opt-in form. You can connect your email opt-in form with an email marketing tool like MailChimp, MailPoet, MailerLite, AWeber, and so on. Ther are about 20 services you can connect your form with, including CRM tools like HubSpot and Salesforce.

  • Custom CSS

If you are a professional web designer/developer and want to add custom CSS for your project, Divi Builder allows you to do so. To add a custom CSS to a module, you can go to the Advanced tab on the module settings panel.

Theme Builder

As mentioned, since version 4.0, Divi comes with a theme builder feature. This feature gives you full control to customize your theme since you can create custom templates for all of the theme parts. Theme builder works by replacing a default theme part with the custom template you created. For instance, if you have created a custom header template, this template will replace the default header of your theme (Divi in this case).

The Divi Builder theme builder feature allows you to create custom templates for the following theme parts:

  • Header
  • Footer
  • Single post
  • Single page
  • Category
  • Tag
  • 404 page
  • Search results page
  • And so on.

If you use WooCommerce, you can also create a custom single product page, custom chart page, and other parts of WooCommerce. You can access the theme builder by going to Divi -> Theme Builder.

When creating a custom template for a certain theme part, you can assign it to the entire website or specific page(s) or post(s). Thanks to this (the capability to assign a custom template part for specific posts and pages), you can have multiple headers, footers, or single post templates on one website, which is great to run certain campaigns.

ONE THING. Since a custom template you created will replace the default part of your theme, header, for instance, the customization you made via theme customizer will also be overridden.

Support Center with a Remote Access Option

While most themes like Jupiter X and Newspaper X uses forum-based customer support, Elegant Themes offers live chat support. This is great since you can solve a technical issue you are facing more quickly. If necessary, you can even grant remote access to Elegant Themes technical support staff to allow them to remote-access your website.

To have a live chat with the technical support staff, you can go to Divi -> Support Center. From here, you can also grant remote access to the technical support staff.

You can have a live chat with the technical support staff anytime you want. They open 24 hours for 7 days. There is also a forum you can access to share your issue with the fellow Divi users.

The Verdict: Divi Theme Pros and Cons

At a glance, Divi indeed looks expensive. But, think about features like page builder, theme builder, form builder, and email opt-in. Not to mention like plugins like Bloom and Monarch which you can download for free. The fact that you can install Divi on unlimited websites is another reason why $89 per year is not too expensive. For professional use, Divi is not expensive at all. Conversely, if you just need a theme for casual blogging (not for business purpose), $89 is not worth to spend. There are a bunch of themes on the WordPress theme directory you can use for free.

To give you an overview, let’s compare the plan offered by Elegant Themes with two popular page builder plugins that also come with theme builder feature: Beaver Builder and Elementor.

Elegant ThemesBeaver Builder ProElementor Expert
Price$89/year199/year$199/year
Number of sitesUnlimitedUnlimited1,000

You can read our previous post to compare the features offered by Divi Builder’s theme builder and Elementor’s theme builder.

What about the cons?

Despite allowing you to create a beautiful page without coding, Divi Builder is the biggest downside of Divi theme. Compared to other page builder plugins, say Elementor, Divi Builder is way more complex to use, especially for those who haven’t used a page builder plugin before. The elements (modules) it offers are also limited enough. Also, Divi Builder tends to heavy.

Pros:

  • Limitless customization options thanks to the theme builder feature.
  • Great pricing for agencies and professionals.
  • No need to install basic plugins like form builder and email marking.
  • Page builder to create beautiful pages without coding.

Cons:

  • Not friendly enough for new WordPress users.
  • Lack of elements on page builder.

Summary

  • Features: 5 out of 5 stars (5 / 5)
  • Pricing: 5 out of 5 stars (5 / 5)
  • Ease of use: 4 out of 5 stars (4 / 5)
  • Customer support: 4.7 out of 5 stars (4.7 / 5)
  • Ideal for: Agencies and professionals

How to Create Off-Canvas Menu in Elementor Using JetMenu

Off-canvas menu refers to a behavior where the menu appears on the side — be it the right side or the left side — of a website instead of the top. The menu will appear after a user clicks a button, icon, or text. Here is an example.

Elementor has no native widget that allows you to create an off-canvas menu but it doesn’t mean you can’t create one. If you use Elementor Pro, you can create an off-canvas menu using Elementor’s popup builder. Alternatively, you can use JetMenu.

JetMenu is a premium Elementor add-on from Crocoblock (costing $24 per year). It is part of JetPlugins. JetMenu is designed to allow you to create a mega menu in Elementor, but you can also use it to create an off-canvas menu. JetMenu comes with three menu widgets as follows:

  • Mega Menu
  • Vertical Mega Menu
  • Hamburger Menu

The widget that you can use to create an off-canvas menu is the Hamburger Menu widget.

How to create an off-canvas menu with JetMenu.

Before getting started, make sure you have installed and activated JetMenu on your WordPress site. You can get JetMenu on the official website of Crocoblock. Alternatively, you can also get JetMenu with a one-time purchase in the Jupiter X theme bundle.

You can use JetMenu on both Elementor Pro and Elementor Free. If you use Elementor Free, you will need an extra add-on to create a custom header as Elementor Free has no feature to create a custom header (unless you want to add your menu on another area outside the header). Read the differences between Elementor Pro vs Elementor Free.

If you have no idea how to create a custom header in Elementor, you can read our previous article to learn how to create a custom header with Elementor. In this article, we will go straight to creating the off-canvas menu.

First off, edit your custom header template with Elementor. On the Elementor editor, add the Hamburger Menu widget to the header section.

Once the Hamburger Menu widget is added, go to the left panel. On the Options block under the Content tab, select a menu you want to use. You can use a different menu for desktop and mobile. On the Layout option, set it to Slide Out. Set the toggle position and menu container position as well.

Still on the Options block, you can add a template in case you want to add extra content to your menu. You can add any content you like such as contact form, map, blog posts, and so on. You can prepare the templates first before adding ones. You can add a template on the header area, before the menu items, and after the menu items. Simply select a template you want to use from the dropdown menus.

Here is the example.

After selecting the templates, you can also set additional settings like disable/enable the menu item icons, item badges, and so on. You can go to Appearance -> Menu to add menu icons and badges. Read our previous post to learn more.

Next, open the Content block if you want to use a custom icons for each menu component. We use default icons in this example.

Styling up the off-canvas menu

Once done making the necessary settings on the Content tab, you can switch to the Style tab to style up your off-canvas menu. There are 4 styling option blocks you can open.

Toggle

You can open this block to style up the toggle icon. You can set the color of the toggle icon, the size of the toggle icon, the background color of the toggle icon, border-radius of of the toggle, and so on.

Container

You can open this block to set the container width, container background color, the color of the close icon, the padding of the navigation controls, the padding of the templates, and so on.

Items

You can open this block to style up the menu items, icons, and badges. You can set the typography (font family, font size, font style) of the menu items, padding of the menu item, size of the menu item icons, the typography of the menu badges, sub-menu button, and so on.

Advanced

You can open this block to the set the color of the menu loader and cover.

Publish/update your header template once you are done styling up the off-canvas menu.

SiteGround Review: 6 Main Reasons Why We Use It

Choosing the right web hosting is a crucial step to start a website. With so many options out there, it’s a bit challenging to choose the best web hosting for your website. In reality, many site owners have to be a web hosting hopper to find a web hosting provider with the best performance. We once on that state before eventually we use SiteGround.

We started this website (WP Pagebuilders) in October 2019. At first, we used a shared hosting plan with a storage capacity of 5GB from our previous provider. The specs of the plan said that it could handle unlimited monthly traffic. In our mind, it also means unlimited daily traffic until one day, we gained a bunch of visitors from a Facebook campaign we ran and turned out, the server couldn’t handle it.

That was the first issue. Another issue we experienced with our previous hosting provider was regarding the performance of the website administration. Every time we wanted to install a new plugin, it could take minutes for the WordPress dashboard to load. The same issue also happened to the Elementor editor.

Server configuration is another issue why we gave up with our previous hosting provider. They disabled some crucial PHP functions required by WordPress, including the send_mail function which is used for mail delivery.

So, why we decided to switch to SiteGround?

With all of the issues we described above, it would be surprising if we don’t make a plan to move away. But where to?.

Some criteria for our next destination were:

  • Speed/performance (especially for site administration)
  • The ability to reach technical support via live chat
  • Scalability (we need it just in case our site grows)

To be honest, SiteGround was not our priority at first. We planned to move to Kinsta as Kinsta is powered by Google Cloud. Sadly, the hosting plans offered by Kinsta didn’t meet our needs. We needed a managed WordPress hosting plan that could host 3 to 5 websites at less than $30 per month. The cheapest plan offered by Kinsta ($30 per month) only allowed us to install one website.

After making some research, we stumbled on this blog post written by Syed Balkhi, the founder of WPBeginner. On the blog post, Syed explained why he moved WPBeginner to SiteGround. From Syed, we knew that SiteGround is now also powered by Google Cloud Platform, same as Kinsta. In short, we officially moved to SiteGround in May 2020.

Here are 6 main reasons why we eventually decided to move to SiteGround.

1. SiteGound uses Google Cloud Platform

Knowing that SiteGround is now using Google Cloud Platform is huge news for us. As we mentioned earlier, we planned to switch to Kinsta at first before eventually chose SiteGround with Google Cloud being our main reason. Google Cloud has an excellent reputation in the webmaster and app developer community thanks to its top-notch cloud infrastructure.

Started from January 1, 2020, all of the new SiteGround customers get hosted to the Google Cloud. So, if you order a hosting plan on SiteGround after that date, your website will be hosted on Google Cloud regardless of the plan you use. Even if you order the StartUp WordPress hosting plan (the cheapest WordPress hosting plan from SiteGround).

2. SiteGround is recommended by WordPress.org and Elementor

As you can see on the footer section of this website. We use WordPress+Elementor to create this website. WordPress is the most popular content management system that powers about 34% of existing websites on this planet. In the CMS market share alone, WordPress takes a portion of about 60% (source: Kinsta). In the context of market share, WordPress is like Google Chrome on the web browser and Windows 10 on the desktop operating system.

Knowing the fact that the WordPress.org team and Elementor team recommend SiteGround is another temptation that leads us to make a switch.

According to the Elementor team, SiteGround is one of the web hosting providers that have high compatibility with its platform. When you install WordPress using SiteGround’s installer, you will also be recommended to install the Elementor plugin.

3. SiteGound offers managed WordPress hosting plans

Click to learn more

As we mentioned earlier, we originally planned to order a managed WordPress hosting plan on Kinsta. Since the specs offered by Kinsta didn’t meet our requirements, we made new research and found SiteGround.

The managed WordPress hosting plans offered by SiteGround actually not much different from Kinsta’s. However, there were some details that made us eventually decided to choose SiteGround.

By the way, what is managed WordPress hosting?

Simply put, a managed WordPress hosting is a hosting service where all technical aspects related to WordPress are managed by a hosting provider. The aspects include:

  • Security
  • WordPress updates
  • Speed/performance
  • Daily backups
  • Scalability

All of those aspects are available on the managed WordPress hosting of SiteGround.

Managed WordPress hosting is great for bloggers like us. While all technical aspects related to our site’s performance are managed by our hosting provider (SiteGround in this case), we can focus on writing the content.

4. Better performance for WordPress administration

As we stated, one of the issues we faced with our previous hosting provider was regarding the site administration. Often times, we were made frustrated when opening the plugin manager on the WordPress dashboard.

How could we know SiteGround has better performance while we haven’t used it before?

On a WPBeginner blog post we mentioned earlier, Syed explained that there was about 72% to 100% improvements on the WordPress dashboard load time on his site. After ordering a plan and done migrating our site, we tested it ourselves and yes, we felt significant enough load time improvement on the WordPress dashboard. Here is the screenshot of the WordPress dashboard load time with the cache is disabled.

Note: The internet speed may also affect the load time.

5. Easy to scale up

Every business is planned to grow. So is our business. In the context of the website, you will need higher resources following the growth of the number of visitors. On SiteGround, you can easily upgrade your current hosting plan to the higher plan according to your needs.

6. Live chat technical support

The ability to reach the technical support team via live chat was one of the priorities when we planned to make a migration from our previous hosting provider. This would allow us to solve every technical issue more quickly rather than other methods such as the ticketing system. This option is offered by SiteGround.

SiteGround Review

So far, everything has gone well with SiteGround hosting. Our website — back-end and front-end — is faster to load than before. With a managed WordPress hosting plan we subscribed to, we don’t need to be a hassle about the site performance as it is handled by the SiteGround team. SiteGround will automatically update WordPress on our website every time a new version is available. It also makes daily backups of our site. If we want, we can also make a manual backup.

The pricing plans offered by SiteGround — especially the managed WordPress hosting plans — also make sense for us. The specs on each plan are clear enough, including how many visitors a plan can handle within a month. Each plan also comes with crucial features like free SSL (Let’s Encrypt) and free CDN (Cloudflare).

Another worth-mentioning feature offered by is the control panel. Unlike most hosting providers that commonly offer cPanel, SiteGround offers its own control panel. The SiteGround control panel is simpler, lighter, and easier to use.

Common key features offered by GiteGround panel:

  • File manager
  • FTP account manager
  • Database manager
  • App manager
  • Backup manager
  • SSL manager
  • CDN manager
  • Domain manager
  • Email manager
  • Statistics

WordPress features offered by SiteGround panel:

  • WordPress manager
  • Staging
  • Migrator
  • Autoupdate

Developer tools offered by SiteGround panel:

  • Git
  • Cron Jobs
  • PHP Manager
  • SSH keys manager

Summary

  • Speed/performance: 5 out of 5 stars (5 / 5)
  • Pricing: 5 out of 5 stars (5 / 5)
  • Features: 5 out of 5 stars (5 / 5)
  • Technical support: 4.5 out of 5 stars (4.5 / 5)

Bloom Plugin Review: Is It Worth to Buy?

Bloom is an email marketing WordPress plugin from Elegant Themes. You can use it to grow the email subscribers list with several scenarios. Overall, Bloom is a great email marketing plugin. The problem is, it costs higher than any other similar plugin. You need to spend $89 to get Bloom.

Given its high price, is Bloom worth to buy? Read on to find the answer.

We will cover the features offered by Bloom as well as its functionality in helping you to grow your email subscribers. But first, let’s cover its price first.

$89 is not the price for a single product. It is a yearly membership fee charged by Elegant Themes. By becoming an Elegant Themes member — which costs 89 per year — you will have access to all products developed by Elegant Themes, including Bloom. Here are the products:

You can use your membership account to download Elegant Themes products as many times as you like and use them on as many websites as you like. In other words, with a single membership account, you are allowed to use Elegant Themes products on all of your websites or your clients’ websites.

So, is $89 a worth price? Depends on how you will use the Elegant Themes products. If you only need to use the Bloom plugin on a single website, it might is too expensive. Conversely, if you want to use all of the Elegant Themes products, $89 is not too expensive given that the average of themes on ThemeForest is sold between $40 to $60. Again, $89 is not a price for a single product. It is a price of 5 WordPress products.

Bloom Features

You can use Bloom to collect email addresses of your customers regardless of your purpose. Whether to send newsletters, run a certain campaign, and so on. Bloom can be integrated with email marketing tools like Mailchimp and MailerLite or CRM services like HubSpot. Here are the email marketing and CRM services supported by Bloom.

  • ActiveCampaign
  • AWeber
  • CampaignMonitor
  • ConstantContract
  • ConvertKit
  • Emma
  • Feedblitz
  • GetResponse
  • HubSpot
  • iContact
  • Infusionsoft
  • MadMini
  • Mailchimp
  • MailerLite
  • MailPoet
  • Mailster
  • Ontraport
  • SalesForce
  • SendinBlue

Bloom comes with a panel. Inside this panel, you can create a new email opt-in form, check the stats of your forms, add a new email account, and connect the Bloom plugin with your Elegant Themes account for automatic update.

Here are some of the key features offered by Bloom.

Various opt-in types and customizable design

There are 6 opt-in types offered by Bloom which you can use according to your needs. For instance, if you want to require users to enter their email address to access your content, you can use the locked content opt-in. Or, if you want to add an opt-in form inside a blog post or page, you can use the inline opt-in.

  • Pop up

You can use this opt-in type to display opt-in form in a popup. Bloom offers several trigger types to set how the pop up appears.

  • Fly in

Similar to pop up, but smaller. The form will appear on the bottom corner of the page. Same as a popup, you can also set the trigger type to set how the fly-in to appear.

  • Below post

You can select this option if you want to display the opt-in form below the blog posts on your website.

  • Inline

This opt-in type gives you an opportunity to add an opt-in form in a blog post or page. You can add the opt-in form anywhere inside the blog post via a shortcode.

  • Locked content

This opt-in type is perfect to offer digital products such as e-book, design template, plugin, and so on. Before being able to access the product you offer, you can ask your customers to enter their email address. You can see the implementation of this opt-in type here.

  • Widget

You can use this option if you want to add an opt-in form as a WordPress widget. You can then use the widget on area that is possible to add a WordPress widget such as sidebar and footer.

Whichever the opt-in you use, you can customize the design of the opt-in form to make it match the color scheme of your website. Bloom itself offers over 100 form design presets, but you have the freedom to customize the design of the form to your liking. You can use a custom image, set text color, font family, and so on.

You can also set a custom success message. If you have CSS skills, there is also an option to use a custom CSS.

Display conditions

When creating a new opt-in in Bloom, you can set where the opt-in to appear (doesn’t apply for inline, locked content, and widget). This is great as you might want the opt-in to not appear on a certain page(s) or post(s) on your website. The display conditions supported by Bloom are:

  • Specific page(s)
  • Specific post(s)
  • Posts under certain category(ies)
  • Manual post selection

Especially for pop up and fly-in opt-ins, you can set the trigger types to set how the popup/fly-in to appear. You can, for instance, set the popup/fly-in to appear after your visitors scroll the page they are visiting with a certain percentage of the page scroll. Or you can simply display the popup/fly-in once the page is fully loaded. There are 7 trigger types offered by Bloom:

  • After time delay
  • After inactivity
  • At the the bottom of post
  • After commenting
  • After scrollong
  • After purchasing
  • On click

There are also options to hide the popup/fly-in on mobile devices.

If you want to direct your customers to a certain page after they have filled out the form, you can also do so.

Statistics

Being able to monitor the performance of your opt-in forms is crucial enough. This allows you to learn which forms are effective and which ones aren’t. Bloom comes with such a feature. You can simply click the vertical bars icon on the Bloom panel to access the statistics feature.

Some metrics you can learn are conversion rate, the number of subscribers you gain in a week or month. You can check the statistics of each form you have.

Compatibility with Page Builder Plugins

You might be wondering, is Bloom compatible with all page builders. To be honest, we haven’t tested Bloom on every page builder plugin, but it works very well on Elementor and Divi Builder. This website itself is built with Elementor and we use Bloom to capture email addresses of our visitors. As we mentioned earlier, you can see the example of Bloom’s implementation in this blog post. We use the locked content opt-in in the example.

We have also tested other opt-in types and everything went well. To add a Bloom opt-in on a page, you can simply copy its shortcode and paste it to the page you want to add it to.

If you use Divi Builder, you can use the Code module to add the opt-in. If you use Elementor, you can use the Shortcode widget.

A Short Review of Bloom Plugin

We know what’s on your mind. Price is the biggest dilemma leading you to think twice to buy Bloom. While there are some similar plugins you can find on CodeCanyon at a cheaper price.

If you only need a single plugin (Bloom is this case) for a single website, $89 might is a waste of money. But if you love all of the Elegant Themes products and want to use them all on your website, $89 is not too expensive. As we mentioned earlier, most themes on ThemeForest are sold at $40 to $60. Since not all themes have a default email opt-in feature with comprehensive features like Bloom, you might end up spending more than $89 to buy a theme and an email opt-in plugin.

Bloom is functionally great if you use email as the main marketing tool to grow your online business. It has a built-in statistics feature to allow you to monitor the performance of your opt-in forms and figure out which forms are more effective and which forms are not. The ability to display opt-in forms in specific page(s) and post(s) is another great point.

Summary

  • Functionality: 5 out of 5 stars (5 / 5)
  • Easy of use: 5 out of 5 stars (5 / 5)
  • Features: 5 out of 5 stars (5 / 5)
  • Price: 4 out of 5 stars (4 / 5)

How to Add Ninja Forms to Elementor Page (Two Different Methods)

Elementor (the pro version) comes with a Form widget that you can use to add a form to the page/template you are creating. If you have been using Ninja Forms before installing Elementor, you can add your existing Ninja Forms forms to an Elementor page or template.

There are at least two ways to add a Ninja Forms form to an Elementor page. We will cover them in this article. Before getting started, edit the Elementor page where you want to add your Ninja Forms form to. Or, you can also create a new page. If you are new to Elementor, you can read the beginners’ we have written to learn how to use Elementor.

Method one: Using the Shortcode widget

Elementor has a widget called the Shortcode widget. You can use this widget to integrate WordPress plugins that use shortcodes with Elementor, including Ninja Forms. This widget is available on both the free version and the pro version of Elementor. Before using this widget, copy the shortcode of the form you want to add to the Elementor page. To do so, go Ninja Forms -> Dashboard. You can see the shortcodes of your forms on the Forms tab.

Switch to the Elementor editor and drag the Shortcode widget to the canvas area.

Paste the shortcode you have just copied to the Shortcode block under the Content tab on the left panel.

If the live preview of the form doesn’t appear on the canvas area, try to preview your page by clicking the eye icon.

This method doesn’t allow you to customize the look of your form.

Method two: Using an add-on

If you want to have an option to customize the look of your form when integrating Ninja Forms with Elementor, you can use an add-on. Two Elementor add-ons that you can use are Essential Addons and Happy Addons. These add-ons have a widget that you can use to add a Ninja Forms form to an Elementor page. Essential Addons and Happy Addons are freemium add-ons and the widgets to add a Ninja Forms form are available in the free version.

You can get the free version of Essential Addons and Happy Addons on the plugin directory of WordPress. Read the differences between Happy Addons and Essential Addons before making a decision which add-on you should install.

In this example, we will demonstrate how to add a Ninja Forms form using Essential Addons. Assuming you have installed and activated Essential Addons on your WordPress site, edit the page you want to add your Ninja Forms to with Elementor. Drag the Ninja Forms widget to the canvas area.

Go to the left panel. Select a form you want to add from the dropdown menu on the Ninja Forms settings block under the Content tab. You can also show/hide the form title, labels, and placeholder.

Open the Errors block to show/hide the error messages and validation errors.

To style up your form, you can open the Style tab. There are about 11 setting blocks you can open.

1. Form Container

You can open this block to customize the container of your form. You can set things like the form width, form background, form margin, form padding, and so on.

2. Title & Description

You can open this block to customize the title and the description of your form. You can set the text color, typography (font size, font family, font style), alignment, and margin.

3. Labels

You can open this block to the customize the form labels. You can set the text color and the typography of your form labels.

4. Input & Textarea

You can open this block to customize the fields of the form. You can set the alignment, background color of the form fields, text color of the form fields, border radius of the form fields, the width of the fields, the height of the fields, and so on.

You can customize both the normal state and the focus state of your form. Simply click the FOCUS tab to customize the fields of your form on the focus state. Focus state itself refers to a state where you place your cursor on a certain field (active field).

5. Field Description

You can open this block to customize the field description of your form. You can set the text color, typography, and the spacing.

6. Placeholder

You can open this block to set color of the placeholder of your form.

7. Radio & Checkbox

If you have a complex form that contains radio buttons and checkboxes, you can open this block to customize them. Enable the Custom Styles option to use custom styles. You can set the size, color, border width, border color, and so on.

You can customize both the normal state and the checked state. Simply click the CHECKED tab to customize the checked state.

8. Submit Button

You can open this block to customize the submit button of your form. You can set things like button alignment, button width, button background color, button text color, button border radius, and so on.

9. Success Message

You can open this block to set the color and typography of the success message of your form.

10. Required Fields Notice

You can open this block to set the text color and typography of the notice of the required fields of your form.

11. Errors

You can open this block to customize the error messages and the validation errors of your form. You can set the text color and typography.

That’s it. You can continue editing your page by customizing other widgets. Once done, click the PUBLISH/UPDATE to publish/update your for page.

8 Elementor Add-ons to Create a User Registration Page

Elementor has no default widget to add a user registration form to a page. With a little modification, you can use the Form widget to add a user registration form to the page or template you are creating. You will need to add a new function (PHP script) in which the function will add a new user to your WordPress site. If it looks scary for you, you can use an add-on to create a user registration page with Elementor.

Not all Elementor add-ons come with a widget to add a user registration form, though. Here are the Elementor add-ons that you can use to add a user registration form to a page/template.

1. Essential Addons

Being the most popular Elementor add-on, Essential Addons offers the essentials widgets to users. One of which is the Login | Register Form widget which you can use to create both a custom login page and a user registration page. You can use this widget to have a login form and user registration form on a single page. Your users can click a link to make an action the want to take (login or register). You can also disable the login link if you want it.

When creating a registration form using the Essential Addons Login | Register Form widget your forms will consist of 3 fields by default: username, email, and password. You can add other fields like first name, last name, website, and confirm password. There is also an option to require your users to read the terms and conditions before they can register. You can also protect your form with reCAPTCHA. The Login | Register Form widget itself is available on the free version of Essential Addons, which you can download on the WordPress plugin directory.

2. The Plus Addons

The Plus Addons is one of the premium Elementor add-ons. This add-on is especially a perfect option if you want to create a membership website with WordPress+Elementor. This add-on comes with a widget — the WP Login & Register widget — that you can use to create both a custom login page and user registration page on your website. No need to add a new function or something like that. The Plus Addons’ WP Login & Register allows you to add the login form and the registration form on a single page. The forms will be separated in different tabs as below.

You can add options to allow your users to register via either Facebook or Google. You can also integrate your form with Mailchimp to automatically add newly registered users to your email subscribers list.

Here are the key features offered by the WP Login & Register widget of The Plus Addons:

  • Various Ways to Setup Login/Signup Form
  • Panel for Logged in Users
  • Special Forgot Password Options
  • Login Bar On Hover
  • Login Bar On Click

In addition to the WP Login & Register widget, The Plus Addons also comes with over sixty other widgets.

3. JetBlocks

JetBlocks is an Elementor add-on part of JetPlugins, a set of premium Elementor add-ons developed by Crocoblock. This add-on adds 9 widgets to your Elementor (as you can see on the image above), including the Registration Form widget that you can use to add a registration form to the page/template you are creating. You can simply drag the Registration Form to the canvas area. Without making any setting (with the default settings), your registration form will work properly.

The form fields you can add when creating a user registration form with the JetBlocks’ Registration Form are:

  • Username
  • Email
  • Password
  • Confirm Password

You can set a custom message for successful new account creation as well as a redirect page.

4. JetEngine

JetEngine is another Elementor add-on developed by Crocoblock, just like JetBlocks. This add-on is designed to allow you to add dynamic content to your Elementor designs (pages or templates). You can use it to create a custom post type, custom fields, custom taxonomies, and custom forms. The custom form builder of JetEngine has the capability to create a user registration. You can read this article to learn more.

5. Element Pack

Element Pack also comes with a widget that you can use to effortlessly add a user registration form to your Elementor page. The widget that you can use to do so is called User Register. The features offered by the Element Pack’s User Register widget are not as rich as The Plus Addons. For instance, there are no options to allow your users to register via Facebook or Google. There is also no option to integrate your registration form with Mailchimp. However, you can get Element Pack at a cheaper price. You can get the Element Pack add-on for only $39 (one-time purchase).

There are some elements you can enable/disable when adding a user registration form using Element Pack. Such as lost your password link, login link, and so on. You can also set a redirect page and custom message. To save you time in styling up form, Element Pack offers several preset styles you can choose from.

6. PowerPack

You can also use PowerPack if you need to create a user registration page on your WordPress site with Elementor. PowerPack comes with a widget called Registration Form that you can use to add a user registration form to a page or template you create with Elementor. To protect your registration form from fake registrations, you can integrate your form with reCAPCTHA. There are 8 fields you can add to your forms:

  • Username
  • Password
  • Confirm Password
  • First Name
  • Last Name
  • Website
  • Consent
  • Static Text

If you want, you can also enable the email notification. By enabling this option, you will be notified every time a new user has just made a new account. You can also set the default role for users registered via the form. Another interesting feature offered by the PowerPack’s Registration Form is the ability to add the password strength meter to make sure your users use a strong password for their account.

7. Ultimate Addons

Ultimate Addons is another add-on that you can use to add a user registration form to your Elementor page/template. You can do so using the User Registration Form widget offered by the add-on. The fields you can add to your registration form are:

  • Username
  • Email
  • Password
  • Confirm Password
  • First Name
  • Last Name

There are two anti-spam services you can select to protect your form from fake registrations: Honeypost and reCAPTCHA.

8. HT Mega

Unlike other add-ons above, HT Mega is released as a freemium add-on. You can get the free version of this add-on on the WordPress plugin repository. The widget to add a user registration — the User Register Form — is available on the free version of HT Mega. In other words, you can create a user registration page in Elementor using HT Mega for free and without coding. Here are the fields you can add to your registration form:

  • First Name
  • Last Name
  • Website
  • Biographical Info
  • Email
  • Username
  • Password

Unfortunately, the HT Mega’s User Register Form offers no anti-spam feature. To save you time in styling up the form, there are 5 preset styles offered by HT Mega’s User Register Form. You can set a redirect page, but there is no option to set a custom message. While you can use HT Mega for free, there are over 80 widgets you can get with the pro version, as well as page templates.

7 Best Form Builder Plugins You Can Integrate with Elementor

You might be wondering, doesn’t Elementor have its own form builder feature? Yes, it does. However, for a more advanced need such as accepting payment, you still need a dedicated form builder plugin. Another reason, Elementor has no built-in feature to manage the form submissions. You need to install an additional plugin to manage form submissions in Elementor.

Elementor itself comes with a Shortcode widget. You can use this widget to integrate all WordPress plugins that use shortcodes with Elementor. Since most form builder plugins use shortcodes to add your forms to a page, you can use the Shortcode widget of Elementor to add your forms to an Elementor-powered page. However, adding your forms using this method doesn’t allow you to customize the look of your form using the Elementor editor.

Elementor add-ons like Happy Addons and Essential Addons come with widgets that you can use to integrate Elementor with a certain form builder plugins. Here is the list of form builder plugins you can integrate with Elementor.

Best WordPress Form Builder Plugins for Elementor

1. JetEngine

JetEngine is a WordPress plugin that a dependency on Elementor to work. It is an Elementor add-on designed specifically to create custom content types such as custom post types, custom fields, and custom forms. You can then add the custom content types you created to your Elementor designs (pages or template). JetEngine allows you to create several form types. From a simple contact form or email opt-in form to a complex form like a user registration form, front-end post submission form, or booking form.

There are 17 field types you can use when creating a form with JetEngine. The form itself is created on the JetEngine back-end while for the styling process, you can do it on the Elementor editor.

2. MetForm

MetForm is the only Elementor based drag and drop form builder for WordPress.

You can create any type of contact form, feedback form or subscription form for your WordPress site in minutes with this elegant and efficient plugin.
With 100,000+ active installations, it offers premium features and templates that allow you to make any type of desired contact forms.

With the help of this plugin, you can create forms for your websites in just minutes. It has important integrations which makes the form building journey even more effective and efficient.

It is available in both free and paid versions.

3. Gravity Forms

Gravity Forms is a feature-rich form builder plugin. It comes with nearly all features you can expect from a form builder plugin. From a drag-and-drop form builder interface, spam protection, submission manager, and so on. Gravity Forms is a perfect option to create a professional form. You can use it to create any type of form. From a donation form, payment form, job application form, user registration form, and so on. Gravity Forms supports integration with PayPal to accept payment, Dropbox to store the file uploads from users, and other services.

To integrate Gravity Forms with Elementor, you can install either the Happy Addons or Essential Addons. Both Happy Addons and Essential Addons come with a Gravity Forms widget that you can use to integrate your Gravity Forms forms with Elementor. You can customize the look of your forms using Elementor editor with those two add-ons.

Gravity Forms itself is a paid plugin. No free version is offered by this plugin but yo can try the offered demo to figure out the interface as well as the features offered by this plugin.

4. weForms

weForms is released as a freemium plugin. So, if you want to try it first on your website before upgrading to the pro version, you can do so. weForms comes with a submission manager so you can manage your form submissions without installing an extra plugin. The form submission manager feature is available on both the free version and paid version of weForms. weForms allows you to select a mail delivery service. Wether WordPress (via the wp_mail function), SendGrid, MailGun, or SparkPost.

The free version only allows you to create basic forms such as contact form and email opt-in form. With the paid version, you will be able to create more advanced forms such as user registration form, payment form, and so on. You can integrate weForms with Elementor via Happy Addons or Essential Addons.

5. Ninja Forms

Ninja Forms is also released as a freemium plugin, allowing you to use it to create basic forms on your WordPress site without spending a dime. Ninja Forms itself is a popular enough form builder plugin for WordPress. It has over 1 million active installations. The free version of Ninja Forms comes with about 25 field types, including reCaptcha to protect your forms from spammers. Ninja Forms comes with a clean drag-and-drop form builder. The free version of Ninja Forms also comes with a submission manager.

Same as the first two form builder plugins above, you can also integrate Ninja Forms with Elementor using either Happy Addons or Essential Addons as these add-ons come with a Ninja Forms widget. You can customize the look of your Ninja Forms forms using Elementor editor with those add-ons installed.

6. WPForms

WPForms is another popular form builder plugin for WordPress. It has over 3 million active installations. Same as most plugins above, WPForms is also released as a freemium plugin, allowing you to try how good the interface of this form builder. The free version of WPForms only allows you to use 10 form fields out of 30 fields. In addition, the free version has no submission manager. Both Essential Addons and Happy Addons come with a widget that you can use to integrate WPForms with Elementor.

7. WP Fluent Forms

WP Fluent Forms is another feature-rich form builder plugin that you can integrate with Elementor. You don’t need to install an add-on to integrate WP Fluent Forms with Elementor. When this plugin is installed and activated, you will see a widget called Fluent Form on the Elementor widget panel. This widget is automatically added when you activate the WP Fluent Forms plugin. WP Fluent Forms itself is released as a freemium plugin. It has a clean, intuitive form builder interface. There are about 38 form fields you can use to create a form. The free version can use 14 of them.

Features like submission manager, Mailchimp integration, and reCAPTCHA integrations are available on the free version of WP Fluent Forms.

The Bottom Line

You might be wondering, why we didn’t mention Contact Form 7? Simply because Contact Form 7 can be totally replaced with the Form widget of Elementor. With the Elementor Form widget, you can create all form types you can create with Contact Form 7. Even more. The Form widget itself is available on Elementor Pro. Read the differences between Elementor Free vs Elementor Pro.

JetMenu, a Great Add-on to Create Mega Menu in Elementor

Elementor has no default widget or feature to create a mega menu on your WordPress site. If you want to create a mega menu on an Elementor-powered WordPress site, you can install an add-on. JetMenu is one of the add-ons that you can use to create a mega menu in Elementor. How good is JetMenu? Read on to find the answer.

Elementor itself actually has a widget — the Nav Menu widget — that you can use to add a menu to your custom header. However, this widget has no capability to create a mega menu.

A Brief Intro About JetMenu

JetMenu is a great add-on if you want to create a mega menu in Elementor. Just like Elementor, you don’t need to touch any single line of code to create a mega menu with JetMenu. You can add and edit the content of your mega menu using the visual editor of Elementor (If you are new to Elementor, you can read the beginners’ guide we have written to learn how to use Elementor). In addition, you can also use JetMenu to create an off-canvas menu. JetMenu adds three widgets that you can use to add a menu to your custom header:

  • Mega Menu
  • Vertical Mega Menu
  • Hamburger Menu (you can use this widget to create an off-canvas menu)

JetMenu is a part of JetPlugins, a set of Elementor add-ons developed by Crocoblock.

Is Elementor pro required to use JetMenu?

You can use JetMenu on Elementor Free, but you need an add-on that has the capability to create a custom header since Elementor Free has no capability to create a custom header (read: Elementor Free vs Elementor Pro). JetThemeCore is one of the add-ons that you can use to create a custom header.

How to Use JetMenu to Create a Mega Menu in Elementor

Before getting started, we assume that you already know how to create a custom header in Elementor. We have a separate article that covers it in case you have no idea yet. In this article, we will go straight to adding a menu to the header. Also, make sure you have at least one existing menu on your WordPress site. Here is the example of the mega menu we created.

You can see more examples of the mega menus created using JetMenu on the official site of Crocoblock.

First off, create a new custom header with Elementor (or edit an existing one). Add the Mega Menu widget (or the Vertical Mega Menu if you want to create a vertical mega menu) to the header section. Go to the left panel and select a menu you want to add from the Select Menu dropdown menu on the Menu block under the Content tab.

You can go to the Style tab to style up your menu. You can do this later once the mega menu is created. For now, go to Appearance -> Menus on your WordPress dashboard. Select a menu to be edited. Make sure to select the menu according to the one you have set on the step above. On the Add menu items panel, open the JetMenu Location Settings block and enable the Enable JetMenu for current location option.

On the Menu structure panel, hover your mouse over a menu item you want to set it as a mega menu item and click the Settings button.

On the appearing window, click the Edit Mega Menu Item Content button on the Mega Content tab. This will open the Elementor editor where you can add the mega menu content to the mega menu item. Make sure enable the Use Mega content option as well.

As the Elementor editor opens, you can start adding the content. You can add any element/widget you like just like when you are creating a page or template with Elementor. For instance, for the “Blog” menu item, you can add the Posts widget to display your articles. Or, you can display your products on the “Shop” menu item. Start by adding a new section by clicking the plus button. Or, if you want to add the content from a template, you can simply click the folder icon.

Before adding any widget to the section, you can set the background first. By default, your section has a transparent background so setting the background is crucial to make your content visible. To set the background, open the settings panel by clicking the left arrow icon on the bottom-left corner. Go to the Style tab once the settings panel opens.

Select the background type you like and set the color on the color selector (or click the image selector if you want to use an image as background).

You can continue adding the content by dragging the widgets you want to the canvas area. Again, you can read this post if you are new to Elementor. Once done adding the content, click the UPDATE button followed by the X icon on the top-right corner.

Set the position of the mega menu by clicking the dropdown menu on Mega menu position. If you want your mega menu to be on the center area, set the position to Default and leave the width to default as well (the default width is empty). If you want to have a custom width, simply set the width value. You can also set the position to Relative the menu item.

If you want to add an icon to your mega menu item, open the Item Icon tab and select the icon you like. Also set the color of the icon.

You can also set a badge to your menu item if you want. In this context, a badge is an additional text above the menu item.

To add a badge, simply open the Item Badge tab and type the badge you want. Also set the color and the background color.

If you use the Vertical Mega Menu widget, you can also open the Vertical Menu Widget tab to set the position and the width of the vertical mega menu.

Click the SAVE button to apply all of the changes you made and click the X icon on the bottom-left corner to close the window.

Repeat the steps above to add mega menu content on other menu items. Once done, click the Save Menu button.

Note: You can’t add mega menu content on sub-menu items.

Styling up the Menu

Once you are done adding the mega menu content to the menu items you want, you can switch back to the custom header to style up the menu. Select the Mega Menu widget to edit it and open the Style tab on the left panel. There 10 styling option blocks you can open:

1. Desktop Container

You can open this block to set the background of the menu container on the desktop devices. You can set the alignment of the menu items, border radius of the menu container, the padding of the menu container, and the box shadow of the menu container.

2. Deskop Menu Items

You can open this block to customize the desktop menu items. Several things you can set are the typography (font family, font size, font style), text color, background color, border radius, padding, and so on. You can use set a different color for each state (normal, hover, and active).

There is also an option to set the color of the icons, but this setting option doesn’t work if you have set the icon color when you were adding the mega menu content.

3. Desktop Sub Menu

You can open this block to customize the items of the sub-menu. You can set things like the width the sub-menu (the dropdown), the typography, text color, background color, border radius, padding, margin, icon color, and so on.

You can both customize the panel of the simple menu and the mega menu. To customize the mega menu panel, simply open the MEGA PANEL tab.

4. Desktop Icon Size

You can open this block to set the size of the menu item icon on the desktop devices. You can also set the margin, horizontal position, and vertical position.

5. Desktop Item Badge

You can open this block to set the text color of the desktop item badge, typography, background color, border radius, padding, and margin.

6. Desktop Item Dropdown

You can open this block to customize the dropdown menu item on the desktop devices. You can set the font size, margin, horizontal position, and vertical position.

7. Mobile Toggle

You can open this block to customize the mobile toggle (the hamburger icon on desktop devices). You can can the toggle color, toggle size, background color, padding, and border radius.

8. Mobile Container

You can open this block to customize the menu container on the mobile devices. You can set things like the container width, container background color, the size of the close icon, the color of the close icon, padding, border radius, and box shadow.

9. Mobile Items

You can open this block to customize the content on menu items on the mobile devices. You can set the size of menu icons, the typography of the menu items, the text color of the menu items, the typography of the item badge, the text color of the item badge, sub-menu button, and so on.

You can play around on this settings block to customize the mobile menu of your website.

10. Mobile Advanced

You can open this block to set the loader color and cover color of the mobile menu on the mobile devices.

Global settings

While you can style up your menu via Elementor editor, JetMenu also comes with a settings panel where you can set the global settings of your menu. You can go to JetPlugins -> JetMenu Settings on the left sidebar of the WordPress dashboard to open the JetMenu settings panel. You don’t need to make any setting on this panel if you have styled up your menu in the Elementor editor. You just need to make a setting if you want to set a global setting.

The global settings will be used as the default settings of the Mega Menu and Vertical Mega Menu widgets. For instance, if you set the color of the main menu container to red like the one below,

the Mega Menu widget will have a red main menu container every time you add it to the header.

Global settings are great for time efficiency as it allows you to save the settings as a preset. However, since the panel is not powered by Elementor, you can’t preview every change you made in real-time.

Global settings will be overridden every time you make a new change when customizing the menu in the Elementor editor.

Final Thought – JetMenu Review

JetMenu is a great add-on if you want to create a mega menu on your Elementor-powered WordPress site. It makes use of the Elementor visual editor to allow you to add the mega menu content. You can add any Elementor widget when creating the mega content. For instance, you can add the Products widget to display the top-selling products on your online store. Or, you can add the Posts widget to display the featured articles on your blog or online magazine.

The ability to customize the menu on mobile devices is another great point worth-mentioning. There are 4 settings blocks dedicated to customizing the mobile menu of your website.

All components on the mobile menu can be customized via those settings blocks. In addition to creating mega menu, you can also use JetMenu to effortlessly create an off-canvas menu thanks to the availability of the Hamburger Menu widget.

JetMenu itself is a premium Elementor add-on. You can get it at $43 per year. There is also an option to get it in a bundle in case you need other add-ons from Crocoblock. One-time payment option is available.

Crocoblock offers a 30-day money-back guarantee so you can get your money back if you think JetMenu doesn’t work the way you expected.

Summary

  • Functionality: 5 out of 5 stars (5 / 5)
  • Ease of use: 4.5 out of 5 stars (4.5 / 5)
  • Compatibility with Elementor: 5 out of 5 stars (5 / 5)
  • Price: 5 out of 5 stars (5 / 5)
  • Overall quality: 5 out of 5 stars (5 / 5)

Update: JetMenu now supports Gutenberg.

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.