How to Create an Off-Canvas Menu in Brizy

Menu is a vital element of a website. Without a menu, your visitors will find an issue to learn what you want to offer them via your website. To impress your visitors, you can display your site menu in a unique, stylish way. One of which is that you can display your site menu in an off-canvas style. In the context of website, an off-canvas menu refers to a behavior where the menu appears on the left side or on the right side after a visitor clicks the menu button. Here is an example of an off-canvas menu.

In WordPress, there are a bunch of plugins that you can use to create a menu behavior like the one above. Such as JetMenu (Elementor only), Groovy Mega Menu, Max Mega Menu, and so on. If you use Brizy to create your WordPress-based website, you don’t need to install a new plugin to create an off-canvas menu on your website. Brizy indeed has no specific feature dedicated to creating an off-canvas menu, but with a little creativity, you can use its popup builder feature to achieve such a thing. In addition, you can also use the Brizy popup builder to create a full-screen menu.

How to Create an Off-Canvas Menu in Brizy

The process of off-canvas menu creation in Brizy involves two steps. First, you need to create the popup in which you will use it as the off-canvas menu. Once the popup is created, you can call it using a button, icon, or text, according to your preference.

Step 1: Create the popup

The popup builder of Brizy supports several trigger types. One of which is on-click. You can make use of this trigger type to create the off-canvas menu. The idea is, you create the popup and set the trigger type to on-click. You can then call the popup via a button, icon, text, or any Brizy element that has an option to add a link.

One thing. The popup builder feature is only available on the pro version of Brizy so that you need to upgrade your Brizy to the pro version in case you haven’t done so.

To start creating a popup in Brizy, go to Brizy -> Popups on your WordPress dashboard. Click the Add New button to create a new popup.

Give your popup a name and click the Publish button, followed by the Edit with Brizy button to edit the popup using the Brizy editor.

Click the plus button on the canvas area. On the appearing library window, simply click the Create your own option since Brizy has no premade popup template dedicated to of-canvas menu.

Before adding any content to your popup, you can change the background first. To do so, hover your mouse over the popup and click the grey arrow icon. On the appearing settings bar, click the Colors tab and select the color you like.

If you want to change the border radius (corner), you can click the gear icon on the settings bar and click More settings. The option to set the border radius lies at the bottom side on the appearing settings panel.

Next, you can set the align of the popup. Since you want to create an off-canvas menu, you can set the align to left or right. To do so, click the mixer icon on the upper-right corner and click the Align tab on the appearing settings bar.

Next, you can set the position as well as the size and color of the close button. To do so, click the X icon on the canvas area. You can set the close button size from the Icon tab on the appearing settings bar. To set the color, you can click the Colors tab. To set the size, you can click the two remaining tabs.

Next, you can set the size of the popup. To do so, click the mixer icon. On the appearing bar, click the gear icon. Set the width on the Width option and the height on the Height option. Since you want to use this popup as the off-canvas menu, we suggest you set the Height to Full Height. You can then set the content alignment on the Content option.

Next, you might want to change the overlay color. To do so, click the mixer icon once again to open the settings bar. You can set the overlay color on the Colors tab. If you want to disable the overlay, you can simply set the color opacity to 0%.

You can now add the content to your popup. You can add elements like menu, contact form, posts, and even custom fields if you want it. If you are new to Brizy, you can read our previous article to learn how to use Brizy.

Once you are done adding and editing the content of your popup, click the mixer icon followed by the Popup tab on the appearing bar. Click Display Conditions to set the display conditions and the trigger.

On the TRIGGERS tab, set the trigger to On Click. If you want to set the display conditions, you can go to the CONDITIONS tab. By default, the display condition is set to All. If you want your menu to be able to be loaded on the entire site, no need to change the display condition. Click the Save button to apply the change.

Click the mixer icon once again to open settings bar and click the heart icon to save your popup to your Brizy library.

Lastly, click the Update button on the bottom-right corner to update your popup.

Step 2: Call the popup

As we mentioned earlier, you can call the popup using any Brizy element that has an option to add a link. In this example, we will use the Icon element (we will use the hamburger icon). You can actually call the popup from anywhere, but since the menu icon usually lies on the header, we will add the icon on the header. You can read our previous article to learn how to create a custom header in Brizy. In this example, we will go straight to adding the Icon element to the header. Simply drag the Icon element to the header block.

To change the icon, you can click the icon to open the settings bar. On the appearing settings bar, click the star icon. You can select the icon by clicking the icon selector on the Icon option. You can also set the icon size on the option beneath it.

To set the color, you can click the Colors tab on the settings bar.

To call the popup you have just created above, you can click the Link tab on the settings bar. Click the Popup tab followed by the popup selector to open the Brizy library. On the Brizy library click the Saved tab and select the popup you have just created.

Finally, click the Update button on the bottom-right corner to update your header.

That’s it. You have just successfully created an off-canvas menu on your WordPress using Brizy.

How to Add a Parallax Background in Divi Builder

Parallax effect is often used by website owners to make their websites look more appealing. Most WordPress page builder plugins, including Divi Builder, have a default feature to add a parallax effect so that you don’t need to install an extra plugin to add one. In this post, we will show you how to add a parallax background on your WordPress site using Divi Builder.

Divi Builder, as you might have known, is a popular page builder developed by Elegant Themes which you can install on any WordPress theme. It allows you to add a parallax effect to any element. Be it a section, column, or module.

