Full-Site Editing Has Arrived in Divi. Here is How to Use It

Full-site editing has been a hot discussion in the WordPress community, especially when version 5.8 was released in July 2021. Before the full-site editing was included in version 5.8 WordPress release, the feature has been available in Elementor since version 2.9 which was released in 2020. What about Divi?

Recently, Elegant Themes has just released the full-site editing feature for Divi, only weeks after they released Display Conditions feature. Well, it’s a bit late as the same feature already exists in its competitor (Elementor in this case) for quite a while (read: Elementor vs Divi). At least Elegant Themes understands what users need to make site editing be more efficient.

How to Use the Full-Site Editing Feature of Divi

The idea of full-site editing is to makes it possible for you to edit the site parts in a single place, without needing to back and forth between back-end (WordPress dashboard) and front-end. For instance, you can edit the homepage — as well as the header and footer — from where you are right now (the homepage). Previously, you can only edit the header and footer by going to Divi Theme Builder. Starting now, you can edit the header and footer — as well as other custom templates like single post, category pages, and authors’ archive page — right from the front-end by simply enabling the visual builder. To be able to use the full-site editing feature, you need to update your Divi to version 4.12.

After updating your Divi to version 4.12, you will see an Enable Visual Editor button on every page of your website, including category pages and other archive pages. Previously, the button is only available on pages and posts. To see this button, make sure you are on the login state.

Clicking the Enable Visual Editor button will take you to the Divi Builder editor, regardless of where on your site you are right now. Be it on a page, post, or an archive page. Once the Divi Builder editor opens, you can hover your mouse over the header section and click the Edit Header Template button. This will turn the header section into the editing mode, and you can simply make the changes to your header.

Similarly, you can hover your mouse over the footer section and click the Edit Footer Template to edit the footer.

Once done making the changes to your header or footer, you can click the Save button on the bottom-right corner just like you usually do when editing a page or custom templates with Divi. To switch back to the front-end, you can simply click Exit Visual Editor on the top bar.

The Bottom Line

Site-editing editing is a useful feature to streamline workflow. You don’t need to back and forth between WordPress dashboard and the front-end of your website to edit the custom footer, custom header and other custom templates — as well pages — of your website. To use this feature in Divi, simply update your Divi to version 4.12 and you will see an Enable Visual Editor button on every area of your website. Be it a page, post, or archive pages.

8 Best Dentist Elementor Template Kits

Elementor has made it easier for you to create a website with WordPress thanks to its extremely intuitive editor (read our previous article to learn how to use Elementor if you are new to it). There are also a number of features you can maximize to streamline your workflow, one of which is template kit. If you are looking to create a dentist website, Elementor has a template kit designed specifically to do so. You can access it from the Kit Library by going to Templates -> Kit Library on your WordPress dashboard. The dentist template kit from Elementor comes with features like sticky header, appointment form, and opening hours. It has a clean, simple design. If you don’t find this template kit fits your project, ThemeForest is the best option to go to. But picking a template kit out of hundreds is not an easy job. To save you time, we have curated the best Elementor template kits for dentist website.

A few words about dentist. It is the type of profession that requires a physical meet. People usually make an appointment beforehand to meet a dentist. In Elementor, you can make use of the Form widget to create an appointment form. However, since Elementor is not designed to be an appointment plugin, you need to check the availability schedule — as well as arrange the booked schedules — yourself. If you need an automated solution for, you can use plugins like JetAppoinment which is designed to add appointment functionality to you WordPress site.

Best Dentist Elementor Template Kits

1. Dental

There are a bunch of Elementor add-ons out there to allow you to add elements that are not provided by Elementor. But if you want to use Elementor only instead, then Dental template kit is a great item for you. The template kit, which is designed specifically for dentist sites, is created using Elementor and Elementor Pro only, no need to install an add-on to make all elements work once you imported the template kit. The template kit is created using the Hello theme, but you can definitely use it on any WordPress of your choice since Elementor works on almost all WordPress themes. Dental features a call-to-action button on the header which will open an appointment form popup once clicked. The template kit offers two home page templates to choose from, two footer templates, two header templates, and other templates such as about page, contact page, services page, and so on.

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

2. DentaCare

DentaCare is another template kit that is created using Elementor only, which is perfect if you are an agency with the AGENCY plan of Elementor Pro. The designer of the template kit also used the Hello theme when creating the template, but again, you can import the DentaCare template kit regardless of the theme you use. DentaCare is especially a great fit if you are looking to create a website with a sticky header. There is also a call-to-action button on its header. DentaCare includes sections like opening hours, appointment form, and FAQ on the homepage. The templates included in the kit includes a custom header for header and footer.

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

3. Dentario

Dentario offers three homepage templates to choose from. Plus, it offers pre-made footer and header templates, as well as the necessary page templates to create your dentist website. The template kit allows you to get your project done more quickly.

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

4. Denton

The main templates included in the Denton template kit includes two homepage templates and the templates for the core pages of your website such as the contact page and about page. In addition, the template kit also offers a template dedicated to creating the dentists’ profiles. There is no appointment form section found on the templates offered by Denton, but it does a contact form section on the contact page template in case you need it. You can import the templates included on the Denton template without needing to install an extra Elementor add-on as the designers used the native Elementor widgets on all templates.

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

5. UrbanDental

Looking to create a dentist website that features an off-canvas menu? You can create an off-canvas menu in Elementor without installing an add-on thanks to its feature-rich popup builder feature. The designer of the UrbanDental template made use of the Elementor popup builder to offer an off-canvas menu (popup template included). You can simply edit the popup template to edit the content of the off-canvas menu. The UrbanDental template kit offers templates for header and footer, other than core page templates. The header template offered by UrbanDental consists of two sections: the top section hosts opening hours, phone number, and a call-to-action button. While the lower section hosts the navigation menu, search icon and the hamburger icon for the off-canvas menu.

One of the page templates offered by UrbanDental is the Appoinment page. There is an appointment form section on this page. The UrbanDental template kit itself offers 17 templates in total. Some elements added to the templates are provided by the DethemeKit add-on, so you need to have it installed before importing the templates.

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

6. Meduvid

If you are looking for a dentist Elementor template kit that features an appointment form on its homepage, Meduvid is another option to take look at. Other handy sections available on the homepage are a before-after image and opening hours. The before-after image is created using a widget from the ElementsKit add-on. You can replace the ElementsKit with JetElements or Happy Addons to add a before-after section as the two Elementor add-ons have a widget for the same functionality. The appointment form is created using Caldera Forms. You can replace it with the native Form widget of Elementor if you use the pro version.

  • Price: $20
  • Dependencies: ElementsKit, Caldera Forms
  • Rating: 4.4 out of 5 stars (4.4 / 5)

7. Dentino

Dentino is another template kit that is created using Elementor and Elementor Pro. There are 13 page templates included in the template kit, including a page template dedicated to creating an appointment page which contains an appointment form created using the native Form widget of Elementor.

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

8. Dentica

