How to Activate Brizy Pro License

Brizy is a page builder that comes with a very intuitive, light editor. If you enjoy using Brizy, you can upgrade to the pro version to unlock more features such as theme builder, popup builder, third-party integraions, and pro elements. The pro version of Brizy is available in three plans with the cheapest plan costs $49 for three sites. You can visit its official website to subscribe to the pro version.

After subscribing to a certain Brizy Pro plan, you will have access to the Brizy Pro plugin. You can simply download and install it on your WordPress site. Once the Brizy Pro plugin is installed, you can activate the license to be able to use the pro features. To do so, first, login to Brizy with your account and go to the WordPress License page. Simply copy the license on the LICENSE KEY column.

Next, log in to the WordPress dashboard where the Brizy Pro plugin is installed (make sure the Brizy Pro has been installed and activated) and go to Brizy -> Settings. Open the License tab and paste the license you have copied to the Your License Key: field and click the Activate button.

Congratulations. You can now use the pro features offered by Brizy to unleash your creativity.

How to Use a Global Color in Brizy

Global color is one of the features offered by Brizy to streamline your workflow. The feature allows you to change the color of multiple elements at once, with a single click. Be it the elements on the same page or on the different pages within the site. This feature is pretty useful if you are working on a complex website that consists of several pages. It can save you a lot of time. Take a look at the screencast below. Notice the icons, texts, and the button.

As you can see on the screencast above, the color of the icons, texts, and button change altogether as we change the color from the color picker. It happens because we use a global color for those elements.

How to use a global color in Brizy

Brizy offers style presets which you can access by clicking the Styling menu on the left panel. Each style preset consists of global colors and global typographies. There are eight global colors you can use on each style preset. The third color (from left) is used as the default color of the Button element as well as the Icon element, while the seventh color is used as the default color of the Text element. You can use other colors as the global colors for other elements on your page.

You can use a global color on any element in Brizy. You can also use a global color as the background of a column or block. To use a global color on an element, first, click the associated element to open the settings bar. Once the settings bar appears, click the Colors tab to open the color picker. Global colors lie beneath the color picker. Simply select the global you want to use.

Global color can be used on any setting on an element that involves color. Such as the border, background, and shadow.

To change the color of a global color, you can simply click the Styling menu on the left panel and then set a new color of a global you want to change the color of. When you change the color of a global color, the change will be applied to all elements where the associated global color is used (as we have demonstrated on the screencast above).

How to Add reCAPTCHA in Divi Builder

reCAPTCHA is a spam protection system widely used by websites. If you have a WordPress-based website built with Divi Builder, you can also protect the pages on your website (that contain a form) with it as Divi Builder supports integration with reCAPCTHA. Divi Builder itself has two modules to create a form: the Email Optin module to create an email opt-in form and the Contact Form module to create a contact form. Both modules support reCAPTCHA integration so that you can protect every form you create with Divi Builder.

Divi Builder itself uses reCAPTCHA version 3 in which the protection is based on the interactions made by your visitors with your website. You can read this page to learn more about reCAPTCHA version 3.

How to Add reCAPTCHA in Divi Builder

To add a reCAPTCHA version 3, you need a site key and a secret key. To get ones, visit the reCAPTCHA website and click the Admin Console menu.

Click the plus icon on the upper right side add a new site.

Add a label on the Label section. On the reCAPTCHA type section, select reCAPTCHA v3. Add your domain on the Domains section (hit enter to add a domain). Accept the ToS and click the SUBMIT button.

On the next page, you will get the keys you need. Simply copy them.

The way to add reCAPTCHA to the Email Optin module and the Contact Form module is the same. After adding the module, you can open the Spam Protection block on the settings panel and enable the Use A Spam Protection Service option. Click the ADD button.

Paste the site key and the secret key you have copied to the respective fields and click the SUBMIT button. You can also set the minimum score on the Minimum Score option.

Select an account and close the settings panel by clicking the checklist icon.

Please note that reCAPTCHA version 3 doesn’t require a user action like checking the “I’m not a robot” checkbox so that you won’t see a checkbox like reCAPTCHA version 2.

How to Add Dynamic Star Rating in Brizy

Brizy has an element called Rating which you can use to add a star rating on the page or template you are working on. You can either use the element to add a static or dynamic star rating with the help of ACF (Advanced Custom Fields). The ability to add a dynamic star rating is great if you want to create a website in which you need to add a unique rating to each page or post. Say you want to create a review blog and you want to add a unique rating for every review you write. For such a case, you can create a custom field (using ACF) dedicated to controlling (the number of stars) the Rating element of Brizy.

Follow the steps below to add a dynamic star rating in Brizy.

Step 1: Create a custom field group using ACF

First, you can create a custom field group using ACF and assign it to default post type (blog post). To do so, go to Custom Fields -> Add New on your WordPress dashboard (make sure you have installed and activated the ACF plugin). Give your custom field group a name and click the Add Field button to add a field.

For the first field (the field to control the Rating element), you can use the field type of number. You can set the minimum value and the maximum value on the Minimum Value and Maximum Value options.