In case you have no idea yet about what the parallax effect is. In the context of web design, the parallax effect refers to a behavior where the background moves at a slower pace than foreground. Here is an example of the parallax effect.

How to Add a Parallax Background in Divi Builder

One thing you need to know before we get started. There are two parallax effect types offered by Divi Builder:

  • True Parallax: Just like the name suggests, this style creates a slightly slower scrolling movement of the background than the other elements on the page as we mentioned above.
  • CSS: This style creates a fix background image in place while the foreground elements scroll normally.

To add a parallax background in Divi Builder, first, edit the element (section, column, or module) you want to add the parallax background to by clicking the gear icon which appears when you hover your mouse over the associated element.

On the appearing settings panel, open the Background block under the Content tab. Click the Image tab and select an image you want to use as the background. Once your image is uploaded, enable the Use Parallax Effect option and then select the style you like on the Parallax Method dropdown. Don’t forget to click the green checklist icon to apply the change.

That’s it. Once you are done editing your page/theme builder template, you can publish/edit your page.

WordPress Theme vs Theme Builder: What Are the Differences?

Being an open and popular CMS, WordPress has a relatively more rapid development compared to other similar tools. One of the recent trends in the WordPress industry is theme builder, which comes as a solution for those who want to create a completely unique, customized WordPress-based site yet have no adequate PHP and CSS skills to create a theme.

You might be wondering, what is a theme builder? Does it different to a WordPress theme.

First thing first. You still need a theme on your WordPress site as it is a required component of the WordPress system. But with a theme builder, you can use any theme to add certain features or apply certain stylings. Even if the features or styling options are not offered by the theme you use. For example. The Hello theme provides no sidebar on the single post template. With a theme builder, you can create a custom single post template and add the sidebar yourself. Or, if you want to add a mega menu to your header, for instance, you can also do so.

Both a WordPress theme and WordPress theme builder allow you to customize every part of your website — header, footer, single post template – and so on. The difference is in the customization process itself, as well as the medium. In a WordPress theme, you can make the customization process via the WordPress theme customizer (Appearance -> Customize), in which the available customization options depend on the theme you use. While in a theme builder, the customization process is done via a visual editor of the associated theme builder. You are likely to have more customization options (technically limitless if you have CSS knowledge) with a theme builder.

WordPress Theme vs Theme Builder. A Crucial Thing to Note

Every WordPress website needs a theme. As mentioned earlier above, theme is a required component of the WordPress system. In the WordPress system, a theme plays a role to govern the layout of your website parts. The layout of the parts of your website — header, footer, single post template, 404 page, and so on — is defined by the template files of the associated theme. Some examples of the template files are:

  • header.php. To control the layout of the site header
  • footer.php. To control the layout of the site footer
  • single.php. To control the layout of the single posts
  • search.php To control the layout of the search page results
  • 404.php To control the layout of 404 error page
  • archive.php To control the layout of the archive pages (tags and categories)
  • And so on

A theme builder allows you to create custom templates — using a visual editor — to replace the default templates of the theme you use. For instance, when you create a custom header template, the custom header template you created will replace the default header template of your theme so that the layout of your header on your website is defined by the custom header template instead of the default header template.

The process of custom template creation itself is done via a visual editor. In other words, you don’t need programming skills. That is why we have been saying a couple of times that a theme builder is a perfect solution for those who want to be a professional web developer yet have no adequate programming skills. The following is an example of the editor interface of Elementor (one of the WordPress theme builder plugins) where you can create custom templates.

WordPress Theme vs Theme Builder: The Ability to Work with Custom Fields

We said that you can be a professional web developer even if you have no programming skills. That’s true. Completely true. But you need to understand how WordPress custom fields work as well as how to create ones.

A custom field is an additional field to store additional information about your content. For instance, if you want to create a bike rental website, you might want to add additional information like rental cost, bike type, drop location, and so on. You can then use the information according to your needs. For instance, you can create a page where your users can sort the bikes by price or type. It is just an example. The implementation of custom fields can be way more complex than that. If you have ever used WooCommerce, it’s the perfect example of how custom fields are implemented. The fact is, most WordPress developers make use of the custom fields to develop plugins.

When creating a custom template (or page) using a theme builder plugin, you can add custom fields according to your needs. Elementor, Brizy, and Divi Builder are examples of the theme builder plugins that support custom fields. It takes no programming knowledge to create custom fields. You can use plugins like JetEngine (Elementor only), Pods, and Advanced Custom Fields. You can read our articles below to learn more about:

Unlike a theme builder, most WordPress themes offer no capability to add custom fields. In fact, hardly any WordPress theme offers such a feature.

The Advantages of a WordPress Theme Builder

Visual Editor

A theme builder plugin comes with a visual editor which you can use to create the custom templates. Everything is drag and drop. No need to deal with any single line of code. If you want to add a certain element, say the navigation menu, you can simply add it to the canvas area. You can then style up the element to your liking according to your design concept. You can customize nearly everything you can expect. From color, typography, sizing, and so on.

In a WordPress theme, customization options tend to limit. You can only make the customization according to the customization options offered by the theme you use. Plus, in most themes, you can’t add elements like a button, form, or even social media icons.

You Can Minimize the Use of Plugins