If you want to create a website that has a sticky header, Dentica is another template kit you can use. The header template included in the kit consists of two sections like UrbanDental above. The top section to place social media accounts, phone number, address, and email address. While the lower section is used to place the main navigation menu. Dentica offers three homepage templates to choose from. Each of them contains an appointment form created with the native Elementor Form widget. The page templates included in the kit include homepages (three homepage templates), about page, contact page, service page, and team page.

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

The Bottom Line

Creating a dentist website from an Elementor template kit can save you a lot of time as creating the design concept is one of the most time-consuming parts in the web development process. While the template kits available the Elementor Kit Library are limited (there is only one template kit designed to create a dentist website at the time of writing), you can visit sites like ThemeForest if you need more template kit options. We have curated the best template kits from ThemeForest which are designed specifically to create dentist website.

Elementor itself already have the necessary elements/widgets to create a dentist website, including the Form widget to create the appointment form although it requires manual process to manage the appointment schedules. If you are looking for a complete appointment functionality, you can use JetAppointment which is designed specifically for Elementor-powered WordPress sites.

How to Add Text Over Image in Gutenberg

Text and image are two of the most used elements in web design. Oftentimes, web designers incorporate the two elements in a certain section of a web page with a certain layout. One of the common layouts is by placing the text over the image. In WordPress page builder plugins like Elementor and Divi Builder, you can easily achieve such a layout by simply setting an image background to the column where the text belongs to. What about Gutenberg?

Gutenberg also allows you to add columns to help you manage the layout and content of your page. However, the setting options are limited. There is no option to add an image background. Instead, you can only set a solid color background. If you want to have a text over an image, you can use the Cover block. The Cover block can be added into a column or in an independent block.

The Example Use of the Gutenberg Cover Block

The Cover block is one the native Gutenberg blocks. You can use it for a wide range or purpose, but the most ideal use of the Cover block is to create the hero section of a page whereby you can add a heading with an image background. The Cover block supports settings like fixed background and the ability to add overlay color (you can make use of this setting — overlay color — to make your text more visible). If you want it, you can also set the alignment of the Cover block to full-width. Here is the example of the implementation of the Cover block.

How to Add Text Over Image in Gutenberg Using the Cover Block

First, create a new page (Pages -> Add New) or post (Posts -> Add New) using Gutenberg (or edit an existing one). Once the Gutenberg editor opens, add a new block and select Cover. Click the Upload button to upload a new image or click the Media Library if you want to use an existing image on your website library.

Next, you can click on Write title to add your text.

You can set the alignment of the text, set the text to bold or italic, and add a link from the settings bar. While to set the custom size and color, you can go to the settings panel.

Can you add more texts (or other content type) inside the Cover block? Yes, you can. Simply press the Enter key on your keyboard once you are done adding the text. This will add a new block (which you can fill with any block type) inside the Cover block.

Customizing the Cover Block

As mentioned earlier, the Cover block supports full-width alignment, fixed background, and the ability to add overlay color. You can even set the minimum height as well. To make these settings, first, select the Cover block (make sure to select the Cover block, not other blocks inside it). You can go to the settings panel to set the fixed background, overlay color, and minimum height. While the set the alignment, you can do so on the settings bar.

The Bottom Line

When creating a page using Gutenberg, you can use the Cover block every time you want to add a text with an image as the background. In addition to text, you can also add other block types inside the Cover block. Such button, column, list, and so on. You can customize the content inside the Cover block according to the customization settings offered by each content/block. While Gutenberg offers no setting options to set the typography (font family, font style, and so on) of the text, you can use plugins like Kadence Blocks which offers more setting options of the text element. In addition, Kadence Blocks also offers setting options to set the margin as well as the padding of text just like page builders do.

8 Best Wedding Elementor Template Kits

Do you have a new project to create a wedding invitation site for your client? Elementor has all the elements you need to be added to your site’s pages. From a form to create the RSVP form, image gallery, countdown counter, to map. Elementor even offers a pre-made wedding template which you can find on Kit Library (you can go to Templates -> Kit Library to access it). Looking for more options of wedding templates? We have curated the best ones for you.

When creating a website using Elementor, you can install an add-on to add a certain element which is not available in Elementor by default. JetElements and Happy Addons are two of the best Elementor add-ons we recommend. The two allow you to add elements like Instagram feed and timeline, which are great when it comes to wedding site. If you don’t need these elements, then Elementor alone is enough to create a wedding website. By the way, if you need image samples for your projects, you can go to sites like Unsplash, Pexels, and Pixabay.

Best Wedding Elementor Template Kits

1. Robbie & Magie

Robbie & Magie is an Elementor template that has a light nuance. It uses white as the main color, combined with a soft brown. The zoom-in animation effect on the hero section of the homepage makes the template kit looks appealing and alive. Speaking of homepage, Robbie & Magie offers two homepage templates you can choose from. In total, there are 14 templates included on the template kit. In addition to pages, you will also get custom templates for header, footer, and single post. Robbie & Magie comes with features like countdown counter, image gallery, Google Maps, and RSVP form. It requires the ElementsKit Lite to work. You can get it (ElementsKit Lite) on the WordPress plugin directory.

  • Price: $24
  • Dependencies: Elementor Pro, ElementsKit Lite
  • Rating: 4.6 out of 5 stars (4.6 / 5)

2. Kirana

Same as Robbie & Magie above, Kirana also offers a clean design in which it uses white as the base color, combined with soft brown and blue. The features added to the template kit are pretty similar to Robbie & Magie. It comes with a RSVP form, image gallery, and countdown counter. Another worth-mentioning feature is timeline story to tell the journey of the couples before they get married. A notable element of template kit are the images, which have a cute frame. The Kirana template kit include 10 pre-made templates, including two homepage templates you can choose from.

  • Price: $25
  • Dependencies: Elementor Pro
  • Rating: 4.6 out of 5 stars (4.6 / 5)

3. Weddon

Creating a one-page website might is an interesting idea for your wedding site project. If you agree, then Weddon is a great Elementor template kit to help your project get done more quickly. To make it easier for the visitors to jump between sections on the site, Weddon also offers a one-page navigation menu. Not just one, the template kit offers four homepage layouts you can choose from. Two of the homepage templates offered by Weddon have a video background on the hero section. Weddon includes five invitation card templates to choose from. Furthermore, the template kit also offers a form to make sure your visitors get a seat on the wedding event.

  • Price: $25
  • Dependencies: Elementor Pro, Events Addon for Elementor
  • Rating: 4.5 out of 5 stars (4.5 / 5)

4. Lovedy

Lovedy is another Elementor template kit designed specifically for wedding site. The template kit has a very clean nuance. It comes with elements like reservation form, Google Maps, countdown timer, masonry gallery page, and so on. There are 10 templates included in the bundle, including custom templates for theme parts (single post and 404 page). The bundle doesn’t include custom templates for header and footer.

  • Price: $19
  • Dependencies: Elementor Pro
  • Rating: 4.3 out of 5 stars (4.3 / 5)

5. Kunikaa

