JetWooBuilder vs Elementor WooCommerce Builder

WooCommerce is the most popular WordPress plugin to create an e-commerce website. It adds the e-commerce functionality to allow you to sell products — be it physical products or digital products — on your WordPress-based website. Just like regular WordPress sites, you can also create a customized, unique e-commerce website with WooCommerce by customizing the WooCommerce parts such as single product page, cart page, check out page, and so on. The page builder era has made easier for you to customize your WooCommerce site. Some page builder plugins, including Elementor, comes with a WooCommerce builder feature to allow you to customize WooCommerce parts in a visual way.

The WooCommerce Builder of Elementor allows you to create custom templates for the shop page, single product page, product archive pages (categories and tags). There are no options to create custom checkout page, custom cart page, and custom customer account page. If you want to create custom templates for the last mentioned three parts, you can use JetWooBuilder.

JetWooBuilder is an Elementor add-on from Crocoblock designed specifically to create an e-commerce website with Elementor+WooCommerce. In this post, we will compare the capabilities of Elementor’s built-in WooCommerce Builder and JetWooBuilder in customizing your WooCommerce website.

JetWooBuilder vs Elementor WooCommerce Builder: In a Nutshell

Before stepping further, it’s crucial to understand the WooCommerce parts first. In general, WooCommerce consists of the following main parts:

  • Shop page (which you can access by going to yoursite.com/shop)
  • Single product page
  • Product category pages
  • Product tag pages
  • Cart page
  • Checkout page
  • customer account page

The layouts/appearances of those parts area controlled by template files which you can found under the templates directory under the woocommerce directory (full path: wp-content/plugins/woocommerce/templates). WooCommerce builders (JetWooBuilder and Elementor WooCommerce Builder in this case), allow you to create custom templates to replace the default templates of WooCommerce. No need to deal with codes as they offer a visual editor.

The WooCommerce Builder feature of Elementor is available on the pro version so you need to use Elementor Pro to be able to use.

In terms of editing experience, there is no difference between JetWooBuilder and Elementor WooCommerce Builder as they use the same editor (the Elementor editor).

Custom Templates You Can Create

As we described above, WooCommerce consists of seven main parts in which the layout of each part is controlled by a template which you can find under the /woocommerce/templates directory. When looking for a WooCommerce builder plugin, it’s crucial to learn which parts you can create the custom templates of. Until version 3.2.1, Elementor only allows you to create three out of seven main parts of WooCommerce (shop page, single product page, and product archive pages). Meanwhile, JetWooBuilder can be used to create custom templates for all main parts of WooCommerce.

JetWooBuilderElementor WooCommerce Builder
Shop pageYesYes
Single product pageYesYes
Product category pagesYesYes
Product tag pagesYesYes
Cart pageYesYes
Checkout pageYesYes
Customer account pageYesYes

Widgets

Both JetWooBuilder and Elementor WooCommerce Builder offers Elementor widgets dedicated to WooCommerce. The offered widgets determine the elements you can add to your templates. Some common elements you can add to your custom templates are product price, add to cart button, product rating, product image, product description, and so on. Please note that you can only see the WooCommerce widgets on the Elementor widgets panel when you have WooCommerce installed and activated on your WordPress site.

JetWooBuilder has more widget collections as it allows you to create more custom templates than Elementor WooCommerce Builder. The widgets are put together based on the custom template they are intended to be used on.

JetWooBuilder Widgets

Widgets for Single Product Template

  • Single Sharing
  • Single Add to Cart
  • Single Attributes
  • Single Content
  • Single Excerpt
  • Single Images
  • Single Meta
  • Single Price
  • Single Rating
  • Single Related Products
  • Single Reviews Form
  • Single Sale Badge
  • Single Upsells
  • Single Title
  • Single Tabs

Widgets for Archive Page Templates

  • Title
  • Thumbnail
  • Tags
  • Stock Status
  • Sale Badge
  • Rating
  • Price
  • Excerpt
  • Categories
  • Add to Cart
  • Description
  • Count

Widgets for Shop Page

  • Products Result Count
  • Products Pagination
  • Page Title
  • Products Ordering
  • Products Notices
  • Products Navigation
  • Products Loop
  • Products Description

Widgets for Cart Page

  • Cart Return to Shop
  • Cart Totals
  • Cart Empty Message
  • Cart Table
  • Cart Cross Sells

Widgets for Checkout Page

  • Checkout Payment
  • Checkout Coupon Form
  • Checkout Order Review
  • Checkout Billing
  • Checkout Shipping Form
  • Checkout Login Form
  • Checkout Additional Form

Widgets for Customer Account Page

  • My Account Logout
  • My Account Dashboard
  • My Account Registration Form
  • My Account Login Form
  • My Account Address
  • My Account Order
  • My Account Downloads
  • My Account Details

Global Widgets

  • Categories Grid
  • Products Grid
  • Products List
  • Taxonomy Tiles

Elementor WooCommerce Builder Widgets

Widgets for Single Product Page Template

  • WooCommerce Breadcrumbs
  • Product Title
  • Product Images
  • Product Price
  • Add to Cart
  • Product Rating
  • Product Stock
  • Product Meta
  • Short Description
  • Product Content
  • Product Data Tabs
  • Additional Information
  • Product Related
  • Upsells

Widgets for Archive Page Templates

  • Archive Title
  • Archive Products
  • Archive Description