WordPress plugins allow you to add certain features and functionalities that are not available on WordPress by default. Even so, installing too many plugins is not recommended as it can make your site runs slower. Most theme builders come with elements like form, map, slider, and so on so that you don’t need to install a new plugin to add those elements. The ability to add custom fields is another reason why you don’t need to install unnecessary plugins. You can simply create custom fields according to your need and purpose.

Some theme builder plugins, including Elementor and Brizy, even come with a popup builder to allow you to create beautiful popups on your site. With a little creativity, you can use the popup builder to create a full-screen and off-canvas menu so that you don’t to — again — install unnecessary plugins only to create a full-screen or off-canvas menu.

You Can Use Different Templates for Different Site Parts

Most theme builder plugins — including Divi Builder and Elementor — support display conditions, allowing you to assign a certain custom template to specific parts of your website. For instance, you can create a custom header template and assign it to articles under specific categories. You can then create another custom header template for other parts of your website. You can have multiple header templates (as well as multiple footer templates) on a single website.

The concept of display condition also allows you to create different layouts for different content types by creating several custom templates.

The Advantages of a WordPress Theme

Although a theme builder offers more options to customize your website, a WordPress theme remains a great choice for certain reasons. Especially if you are the type of person who doesn’t like being offered too many options. A WordPress theme is also a better-suited for casual users who want their site to run more quickly without making too many customizations. You don’t need to learn new stuff. You can simply go to the theme customizer to add your site logo and some basic things.

Top 4 Theme Builder Plugins

1. Elementor Pro

Elementor is the best option to create a WordPress site in a visual way. The pro version comes with a theme builder feature to allow you to create a fully customized website even if you have no programming background. Its intuitive visual editor makes it possible. With the theme builder feature of Elementor Pro, you can create custom templates to replace the default templates of your theme. Elementor Pro allows you to create custom templates for the following parts:

  • Header
  • Footer
  • Single Post
  • Single Page
  • Archive Pages (Tags, Categories, Authors)
  • Search Results Page
  • 404 Page

If you have WooCommerce installed on your WordPress site, you can also create custom templates for single product page, product category, and shop page. In addition, you can also create custom templates for custom post types. The ability to add custom fields on a custom template is another compelling point. Plus, you have a popup builder which you can use to create a full-screen menu and off-canvas menu.

2. JetThemeCore

JetThemeCore is a theme builder plugin from Crocoblock. It depends on Elementor to works. In other words, you need to have Elementor installed on your WordPress site. You can use the free version of Elementor to use JetThemeCore. That being said, JetThemeCore is a great alternative to Elementor Pro Theme Builder if you enjoy the editing experience of Elementor but don’t want to upgrade to the pro version. JetThemeCore allows you to create custom templates for the following parts:

  • Header
  • Footer
  • Single Post
  • Single Page
  • Archive Pages (Tags, Categories, Authors)
  • Search Results Page
  • 404 Page

3. Divi Builder

Looking to create websites for clients? If yes, then Divi Builder is a great option. With a single license, you can download and install Divi Builder on unlimited projects. Also, there is an option to get it with a one-time purchase option so that you don’t need to spend yearly license fee. Divi Builder is available in two versions: a standalone plugin and the integral feature of the Divi and Extra theme. You can use the standalone version if you prefer to use Divi Builder on themes outside Divi and Extra. You can use Divi Builder to create custom templates for the following parts.

  • Header
  • Footer
  • Single Post
  • Single Page
  • Archive Pages (Tags, Categories, Authors)
  • Search Results Page
  • 404 Page

If you use WooCommerce, you can also use Divi Builder to create a custom template for the shop page, cart page, checkout page, and account page. Divi Builder also allows you to create custom templates for custom post types. Need to display the custom fields data to your custom templates? Divi Builder also makes it possible to do so.

4. Brizy Pro

Brizy is a lightweight page builder plugin that offers an intuitive editor. It is extremely easy to use. The pro version comes with a theme builder to allow to create a fully customized website with WordPress. The way Brizy theme builder works is a bit different from the three theme builders above. It doesn’t allow you to create custom templates for the footer and footer. Instead, it offers two dedicated blocks to create both custom header and footer. Custom templates can be created for the following parts:

  • Single Post
  • Single Page
  • Artive Pages (Tags and Categories, Authors)
  • Search Results Page
  • 404 Page

You can also create templates for WooCommerce parts as follows:

  • Single Product Page
  • Shop Page
  • Product Archive Pages (Product Categories and Tags)

Brizy also allows you to add custom fields to a custom template. Another advantage, it comes with a built-in mega menu builder so that you don’t need to install an additional plugin to create a mega menu on your custom header. Popup builder feature is also available to create more creative menu.

The Verdict

Theme builder is a great solution if you want to create a fully unique, customized website with WordPress. It’s especially a great solution if you want to create websites for clients. The ability to create custom templates via a visual editor allows you to become a professional web developer without needing to master PHP. The ability to add custom fields is another reason why a theme builder is a better option than a WordPress theme. If you are a casual user who just needs WordPress to create a simple blog with minimum customization, a WordPress theme is a better-suited option, though. A theme builder tends ideal to create a more complex website that needs further customizations.

If you want to have a full control over the layout and the styling of every single area of your website, you should go for a theme builder.

How to Create a Shrinking Header on Scroll Down Using Elementor