If you are an AGENCY plan owner of Elementor Pro and in the process of creating a wedding website for your client, Kunikaa might is the template kit you are looking for. The template kit is created using Elementor (Free and Pro) only so that you don’t need to install and extra add-on to import it. The template kit itself offers three homepage templates you can choose from, as well as two story page templates. The story page is dedicated to creating a page about the story of the couples prior to marriage. Kunikaa offers no custom templates for header and footer. It offers page templates only.

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

6. Brandon & Clara

Brandon & Clara is another great template kit if you want to use Elementor only to create a wedding website. The template kit uses no third-party Elementor add-on so that you can import it without needing to install an add-on to make all elements work. The template kit itself includes only page templates. It offers no custom templates for theme parts like header and footer. You have two homepage templates to choose from. One homepage template has a transparent header while the other one has a white header. The RSVP button on the header makes it easier for aspiring wedding guests to jump to the RSVP form. In addition to RSVP form, the template kit also offers necessary elements for the wedding party such as Google Maps, countdown counter, image gallery, and story page (you have two story page templates to choose from). All these elements are created using the native Elementor widgets.

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

7. Karin

Karin offers 10 pre-made templates you can import to your Elementor-powered WordPress site. The template kit has a clean, elegant design to create a wedding website. The 10 page templates included in the template kit are two homepage templates, a story page, a gallery page, a blog page, a contact page, a bridesmaids & groomsmen page, an RSVP page, and an event page. In addition to these page templates, Karin also offers custom templates for the header, footer, single post, archive pages, and 404 page. All elements on the templates are created using the native Elementor widget so that you don’t need to install an extra add-on.

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

The Bottom Line

Elementor is a multipurpose page builder plugin whereby you can use it create any website type. Creating a wedding website is not a big deal in Elementor. It has widgets to add the necessary elements to the wedding site you are working on. Such as the Form widget to create the RSVP form, the Gallery widget to create an image gallery, the Google Maps widget to add the map to the wedding venue, and so on. The Theme Builder feature (if you use Elementor Pro) makes it possible for you to create a custom header and custom footer of your website as well. The best part is that you can start your project from an Elementor template kit. There are a bunch of template kits designed specifically for wedding site, including the ones offered by Elementor which you can access on the Kit Library. The curated template kits above are great to get your project done quickly, without scarifying the design quality.

How to Add a Lottie Animation in Gutenberg (2 Ways)

Despite the ability to create stunning pages just like page builders do, Gutenberg is far behind when it comes to animation. So far, it has no native feature to add animation. There is no setting option to add either entrance or exit animation effects. Also, Gutenberg has no native block to add Lottie animation. But it doesn’t mean you can’t add a Lottie animation to your Gutenberg-powered page. There are at least two ways to add a Lottie animation in Gutenberg.

Lottie itself is getting more popular these days due to its lightness compared to other animation formats. Adding a Lottie animation can help your page more alive and appealing to visitors.

Two Ways to Add a Lottie Animation in Gutenberg

Before adding a Lottie animation, you definitely need to have the file of the Lottie animation you want to add first. While you can create one using Figma, Adobe After Effects or Adobe XD via a plugin, LottieFiles offers over 1.500 ready-to-use Lottie animations you can use. From free to paid. In this article, we use LottieFiles for the Lottie animation source.

Method One: Adding a Lottie Animation to Gutenberg Using Native Block

We said that Gutenberg has no native block to add a Lottie animation. Well, it actually has one. You can use the HTML block to add a Lottie animation. However, it offers no setting option to control the animation behavior so that your Lottie animation will behave according to the settings you made on LottieFiles. You can’t even set the animation size.

To start adding a Lottie animation, first, visit the LottieFiles website and pick a Lottie animation you like. On the appearing window, click the HTML icon on the Use this animation in section.

You will be directed to the page of the associated Lottie file after clicking the HTML icon above. From this page, you can set the animation size, speed, direction, and play mode. You can also set things like the background color, enable/disable animation controls, enable/disable autoplay, and enable/disable loop.

Once done making the settings, scroll down to the GENERATED CODE section and copy the generated code.

Once the code is copied, open Gutenberg and add the HTML block. Simply paste the code you have just copied.

Method Two: Adding a Lottie Animation in Gutenberg Using a Third-Party Block

If you want to have more controls over the animation behavior, you can use a third-party Gutenberg block. Otter is one the plugins you can install. It offers a set of Gutenberg blocks, including the Lottie Animation block, which is dedicated to adding Lottie animation. The block allows you to add a Lottie animation from a direct link or by uploading the JSON file of the animation. You can control the trigger type (scroll, hover, click), enable/disable loop, set the animation speed, set the animation size and so on via the Gutenberg settings panel.

First and foremost, install the Otter plugin. You can get the plugin on the WordPress plugin directory. Once the plugin is installed and activated, go to the LottieFiles website and pick the animation you like. On the appearing window, copy the animation URL on the Lottie Animation URL section. Before copying the URL, you can set the animation background in case you want to change it.

Next, open Gutenberg and add the Lottie Animation block and paste the URL you have just copied. Or, if you want to add the animation from a JSON file, you can click the UPLOAD button to select the JSON file from your computer.

Once the animation is added, you can go to the Gutenberg settings panel to make the settings. To set the basic settings such as trigger type, animation speed, and animation width, you can open the Settings settings block.

While to set the entrance animation, you can open the Animations settings block.

The Bottom Line

Web creators used to use Flash to add animations to their websites. The problem with Flash is that it tends to heavy and have a massive contribution to make a web page takes longer to load. Then Lottie emerged in 2017, offered way lighter solution. Today, most web creators use Lottie when they need to add animations to their pages. Gutenberg has no native block dedicated to adding a Lottie animation, although you can use the HTML block. But it offers no setting option to control the animation behavior. You can’t even set the animation size. You can use a third-party block if you want to control the animation behavior.

How to Create Dynamic Progress Bar in Elementor

Elementor has a native widget called Progress Bar. The widget is commonly used to create a bar that indicates the expertise level in a certain area (in percent). For instance, if you are a designer and want to create a portfolio website using Elementor, you can add bars to allow your aspiring clients know in which areas you can serve better. However, there is no specific rule on how you can use an Elementor widget. You can use the Progress Bar widget according to what you need or what you want. In Progress Bar widget itself there are three elements you can set the content of: title, percentage, and inner text. If you use Elementor Pro, you can create custom fields to fill the content of these elements dynamically.

Example Use of Dynamic Progress Bar

Say you have a website whereby its articles are divided into three main categories:

  • News
  • Reviews
  • Tutorials

You want all review articles have a different layout than the news articles and tutorial articles. Also, you want to add the following elements on the end section of each review.

Elementor Pro, as you might have known, comes with a theme builder feature in which it allows you to create custom templates for blog posts, page, custom post types, and other content types of WordPress. Combined with the ability to display the data of custom fields, you can add custom element to your content dynamically, including progress bar.

How to Create Dynamic Progress Bar in Elementor

Step 1: Create the Custom Fields

First, you need to create the custom fields and set the field type to number. You can use any custom fields plugin that support number field type such as ACF, JetEngine, and Pods. In this post, we use ACF. If you use ACF too, you can go to Custom Fields -> Add New to create a new custom fields group. Give your custom fields group a name and click the Add Field button to add a new field.