To add more fields, you can can simply click the Add Field button. If you just want to add a field to control the Rating element then one field above is enough.

Once you are done adding the fields, click the Publish button to publish the custom field group. But first, make sure the custom field group is assigned to Post.

For more detailed instructions on how to create custom fields in ACF, you can refer to this page.

Once the custom field group is published, you should see a new set of fields beneath the WordPress editor every time you want to add a new blog post (assuming you assigned to custom field group to default post type). You can add your rating on the field you have specified.

Step 2: Create the custom template for blog post

Once you are done creating the custom fields, you can then create the custom template for the the default post type (blog post). To be able to do this, you need to use the pro version of Brizy as the feature to create custom templates is only available Brizy Pro.

Once you are ready, go to Brizy -> Templates. Click the Add New button to create a new template.

Give your template a name and set the condition on the Add New Condition section. Since you want to create a custom template for blog posts, you can include the template on all posts. Click the Add button to add a condition and then click the Publish button to publish the template.

Next, click the Edit with Brizy button to edit the template on the Brizy editor.

Note: Make sure to create the template from the same route as we showed above (add template name -> set display condition -> click the Publish button -> click the Edit with Brizy button). Otherwise, you might experience issues with the Post Title and Post Content elements.

On the Brizy editor, you can add any element for your custom template. For instance, you can add the Post Content element to add the post content, Post Title to add the post title, Post Info to add the post info, and so on.

Since your purpose of creating the custom template is to create a dynamic star rating, make sure to add the Rating element. You can place it anywhere.

Once the Rating element is added, click it to show to the settings bar and click the Rating tab.

On the settings bar, click the dynamic icon on the Rating option and select the custom field you have specified to control the star rating.

To style up the star icons, you can simply click the options available on the settings bar. For instance, you can click the Colors tab to change the icon color and click the Align tab to set the alignment.

You can read our previous article for more detailed instructions on how to create a custom single post template with Brizy. Once you are done editing the template, you can click the Update button on the bottom-right corner to apply the changes.

That’s it. You have successfully created a dynamic star rating in Brizy using ACF.

How to Add Dynamic Star Rating in Elementor

Say you want to create a review blog using Elementor. On every review you write, you want to add a unique rating according to the rating you give to the stuff you reviewed. Elementor has a widget called Star Rating. With the help of the ACF plugin, you can use the widget to add a dynamic star rating to an individual blog post. The idea is to create a custom template for blog posts and add the dynamic star rating using the Star Rating widget.

In order to be able to create a custom template and add a dynamic star rating, you need to use the pro version of Elementor as the feature to add dynamic content is only available on Elementor Pro (read: Elementor Free vs Elementor Pro). Follow the steps below to add a dynamic star rating in Elementor.

Step 1: Create a custom field group using ACF

First, you need to create a custom field group using ACF. When creating a custom field group, you can add a field with the field type of number.

Also set the minimum as well as the maximum value.

You can add more custom fields according to your need. Once done adding the fields, you can assign the field group to the default post type (blog post). You can read this article to learn more about how to create custom fields with ACF.

Next, create a new post. On the custom fields section, type a number (rating) on the field you have specified above and publish the post.

Step 2: Create a custom template using Elementor’s Theme Builder

The pro version of Elementor comes with a theme builder feature to create custom templates for your theme, including the single post template. You can make use of this feature to create a custom template for the single post and add the Star Rating widget on the template.

First, go to Templates -> Theme Builder and open the Single Post tab. Click Add New to create a new single post template.

Give your template a name and click the CREATE TEMPLATE button.

On the Elementor editor, add the Star Rating widget to the canvas area.

Go to the settings panel on the left side. Click the dynamic icon on the Rating field under the Rating block and select ACF Number Field.

Click the wrench icon on the ACF Number Field field and select the key (custom field) you have created on step one above. You can add a prefix on the Title field.

Continue editing your custom single post template. Once done, you can simply publish it. For more detailed instructions on how to create a custom single post template in Elementor, you can read this post.

PS

If you face in issue when adding an ACF field, you can read this post to fix it.

How to Add Dynamic Video in Elementor with ACF

The ability to create custom templates and add custom fields makes it possible for you to create any type of website using Elementor. Say you want to create a movie review website and plan to add a trailer video — which you take from YouTube — for every single review you write. In this case, you ideally create a custom post type and then create a custom template for it. You can use CPT UI (Custom Post Type UI) to create a custom post type, while to add custom fields to the custom post type you created you can use ACF (Advanced Custom Fields). With the help of ACF, you can add dynamic video to a custom template you create with Elementor.

Step 1: Create the custom fields

First, you need to create a custom field group with ACF. When creating a field group, make sure to add a field with the field type of URL.

You can assign the custom field group to a default post type (blog post) or a custom post type as mentioned above. For more detailed instructions on how to create custom fields in ACF, you can refer to this page.

Once done creating the custom fields, create a new post where the custom field group is assigned to. Paste the URL of the video you want to add to the video URL field.

Publish the post once you are done filling out all fields.

Step 2: Create a custom template