Elementor Pro comes with a theme builder feature in which you can use it to create custom templates of your theme. One of the custom templates you can create is the header template. Creating a custom header template using Elementor, you can apply any style or behavior you like. From the one that automatically hides on scroll down to the one that shrinks on scroll down. In this article, we will show you how to create a header that shrinks on scroll down as shown on the GIF below.

Elementor has no default setting options to create a header behavior like the one above. To create that kind of header type, you need to add a custom CSS to your header. Have no CSS knowledge? No worries. We will share the CSS code you need and explain some properties you can modify.

How to create a shrinking header on scroll using Elementor

If you are new to Elementor, you can read our previous article to learn how to create a custom header using Elementor. Or, if you have been using Elementor for a quite while and already have a custom header, you can edit it to apply the shrinking behavior. In this article, we will create a new header. Instead of creating the header from scratch, we will use one of the available premade templates. Let’s get started.

First off, go to Templates -> Theme Builder on your WordPress dashboard. Click the plus icon on the Header label on the left panel.

On the appearing templates library, choose a premade template you like from the appearing template library. If you want to create the template from scratch instead, you can simply close the template library. As said above, we will use a premade template. More precisely, we will use the premade header template of the Digital Agency template kit. Click the INSERT button to import the premade template to the canvas area.

Go to the settings panel on the left side. On the Layout block under the Layout tab, set the Minimum Height to 90 and the HTML Tag to header.

Next, go to the Advanced tab. On the Advanced block, add a CSS class on the CSS Classes field. You can use the sticky-header class.

Open the Motion Effects block and make sure the Sticky option is set to Top. You need to disable the header on the tablet and mobile (simply delete the Mobile and Tablet option on the Sticky On field). Set Effects Offset to 90.

Still on the Advanced tab, open the Custom CSS block and paste the following CSS code.