You can set the field label and field name on the Field Label and Field Name fields. On the Field Type field, set to Number and set the minimum value and maximum value on the Minimum Value and Maximum Value fields.

Repeat the steps above to add more fields.

Once done adding the custom fields, go to the Location section to set where the custom fields group to be assigned to. If you want the custom fields group to be assigned to blog posts, you can use default rule. Click the Publish button to publish the custom fields group.

Step 2: Create the Custom Template

Once your custom fields are ready, you can start to create the custom templates for the article types you want to add the dynamic progress to. In Elementor, you can create a custom template for articles based on the following attributes:

  • Post categories
  • Post tags
  • Post authors

To create a custom template for review articles, you can simply assign the custom template to articles under the review category or tag, depending on the attribute you want to use.

First, go to Templates -> Theme Builder. Go to the Single Post tab and click the Add New button to add a new template.

On the appearing dialog, give your custom template a name and click the CREATE TEMPLATE button.

You can select a pre-made template on the template library. If you want to create the template from scratch instead, you can simply close the template library window. Drag the necessary widgets you want to add to the canvas area and make the settings accordingly. You can read our previous article for more detailed instructions on how to create a custom single post template in Elementor.

Once done with the required widgets (Post Title, Post Content, Featured Image, and so on), add the Progress Bar widget to the canvas area. Under the Progress Bar settings block under the Content tab on the settings panel, set the title you want (e.g., Design).

Next, click the dynamic icon on the Percentage option and select ACF Number Field.

Click the wrench icon on the ACF Number Field and select the key (custom field) you want to use.

If you want to display the given value of the custom field, you can click the dynamic icon on the Inner Text option and select ACF Field.

Click the wrench icon on the ACF Field field and select the key (custom field) you want to display.

If you want to hide the percentage, you can select Hide on the Display Percentage dropdown.

Once done with the basic settings on the Content tab of the settings panel, you can switch to the Style tab to style up the bar.

You can repeat the steps above to add more bars. To save you time, you can simply duplicate the bar (which you have customized) and replace the content.

Once you are done customizing the entire elements on the custom template, click the PUBLISH button on the bottom side of the settings panel. Add a display condition by clicking the ADD CONDITION on the appearing dialog. Set where you want the custom template to be assigned to. For instance, you can assign the custom templates to posts under the review category according to our instance. End by clicking the SAVE & CLOSE.

Step 3: Create a New Blog Post

Once everything is ready, you can now create a new blog post. Make sure to add the values on the custom fields you have created on step one above. The given values will be used to set the fills of the bars.

Lastly, make sure to set the category according to the category of the custom template it is assigned to (step 2).

The Bottom Line

The theme builder feature of Elementor Pro makes it possible for you to create custom templates for your site content according to their attributes. Thanks to the integration supports with custom fields plugin like ACF, JetEngine, and Pods, you can also add dynamic element to your custom templates. One of which is dynamic progress bar which we have just covered above. Basically, you can add dynamic element from any Elementor widget that offers an option to set the value dynamically. Another example is the Star Rating widget whereby you can also use it to create dynamic star rating. With these two features (theme builder and custom fields support), you can achieve more things on your WordPress site without installing too many plugins.

11 Best Online Store Elementor Template Kits

Do you want to create an online store with WordPress? WooCommerce is the plugin to go if you want to create an online store with WordPress. While the plugin adds the e-commerce functionality to your WordPress site, you can use Elementor to customize the visible parts of your e-commerce sites (shop page, single product page, product archive pages, and so on). The pro version of Elementor comes with a WooCommerce builder feature to allow you to customize the WooCommerce pages. Run out of idea of the pages design? You can use an Elementor template kit then.

In Elementor, you always have two choices to create a website. If you have your own design idea, you can certainly create your website from scratch. If you don’t have one (or if you want to get your website done more quickly) you can use an Elementor template kit. There are a bunch of Elementor template kits designed for WooCommerce-powered online store out there, including the ones offered by Elementor itself which you can access from Kit Library (Templates -> Kit Library). If you can’t find a suited template kit on Kit Library, you can take a look at the following template kits.

Best Online Store Elementor Template Kits

1. Warehouser

Warehouser is an Elementor template kit from Crocoblock. You can use it to create an online store regardless of the products you sell as Warehouser is not designed specifically for a certain store type. To be able to use the template kit, you need to be a Crocoblock member. The template kit includes the necessary page templates for WooCommerce such as the shop page, product archive pages, single product page, and so on. The Warehouser template kit doesn’t require Elementor Pro, but you need to have JetWooBuilder installed and activated to use it. JetWooBuilder is an Elementor add-on from Crocoblock to replace the WooCommerce builder feature of Elementor Pro.

  • Price: Free (Crocoblock plan required)
  • Dependencies: JetThemeCore, JetBlocks, JetTricks, JetWooBuilder, JetPopup, JetElements
  • Rating: 4.6 out of 5 stars (4.6 / 5)

2. Undertone

Undertone is another Elementor template from Crocoblock. It is designed specifically for women’s apparel store. The template kit comes in a feminine nuance with its soft base colors. Same as the template kit above, Undertone is also created using JetPlugins, a set of Elementor add-ons developed by Crocoblock. If you want to create a women’s apparel store using Elementor, then Undertone is the template kit for you.

  • Price: Free (Crocoblock plan required)
  • Dependencies: JetThemeCore, JetBlocks, JetWooBuilder, JetPopup, JetElements
  • Rating: 4.6 out of 5 stars (4.6 / 5)

3. Brandson

Same as the two Elementor template kits abobe, Brandson is also a template kit from Crocoblock. Brandson is designed specifically to create an online store that sells apparel products, be it for men or women. Since it is created by Crocoblock, the elements on the template kit are created using JetPlugins such as JetWooBuilder and JetElements. Brandson comes in a bright nuance with white as its main background.

  • Price: Free (Crocoblock plan required)
  • Dependencies: JetPlugins
  • Rating: 4.6 out of 5 stars (4.6 / 5)

4. RoadPedal

Do you have a bike store and want to reach more buyers by creating an online store? If yes, then the RoadPedal is the perfect Elementor template kit for you. The template kit combines three colors as the main colors: black, yellow, and white. The template kit comes with features like full-screen search and cart icon on the header, email opt-in form on the footer, an order tracker page, a popup banner, and so on. RoadPedal itself offers 21 pre-made templates in total. In addition to the core pages like the homepage, shop page, and contact page, the template kit also comes with a header template, footer template, pricing page template, single post template, single product page template, product archive pages, and so on. The template kit itself is optimized for Hello theme, one of the most popular WordPress themes for Elementor, but you can also use it on other themes.

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

5. Noiz

If you want to create an e-commerce website that sells electronic products, Noiz is the template kit to go. It has a modern design, using blue as the base color combined with white. Noiz comes with features like off-canvas menu, full-screen search, cart icon on the header, email opt-in on the footer, and so on. The template kit itself is created using Elementor Pro and ElementsKit Lite (which you can get on the WordPress plugin directory). There are 15 pre-made templates offered by Noiz in total, including templates for the shop page, single product page, product archive pages, promotional banner popup template, header template, footer template, and so on.

  • Price: $24
  • Dependencies: Elementor Pro, ElementsKit Lite
  • Rating: 4.6 out of 5 stars (4.6 / 5)