Global Widgets

  • Products
  • WooCommerce Breadcrumbs
  • Custom Add to Cart
  • WooCommerce Pages
  • Products Categories
  • Menu Cart
  • Checkout
  • Cart
  • My Account

Workflow

Technically, Elementor WooCommerce Builder is a part of Elementor Theme Builder. To start creating a custom WooCommerce template, you can go to Templates -> Theme Builder on your WordPress dashboard. There are two tabs associated with WooCommerce here: the Single Product tab and the Products Archive tab. You can click the Single Product tab to create a custom single product page template. While to create a custom shop page and custom archive pages, you can click the Products Archive tab.

Similarly, to start creating a custom WooCommerce template using JetWooBuilder, you can go to Crocoblock -> Woo Page Builder. You can click the Add New Template button and select the WooCommerce part you want to create the template for on the dropdown menu.

In Elementor WooCommerce Builder, your custom template will be applied right after you publish it. While in JetWooBuilder, you need to enable it from the WooCommerce settings page (WooCommerce -> Settings). You can refer to our previous article to learn how to use JetWooBuilder.

Elementor WooCommerce Builder supports display conditions. You can assign a custom single product page template to products under certain categories or tags. The same feature is not offered by JetWooBuilder, but you can use a different template for certain products as well. With JetWooBuilder installed and activated, you have an option choose a template when adding a new product.

Pricing Options

WooCommerce Builder is one of the features of Elementor Pro. In other words, you need to upgrade to Elementor Pro to be able to use it. The cheapest plan offered by Elementor for the pro version is $49 per year for one website. JetWooBuilder is available at a cheaper price. It costs only $24 per year for a single website. You can also get JetWooBuilder with a one-time purchase option along with other JetPlugins members.

The Verdict

Both JetWooBuilder and Elementor WooCommerce Builder allow you to create a fully customized e-commerce website with WooCommerce. They allow you to create custom templates to replace the default templates of WooCommerce using the visual editor of Elementor, which offers a live editing experience. In terms of capability to create an e-commerce website, JetWooBuilder is a bit ahead of Elementor WooCommerce Builder as it allows you to create more custom templates. You can create custom templates for all WooCommerce main parts as we have mentioned in the opening section, while Elementor only allows you to create three of them. However, if you need a single solution for multiple needs at once, Elementor is a most suited option as it offers more features.

For instance, Elementor comes with a form builder feature which you can connect with marketing tools like MailerLite and ActiveCampaign. Its Theme Builder feature also allows you to create custom header and custom footer for your e-commerce site. Of course, you can also combine the two, but if you have to choose one, you should consider what is your emphasis. If you purely want to create an e-commerce website, then JetWooBuilder is a better option.

How to Add Shape Divider in Brizy

In the context of page builder, a shape divider has at least two functions. First, you can use it as some kind of a separator between sections. Second, you can use it to add a decorative element to a section. Just like other page builder plugins, Brizy also allows you to add a shape divider to a section (called block in Brizy). You can add a shape divider to both the top side and the bottom side of a block. In case you are new to Brizy, this article will show you how to add a shape divider in a block.

Brizy offers about forty-four shape divider styles you can choose from. You can customize a shape divider by changing its color and setting its size. Here are some examples of the shape divider styles offered by Brizy.

How to Add a Shape Divider in Brizy

The feature to add a shape divider is available on both versions of Brizy (read: Brizy Free vs Pro) so don’t need to upgrade to the pro version if you don’t need to. If you are new to Brizy, you can read our previous article to learn how to work with a block in Brizy.

First, hover your mouse over the block you want to add the shape divider to and click the mixer icon to open the settings bar. On the settings bar, click the gear icon followed by More Settings to open the settings panel.

Under the Styling tab on the settings panel, go to the Dividers option to add a divider. You can simply select a shape divider style from the dropdown menu.

After selecting a shape divider style, you can set the color as well as size the color.

How to Create a Custom Search Results Page in WordPress Using Brizy

Every WordPress theme has a file template to govern the layout of the search results page. In most cases, the file named search.php. If you have coding skills (PHP and CSS in particular), you can edit the file to customize the appearance of the search results page of your WordPress site. Otherwise, you can use a theme builder plugin to customize the appearance of the search results page in a visual way. Brizy is one of the theme builder plugins that you can use. This article will show you how to use Brizy to create a custom search results page template on your WordPress site.

Brizy itself is a lightweight, yet powerful page builder plugin for WordPress. The pro version comes with a theme builder feature to allow you to create custom templates to replace the default templates of your theme parts. Some custom templates you can create with Brizy theme builder are:

  • Single post
  • Single page
  • 404 page
  • Search results
  • Categories
  • Tags
  • Authors

How to Use Brizy to Create a Custom Search Results Page in WordPress

Creating a custom search results page using Brizy, you can add creative elements other than the element to display the search query. Brizy Pro offers more than forty elements you can choose from to create the custom template. The main element you need is the Archives element.

Before getting started, make sure you have upgraded your Brizy to the pro version if you haven’t done so. You can get the pro version of Brizy on its official website.

Once you are ready, go to Brizy -> Templates on your WordPress dashboard. Click the Add New button to add a new custom template.

Give your template a name and add a display condition on the Display Conditions block. Since you want to create a custom search results page, you can set the display condition to Search page. Click the Publish button to publish the custom template and then click the Edit with Brizy button to edit the template using the Brizy editor.