Next, you can create a custom template for the custom post type (or default post type, depending on where you want to add the dynamic video). In this example, we will create a custom template for a custom post type. Go to Templates -> Theme Builder and click the Single Post tab. Click Add New to create a new custom template.

Give your template a name and click the CREATE TEMPLATE button to start creating the template.

On the Elementor editor, add the Video widget to the canvas area.

Go to the settings panel on the left side. Click the dynamic icon on the Link field under the Video block. Select ACF URL Field.

On the ACF URL Field, click the wrench icon and select a key (custom field) according to the video URL field you created with ACF on the step 1 above.

That’s it.

You can click the Image Overlay block on the settings panel to add a custom overlay to the video. You can also use a dynamic overlay if you want it. To do so, first, you can add a custom field with the field type of Image. Then, click the dynamic icon on the image picker and select ACF Image Field and then tailor the key according to the field name you set for the image overlay.

You can publish your template you are done editing it.

PS

If you experience an issue when working with custom fields in Elementor (e.g., custom fields don’t show up), you can refer to this post to fix it.

How to Fix Custom Fields Not Showing Up in Elementor

Elementor makes it easy for you to work with WordPress custom fields whereby you can display the custom fields on any area on a page without dealing with PHP code thanks to its visual editor. ACF (Advanced Custom Fields), Pods, and JetEngine are examples of custom field plugins that are supported by Elementor. But what if you are experiencing an error when working with custom fields in Elementor?

One of the common issues when working with custom fields in Elementor is that the custom fields not showing up in the canvas area in the editor whereas they do show up on the live page (when you preview the page). This is ridiculous as you won’t be able to style up the text of fields. There are two solutions you can try to fix the issue:

Solution 1: Change the Preview Setting

Chances are, you experience the issue when trying to add a custom field on a page instead of a custom template. According to a discussion on GitHub, many believe that it’s a bug on the new version of Elementor. But when we tried to add a custom field on a custom template instead of a page, everything went back to normal after we change the preview setting. You can try to do it too.

Create a new custom template by going to Templates -> Theme Builder. Create a new template (e.g., single post template). On the Elementor editor, click the gear icon on the bottom-left corner. On the Preview Settings block, select the content type you want to assign the template to and select an existing content. Click the APPLY & PREVIEW button.

Next, add a Text Editor widget to the canvas area. Click the dynamic icon on the content editor and select ACF Field (or Pods Field in you use Pods). On the ACF Field, click the wrench icon and select the key (custom field) you want to display.

Solution 2: Switch Back to the Older Version of Elementor

As we mentioned above, it’s probably a bug on the newer version of Elementor that you can’t add a custom field to a page. That being said, you can switch back to the older version of Elementor. To do so, go to Elementor -> Tools and click the Version Control tab. Select the older version of Elementor Free on the Rollback Version option and Elementor Pro on the Rollback Pro Version option and click the Reinstall button. Don’t forget to click the Save Changes button to apply the change.

You can try the available versions until the problem is solved.

Zion Builder. A Lightweight Page Builder. But How Good?

Many people know WordPress as a blogging tool. Not wrong, but WordPress is beyond that. WordPress is a CMS software that you can use to create any type of website. While WordPress has helped a lot in creating a website, a page builder plugin makes it even easier. You can use a page builder to create a beautiful, professional-look page. Be it the homepage, about page, contact page, landing page, or other pages on your website. Zion Builder is a plugin that will make your site creation way easier, in a more fun way.

Zion Builder is a page builder plugin, comes with a visual editor just like Elementor and Divi Builder to bring a new experience in website creation with WordPress. Zion Builder is a newcomer in the page builder plugin segment. It was released in May 2020. Younger than other similar plugins, even Brizy. How good is Zion Builder? Let’s find out the answer.

Zion Builder: A brief intro

The story of Zion Builder is pretty similar to Divi Builder. It was previously only available for Kallyas theme. In May 2020, Zion Builder was released as a standalone plugin, allowing you to use it on WordPress themes outside Kallyas. The plugin was released as a freemium plugin so that you can try the experience of creating a page using it without requiring to make a purchase first. If you enjoy using Zion Builder, there is an option to use the pro version to unlock more advanced features. You can download the free version of Zion Builder on the WordPress plugin directory.

The Interface

One of the highlights of Zion Builder is its lightweight editor. To be honest, we have no certain metric to prove this, but what we felt during the testing is that the Zion Builder editor is way faster to be loaded than Elementor and Divi Builder. Pretty close to Brizy. Speaking of Brizy, the Zion Builder editor is pretty similar to Brizy. It has a large canvas area, with a panel on the left side — which takes only a little portion of the overall editor area. You can use the panel as navigation, to access the template library, to see the version history, to make the page settings, and to access the responsive editing feature (by switching to desktop/tablet/smartphone editing mode).

What about adding an element?

In terms of adding a new element, Zion Builder is similar to Divi Builder. You can click the plus icon on the canvas area to add a new element. There are three pus icons you will on the canvas area: blue, green, and yellow. Whichever plus icon you click, you will have a panel to select an element you want to add.