6. Alkahraba

Looking for an online store template kit that is created with Elementor (Free and Pro) only? If yes, then Alkahraba might is the item you are looking for. You don’t need to install an extra add-on when using Alkahraba template kit as it is created using Elementor and Elementor Pro only (read: Elementor Free vs Elementor Pro). Alkahraba itself is designed specifically for electrical products although you can tailor it to fit your store. There are 11 pre-made templates available on the kit, including the essential templates for WooCommerce parts such as the shop page, single product page, and product archive pages.

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

7. BookChimp

If you are a writer with lots of books and plan to create an online store to sell your books, then BookChimp is the template kit for you. The template kit, which includes 23 pre-made templates, is designed specifically for online bookstore. You can use it whether to sell e-books or printed books. The BookChimp itself is created with Elementor Free and Elementor Pro only. No need to install an extra add-on. It is optimized for Hello, but you can also use it on any WordPress theme of your choice.

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

8. Safir

Safir is an Elementor template kit designed specifically for jewelry online store. So, if you have a jewelry store and want to go online, the template kit is a great fit. Safir is created by the same author as Noiz. You need to install the Jeg Elementor Kit add-on to use it. Safir has a little dark nuance. It comes with an off-canvas menu by utilizing the Elementor popup builder. There are 16 templates included in the kit. In addition to essential templates for the shop page, single product page, and product archive pages, Safir also includes templates for header, footer, popup, homepage, about page, 404 page, and so on.

  • Price: $24
  • Dependencies: Elementor Pro, ElementsKit Lite
  • Rating: 4.7 out of 5 stars (4.7 / 5)

9. ETI

Want to create an online store for your clothing business? ETI is the Elementor template kit you want to take a look then. The template kit has a modern design. You have three homepage options to choose from. Also, the template kit offers two different custom templates for the single product page. In total, there are 12 pre-made templates included in the kit. You can use the template kit without installing an Elementor add-on, which is perfect if you are agency with an Elementor Agency plan.

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

10. Zahrah

Do you have a flower store? Zahrah is the perfect option if you want to go online and plan to create your online store with Elementor. The template kit is designed specifically for a flower store like yours. A good thing about this template kit is that it’s created using Elementor only so that you don’t need to install an extra add-on. Zahrah comes with 11 pre-made templates, including templates for WooCommerce pages like the shop page, single product page, and product archive pages.

  • Price: $22
  • Dependencies: Elementor Pro
  • Rating: 4.3 out of 5 stars (4.3 / 5)

11. Pearl

If you are an Apple fan, Pearl is a great template kit if you want to create an online store with Elementor. The template kit adopts a clean design with white and soft grey as the base color, just like Apple’s website. Pearl is a perfect template kit to create online store for electronic products and furniture. It requires the DethemeKit add-on to work.

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

The Bottom Line

The WooCommerce builder feature of Elementor Pro allows you to create a fully customized e-commerce site without coding. Until version 3.4.2, the WooCommerce builder feature of Elementor Pro allows you to create custom templates for shop page, single product page, and product archive pages. If you would like to create custom templates for other pages (cart page, checkout page, and customers’ account page), JetWooBuilder is a great alternative (read: JetWooBuilder vs Elementor WooCommerce Builder). Whether you want to create an online store with Elementor Pro’s WooCommerce Builder or JetWooBuilder, you can start from a template kit to streamline workflow. Elementor itself offers some template kits dedicated to creating an online store. You can find them on the Kit Library (Templates -> Kit Library). If you can’t find a suited one, you have ThemeForest to go to. The curated template kits above are great to create an online store for your business.

How to Disable the Unneeded Gutenberg Blocks in WordPress

Gutenberg comes with over 70 default widgets. While some blocks like Heading, Paragraph, and Image are essentials, you might never use blocks like Verse, Audio, and social media blocks on the Embed category. Since version 5.2, WordPress has allowed you to disable the unneeded Gutenberg blocks via Block Manager. Before version 5.2 was released, you could only disable Gutenberg blocks via custom function by editing the functions.php file of your theme. Disabling the default Gutenberg blocks is especially crucial if you use plugins like Kadence Blocks and Stackable to keep your work environment uncluttered.

To access Block Manager, you can click the three-dot icon on the upper-right corner on the Gutenberg screen and select Preferences. If you can’t see it, you can zoom-out the page (by pressing the Ctrl key and the key if you are a Windows and Linux user).

On the appearing window, click the Blocks tab on the left side and uncheck the blocks you don’t need. Close the window once you are done disabling the unneeded blocks.

That’s it. You can now work with Gutenberg more comfortably with the simplified blocks. Again, Block Manager is only available on WordPress 5.2 and the newer versions. You can check the WordPress version on your site by clicking the WordPress icon on the top-left corner and select About WordPress.

Another Option to Disable the Default Gutenberg Blocks

As we mentioned above, on WordPress version 5.0 and 5.1, you could only disable the default Gutenberg blocks via custom function by editing the functions.php of the theme you use. This method still works on WordPress 5.2 and the newer versions. Here is the example of the code you can add to the functions.php file of your theme. You can simply place the following code right after the last line of the fucntions.php content.

add_filter( 'allowed_block_types', 'misha_allowed_block_types' );
 
function misha_allowed_block_types( $allowed_blocks ) {
 
	return array(
		'core/image',
		'core/paragraph',
		'core/heading',
		'core/list'
	);
 
}

The code above allows only four blocks on the Gutenberg editor (Image, Paragraph, Heading, and List). To allow more blocks, you can add ones inside the return array parentheses. Here is the result after you add the code above.

Here is the list of the default Gutenberg blocks you can add:

  • core/paragraph
  • core/image
  • core/heading
  • core/gallery
  • core/list
  • core/quote
  • core/audio
  • core/cover
  • core/file
  • core/video
  • core/table
  • core/verse
  • core/code
  • core/freeform (Classic Editor)
  • core/html
  • core/preformatted
  • core/pullquote
  • core/buttons
  • core/text-columns
  • core/media-text
  • core/more
  • core/nextpage
  • core/separator
  • core/spacer
  • core/shortcode
  • core/archives
  • core/categories
  • core/latest-comments
  • core/latest-posts
  • core/calendar
  • core/rss
  • core/search
  • core/tag-cloud
  • core/embed
  • core-embed/twitter
  • core-embed/youtube
  • core-embed/facebook
  • core-embed/instagram
  • core-embed/wordpress
  • core-embed/soundcloud
  • core-embed/spotify
  • core-embed/flickr
  • core-embed/vimeo
  • core-embed/animoto
  • core-embed/cloudup
  • core-embed/collegehumor
  • core-embed/dailymotion
  • core-embed/funnyordie
  • core-embed/hulu
  • core-embed/imgur
  • core-embed/issuu
  • core-embed/kickstarter
  • core-embed/meetup-com
  • core-embed/mixcloud
  • core-embed/photobucket
  • core-embed/polldaddy
  • core-embed/reddit
  • core-embed/reverbnation
  • core-embed/screencast
  • core-embed/scribd
  • core-embed/slideshare
  • core-embed/smugmug
  • core-embed/speaker
  • core-embed/ted
  • core-embed/tumblr
  • core-embed/videopress
  • core-embed/wordpress-tv