Once the Brizy editor opens, you can click the plus button to add a new block.

You can either add a ready-made block or blank block. If you want to add the block’s content from scratch, you can select Create your own to add a blank block.

To help you better organize the block’s content, you can add a column before adding other elements. Column is not required but it helps a lot in managing the block’s content as well as the layout. You can read our previous article to learn how to work with a column in Brizy. You can simply drag the Column element to the canvas area to add a column.

You can style up your column (and block) beforehand before you add the content to it. You can set things like the background, border, and so on. Once your column is ready, add the Archives element to it.

By default, the Archives element displays the search results in three columns. You can customize it according to your needs.

Customizing the Archives Element

As said above, the Archives element displays the search results in three columns with each column consists of four components:

  • Featured image
  • Post title
  • Post excerpt
  • Read more button

The columns on the Archives element are connected each other. When you make a certain change of a component on one of the columns (e.g., the font size), the change will also be applied to the same component on other columns.

If you want to change the number of columns on the Archives element, you can hover your mouse over the Archives element and click the grey arrow icon to open the settings bar.

On the appearing settings bar, click the WordPress icon and set the number of columns on the Columns option. As you can see, you can also set the number of rows as well as the spacing.

After setting the number of columns and rows, you can customize the components of the Archives elements.

  • Featured Image

A little note before you start to customize the featured image component. Brizy doesn’t display the actual featured image on the editor. Instead, the actual featured image is only displayed on the front-end and you can only see it on the actual search results page. You can’t see the featured image on the preview mode.

To resize the featured image, you can simply click and hold one of the dots on the edge and drag it to any direction. Alternatively, you can click the gear icon on the settings bar.

If you want to add CSS filters to the featured image, you can click the Filters sub-tab under the Image on the settings bar. You can play around with the settings bar to customize the featured image.

  • Post Title and Post Excerpt

By default, the post title and post excerpt are represented by a holder, which makes it hard for you to customize them. To make it easy for you to customize them, you can replace the holder with the Text element and set it to dynamic content. Take a look at the screencast below.

You can read our previous article to learn how to add dynamic content in Brizy. You can style up the post title and post excerpt just like when you are styling up regular text in Brizy. You can click the post title and the post excerpt to open the settings bar where you can make the stylings.

  • Read More Button

The Read More button is basically a Button element with the link is set to Post URL. In other words, you can customize it just like when you are customizing a regular button. You can refer to our previous article to learn how to customize the button element.

You can add more components to the Archives element if you want it. For instance, you can add the post meta or author’s profile picture. To add one, you can simply drag an element to one of the columns and customize it accordingly.

  • Pagination

Once you are done customizing the key components on the columns of the Archives element, you can customize the pagination. You can simply click the pagination to show the settings bar where you can make the customization process. You can set the typography (font family, font size, font style, and so on) as well as the text color.

Adding More Elements

Once you are done customizing the Archives element, you can add more elements to your custom search results page template. You can add elements like search box, button, and so on according to your need. You can either add the additional elements to the same block as the Archives element or to the different blocks. To better manage the layout, you can always add a column first before you add a new element.

Once you are done editing the template, you can click the Update button on the bottom-right corner.

The Bottom Line

WordPress has a search feature to make it easy for your visitors to find a certain content on your website. The appearance of the search results page of WordPress is controlled by the search.php file belongs to the theme you use. If you have PHP knowledge, you can simply edit the file to customize the search results page on your website. Alternatively, you can use a theme builder like Brizy Pro to customize the search results page in a visual way.

The custom search results template you created with Brizy Pro will replace the default custom search results template of your theme. Thanks to a visual editor, you can effortlessly add the elements you like and want. One of the biggest cons of Brizy theme builder might is the absence of ready-made templates, forcing you to create a custom template from scratch. But overall, Brizy theme builder is functionally great.

How to Fix Custom Fields Don’t Show Up in Brizy

Page builders have made it easier for you to work with WordPress custom fields. Most page builders, including Brizy, come with a feature that allows you to display the custom fields’ data. The feature is especially great if you understand how custom fields work yet have no coding skills to create custom fields or display the custom fields’ data. Brizy itself supports popular custom field plugins like ACF, Pods, Meta Box, and Toolset. You can read our previous article to learn how to add custom fields in Brizy.

When attempting to display the data of the custom fields in Brizy, you might experience an issue whereby the data doesn’t show up as you expected. Don’t get mad. It’s not Brizy’s fault. We will explain why the error can happen.

In most page builders, including Brizy, the data of custom fields can only be displayed on the post type associated with the custom fields. For instance, custom fields’ data of the default post type (blog posts) can only be displayed on the blog posts as well. In this context, you need to create a custom template for the default post type to be able to display the custom fields’ data. You can’t display custom fields’ data on a regular page (non templates).

How to Display Custom Fields’ Data in Brizy (the Right Way)

As mentioned above, you can only display the custom fields’ data on the post type where the custom fields belong to. If you want to display the custom fields’ data of the default post type, for instance, you need to create a custom single post template and assign it to the default post type. For more detailed instructions on how to create a custom single post template in Brizy, you can refer to this post. In this post, we will go straight to adding the custom fields.