You can simply click the element you want to add and it will be added to the canvas area. Hovering your mouse over a certain element will display the handle. When the handle is clicked, the toolbox will appear. There are three actions you can perform from the appearing toolbox: open the editing panel, save the element to the library, hide the element, clone the element, and delete the element.

The editor interface of Zion Builder is overall great, but we have a complaint about it. When you are on a certain panel mode, such as view panel mode, and want to perform a new action (say viewing the version history), the editor will add a new panel. This can interfere with the working process as the canvas area is capped down.

It would be great to retain only a single panel for multiple actions like Elementor does.

Design Elements

Most page builder plugins differ their design elements into three types: section, column, and the actual design element (called module in Divi Builder and widget in Elementor). So does Zion Builder. In Zion Builder, you can also add sections, columns, and the actual design elements (which is simply called elements). However, Zion Builder is a bit different. It doesn’t treat both section and column as the required elements like Elementor and Divi Builder. You can add an actual design element — say a Progress Bar — without adding a section or column first.

Here are the elements offered by Zion Builder:

TextSoundcloud
SectionPricing Box
ColumnImage Box
Custom CodeImage
Google MapsIcon
CounterIcon Box
Progress BarsGallery
Image SliderHeading
Anchor PointVideo
Icon ListButton
TestimonialSeparator
ShortcodeAlert
Sidebar

The elements above are available on both versions (free and pro). If you use the pro version, you will also get the following additional elements:

  • Tabs
  • Accordions
  • Countdown
  • Search
  • Social Share Buttons

Can’t find a Form element? Zion Builder indeed has one yet. Quite disappointing given a form is a crucial enough element. You need it to create a contact form or an email opt-in form. As an alternative, you can use a form builder plugin like Contact Form 7 or WPForms and then use the Shortcode element to add your form. Or, if you have HTML skills, you can make use of the Custom Code element to create an HTML form.

Editing Experience

As we have covered above, Zion Builder comes with a visual editor that offers a large canvas area. It also brings a live editing experience. It’s just, as we have also covered, there is a little issue with the panel. A new panel (or sub-panel more precisely) will appear as you make a new action from the current action.

Another issue about editing experience in Zion Builder is that you have to enter the number manually when you want to make editing that involves numbers like padding, margin, or size. There is no arrows or adjuster (or whatever you call it) like the ones on Divi Builder, Elementor, and Brizy.

Zion Builder Pro Features

If you love the way Zion Builder works (or whatever the reason to make you fall in love with it) and want to upgrade to the pro version, you will be able to unlock the following features:

Ability to Add Dynamic Content

The first feature you can unlock after upgrading to the pro version is the ability to add dynamic content. This feature will pull dynamic content of WordPress to any area you add the element to. The supported dynamic content types are:

  • Post title
  • Post date
  • Post content
  • Post excerpt
  • Post id
  • Post terms (category or tag)
  • Comments count
  • Featured image
  • Author info
  • Author meta
  • Site title
  • Site tagline

There is also an option to add custom fields. However, when we tried it with ACF, this option didn’t work.

The dynamic content itself works only on the Text element. After upgrading to the pro version, you will see a database icon on the content editor of the Text element to add a dynamic content. There is no option to add a dynamic link, unfortunately.

Theme Builder and WooCommerce Builder

Theme builder is a common feature of a page builder. Today, nearly all page builders offer this feature. A theme builder allows you to create custom templates to replace the default templates of your themes. For instance, you can create a custom header template to replace the default header template of your theme. The theme builder of Zion Builder Pro allows you to create the following custom templates:

  • Header
  • Footer
  • Search results page
  • 404 page
  • Single post
  • Single page
  • Archive pages (categories and tags)

If you have WooCommerce installed and activated, you can also create custom templates to replace the default templates of WooCommerce. You can create custom single product page and product archive pages using the WooCommerce builder of Zion Builder Pro.

Transform

You can use this feature to add CSS transform to a certain element (without needing to write the CSS code). At the time of writing, Zion Builder supports only four properties (transform types): translate, rotate, skew, scale.

Custom Fonts and Icons

By default, Zion Builder offers only 6 font families: Arial, Times New Roman, Verdana, Trebuchet, Georgia, Segoe UI. We personally love this as narrower options mean more efficient workflow. You can use your own font families after all. The pro version of Zion Builder supports integrations with Google Fonts and Adobe Fonts (formerly Typekit). You can also upload your own font files in the following formats:

  • WOFF
  • TTF
  • SVG
  • EOT

While for the icons, Zion Builder makes use of the Font Awesome service. There are 1,535 icon options offered in total. If they are not enough, you can also upload your own icon files.

Global Colors

Global colors is a feature you can make use of to streamline your workflow. With this feature, you only need to change the color once and the change will be applied in the area where you use the global colors in. For instance, say you have used a global color on a column background and text color. In this case, when you change the global color used on the column background and the text color, the change will be applied to the column background as well as the text color.

You can define a global color from the Zion Builder settings page and access it on the settings panel when you want to set a color of a certain element.

Custom CSS

