Divi Child Theme: How to Install and Where to Download

Divi is a theme that comes with tons of customization options. If you often make changes to your Divi-powered WordPress website, then using a child theme would be a great idea. When you use a child theme, you don’t need to worry your site is about to ruined up when you update your Divi theme to a newer version. The question is, where you can get a suited Divi child theme? This article will show you where to download a Divi child theme, as well as how to install it.

In case you didn’t know. A child theme is a sub theme that inherits the same functionalities, styles, and features of its parent theme. Using a child theme is so much helpful if you often make changes to your theme. When you make changes to your theme with the purpose of achieving certain appearance, the changes will not be applied to your parent theme’s files. The settings you applied to your child theme are preserved when you make changes to your parent theme, such us updating it. Thus, you can keep your theme updated without worrying about your site appearance. This is a smarter way to update your WordPress theme rather than making a backup of your site every time you want to update your theme to the newest version.

How to Install a Divi Child Theme

In general, installing a child theme is no different from installing a regular/parent theme. You can do so from the WordPress theme manager by going to Appearance -> Themes on your WordPress dashboard. However, installing a Divi child theme is a bit different as a Divi child theme usually contains other settings to be imported. Some Divi child themes also require you to import the homepage layout yourself. If you are lucky enough, you will find a Divi child theme that comes with a built-in content importer to import then demo content, including the page layouts.

Same as general WordPress themes, you will also get a ZIP file of a Divi child theme when you download it from a certain source. The first step to do once you get the ZIP file is to extract it to figure out the contained files. If you find an instruction file, you can read it to learn how to install the associated Divi child theme. In this example, we will show you how to install a Divi child theme we downloaded from Divi Marketplace which named Grow. The ZIP file of the theme consists of the following files:

  • functions.php
  • license.txt
  • screenshot.jpg
  • style.css

In the case of the Grow child theme, you can install it right away once you get the ZIP file. So, go to Appearance -> Themes on your WordPress dashboard and click the Add New button on top the side.

Click the Upload Theme button and select the ZIP file of the Grow child theme and click the Install Now button. Activate the theme once installed. If you are new to WordPress, you can read refer to this page to learn how to install a WordPress theme.

Importing the JSON files

If your Divi child theme comes with JSON files, you can import them according to their contexts. In general, a Divi child theme offers JSON files for theme customizer, theme option, and theme builder. In most Divi child themes, the JSON files are placed in the imports folder.

— Importing the JSON file for theme customizer

If your Divi child theme offers one, you can find the JSON file for theme customizer under the imports folder. You can find a JSON file with the name “customizer_settings.json” or the similar one. To import it, go to Appearance -> Customize on your WordPress dashboard. Click the two-arrow icon on the top-left of your screen and select the JSON file.

On the appearing dialog window, click the IMPORT tab and click the CHOOSE FILE button to select the JSON file. Click the Import Divi Customizer Settings button to import the JSON file.

— Importing the JSON file for theme builder

You can find the JSON file for Divi theme builder in the imports folder as well. Usually, it has a name “theme_builder_options.json” or the similar one. To import it, go to Divi -> Theme Builder on your WordPress dashboard. Click the two-arrow icon on the right side.

On the appearing dialog window, click the Import tab. Click the NO FILE SELECTED to select the JSON file and then click the Import Divi Theme Builder Templates button to import the JSON file

Once the importing process is done, click the Save Changes button to apply the changes.

A LITTLE NOTE. If you import the JSON file for theme builder, the settings you made on theme customizer (which you have imported above) might will be overridden, depending on the custom templates saved on the JSON file for the theme builder. You can read our previous article to learn more about Divi theme builder.

— Importing the JSON file for theme options

As before, you can find the JSON file for theme options under the imports folder of your Divi theme. This file usually has the name “theme_options.json.“.

Once you find the file, go to Divi -> Theme Options on your WordPress dashboard. Click the two-arrow icon on the right side.

On the appearing dialog window, go to the Import tab and click NO FILE SELECTED to select the JSON file and then click the Import Divi Theme Options button to import the JSON file.

Once the importing process is done, click the Save Changes button to apply the changes.

Top 7 Sources to Download a Divi Child Theme

Here are the top 7 sources to download a Divi child theme for your project.

1. Divi Marketplace

Divi Marketplace is one of the best sources to download a Divi child theme. It is a marketplace offered by Elegant Themes to facilitate Divi creators to sell their Divi products. From Divi child themes, Divi plugins, to Divi layouts. If you are a regular Divi user, you can visit Divi Marketplace to find Divi products according to your needs.

When looking for a child theme on Divi Marketplace, you can filter the child themes by price and user rating. You can find a child theme from a wide range of site categories.

2. Divi Cake

Divi Cake is another marketplace dedicated to the Divi community. You can also find Divi products on this website, including a child theme. There are over 600 Divi child themes available on Divi Cake. Ranging from around $10 to $100, depending on the complexity. Divi Cake also offers a great filtering feature to allow you to filter the child theme collections by price, availability date, and tags.

3. Elegant Marketplace

You can also visit Elegant Marketplace to find a suited Divi child theme for your project. There are over 400 child themes available on the site. In addition, you can also find other Divi products like plugins and layouts.

4. Divi Space

Divi Space is website that specifically serves anything about Divi. It offers Divi child themes, Divi plugins, and Divi layouts. It even also offers Divi hosting to facilitate Divi users who seek for a web hosting dedicated to Divi. There are about 27 Divi child themes offered by Divi Space. Divi Space itself adopts a membership-based business model. After being a member, you will have access all the child themes offered by Divi Space, as well as other products. If you hate membership-based business model, Divi Space also allows you to buy individual child themes. Before making a purchase, you can preview the child theme you want to buy first.

5. Divi Life

Divi Life is pretty similar to Divi Space. It is a website that offers Divi products, including child themes. There are 17 Divi child themes offered by Divi Life. You can get them all by becoming a member of Divi Life. There is also an option to buy an individual child theme in case you prefer this option. Each child theme offered by Divi Life has a demo site to give you a preview of how your website will look like after implementing a child theme.

6. Divi Extended

Divi Extended is another website that specifically offers Divi products, including child themes. There are two options to download a child theme from Divi Extended: by becoming a member or make an individual purchase. Before downloading a certain child theme, you can also preview it first. The child themes offered by Divi Extended come with a demo content importer to make it easy for you to import the page layouts.

7. Divi-childthemes.com

If you are looking for a free Divi child theme, Divi-childthemes.com is one the websites you can visit. There are four free Divi child themes offered by the website. We have tried two of them and they come with a demo content importer to streamline your workflow. If you prefer a paid child theme, the website also offers ones. Demo website is also available for each theme on the divi-childthemes.com.

The Bottom Line

Divi comes with tons of customization options, allowing you to try different behaviors and stylings to your website. If you often try different customization settings on your Divi-powered WordPress site, using a child theme is a great option to take as you can make changes to your website without changing the actual files of your parent theme (Divi in this case). Also, you can keep your theme updated without worrying about the current customizations. When you update a parent theme, it won’t affect the child theme.

If you use Divi and are looking for a child theme for your project, you can visit one of the websites we have mentioned above. The method to install a Divi child theme itself can be vary depending on the source you download the child theme. If it is possible, you can choose a Divi child theme that comes with a demo content importer to streamline your workflow.

6 Best Coffee Shop Elementor Template Kits

Do you have a coffee shop business and want to go online to reach more customers? If yes, then that’s a great idea. You already have social media to promote your coffee shop via the internet, but a website allows you to go beyond. Not only a website allows you to promote your business, but you can also directly sell your products. If you have limited resources and time, Elementor is a great tool to create your coffee shop website. You don’t need to start everything from scratch. Instead, you can use a suited template kit. An Elementor template kit makes it possible for you to have a website in a matter of hours, as long as everything is ready (the necessary materials). We have curated the best Elementor template kits to create your coffee shop website.

When it comes to coffee shop, you might want your website has an e-commerce functionality whereby your customers are able to buy your products directly via your website. In the WordPress ecosystem, you have WooCommerce to add an e-commerce functionality. Elementor (the Pro version) comes with a WooCommerce builder to allow you to create custom templates for the shop page and single product page of your WooCommerce.

Without further ado, here is the list of the curated Elementor template kits for your coffee shop website.

Curated Elementor Template Kits for Coffee Shop

1. Online Coffee Shop