On the Brizy editor, drag the Text element and place it anywhere to your liking. Once the Text element is added, highlight the default text (or delete it). Press the hash key (#) on your keyboard to show the list of dynamic content. You can find the custom fields at the top section of the list. Simply select one you want to add.

You can then style up the custom field text just like when you are customizing the regular text.

A little note, Brizy doesn’t display the custom field’s’ data on the editor. Instead, it only displays the custom field name/label. The custom fields’ data is only displayed on the front-end so you can preview/publish your template to see the custom fields’ data.

Movavi Video Editor: Review / Tool for Your Business

Movavi Video Editor: Review / Tool for Your BusinessPassion, commitment, experience, drive, knowledge – these are the main terms associated with successful business owners today. However, we live in a frenetic digital age and that’s not enough to run your business online. Such tools as Dropbox, video editors, CRM programs, data analytics programs, data management software are essential for most business owners. It is clear that you can’t keep everything in your head and if you want to move forward, you simply can’t do without effective, data-driven business solutions and other tools for business. On top of that, modern business owners can’t dispense with powerful video editing software like Movavi for Mac-based computers. This tool befits the spectrum of a small business perfectly as it’s powerful, multi-featured, and time-saving.

In this insightful post, we’ll take a closer look at Movavi as the best tool for making short and catchy videos for social media or your blog posts. We’ll review the fundamental benefits of Movavi video editor and analyze the main cases where this tool can be helpful for you!

Movavi: Quick Overview

If you are currently looking for a trusted and powerful video editing tool to suit your marketing needs, you will hardly find a better solution than Movavi for Mac-based computers. With this solution, you’ll see that video editing for beginners is easier than you might think. It’s a video processing software that improves movie creation with its extensive collection of effects and filters.

Movavi Video Editor is a part of the Movavi Video Suite that you can use for creating catchy marketing videos. 95% of marketers say that using catchy videos helps increase user understanding of a product or service. Successful marketers understand that engaging visual elements help businesses explain how things actually work in their business. On top of that, a video can put a face to the name of your business and allows the targeted audience to see the nature of your business. A video is the best tool that allows you to build confidence. According to Statista, digital ad spending in the USA reached $9.950 billion. So if you wish to make an engaging video for your marketing campaign, you simply can’t do without the Movavi Video Editor.

Movavi Video Editor: Overview of the Functionality

Let’s dive deeper into the functionality of this tool for you to make sure you do the right choice.

Make your videos on Mac in a few clicks

If you avoid using video editing tools thinking that it’s too complicated, you should undoubtedly give Movavi a try. Movavi for Mac comes with a user-friendly interface that allows you to do the following:

  • A short family video;
  • Cut too long videos;
  • An informative tutorial for your business;
  • Funny animation for your followers on Instagram or Facebook;
  • Add video fragments;
  • Crop and trim videos;
  • Overlay stylish titles and music;
  • Join a few videos together, making animation transitions.

Add special effects making your videos better

This tool comes with an extensive set of filters and special effects that can easily turn you into a professional film director. Its functionality allows you to enhance video quality and give an absolutely new perspective to a familiar video or image. You only need to download an image or video that you want to improve and add automatic filters or change the parameters of your video manually. In doing so, you’ll manually make it better by changing colors, contrast, and light.

If your overriding purpose is to edit a catchy art video, you can use such effects as Stripes, Twirl, and Find Edges. Plus, there’s also the Split Screen effect that can be used for combining a few clips on one screen. The Chromakey effect chooses the color background and makes it transparent. Overall, this tool has absolutely everything for creating catchy and selling videos to make your business grow.

Create slideshows

That’s another option that will surely be appreciated by business owners. To create yours, you only need to add a few images to the panel and the program will turn them into a slideshow automatically. You only need to add transitions. After your slideshow is ready, you can save and share it with your friends or colleagues online.

Split and crop your videos

This video editing tool also allows you to slice your videos into a few scenes and swap them around. You can choose what scenes you want to keep and delete some parts that you don’t need. Add smooth transitions between the scenes, animated titles, or multiple audio tracks.

So far, the Movavi Video Editor for Mac is one of the best tools that will surely help your business grow. If necessary, you can also use its version for Windows.

There’s a free trial version for 7 days that allows you to test its functionality. However, the free version comes with limitations. Therefore, you need to upgrade it if you want to get access to all available features. The cost of a lifetime license is $59.95.

With all this information in mind, the Movavi Video Editor for Mac is one of the best and easy to use tools that can help your business grow. Use it for making catchy marketing videos, business tutorials, slideshows, and much more! Bring even the most challenging ideas to life with Movavi for Mac!

How to Use the Posts Element of Brizy

When creating a certain page on your website using Brizy — say the homepage –, you might want to display the existing articles (blog posts) on your website. The pro version of Brizy comes with an element — the Posts element — that you can use to do so. In this post, we will show you how to use the Posts element of Brizy to display the articles on your website.

As we have mentioned above, you need to use Brizy Pro to be able to use the Posts element as the element is only available on the pro version. You can get the pro version of Brizy on its official website. If you are new to Brizy, you can read our previous article to learn how to use it. In this example, we will go straight to adding the Posts element to the canvas area.

How to Use the Posts Element of Brizy

By the time this article is written (April 8, 2021), the Brizy Posts element only displays article by category. There are no options to display articles by other parameters like tag and author. Also, you can only select one category on a Posts element.

To start using the Posts element, you can simply drag the Posts element from the left panel and drop it to the canvas area.

As you can see, the Posts element will automatically display the articles in three columns in which each column consists of four elements:

  • Featured image
  • Post title
  • Post excerpt
  • Read more button

If you want to add more columns, you can hover your mouse over the Posts element and click the grey arrow icon to display the Posts element settings bar. On the appearing settings bar, click the Posts tab. Simply replace the default number of columns (3 in this case) with the number of columns you prefer. You can also set the number of rows on the Rows option.

To filter the articles, you can click the Filter sub-tab under the Posts tab on the settings bar. Select a category from the Categories dropdown and filter parameter on the Filter By dropdown. You can also set the order and disable the tags filter if you want it.

Customizing the Post Elements

The Posts element displays your articles in columns. On each column, you have four post elements as we have mentioned earlier above. If you want it, you can also add more elements to the column like post date, custom fields, and so on. One key thing to note. The columns are connected each other. When you make a change on a certain element on one of the columns (or add a new element), the change will also be applied on other columns. Notice the screencast below.

Customizing the Featured Image

To customize the featured image element, first click the image holder on one of the columns to display to settings bar. Click the Image tab and make sure the image is set to Featured Image. If not, you can select Featured Image by clicking the dynamic icon.

If you want to apply CSS filters to the featured image, you can open the Filters sub-tab under the Image tab.

To set the size of the featured image, you can click the gear icon on the settings bar. Alternatively, you can click the image holder and drag the edge.

To set the image border, you can click the Colors tab on the settings bar. From this tab, you can also set the border size and border color.

You can set different border settings for each state (normal and hover) by clicking the finger icon on the left side of the settings bar.

If you want to set the border radius, you can click the gear icon on the settings bar and click More Settings to open the settings panel. You can set the border radius on the Corner option under the Styling tab.

By default, the featured image is not clickable. You might want to set link whereby when visitors click the featured image, the article the featured image belongs to opens. You can do so by setting the image link to Post URL. Click the chain icon on the settings bar and set to Post URL on the Link to option.

A little note. Brizy doesn’t display the actual featured image on the editor. The featured image is only displayed on the front-end when you preview the page or publish it.

Customizing the Post Title

To customize the post title, start by clicking the post tittle element on one of the columns to display settings bar. On the settings bar, you can click the Typography tab to set the typography (font size, font family, and so on). To set the text color, you can click the Colors tab. If you want to set the post title to be clickable, you can click the chain icon as you did on the featured image above. To set the alignment, you can simply click the Align icon.

A little note. Brizy doesn’t display the actual post title on the editor. Instead, you will only see text that says “Brizy #397” or “Post Title”. The actual post title will be displayed on the front-end when you preview or publish the page.

Customizing the Post Excerpt

To customize the post excerpt, you can click the post excerpt element on one of the columns to display the settings panel. On the appearing settings panel, you can click the Typography tab to set the typography, click the Colors tab to set the text color, click the chain icon to set the link and click the Align icon to set the alignment.

A little note. Same as the post title, Brizy also doesn’t display the actual excerpt on the editor. It is only displayed on the front-end when you preview or publish your page.

Setting the Excerpt Length

Brizy offers no setting option to set the excerpt length. To set the excerpt, you can go to the WordPress theme customizer (Appearance -> Customize). The setting location of excerpt length is different on each theme (some themes don’t offer setting option to set the excerpt length).

If your theme offers no setting option to set the excerpt length, you can do so by adding a new function. Go to Appearance -> Theme Editor on your WordPress dashboard. Select the functions.php file on the right panel and paste the following code right after the last line of the file content.

function custom_excerpt_length( $length ) {
	return 20;
}
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );

You can replace the return value (20) according to the excerpt length you want to set.

Customizing the Read More Button

To customize the read more button, you can click the read more button on one of the columns to display the settings bar. On the appearing settings bar, you can click the finger icon to set the size, click the Typography tab to set the typography, click the Colors tab to set the button text color, and click the chain icon to set the link. If you want to remove the read more button instead, you can simply click the trash can icon on the settings bar.

Customizing the Pagination

Before customizing the pagination, make sure you have enabled the pagination. You can click the grey arrow icon of the Posts element and click the Navigation sub-tab under the Posts tab and toggle the Pagination switch on.

Next, you can click the pagination element on the canvas area to customize it. To set the typography, you can click the Typography tab. To set the colors, you can click the Colors tab. From the Colors tab, you can also set the border size.

If you want to set the border radius, you can click the gear icon on the settings bar to open the settings panel.

Adding More Elements

By default, the Posts element of Brizy only includes four post elements (featured image, post title, post excerpt, and read more button). If you want to add more elements (e.g., post date), you can add the Text element to one of the columns. You can place anywhere. Once the Text element is added, you can highlight the default text and press the hash key on your keyboard. Select an element you want to add from appearing list.

You can read our previous article to learn more about how to add dynamic content in Brizy.

The Bottom Line

The Posts element of Brizy is an element aimed at displaying articles on your website. So, if you want to display the articles of your website on a page, you can use this element. The element displays articles by category. Brizy itself has two elements to display articles of your website. In addition to the Posts element, you can also use the Archives element. While the Posts element displays article by category, the Archives element displays articles by the current archive. The Archives element can only be used on a theme builder template. Both the Posts element and the Archives element are only available on Brizy Pro.

How to Hide a Section by User Role in Elementor