Here is an example of the placement of the code above.

In case you didn’t how you how to edit the functions.php file of your theme. Go to Appearance -> Theme Editor on your WordPress dashboard. Select your theme on the Select theme to edit dropdown and click the functions.php file on the Theme Files panel on the right side.

Make sure to click the Update File button once you are done editing the file.

Top 8 WordPress Plugins for Gutenberg Blocks

If you are not interested to use a page builder to create the pages of your website, you can make use of Gutenberg — the default editor of WordPress. But you need to install plugins to get more blocks given the elements you can add are limited if you rely on the default Gutenberg blocks. We have compiled the top WordPress plugins you can install to enrich the block collections of Gutenberg.

With the extra blocks offered by the plugins we will mention below, you can add elements to your page — which are not possible with the default Gutenberg blocks. For instance, you can add table of contents using a block when you are creating a long listicle. Or you can also directly create and add a form using Gutenberg when creating a contact page or other pages that require a form.

Here is the list of best WordPress plugins to get a set of extra Gutenberg blocks.

Top WordPress Plugins for Gutenberg Blocks

1. Kadence Blocks

Kadence Blocks is one of the best WordPress plugins when it comes to Gutenberg blocks. The plugin adds 15 extra blocks once installed and activated. One of the most useful blocks offered by Kadence Blocks is Row Layout. The block is useful to add a new block with a certain column layout whereby you can add other blocks on each column. The block also comes with a setting option to add a shape divider, which is a common thing on page builder like Elementor and Divi Builder. You can add the shape divider whether on the top or bottom side of the Row Layout block.

Need to add a contact form? Kadence Blocks also has a block to do so. You can even use the Form block of Kadence Blocks to create an email opt-in form thanks to the integration with services like MailerLite, SendInBlue, and MailChimp. Here is the list of the blocks offered by Kadence Blocks:

  • Spacer
  • Advanced Button
  • Row Layout
  • Icon
  • Advanced Heading
  • Tabs
  • Info Box
  • Accordion
  • Icon List
  • Testimonials
  • Advanced Gallery
  • Form
  • Table of Contents
  • Posts
  • Countdown

Kadence Blocks itself if a freemium plugin. All blocks on the list above are available on both the free version and pro version. The pro version of Kadence Blocks offers some advanced features like custom icons, custom field supports, visibility control, and the ability to add animation effects. Furthermore, Kadence Blocks also offers pre-made Gutenberg page templates to streamline your workflow.

2. Otter

Otter offers more Gutenberg blocks than Kadence Blocks above. There are about 27 blocks offered by Otter, including the Section block which has the same functionality as the Row Layout block of Kadence Blocks. The Section block of Otter also has a setting option to add a shape divider if it matters to you. Otter has two blocks dedicated to creating forms. One to create a contact form and another to create an email opt-in form for Mailchimp and SendInBlue. Need to add a Lottie animation? Otter also has a block to do so. You can add a Lottie animation whether from a JSON file or by embedding a Lottie animation from Lottiefiles.

Here are the blocks offered by Otter:

  • Masonry
  • About Author
  • Accordion
  • Advanced Heading
  • Button Group
  • Circle Counter
  • Countdown
  • Icon
  • Form
  • Google Maps
  • Icon List
  • Maps
  • Lottie
  • Plugin Card
  • Popup
  • Posts
  • Progress Bar
  • Product Review
  • Section
  • Sharing Icons
  • Slider
  • Pricing
  • Service
  • Testimonials
  • Tabs
  • Contact Form
  • Subsribe Form

To streamline your workflow, Otter also comes with pre-made block layouts. You can browse pre-made block templates from the template library included in the plugin.

3. Gutentor

Gutentor might is a WordPress plugin that offers the most Gutenberg blocks. There are over 60 Gutenberg blocks offered by the plugin total. They are categorized into five different groups. Here are the Gutenberg blocks offered by Gutentor:

  • Divider
  • Simple Text
  • Advanced Text
  • Button
  • Counter
  • Google Maps
  • Icon
  • Image
  • Advanced List
  • Pricing
  • Progress Bar
  • Rating
  • Video Popup
  • Carousel
  • Button Group
  • Dyanmic Columns
  • Container/Cover
  • Advanced Columns
  • Slider
  • Accordion
  • Tabs
  • Icon Group
  • Form Wrapper
  • Gallery
  • Filter
  • Quote
  • Table of Contents
  • Post (Type)
  • Post (Type) Feature
  • Post (Type) Carousel
  • Advanced Post (Type)
  • Post (Type) News Ticker
  • Duplex Post (Type)
  • Term (Category)
  • Term (Category) Feature
  • Term Category Carousel
  • Content Widget
  • Team Widget
  • Accordion Widget
  • Opening Hours Widget
  • Timeline Widget
  • Counter Widget
  • Tabs Widget
  • About Widget
  • Featured Widget
  • Testimonial Widget
  • Restaurant Menu Widget
  • Pricing Widget
  • Gallery Widget
  • Social Links
  • Widget
  • Video Popup Widget
  • Progress Bar Widget
  • Image Slider Widget
  • Author Widget
  • Call To Action Widget
  • Countdown Widget
  • Google Maps Widget
  • Post Widget
  • Advanced List Widget
  • Show More Widget
  • Notification Widget

With the blocks above, you can add creative elements to your page. Same as the first two plugins above. Gutentor also comes with a template library whereby you can browse pre-made templates. Be it block templates or page templates.

4. CoBlocks

If your WordPress site is hosted on GoDaddy, you might want to install the CoBlocks plugin without thinking twice. CoBlocks is a free WordPress plugin from GoDaddy aimed at those who want to create a WordPress website using Gutenberg. The plugin comes with a set of Gutenberg blocks to allow you to add elements to your pages such as form, accordion, image carousel, pricing table, and so on. Here is the list of the Gutenberg blocks offered by CoBlocks:

  • Accordion
  • Alert
  • Author Profile
  • Buttons
  • Carousel Gallery
  • Click to Tweet
  • Collage Gallery
  • Dynamic Separator
  • Events
  • Features
  • Shape Divider
  • Food & Drinks
  • Form
  • Gif
  • GitHub Gist
  • Hero
  • Highlight
  • Icon
  • Logos & Badges
  • Map
  • Masonry Gallery
  • Media Card
  • Offset Gallery
  • OpenTable Reservations
  • Post Carousel
  • Posts
  • Pricing Table
  • Resizable Row/Columns
  • Services
  • Social Sharing
  • Stacked Gallery

5. Ultimate Addons for Gutenberg