If you have CSS knowledge and want to apply on the page you are creating, you can also do so as Zion Builder Pro allows you to add custom CSS. To add one, you can go to the Advanced tab on the settings panel. The option to add custom CSS lies on the bottom side.

Pro Templates

Just like other page builders out there, Zion Builder also offers premade templates to streamline your workflow. The pro version offers more premade templates than the free version, for sure. Well, the premade templates offered by Zion Builder are still few in number. But upgrading to the pro version might grant you access to new upcoming new pro templates. To access the template library, you can click the plus button on the canvas area and click the Library tab on the appearing dialog panel.

Role Manager

This feature allows you to specify who has access to the Zion Builder editor. You can set the permission by the user level. This feature is handy if you have a WordPress site with multiple users with different levels. You can access the role manager feature via the settings page of Zion Builder.

The Verdict

Most WordPress users are now using a page builder when creating a new website or redesigning their website. Zion Builder is a new player in this segment. If you have ever used the more popular existing page builders like Elementor and Divi Builder, chances are you will come to a conclusion that the features offered by Zion Builder (the pro version) are very basic. You can’t even find an element to create a form whereas, it’s a crucial enough element. But again, Zion Builder is still young. As mentioned, some new features are currently being developed. If you enjoy the editing experience offered by Zion Builder and patient enough to wait until those features available then upgrading to the pro version is not a wrong decision. Or, you can wait for those features before upgrading to the pro version.

Brizy vs Divi Builder: Which One You Should Pick?

Brizy and Divi Builder are two of the page builder plugins we frequently cover here on WP Pagebuilders, other than Elementor. We also use them for some of the projects we have. Both Brizy and Divi Builder are great tools to create a dynamic WordPress-based website more effortlessly thanks to their respective visual editor. You don’t need to rely on what’s offered by the WordPress theme you use. Be it Brizy and Divi Builder allows you to customize every single part of your WordPress site. From the header, footer, homepage, archive pages, single post, and so on. No less important. They also allow you to add custom fields, allowing you to create a complex website without needing to have programming skills.

One question that might float on your mind, should you use Brizy or Divi Builder? Read on. You will find the answer shortly.

Brizy vs Divi Builder: Overview

There is a fundamental difference between Brizy and Divi Builder. Brizy, which was released in 2018, is a freemium plugin. In other words, you can use it for free without needing to spend a dime. You can use the free version of Brizy to figure out how it works so that you can decide whether it’s suited to your needs or not before you upgrade to the pro version. The free version of Brizy comes with basic elements like Button, Image, Text, Counter, Icon Box, and so on. Including the pro elements, there are about forty-two elements offered by Brizy.

Meanwhile, Divi Builder — which is developed by Elegant Themes — is released as a paid plugin. It was initially only available for the Divi Theme and the Extra Theme, but you can now use Divi Builder on any WordPress theme since Elegant Themes decided to release Divi Builder as a standalone plugin back in 2015. Although Divi Builder is released as a paid plugin, you have a chance to try it for free to find out how it works. You can visit this page to try the demo of Divi Builder. In Divi Builder, there are 38 design elements (called modules) you can make use of.

Brizy vs Divi Builder: The Editor

Every page builder plugin comes with a visual, drag-and-drop editor. That’s the essence of a page builder where you can create a beautiful page on your WordPress site without dealing with CSS or HTML. You can make use of the design elements offered by the page builder you use. In most cases, you can also add animation effects to make your page looks more attractive and interactive.

The editor of Brizy and Divi Builder offers a live editing experience where you can edit the content (i.e. the text content) directly on the canvas area. You can also resize a certain element thanks to the drag and drop functionality.

Brizy Editor Interface

Let’s start with the interface of the Brizy editor. If you use the WordPress block editor (Gutenberg) instead of the classic editor, it will take you faster to learn how to use the Brizy editor. The interface of the Brizy editor is pretty similar to Gutenberg in some ways. The two use the term “block” to mention a large container to host the design elements. To add an element to a block itself, you can simply click the plus button which lies at the top-left corner on the left panel. Here is the screencast of the editor interface of Brizy.

As you can see, the editor of Brizy has a large canvas area to design your page. The left panel (which plays a role to add elements and to arrange the blocks) takes only a little portion in the editor area. This offers a better editing experience for those working with a smaller screen (14 inches or smaller). Instead of a panel, Brizy offers a bar to make the settings. The settings panel exists, though. But you only need to open it to make advanced settings.

As said earlier, Brizy offers a live editing experience to make the editing process much easier. To edit a text, for instance, you can do it directly from the canvas area. No need to open a bar or panel. While to resize a column, you can simply drag the column you want to resize.

Once you are done editing your page, you can preview the final result without exiting the editor. You can click the arrow icon on the button-right corner to preview the page. But first, need save the changes by clicking the Save Draft button.

Divi Builder editor interface

