If you are a business owner, then you probably know just how important it is to have great communication with your customers. First of all, it can help you get to know them better and prevent you from having to guess what their needs are. Second of all, it can aid you in figuring out what you need to work on as a business owner.
Luckily, communicating with customers can become much easier if you find the right tools to do so and determine what your customers expect from you in that regard. To make both of these tasks easier for you, we decided to share a list of tools and hacks that can help you communicate with your customers. Check it out!
Blogging is a great way to communicate with your customers and build a good reputation for your business. To do this, you need to create a blog with interesting content. Ideally, it should be located in a separate tab on your website.
On top of that, you should let your customers comment on your blog posts and treat your blog as a place where you can interact with them. You can create a comment section under your blog posts by adding high-quality WordPress plugins to your website.
Next, you should make sure that your blog is focused on the topics that are relevant to your business and your customers, as well as make sure that it contains posts that are both informative and well-written.
Lastly, you need to promote your blog in order for it to be successful. You can do that by sharing your blog posts on social media and asking your friends and followers to interact with them and share them.
Social media is one of the best ways to stay in touch with your customers and keep them updated when it comes to what is happening with your business. On top of that, it is quite easy to use. You just have to create a social media account for your business and start posting content that is both interesting and relevant.
However, do not try to be active on every social media platform out there. Instead, choose the one that is most frequently used by your target customers. For instance, if your business specializes in human resources, your target customers are probably really fond of LinkedIn.
Email marketing is a really effective way to communicate with your customers. First, you have to find a platform that you will then use to send your customers emails. There are many types of software out there that will help you make the process completely automated.
Next, you need to obtain the email addresses of your customers. You can encourage them to sign up for a monthly or weekly newsletter by telling them that they will receive discount codes or exclusive offers if they do.
Chat bots are computer programs designed to have conversations with human users over the Internet. Thanks to the fact that artificial intelligence is becoming more and more advanced, these robots have become incredibly realistic over the years. In some cases, your customers might not be able to tell whether they are talking to a robot or not.
Such bots can be used for many purposes. However, when it comes to businesses, the most common use they have is providing your customers with excellent customer service. Due to the fact that customer service is the basis of effective communication between businesses and customers, you should definitely consider investing in a chat bot!
If your business is constantly growing, you need to invest in high-quality customer support. It will help you communicate with your customers whenever they have problems with what you provided them with or want to tell you how you can improve the way your business operates. Considering this, it is an incredibly useful tool!
Ideally, you should hire an employee who specializes in customer support and who will be able to have a pleasant conversation with all kinds of customers. If you cannot afford it, you can always choose to get in touch with a company that specializes in outsourced customer service.
Start Communicating Better With Your Customers Today!
As you can see, there are many tools that you can use to communicate with your customers, ranging from social media platforms and newsletters to high-quality customer support and informative blog posts. Because of such a large selection of options, you should be able to find one that will fit the needs of your business best in no time.
However, keep in mind that when it comes to communicating with customers, the best tools and hacks out there that you can use are politeness and transparency. They are what makes your customers trust you. Remember that, and you should be able to see your relationship with customers improve and stay great for many years to come!
You have two options to create a page in Elementor. If you have your own concept about page design of the page you want to create, then you can create your page from scratch. If you are running out of idea or new to Elementor, you can create your page from a ready-made template. Elementor offers hundreds of ready-made templates which you can access via the template library by clicking the folder icon on the canvas area within the editor. To be able to use all the Elementor templates available on the template library you need to use Elementor Pro as some templates uses widget that are only available on Elementor Pro. Some Elementor add-ons also offers ready-made templates other than widgets. We have collected some of those add-ons. Here is the list.
1. Happy Addons
Happy Addons is an Elementor add-on that offers handy features to save you time in creating a website. One of which is template library that offers hundreds of ready-made templates. After installing and activating the Happy Addons plugin, you will have a new button on the canvas area of the Elementor editor. Clicking this button will open the Happy Addons template library where you can access the ready-made templates offered by Happy Addons. The templates are grouped into two categories: block templates and page templates. You can simply click the associated tab to discover the templates on each category.
Most templates offered by Happy Addons themselves use the Happy Addons widgets although you might also find some native Elementor widgets on some templates. Happy Addons itself is released as a freemium plugin and the template library feature is available on both versions. However, you need to use Happy Addons Pro to use all the templates on the template library.
Elementor Pro comes with a theme builder feature that you can use to create custom header, custom footer, custom single post, and other custom theme parts. JetThemeCore has the same functionality in which you can use it to create custom theme parts. In addition, it also comes with a template library where you can access hundreds of ready-made templates. Same as Happy Addons, the ready-made templates offered by JetThemeCore are also well-organized to make it easier for you to find a template you need. JetThemeCore offers the following template categories:
You can click the tabs on the top side to switch between categories. On the left panel, you can browse sub-categories to find more specific templates for a page. For instance, if you want to create a team member page on your website, you can browse the ready-made team member section templates on the TEAM MEMBERS sub-category.
JetThemeCore itself is one of the Elementor add-ons from Crocoblock. It is part of JetPlugins and only available in a set. There is no option to get it as a separate plugin. Since JetThemeCore is developed by Crocoblock, most templates offered by JetThemeCore uses the widgets from add-ons like JetElements, JetBlog, and other add-ons developed by Crocoblock.
Templately is a WordPress plugin developed by WPDeveloper, the developer of the most popular Elementor add-on Essential Addons. Unlike the first two add-ons above, Templately doesn’t specifically offer Elementor add-ons. Instead, it also offers Gutenberg templates. In the future, it might also offer templates for other theme builders like Brizy and Divi Builder as well. Templately is especially a great option if you are an agency as it offers Elementor template kits so that you can get a project done more quickly. Templately is a cloud-based plugin, meaning that you can store your templates to the cloud to be accessed from anywhere. To be able to use it, you need to create an account first.
Since Templately is developed by WPDeveloper (who also develops Essential Addons), you need to have Essential Addons installed and activated on your WordPress site. Most templates offered by Templately have dependency on Essential Addons.
4. Envato Elements
Envato Elements can also be a great solution to get Elementor template kits if you are an agency that handle lots of projects. It is a better solution than Templately if you want to get your project done using Elementor only. All templates offered by Envato Elements uses the native Elementor widgets so that you don’t need to install additional add-ons. At the time of writing (March 30, 2021), Envato Elements already has over 2,000 ready-made templates you can choose from. They are also well-organized. You can find an Elementor template kit by category. Before you install a certain template kit, you can preview it first.
Looking for Elementor section templates? Envato Elemensts also offers them. You can find ready-made section templates from a wide range of categories. From pricing section, team member section, hero section, footer section, header section, and so on. Envato Elements is available as a free plugin. If you want to install a pro template kit, you need to subscribe to one of the Envato Elements paid plans.
5. Mighty Addons
Mighty Addons is another add-on you can install if you are looking to enrich your Elementor template kit collections. The add-on also comes with a template library where you can access ready-made templates to streamline your workflow. At the time of writing, Mighty Addons already has 27 template kits which you can use to create projects like yoga site, travel site, construction site, and so on. With each template kit consists of 5 templates in average, there are over 130 templates offered by Mighty Addons in total. Not to mention section templates which are also available.
Time efficiency is sometimes crucial to a get a project done, especially if you are an agency. A page builder ecosystem — including Elementor — allows you to create a page from ready-made templates to allow you to get a project done more quickly rather than start everything from scratch. You can simply tailor the content after importing a template. Elementor offers hundreds of ready-made templates. If they are not enough, you can install an add-on that offers ready-made templates as we have just mentioned above. Envato Elements is the best option if you only want to use the native Elementor widgets.
When working with the Button element in Brizy, you can add a hover effect to make it more compelling. However, the hover effects offered by Brizy are limited compared to other page builders (e.g., Elementor and Divi Builder). In Brizy, you can only set a different background color, typography, and border on the hover state. There is no option to add an animation effect. If you really want to add hover animation to a button in Brizy, you can accomplish it using custom CSS. This article will show you how.
To be able to add custom CSS, you need to use the pro version of Brizy as this feature is only available on Brizy Pro.
How to Add Hover Animation to a Button in Brizy
If you are new to Brizy, you can read our previous article to learn how to use it. In this article, we will go straight to adding the Button element.
Start by adding the Button element by dragging it from the left panel to the canvas area.
Once the Button element is added, click it to open the settings bar. On the appearing settings bar, click the gear icon to open the settings panel.
On the settings panel, open the Advanced tab and scroll down to the Custom CSS section and paste the following code.
Every website needs a logo as the identity. In WordPress, you can add your site logo by via theme customizer (Appearance -> Customize) on the Site Identity block. In most cases, the site logo is added to the header area although you can also add it to any area to your liking. When creating a custom header in Brizy, you can add the site logo. However, the way of doing so might is a bit confusing for new users as Brizy offers no element dedicated to adding site logo.
Generally speaking, there are two options to add site logo in Brizy. The first option, you can use the Image element and simply upload the image of your site logo. You can use this option if you use the free version of Brizy. Since Brizy Free doesn’t allow you to create a custom header, you can only add your site logo on regular Brizy blocks. The second option to add site logo in Brizy also uses the Image element. The difference is that the site logo is pulled from your site logo (which you have set via theme customizer) instead of uploaded manually. This article will show you how add the site logo in Brizy using the second option.
How to add site logo in Brizy
In case you are new to Brizy, you can read our previous article to learn how to use Brizy. In this article, we will go straight to adding the Image element. We will add the site logo to the header block.
Note: You need to use Brizy Pro to be able to add a header block and dynamic content.
On the Brizy editor, click the plus button to add a new block. Click the Header block on the left panel and select a ready-made header block you want to use. As you can see, each header block template contains a site logo.
Once the block is added, click the existing logo (the Image element) to show to settings bar. On the appearing settings bar, click the Image tab.
On the appearing panel, click the database icon and select Site Logo.
Chances are, your site logo won’t appear on the Brizy editor after you set the image to Site Logo. Instead, all you see is the image holder. No worries, your logo will appear on the front-end so you can preview your page or publish it to preview the logo. To resize the logo, you can simply drag each side (top, bottom, left, right) of the Image element according to the size you want to set.
To add a link to your site logo, you can click the Link tab on the Image element settings bar. You can click the database icon to select a dynamic link (including your site URL).
When creating a custom header in Elementor, you can add the Search Form widget to provide a search form to make it easy for your visitors to find the content you need on your website. The Search Form widget uses the default search function of WordPress in which the results will be displayed in a separate page, the search results page. To offer your visitors a better experience, you might want to display the results instantly right upon the keyword typing. JetSearch allows you to accomplish it.
The theme builder feature of Elementor Pro actually allows you to create a custom search results page in which you can set the layout of the search results page yourself, as well as adding the elements to your liking. But again. You might want to offer a better experience by adding a live search on your WordPress site.
JetSearch: A Brief Intro
Being an open source software, Elementor has an open ecosystem, allowing third-party developers to join the ecosystem by developing add-ons. Crocoblock is a notable add-on developer in the Elementor ecosystem. It has been developing a number of premium Elementor add-ons. JetSearch is one of which.
JetSearch is an Elementor add-on designed specifically to add an AJAX-based live search. The add-on comes with a widget called Ajax Search which you can add to your custom header (or any area to your liking). When your visitors perform a search via the search form powered by the widget, they will find the search results are instantly displayed on the AJAX-powered popup, instead of being redirected to the search results page. Take a look at the screencast below.
More interestingly, JetSearch allows you to filter the displayed search results. For instance, you can exclude pages to set JetSearch to display blog posts or WooCommerce products only. Or if you have custom post type or custom fields on your WordPress site, you can also use them as the search parameter.
JetSearch is a paid add-on, part of JetPlugins. You can get it whether as a separate add-on or in a set.
JetSearch comes with an Elementor widget called Ajax Search. You can add the widget to any Elementor page or theme builder template. However, it is ideally added to the custom header template. If you want to add the Ajax Search widget to the custom header template, then you need to use Elementor Pro. Alternatively, you can use JetThemeCore (another add-on from Crocoblock) which also allows you to create custom header. In this article, we will show you to use JetSearch on Elementor Pro.
If you are new to Elementor and have no idea how to create a custom header using Elementor yet, you can read our previous article to learn how. In this article, we will go straight to adding the Ajax Search widget. Simply add the Ajax Search widget to the section of your custom header.
Once the widget is added, go to the Advanced tab on the settings panel and open the Positioning block. Set the Width to Inline (auto). This will make the Ajax Widget horizontally aligned with other widgets within the column.
Switch back to the Content tab on the settings panel and open the Search Form block to set the input icon, place holder, and submit button.
Next, open the Search Query block to make the filtering. You can click the Source field to select particular search areas. For instance, if you want JetSearch to search blog posts only, you can select Posts. To set JetSearch to search WooCommerce products, you can select Products. You can add multiple search areas.
For advanced filtering, you can also include/exclude content by certain terms (category, tag, or author). You can also set the number of posts per page as well as the number of results displayed on a single search query.
Next, you can open the Results Area block to customize the search results area. If you want to use a custom width for the search results area, you can set the Results Area Width option to Custom then set the width accordingly. From the same block, you can also set the results navigation, enable/disable certain components (product price, product rating, post thumbnail, and so on).
If you set custom fields on the search query, you can open the Custom Fields block to set the custom fields before and after the content.
To customize the error messages, you can open the Notifications block. There are two fields you can fill in here as you can see on the screenshot below.
Styling up the search
Once done making the basic settings on the Content tab, you can switch to the Style tab to style up the search. From this tab, you can customize the appearance of the search components. From the search form, submit button, typography settings, and so on. There are 10 blocks you can open here:
You can open this block to set the background of the search form, box shadow, border, and padding.
You can open this block to set the typography (font family, font size, font style, and so on) of the input text. You can also set the text color of the input text, the background of the input field, box shadow of the input field, and so on.
You can open this block to customize the submit button. You can set things like typography of the submit button text, submit button icon size and color, submit button background color, and so on.
You can open this block to customize the results area like the gap between the search form and the results area, background, border, box shadow, and so on.
You can open this block to customize the items on the results area. You can set things like the typography of the title and content (excerpt), text color of the title and content, background color of each item, and so on.
On the results area, right before the results items, you will see a note that displays the items found. The note says “n results”. You can open the Results Counter block to customize this part. You can set the typography, background color, text color.
All Results Button
All Results Button appears at the bottom side on the results area. Clicking this button will take you to the search results page of your WordPress site. You can also customize this part by opening the All Results Button block.
If you enable the navigation, you can open this block to customize it. You can set the background color, font size, text color, border color, and so on.
You can open this block to customize the error messages. You can set the typography, text color, alignment, and padding.
You can open this block to set the color of the loading bar.
The Bottom Line
Search is a crucial enough feature of a website. Elementor has a default widget that you can use to add a search form to a custom header or any part of your website. To enrich your visitors’ experience, adding an AJAX search can be a great idea. By far (until version 3.2), Elementor has no default widget to add an AJAX search. JetSearch offers a solution to fix the missing piece. With JetSearch, you have an Ajax Search widget that you can use to add an AJAX-based live search to your website. The ability to apply filtering on the search results area is what makes JetSearch worth to try. The query processing is also fast. JetSearch is the add-on you need if you want to add an AJAX search on your Elementor-powered WordPress site.
The theme builder feature of Elementor Pro allows you to create a custom header template to replace the default header template of your theme. You can add elements like navigation menu, site logo, search box, button, and social media icons to your custom header template. Want to add more elements? JetBlocks is the add-on you can install. With JetBlocks, you can add elements like shopping cart icon and authentication links.
If you have been long using Elementor, chances are you have heard about Crocoblock. It’s a notable Elementor add-on developer. JetBlocks is one of the products of Crocoblock. It is part of the JetPlugins family designed specifically to allow you to enrich your header content.
JetBlocks: A Brief Intro
JetBlocks, as mentioned above, is an Elementor add-on developed by Crocoblock. The add-on is designed specifically to allow you to add more elements to your custom header, other than the default elements offered by Elementor. If you have a WooCommerce-powered e-commerce website, for instance, you can add the shopping cart icon to your custom header to display the number of items that have been added to cart by your customers — as well as the total price. Or you can also add authentication links to make it easier for your users to login or logout from your website.
In addition, JetBlocks comes with widgets that you can use to both create a login page and registration page on your Elementor-powered WordPress site.
Being a part of JetPlugins, you can get JetBlocks in a set (along with other JetPlugins members like JetElements, JetEngine, JetWooBuilder, and so on). JetBlocks is also available as a separate add-on in case you don’t need other JetPlugins members.
After installing and activating JetBlocks, you will have nine new widgets on your Elementor, which you can find on the JetBlocks block.
If you don’t need certain widgets, you can disable them from the JetBlocks settings dashboard which you can access by going to Crocoblock -> JetPlugins from the main WordPress dashboard. Open the JetBlocks block and click Widgets & Extensions to see the JetBlocks widgets. Simply switch the toggle off to disable a widget.
Here are the widgets offered by JetBlocks:
You can use this widget to display the register link and the login link on the custom header or any area of your website. This widget is particularly useful if you use Elementor to create a membership website, e-commerce website or other website types that require user registration. To make the links look more appealing, you can also add the icons.
In addition to displaying the register link and login link, the widget also allows you to display My Account link. Clicking this link will redirect your users to the My Account page of WooCommerce.
If you rely on SEO to generate traffic to your website, then adding breadcrumbs is the tactic you can give a try. Breadcrumbs are crucial in terms of SEO as they allow search engines to better understand the link structure on your website (breadcrumbs also offer a better navigation for your site visitors). Elementor itself already has a Breadcrumbs widget, but only if you have Yoast active.
You can add the Breadcrumbs widget of JetBlocks on any page, not necessarily on the single post template. You can enable/disable elements like page title, prefix, and so on.
When creating a popup in Elementor, you can set the trigger to on-click to display the popup when a visitor clicks the button you specified. Thanks to this, you can use the popup builder of Elementor to create an off-canvas menu and full-screen menu. If you are looking for a simpler solution, then JetBlocks is one of the options you can use. The Hamburger Panel widget of JetBlocks allows you to create an off-canvas menu the simpler way. To add the content to the menu, you can use a template (Elementor template) so that you can add any element you like.
You can also use this widget to create a full screen menu by setting the panel width to 100 percent.
Elementor Pro comes with a widget — the Form widget — that you can use to create a custom login page on your WordPress site more effortlessly. The Login Form widget of JetBlocks does precisely the same job. Every element on the login form can be customized. From the username field, password field, login button, and so on.
You can use this widget to add your site logo to the custom header. If you use Elementor Pro, chances are you won’t use the widget as you need to upload the logo manually, instead of pulled from your existing logo on your website.
The pro version of Elementor comes with a widget called Nav Menu which you can use to add a navigation menu on your custom header. The Nav Menu (yes, the widget’s name is precisely the same as Elementor’s native Nav Menu widget) of JetBlocks does the same job whereby you can use it to add a navigation menu to your custom header.
Up until version 3.2, Elementor Pro has no widget to add a registration form yet. You can use the Form widget to create a user registration page with Elementor. However, it takes more effort as you need to add a new function to your WordPress site first. If you are looking for a simpler solution, JetBlocks offers it.
Just like the name suggests, the Registration Form widget of JetBlocks allows you to add a registration form to your page. No complex configurations needed. You just need to enable the registration option on your WordPress site and add the Registration Form widget to your registration page.
You can use this widget to add a search box to your custom header. This widget offers more behavior options than the native Search Form widget of Elementor. You can display the search form in a popup or full-screen overlay.
WooCommerce Shopping Cart
This widget is useful if you have a WooCommerce website powered by Elementor. You can use the widget to display the number of items that have been added to cart by your customers, as well as the total of price.
The Verdict – JetBlocks Review
JetBlocks is an Elementor add-on designed to add content to both custom header and custom footer. Other than basic elements like site logo, navigation menu, and search box, you can also use the add-on to add more advanced elements like authentication links and shopping cart icon, which is great if you have an e-commerce-powered website. The question is, do you really need JetBlocks? The question is especially reasonable if you use Elementor Pro as Elementor Pro already has widgets to add navigation menu and search box. If you need to create an off-canvas menu or full-screen menu, you can also do so by utilizing its popup builder.
Assuming you use Elementor Pro, there are only three JetBlocks widgets you are likely to use:
Shopping Cart Icon
The functions offered by other JetBlocks widgets can be handled by Elementor Pro widgets. If you don’t mind a bit hassle, you can even use the Form widget to create a registration page, so effectively there are only two JetBlocks widget you are likely to use.
The use of JetBlocks tends to worth it if you use JetThemeCore instead of Elementor Pro to create the custom header/custom footer for your website. Anyways, if you find JetBlocks is a good fit for your needs, then there will no sin to buy it.
The Motion Effects feature offered by Elementor Pro — which you can access from the Motion Effects block under the Advanced tab on the settings panel — allows you to add animation effects like scrolling effect and sticky effect. Another animation effect available on Elementor Pro is parallax. For certain website types, you might want to add particle effect as well. Unfortunately, Elementor has no built-in feature to add this sort of animation effect. To accomplish it, you can use JetTricks.
JetTricks is one of the premium Elementor add-ons from Crocblock. It is designed specifically to extend the animation effect options you can add to an Elementor page (or theme builder template). You can use JetTricks for a project that requires you to add animation effects that Elementor doesn’t offer like particle effect or tooltip. Read on to learn more about the add-on.
JetTricks: In a Nutshell
JetTricks is a part JetPlugins, a set of premium Elementor add-ons developed by Crocoblock. As just said above, you can use it if you have a project whereby you need to add animation effects that cannot be handled by Elementor. You can get JetTricks whether as a separate add-on or in a set (along with other JetPlugins members). You can get JetTricks at $19 per year (separate plugin).
JetTricks doesn’t require Elementor Pro, meaning that you can use it on Elementor Free. JetTricks can also be a solution if you want to add some animation effects, yet still have a doubt to upgrade to Elementor Pro (or simply don’t need features other than its Motion Effects).
JetTricks allows you to:
Add particle effect to an Elementor section.
Add parallax effect to an Elementor section
Add tooltip to an Elementor widget
Add sticky effect to an Elementor column
Add image hotspots
Add folded content
If you don’t need certain features (or) widget, JetTricks allows you to disable them. You can enable/disable the JeTricks features by going to Crocoblock -> JetPlugins Settings on your WordPress dashboard. Open the JetTricks block and click Widgets & Extensions and disable the features/widgets you don’t need.
How to Use JetTricks
After installing and activating the JetTricks plugin, you will see three new Elementor widgets: Hotspots, Unfold, and Read More. In addition, you will also find a new settings block called JetTricks under the Advanced tab on the settings panel. Here are the key things you can do with JetTricks
Adding Particle Effect
This is one of the key features offered by JetTricks. You can add a particle effect on the background of an Elementor section. To do so, first, click the section handle you want to add the particle effect to. Go to the Advanced tab and open the JeTricks tab. Switch the Enable Particles toggle on.
Click the Here! link beneath the Particle JSON field and you will be redirected to a page where you can configure the particle effect.
Once done configuring the particle effect, export/download the configuration and paste the JSON code to the Particle JSON field.
If the JSON code generated by this page doesn’t work, you can use this page as an alternative.
Adding Parallax Effect
While Elementor Pro allows you to add a parallax effect to the background of a section, JetTricks allows you to add a parallax effect to a widget. To do so, specify an Elementor widget you want to add the parallax effect to and click its handle.
Go to the Advanced block and open the JetTricks block. Switch the Use Parallax toggle on. You can then set the necessary settings like parallax effect and visibility.
There are varied use cases of tooltip. For instance, you can use a tooltip to add a brief description about a feature on your website. Another example, you can use a tooltip to display a brief description about a certain element on your page as shown below.
JetTricks allows you to add a tooltip to an Elementor widget. To add a tooltip to a widget, first, specify the widget you want to add the tooltip to and click its handle. Go to the Advanced tab and open the JetTricks block. Switch the Use Tooltip toggle on. Add the description and set the necessary settings. To style up the tooltip, you can open the STYLE tab within the tooltip editor on the settings panel.
Adding Sticky Effect to an Elementor Column
Elementor has no built-in setting option to allow you to add sticky effect to a column. You can only add sticky effect to a widget and section. JetTricks makes it possible for you to add a sticky effect. To do so, simply specify the column you want to add the sticky effect to and click its handle.
Go to the Advanced tab and open the JetTricks block and switch the Sticky Column toggle on. Set the spacing as well as the visibility.
Adding Image Hotspots
The way hotspot works is pretty similar to tooltip. More specifically, you can use it to explain certain parts of an image. Take a look at the screencast below.
To add hotspots to an image, first, add the Hotspots widget to the canvas area. Select an image you want to add the hotspots to.
Open the Hotspots block to add a hotspot item. Add the content of the hotspot on the Description field. To change the default icon, you can simply click the plus icon on the Icon option. To set the position of the hotspot, you can click the POSITION tab on the hotspot content editor.
Once done making the basic settings, you can go to the Style tab to style up the hotspot.
Adding Folded Content
Elementor has two widgets — Toggle and Accordion — to display long content into a more compact form, which is great to save space on a page. However, the content type you can add is limited to text. JetTricks offers a widget — the Unfold widget — that you can use to accomplish the similar thing, but you can add more content types instead of just text. The Unfold widget of JetTricks allows you to add content from an Elementor template.
To add a folded content using the Unfold widget, simply add the Unfold widget to the canvas area.
Once the widget is added, you can open the Content block under the Content tab. To add the content from a template, you can click the Template tab on the Content Type option.
You can open the Settings block and the Button block under the Content tab to make the basic settings. To style up the folded content, you can go to the Style tab.
The Verdict – JetTricks Review
It appears to be the marketing strategy of Crocoblock to offering different Elementor add-ons for different uses and purposes. For instance, it offers JetWooBuilder to create an e-commerce website with Elementor+WooCommerce. It also offers JetMenu that is specifically aimed at creating mega menu. As we have explained above, JetTricks is an Elementor add-on designed specifically to enrich the animation options you can add to your page. JetTricks is functionally good enough, but the offered customization settings are too basic in some ways. For instance, it even offers no option to configure the particle effect at all. As a comparison, Happy Addons offers options to set the number of particles, particle size, particle color, and so on right from the settings panel of Elementor.
JetTricks tends to be ideal as a complement of Elementor Pro or other JetPlugins members (e.g, JetElements). If you need its parallax and hotspot features, there is Happy Addons or Essential Addons as a better alternative, which offers more features and widgets. If you buy JetTricks in a set instead of a separate add-on, then it will be a different story.
Starting a health and fitness blog or website can be overwhelming at the start. But once you find your bearings, you’ll see that it’s not only easy but also quite a rewarding venture.
Websites are effective advertising tools that can attract new customers to your business. It also helps prospective business partners get to know your services. Therefore, you want to optimize your website and make it as user-friendly as possible.
One great way to achieve that is through the use of plugins — these are software that you can attach to your website to extend its functionality or add new and attractive features to your layout.
There is no shortage of WordPress plugins for you to use on your health and fitness website. But with such an immense amount of choices available, it can be difficult to determine which would benefit your website best.
Here’s a list of 5 essential WordPress plugins for your health and fitness website to help you make the best choice possible for your business.
5 Best WP Plugins for Your Health and Fitness Website
1. CC BMI Calculator
Your body mass index (BMI) is the measurement of your body fat based on your height and weight. It’s used to help treat diseases that are associated with being overweight or underweight. It also gives you an idea of what your target weight should be when you’re trying to lose a few pounds.
The CC BMI Calculator WP plugin allows you to easily customize your BMI calculator to your liking. You can change its size, color, shape, borders, texts, weight and measurement system, and background.
2. Weight Tracker
According to studies, people who monitor their progress lose two times more weight than those who don’t.
Weight Tracker is an easy-to-use plugin that allows users to keep track of their body measurements and weight. Data is presented in various forms, such as charts and tables. And it allows users to set targets and goals, making it easier for them to plan routines to get the best results.
3. Calorie Calculator
Calories are what give our bodies energy to function. But consuming too much can lead to unwanted weight gain and, in some cases, severe consequences and injuries.
The best way to lose extra pounds is through a proper diet and good exercise. And to do that, you’ll need help determining how much exercise and how many calories you need to consume/burn each day to reach your goal weight.
Calorie Calculator helps users estimate the specific amount of calories they need to consume each day. It also provides you with simple guidelines to follow if you want to lose or gain weight. Details for how much exercise you’ll need to burn a certain amount of calories can also be found in its report.
4. WordPress Gym Management System (WPGYM)
If you’re running a gym or fitness center, you’ll need a management system for your website to handle member, visitor, trainer, accountant, and admin information.
WPGYM makes it easier for members to book classes at your gym and keep track of their daily workout logs and nutrition plans. It also gives them a secure platform to conduct transactions such as purchasing merchandise and memberships.
This would be a great plugin to use on a gym or fitness website’s homepage.
5. Timetable Schedule
It’s easy to forget about things that we don’t normally do in our day-to-day life. Timetable is a great plugin that helps you keep track of all essential activities, such as gym classes, work schedules, meetings, meal plans, class schedules, events — whatever you need to remember.
The Bottom Line
Plugins add more functionality to your website and can make user experiences much more memorable and convenient. When it comes to choosing the best ones, it’s important that you know what you’re looking for.
Analyze your website and see if there are any aspects of it that you find need improving. From there, you can determine which plugin you should add to your system.
One of the features you can unlock after upgrading to Elementor Pro is the ability to add animation effects like parallax and sticky effect. Still, these are not enough for some users. For some certain projects, they want to add more advanced animation effects like particle affect. Elementor itself has no built-in feature to add this sort of animation effect. To accomplish it, you can install an add-on like JetTricks and Happy Addons. This post will show you how the best Elementor add-ons that you can use to add particle effect.
Here are three of the Elementor add-ons that you can use to add particle effect to your page.
1. Happy Addons
The first Elementor add-on we recommend for adding particle effect is Happy Addons. It is arguably the best add-on to handle the job. The reason is nothing, but Happy Addons offers many options to control the particle effect. First, you can set the particle style. There are three particle styles offered by Happy Addons: NASA, snow, and polygon. Or if you want to use a custom particle style, Happy Addons allows you to customize via the particle on this page and then download the JSON code.
Happy Addons allows you to control the particle color, opacity, number of particles, particle size and the animation speed in case you want to customize the particle effect from the Elementor editor.
To be able to add particle effect using Happy Addons, you need upgrade to the pro version as the feature to add particle effect is only available on Happy Addons Pro.
2. Essential Addons
Particle effect is one of the features offered by Essential Addons Pro. Compared to Happy Addons, the options to control the particle are fewer. You can only select the particle type (there are four particle styles you can choose from). There are no options to set the particle color, particle size, or animation speed. If you want to have more controls to customize the particle, you can visit this page instead and paste the JSON code.
JetTricks is another add-on you can use to add particle effect to Elementor. Unlike the two add-ons above, JetTricks offers no option to customize the particle from the Elementor editor. You can only customize the particle yourself. JetTricks provides a link that refers to a page where you can configure the particle effect. If the code you generated from the provided page doesn’t work, you can configure the particle from the particle.js page instead.
JetTricks itself is one of the Elementor add-ons from Crocoblock which is designed specifically to add animation effects to Elementor. In addition to adding particle effect, the add-on also allows you to add parallax effect, tooltip, and hotspot.
Brizy is a WordPress page builder plugin that has enormous potential. It comes with a light editor that offers a great live editing experience. While you can use it for free, upgrading to the pro version allows you to unlock all features, including theme builder which allows you to create your own WordPress theme without coding. This article will explain more about Brizy Theme Builder. Read on.
Theme builder emerged following the page builder trend in the WordPress community with the last years. In most cases, theme builder is available as a part of the premium features offered by a theme builder. A theme builder allows you to create custom templates to replace the default templates of your theme. To learn more about what are the default templates of a theme, you can refer to this page. To give you an overview, here are some examples of the template files of a WordPress theme.
Brizy Theme Builder: A Little Intro
Theme Builder is one of the features you can unlock after upgrading to Brizy Pro. The feature, as mentioned above, allows you to create custom templates to replace the default templates of your theme. You can create the custom templates using the visual editor of Brizy. No need to deal with code. You just need to set the layout (you have blocks and columns to set the layout) and add the elements you need (or want) and make the settings and the stylings accordingly.
Brizy itself is a generic page builder. Meaning that it is not designed or optimized for a specific WordPress theme. By utilizing Brizy Theme Builder, you can customize every single part of your theme, in a visual way. Rather than using a paid WordPress theme, using Brizy Theme Builder offers more customization options. You can use any color on each element, typography setting, and behavior. You can also custom fields to your template.
How Brizy Theme Builder Works
The way Brizy Theme Builder works is not different from other theme builders like Elementor Theme Builder and Divi Theme Builder. It allows you to customize every single part of your WordPress theme by creating a template for each part (e.g., single post template). The custom templates you created with Brizy Theme Builder will then replace the default templates of your theme.
Say you have created a custom single post template using Brizy Theme Builder. The custom template will replace the default single post template of your theme (single.php in most cases) to display your blog posts. Brizy Theme Builder supports display conditions, allowing you to assign a custom template to specific areas with certain parameters. For instance, you can create a custom single post template and assign it to posts under certain categories, post with certain tags or post written by certain authors. Brizy Theme Builder allows you to create custom templates for the following theme parts:
Search results page
There are no options to create either a header template or footer template. Brizy Theme Builder is a bit different in this part. Instead of allowing you to create custom header templates and custom footer templates, Brizy offers exclusive blocks dedicated to creating a custom header and a custom footer. You can also set specific areas where a custom header/footer to be applied thanks to block condition feature.
How to Use Brizy Theme Builder
In case you are new to Brizy, you can read our previous article to learn how to use Brizy.
How to Create a Custom Header/Footer in Brizy
As we mentioned above, Brizy comes with two exclusive blocks dedicated to creating custom headers and custom footers. You can add these blocks on when working on a page or page builder template in Brizy. In this post, we will demonstrate how to create a custom header (you can follow the same steps to create a custom footer).
First, edit your page with Brizy. On the Brizy editor, click the plus button on the canvas area to add a new block. Select the Header block on the left panel. Select a header template you like.
Once the header block is added, move it to the top. You can do so using the block navigator feature on the left panel.
If you want to add elements, you can simply add ones you want from the left panel by clicking the plus button on the top side. Some key elements you can add to your header are:
One of the perks of creating a custom header using Brizy is that you can add a mega menu without installing an additional plugin. You can read our previous article to learn more about how to create a mega menu in Brizy.
To streamline your workflow, you can set the header block as a global block and then set display conditions. By adding display conditions to the header block, you don’t need to edit every single page you want to add the custom header to. Instead, the custom header (header block) will appear on the pages according to the display conditions you specified. You can read this article to learn more about this.
To set the header block as a global block, hover your mouse over the header block and click the mixer icon to open the settings bar. On the appearing settings bar, click the Menu icon and enable the Make it Global option.
After the Make it Global option is enabled, you will see a Display Conditions link. Click the link to set the display conditions. On the appearing window, you can click Add new display condition to add a new display condition (you can add multiple display conditions). Once done setting the display conditions, click the Save button to apply the changes and click the X icon to close the window.
Once done editing the header block — as well as other blocks on your page, you can publish/update your page.
You can read this article for more detailed instructions on how to create a custom header in Brizy. You can also read this article to learn how to create a custom footer in Brizy.
How to Create a Custom Template in Brizy
There are six WordPress theme parts you can create the custom templates of using Brizy Theme Builder. They are single post, category pages, tag pages, author pages, search results page, and 404 error page. You can create a custom template for these parts from the same route.
First, go to Brizy -> Templates on your WordPress dashboard. Click the Add New button to create a new template.
Give your template a name and set the display conditions on the Display Conditions block. Once done setting the display conditions, click the Publish button to publish your template. Next, you can click the Edit with Brizy button to edit the template using the Brizy editor.
On the Brizy editor, you can edit the template. You can set your own layout, add the elements you like, and so on. Once done editing the template, you can click the Update button on the bottom-right corner to apply the changes.
The Verdict: Brizy Theme Builder Review
Theme builder is one of the features offered by Brizy Pro. The feature allows you to create custom templates to replace the default templates of your theme. You don’t need to have programming skills to create custom templates or custom headers/footers using Brizy Theme Builder. Instead, you can do so using the visual editor of Brizy, which offers a great live editing experience.
Rather than using a paid WordPress theme, using Brizy Theme Builder is a better option if you want to have more controls to customize your theme parts (header, footer, single post, archive pages, and so on).
Some key perks of using Brizy Theme Builder are:
You have a full control to set the layouts of your templates.
You can have multiple layouts for the same theme part thanks to the display condition support.
You can add any element you need or want. Brizy has over 50 elements in total.
You have a full control to style up every element. From the color to typography.
You can set certain behavior for a certain theme part thanks to custom CSS and custom code support. Some behaviors (like sticky header) are already available.
No need to install additional plugins to add an email subscription form, slider, map, YouTube playlist, and more.
No need to install an additional plugin to create a mega menu.
You can display custom fields data. Brizy supports popular custom field plugin like Pods, ACF, Toolset, and Meta Box.
You can create a template to display the content of a custom post type.
One of the things we complain about the Brizy Theme Builder is the custom/footer creation experience. Instead of offering exclusive blocks, it would better to be able to create a custom header/footer via a custom template just like other theme parts. It would be even better if Brizy offered a centralized place to manage the templates in a more visual way.
Some cons of Brizy Theme Builder:
The creation of custom header and footer is a bit hassle.
No feature to export/import theme builder templates.
No ready-made theme builder templates are available.
The WooCommerce Builder of Elementor Pro has made it easier for you to customize the appearance of your WooCommerce-powered e-commerce website. However, not all WooCommerce parts can be customized. JetWooBuilder offers comprehensive solution to allow you to customize every single part of your WooCommerce. It makes use of the Elementor visual editor, allowing those who have no coding skills to create a completely unique, beautiful e-commerce site.
The interface of the editor is one of the reasons why many WordPress users love to create a website using Elementor. It offers an excellent experience to create a website in a visual way without dealing with code at all. With the pro version, you can customize your WooCommerce site by creating custom templates just like you can do with the regular WordPress sites. However, you can only create the templates for the following WooCommerce parts:
Single product page
Meanwhile, WooCommerce has four other main parts:
Customer account page
JetWooBuilder, as we said above, allows you to customize every single part of WooCommerce by creating a custom template for each part.
What is JetWooBuilder?
JetWooBuilder is an Elementor add-on from Crocoblock. It is designed specifically to create an e-commerce website with WooCommerce+Elementor. WooCommerce, as you have known, is the most popular WordPress plugin to add e-commerce functionality to your WordPress site. You can use it whether to sell physical products or digital products. In general, WooCommerce consists of the following parts:
Single product page
Product category pages
Product tag pages
Customer account page
The appearance of each part/page is varied depending on the WordPress theme you use. If you use Elementor Pro, you can create the custom templates (using Elementor visual editor, of course) to replace the default templates of WooCommerce. Again, you can only create the custom templates for the shop page, single product page, product category pages, and product tag pages.
With JetWooBuilder, you can create custom templates for all the WooCommerce parts, without exception. If you are a huge fan of Elementor and have a new project to create an e-commerce website and plan to use WooCommerce, then JetWooBuilder is a perfect solution. JetWooBuilder doesn’t require Elementor Pro although it would be great to combine both Elementor Pro and JetWooBuilder for your project.
How JetWooBuilder Helps You Customize Your WooCommerce Store
As said above, JetWooBuilder allows you to customize the WooCommerce parts by creating custom templates for those parts. The custom templates you created with JetWooBuilder will then replace the default templates of WooCommerce. JetWooBuilder offers over 60 Elementor in total which you can use to create each template.
By the way, you can find the templates that control the layout of WooCommerce parts from the templates folder under the wocommerce folder (full path: wp-content/plugins/woocommerce/templates).
Here are the WooCommerce parts you can create the custom templates of, using JetWooBuilder:
1. Shop Page
After installing and activating the WooCommerce plugin on your WordPress site, you will automatically have a new page on your website, which you can access by going to yoursite.com/shop. The page displays all your WooCommerce products and classified as one of the archive pages on the WooCommerce structure. There are 8 widgets you can use to create a custome shop page template:
Products Page Title
Products Results Count
To streamline your workflow, JetWooBuilder offers 4 ready-made shop page templates you can choose from.
2. Single Product Page
When you click a certain product on an archive product page (be it the shop page, product category page, or product tag page), you will be directed to the detailed page of the associated product (the single product page). The appearance of the single product page is controlled by a template file called single-product.php. JetWooBuilder allows you to create a custom template to replace the default template. You have the following widgets to create the custom single product page template:
Single Add to Cart
Single Related Products
Single Reviews Form
Single Sale Badge
To save you time in creating the custom template for the single product page, there are 8 ready-made templates you can choose from.
3. Product Categories and Tags
Just like WordPress blog posts, you can also assign a WooCommerce product to a category or more. In addition, you can also add tags. WooCommerce has default templates to control the layout of the product category pages and tags. If you want to create custom templates to replace them, JetWooBuilder allows you to do so. You can use the following widgets to create a custom product category/tag page template:
4. Cart Page
Just like on other platforms, WooCommerce also displays all items you want to buy on the cart page before you make the purchase. JetWooBuilder allows you to create a custom template for your WooCommerce cart page. You can add the following widgets when creating the custom cart template:
Cart Cross Sells
Cart Empty Message
Cart Return To Shop
5. Checkout Page
Checkout page displays the required information customers need to provide before they can proceed to the payment. Some information they need to provide are billing address, shipping address, payment option, and so on. JetWooBuilder also allows you to create custom template for WooCommerce checkout page. You can use the following widgets when creating a custom checkout page template:
Checkout Additional Form
Checkout Billing Form
Checkout Coupon Form
Checkout Login Form
Checkout Order Review
Checkout Shipping Form
6. Customer Account Page
In the WooCommerce system, the My account page is a page where your customers can view recent orders, manage shipping and billing addresses, and manage the login details (username and password). The page is automatically created during the installation process of WooCommerce. It is technically a regular WordPress page that contains a WooCommerce shortcode. You can find the My account page by going to Pages -> All Pages on your WordPress dashboard. If you want to create a custom template for this page, JetWooBuilder also makes it possible.
You have the following widgets to create a custom template for the My account page.
My Account Details
My Account Addresses
My Account Content
My Account Dashboard
My Account Downloads
My Account Login Form
My Account Logout
My Account Order
My Account Registration Form
7. Thank You Page
After your customers have completed the entire buying processes (including the payment), they will be redirected to a thank you page of WooCommerce. JetWooBuilder also allows you to create a custom template for the thank you page. You can use the following widgets to create the custom template for the thank you page:
Thank You Customer Address Details
Thank You Order Details
Thank You Order
How to Use JetWooBuilder
If you are already familiar with Elementor then creating a custom WooCommerce template should not a grave issue. After creating a custom template, you can then apply it to WooCommerce.
Once the JetWooBuilder plugin is installed and activated on your WordPress site, you will see a new menu called Crocoblock on the dashboard area. On this menu, you will also see a sub-menu called Woo Page Builder.
Creating a Custom Template
You can create all WooCommerce custom templates from the same route. First, you can go to Crocoblock -> Woo Page Builder on your WordPress dashboard. Click the Add New Template button and specify which part the template is created for. Give your template a name and click the Create Template button to start creating the template.
You will be directed to the Elementor editor after clicking the Create Template button above, where you can create the template. Once done, you can click the PUBLISH button to publish the template.
Applying a Template
Once done creating a template, you can switch back to the WordPress dashboard. To apply the custom template you have just created, you can go to WooCommerce -> Settings. Click the JetWooBuilder tab. Select a WooCommerce part you want to set the custom template to and enable the option. Select an existing custom template you have created. For instance, if you want to set a custom template to the single product page, you can enable the Enable custom single product option on the Single Product block and select the custom template from the Single Product Template dropdown menu.
Scroll the bottom and click the Save Changes button to apply the changes. For more detailed instructions on how to use JetWooBuilder, you can read our previous article.
JetWooBuilder is part of JetPlugins, a set of premium Elementor add-ons from Crocoblock. You can get it as separate plugin or in a set. If you want to get JetWooBuilder as a separate plugin, you only need to pay $24 per year (for a single site). If you want to get it in a set, you need to spend $130 per year. The Elementor add-ons included in the set are:
If you don’t like the subscription-based payment option, there is also an option to get JetWooBuilder with a one-time purchase option.
The Verdict: JetWooBuilder Review
So far, the WooCommerce Builder of Elementor Pro only allows you to create custom templates for single product page, shop page, product category pages, and product tag pages. Crococlock offers a solution — the JetWooBuilder — to allow you to create custom templates for all WooCommerce parts. You can use JetWooBuilder to create custom templates for the following WooCommerce pats:
Product category pages
Product tag pages
Thank you page
Customer account page
With JetWooBuilder you have more controls to set the layouts as well as the stylings of your e-commerce site. The use of the Elementor visual editor to customize WooCommerce is a great idea from Crocoblock. You can set what elements to be displayed on a certain part, as well as the placement and the stylings (color, typography, and so on). JetWooBuilder is a great tool to create a WooCommerce website with Elementor. It is arguably the best Elementor add-on for WooCommerce.
Recently, Elementor has just released the newest version of the pro version: Elementor Pro 3.2, which added three new features. One of which is the PayPal Button widget which you can use to add a PayPal button to a page without needing to install an additional WordPress plugin anymore. The widget is particularly useful if you often use Elementor to create landing pages for your campaigns. You can now add a PayPal button to your landing pages whether to accept donations or payments.
PayPal itself is the most popular payment service widely adopted by e-commerce sites around the globe. The ability to add a PayPal button — without installing an additional WordPress plugin — definitely makes Elementor one step ahead of other competitors.
How to Add a PayPal Button in Elementor
First and foremost, make sure you have upgraded your Elementor to the pro version if you haven’t done so as the PayPal Button widget is only available on the pro version. If you have used Elementor Pro already, update to the version 3.2 to be able to use the PayPal Button widget. The widget supports three transaction types:
One of the interesting things is that you can set a redirect URL after your visitors successfully made the payment. Thanks to this, you can directly sell something without installing WooCommerce or other e-commerce plugins.
To start adding a PayPal button in Elementor, first, edit the page you want to add the PayPal button to with Elementor. If you are new to Elementor, you can read our previous article to learn how to use Elementor. On the Elementor editor, add the PayPal Button widget to the canvas area.
Once the widget is added, you can go to the settings panel to make the settings. First, you can open the Pricing & Payments block under the Content tab. On the PayPal Account field, you can add the email address of your PayPal account. Select the transaction you want to accept on the Transaction Type option. On the Item Name, you can add the item you want to offer (e.g., charity donation). Fill out other fields accordingly (SKU, price, currency, quantity, shipping price, and tax).
Once done making the necessary settings, you can open the Button block to set the basic settings for the button. You can add the button text on the Text field, set the alignment on the Alignment option, set the icon (in case you want to use a custom icon) on the Icon option, and set the icon position on the Icon Position option.
Next, you can open the Additional Options block. From this block, you can add a redirect URL, enable the sandbox, and set a custom message.
Styling Up the PayPal Button
Once you are done making the necessary settings on the Content tab, you can switch to the Style tab to style up your PayPal button. There are two setting blocks you can open here:
You can open this block to set the typography (font family, font size, font style, and so on) of the button text, set button text color, set the button background color, set the button border radius, and set the box shadow.
You can open this block to set the typography as well as the text color of the messages.
Update/publish your page once you are done editing it.
The Bottom Line
PayPal is a global payment service widely used by many e-commerce sites. The Elementor decision to provide the PayPal Button widget — which allows you to accept PayPal payment more effortlessly — is great. The widget will be extremely useful if you often create landing pages with Elementor as you can now add a PayPal button to accept payment without needing to make the complex settings.