Ultimate Addons is a WordPress plugin from Brainstorm Force, a company that develops Astra, one of the most popular WordPress themes. Ultimate Addons is available in two versions: one for Gutenberg add-on and one for Elementor add-on. The Gutenberg version comes with 32 blocks to ease your job in creating the pages for your WordPress site. With the Ultimate Addons plugin installed and activated, you can add elements like Lottie animation, form, price list, team member, call to action, star rating, and so on. Here are the blocks offered by Ultimate Addons:

  • Advanced Columns
  • Advanced Heading
  • Blockquote
  • Call to Action
  • Contact Form 7 Styler
  • Content Timeline
  • FAQ – Schema
  • Forms
  • Google Map
  • Gravity Form Styler
  • How-to Schema
  • Icon List
  • Info Box
  • Inline Notice
  • Lottie
  • Marketing Button
  • Multi Buttons
  • Post Carousel
  • Post Grid
  • Post Masonry
  • Post Timeline
  • Price List
  • Review Scheme
  • Section
  • Social Share
  • Start Rating
  • Table of Contents
  • Tabs
  • Taxonomy List
  • Team
  • Testimonial
  • WP – Search

To streamline your workflow, the Ultimate Addons also includes a template library which you can access by clicking the UAG Templates button on the top toolbar of the Gutenberg editor. On the template library, you can browse hundreds of pre-made templates and block patterns.

6. Ultimate Blocks

Despite the similarity of the name, Ultimate Blocks is a different plugin than Ultimate Addons for Gutenberg above. Also, the plugin is developed by a different developer. Ultimate Blocks offers a set of Gutenberg blocks for bloggers such as social share, star rating (which is useful to create review articles), table of contents, and so on. There are 22 Gutenberg blocks offered by Ultimate Blocks in total. You can disable the unnecessary ones from the settings page of the plugin. Here are the blocks offered by Ultimate Blocks:

  • Testimonial
  • Call to Action
  • Divider
  • Click to Tweet
  • Social Share
  • Content Toggle
  • Button
  • Tabbed
  • Star Rating
  • Table of Contents
  • Progress Bar
  • Countdown
  • Preview
  • Image Slider
  • Content Filter
  • Styled Box
  • Expand
  • Styled List
  • Post Grid
  • How To
  • Advanced Heading
  • Advanced Video

7. Genesis Blocks

Is your website hosted on WPEngine? If yes, then Genesis Blocks might is the plugin you want to install to get Gutenberg blocks. Genesis Blocks is a WordPress plugin from StudioPress. As you might have known, StudioPress is owned by WPEngine, a well-known premium managed WordPress hosting provider. Genesis Blocks offers 15 handy Gutenberg blocks to allow you to add elements like email opt-in form (Mailchimp only), call to action, pricing table, accordion, and so on. In addition, it also offers pre-made block layouts to streamline your workflow.

Here are the Gutenberg blocks offered by Genesis Blocks:

  • Testimonial
  • Profile Box
  • Notice
  • Drop Cap
  • Button
  • Spacer
  • Accordion
  • Call To Action
  • Sharing
  • Post and Page Grid
  • Container
  • Pricing
  • Email Newsletter
  • Advanced Columns
  • Layouts

8. Stackable

Stackable is another great plugin to enrich your Gutenberg block collections. The plugin comes with 33 Gutenberg blocks. Also, it includes a template library whereby you can browser and insert pre-made block templates. Block templates are put together into several categories to make it easier for you to find the blocks you need. Some blocks offered by Stackable are Video Popup, Call to Action, and so on. Here is the list of the Gutenberg blocks offered by Stackable:

  • Count Up
  • Divider
  • Heading
  • Icon List
  • Icon
  • Number Box
  • Price
  • Subtitle
  • Text
  • Image
  • Video Popup
  • Accordion
  • Blockquote
  • Call to Action
  • Card
  • Columns
  • Expand/Show More
  • Feature Grid
  • Feature
  • Hero
  • Icon Box
  • Icon Label
  • Image Box
  • Notification
  • Posts
  • Pricing Box
  • Separator
  • Spacer
  • Team Member
  • Testimonial
  • Button
  • Icon Button
  • Social Buttons

In addition to template library and the blocks above, Stackable also comes with other features like custom position (static, relative, absolute, sticky), motion effects, custom CSS, display condition, and responsive (hide a block on desktop, table, and smartphone). However, you need to upgrade to the pro version to use these advanced features. You can access these features from the Advanced tab on the settings panel of Gutenberg.

The Bottom Line

Being the native WordPress editor, Gutenberg is a great option to create the pages of your website instead of just blog posts. You can also use Gutenberg to create stunning pages just like popular page builders like Divi Builder and Elementor. However, since the elements you can add to your page tend to limited if you rely on the default Gutenberg blocks, you need to install a plugin to enrich the block collections so that you can add more creative elements to your page. The plugins above a great to enrich the Gutenberg blocks on your WordPress site. Before picking one, make sure the plugin you want to install offers the blocks you need.

How to Export and Import a Gutenberg Block

Gutenberg has some native features you can make use to streamline your workflow. One of which is the ability to export and import a block. This article will show you how to do so.

Despite the existence of page builder plugins like Elementor and Divi Builder which offer a better page building experience, some WordPress users prefer to use Gutenberg to create pages of their websites. Indeed, you can use Gutenberg to create the core pages of your website, not just blog posts. You can even create a page from a pre-made template just like when creating a page with Elementor and other page builder plugins (Read: 5 Best WordPress Plugins to Get Gutenberg Templates).

Back to our topic. Gutenberg comes with a native feature to allow you to export a block into a JSON file and then import it to be used on another page, be it on the same website on a different website. At the time of writing, the feature only works for reusable blocks. In other words, you need to turn the block you want to export into a reusable block first before you can export it. You can read our previous article to learn how to create a reusable block in Gutenberg.

How to Export a Gutenberg Block

First off, you can create a page using Gutenberg just like usual. Start by adding a block and customize it accordingly. Once done customizing the block, click the three-dot icon on the block settings bar and select Add to Reusable blocks. Give your reusable block a name on the appearing window and click the Save button.

Next, go to the reusable blocks manager page by clicking the three-dot icon on the upper-right corner of the Gutenberg screen and select Manage Reusable blocks. If you can’t see this option, try to zoom out your page (by pressing the Ctrl and keys if you use Windows).

On the reusable blocks manager page, specify a reusable block you want to export and simply click the Export as JSON link.

A little tip before turning a Gutenberg block into a reusable block and export it. You can put together some blocks as a group block. It will make your work more efficient.

How to Import a Gutenberg Block

As mentioned earlier, you can import the reusable blocks you have exported to another page. Be it on the same website or different website. To import a reusable block, you can go to the reusable blocks manager page as we have covered above. Click the Import from JSON button followed by the Choose File button to select the JSON file of the reusable block you want to import. End by clicking the Import button.

To use the imported reusable block, you can simply edit a page/post using Gutenberg just like usual. Add a new block by clicking the plus button on the toolbar area and go to the Reusable tab. You will see the list of reusable blocks you have created, including the ones you imported, on this tab. Simply click the reusable block you want to use to bring it to the Gutenberg editor.

The Bottom Line