Divi Builder offers a bit different editing experience than Brizy. In Divi Builder, the customization and styling process is made via a floating settings panel. The settings panel of Divi Builder will appear every time you click the gear icon on the element handle. There is an option to place the settings panel on the left side, but it takes a large portion of the editor area, making it less ideal in terms of editing experience. Especially if you use a laptop with a small screen. In Divi Builder, you can click the plus button on the canvas area to add a new element. There are three plus buttons you will find on the canvas area of Divi Builder. The grey plus button to add a module, the green plus button to add a new row, and a blue plus button add a new section.

If you are working on a large page that consists of plenty of sections and modules, Divi Builder allows you to switch to wireframe mode to make it easier for you to find a certain module to edit. To ease your job, you can add an admin label to the modules (and other elements) you add.

Another handy feature you can make use of when working on a long page is Layers View. Layers View is an additional navigation feature that allows you to jump to a certain module (or other elements) in a single click. If you have ever used Elementor, this feature is pretty similar to Elementor’s Navigator.

One of the drawbacks of Divi Builder is that it offers no simple way to resize a column. You need to add custom CSS to do so. Another drawback, you need to exit the editor only to preview the page.

Brizy vs Divi Builder: Design Elements

Design elements are a crucial thing to notice when you are looking for a page builder plugin as they determine the type of page you can create. In the context of page builder plugin, section is the term you have to familiarize yourself with. It is a large container where you can add columns and the actual design elements such as button, image, text, and so on.

Brizy

Instead of “section”, Brizy uses the term “block” to mention a large container to host columns and the actual design elements. These two terms refer to the same thing. In addition to block, other design elements offered by Brizy include column and element (called module in Divi Builder and widget in Elementor).

Block

To add a new block in Divi Builder, you can click the plus button on the canvas area. You can choose whether to add a block from scratch or from a premade template. A template library window will appear right after you click the plus button on the canvas area. You can make your choice here. To add a block from a premade template, you can simply select the template you like, and it will be imported to the canvas area. If you prefer to add a blank block, you can simply click Create your own.

To customize the block, you can click the mixer icon (or whatever you see it looks like) on the top-right corner of the block. This will open the settings bar where you can make the customization process.

There are two exclusive blocks in Brizy: Header and Footer. You can read our previous article to learn more about Brizy block.

Column

Unlike other page builder plugins, Brizy doesn’t treat a column as a required element. You can add an actual design element to the canvas area with or without adding a column first. To add a column, you can simply drag the Column element from the left panel to the canvas area.

To customize a column, you can click the arrow icon on the top-right corner of the associated column to open the settings bar.

You can read our previous article to learn more about how to work a column in Brizy.

Actual design elements

In Brizy, an actual design element is simply called an “element”. Brizy itself offers about forty-two elements in total. To add an element, you can simply drag the element you want to add to the canvas area as demonstrated in the column above. Here are the elements offered by Brizy:

Free Elements:

TextIcon Box
ButtonCounter
IconCountdown
ImageTabs
AudioProgress
VideoAccordion
SpacerMenu
LineRow
MapColumn
EmbedSidebar
FormShortcode

Pro Elements:

CarouselFacebook
GalleryTwitter
RatingComments
PlaylistPosts
TableBreadcrumbs
TimelinePost Title
SwitcherPost Excerpt
LottiePost Content
SearchPost Info
LoginPost Navigation

Divi Builder

There are four element types offered by Divi Builder to build your page: section, row, column, and module.

Section

In Divi Builder, section falls into three types: regular section (represented by blue color), specialty section (represented by orange color), and fullwidth section (represented by purple color). To add a new section, you can click the blue plus icon on the canvas area (or orange or purple depending on the last section type you added).

To customize a section, you can click the gear icon on the section handle to open the section settings panel.

Row

Row is a smaller container where you can add modules. When adding a new section in Divi Builder (a regular section more precisely) you are asked to add at least a row with a certain column structure. To add a new row, you can click the green plus button inside a section.

To customize a row, you can click the gear icon on the row handle (the green handle) to open the row settings panel.

Column

When adding a new row on a regular section, you are asked to select a column structure. You can add a column on an existing row. To do so, you can open the row settings panel by clicking the gear icon on the row handle. Under the Content tab on the row settings panel, you can simply click the Add New Column button to add a new column. To customize an existing column, you can click the gear icon.

Module

In Divi Builder, an actual design element is called module. There are thirty-eight modules offered by Divi Builder in total. To add one, you can click the grey plus icon on the canvas area.

To customize a module, you can click the gear icon on the module handle to open the module settings panel.

Here are the modules offered by Divi Builder:

AccordionEmail OptinPricing Tables
AudioFilterable PortfolioSearch
Bar CountersGalleryShop
BlogImageSidebar
BlurbLoginSlider
ButtonMapSocial Media Follow
Call to ActionMenuTabs
Circle CounterNumber CounterTestimonial
CodePersonText
CommentsPortfolioToggle
Contact FormPost NavigationVideo
Countdown TimerPost SliderVideo Slider
DividerPost Title

If you need more modules for certain needs, Divi Builder allows you to install extensions. You can discover Divi Builder extensions on the Divi Marketplace.

Brizy vs Divi Builder: Additional Features