Recently, Brizy has just released a new feature to allow users to hide a section (called block in Brizy) by certain parameters, including user role. Thanks to this feature, Brizy users are able to create a membership website without installing an additional plugin. You can read our previous article to learn more. By far, the same feature is not available in Elementor yet. If you want to accomplish the same thing in Elementor, you can use Happy Addons. It is an Elementor add-on that has the capability to hide an Elementor section, column, and widget by certain parameters, including user role.

Hiding an Elementor section or more is great for some scenarios. For instance, you can implement it to show content only to users with certain roles (e.g., administrator and editor only). In addition to displaying a section by user role, Happy Addons is also capable of hiding section by operating system, browser, login status, date range, and specific date.

How to Hide a Section by User Role in Elementor Using Happy Addons

Happy Addons is a freemium add-on. To be able to hide a section you need to use the pro version as the feature to do so is only available on Happy Addons Pro. You can download the pro version of Happy Addons on its official website. Install and activate the plugin once downloaded.

Once you are ready, edit your page with Elementor. On the Elementor editor, specify a section you want to hide and click the handle to turn the section into an existing mode (you can also use Elementor’s Navigator to ease your job).

On the settings panel, go to the Advanced tab and open the Happy Features block. Enable the Display Condition option. Since you want to hide the section, set to Hide Element on the To option. On the When option, set when you want to apply the conditions. There are two options you can set:

  • All Conditions Met: If you want to add multiple conditions, you can select this option to hide the section when all conditions are fulfilled.
  • Any Condition Met: If you want to add multiple conditions, you can select this option to hide the section when one of the conditions is fulfilled.

Open the existing display condition and change to User Role and set the role you want hide the section from. If you want to add more display conditions, you can simply click the ADD ITEM button.

That’s all. You can update your page once you are done editing it.

JetBooking : A Booking Add-on for Elementor

Thanks to its open ecosystem, third-party developers can develop add-ons to extend the functionality of Elementor. If you have been long in the Elementor universe, chances are you have heard about Crocoblock. It is one of the third-party developers that has been developing a number of Elementor add-ons. JetBooking is one of which. JetBooking is an Elementor add-on that is designed specifically at adding booking functionality to your Elementor-powered WordPress site. Thus, it can be a solution if you are looking to create a website using Elementor in which you want your visitors to be able to make a booking.

There are actually a bunch of booking plugins for WordPress out there. However, none of them are designed specifically for Elementor like JetBooking. JetBooking is a perfect option if you are a loyal Elementor user and have a project to create a website type like:

  • Bike Rental
  • Studio Rental
  • Hotel Booking
  • Apartment Booking

JetBooking: A Brief Intro

Elementor is a page builder that has an extremely massive growth. Since its first release back in 2016, the plugin has hit over eight million downloads (as of 2021). The growth of Elementor is not just the plugin itself, but also its overall ecosystem. Today, it is easy to find Elementor add-ons. Be it free or paid. However, there were no add-ons designed specifically to add a booking functionality until Crocoblock did it via JetBooking. So, as we mentioned earlier above, JetBooking is a great solution if you are looking to create a booking site with Elementor.

JetBooking has no built-in feature to accept payment, though. Unfortunately, it supports integration with WooCommerce, so you keep be able to accept a payment. JetBooking has some dependencies to other WordPress plugins to work properly. In addition to Elementor, you need to have JetEngine installed and activated on your WordPress sote to make JetBooking work properly. Also, you need JetThemeCore (or Elementor Pro) to create a custom template for the custom post type for the booking instance.

How JetBooking Works

As we have just mentioned above, JetBooking can’t stand alone. Instead, it depends on JetEngine to work. You need JetEngine to create the custom post type for the booking instance, custom post type for the booking orders, and to create the booking form. With JetBooking installed and activated, you will have a new button action called Apartment booking when creating a form with JetEngine.

Another add-on you need is JetThemeCore (or Elementor Pro). You need it to create a custom template for the custom post type for the booking instance.

Overall, you will go through five steps to use JetBooking as follows.

Step 1: Create post type for booking instance

On this this step, you need to create the custom post type for the booking instance. You will need this custom post type to add the items you want to offer. For instance, if you want to create a booking hotel site, you can use it to add the room types as well as the specs like the number of beds, capacity, gallery, internet, phone, and so on. JetEngine has the capability to create a custom post type as well as custom fields.

Step 2: Create custom post type for booking order

On this step, you need to create the custom post type to handle the booking orders. Alternatively, you can also use WooCommerce. If want to accept payment for the booking orders, using WooCommerce might is a better option as WooCommerce has a built-in payment gateway feature to allow you to accept the payments more effortlessly. When setting up JetBooking for the first time, you will be asked whether you want to use WooCommerce or order post type.

Step 3: Set up database tables

JetBooking demands some database tables to work so that you need to create them before you can continue the setup process. Sounds tricky? Not really, as the setup wizard helps you to do so. The wizard automatically creates the required columns so all you need is to click the Next button.

Step 4: Create booking form

On this step, you need to create the booking form. You can add fields like name, address, email, phone, check-in date, and check-out date to the form. The setup wizard also helps you to create the booking form in case you have no idea about the fields you need to add.

Step 5: Create custom template for custom post type for booking instance

On step one above, you have created the custom post type for the booking instance to add the items you want to offer. To display the content of your items, you need to create a custom template. On the custom template, make sure to add the booking form you have created on step four above to allow your visitors to make the booking.

For more detailed instructions on how to use JetBooking, you can watch the video created by Crocoblock team below.

The Bottom Line