If you prefer to use Gutenberg to create the core pages of your website instead a page builder plugin, you can make use of its native feature to streamline your workflow, including the ability to export and import blocks. With this feature, you can get a page done more quickly. Unfortunately, Gutenberg has no capability to export/import the whole page yet. It would be great to be able to export or import a page. This capability might is about to come on the next releases. Hopefully soon.

5 Best WordPress Plugins to Get Gutenberg Templates

If you often create new WordPress sites using Gutenberg instead of page builder plugins, you might start to think whether it is possible to start a page from a pre-made template instead of from scratch. So far, Gutenberg has no feature to export or import a page template like page builder plugins such as Elementor and Divi Builder. All you can do is to export/import a block, not the whole page. But it doesn’t mean you can’t create a page from a pre-made template. There are some plugins out there that offer pre-made templates for Gutenberg. We have put together the best WordPress plugins to get pre-made Gutenberg templates.

Why do you need to start from pre-made templates?

Creating the core pages of a website requires several steps. From determining the design concept, creating the style guide, and so on. Often times, you need an additional design tool like Figma before you execute the design in Gutenberg or page builder of your choice. When you create a page from a pre-made template, you can skip these time-consuming steps. As a result, you can work more efficiently.

WordPress Plugins to Get Gutenberg Templates

Here are some of the WordPress plugins that offer pre-made templates for Gutenberg. From block templates to page templates.

1. Kadence Blocks

Kadence Blocks is one of the best WordPress plugins for Gutenberg. It offers a set of Gutenberg blocks to allow you to add creative elements like advanced image gallery, tabs, accordion, testimonials, and so on. Also, Kadence Blocks allows you to create a form and table of contents to Gutenberg using a block. The pro version even comes with advanced features like visibility control, custom icons, and dynamic content.

The most important thing, Kadence Blocks offers a lot of pre-made templates which you can access via a template library. After installing and activating the Kadence Blocks plugin, you will see a new button called Design Library on the toolbar area of the Gutenberg editor. Clicking the button will open the template library where you can browse pre-made templates. Kadence Blocks offers both block templates and page templates. It even offers template packs (a set of page templates to create a website. Usually consists of core pages like homepage, about page, contact page, and so on). Some templates are free to use, some requires a Pro account.

2. Starter Templates

Starter Templates is a WordPress plugin by Brainstorm Force. The company behind WordPress products like Astra theme and Ultimate Addons. Starter Templates is a WordPress plugin that offers pre-made templates for page builder plugins like Elementor, Brizy, and Beaver Builder. The plugin also offers pre-made templates for Gutenberg. The workflow of Starter Templates is the same as Kadence Blocks above whereby it offers a button on the toolbar area of the Gutenberg editor. Clicking the button will open the template library where you can explore and select the templates you need. Starter Templates also offers template packs.

Some templates offered by Starter Templates require extra plugins, depending on the contained elements. For instance, if you import a template that contains a form, you need to install a form builder plugin associated with the elements. Sadly, Starter Templates offers no information over the required plugins of the templates.

3. Otter Blocks

Otter Blocks is a WordPress plugin from ThemeIsle. It has one thing in common as Kadence Blocks whereby you will get a new set of Gutenberg blocks after installing and activating the plugin. There are about 23 new Gutenberg blocks offered by Otter Blocks in total. With the Otter Blocks installed and activated, you will see a Template Library button on the editor area of Gutenberg every time you create a new page. You can find and use the offered pre-made templates via the template library. At the time of writing, Otter Blocks offers block templates only. Page templates are still in the “coming soon” phase.

4. Gutentor

Gutentor is another WordPress plugin that offers a set of Gutenberg blocks. To help you to work more efficiently, the plugin also offers a template library whereby you can find hundreds of pre-made templates. Gutentor offers block templates and page templates. There are also template packs designed specifically for certain website types. To open the template library, you need to activate it first from the settings page of Gutentor.

5. Redux

If you are looking for a WordPress plugin that offers pre-made templates whereby the pages are made of the native Gutenberg blocks, Redux might is the plugin you are looking for. In addition to page templates, Redux also offers a set of block patterns. The template collections offered by Redux are very well-organized on the template library. You can browser templates by website category and page type. There hundreds of pre-made templates offered by Redux you can choose from. You can open the template library by clicking the Library button on the toolbar area of the Gutenberg editor. You will see the button after installing and activating the Redux plugin.

The Bottom Line

With Gutenberg, not only you can create blog posts. Instead, you can also use it to create the core pages of your website that consists of visual elements just like other page builder plugins like Elementor and Divi Builder although it takes more effort to build a page using Gutenberg. When creating a new page using Gutenberg, you can start whether from scratch or from a pre-made template. The plugins we mentioned above are worth trying if you want to create a Gutenberg page from a pre-made template. Most plugins above offer a set of Gutenberg blocks to allow you to add more elements to your page. If you prefer to use the Gutenberg native blocks only, Redux is great option to go.

There are actually some other plugins to get pre-made Gutenberg templates, including Templately and Templateberg. But they are a bit complicated to use, so we decided to not include them in the list.

21 Useful Gutenberg Keyboard Shortcuts

Gutenberg has been available as the default editor of WordPress for quite a while now. If you stick to it instead of replacing it with the classic editor, you might start to figure out if there are ways to work more efferently. In addition to the ability to create reusable blocks, Gutenberg also offers a set of keyboard shortcuts to allow you to work more efficiently. For instance, to insert a link, you can click the Ctrl+K on your keyboards instead of performing clicks. We have put together the list of keyboard shortcuts available on Gutenberg. If you want to see the available keyboard shortcuts yourself, you can click the three-dot icon on the upper-right corner of the Gutenberg screen and select Keyboard shortcuts (Shift+Alt+H).

Please note that the keyboard shortcuts on the list below are for Windows and Linux. If you use Mac, you can replace the Ctrl key with the command key.

List of Gutenberg Keyboard Shortcuts

General Keyboard Shortcuts

  • Enter = Add a new block
  • Ctrl + Shift + D = Duplicate the selected blocks
  • Alt + Shift + Z = Remove the selected blocks
  • Ctrl + Alt + T = Insert a new block before the selected block
  • Ctrl + Alt + Y = Insert a new block after the selected block
  • / = Change the block type
  • Esc = Clear selection
  • Ctrl + Z = Undo the last changes
  • Ctrl + Shift + Z = Redo the last undo
  • Ctrl + Shift + , = Show/hide the settings panel
  • Alt + Shift + O = Open the block navigation menu (list view)
  • Alt + Shift + N = Navigate to the next part of the editor
  • Alt + Shift + P = Navigate to the previous part of the editor
  • Alt + F10 = Navigate to the nearest toolbar
  • Ctrl + Shift + Alt + M = Switch between Visual Editor and Code Editor
  • CTRL + Shift + Alt + F = Switch to the full-screen mode

Text Formatting Keyboard Shortcuts

  • Ctrl + B = Make the selected text bold
  • Ctrl + I = Make the selected text bold
  • Ctrl + K = Conver the selected text into a link
  • Ctrl + Shift + K = Remove a link
  • Ctrl + U = Underline the selected text

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.