Features like the ability to create a custom header and footer, the ability to add custom fields, and so on can be an added value for a page builder. Today, most page builder plugins offer similar features. For instance, be it Brizy or Divi Builder offers a feature to allow you to add custom fields. They also come with a feature to allow you to create a custom header or footer for your WordPress site.

However, there are some details that distinguish Brizy and Divi Builder. For instance, Divi Builder offers CSS transform to allow you to add an advanced hover effect more effortlessly (without needing to add CSS code). In Brizy, you need to CSS code to add CSS transform to an element. Another example, the header/footer builder of Brizy doesn’t support display condition yet, which takes longer to create a custom header for your website as you need to edit every single page (and template) where you want to add the custom header/footer to.

We have created a table that compares the features offered by Brizy and Divi Builder.

FeaturesBrizyDivi Builder
Header/Footer BuilderYes (doesn’t support display conditions)Yes
Popup BuilderYesNo
Dynamic Content/Custom FieldsYesYes
Form BuilderYesYes
Third-party IntegrationYesYes
Mega Menu BuilderYesNo
Maintenance/Coming Soon ModeYesNo
Responsive EditingYesYes
Global ElementsYesYes
Custom CSSYesYes
Motion EffectsYesYes
Icons LibraryYesYes
Custom FontsYesYes
Premade Templates/LayoutsYesYes
Role ManagerYesYes
Maintenance/Coming Soon ModeYesNo
Extensions SupportNoYes

Brizy vs Divi Builder: Pricing Options

You can’t install Divi Builder on your WordPress site for free since it is released as a paid plugin. While for Brizy, you can get the free version of it on the WordPress plugin directory. If you want to use the pro version of Brizy, there are three pricing plans you can opt to, with the cheapest plan costs $49 per year.

At a glance, Divi Builder looks pretty expensive as you need to spend $89 to get it but you will have access to five products at that price: Divi Theme, Extra Theme, Monarch, Bloom, and Divi Builder itself. Plus, you can install those products on as many sites as you want. Take a look at the table below to see the price comparison between Brizy and Divi Builder.

PlansBrizyDivi Builder
Lowest plan$49 /year for 3 sites$89 /year for unlimited sites (or $249 for a one-time purchase option). Full access to all Elegant Themes’ products
Middle plan$99 /year for unlimited sites
Highest plan$299 one-time purchase for unlimited site, includes white-label feature
Download Brizy ProDownload Divi Builder

Brizy vs Divi Builder: The Verdict

Both Brizy and Divi Builder are a great tool to create a website with WordPress. Not only you can use them to create beautiful pages on your website. You can also use them to create a custom header, custom footer, custom single post, custom archive pages, custom homepage, and so on. By using Brizy or Divi Builder, you don’t need to rely on what’s offered by your theme, which often limited. Overall, the features offered by Brizy and Divi Builder are not much different. The two offer a live editing experience, the ability to add custom fields, and so on. As you can see above, we have created a comparison table to make it easier for you to compare the features offered by Brizy and Divi Builder.

Be it Brizy or Divi Builder has pros and cons. Divi Builder, for instance, has no popup builder feature so that you can’t create a popup with it. While Brizy has one. On the other hand, the theme builder feature of Brizy has a significant enough drawback in which it doesn’t support display conditions. In the end, everything falls to your needs.

How to Display the Last Updated Date of an Article in Divi Builder

There are some details that make your visitors get convinced of your article before they read further. One of which is about the publication date or when did the article last updated. It makes sense enough as the newer the article, the more relevant it is with the case that is being faced by your reader. That being said, it’s crucial enough to display the last updated date of the articles on your site if you update them regularly.

When creating a custom single post template in WordPress using Divi Builder, you can display the post meta such as author, comment count, date, and so on. But unlike Elementor and tagDiv Composer, Divi Builder has no built-in module or setting option to display the last updated date of an article. To display the last updated date of an article in Divi Builder, you can use the Divi Post Data extension.

How to Display the Last Updated Date of an Article in Divi Builder

Divi Post Data is a Divi Builder extension developed by WP Creator’s Club. It is a paid extension which you can get on Divi Marketplace for $5 (can be installed on unlimited sites). In addition to displaying the last updated date of an article, the Divi Post Data extension also allows you to display other information about a blog post like the estimated reading time, word count, and time since the last update. You can display the information via a module called Post Data, which is added by the Divi Post Data extension.

To start using the Divi Post Data extension, make sure you to install it first. Activate the extension right away once installed. Once the extension is installed and activated, you can edit the custom single post template you created with Divi Builder (or create a new one). On the Divi Builder editor, add a new module by clicking the grey plus icon and select Post Data.

The Post Data settings panel will appear right after you add the Post Data module. On the Type of Data option on the Text block under the Content tab, select Updated Date. Set the prefix and the suffix on the Prefix Text and Suffix Text fields, respectively. You can also set the date format on the Date Format field.

If you want to add an icon, you can open the Image block (also under the Content tab). Enable the Use Icon option and select the icon you want to use use.

Style Up the Module