You can use Elementor to create any type of website. If the functionality you want to add to your website is not offered by Elementor, you can install an add-on like JetBooking. JetBooking is designed specifically to add a booking functionality to your Elementor-powered WordPress site . That being said, it can be a solution if you have a project whereby you are required to add the booking functionality to your website. The WooCommerce integration support makes it easy for you to accept the payment.

How to Add a Google Calendar Button in Elementor

Say you are creating a landing for your event with Elementor (e.g., birthday party). To make it easy for your aspiring attendees to add your event to their Google Calendar account, you want to add an “add to Google Calendar” button to your landing page. Is it possible? Yes, it is possible. But you need to use Elementor Pro.

One of the features offered by Elementor Pro is the ability to add a dynamic link. In addition to allowing you to add an internal dynamic link site URL, post URL, author URL, and so on, the feature also allows you to add an actionable link. One of which, you can add a link that redirect your visitors to your event calendar on Google Calendar. This way, your aspiring attendees don’t need to manually add your event to their Google Calendar account. This feature is particularly great to be implemented on a landing page of an event such as wedding party, seminar, birthday party, and so on.

How to Add a Google Calendar Button in Elementor

First, you can create your landing page using Elementor. Once your page is ready to publish, add one last widget — the Button widget — before you really publish it.

Once the Button is added, go to the settings panel to make the settings. Click the dynamic icon on the Link field on the Button block under the Content tab and select Contact URL.

Next, click the wrench icon on the Contact URL field and select Google Calendar.

Add the event title, description, location, start time and end time.

Since you want to add a Google Calendar button, you can set the button text to something like “add to Google Calendar”. You can also add a calendar icon to make your button looks more eye-catching.

Once done with the basic settings, you can go to the Style tab to style up your button. Once everything is done, you can publish or update your page.

How to Fix JetThemeCore Not Working in Elementor

Your JetThemeCore not working properly? Don’t get mad so quickly. This post will show you how to fix the issue.

JetThemeCore itself is an Elementor add-on from Crocoblock that is designed specifically at adding theme builder functionality to your Elementor-powered WordPress site. You can use it to create custom templates for footer, header, single post, archive pages, and so on just like the theme builder feature of Elementor Pro (read: Elementor Pro vs Crocoblock). You can create a new custom template by going to Crocoblock -> Theme Builder on your WordPress dashboard. From here, you can also see the existing templates you have created before, as well as their status (active or not).

If you have created a certain custom template using JetThemeCore (e.g., the custom header template) and it doesn’t appear on the front-end while you are pretty sure the status is active, you can check the following things.

Check the Elementor Pro Status

One of the issues with JetThemeCore is the incompatibility with Elementor Pro theme builder. If you have created a custom template using JetThemeCore while you have Elementor Pro activeon your site, chances are the template won’t appear on the front-end. To fix this issue, you can go to Crocoblock -> JetPlugins Settings on your WordPress dashboard. Open JetThemeCore block and click General Settings. On the Location relations, set to Jet Override and switch the Prevent Pro locations registration toggle on.

If still not working, you can try to temporarily disable Elementor Pro to make sure if the issue is the incompatibility with Elementor Pro.

Try to Use Kava Theme

JetThemeCore (and other JetPlugins members) are not designed specifically for a certain theme. Meaning that you can use it on any WordPress theme. But for some reasons, you might find that JetPlugins (including JetThemeCore) not working well with your current theme. If this is the case, you can try to install Kava Theme. Kava itself is a WordPress theme developed by Crocoblock. It is one of the recommended themes for Elementor, especially if you use JetPlugins.

To install Kava theme, go to Crocoblock -> JetPlugins Settings on your WordPress dashboard. On the JetThemeCore block, click Kava Theme and then click the Install link to install the Kava theme.

Activate the theme once installed.

Install JetThemeCore Compatibility Kit

If you use themes like Astra, OceanWP, and GeneratePress and want to retain one on your site while you want to use JetThemeCore, you can install JetThemeCore Compatibility Kit. It is a plugin from Crocoblock to fix the JetThemeCore incompatibility issue with those themes. You can download it from the Crocoblock dashboard. So, login to Crocoblock dashboard using your account. Once logged in, scroll down to the Extras section. You can find the JetThemeCore Compatibility Kit plugin on the Plugins block. Simply click the Download button to download it.

Install and activate the plugin once downloaded.

The Bottom Line

Don’t get frustrated if your JetThemeCore doesn’t work the way it should be. The issue basically lies on the compatibility. Nothing else. Depending on your case, you can try of the solutions we have just covered above. If you have Elementor Pro activated, you can try to temporarily disable it to find the issue. If you use a theme other than Kava, you can try to install and activate the Install JetThemeCore Compatibility Kit plugin.

JetTabs: A Review and Overview

On a page, some sections need to be displayed in a more compact way to save space. For example, when you create an FAQ page, you can set each item to be collapsible. In the visitors’ perspective, this this sort of design implementation trick can offer a better experience (some people hate a long text content). In Elementor, there are at least three widgets that you can use to add collapsible content: Tabs, Accordion, and Toggle. While these widgets are useful to add collapsible content, the content types you can add are limited. You can only add text content. JetTabs offers some solutions if you want to add non-text collapsible content in Elementor.

Never heard about JetTabs before?