header.sticky-header {
    --header-height: 90px;
    --opacity: 0.90;
    --shrink-me: 0.80;
    --sticky-background-color: #0e41e5;
    --transition: .3s ease-in-out;
    transition: background-color var(--transition),
                background-image var(--transition),
                backdrop-filter var(--transition),
                opacity var(--transition);
}
header.sticky-header.elementor-sticky--effects {
    background-color: var(--sticky-background-color) !important;
    background-image: none !important;
    opacity: var(--opacity) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
header.sticky-header > .elementor-container {
    transition: min-height var(--transition);
}
header.sticky-header.elementor-sticky--effects > .elementor-container {
    min-height: calc(var(--header-height) * var(--shrink-me))!important;
    height: calc(var(--header-height) * var(--shrink-me));
}
header.sticky-header .elementor-nav-menu .elementor-item {
    transition: padding var(--transition);
}
header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item {
    padding-bottom: 10px!important;
    padding-top: 10px!important;
}
header.sticky-header > .elementor-container .logo img {
    transition: max-width var(--transition);
}
header.sticky-header.elementor-sticky--effects .logo img {
    max-width: calc(100% * var(--shrink-me));
}

Some properties on the CSS code above that you need to notice are:

  • header-height: This property is used to control the height of the header (which set to 90px in this example). If you want to change the value, make sure to change both values: on the CSS code and on the header section’s settings.
  • opacity: This property is used to control the degree to which your shrinking header is transparent. You can use a value between 0 to 1. In this example, we use the value 0.90.
  • shrink-me: This property is used to control the degree to which your header and logo shrink when a visitor starts to scroll down. You can use the value between 0 to 1. We use the value 0.80 in this example. This value will make your header and logo shrink to 80 percent from the initial size.
  • sticky-background-color: This property is used to control the color of the shrunken header (the header that appears when a visitor scrolls down). You can use a color name (i.e. red) or the hex code of the color. In this example, we use the hex code of 0e41e5 which represents blue.
  • transition: This property is used to control how long it takes for the header to shrink from its initial size.

Lastly, before you publish/update your header, click the widget that contains your site logo (we use the Image widget in this case) to edit it. Go to the Advanced tab and add the CSS class logo on the CSS Classes field. This will make your logo shrinks as well when users scroll down.

That’s it. You can now publish/update your header.

The bottom line

The ability to add custom CSS allows you to apply certain styling options that are not offered by Elementor by default. So basically, you technically have limitless styling options to apply.

How to Set Entrance Animation in Brizy

Animation is one of the things that make a web page looks compelling. Just like other page builder plugins, Brizy also has a feature to apply an entrance animation to an element. Be it a block, column, or the actual design elements like button, text, image, and so on. If you are new to Brizy, you might find a little issue when wanting to apply an entrance animation to an element as the option to do so is not available on the settings bar. Instead, the option to set an entrance animation is available on the settings panel (settings bar and settings panel are two different things).

Brizy itself offers about 41 entrance animation styles you can apply to an element.

To apply an entrance animation to an element, first, click the element you want to apply the entrance animation to. On the appearing settings bar, click the gear icon followed by the More settings link. This will open the settings panel.

On the settings panel, open the Advanced tab and scroll down to the Entrance Animation section where you can set the entrance animation.

How to Add Custom Fonts in Brizy

Typography is an important element of a design, no matter the type of design. Including web design. The selection of font plays a vital enough role in determining the quality of the design. When selected and implemented properly, a font can be the brand identity of your business. Compared to other page builder plugins like Elementor and Divi Builder, the default font collections offered by Brizy tend to fewer, but you have an option to add custom fonts according to your need.

To be able to add a new custom font in Brizy, you need to use the pro version as the feature to add custom fonts is only available on the pro version. Brizy supports four font formats: TTF, EOT, WOFF, and WOFF 2. Unlike, say Elementor, Brizy doesn’t support direct integration with Adobe Fonts. So, if you want to add a custom font from Adobe Fonts, you need to download the font file first.

How to add a custom font in Brizy

You can add a new custom font directly from the Brizy editor. Create or edit a page or theme builder template with Brizy to open the Brizy editor. New to Brizy? You can read our previous article to learn how to use Brizy.

On the Brizy editor, add an element that has an option to edit the typography (like Text, Button, Form, and so on) to the canvas area.

Click the element to show the settings bar. On the settings bar, click the Typography tab and click Add New Font.

On the appearing window, click the Upload button. Give your font a name and click the Continue button.

Upload your font file by clicking the UPLOAD button (make sure to click one according to the format of your font). Once uploaded, click the Add Font button.

If your font consists of more than one files, you can click Add new font variation to upload the other files. Otherwise, you can click the Continue button.

That’s it. You can now use the custom font you have just added. Brizy places the custom fonts at the top of the list on the font library.

How to Choose a WordPress Page Builder Plugin: 10 Key Features to Consider

A WordPress page builder plugin is a solution if you want to be a professional web designer or web developer yet have no adequate programming skills. It allows you to create a unique, fully customized WordPress-based website without touching a single line of code. A page builder plugin comes with a visual editor that you can use to create the design of your website. Some page builders have the ability to add dynamic content which is crucial to create a dynamic website.

A page builder can also be a great solution if you want to create a website for your own business, yet have no idea of the theme you want to use. Most page builder plugins can be used on any WordPress theme — be it free or paid — so you don’t need to depend on a certain theme. You have the freedom to choose the theme of your choice. But wait. Choosing the right WordPress page builder plugin is another challenge as there are a bunch of options available out there. Each offers a unique interface and features.

We have compiled some of the key features you need to consider when choosing a WordPress page builder plugin. We won’t mention the editor interface as every user has their own preference about this.

1. The availability of design elements

The availability of design elements determines the kind of page (or website in general) you can create. In general, the design elements of a WordPress page builder plugin fall into 3 types:

  • The actual design elements to create a page
  • Column: A smaller container to host the actual design elements
  • Section: A larger container to host columns and the actual design elements

Worth noting that each page builder may use different terms for those elements. For instance, Brizy uses the term “block” instead of “section” (the two terms refer to the same stuff). While to mention the actual design elements, Divi Builder uses the term “modules” while Elementor and Brizy use the term “widget” and “element”, respectively.

Elementor is the absolute winner in this area as they offer over 90 actual design elements in total. Not to mention widgets from add-ons like Happy Addons, Essential Addons, and so on. As a comparison, here are the total of the actual design elements offered by three popular WordPress page builder plugins: Elementor, Divi Builder, and Brizy:

  • Elementor: 90 widgets
  • Divi Builder: 38 modules
  • Brizy: 42 elements

Even so, more actual design elements don’t always better. In some cases, it causes the editor a bit longer to be loaded. Everything is about the needs in the end.

On the other hand, you have more options to add creative elements to the page you are creating.

2. The ability to add dynamic content

You can be a professional web developer with WordPress, even if you have no programming skills, but there is one requirement you need to meet. You need to know the concept of custom fields, including how they work and how to create ones. By mastering WordPress custom fields, you will be able to create nearly any type of website without installing too many plugins. You can simply create custom fields according to your needs. Creating custom fields doesn’t require programming skills. You can use plugins like Pods, Advanced Custom Fields, and JetEngine (Elementor only) to do so.

Worth to note that not all custom fields are supported by page builder plugins. For instance, you can only use JetEngine on Elementor. So, make sure that the page builder you want to use support the custom field plugin you want to use.

In addition to custom fields, most page builder plugins also allow you to add default dynamic content of WordPress such as post meta, featured image, page title, and so on.

3. Theme builder

In the old days, you needed to master PHP, CSS, and HTML to create a WordPress theme. Today, you can create your own WordPress theme without coding thanks to the theme builder feature offered by a page builder plugin. You can create custom templates to replace the default templates of your theme. Most WordPress theme builder features of a page builder allow you to create the following custom templates.

  • Header
  • Footer
  • Single post template
  • 404 page
  • Archive pages (categories, tags, authors)
  • Search results page

Elementor, Divi Builder, and Brizy. They all have a theme builder feature to create the custom templates above. You can create the custom templates using the visual editor offered by each page builder.

4. Global elements

The ability to create and use global elements is another crucial enough feature you need to consider when choosing a page builder plugin. Especially if you want to create a complex website that consists of lots of pages. With a global element, you only need to edit a single page to make a certain change to the global element on some pages on your website. For instance, you have a global heading — in which you have applied it to some pages on your website. For a certain reason, you want to edit the typography of the global heading. Instead of editing the heading on all pages, you only need to edit the heading on a single page and the changes will be applied to all pages where the associated global heading is added to.

The type of global elements you can use are varied, depending on the page builder you use. Elementor, for instance, allows you to create global colors, global fonts, global widgets, global custom CSS, and so on. While in Brizy, you can effortlessly turn a block into a global block.

5. The ecosystem

We are living in a connected era where everything is about collaboration. You can’t really work alone. Even if you are a freelancer. You will need support from other parties. In the context of web development, you will need resources from other developers to streamline your workflow. In the case of page builder plugin, you can install add-ons developed by third-party developers to add certain features or functionalities.

Speaking of add-ons, Elementor is superior to other page builder plugins. Due to its open ecosystem, many WordPress developers develop add-ons to provide features and widgets that are not available on Elementor by default. For instance, Crocoblock develops JetMenu to allow Elementor users to add a mega menu to the header template they create.

Divi Builder and Elementor are two page builder plugins that have an open ecosystem, allowing third-party developers to develop add-ons. Elegant Themes (the developer of Divi Builder) even provides a marketplace where developers can market their add-ons (as well as child themes and layouts). Choosing a page builder that has an open ecosystem is crucial for two main reasons: to enrich the functionalities of the page builder itself and to get supports from the community (other than the official support from the associated developer).

6. Payment option

Some page builder plugins — including Elementor and Brizy — are released as a freemium plugin. To unlock the offered premium features, you need to use the pro version. In addition to price (of course), the payment model option accepted by the developer of the page builder you use is also crucial enough to consider. Especially if you hate the subscription payment model. Divi Builder and Brizy are great options if you hate the subscription model as they accept a one-time purchase option. Elementor, on the other hand, only accepts a subscription-based payment model.

7. WooCommerce support

The vast majority of WordPress-based e-commerce websites are powered by WooCommerce. That said, if you want to create an e-commerce website using WooCommerce and a page builder plugin, you need to make sure that the page builder you use supports WooCommerce. What we mean here is, you can create custom templates to replace the default templates of the WooCommerce pages such as the single product page, product category page, and so on. Divi Builder, Elementor, and Brizy are examples of the page builder plugins that have support to WooCommerce by allowing you to create custom templates to replace the default templates of the pages we mentioned above.

If you use Elementor, you can even add advanced features like advanced filtering, comparing feature, wishlist, and so on by installing JetSmartFilters and JetCompare & Wishlist add-ons.

8. Third-party integration support

In the context of web development, there are a bunch of services and tools you can integrate your website with. For instance, you can integrate your website with MailerLite or Mailchimp for newsletter needs. Or, you can integrate your website with Adobe Fonts to enrich your font collection. Just make sure that the page builder you want to use supports the tool or service you use or need.

9. Compatibility with other WordPress plugins

You might have a favorite WordPress plugin. For instance, you might always use Slider Revolution to add a slider to every website you create. Or, if you use Yoast, you might want to make sure that the page builder plugin you want to use allows you to optimize your page with Yoast. Being the most popular page builder plugin, Elementor is supported by most WordPress plugins. LearnDash for instance. The popular LMS plugin offers an official add-on to allow you to effortlessly add quizzes, courses list, lessons list, and so on to your Elementor page.

If your favorite plugin offers no official support to the page builder you use, you can use the embed feature (if it supports embed). Most page builder plugins — including Elementor, Divi Builder, and Brizy — have a design element to embed a content of WordPress plugins.

10. Supporting features (popup builder, responsive editing, custom CSS, and so on)

Some page builder plugins offer extra features for the sake of winning users’ attention. Elementor and Brizy, for instance, have a built-in popup builder that you can use to create beautiful popups on your WordPress site.

Most page builder plugins come with a responsive editing feature to allow you to design and preview a page on three modes: laptop, tablet, and smartphone. Just make sure that the page builder you want to use supports this feature if it matters to you. Some supporting features worth considering are:

  • Popup builder
  • Responsive editing
  • Custom CSS
  • Revision history
  • Navigation (like Navigator in Elementor and Layers View in Divi Builder)
  • Role manager

The bottom line

The era has shifted. You are no longer need to rely on a theme to create a unique, customized website with WordPress. Instead, you can use a page builder plugin. A WordPress page builder plugin allows you to be a professional web developer or designer even if you have no programming skills as it comes with a visual editor where everything is drag and drop. In order to be able to create a fully customized website, understanding the concept of WordPress custom field is a key.

There are a bunch of options when it comes to page builder plugin. With their pros and cons. The 10 features above are the crucial features you need to notice when choosing a page builder plugin for your projects.

JetThemeCore Plugin: An Overview

Are you looking for an alternative to Elementor Pro? If yes, JetThemeCore is a wort trying add-on. What is that? We will find the answer shortly in this article.

As you have known, the pro version of Elementor allows you to create custom templates to replace the default templates (header, footer, single post template, single product page, and so on) of your theme thanks to the theme builder feature. In addition, there are more premade templates you can use with Elementor Pro. You can read our previous article to learn the detailed comparisons between Elementor Free vs Elementor Pro.

Elementor Pro is great. Unfortunately, Elementor only accepts a yearly subscription-based payment model only. Something that not all users like about. Some WordPress users prefer a one-time purchase option when they have to use a premium plugin or theme. You can get JetThemeCore with this payment option.

What is JetThemeCore?

JetThemeCore is a WordPress plugin developed by Crocoblock. Or more precisely, it’s an Elementor add-on. The add-on adds two features similar to Elementor Pro’s: the ability to create custom templates (theme builder) and more premade templates. This means, you can use JetThemeCore to create custom templates for your theme parts. The custom templates you can create with JetThemeCore are:

  • Header
  • Footer
  • 404 page
  • Search results page
  • Archive pages
  • Single post template

Just like Elementor Pro, you can also create the templates using the visual editor of Elementor. JetThemeCore also offers premade templates to streamline your workflow.

One crucial thing to note. In most cases, JetThemeCore has a conflict with Elementor Pro. You can’t use it together with Elementor Pro. If you activate JetThemeCore while you have Elementor Pro active as well, all of the theme builder templates you created with Elementor Pro won’t work. To create a custom template with JetThemeCore, you can simply go to Crocoblock -> My Library on your WordPress dashboard. Same as Elementor Pro, you can assign a certain template to specific pages on your website.

Premade templates

As you know, Elementor Pro offers way more premade templates than the free version, including Template Kits. JetThemeCore also does the same thing by offering hundreds of premade templates. After installing and activating the JetThemeCore plugin, you will see a new button — the MAGIC BUTTON — on the canvas area of the Elementor editor. Clicking this button will open the template library of JetThemeCore where you can access the offered premade templates.

Not just page templates, JetThemeCore also offers section templates and theme builder templates (footer, header, single post, and so on) as you can see on the screencast above. The templates are very well-organized. You can filter the templates by category.

The bottom line

JetThemeCore is a premium add-on developed by Crocoblock. It’s intended to allow you to create custom templates to replace the default templates of your theme such as footer, header, single post, and so on. Just like Elementor Pro, when creating a custom template using JetThemeCore, you can also set display conditions to assign it to certain pages on your website. JetThemeCore is especially a great solution if you are looking for an Elementor Pro alternative in case you hate the subscription-based payment model only accepted by Elementor. Crocoblock, the developer of JetThemeCore, accepts a one-time purchase option.

JetThemeCore itself is a part of the JetPlugins — a set of Elementor add-ons developed by Crocoblock. While you can only use JetThemeCore to create custom templates, you can use JetPopup to create popups, JetWooBuilder to create custom templates for WooCommerce, JetEngine to add custom fields, and so on.

What is a Global Block in Brizy and How to Create One?

Working with Brizy, you need to familiarize yourself with blocks. In Brizy, block is one of the design elements that you can use to create a page or theme builder template. A block is a large container to place columns, rows, and the actual design elements like image, text, button, and so on. On other page builder plugins like Elementor and Divi Builder, a block is called a section. You can add as many blocks as you like according to your needs when creating a page or template with Brizy. Not just regular blocks, you can also add a global block.

What is a global block?

Say you want to create a website to market your service. To make it easy for your aspiring clients to learn the specifications of the service you offer, as well as the price, you want to add a pricing plan block/section on the homepage, the pricing plan page, a landing page, and several other pages on your website. In such a case, it would be easier to create a global block. By creating a global block, you just need to create the pricing plan block once (on a certain page). If you need to add the pricing plan block to other pages, you just need to add one from the global block you have created. This will save you a lot of time in creating a website.

Using global blocks also provide some advantages in the editing process. When you make some changes to a global block from a certain page, the changes will also be applied to all pages that contain the global block you are editing. Brizy also uses this concept to create a custom footer and a custom header.

How to create a global block and how to use one

Creating a global block is super easy. Once you are done adding and editing the content on a certain a block and style it up, you can hover your mouse over the associated block and click the mixer icon on the right side to open the settings bar. On the settings bar, click the Block tab and enable the Make it Global option.

A global block is marked with a blue globe icon.

To use the global block you have just created, you can go to the Global Blocks on the template library. To open the template library itself, you can click the plus icon on the canvas area (add a new block). Simply click a global block you want to use to import it to the Brizy editor.

How to Create a Custom Footer in Brizy

Brizy is a rising page builder plugin. Two major reasons why many WordPress users started to pay attention to Brizy: it’s extremely lightweight and comes with a very intuitive interface. In addition, Brizy is a feature-rich page builder plugin. It comes with a theme builder feature to allow you to create custom templates for the theme parts of your website, including the footer, which we will cover in this article. Theme builder is a great feature you can use to create a stylish header and footer on your website site. No need to have a programming skill as you can do so via the visual editor of Brizy.

To be able to create a custom footer using Brizy, you need to use the pro version as the theme builder feature is only available on Brizy Pro. The cheapest plan of Brizy Pro costs only $49 per year for three sites.

How to create a custom footer using Brizy

Creating a custom footer using Brizy is a bit different to other page builders like Elementor and Divi Builder. By the time this article is written (November 11, 2020), Brizy doesn’t support display conditions yet. To add a custom footer to all pages on your website, you need to edit the pages manually, one by one. Very time-consuming? Indeed. To ease your job, you can create a global footer block. This way, you don’t need to create the footer from scratch every time you want to add a custom footer on a certain page.

First off, edit a page you want to add the custom footer on. If you are new to Brizy, you can read our previous article to learn how to use Brizy. Add a new block by clicking the plus button on the canvas area. On the appearing template library, click the Footer link on the left panel to filter the footer block templates. Select a footer template you like and click to import it to the Brizy editor.

Next, you can edit the default content. To do so, simply click the content you want to edit to open the settings bar. For instance, if you want to replace one of the default menu items, you can simply click the menu item you want to replace the content of.

Again, you can read our previous article to learn how to edit the content in Brizy in case you are new to Brizy. If you think the footer template contains too many columns, you can simply remove the unnecessary ones. Conversely, you can also add a new column if you need one. You can read our previous article to learn how to work with columns in Brizy.

Styling up the footer

Once you are done editing the content of the custom footer, you can style up the footer by setting the background, width, add a divider, apply an entrance animation, and so on.

To set the background, you can hover your mouse over the footer and click the tiny arrow icon on the left side to open the settings bar. To use an image as the background, you can click the Background tab. To use a color as the background, you can click the Colors tab. From this tab, you can also set the border color and size as well as the box shadow.

The step above will set the background of the content area of the footer. If you want to set the background of the whole footer area, you can set the background of the container (block). To do so, you can hover your mouse over the footer and click the mixer icon on the right side to the open the settings bar. To set an image as the background, you can click Background tab. To set a color as the background, you can click the Colors tab. Same as the step above, you can also set the border color and border size from the Colors tab.

To add a divider, you click the gear icon on the settings bar and click the More Settings to open the settings panel.

You can add the divider on the Type option under the Styling tab. You can either add a divider on the bottom of the block or the top of the block. Or both.

To apply an entrance animation, you can select the animation style you like on the Entrance Animation option under the Advanced tab.

Setting the footer block as a global block

As we said earlier, Brizy doesn’t support display conditions yet. One solution offered by Brizy to add a custom footer to all pages (as well as theme builder templates like single post template, single product page template, and so on) is by creating a global footer block.

Once you are done editing the content of your footer and styling it up, you can hover your mouse over the footer and click the mixer icon to open the settings bar. On the settings bar, simply click the Footer tab and enable the Make it Global option.

Next, every time you want to add a custom footer to a page or theme builder template, you can simply use the global footer block you have added above. You can find a global item on the Global Blocks tab on the template library.

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

The bottom line

The theme builder feature of Brizy allows you to create a custom footer for your WordPress website in a visual way, without coding. You can add any element to your liking — including custom fields — by simply dragging the Brizy elements you want to the footer block. If you want to custom fields to your footer, you can use the Text element. Read our previous article to learn how to add custom fields in Brizy.

How to Add AdSense to Elementor

Google AdSense is a popular advertisement network widely used by bloggers and website owners in general to monetize their websites. While Elementor, as you have known, is the most popular WordPress page builder plugin features a theme builder. Creating a WordPress-based website with Elementor gives massive flexibility in terms of displaying Google AdSense ads. You can display your ads anywhere, literally anywhere. Be it on pages or theme builder templates like footer, header, to single post template.

Elementor indeed has no widget aimed specifically at displaying Google AdSense ads, but thanks to the HTML widget, you can integrate your Elementor-powered WordPress site with Google AdSense.

How to Add AdSense to Elementor

The HTML widget of Elementor allows you to embed HTML and JavaScript codes. Since Google AdSense uses JavaScript files to display ads, you can use it (the HTML widget) to display Google AdSense ads on your website. In addition to adding Google AdSense, you can also use the HTML widget to install Google Analytics.

To start adding Google AdSense to Elementor, first, create a new page/template and edit it with Elementor. Drag the HTML widget to the canvas area. If you are new to Elementor, you can read our previous article to learn how to use Elementor.

Go to the left panel to add your Google AdSense code. You can add your code on the HTML Code field under the Content tab.

You can go to the Advanced tab to set the margin and the padding of your ads. Publish/update your page/template once you are done editing it. That’s it.

The Bottom Line

Although Elementor offers flexibility to display Google AdSense ads to any area to your liking, it has no capability to display ads on the content area of the single posts. You can only display the ads before or after the content. If you want to display ads on the content area (after a certain paragraph, for instance) you still need a dedicated ad management plugin like AdSanity and Advanced Ads.

How to Use an Elementor Template Kit

In Elementor, you have two options to create a page or theme builder template. First, you can create one from scratch, which is the best option if you have your own design concept. Second, you can create one from a premade template. Creating a page or theme builder template from a premade template is a great solution if you have no idea about the design concept of the page/template you want to create. Or you simply need a faster way. Elementor offers hundreds of premade templates you can choose from. Some of them have a consistent concept aimed specifically at a certain website type. These types of templates are called Template Kits.

What is an Elementor Template Kit?

An Elementor Template Kit is a set of Elementor templates that have the same design concept. What we mean by the same design concept here refers to the same typography (font family in particular), color scheme, image styling, button styling, and other design elements. An Elementor Template Kit is designed specifically for a website type. For instance, Elementor offers a Template Kit designed specifically for a law firm. An Elementor Template is great when it comes to streamlining workflow.

How to use an Elementor Template Kit

Once again, an Elementor Template Kit is a set of templates. Since they are templates, you can import them just like other Elementor templates. If you want it, you can also use a template of a Template Kit independently (without importing the other templates).

Elementor has no specific feature to bulk import templates of a Template Kit. In other words, you need to import them one by one on every page and theme builder template of the website you are creating. Say you want to create a law firm website and want to use the Law Firm Template Kit. After installing and activating Elementor Pro (Templates Kits are only available on Elementor Pro, by the way), you can create the base pages (homepage, about page, contact page, and so on) and other parts like the header and the footer. When creating a page, you can import a premade template of the Template Kit associated with the page you are creating. For instance, for the homepage, you can simply import the Home Page premade template of the Law Form Template Kit on the template library.

Before using an Elementor Template Kit, you can see the concerned Template Kit on a live website. You can simply visit the Elementor template library page and click a Template Kit you want to see the demo of.

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.