To style up the Post Data module, you can go to the Design tab on the Post Data module settings panel. First, you can open the Image & Icon block to set the size of the icon, the color of the icon, and the position of the icon.

To set the typography (font family, font size, font style, and so on), you can open the Content Text block (also under the Design tab). From this block, you can also set the text color, alignment, and text shadow.

To set the margin and padding, you can open the Spacing block on the Design tab.

You can explore other blocks on the Design tab to apply more styling options to the Post Data module. Make sure to click the white checklist icon on the bottom-right corner of the settings panel to apply the changes you made. Once you are done editing the single post template, you can update/publish it.

How to Add Breadcrumbs in Divi Builder

Compared to other page builder plugins like Elementor and Brizy, the elements offered by Divi Builder tend to limit. Divi Builder has no built-in design element (module) to add breadcrumbs to a page. Well, it actually has one, but only for WooCommerce. So, how to add breadcrumbs to a regular page? You can add breadcrumbs to a regular page with the help of Breadcrumbs Divi Module.

Breadcrumbs Divi Module is a Divi Builder extension developed by LearnHowWP.com. It adds a new module called Breadcrumbs on the Divi Builder. You can then use the module when creating a page or theme builder template (i.e. single post template) using Divi Builder. The extension itself is released for free so that you can use it without needing to spend extra money. You can download the extension on the official plugin directory of WordPress.

How to Add Breadcrumbs in Divi Builder

Before getting started, make sure you have installed and activated the Breadcrumbs Divi Module extension on your WordPress site. Once the extension is installed and activated, create a new page (or edit an existing page) and edit it with Divi Builder. On the Divi Builder editor, click the plus grey icon on the canvas area to add a new module and select Breadcrumbs.

Customizing the Breadcrumbs

Once the Breadcrumbs module is added, you can customize it from the Breadcrumb settings panel which appears right after you add the module. First, you can set the prefix or suffix on the Text block under the Content tab.

Next, you can open the Icon block (also under the Content tab) to set the separator.

To set the color of the breadcrumbs, you can open the Breadcrumbs Styles block under the Design tab. From this block, you can set the link color, the separator color, as well as the current text color.

To set the typography of the breadcrumbs, you can open the Module Text block (also under the Design tab). From this block, you can set the font family, font style, and font size of the breadcrumbs.

To set the spacing of the breadcrumbs — be it the padding or the margin –, you can open the Spacing block under the Design tab.

Don’t forget to click the green checklist icon on the bottom-right corner of the settings panel to save the changes you made. You can publish/update your page once you are done editing it.

How to Add a Hover Effect to a Column in Elementor

Elementor has helped a lot in creating a website, in which the emphasis is on design. In Elementor, you can add some animation effects to make your website be more interactive. One of the animation effects you can add to an Elementor-powered page is a hover effect. You can add a hover effect whether to a section, column, or widget. This article will show you how to add a hover to a column in Elementor. By the way, if you are new to Elementor, you can refer to our previous article to learn how to use Elementor.

How to add a hover effect to a column in Elementor

In Elementor, column is a required element. It is where you can add widgets — the actual design elements to create your page. Same as other element types in Elementor, you can also style up a column to make it looks stylish. You can add a solid color background, image background, shadow, to hover effect. The built-in hover effect of Elementor allows you to use a different background, different border, and different box shadow on the hover state.

To start adding a hover effect to a column in Elementor, first, click the handle of the column you want to add the hover effect to — to switch the settings panel to the column settings model.

On the settings panel (panel on the left side), go to the Style tab and open the Background block. On the Background block, you can open the HOVER tab to set a different background on the hover state. You can use whether a solid color background, a gradient color background, or an image background. You can also set the transition duration (the transition from the normal state to the hover state) on the Transition Duration option.

Still on the Style tab, open the Background Overlay block to set a background overlay. You can open the HOVER tab on this block to set a different background overlay on the hover state. You can use whether a solid color overlay or a gradient color overlay. You can also apply CSS filters from this block, as well as the transition duration.

To set a different border and different box shadow on the hover state, you can open the Border block. Click the HOVER tab on this block and set the border style, border size, border color, border radius, and box shadow for the hover state. You can also set the transition duration on the Transition Duration option.

Adding an advanced hover effect to a column in Elementor

Unlike Divi Builder, Elementor doesn’t use CSS transform for its hover effect. As a result, you can only add basic hover effects. But since Elementor (the pro version) allows you to add custom CSS then you can use custom CSS to add a CSS transform in order to add an advanced hover effect. Take a look at the screencast below.

The hover effects on the screencast above are created using CSS transform.

To add CSS transform to a column, first go to the Advanced tab and open the Custom CSS block (make sure the settings panel is on the column settings panel mode). Add the following CSS code.

The code:

selector:hover {
    transition: all .2s ease-in-out;
    transform: scale(1.2);
    cursor: pointer;
    z-index: 1;
}

In CSS transform itself, there are 5 transform styles you can use:

  • Matrix
  • Translate
  • Scale
  • Rotate
  • Skew

The CSS code above uses the scale transform. You can simply replace it with the transform style you like. Read this page to learn more about CSS transform.

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.