JetTabs is a premium Elementor add-ons developed by Crocoblock. It is designed specifically to allow you to add collapsible content. Instead of just text, you can add collapsible content in a wide range of formats. From image, video, or the combination of text, image, and video. Unlike the default Elementor widgets to create collapsible content (Tabs, Accordion, and Toggle) that only allow adding content from a WYSIWYG editor, JetTabs allows you to add the content from a template (Elementor template more precisely). In other words, you can add any visual element to your content using the available Elementor widgets.

JetTabs Widgets

JetTabs offers four widgets that you can use to add collapsible content to your page:

1. Switcher

You can use this widget to display content in two different blocks. It is a great fit to be implemented on a pricing plan section where you can display the plans you offer by subscription period (e.g., monthly and yearly).

2. Image Accordion

So far (until version 3.2.x), Elementor has no widget to allow you to add accordion image. JetTabs allows you to accomplish it thanks to the Image Accordion widget. You can add supporting elements like button and text to the image accordion. If you use Elementor Pro, you will also be able to use a dynamic image on each image accordion item.

3. Classic Accordion

Elementor has a default widget called Accordion which you can use to add collapsible content in the form accordion. But again, you can only add text content as the widget doesn’t allow you to add the content from a template. The Classic Accordion widget of JetTabs offers two options to add the content to each accordion item: via a WYSIWYG editor and via template.

The ability to add accordion content from a template allows you to add more interesting content formats by adding visual elements like icon, image, or even video.

4. Tabs

You can use the Tabs widget to add a tabbed section on an Elementor page. Again, the content types you can add are limited to text. There is no option to add image or other content types. JetTabs comes with a Tabs widget (the widget name is the same as the native Tabs widget of Elementor). You can use the widget to add a tabbed section as well. The difference is that you can add more content types as it allows you to add content from a template.

Since you can add the tab’s content from a template, you can use the Tabs widget of JetTabs to create, for instance, a tabbed section that displays blog posts from different categories (categories are displayed in tabs). Here is an example use of the widget.

How to Use JetTabs

The use of JetTabs is extremely straightforward. After installing and activating the add-on, you will find four new widgets on your Elementor. You can find them on the JETELEMENTS block on the settings panel (panel on the right side within the Elementor editor). Simply add the widget you want to to use by dragging it to the canvas area.

If you are new to Elementor, you can read our previous article to learn how to use Elementor.

Adding Content From a Template

As mentioned above, in addition to adding the content from a WYSIWYG editor, JetTabs also allows you to add the content from a template. All JetTabs widgets support content adding from a template except the Image Accordion widget. You can add whether a page template or section template.

To add the content from a template, first, you can create the template of the content you want to add first. In this post, we will show you to add the content from a template on the Switcher widget. We will add a section template in this example (you can also add a page template). Again, you can read our previous article if you are new to Elementor.

On the Elementor editor, specify a section you want to save as a template. Hover your mouse over the section handle, right-click and select Save as Template. Give your template a name and click the SAVE button.

Add the Switcher widget to the canvas area. Once added, go to the settings panel. On the Items block under the Content tab, set Content Type to Template and then select the template you have just created above from the Template dropdown menu.

You can follow the same steps to add the content from a template on the Classic Accordion and Tabs widget.

The Verdict: JetTabs Review

When implemented properly, collapsible content can offer a better experience for your visitors. This design trick allows you to display a long content into a more compact form, which can save some space. Elementor already has default widgets to allow you to add collapsible content. However, the content types you can add are limited to text. Crocoblock — via JetTabs — offers solutions that allow you to enrich your collapsible content by adding visual elements like icon, image, to video thanks to the ability to add the content from template. So, if you want to accomplish something like this, JetTabs can be a solution you can try.

JetTabs itself is released as a premium add-on. You can get is whether as a separate plugin (costs $15 per year) or in a set (along with other JetPlugins members).

How to Manage Form Submissions in Elementor without an Additional Plugin

The form builder of Elementor is getting better and better. Starting Elementor Pro version 3.2, you can manage your form submissions right from your WordPress dashboard without installing an additional plugin. Previously, you had to install Form Vibes to manage form submissions in Elementor. The new built-in form submission manager of Elementor allows you to view the form submissions, edit the content of a submission, and delete a submission. If you want to run a further processing over your form submissions using a more sophisticated tool (e.g., Microsoft Excel), you can export the form submissions into a CSV file as well.

The built-in form submission manager feature of Elementor is particularly useful if you often use the Form widget to add form to your page.

How to Use the Built-in Form Submission Manager of Elementor

Step 1: Set the Form Action to Collect Submissions

By the way, if you have never created a form in Elementor before, you can read our previous article to learn how to do so. To be able to manage the form submissions using the Elementor built-in form submission manager, you need to set the form action to Collect Submissions. Once you are done setting form fields, open the Actions After Submit block and select Collect Submissions.

That’s all.

When you set your form action to Collect Submissions, Elementor will send the submissions to the form submission manager whereby you can manage them. A little tip. To make it easy for you to identify your forms, you can add a name to your forms.

Step 1: Start Managing Your Form Submissions

Once your form has gone live and already have some submissions collected, you can start to manage them. To do so, you can go to Elementor -> Submissions. Select a form you want to manage the submissions of on the form column.

To view the details of a submission, you can simply hover over the submission and click the View link. To delete the submission, you can simply click the Trash link.

If you want to export the submissions into a CSV file for a further processing, you can simply click the Export Filtered to CSV button on the right side. Before clicking this button, you can select the submissions to be exported.

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.