On the top of the list, we have Online Coffee Shop. It is an Elementor template kit from Elementor itself. You can access it via Kit Library (Templates -> Kit Library). Unlike most coffee shop websites which usually have a dark nuance, the Online Coffee Shop template kit is designed with a brighter nuance. It uses a beige background (hex code: #F9F3EE). One of the key points of the Online Coffee Shop is the selection of the font family which looks fit its concept. The template kit uses a free font named Lexend Peta. The font is available on Google Fonts.

There are 11 templates offered by the Online Coffee Shop in total. In addition to main page templates like homepage and contact page, other templates include a custom cart page and a custom checkout page for WooCommerce. There is also a template which you can use to create a profile page of your coffee shop.

  • Price: Free (Elementor Expert plan required)
  • Dependency: Elementor Pro
  • Rating: 4.9 out of 5 stars (4.9 / 5)

2. Coffee Express

Coffee Express is a template kit from Templately. To use it, you need to install and activate the Templately plugin on your WordPress site. Unlike Online Coffee Shop above, the Coffee Express template offers no custom templates for WooCommerce. The template kit is a good fit if you want to create a profile website for your coffee shop without needing to add an e-commerce functionality. There are 5 page templates offered by the template kit.

  • Price: Free (Templately Pro plan required)
  • Dependency: Elementor Pro, Essential Addons
  • Rating: 4 out of 5 stars (4 / 5)

3. Coffegato

Coffegato is an Elementor template kit from Crocoblock, the developer of popular Elementor add-ons like JetElements, JetEngine, JetPopup, and more. Since it is designed by Crocoblock, the Coffegato template is created using the add-ons developed by Crocoblock as well.

The Coffegato template kit itself has one thing in common as Coffee Express above in which it tends to ideal to be used to create the profile website for your coffee shop. It offers no custom templates for WooCommerce. Coffegato comes with a price list section to allow your aspiring clients to get to know the prices of your products.

4. Valensia

Valensia is a great option if you want to create a website for your coffee shop, while also add an e-commerce functionality. Before importing the template kit, you can install the WooCommerce plugin on your WordPress site to add the e-commerce functionality to your website. You can then import the custom WooCommerce templates offered by Valensia. There are 4 custom templates dedicated to WooCommerce: the shop page, single product page, checkout page, and cart page. In addition, Valensia also comes with custom templates for your site header, footer, 404 page, and single post. You have 3 homepage templates to choose from.

As you can see on the screenshot above, the Valensia template kit has a dark nuance, which is widely adopted by coffee shop website referring the color of coffee. The Valensia template kit itself is available on ThemeForest. You need to install the Envato Elements plugin to import the plugin. You can read our previous article to learn how to install a template from ThemeForest.

  • Price: $16
  • Dependency: Elementor Pro, ElementsKit
  • Rating: 4.7 out of 5 stars (4.7 / 5)

5. Siena

Siena is not the option if you want to have a coffee shop website that has an e-commerce functionality as it offers no custom templates for WooCommerce. But if you want to create a coffee shop website that a beautiful design, it is the right option. More specifically, Siena is the best option if you plan to create a website with an off-canvas menu. The designer of the template kit makes of the Elementor popup builder feature to create an off-canvas menu. There are 14 templates offered by the Siena template kit in total, including a custom template for header, footer, and footer.

  • Price: $29
  • Dependency: Elementor Pro, DethemeKit
  • Rating: 4.4 out of 5 stars (4.4 / 5)

6. Coffesse

Coffesse offers three homepage templates you can choose from. One of which is the one on the screenshot above, which has a green background to give a natural nuance. Green (hex code: #35916C) itself is one of the main colors used by the designer of the Coffesse template kit. You will see the green colors on some areas of your website when you use this template kit. Along with the 3 homepage templates, there are 10 templates offered by Coffesee in total. Unfotunately, there are no custom templates for WooCommerce. Which means that Coffesse is not designed for WooCommerce-powered WordPress site.

  • Price: $29
  • Dependency: Elementor Pro
  • Rating: 4.4 out of 5 stars (4.4 / 5)

The Bottom Line

Elementor is a great tool to create a beautiful website, but what if you have no web design background? No worries, there are a bunch of Elementor templates to start with. Elementor even offers template kits to streamline your workflow in creating a website. Template kits are available on Kit Library which you can access by going to Templates -> Kit Library on your WordPress dashboard. Alternatively, you can go to sites like ThemeForest and Templately to get an Elementor template that fits your website project. The Elementor template kits we have mentioned in the list above are great to create a coffee shop website. Whether for your client’s website or your own website.

10 Best Photography Elementor Template Kits

As a professional photographer, you need a creative way to promote your service. In addition to Instagram, you can make use of sites like Unsplash and Pexels to get more exposure from global audience. Creating a website can also be a great idea to promote your photography service. If you have a plan to create a photography website, Elementor is a great tool to do so. Creating a website with Elementor, you don’t need to start everything from scratch. Instead, you can use a template kit to streamline your workflow. We have curated some of the best Elementor template kits to create a photography website.

Elementor itself has some built-in features that will be useful to create a photography website. For instance, you can create a gallery to showcase your shots without needing to install an extra plugin. There is also a built-in setting option to open image in a lightbox in case you like it.

Since Elementor works in WordPress, it is also possible if you want to sell your photos right from your website. You can make use plugins like Easy Digital Downloads and Envira Gallery. Or, if you want to release your shots for free, you can accept donation to let your fans appreciate your works. Elementor has a built-in feature to accept PayPal donation.

Best Elementor Template Kits for Photography Site

1. Portrait Photography

Photography consists of some branches. From landscape photography, wildlife photography, still life photography, portrait photography, and so on. If you have a specialty in the portrait photography and plan to create a website using Elementor then Portrait Photography is a great template kit for you. The template kit is offered by Elementor. You can access it from Kit Library (Templates -> Kit Library). However, you need to have an Expert plan (or the higher plan) to import the template kit. It is not available on the Essential and Advanced plan.

The Portrait Photography template kit uses a black and white concept to offer a minimalist yet elegant nuance. It uses an off-canvas menu by taking advantage of Elementor popup builder. The template kit consists of 6 main page templates: the home page template, portraits page template, about page template, contact page template, editorial page template, and journal page template. There are two popup templates offered as well: the menu popup and subscription popup.

  • Price: Free (Expert plan required)
  • Dependency: Elementor Pro
  • Rating: 4.8 out of 5 stars (4.8 / 5)

2. Architecture Photography

Architecture Photography is a great Elementor template kit for photographer who has a specialty in architecture photography. Same as the Portrait Photography template kit about, Architecture Photography also has a minimalist design with the background color of white (hex code: #F8F8F8). There are four main page templates offered by the template kit: the home page template, the contact page template, the about page template, and the portfolio template. In addition, it also offers a header template, a footer template, and a contact popup template, respectively.

Architecture Photography template kit itself is also offered by Elementor itself and is only available for the Expert plan or the higher plan.

  • Price: Free (Expert plan required)
  • Dependency: Elementor Pro
  • Rating: 4.6 out of 5 stars (4.6 / 5)

3. Wedding Photographer

Are you a wedding photographer? If yes, then the Wedding Photographer template kit is a perfect template kit to create your website. The template kit, which is offered by Elementor, comes in a minimalist design just like the first two template kits above. It also uses white as the background color (hex code: E8EBEA). The simple yet elegant contact page template offered by the template kit allows you to create a contact page more quickly. Overall, the page consists of 6 page templates: the home page, the wedding page, the contact page, the about page, the info page, and a testimonial page.

  • Price: Free (Expert plan required)
  • Dependency: Elementor Pro
  • Rating: 4.4 out of 5 stars (4.4 / 5)

4. Nature Photographer

Nature Photographer is another template kit offered by Elementor. You can access the template kit via Kit Library. It is available for all Elementor Pro plans, including the Essential plan. Just like the name suggests, the template kit is aimed specifically at wildlife photographers. The template kit itself uses a dark nuance. It applies parallax effect on some of the sections of the pages, especially the home page. The template kit also makes use of the Elementor popup builder to offer an off-canvas menu. It also makes of the Elementor theme builder feature to offer a header template, a footer template, a single post template, an archive page template, and a 404 page template.

  • Price: Free (Expert plan required)
  • Dependency: Elementor Pro
  • Rating: 4.7 out of 5 stars (4.7 / 5)

5. FlyShot

Since the emergence of DJI, aerial photography is getting more popular. Many photographers now own a drone to take the photos or videos of highland and sea. If you have a specialty in this area and want to create a website to promote your service, then FlyShot is a great template kit you can use. Not only it allows you to showcase your works, but you can also sell your photography gears thanks to WooCommerce integration. A shop page template is available on the template kit it so that you don’t need to create the shop page from scratch. Same as the Nature Photographer above, the FlyShot template also comes in a dark nuance.

The FlyShot is a template kit offered by Templately. Thus, you need to have the Templately plugin installed on your WordPress site to use the template kit. The template kit itself consists of 8 page templates.

  • Price: Free
  • Dependency: Elementor Pro, Essential Addons
  • Rating: 4.6 out of 5 stars (4.6 / 5)

6. Photoluke

Photoluke is a great template kit if you want to create a website for your photography business. One of the templates available on the template kit is a “Packet Product” template which you can use to create a page to display the packets of your services. There is also a template to create the detail page of each packet you offer. The contact form on the end section of each packet detail page makes it easy for your aspiring clients to reach you out. Photoluke offers 3 homepage templates you can import. The Photoluke template kit itself is available on ThemeForest. You can read our previous article to learn how to install an Elementor template from ThemeForest.

  • Price: $20
  • Dependency: Elementor Pro
  • Rating: 4.4 out of 5 stars (4.4 / 5)

7. Memoreel

The use of Memoreel is pretty similar to the Photoluke above. It is also a great template kit to be used on a photography website whereby the business offers packets for the photography services it offers. The template kit offers a template to create a pricing page on your website. Page templates like case study and team member are also available. There are 21 templates offered by Memoreel in total. In addition to page templates, Memoreel also offers custom templates for the header, footer, single post, and 404 page. Speaking of header, you can add an actionable button like WhatsApp button or Skype button to make it easier for you aspiring clients to start the chat.

  • Price: $19
  • Dependency: Elementor Pro
  • Rating: 4.4 out of 5 stars (4.4 / 5)

8. Floki

Floki is an elegant template kit in a dark nuance. You can use this template if you like a black nuance. The Floki template kit itself is ideal for a photography business that serve services like photoshoot, photo studio, wedding photography, and corporate photography. The template kit comes with a template to create a service page whereby you can display all the service types you serve. Floki is especially a great option if you are looking for a template kit that uses Elementor Pro only. The template kit requires no additional plugins to work.

There are 7 page templates offered by the Floki template kit. In addition, you will also get a header template, a footer template, and a 404 page template.

  • Price: $25
  • Dependency: Elementor Pro
  • Rating: 4.7 out of 5 stars (4.7 / 5)

9. Auzora

Auzora is another great Elementor template kit to create a website if you have a specialty in aerial photography or videography. The template kit is created using Elementor Pro only so that you don’t need to install additional Elementor add-ons to import and use the template kit. It offers over 10 templates in total, including the archive page template and the single post template. There are two home page templates you can choose from. Auzora has a unique typography.

  • Price: $24
  • Dependency: Elementor Pro
  • Rating: 4.7 out of 5 stars (4.7 / 5)

10. FrontSix

If you are looking to create a photography website with a full-screen menu, then the FrontSix is the template kit you need. The template kit uses a black nuance like some of the template kits above. The full-screen menu on this template kit is created by taking advantage of the popup builder feature of Elementor. You can read our previous article to learn more about how to create a full-screen menu in Elementor. The FrontSix template kit itself consists of 6 main page templates: the home page, the gallery page, the album page, the blog page, the contact page, and the studio page. You will also get three templates for the header, footer, full-screen popup, and 404 page, respectively.

  • Price: $29
  • Dependency: Elementor Pro
  • Rating: 4.8 out of 5 stars (4.8 / 5)

The Bottom Line

Photography is one of the fields in the creative industry. Thus, it also requires a creative way to be successful in this field. Being a professional photographer, you can’t rely on Instagram (or social media at large) only. You need a website to reach broader audience. With Elementor, you can create a professional photography website quickly thanks to template kit. The template kits we have mentioned above can be great options to create your photography website.

How to Install an Elementor Template Kit You Bought from ThemeForest

ThemeForest is one of the websites to get an Elementor template kit. You can get a template kit from a wide range of categories. From portfolio, photography, online magazine, and so on. The prices of template kits ranging from $10 to $30, depending on the complexity of the template kits. After completing your purchase, you will have access to the ZIP file of the template kit you bought. Although the template kit is available in a ZIP format, you can’t import it directly from the Elementor template library. Instead, you need to install the Envato Elements plugin to import it.

How to Install an Elementor Template Kit from ThemeForest

As stated above, you need to install the Envato Elements plugin on your WordPress site to install an Elementor template kit you bought from ThemeForest. The plugin itself is available on the WordPress plugin directory. Activate the plugin right away once installed.

Once the Envato Elements plugin is installed, go to Elements -> Installed Kits on your WordPress dashboard. Click the plus button and select the ZIP file of your template kit.

Your template kit might require extra plugins to work properly. If it does, you can click the Install Requirements button on the upper-right corner to install the required plugins.

Once the required plugins are installed, you can start to import the templates offered by the template kit. Simply click the Import Template button to import each template.

Once a template is successfully imported, you will see two buttons on the associated template. You can click the View Template button to view and edit the imported template on the Elementor editor (read: How to Use Elementor).

Using the Imported Templates

All templates of the template kit you have imported will be added to the Elementor library. You can import them according to the associated pages. For instance, you can import the homepage template on the homepage of your website. First, create a new page (Pages -> Add New) and name it “homepage” or any name to your liking. Edit the page with Elementor by clicking the Edit with Elementor button.

On the Elementor editor, click the folder icon on the canvas area to open the template library.

On the template library window, click the My Templates tab to view your existing templates. You can sort the templates by creation date to make it easier to find the templates of the template kit you have just imported. To do so, you can click the CREATION DATE column. Hover your cursor over the template you want to import (homepage in this case) and click the Insert button.

You can repeat the steps above to use other imported templates.

12 Best Elementor Template Kits for Portfolio Website

In today’s age, you have social media to promote your service to your aspiring clients. However, it’s not enough. You need a website to strengthen your branding. A website allows you to add more promotional materials. You can display your resume, show off your portfolio, and so on. Elementor allows you to create a website in a matter of hours (even minutes in some cases). You don’t need to start everything from scratch. Instead, you can use an Elementor template kit. If you are looking to create a portfolio website with Elementor, we have curated some template kits to ease your job.

What is an Elementor template kit?

An Elementor template kit is a set of Elementor templates designed for a specific website type. A template kit can contain four to eight templates. They are created based on the same design system to make sure every element on each page has the same styling. Elementor itself has a feature called Kit Library in which you can find and install a template kit offered by Elementor. You can also find a template kit from websites like ThemeForest and TemplateMonster. With so many options out there, finding a suited template kit is a bit challenging, though. Again, we have curated some Elementor template kits to create a portfolio website. Here is the list.

Curated Elementor Template Kits for Portfolio Website

1. CV Portfolio

CV Portfolio is an elegant template kit with no-scroll concept. All pages on the CV Portfolio template kit are set to fit to screen. No need to make a scroll to view the content of each page. On each page, you have two navigation buttons to make it easy to go to the previous and the next page. There is also a navigation menu on its header to navigate to pages. CV Portfolio is a great template kit for freelancer, regardless of the field you serve. The kit uses a dark green as its base color (hex code: #0F363D).

The CV Portfolio template kit itself is available on the Kit Library of Elementor. However, you need to subscribe to the Expert plan (or the higher plan) to import it.

  • Price: Free (Expert plan required)
  • Dependency: Elementor Pro
  • Rating: 5 out of 5 stars (5 / 5)

2. Illustrator Portfolio

Illustrator Portfolio is another template kit offered by Elementor itself. Just like the name suggests, the template kit is aimed specifically at illustrators, but there is no sin if you are not an illustrator yet want to use it. The selection of black (hex code: #0C0C0C) as its base color makes the template kit looks elegant. The template kit consists of three pages (the home page, about me page, and contact page). On the home page, there is a “portfolio” section to show off the projects you have finished. The mouse effect applied to the hero section of the home page looks very proportional.

Same as CV Portfolio above, Illustrator Portfolio also requires an Expert plan to be imported. No need to install an additional Elementor add-on as the template uses widgets available on Elementor Pro.

  • Price: Free (Expert plan required)
  • Dependency: Elementor Pro
  • Rating: 5 out of 5 stars (5 / 5)

3. Industrial Design Portfolio

Looking for a template kit with a brighter nuance? Industrial Design Portfolio might be the one you are looking for. The template kit uses a brighter color base than the first two above (hex code: #F1F1F1). Industrial Design Portfolio is another template kit designed for designers. More specifically, it is aimed at product designers (physical product). So, if you (or your client) serve in this area, the template kit a great fit. Unlike the first template kits above, the Industrial Design Portfolio is available for all Elementor Pro plans, including the Essential plan (the cheapest plan).

  • Price: Free
  • Dependency: Elementor Pro
  • Rating: 4.6 out of 5 stars (4.6 / 5)

4. 3D Designer Portfolio

Are you a 3D designer and want to create a portfolio website to show off your works? If yes, then the 3D Designer Portfolio is the template kit for you. Same as Industrial Design Portfolio above, the 3D Designer Portfolio template kit also comes in a bright nuance. The template kit uses a bright color with the hex code #FFFFFF as its background color. The template kit has four main pages (home page, about page, projects page, and contact page). In addition to these page templates, the kit also comes with a custom template for a single project, a custom template for header and footer. There is a mouse effect on the hero section on the homepage to make your website looks more attractive.

  • Price: Free
  • Dependency: Elementor Pro
  • Rating: 4.7 out of 5 stars (4.7 / 5)

5. Richard Gore

Richard Gore is a template kit offered by Crocoblock. It has a dark nuance and is aimed at writers. So, if you have a project to create a portfolio for a writer or probably you are the writer yourself, then this kit is for you. The Richard Gore template kit comes with page templates like the home page, about page, my books page, and blog page. In addition, it also comes with a custom template for a single book, and a custom template for the header and footer. The Richard Gore template looks minimalist. It uses an off-canvas menu for the navigation.

To use the Richard Gore template, you need to be a paid subscriber of Crocoblock. No additional fee applied to use it.

6. John Doe

John Doe is a bit more colorful than the first five template kits above. The template kit uses a gradient color on the hero section of its home page. There is also a mouse effect applied to the hero section to give an interactive nuance. John Doe itself is designed to create a one-page portfolio website. So, the template kit consists of only one page template. The page itself is divided into several sections like Services, About, Case Study, Testimonial, and Blog. The kit offers a one-page navigation to make it easy for you to navigate between sections. Unfortunately, there is not sticky effect applied to its header. Also, there is no a “back to top” button offered.

The John Doe template kit is offered by Templately. You need to install the Templately plugin on your WordPress site to import the template kit. This template kit is ideal for designers, marketers, or freelancers.

7. Michael

Michael is another template kit aimed at a one-page portfolio website. It is also offered by Templately so that you need to have the Templately plugin installed on your WordPress site to import the template kit. Michael is a solution if you are looking for a free portfolio template kit as it doesn’t require the Templately pro account to be imported.

  • Price: Free
  • Dependency: Essential Addons
  • Rating: 4 out of 5 stars (4 / 5)

8. Technophile

Technophile is an Elementor template kit designed for IT freelancer. So, if you serve in this area then the template kit is for you. The Technophile template kit is also offered by Templately. You can use it for free, but Elementor Pro is required as the template kit comes with custom templates such as single post template, custom template for a single project, custom header and footer templates. The Technophile template kit also comes with elements like pricing table, testimonials, and so on.

  • Price: Free
  • Dependency: Elementor Pro, Essential Addons
  • Rating: 4.5 out of 5 stars (4.5 / 5)

9. EleFolio

EleFolio is another colorful Elementor portfolio template kit from Templately. It is aimed specifically at product designers (digital product). If you are a freelancer who serves areas like web design, app design, and app prototype then the template kit is for you. You need a pro account on Templately to use the template kit. Also, you need to use Elementor Pro as the plugin offers custom templates for your WordPress site. The main pages offered by template kit are the home page, about page, projects page, servies page, and contact page. EleFolio uses some mouse effects to make your website looks more attractive.

  • Price: $5.99 per month
  • Dependency: Elementor Pro, Essential Addons
  • Rating: 4.5 out of 5 stars (4.5 / 5)

10. Hando

Hando is a template kit designed for corporate and freelancers. If you have a creative agency and want to create a portfolio website for your company, then this template kit is a great fit. The template is created using Elementor Pro only. In addition to the main pages like the home page, about page, contact page, and team page, the template kit also offers custom templates. Elements like slider, pricing table, and team member are available on this template kit. Hando itself is available on ThemeForest.

  • Price: $21
  • Dependency: Elementor Pro
  • Rating: 4.5 out of 5 stars (4.5 / 5)

11. Portostar

If you want to place your photo on the hero section of your home page website, Portostar is one of the template kits you can consider. The template kit has a bright nuance. Its solid background gives a minimalist nuance to this template kit. Although not aimed specifically at certain fields, the Portostar is great for UI/UX designers, freelance app developer, and the related occupations.

The designer of the Portostar used Hello theme when creating the template kit, but of course, you can use this template kit on any WordPress theme. The page templates offered by Portostar are home page, about page, contact page, projects page, pricing page, and so on. Also, it comes with custom templates like header, footer, and 404 page.

  • Price: $29
  • Dependency: Elementor Pro
  • Rating: 4.5 out of 5 stars (4.5 / 5)

12. Byra

Stick to Elementor Free and look for an affordable template kit? Byra is a great option you can take a look at. The creator of the template kit combines Elementor Free and Better Elementor Addons to create the template kit. Although it uses Elementor Free, the template kit offers elements like pricing table and team member (read: Elementor Free vs Elementor Pro).

The Bottom Line

Elementor already has some features to streamline your workflow in creating a website. With a template kit, your workflow gets even more streamlined. All you need is to import one that fits your site theme, then you can tailor the content according to your website. Starting version 3.3, you can import a template kit more effortlessly from Kit Library. If you can’t find a suitable template kit in Kit Library for your portfolio website, there are some websites you can refer to. Such as ThemeForest and TemplateMonster.

Templately, on the other hand, is a great plugin to get a template kit. It offers a bunch of Elementor template kits. You can also find some template kits designed specifically for portfolio websites on Templately.

How to Add Content Carousel in Divi

Today, everything is getting more visual in WordPress. With Gutenberg, you can add more visual content types than the classic editor. Still, Gutenberg is not enough if you truly put design on the emphasis when creating a page on your WordPress site. You need a dedicated page builder like Divi Builder and Elementor which have a more decent visual editor. They also allow you to add more design elements to your page, as well as more styling options. One of the design elements you can add is carousel.

In the context of web design, carousel refers to a behavior whereby the content is displayed slide-like style, but other parts of the content are still visible. Here is the example.

Some page builder plugins like Elementor (read: Elementor vs Divi) and Brizy come with a default design element to add a content carousel. Unfortunately, Divi doesn’t one. In Divi, you need to install an extra plugin to add content carousel. In this post, we will show you how to add content carousel in Divi using Divi Supreme.

Divi Supreme is one of the most popular Divi plugins. It comes with 40 modules to allow you to add more creative elements to your Divi page, including carousel. In addition, the plugin also allows you to create a popup in Divi. Here are the key features offered by Divi Supreme:

  • 40 Divi modules
  • Popup builder
  • Element scheduler

How to Add Content Carousel in Divi Using Divi Supreme

Divi Supreme is a freemium plugin. However, you need to use the pro version to add content carousel as the modules to add content carousel are available on the pro version. You can get the pro version of Divi Supreme on Divi Market place.

There are 4 modules offered by Divi Supreme to add content carousel:

  • Blog Carousel: To create carousel from blog posts.
  • Card Carousel: To create carousel whereby the content is added manually. Useful to create testimonial carousel.
  • Image Carousel: To create image carousel.
  • Post Carousel: To create carousel from pages and WooCommerce products.

In this post, we will show you how to create image carousel using the Image Carousel module. You can use this module to show off your clients, partners, or other elements of your business.

Before getting started, make sure you have installed the pro version of Divi Supreme on your Divi-powered WordPress site. Once you are ready, create a new page (Pages -> Add New) and edit it with Divi. You can also edit an existing page, of course. On the Divi Builder editor, add a new module by clicking the grey button and select Supreme Image Carousel.

On the appearing settings panel, click the plus button on the Image Carousel block under the Content tab to add your images. A little note. Make sure to use images with the same size (dimension) for your carousel to make it looks neat. You can use tools like Photoshop and GIMP to edit your images.

Once the images are added, you can open the Carousel Settings block to make the basic settings to your carousel. You can set things like carousel effect, carousel direction, number of slides to show, slider speed, auto play, and so on.

If you want to enable the lightbox, you can open the Lightbox Settings block. While to set the background of the carousel, you can open the Background block.

Styling Up the Carousel

Once you are done making the basic settings on the Content tab on the settings panel, you can switch to the Design tab to style up the carousel. There are 10 blocks you can open on this this tab.

  • Layout

You can open this block to set the horizontal alignment of the carousel content.

  • Element

You can open this block to set the position of the arrow, color of the arrow, size of the arrow, and color of the pagination (the dots).

  • Image

You can open this block to style up the image of the content. You can set things like the image border radius, image box shadow, and CSS filters.

  • Sizing

You can open this block to set the size of the Image Carousel module as well as the alignment.

  • Spacing

You can open this block to set the spacing of the Image Carousel module. There are two settings you set here: margin and padding.

  • Border

You can open this block to set the border of the Image Carousel module. You can set things like the border width, border radius, border color, and border style.

  • Box Shadow

You can open this block to add box shadow to the Image Carousel module.

  • Filters

You can open this block to add CSS filters to the Image Carousel module.

  • Transform

Divi Builder comes with a built-in feature to apply CSS transform to a module. You can open this block to apply CSS transform to the Image Carousel module. You can read this article to learn more.

  • Animation

From this block, you can set the entrance animation of the Image Carousel module. There are 7 entrance animation styles you can choose from.

Once you are done customizing the carousel, make sure to click the green checklist icon on the bottom-right corner of the settings panel to apply the changes. Then, click the Publish button on the bottom-right corner of the Divi Builder editor to publish the page.

The Bottom Line

When it comes to design elements, Divi Builder tends to be left behind other competitors like Elementor and Brizy. Fortunately, it supports extensions so that third-party developers can develop a plugin to enrich the module collections. If you need to add content carousel on your Divi page, Divi Supreme is one of the plugins you can install. It allows you to add content carousel from a wide range of content types. From blog posts, WooCommerce products, pages, to images.

How to Add Conditional Logic in a Divi Form

Divi Builder has two modules that you can use to create a form: the Email Optin module to create an email opt-in form and the Contact Form module to create a contact form. Although it is basically designed to create a contact form, you can also use the Contact Form module to create other form types. A survey form, for instance. Unlike Elementor (read: Elementor vs Divi) which supports up to 20 field types, the Divi Contact Form module supports only 6 field types, but it has a feature that Elementor doesn’t have one: conditional logic. With this feature, you can show/hide a certain field on your form based on a certain parameter or more.

The ability to show/hide a field allows you to create a more appealing, interactive form. Take a look at the following screencast.

As you can see on the form above. The Last Name field only shows up when the first field (the First Name field) is filled in. You can also implement the same rule to other fields if you want it. For instance, you can set the Phone Number field to show up only when the Email Address field is filled in.

Supported Rules

In addition to showing up a form field when the previous field is filled in (as shown on GIF above), you can also apply several other rules. For instance, you can display a field when the previous field (or any field to your liking) contains certain letters or numbers. There are 8 rules supported by Divi:

  • Equals: Displays a field when another field equals the defined text or letter.
  • Does not equal: Displays a field when another field does not equal the defined text or letter.
  • Greater than: Displays a field when another field is greater than the defined value.
  • Less than: Displays a field when another field is less than the defined value.
  • Contains: Displays a field when another field contains the defined word.
  • Does not contain: Displays a field when another field does contain the defined word.
  • Empty: Display a field when another field is empty
  • Is not empty: Display a field when another field is not empty

How to Add a Conditional Logic

You can add a conditional logic (or more) to a certain field on your form. If you don’t know how to create a form in Divi yet, you can read this article to learn how.

Assuming you already know how to create a form in Divi, click the gear icon of the Contact Form module to open the settings panel.

On the appearing settings panel, click the gear icon on the field you want to add the conditional logic to.

Under the Content tab, click the Conditional Logic block and toggle the switch.

On the Rules section, set rule you want to apply. First, select the field to trigger the rule on the first column then select the rule on the second column. Lastly, define the value on the third column.

If you want to add more than one rules, you can simply click the plus button to add a new rule.

If you use multiple rules, you can toggle the Relation switch.

  • ALL: The field will be displayed when all rules are fulfilled
  • ANY: The field will be displayed when one of the rules is fulfilled

The Bottom Line

The Contact Form module of Divi is designed to create a contact form. Even so, you can also use it create other form types. If you want to create a long form using this module, you can make use of its conditional logic feature to show the form fields only when the rules are fulfilled. Your creativity is the limit to use the feature.

How to Fix Contact Form Not Working in Divi

In the previous article, we have covered how to create a contact form in Divi. In the article, we also mentioned the potential of the error probably happens to your form. We will show you how to fix the error in this article. As we mentioned in the previous article, you can create a contact form using the Contact Form module. The way the Contact Form module works is same as other form builder plugins. It makes use of the WordPress’ default mail delivery function to send the form submission to your email address. If the function doesn’t work, then your form is failed to send.

The Error Cause

Again. The Contact Form module of Divi Builder uses the default mail delivery function of WordPress called wp_mail. On the other hand, the function depends on the send_mail function belongs to PHP to work. The problem is, not all hosting providers enable the send_mail function on their hosting configuration. Especially on the shared hosting plans which typically have lower resource than managed WordPress hosting or VPS. If your hosting provider doesn’t enable the send_mail function, then your WordPress site won’t be able to send any form that requires mail delivery, including contact form.

How to Fix the Issue

There are at least two ways to fix the issue.

Method 1: Ask Your Hosting Provider to Enable the send_mail Function

If it’s possible, you can ask your hosting provider to enable the PHP’s send_mail function on their server configuration. This is the simplest way to fix the issue.

Method 2: Use a Custom Mail Delivery on Your WordPress Site

Another option to fix the issue is by using a custom mail delivery service on your WordPress site. As mentioned, the Contact Form module of Divi uses the wp_mail function in which it has a dependency on PHP’s send_mail function. You can use a custom mail delivery function to replace wp_mail. Divi itself recommends Mandrill and SendGrid. If you seek for a free solution, you can configure your Gmail account as a mail delivery function on your WordPress site. You can use plugins like WP Mail SMTP and Post SMTP to help you configure Gmail as a mail delivery service on your WordPress. You can read this article to learn more.

Using a custom mail delivery is a more recommended option if you create an ecommerce website using Divi and WooCommerce. You need a more reliable mail delivery function to handle all transaction emails like order details, customer invoice, order notifications, and so on.

The Bottom Line

The form not sent error usually happens on WordPress site installed on a shared hosting as a hosting plan typically has lower resource, which forces provider to use a minimal configuration possible. You can use one of the methods above to fix the issue, but for a better site performance, we recommend you use a managed WordPress hosting which is optimized for WordPress. Elegant Themes — the developer of Divi — offers Divi Hosting in case you are interested. A Divi Hosting is a WordPress hosting service optimized for Divi.

How to Create a Contact Form in Divi

If you want to build a trusted website, you should offer a contact page on your website. In most cases, website owners provide a contact form on the contact page to make it easier for visitors to reach them out. In WordPress, you have a bunch of plugin options to create a contact form, but if you use Divi, you don’t need to install an extra plugin anymore. Instead, you can create a contact page using Divi Builder and use the Contact Form module to add the contact form. This article will show you how.

The Contact Form module of Divi Builder is more than enough to create a contact form. It supports basic field types like text, email, and text area. You can also add input styles like radio button, dropdown, and checkbox. Interestingly, you can also add a conditional logic to show/hide a field based on a certain parameter. For instance, you can show a field once a previous field is filled.

How to Create a Contact Form in Divi

Unlike Elementor (read: Elementor vs Divi), the Contact Form module of Divi Builder can only be used to create a contact form. You can use another module — the Email Optin module — to create an email opt-in form.

Creating a contact using Divi Builder, you have abundance styling options as Divi Builder comes with a visual editor just like other page builders. If you want it, you can use the contact form you created with Divi Builder on Gutenberg.

Creating the Contact Form

To get started, first, create a new page (Pages -> Add New) and edit it with Divi Builder. You have three options to create a page in Divi: from scratch, from a premade layout, and by creating a clone from an existing page. We choose the first option in this example.

Insert a row and then add the Contact Form module. You can read our previous article to learn more about how to work with a row in Divi Builder, as well as section.

As you can see, Divi Builder will automatically load the contact form — which consists of three fields — as you add the Contact Form module. To add a new field, you can simply click the plus button. While to remove an existing field, you can click the trash icon on the field you want to remove.

To edit an existing field, you can click the gear icon on the field you want to edit. Clicking this button will turn the contact form settings panel into fields setting panel whereby you can set things like field ID, field title, and field type.

You can set the field ID and field title on the Text block. While to set the field type, you can open the Field Options block.

Once done setting a field, you can click the undo icon on the top-left corner of the settings panel to switch back to the contact form settings panel.

To set the form title, success message, and submit button you can open the Text block.

Next, you can open the Email block to set the email address where the form submission to be sent to. From this block, you can also set the message pattern in case you want to create a custom message pattern. If you have no idea about the custom message pattern, you can leave the field blank to use the default message pattern.

If you want to add a redirect link, you can simply click the Redirect block to add one.

Adding reCaptcha to the Form

reCaptcha is a spam protection service widely used by WordPress users. The big name of Google is the main reason many people use it. Divi Builder offers a native integration with reCaptcha so that you don’t need to install an extra WordPress plugin to protect your contact form with reCaptcha. You can open the Spam Protection block on the settings panel and enable the Use A Spam Protection Service option to use reCaptcha.

For more detailed instructions on how to protect a Divi form with reCaptcha, you can read our previous article.

Adding Conditional Logic to a Field

As stated above, the Contact Form module of Divi Builder supports condition logic to allow you to show a field based on certain parameters. Here are the parameters you can use:

  • Show a field when other field(s) equal to certain value(s)
  • Show a field when other field(s) contain certain text
  • Show a field when other field(s) is empty
  • Show a field when other field(s) is not empty

You can add multiple parameters.

To add a conditional logic to a field, first, click the gear icon of the field you want to add the conditional logic to. Next, open the Conditional Logic block and enable the conditional logic by toggling the switch.

You can set the parameter on the Rules section. You can add multiple parameters. To add a new one, simply click the plus button.

Styling Up the Form

Once you are done making the necessary settings, it’s time to style up your form. In Divi Builder, you can style up a module from the Design tab on the settings panel. So, simply go to the Design tab to start styling up your form. First, you can open the Fields block to set the set the background of the fields, focus background of the fields, text color of the fields, text color of the fields focus, text colors, and so on.

To set the text alignment, you can open the Text block. To style up the submit button, you can open the Button block. You can enable the Use Custom Styles For Button option to use custom stylings for the submit button. You can read our previous article to learn how to customize a button in Divi Builder.

To customize the border of the fields, you can open the Border block. From this block, you can set the border radius, border type, border width, and border color.

You can play around with other blocks to explore other styling options you can add.

Styling Up Individual Fields

If you want it, you can also use a custom styling on an individual field on your form. For instance, you might want to use a different background color on a certain field.

To add a custom styling on an individual field, first, you can click the gear icon on the field you want to add the style to. Next, you can go to the Design tab and open the blocks to apply the stylings as we have just covered above.

Once you are done editing the form, you can add other modules on your Divi page to make your contact page more appealing. Once done, you can click the Publish button on bottom-right corner to publish your page. To exit Divi Builder editor, you can click the Exit Visual Editor text on the top bar.

How to Use a Divi Form on Gutenberg

Divi has a native integration support with Gutenberg to allow you to add a Divi layout to Gutenberg. This feature allows you to add a Divi form to a blog post or any page you created with Gutenberg.

To use a Divi form on Gutenberg, you need to create a contact layout using Divi first. To do so, go to Divi -> Divi Library and click the Add New button to add a new layout.

Give your layout a name on the Layout Name field. On the Layout Type, select Layout. Click the Submit button.

Create your contact form as we have covered above. Once done, click the Update button on the right sidebar. If you want to edit the form via Divi Editor, you can click the Build On The Front End button.

Once the layout is created, create or edit a new post using Gutenberg. Add a new block and select Divi Layout.

Click Load From Library to select the form layout you have just created above.

On the appearing dialog, click the Your Saved Layouts tab and select the form layout you created.

Potential Error

The Contact Form module of Divi uses wp_mail (the default mail delivery function of WordPress) to send the form submission to your email address. The function itself depends on the send_mail function belongs to PHP to work. So, if the form you created doesn’t work, you can check this area to fix the issue. Not all web hosting providers enable the send_mail function on their hosting plans, especially the shared hosting plans. We recommend you use a managed WordPress hosting or even a Divi hosting which is optimized for Divi.

Alternatively, you can use a third-party mail delivery service like SendGrid and Mandrill to replace the default mail delivery function of WordPress.

Elementor Form Builder: A Review

There are a wide range of form types found on websites existing on the internet. From a very simple contact form to a complex form like job application to a registration form. In WordPress, you can create a form using a plugin, whereby the options are massive. But if you have an emphasis on design, you can put Elementor on the top place of your consideration list. You can use it to create a stunning form using its drag-and-drop editor. With Elementor, you have limitless options to style up your form. Your form can then be added to Gutenberg, widget areas of WordPress, or Elementor-powered page itself.

Haven’t heard about Elementor?

Well, it’s quite weird as Elementor is the most-talking WordPress plugin since its initial release back in 2016. Elementor is basically a page builder plugin, but you can also use it as a marketing plugin and other needs. Elementor (the pro version) comes with a form builder feature that you can use to integrate your website with services like MailChimp, ActiveCampaign, and MailerLite. You can also use the form builder to create a file upload form, contact form, and other form types according to your need. Read on to learn more about Elementor form builder.

Elementor Form Builder: In a Nutshell

You have just read it above that Elementor is a versatile WordPress plugin rather than merely a page builder plugin. The pro version of Elementor (read: Elementor Free vs Elementor Pro) comes with a form builder that you can use to create a wide range of forms on your WordPress website. The form builder is available in a form of widget. If you have Elementor Pro installed on your website, you will be able to add the Form widget to the canvas area of the Elementor editor by simply dragging it.

That simple?

Yes! You can then go the settings panel on the left side to make the settings. and customizations. You can add or remove the form fields, set the form action, and so on.

The best part when creating a form using Elementor is that you have more styling options thanks Elementor’s visual editor. Also, you have several options to use the form on your website. Not only you can use the form on an Elementor-powered page, but you can also use the form you created on Gutenberg or widget areas of WordPress as we have mentioned above.

Elementor Form Builder: The Features

Visual Editor

Just for your information, at the time of writing (August 13, 2021), Elementor already has over 8 million users, making it the most popular page builder plugin for WordPress. We haven’t conducted a survey yet, but we are pretty sure that its intuitive editor is the main reason many WordPress users love using Elementor on their website. Unlike Divi Builder which tends to suitable for intermediate to advanced users, Elementor is a friendly page builder for everyone (read: Elementor vs Divi).

As we have demonstrated above. In Elementor, you can create a form by simply adding the Form widget to the canvas area. You can add the element whether when you are creating a regular page or a custom template. To style up the form, you can go to the Style tab on the settings panel. There are 5 blocks you can open here.

  • Form

You can open this block to set the gap between rows as well as columns of the form. You can also set the typography (font family, font size, font style) as well as the text color of the form labels.

  • Field

From this block, you can style up the form fields. You can set things like the text color, typography, background color, border width, border radius, and border color.

  • Buttons

This block is dedicated to style up the form button. You can set the typography of the button text, background color, border radius, and so on. You can style up the button on each state (normal and hover).

  • Messages

There are three messages associated with Elementor form: success message, error message, and inline message. You can open the Messages block on the Style tab to set the typography as well as the text color of these messages.

  • Steps

Elementor form builder allows you to create a multi-step form. You can open the Steps block to style up the elements on the multi-step form such as typography and divider.

20 Field Types

Field type is the crucial aspect you need to consider when choosing a form builder plugin. It determines the type of data that can be submitted. In Elementor, you can accept data types like text, number, media (image), date, and so on. There are 20 field types supported by Elementor form builder total as follows:

  • Text
  • Email
  • Text area
  • URL
  • Telephone
  • Radio
  • Select
  • Checkbox
  • Acceptance
  • Number
  • Date
  • Time
  • File upload
  • Password
  • HTML
  • Hidden
  • Step
  • reCaptcha
  • reCaptcha c3
  • Honeypot

With those fields, you can create form types like a survey, file upload form, you name it. It is also possible to create a user registration form using the Form widget of Elementor although it takes extra steps, including a new function addition.

There is one downside though. Elementor form builder doesn’t support conditional logic to allow you to hide/show a field based on certain parameters.

The Ability to Create a Multi-Step Form

One of the field types supported Elementor form builder is Step. Instead of used to accept a certain data type, this field type is intended to create a multi-step form. Yes, Elementor allows you to create a multi-step form, which is great if you want to create a long form, yet there no space available on your page. You can use this field type to split your form into two parts or more. Splitting your form into parts can also make it more interactive.

A Wide Range of Actions

On the opening section, we said that Elementor can also play a role as a marketing plugin. The reason is that you can use the form builder feature of Elementor to create an email opt-in form to collect email subscribers, regardless of the email marketing service you use. Elementor form builder supports popular email marketing services as follows:

  • MailChimp
  • ActiveCampaign
  • GetResponse
  • ConvertKit
  • MailerLite
  • MailPoet
  • AWeber

The Redirect action can be used for the following scenario:

Your users are required to enter their email address before being to download file or access a page.

If you plan to use your form to collect a massive amount of data, you can connect your form to a form backend service to cultivate the data to lighten up the load of your server.

You can also integrate Elementor form builder with Elementor popup builder via the Popup form action. Furthermore, Elementor popup builder also supports email in case you want to create a contact form and want the form data to be sent to your email address.

Built-in Form Data Manager

Another handy feature offered by Elementor is submission/data manager. This feature is worth mentioning as not all form builder plugins have one. With this feature, you can manage the form data submitted by your users right from the WordPress dashboard. You can access this feature by going to Elementor -> Submissons on your WordPress dashboard. From here, you can view the content of each form submission and delete it. You can filter the submissions by date and form. There is also a handy search field you can make use of.

If you want to cultivate the form submissions using a tool like Microsoft Excel or LibreOffice Calc, you can also export them form submissions into a CSV file.

Almost forget. To use the built-in form submission feature of Elementor, you need to set the form action to Collect Submissons.

Security

Spam is a scourge for all web forms. Well, you may can’t one hundred percent free from spammer, but you can at least add a security feature to your form to minimize spam on your form. In Elementor, you can protect your form with reCaptcha and Honeypot. No need to install an additional plugin to protect your form.

Flexibility of Use

Although the form is created using the Elementor editor, not only you can use the form on an Elementor-powered page. Instead, you can also use the form on Gutenberg (the default editor of WordPress) or site areas that are possible to add a widget (e.g., sidebar). To do so, you can create a section template in which you can add the Form widget to it. Elementor offers an official plugin to use an Elementor library — including section template — on Gutenberg or widget area. You can read our previous article to learn more.

The ability to use an Elementor form on Gutenberg is especially great if you want to add the form to a blog post or any content you create with Gutenberg.

Final Thought

Most WordPress users will use Contact Form 7 every time they need to create a contact form on their WordPress site because it is free to use. If you use Elementor on your WordPress site, you don’t need to install an additional plugin anymore as it (the pro version) already has the form builder feature. The form builder feature of Elementor is capable enough to create a complex form like a survey form, job application form, and so on. As you have read above, there are some field types you can use on your form, including data, number, text, and so on.

The input types like radio, select, checkbox, and acceptance also give you more options to design your form for the sake of user experience. When it comes to design, Elementor is second to none thanks to its intuitive visual editor. There are some areas that can be improved, though. For instance, it would be great if we could add conditional logic to show/hide a certain field. Also, it would be nice to see Elementor has a native integration with a cloud storage service like Dropbox or Google Drive.

Summary:

  • Ease of use: 5 out of 5 stars (5 / 5)
  • Features: 4.5 out of 5 stars (4.5 / 5)
  • Usability: 5 out of 5 stars (5 / 5)

Elementor Popup Builder: A Review

From the visitors’ perspective, popup might be an irritating thing. Especially if it consumes a large portion of the screen where the actual content is nearly invisible. But when implemented properly, a popup can be a great marketing tool to boost your sales or subscribers. Elementor comes with a popup builder to allow you to create a popup on your WordPress site in a visual way. You can use it to create a wide range of popup types. The best thing about Elementor popup builder is that you can set where the popup to appear using parameters like post tag, post category, and so on.

The easy-to-use Elementor visual editor makes it easy for you to create a popup. If you have no idea about the design concept of the popup you want to create, there are also readymade popup templates as the savior. Want to learn more? Read on!

Elementor Popup Builder: In a Nutshell

In case you are new to Elementor. It is a page builder plugin that allows you to create beautiful pages on your WordPress site, regardless of your skill level. Elementor comes with a visual editor to make your job a lot easier. Elementor is arguably a WordPress page builder plugin with the most comprehensive features. Popup builder is one of the features offered by Elementor. To use the feature, you need to use the pro version. In addition to popup builder, the pro version of Elementor also comes with features like theme builder, form builder, WooCommerce builder, third-party integrations, custom CSS, motion effects, and so on (read: Elementor Free vs Pro).

If you are interested to Elementor Pro, you can get a license on its official website. There are 5 plans you can choose from, depending on your needs.

Creating a popup using Elementor popup builder, you have limitless customization options. You can design your popup using the visual editor of Elementor just like when you are creating a regular page with Elementor. You can use all the Elementor widgets to add the content to your popup. If you haven’t used Elementor before, you can read our previous article to learn how to use it.

How the Elementor Popup Builder Works

The way Elementor popup builder works is pretty simple. First, you create a popup template using the Elementor visual editor. Once the template is ready, you can call it using the available trigger types. The trigger types supported by Elementor are:

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

The detailed explanations about trigger types will be covered later shortly on the next section.

To start creating a popup template, you can go to Templates -> Popups. We have a separate article that covers how to create a popup in Elementor which you can read.

Popup Settings

Before you start to create the popup content (template), you can make the settings first to make the popup show up according to what you prefer. Elementor itself offers plenty of setting options. From content layout (which includes content width, height, position, and so on), overlay, close button, entrance animation, popup background, and so on. You can access the settings panel by clicking the gear icon on the bottom-left corner within the Elementor editor.

Here are some setting options you can apply:

  • Content width
  • Content height
  • Content position
  • Enable/disable popup overlay
  • Enable/disable close button
  • Entrance animation
  • Exit animation
  • Animation duration
  • Show close button after certain seconds
  • Automatically close the popup after certain seconds
  • Prevent popup close on overlay
  • Prevent popup close on Esc key

Elementor Popup Builder: The Features

Visual Popup Builder

Again. If you haven’t used Elementor before, you will love the fact that Elementor comes with an intuitive visual editor to allow you to create a beautiful content on your WordPress site without dealing with code, including popups. Everything is drag and drop. To add a new element (called widget in Elementor), you can simply drag one from the left panel. There are over 90 widgets offered by Elementor in total. You can use all these widgets on your popup, without exception.

A Wide Range of Trigger Types

We have briefly mentioned the trigger types offered by Elementor popup builder on the previous section above. Now we will elaborate them in this section. In the context of popup builder, trigger type refers to a method to call the popup. Here are the trigger types supported by Elementor popup builder:

  • On click

On click is a trigger type to call the popup based on a click on an element. The element can be a button, text, image, icon, and so on. You can call the popup using any Elementor widget that has a setting option to add a link. You can make use of the on click trigger type to increase the visitor engagement on your website. For instance, you can ask your visitor to click a button to show the email opt-in form, and so on. You can also make use of this trigger type to create a creative menu like a full-screen menu.

  • On page load

You can use this trigger type to call the popup once a page is fully loaded. You can delay (in seconds) the popup emersion if you want it. One of the example uses of this trigger type is a cookie consent popup.

  • On page scroll

This trigger type will call the popup based on page scroll. The popup will appear once the page is scrolled down and reached certain scrolling level. For instance, you can set the popup to appear once the page is half scrolled. The scrolling level is set in percent. You can use this trigger type to create a notification bar or the similar popup types in Elementor or WordPress site at large.

  • On scroll to element

Same as the trigger type above, this trigger type also calls the popup based on page scroll. The difference is the parameter. Instead of scroll level, the on scroll to element trigger type will call the popup once the page is scrolled down and reached a certain element. The element can be section, column, or widget. You need to add a CSS class on the element you want to use to call the popup.

  • After inactivity

You can use this type of trigger to show a popup when the user is idle for a certain period of time (in second).

  • On exit intent

The name explains it all. This trigger type will call the popup when a user is intending to exit (close your page). You can make use of this trigger type to prevent your user from exiting your website. You can, for instance, offer something via your popup.

In addition to the 6 main trigger types above, Elementor also offers some advanced rules to display the popup. For instance, you can display the popup for visitors coming from search engines or specific URL. You can also display a popup based on the technology (device and browser) used by users. Here are the advanced rules offered by Elementor popup builder:

  • After X page views
  • After X sessions
  • When arriving from specific URL
  • When arriving from search engines
  • When arriving from external links
  • When arriving from internal links
  • User state (logged in/logged out)

Display Conditions

Display condition is one of the key features offered by Elementor Pro. This feature allows you to display a content — including a popup — on certain area(s) of your website. When it comes to popup, this feature is great as you can set where the popup to appear. You can make use of this feature for a marketing purpose or any purpose to grow your business. For instance, you can set a popup to appear only a certain landing page.

Here are some scenarios to display a popup in Elementor:

  • Display a popup on the entire website
  • Display a popup on post category page(s)
  • Display a popup on post tag page(s)
  • Display a popup on posts under certain category(ies)
  • Display a popup on posts with certain tag(s)
  • Display a popup on posts by certain author(s)
  • Display a popup on individual posts(s)
  • Display a popup on individual page(s)
  • Display a popup on WooCommerce products by certain parameters (category, tag, author)

Readymade Popup Templates

Elementor comes with an intuitive visual editor to allow you create a beautiful popup more effortlessly. The problem is that you might have no popup design idea. If this is the case, lucky you. Elementor comes with tens of readymade popup templates to allow you to create a beautiful popup in a matter of minutes. You can simply replace the default content (texts, images) and stylings (colors, typography, and so on) and voila, your popup is ready to use.

The readymade popup templates are very well-organized on the Elementor template library. You can filter the templates by category. There is also a search form to save you time in finding a popup template you need.

The Ability to Hide a Popup on Mobile Device

Smartphones have a smaller screen than a desktop. Because of it, forcing to display a popup on smartphones can ruin the user experience of your website on smartphone. To avoid it, you can disable your popup on smartphones (or tablets). The popup builder of Elementor comes with a built-in setting option to show/hide a popup by device type.

The Verdict

Regardless of what users think, popup is a great marketing tool you can make use of on your website. Apart of it, you can also use a popup for other needs. For instance, you can use a popup to display cookie consent or notification. There are a bunch of WordPress popup builder plugins out there, but if you put design on the emphasis, Elementor should be your main option. Its intuitive visual editor is something you will love about so much. The fact that you can also use Elementor to create custom templates (header template, footer template, and so on) of your WordPress site — as well as the core pages of your website like the home page, about page, so on — is another selling point.

The popup builder of Elementor is multipurpose. You can use it to create a wide range of popup types. From a notification bar, popup consent, email opt-in, promotional banner, and so on. With a bit of creativity, you can also use it to create floating social share buttons, floating button, off-canvas menu, full-screen menu, and so on. Your creativity is the limit.

Summary:

  • Ease of use: 5 out of 5 stars (5 / 5)
  • Features: 5 out of 5 stars (5 / 5)
  • Usability: 5 out of 5 stars (5 / 5)

Elementor Template Kit: How to Install and Where to Download

The first edition of template kit was introduced by Elementor back in August 2019. The aim was nothing but to shorten your workflow in creating a website with Elementor. As time goes, the collections of Elementor template library are getting more massive as Elementor releases a new template kit on a weekly basis. Recently, Elementor introduced a new feature to make your site creation process even faster. The feature is Kit Library.

Kit Library is a feature where you can discover, preview, and install a template kit. Think of it as an Elementor template library but specialized for template kits. On Kit Library, you can find a template kit that fits your website project and install it with only three clicks. You read it right. You can install a template kit with only three clicks and Elementor will do the rest. In a matter of minutes (or seconds), you will have a full-featured website.

How to Install a Template Kit in Elementor

Before the Kit Library feature was released, you could install a template kit by importing each template of the kit via Elementor template library. You need to import each template one by one. If the kit consists of 6 templates (e.g., homepage, about page, contact page, 404 page, header, footer), you need to import the templates six times. With Kit Library, you can import all of the templates on a kit with a few clicks.

The Kit Library feature itself started available on Elementor 3.3. So, make sure you have updated your Elementor to version 3.3 to use the feature. Once you are ready, go to Templates -> Kit Library on your WordPress dashboard to access the Kit Library feature.

Search for a template kit you like. You can use the left panel to filter the template kits by category and tag. On the upper-right side, you can also filter the template kits by popularity and release date. There is also a search bar you can use to find a template kit. You can click a template kit to preview it.

When previewing a template kit, you will see an Apply Kit button on the top-right corner. You can click the button to install the template kit. To see the templates lineup of the kit, you can click the Overview button.

On the next step, a dialog screen will appear asking you to select the components (templates, content, and site settings) you want to include. Select the components you want to include and click the Next button on the bottom-right corner.

On the next dialog screen, you will be asked which items (header, footer, and so on) you want to keep and apply. Select your choices and click the Next button on the bottom-right corner.

Wait a moment until Elementor is done importing the templates and set the things up.

Installing a Template Kit from a Third-Party Source

Template kits are not offered by Elementor alone. You can also get a template kit from sites like ThemeForest and TemplateMonster. When you download a template kit from these sites, you will get a ZIP file containing a set of templates. To install the template kit, you can go to the Kit Library page (Templates -> Kit Library). Click the arrow icon on the top bar.

Click the Select File button and select the ZIP file of the template you want to install. Elementor will automatically start the importing process once the file is selected. Wait a moment until the process is done.

Sites to Download Elementor Template Kits

As said above, Elementor is not the only party to provide template kits. You can get Elementor template kits on third-party sites as well. Some WordPress themes that use Elementor as its default page builder also offer template kits. Jupiter X is one of the examples.

Here are some websites you can refer to for downloading Elementor template kits.

1. ThemeForest

If you have been using WordPress for quite a while, then ThemeForest should not a strange name. It is the prominent website to get a paid WordPress theme. Popular paid themes like Newspaper and Avada are marketed via this website. If you use Elementor on your WordPress site, you can also get a template kit on ThemeForest. You can find a template kit in a wide range of categories. Before purchasing a template kit, you can preview it first.

To make it easier for you to install a template kit, ThemeForest offers a dedicated importer plugin. One thing. Some template kits might require an additional Elementor add-on. Read the requirements carefully before you buy one.

2. TemplateMonster

TemplateMonster is another popular website to get WordPress themes and page builder templates, including Elementor. In TemplateMonster, you can also find Elementor template kits by categories. You can use the left panel to filter the template kits. Preview is also available before you buy a certain template kit on TemplateMonster.

When exploring Elementor template kits on TemplateMonster, you might find a template kit that require JetElements or other Elementor add-ons. Just make sure to read the requirements before you buy a template kit from TemplateMonster.

3. Creative Market

Creative Market is a website that sells design products. From templates, mockups, illustrations, fonts, and so on. It is owned by Dribble, a social media platform for designers. Creative Market can also be a solution to get an Elementor template kit for your project. Creative Market has no specific category yet for Elementor templates. You can use its search feature to find an Elementor template kit. Here is one of the examples of Elementor template kit available on Creative Market. Unlike ThemeForest and TemplateMonster, Creative Market has no feature to preview the Elementor template kits.

The Bottom Line

Elementor has helped much in creating a website thanks to its intuitive visual editor. Still, it wants to offer more useful features. Kit Library is another Elementor attempt to help its users getting a website done more quickly. You can use Kit Library to install an Elementor template kit. An Elementor template kit itself is a set of Elementor templates designed with the same design concept, with or without a design language. A template kit is designed specifically for a website type. You can use a template kit to get your project done more quickly. If none of template kit on Kit Library suits your needs, you can also download a template kit from sites as we have mentioned above.

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.