Brizy vs Elementor: Which One You Should Use?

The era has changed. You no longer need to rely on a theme to create a unique website with WordPress. Instead, you can use a page builder plugin to create a website with your own design. You don’t need to have web programming skills as a page builder plugin comes with a visual editor where everything is drag and drop. There are a bunch of WordPress page builder plugins out there. If you have never used a page builder plugin before, you might want to start from a free version. If so, Brizy and Elementor are perfect options as they are released as a freemium plugin, meaning that there is a chance to use them without spending a dime.

The question is, which one you should use? Brizy or Elementor? That’s what we are going to discuss in this article.

In addition to being a freemium plugin, both Brizy and Elementor have several other things in common. They both come with a theme builder feature, popup builder, the ability to add dynamic content, and so on. Both Brizy and Elementor also come with a very intuitive editor.

Brizy vs Elementor: Overview

Brizy is a younger player in the page builder field than Elementor. Brizy was released in 2018 while Elementor was released in 2016. No wonder if Elementor already has a more established ecosystem and community. Brizy, on the other hand, started to get attention from the WordPress community mainly because it has a remarkably simple, intuitive editor.

One key thing that differs between Brizy and Elementor is the ecosystem. Elementor has a more open ecosystem than Brizy as it allows third-party developers to develop add-ons, which is great to enrich the Elementor functionality itself. Third-party developers can develop widgets that are not available on Elementor by default or other extensions to add certain features or functionalities to an Elementor-powered page. At the time of writing (October 28, 2020), Brizy hasn’t supported such a scenario. In other words, you are limited to default elements offered by Brizy (which are 42 in total).

Brizy, on the other hand, offers a cloud service which is great if you work for a web agency as you can save predefined elements to the cloud and use them on different projects. In Elementor, you need to install an add-on to get such a feature (WunderWP is one of the add-ons that you can use).

Brizy vs Elementor: The Editor Interface

The interface of the editor is one of the reasons that make users fall in love with both Brizy and Elementor. Actually, all WordPress page builder plugins come with a visual editor, but the editor interface of Brizy and Elementor is a bit different. They really allow you to create a page (or an entire site) in a visual way.

Brizy

Brizy might is the easiest to use WordPress page builder plugin. The interface of its editor is really easy to learn and use even for those who have never used a page builder before. Another compelling point, it’s extremely lightweight compared to the editor of other page builders such as Divi Builder and even Elementor. The editor interface of Brizy makes it possible for you to implement the mobile-first design concept. You can easily switch to the laptop mode, tabled mode, and smartphone mode when editing a page.

To add an element to your design, you can simply drag one from the left panel to the canvas area.

The customization process of an element is made via a bar (we call it the settings bar) which will appear as you click the associated element. From the settings bar, you can make the customization according to the associated element. For instance, if you are customizing the Text element, you can set the things like text color, typography, alignment, and so on. If you want to make advanced settings like padding and margin, you can open the settings panel by clicking the gear icon on the settings bar.

Brizy supports drag and drop functionality to set the spacing between elements or resize the columns.

One key downside of the Brizy editor interface is the absence of the navigator to jump between elements more effortlessly. As a comparison, Elementor and Divi Builder have such a feature.

Elementor

Same as Brizy, Elementor also comes with an intuitive interface that is easy to use. However, the editor of Elementor is a bit heavier to load especially if you have too many active add-ons. The more add-ons you have, the longer the editor to load.

Elementor has a centralized panel — which lies on the left side. It is a versatile panel. You can use the panel to add elements (called widgets in Elementor) and make the customization to a widget.

In Elementor, you can also implement the mobile-first design concept if you need to as you can effortlessly switch between modes (laptop, tablet, and smartphone) on page editing.

One feature available on the Elementor editor that is not available on Brizy editor is Navigator. This feature is particularly useful if you are working on a long page as you can effortlessly jump between sections, columns, or even widgets without making a further scroll.

Brizy vs Elementor: Design Elements

The availability of design elements should be your concern when choosing a page builder plugin. Elementor is superior to Brizy in this area. Usually, the design elements of a page builder fall into three types:

  • Section (called blocks in Brizy)
  • Column
  • The actual design elements to create the design.

Brizy

As we have just mentioned above, there are three types of elements you can use to create a page using a page builder plugin. Brizy uses a different term for the section. Instead of “section”, it uses the term “block”. Both terms refer to the same element. While for the actual design elements, Brizy simply uses the term “elements”. Here are the elements offered by Brizy that you can use to create a page:

  • Block: A block is a large container that hosts columns and elements. A page can consist of blocks.
  • Column: A column is a smaller container that hosts elements. Unlike other page builders like Elementor and Divi Builder, a column is not required in Brizy.
  • Element: The actual design element to create your design. Brizy offers forty-two elements in total. Twenty-two of them are available on the free version.

Brizy Regular Elements (Free and Pro):

TextShortcodeSwitcher
ButtonSidebarLottie
IconColumnSearch
ImageRowLogin
AudioTabsFacebook
VideoProgressTwitter
SpacerAccordionComments
LineMenuPosts
MapCarouselBreadcrumbs
EmbedGalleryPost Title
FormRatingPost Excerpt
Icon BoxPlaylistPost Content
CounterTablePost Info
CountdownTimelinePost Navigation

Brizy WooCommerce Elements:

TitleMeta
ExcerptRating
ContentAttributes
PriceUpsell
GalleryBreadcrumbs
Add To CartReview
StockProducts
SKUCategories

Elementor

Same as Brizy, Elementor also offers three element types that you can use to create a page or template.

  • Section: A large container to host columns and the actual design elements (called widgets in Elementor)
  • Column: A smaller container to host widgets. In Elementor, a column is required. A section needs to have at least one column.
  • Widget: The actual design elements to create the design. There are over ninety widgets offered by Elementor in total.

Elementor Regular Widgets (Free and Pro):

Inner SectionTable of ContentsToggle
HeadingCountdownSocial Icons
ImageShare ButtonsAlert
Text EditorBlockquoteSoundCloud
VideoFacebook ButtonShortcode
ButtonFacebook CommentsHTML
DividerFacebook EmbedRead More
SpacerFacebook PageText Path
Google MapsTemplateSite Logo
IconLottieSite Title
GalleryCode HighlightPage Title
FormVideo PlaylistNav Menu
LoginPayPal ButtonSearch Form
SlidesImage BoxSitemap
Nav MenuIcon BoxMenu Cart
Animated HeadlineStar RatingPost Title
HotspotImage CarouselPost Excerpt
Price ListBasic GalleryPost Content
Price TableIcon ListFeatured Image
Flip BoxCounterTable of Contents
Call to ActionProgress BarAuthor Box
Media CarouselTestimonialPost Comment
Testimonial CarouselTabsPost Navigation
ReviewsAccordionPost Info

Elementor WooCommerce Widgets:

ProductsProduct Stock
WooCommerce BreadcrumbsProduct Meta
Custom Add To CartShort Description
WooCommerce PagesProduct Content
Product CategoriesProduct Data Tabs
Menu CartAdditional Information
Product TitleProduct Related
Product ImagesUpsells
Product PriceArchive Title
Add To CartArchive Products
Product RatingArchive Description
CartCheckout
My Account

Brizy vs Elementor: Features

In addition to allowing you to create beautiful pages without coding, both Brizy and Elementor also come with some useful features. You can create a custom header/footer with their theme builder, create beautiful popups with their popup builder, easily turn your site into either maintenance mode or coming soon mode using their built-in maintenance/coming soon mode feature, and so on.

One feature offered by Brizy that is not available on Elementor is a mega menu builder. In Elementor, you need to install JetMenu to create a mega menu. On the other hand, Elementor seems to be more serious about supporting WooCommerce, making it an ideal choice if you want to create an e-commerce website. Elementor allows you to create custom templates for nearly all parts of WooCommerce, including the checkout page. Also, it allows you to add more elements thanks to 19 WooCommerce widgets.

For a marketing purpose, both Brizy and Elementor supports integration with popular marketing tools like HubSpot, Mailchimp, Active Campaign, and so on. Here is a comparison table that compares the availability of features on both Brizy and Elementor.

BrizyElementor
Theme BuilderYesYes
Popup BuilderYesYes
Dynamic ContentYesYes
Form BuilderYesYes
Third-party IntegrationYesYes
Mega Menu BuilderYesNo
Maintenance/Coming Soon ModeYesYes
Responsive EditingYesYes
Global ElementsYesYes
Custom CSSYesYes
Motion EffectsYesYes
Icons LibraryYesYes
Custom FontsYesYes
Premade Templates/LayoutsYesYes
Role ManagerYesYes
Add-ons SupportNoYes

Brizy vs Elementor: Pricing options

Both Brizy and Elementor are released as a freemium plugin, meaning that you can use them for free in case you don’t need features like theme builder and popup builder. If you have no plan to upgrade to the pro version, Brizy might is a better-suited option as the free version of Brizy comes with some more advanced elements, including the Form element which you can use to create a form (the free version doesn’t support integration with third-party service).

Be it Brizy or Elementor offers three plans for the pro version. Brizy offers a one-time purchase option while Elementor doesn’t. Also, Brizy offers a white label feature on its highest plan.

BrizyElementor
Lowest plan$49 /year for 3 sites$59 /year for 1 site
Middle plan$99 /year for unlimited sites$199 /year for 25 sites
Highest plan$299 one-time purchase for unlimited site, includes white-label feature$399 /year for 1,000 sites
Get Brizy ProGet Elementor Pro

Brizy vs Elementor: The Verdict

It’s extremely hard to conclude which is the better between Brizy vs Elementor. The two come with a very intuitive visual editor to make web creation way easier and fun. In the end, it’s all depends on your needs. If you want to create an e-commerce site, for instance, we highly recommend Elementor. In addition to allowing you to customize nearly all of the parts of your site, you can also add more advanced features to your e-commerce site via add-ons.

If you work for a web agency that creates websites for clients, Brizy might is a better-suited option as it offers a one-time purchase option and white label feature to allow you to replace the Brizy branding with your company branding. Be it Brizy or Elementor supports integration with custom field plugins like ACF and Pods. This is great as you can add specific features or functionalities to the website you are creating without installing too many plugins. You will enough with two plugins: the page builder of your choice and a custom field plugin.

Divi Builder. The Perfect WordPress Page Builder Plugin for Agencies

Divi Builder probably is the best WordPress page builder plugin for agencies. We said so because its license allows you to use it for as many websites as you want. In other words, you can create websites for all of your clients with only a single license. Each website can have a unique API key for update needs. If you want to use it for personal use, you might love the fact that the licensing applied by Elegant Themes (the developer of Divi Builder) also allows you to download two useful WordPress marketing plugins: Bloom and Monarch.

Are there other reasons to use Divi Builder? Read on to learn more.

Divi Builder: The Intro

Divi Builder is a WordPress plugin developed by Elegant Themes. The plugin was initially only available for Divi and Extra, two premium WordPress themes developed by Elegant Themes. In 2015, Elegant Themes announced that its page builder was available as a standalone plugin. Meaning that you can use it on any WordPress theme, not limited to Divi and Extra anymore.

One crucial thing you need to know. Divi and Divi Builder are two different products. Divi (just “Divi”) is a WordPress theme while Divi Builder is a page builder plugin. If you prefer to use Divi Builder on the Divi theme (and Extra theme), you don’t need to install the standalone plugin as it is available as an integral part of those two themes. If you install Divi theme or Extra theme on your WordPress site, Divi Builder also automatically installed.

Is there are differences between Divi Builder as a standalone plugin and Divi Builder as a built-in feature of Divi theme and Extra theme? Nope. At all.

Divi Builder is released as a premium plugin. Elegant Themes offers two options to get it: with a yearly subscription ($89 per year) and a one-time purchase option ($249). As we said in the opening section, the license applied by Elegant Themes allows you to use its products (including Divi Builder) on unlimited websites, make it a great option for agencies.

Divi Builder: The Features

Visual editor is the main feature offered by page builder plugins. Divi Builder is no exception. With it, you can create a beautiful page without needing to deal with CSS or HTML. Everything is drag and drop. It also comes with a theme builder feature which you can use to create custom templates for the header, footer, and other parts of your theme. Here are the features you will get.

Visual Editor

You will have a visual editor to edit your post or page in a visual way. You just need to add the elements you need and then make the customization accordingly. In Divi Builder, elements fall into 3 types:

  • Section: Represented in a blue
  • Column: Represented in a green
  • Module: Represented in a grey

Clicking the gear icon on each element will open a panel where you can make the customization and styling. To add a new element, you can click the plus button.

If you work on a long page, there is also a handy feature you can make use of — Layers View — to make it easier for you to jump between elements on your page. You can use the feature to jump to a certain section, column, or even module in a single click instead of making a long, deep scroll.

Theme Builder

Divi Builder was initially a mere page builder plugin. It had no feature to create a custom header template or a custom footer template like it is today until version 4.0 was introduced in 2019. Since version 4.0, it allows you to create custom templates to replace the default templates of your theme thanks to its Theme Builder feature. This is great as you can create a fully customized website without coding. You can create custom templates using its visual editor. The theme parts you can create the custom fields of are:

If you use WooCommerce, you can also create custom templates for the single product page, product category page, and other WooCommerce pages.

The Theme Builder feature supports display conditions, allowing you to assign a certain custom template to a specific page(s) or post(s). You can, for instance, create a custom single post template and assign it to posts under a specific category, a specific tag, a specific author, and so on.

Dynamic Content

The ability to add dynamic content is a crucial enough feature you need to notice when selecting a WordPress page builder. Today, most page builder plugins come with this feature, including Divi Builder. You can add dynamic content — whether the default WordPress dynamic content types such as featured image, post title, post meta, and so on — or custom fields you created with Advanced Custom Fields.

The ability to add dynamic content is especially should be your priority if you plan to use the Theme Builder feature as it will allow you to add the required elements such as post title, post meta, site logo, site title, and so on.

One thing to note if you plan to add custom dynamic content from custom fields. At the time of writing, Divi Builder only supports Advanced Custom Fields. You read this article to learn more.

Premade Layouts

You have two options to create a page using Divi Builder. First, you can create the page from scratch. You can choose this option if you have your own design concept. Second, you can create the page from a premade layout. A premade layout contains predefined elements (sections, columns, and modules). If you want to create a page from a layout, you can simply import one and then tailor the default content (images, texts, and so on) with your own ones. This is a saver time way to create a page with Divi Builder. Also, it is a great option if you have no idea about the concept of the design you want to create.

Divi Builder provides the layouts in packs. A layout pack is a set of premade layouts designed specifically for a certain website type. A layout pack can consist of 4 to 8 premade layouts. There are over 180 layout packs offered in total (over 1,300 layouts).

Modules

Modules are the actual design elements you will use to create a page and other design types (templates and posts) in general. Compared to other page builders, say Elementor, the modules offered by Divi Builder tend to fewer (read: Elementor vs Divi). It offers only 39 modules as follows:

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 TitleIcon

If you need more modules, you can visit Divi Marketplace to discover Divi plugins developed by third-party developers. Some plugins, like Divi Supreme and Divi Essential, offers a set of modules to allow you to add more creative elements to a page.

In addition to the modules above, Divi Builder also offers dedicated modules for WooCommerce. The WooCommerce modules will only show up if you have WooCommerce installed and activated on your WordPress site. Here are the Divi Builder modules for WooCommerce:

Woo BreadcrumbsWoo NoticeWoo Product Rating
Woo Cart ProductsWoo Product Add To CartWoo Product Reviews
Woo Cart TotalsWoo Product DescriptionWoo Product Stock
Woo Checkout BillingWoo Product GalleryWoo Product Tabs
Woo Checkout DetailsWoo Product ImagesWoo Product Title
Woo Checkout InformationWoo Product InformationWoo Product Upsell
Woo Checkout PaymentWoo Product MetaWoo Products
Woo Checkout ShippingWoo Product PriceWoo Related Products
Woo Cross Sells

Third-Party Integration

If you use tools like HubSpot, Mailchimp, MailerLite, or similar tools, you can also integrate your account with your website. Divi Builder supports integration with those third-party tools. You can integrate your account using the Email Optin module. Here is the list of the third-party tools and services you can integrate Divi Builder with:

  • ActiveCampaign
  • Aweber
  • CampaignMonitor
  • ConstantContact
  • ConvertKit
  • Emma
  • Feedblitz
  • FeedBurner
  • GetResponse
  • HubSpot
  • iContact
  • Infusionsoft
  • MadMini
  • Mailchimp
  • MailerLite
  • MailPoet
  • Mailster
  • Ontraport
  • SalesForce
  • SendinBlue

Global Elements

The ability to add a global element is another handy feature offered by Divi Builder to streamline your workflow. It is another time-saver feature offered by the page builder.

What is a global element?

Say you want to create a website that consists of 8 pages. On each page, you want to add a button that has exactly the same style (color, behavior, typography, size, and so on). Instead of making the styling on each button — which is very time consuming –, you can create a global button. By creating a global button, you only need to make the styling once. If you make a change to the global button, the change will be applied to all pages it is added to.

Divi Builder allows you to create a global item for all elements (section, column, and module).

Display Conditions

The Display Conditions of Divi Builder allows you to control the visibility of your content. You can show or hide certain elements on your page by certain parameters such as user login status, user role, web browsers, operating system, date and time, cookie, and so on. You can apply a Display Condition to all Divi Builder elements. Be it section, column, or module. The Display Conditions of Divi Builder supports the following parameters:

  • Login Status
  • User Role
  • Web Browser
  • Operating System
  • Cookie
  • Date and Time
  • Page Visit
  • Post Visit Product Purchase
  • Cart Contents
  • Number of Views
  • Post Information
  • Website Location

You can read this post to learn more about the feature.

Background Pattern and Mask

Background pattern and background mask started available in Divi 4.15.0. The features allow you to add extra decorations to a background. Be it a section background, column background or module background. Divi offers 20+ background patterns you can choose from. They are available in a vector format so that you can scale them without compromising the quality of the pattern image.

Background mask, just like the name suggests, allows you to add a layer mask to your background. There are 20+ mask shapes to choose from and you can set things like aspect ratio, color, and blend mode when adding a mask to your background.

Both background pattern and background mask can be accessed from Content tab on the settings panel. You can open the Background settings block to access them.

The Bottom Line: Divi Builder Review

Overall, Divi Builder is a great page builder plugin. It allows you to create beautiful pages on your WordPress site without dealing with CSS. The ability to create custom templates for header, footer, and so on is another selling point. The biggest downside of Divi Builder probably is its limited modules collection. As a comparison, Elementor offers over 90 modules (called widgets) while Brizy offers 42 modules (called elements). But as long as the offered modules can cover your needs, it is not a serious problem.

The licensing applied by Elegant Themes is the most compelling selling point, especially if you work for a web agency. With a single license, you can use Divi Builder (and other Elegant Themes products) to build as many sites as you want, which is great to cut off the production cost.

Pros:

  • Great navigation feature on the visual editor
  • Complete enough features
  • Not limited to a certain theme
  • Compelling licensing, especially for web agencies
  • Open ecosystem

Cons:

  • Lacks of modules
  • The editor is a bit heavier. At least when compared to Elementor

4 Best WordPress Theme Builder Plugins (All-time)

Theme is one of the required components of WordPress. It is what makes each WordPress-based site unique in terms of appearance. A WordPress theme controls the appearance and display of a site via templates (PHP files) and stylesheets (CSS files). In other words, you need to master both PHP and CSS to be able to create a WordPress theme. Today, most modern WordPress themes also use JavaScript.

It was then. You can now create your own WordPress theme without coding using a WordPress theme builder.

What is a theme builder?

In the context of WordPress, theme builder is a plugin that allows you to create custom templates to replace the default templates of your theme. You don’t need to have programming skills as the emphasis of theme builder is no-code approach. You can create a custom template the visual way using the editor offered by theme builder plugin.

Understanding the Parts of a WordPress Theme

Before getting started to use a WordPress theme builder to create your own theme, it’s crucial to understand the parts of a WordPress theme. In general, here are the parts of a WordPress theme:

  • Header
  • Footer
  • Single post layout
  • Single page layout
  • Archive page
  • Search results page
  • 404 page

The appearance of those parts is defined using templates and stylesheets on the theme you use. A theme builder allows you to create custom templates to replace the default templates of your theme.

How a Theme Builder Works

You have just read it. A theme builder allows you to create custom templates to replace the default templates of your theme. You can create the custom template in a visual way using the editor of the theme builder you use. One of the advantages of using a theme builder is that you can assign a certain custom template to certain pages or posts on your WordPress site thanks to the display condition feature. For instance, you can create a custom single post template and assign it to posts under a certain category so that the template will only be applied to posts under the category you assigned the custom template to. This is great as you can create different templates for different post types.

The ability to set display conditions also allows you to have multiple header/footer templates on a single website, which is great as it offers flexibility for you to run different campaigns on different pages using different header/footer.

To give you a more obvious illustration, let’s take a look at the following image.

The image above is the default header of a WordPress theme called Agency Plus. With a WordPress theme builder, you can replace the default header above by creating a custom header template. Here is an example:

The image above is an example of a custom header template created with Elementor. In addition to custom design, you can also apply more compelling header behavior such as sticky effect, hide on scroll, and so on.

Best Theme Builder Plugins for WordPress

1. Elementor Pro

Elementor is the main reference when it comes to theme builder plugin. It is by far the most popular theme builder plugin for WordPress with over 12 million active users. Elementor is released as a freemium plugin, but you need to use the pro version to be able to use its theme builder feature. The theme builder feature of Elementor allows you to create the custom templates for the following site parts:

If you use WooCommerce, Elementor also allows you to create a custom single product page and other pages on WooCoomerce.

2. Brizy Pro

Brizy is a lightweight page builder that comes with a very intuitive interface. You will easily fall in love with Brizy after trying it due to its simplicity. Same as Elementor, Brizy is also released as a freemium plugin, but you need to use the pro version to use its theme builder. The theme builder feature of Brizy allows you to create custom templates to replace the following theme parts:

If you love mega menu then Brizy is a perfect option as it comes with a built-in feature to create a mega menu. Brizy can also be used to create custom pages for WooCommerce.

3. Divi Builder

Divi Builder is a premium page builder plugin developed by Elegant Themes. There is no option to use it for free. Elegant Themes itself is the developer of two popular premium WordPress themes: Divi and Extra. Even so, Divi Builder can be installed on any WordPress theme, not limited to Divi theme and Extra theme. If you prefer to use Divi Builder on Divi theme or Extra theme, you don’t need to install the Divi Builder plugin as it is available as an integral part of those themes. Divi Builder also comes with a theme builder feature that allows you to create custom templates for the following theme parts:

If you have WooCommece installed and activated, you can also create a custom single product page and other pages for your WooCommerce.

4. Breakdance

Breakdance is a feature-rich page builder for WordPress that comes with an intuitive editor. One of the features offered by the plugin is theme builder which you can use to create custom templates for your WordPress website. You can use Breakdance to create custom templates for site parts like header, footer, archive pages, and single post pages. Its display condition feature allows you to assign a certain template to specific page(s) or post(s) on your website.

You can also step further with Breakdance to create a more complex dynamic website with WordPress by utilizing its built-in loop builder.

Here are the custom templates you can create with Breakdance theme builder:

  • Header
  • Footer
  • Archive pages (categories, tags, and author page)
  • 404 page
  • Search results page

The Bottom Line

You used to need to master PHP, CSS, JavaScript, and HTML to create a WordPress theme. Again, it was an old story. The theme builder era has made it possible for you to create a fully customized WordPress-based website, no matter the theme you use. Some page builder plugins — including Elementor, Brizy, and Divi Builder — come with a theme builder that allows you to create custom templates to replace the default templates of your active theme. In a visual way. Without coding.

How to Add Social Media Follow Buttons in Brizy

Being an integral part of today’s life, it’s nearly impossible to overlook social media for marketing. You need social media to maintain communication with your clients or to share the updates about your business. If you have a website, you can integrate the social media of your business with your website to make it easier for your clients to find the official accounts of your business. Adding social media follow buttons is the most common practice to integrate social media with website.

Unlike Elementor, Divi Builder, and other page builder plugins, Brizy offers no specific element dedicated to adding social media follow buttons. So, how to add social media follow buttons in Brizy? There are two elements you can use: the Icon element and the Button element. In this article, we will show you how to add social media follow buttons in Brizy using the Icon element.

In case you are new to Brizy. You can read our previous article to learn how to use Brizy.

Adding social media follow buttons in Brizy

We assume that you already know how to edit a page using Brizy. You can click the link we provided above in case you are completely new to Brizy.

First, add the Icon element to the canvas area by dragging it from the left panel.

Duplicate the icon according to the number of social media accounts you want to add. To do so, click the existing icon followed by the two-paper icon on the appearing bar.

The next step is, you can customize each icon. You can replace the default icon with a certain social media platform and then add the link to your account. Let’s take the first icon as an example. Click the first icon to open the settings bar. To replace the default icon, you can click the Icon tab on the settings bar. Simply click the icon to select a new icon. You can then set the size on the Size option and the spacing on the Spacing option. To add the border, you can open the Background tab.

To add your link account, you can click the chain icon on the settings bar. To change the color of the icon, you can click the Colors tab. From the Colors tab, you can set the colors of the icon, border, and background. You can set the colors of each state (normal and hover). You can click the icons on the left side to switch between states.

You can repeat the steps above on the remaining icons. Tailor the link as well as the color according to the social media platform you want to add.

If you want to use the Button element instead of Icon, the idea is the same. You can duplicate the button and then customize each duplicated button. If you use the Button element, you can replace the default button text — as well as the icon — with a certain social media platform. For instance, to add Twitter, you can replace the default button text (“BUTTON”) with “Twitter” or any text to your liking.

How to Create a Full-Screen Menu in WordPress Using Brizy

Brizy is a relatively new player in the WordPress page builder field (Brizy was released in 2018, younger than Elementor and Divi Builder). But in terms of features, Brizy is not inferior to its seniors, especially on the menu section. Brizy, for instance, comes with a built-in feature to create a mega menu. With the Brizy popup builder feature, you can even create other menu types such as a full-screen menu and an off-canvas menu. This article will show you how to create a full-screen menu in Brizy.

You will only need two steps to create a full-screen menu in WordPress using Brizy:

  • Create the menu using Brizy popup builder
  • Call the popup via a link

Since we need the Brizy popup builder feature, you need to upgrade your Brizy to the pro version in case you haven’t done so.

Step 1: Create the menu using Brizy popup builder

The popup builder of Brizy supports several trigger types. One of which is on-click. You can make use of this trigger type (on-click) to create the full-screen menu. The idea is, you create a popup and set the trigger type to on-click and then call the popup using a link.

First off, 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 and click the Edit with Brizy button to edit the popup using Brizy. This will open the Brizy editor.

Click the plus button on the canvas area to start creating the popup. You can either create the popup from scratch or from a premade template. To create the popup from scratch, you can simply click Create your own. Conversely, you can simply select a premade template you like to create the popup from a premade template. In this example, we will create the popup from scratch.

Before setting the popup into a full-screen mode, you need to move the location of the close button which lies outside the popup by default. The reason is that the close button will be invisible on the full-screen mode if it lies outside. Click the X icon to show the settings bar and then click the third tab (from the left) on the appearing settings bar to set the close button location. From this settings bar, you can also set the close button color and icon size.

Once done setting the location of the close button, the next step is set the popup background. To do so, hover your mouse over the popup and click the grey arrow icon. Click the Background tab on the appearing bar to use an image background. To use a solid color background, you can click the Colors tab.

Next, you can set the popup to the full-screen mode. To do so, click the mixer icon on the top-right corner and click the gear icon on the appearing settings bar. Set the width to 100% and the height to Full Height.

The next step is to add the content to the popup. Since you want use this popup as a menu, you can add elements like navigation menu, contact form, or other elements usually found on a menu. You can basically add any element.

Once done adding the content, the next step is set the trigger type. Click the mixer icon on the top-right corner to open the settings bar. On the settings bar, click the Popup tab (leftmost) followed by Display Conditions link.

On the appearing window, set the trigger type to On Click under the TRIGGERS tab. To set the display condition, you can switch to the CONDITIONS tab. Click the Save button to apply the changes.

Click the Update button on the bottom-right corner to apply all of the changes you made.

Lastly, save the popup to the Brizy library by clicking the heart icon on the settings bar. Clicking the heart icon will save the popup to the Brizy library on your site. If you want to save the popup to the cloud, you can provide your Brizy Cloud username and password and click the Connect button. If you want to save the popup on the library on your site instead, simply click the Skip button.

You can read our previous article for more detailed instructions on how to create a popup in Brizy.

Step 2: Call the popup

Once you are done creating the popup, you can call it via a link. You can actually call the popup from anywhere. But since menu usually lies on the header, you can create the header first. You can read this article to learn how to create a header in Brizy. In this article, we will go straight to adding an element to call the popup.

Add an element that has an option to add a link to the header block. Some examples of the elements you can add are Image, Button, Icon, and Text. In this example, we use the Icon element.

Once the icon is added, click it to open the settings bar. On the settings bar, click the chain icon to set the link. Select a popup you have just created on the Popup tab. You can find your popup under the Saved tab on the appearing library window.

That’s it. You can customize the icon to make it more eye-catching. You can, for instance, change the default icon (star) to something like a hamburger icon. Update the page by clicking the Update button on the bottom-right corner.

How to Work with a Column in Brizy

In the context of page builder plugin, column is a crucial enough element. Columns make it easier for you to set the layout of the design you are working on. Just like other page builder plugins, Brizy also allows you to add columns. In this article, we will cover how to add columns in Brizy and how to customize a column.

Brizy is a bit different from other page builders like Elementor and Divi Builder. Brizy doesn’t treat columns as an exclusive element. It’s considered as a regular element just like text, image, button, and so on. In other words, a column is not a required element in Brizy. You can create a design (page or template) without adding a column. However, it’s not recommended. In addition to making it easier for you to set the layout of your design, using columns makes it easy to organize the actual design elements (text, image, icons, buttons, and so on).

How to add a column in Brizy

When working on a page or template using Brizy, you can add as many blocks as you want. On each block, you can add columns before adding the actual design elements. You need to add a block before being able to add a column as block (called section on some page builders) is a required element. Read here to learn more about block in Brizy. In case you are new to Brizy, you can read our previous article to learn how to use Brizy.

Once your block is ready, drag the Column element from the left panel to the block on the canvas area.

By default, the Column element adds two columns. To add a new column, you can hover your mouse over one of the existing columns and click the blue arrow icon and then click the white plus icon on the appearing bar. To delete an existing column, you can click the trash icon on the appearing bar.

In Brizy, you can add a new column to an existing column. The pink line — when you hover your mouse over a column — indicates that the associated column belongs to another column (the parent column). Simply drag the Column element to an existing column to make it sub-column.

Customizing the column

Before styling up a column (such as setting the background), you might want to set the size first. By default, each column has the same size. You can resize a column by pressing and hold the column handle and drag rightward or leftward.

To style up the column, you can hover your mouse over a column you want to style up and click the blue arrow icon to open the settings bar. To set the background (image background), you can click the Background tab (leftmost) on the bar. Click the image selector to select an image. Or, if you want to use a dynamic image, you can click the database icon. You can set a different image for each state (normal and hover). Click the icons on the left side to switch between states. You can apply image filters from the Filters sub-tab.

You can add an overlay to the image background if you want it. To do so, you can click the Colors tab on the settings bar. From here, you can also set the border color as well as the border size. Also, you can set the box shadow. If you want to use a solid color background instead of an image, you can simply remove the image (from the Background tabs).

To make the advanced settings to the column (such as setting the margin, padding, and border radius), you can click the gear icon on the settings bar followed by the More Settings link. This will open the settings panel where you can make the mentioned advanced settings.

Once your column is ready, you can start adding the actual design elements to it. You can either customize the column before you add the actual design elements or before adding them. That’s totally your preference.

WordPress Custom Fields. Everything You Need to Know About

Customization is one of the main features offered by WordPress as a powerful content management system software. Thanks to the feature, you can create a tailored website according to your needs. One of the customization options you can use is custom fields.

In this article, we will cover everything you need to know about WordPress custom fields. Here are what we will cover:

  • What is a custom field
  • How to create a custom field
  • How to add a custom field in a page builder plugin
  • Plugins to create custom fields

What is a Custom Field

In our previous article, we have covered the anatomy of the single post template in WordPress. What is the correlation with custom fields?. On the single post template of WordPress, you usually find elements like post title, post meta, featured image, and so on. These elements are called fields and they are already provided by WordPress. With PHP knowledge, you can set how to display these default fields. Or, you can also use a page builder plugin such as Elementor, Brizy, and Divi Builder to display those elements if you have no PHP knowledge.

If you need an additional field to store custom metadata, you can create a custom field. In other words, a custom field allows you to store additional information (metadata) about blog posts, page, custom post types, and other content types on WordPress.

What are custom fields used for?

Have you ever used WooCommerce? WooCommerce is the best example of how custom fields are implemented. When adding a new product in WooCommerce, you can add such information as product price, product category, product rating, product color, and so on. You can then manage how the products to be displayed on the front-end of your website. In most cases, your visitors are able to sort the products by price, color, category, rating, and other parameters. In the context of WooCommerce, parameters like price, color, rating, and category are examples of custom fields.

Need a simpler example?

Say you want to create a movie review website. Chances are, you want to add parameters such as rating, genre, and summary.

Instead of adding those parameters in the content editor like the following:

You can separate those parameters from the main content by creating custom fields as follows:

Separating those parameters in custom fields could give you a flexibility and benefits. For example:

  • It helps to ensure that your review posts have the same styling and formatting.
  • If you need to change the layout of the review posts — or add a new element –, you don’t need to edit every single of them — which takes forever!
  • You can create a page that lists the best movies and offers the ability for your users to sort the movies by the available parameters (rating or genre).

In addition to a movie review site and e-commerce site, you can also use custom fields to create other website types such as a lodging site, a vehicle rental site, and so on. By WordPress, custom fields are stored in different tables in the database.

One of the biggest advantages of WordPress custom fields is that you can create any type of website without relying on plugins. Instead, you can create custom fields yourself according to your needs. If you have to install a plugin, you only need to install one plugin (the plugin to create the custom fields)

How to Create a Custom Field

WordPress actually comes with a default feature to create a custom field, but for a real website, you might don’t want to use it. But if you want to know, you can click the three-dot icon on the top-right corner of the WordPress editor and select Options.

On the appearing window, enable the Custom fields option.

After reloading the editor, you will see a new block beneath the content editor where you can add the custom fields.

To display information from the custom fields, you need to have PHP knowledge.

Alternatively, you can use a plugin to create WordPress custom fields and then display the information using a page builder. This is the best solution if you have no PHP knowledge. ACF (Advanced Custom Fields), Pods, and JetEngine are examples of plugins you can use.

Pods is the best option if you are looking for a free solution of custom field plugin as it is released as a free plugin. Here is how to use Pods to create WordPress custom fields.

How to Create WordPress Custom Fields Using Pods

Pods supports 18 field types, including jQuery-based date picker, color picker, file upload, WYSIWYG editor. You can download it on the WordPress plugin directory.

Once installed and activated, go to Pods -> Add New. You will be faced with two options. If you want to assign the custom fields to a new custom post type, you can select the Create New option. Conversely, you can choose the Extend Existing option to assign the custom fields to an existing content type like blog posts, pages, taxonomies, and so on. We choose the Extend Existing option in this example.

Select the content type as well as the post type you want to assign the custom fields to and click the Next Step button.

To add a field, you can click the Add Field button. Add the field label, field name, and field description. Also select the field type. If you want to set the field as a required field, you can simply tick the Required option. To add additional parameters such as maximum length and HTML placeholder, you can open the Additional Field Options tab. Click the Save Field button to save the field.

You can repeat the steps above to add more custom fields. Once done adding the custom fields, click the Save Pods button to publish the custom fields.

Your custom fields are ready to use.

How to Add a Custom Field in a Page Builder Plugin

Most page builder plugins come with a feature to add custom fields, including our favorite page builders Elementor, Brizy, and Divi Builder. On Elementor and Brizy, the ability to add custom fields is available on the pro versions. Not all custom field plugins are supported by page builders, though. Pods, for instance. It cannot be used on Divi Builder. We have separate articles that cover how to add custom fields in Elementor, Brizy, and Divi Builder. You can read the articles to learn more. Here are the links:

4 Plugins to Create Custom Fields

As we have just mentioned above, not all custom field plugins are supported by page builders so make sure to install the one that are supported by the page builder you use. Here are 4 of the best plugins to create WordPress custom fields.

1. JetEngine

If you use Elementor, JetEngine is the first plugin you can take a look. It is a premium Elementor add-on developed by Crocoblock, part of JetPlugins. With JetEngine, you can create a fully customized WordPress-based website without coding with minimum plugins. There are 17 field types you can choose from when creating a custom field group using JetEngine:

  • Text
  • Date
  • Time
  • Datetime
  • Text area
  • WYSIWYG
  • Switcher
  • Checkbox
  • Icon picker
  • Media
  • Gallery
  • Radio

Repeater
Select
Number
Color picker
Post

JetEngine itself is a versatile enough plugin. In addition to creating custom fields, you can also use it to create a custom form thanks to the Forms module. You can also use it to create a custom post type.

2. Pods

As mentioned, Pods is the best option if you are looking for a free solution of a custom field plugin. The plugin is released as a free plugin, completely free. There are 18 field types supported by Pods.

  • Plain Text
  • Website
  • Phone
  • Email
  • Password
  • Plain Paragraph Text
  • QYSIWYG Editor
  • Code
  • Date/Time
  • Date
  • Time
  • Plain Number
  • Currency
  • File
  • oEmbed
  • Relationshop
  • Yes/No
  • Color Picker

You can use Pods on Elementor and Brizy.

3. Advanced Custom Fields a.k.a ACF

Advanced Custom Fields (shortened as ACF) is the most popular plugin to create WordPress custom fields. It already has over 1 million installations. Being the most popular custom field plugin, no wonder if ACF is supported by most page builder plugins, including Elementor, Brizy, and Divi Builder. ACF itself is released as a freemium plugin, meaning there is a chance to use it for free. Here are the field types supported by ACF:

  • Text
  • Text Area
  • Number
  • Range
  • Email
  • URL
  • Password
  • Image
  • File
  • WYSIWYG Editor
  • oEmbed
  • Select
  • Checkbox
  • Radio Button
  • Button Group
  • True/False
  • Link
  • Post Object
  • Page Link
  • Relationship
  • Taxonomy
  • User
  • Google Maps
  • Date Picker
  • Date Time Picker
  • Time Picker
  • Color Picker
  • Message
  • Accordion
  • Tab Group

4. Toolset

Toolset is a paid custom field plugin. There is no option to use it free for free. Toolset is supported by most page builder plugins, including Brizy and Elementor.

The Bottom Line

The ability to add custom fields is a superior feature offered by WordPress to create a fully customized website with a minimum plugin. Understanding how custom fields work is the key to become a web developer based on WordPress. No PHP knowledge is required. Coupled with your favorite page builder, you can be a web developer by mastering a certain custom field plugin.

How to Add Custom Fields in Divi Builder

Creating a page using Divi Builder, you can add dynamic content to the page you are working on. Not just default dynamic content of WordPress such as post title, post meta, featured image, and so on, but also dynamic content from custom fields. In this article, we will show you how to add custom fields in Divi Builder.

When it comes to custom fields, there are some popular plugins available out there. From JetEngine, ACF (Advanced Custom Fields), to Pods. By the time this article is written (October 21, 2020), Divi Builder only supports ACF. Here are the steps to add custom fields in Divi Builder.

Step 1: Create the Custom Fields Using ACF

ACF, as you might have known, is a popular WordPress plugin to create custom fields. There are over 20 field types supported by ACF, including advanced fields such as jQuery-based date picker, color picker, file upload, and so on. Being a freemium plugin, you can use ACF for free. You can download the free version of ACF on the WordPress plugin directory.

Once installed and activated, go to Custom Fields -> Add New to create a new custom field group. First off, give your field group a name and add a field by clicking the Add Field button.

Give your field a label and name and select the field type on the Field Type option. If you want to set the field as a required field, you can toggle the Required? option. Click the Close Field button once you are done setting the field. To add another field, you can simply re-click the Add Field button and follow the same steps.

Once you are done adding the fields, you can reorder them if you need to. To do so, simply drag a field you want to change the order of downward or upward.

Next, go to the Location section to set where you want to assign the field group to. ACF allows you to assign the field group to a post type — be it default post type (blog post), custom post type, or other post types — to a page and other content types on WordPress. You can add multiple locations. If you want to assign the field group to the default post type, you can set the following rule.

To assign the field group to the pages, you can use the following rule.

Or, if you want to assign the field group to both default post type and pages, you can click the Add rule group button to add a new rule. Your rule should look like the following.

A crucial thing to note. If you want to add custom fields on a page (not post), make sure to set the rule to assign the group field to page. Divi Builder doesn’t recognize the field group assigned to default post type when you work on a page.

Once done setting the rules, go to the Settings section to set the placement of the field group. You can display the field group beneath the content editor or on the right panel. You can set the placement on the Position option. From the Settings section, you can also set the field group style, label placement, and instruction placement. Once done, click the Publish button to publish the custom field group.

Step 2: Add the Custom Fields to a Divi Builder Page

Once your custom field group is published, you can start to use it. Create a new page (Pages -> Add New) or post (Posts -> Add New) and edit it with Divi Builder. Sure, you can also edit an existing page or post. On the Divi Builder editor, add the Text module. On the text editor on the appearing panel, click the database icon and select the custom field you have just created (you can find it on the ACF section which usually lies at the bottom).

That’s it. You can then style up the custom field you have just added just like when you are styling a regular static text.

The Bottom Line

Divi Builder — a premium page builder developed by Elegant Themes — comes with a feature that allows you to add custom fields to your design. Be it page, post, or template. As we mentioned earlier, Divi Builder only supports ACF for the time being. One thing you need to underline when creating a custom field group using ACF. Make sure to set the rule according to where you want to add the custom fields to. For instance, if you want to add the custom fields to pages (not post), you need to set the rule that assigns the custom field group to pages.

Similarly, if you want to add the custom fields to a blog post (default post type), you need to set the rule that assigns the custom field group to the default post type.

The custom field group assigned to pages and default post type (as well as other content types) can be used on templates when you are working with Divi’s Theme Builder.

The Anatomy of the Single Post Template in WordPress

Today, most WordPress page builder plugins come with a theme builder feature in which you can use it to create custom templates to replace the default templates of your theme parts. One of the custom templates you can create is the single post template. In WordPress, the single post template governs the style of the single post (blog post) layout as well as the displayed elements. In order to be able to create a custom single post template in a visual way using your favorite page builder plugin, you need to know what elements on a single post template.

The layout style of the single post template — as well as the elements — are different on every WordPress theme. On most themes, the template is controlled by a file called single.php, while the styling (such as typography, text color, background, and so on) is controlled by the style.css file. Your theme might offer setting options to customize the layout as well the style of the single post template, but creating a custom template gives you a full control over the appearance as well as the elements that need to be displayed.

In general, the single post template of a WordPress theme has at least the following elements:

  • Featured image
  • Post title
  • Post meta
  • Post content
  • Comment box

When creating a custom single post template using a page builder like Elementor, Brizy, or Divi Builder, you can set the elements yourself. For instance, you can add optional elements like breadcrumbs, related posts, and post tags like the ones you see on the screenshot above. In most page builder plugins, you can add the elements with drag and drop.

Commonly, elements like featured image, post title, post meta, and post content are already provided by the page builders. If you want to add custom fields, you can also do so. Page builder plugins like Elementor and Brizy allows you to add custom fields you created with plugins JetEngine, Advanced Custom Fields, and Pods. This allows you to add dynamic content to the design (page or template) you are working on using your favorite page builder plugin.

If theme builder becomes your concern when selecting a page builder then it’s crucial enough to learn what elements you will get to create the single post template. For instance, if you plan to add related posts, you can overlook Divi Builder as the page builder has no elements or setting options to add related posts. However, Divi Builder is the best option if you are looking for a theme builder that grants full control over the styling of the content area. In Divi Builder, you can control the typography of the heading element, main body, even specific parts such as blockquote, link and bullet and numbering. Something that is not offered by Elementor and Brizy.

We have created the table below that compares the elements offered by three popular page builder plugins: Elementor, Divi Builder, Brizy.

ElementorBrizyDivi Builder
Post TitleYesYesYes
Post ContentYesYesYes
Post ExcerptYesYesYes
Featured ImageYesYesYes
Post MetaYesYesYes
Post CommentsYesYesYes
Post NavigationYesYesYes
Related PostsYesNoNo
BreadcrumbsYes (Yoast required)YesNo
Post TaxonomiesYesYesYes
Social Share ButtonsYesNoNo
Custom FieldsYesYesYes

The bottom line

The page builder era has made it possible for you to create a fully customized WordPress-based site thanks to the theme builder. You don’t need to rely on a theme anymore to create a unique website as most page builder plugins can be used on any WordPress theme. You don’t even need to understand web programming as page builders come with a visual editor to allow you to create a website in a visual way.

For a blogging need (or online publishing in general), you might want to create a fully customized single post template with your own design. The theme builder feature of a page builder allows you to create a custom single post template in a visual way, without coding. But, you need to understand what elements you need as we have just covered above.

How to Create a Popup in Brizy

Popup Builder is one of the features offered by the pro version of Brizy. You can use it to create popups on your WordPress site in a visual way, without coding. Depending on your purpose and needs, you can use the Brizy popup builder to create any type of popup. From a marketing popup to collect leads or just an announcement popup. Thanks to its on-click trigger support, you can even use the popup builder to create a full-screen menu or off-canvas menu on your Brizy-powered WordPress site.

Basically, creating a popup using the Brizy popup builder feature is not different from creating a page or a template using Brizy. You can add any element you want, without exception. For instance, you can add a form element and connect it with HubSpot to collect leads. Or, you can display a featured product on your WooCommerce store. Whatsoever.

How to create a popup in WordPress using the Brizy popup builder

Since the popup builder is only available on the pro version Brizy, you need to upgrade your Brizy to the pro version in case you haven’t done so. There are three plans offered by Brizy, including a lifetime plan if you hate the subscription-based option.

The Brizy popup builder supports the following trigger types:

  • On page load
  • On click
  • After inactivity
  • On page exit intent
  • Show after X
  • On scroll
  • Arriving from

In addition, the Brizy popup builder also supports display conditions. Meaning that you can set the popup you create to appear on specific pages on your website. You can either create the popup from scratch or from a premade template. Brizy offers over 40 premade popup templates you can choose from.

To start creating a popup using 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 on the right side then click the Edit with Brizy button to edit the popup using the Brizy editor.

You will be taken to the Brizy editor after clicking the Edit with Brizy button above. Click the plus button on the canvas area to start editing the popup. As you can see, there are tens of popup templates you can choose from. Simply select the one you like to import it to the Brizy editor. Or, you can click Create your own if you want to create the popup from scratch. In this example, we will create the popup from scratch.

Before adding any content to the popup, you can set set alignment of the popup first as well as the popup size (height and width). To do so, you can click the mixer icon on the upper-right corner to open the settings bar. To set the alignment (vertical and horizontal), you can click the align icons. To set the size, you can click the gear icon.

Once done setting the popup size and the alignment, you can start adding the content. Simply drag the element you want from the left panel to canvas area. As we mentioned, you can add the content to the popup just like when you are creating a page or template with Brizy. New to Brizy? You can read this article to learn how to use Brizy.

Setting the trigger and display condition

Once you are done adding and editing the content, you can set how and where the popup to appear by setting the trigger type and display condition. To do so, open the settings bar by clicking the mixer icon on the upper-right corner. Click the popup icon (leftmost) followed by the Display Conditions link.

Under the TRIGGERS tab, select a trigger type you want to use from the dropdown menu (you can add multiple trigger types). To set the display conditions, you can switch to the CONDITIONS tab. Same as trigger, you can also add multiple display conditions. Click the Save button to apply the changes.

Customizing the popup

To make your popup more compelling, you can customize it. You can set things like the overlay color, popup background, entrance animation, close button, and so on. Here are some customizations you might want to make.

Settings the popup background

To set the popup background, hover your mouse over the popup and click the grey tiny arrow icon on the top-left corner of the popup area. If you want to use an image as the background, you can click the Background tab. If you want to use a solid color as the background, you can click the Colors tab. From the Colors tab, you can also set the border color — as well as the border size –, and box shadow.

Setting the overlay color

If you create the popup from scratch, your popup will have a purple overlay with a certain opacity level. To change it, click the mixer icon to open the settings bar. Click the Colors tab to open the color picker. Simply select a color you like and set the opacity level accordingly.

Setting the entrance animation

You can also apply an entrance animation to your popup to make it looks not clumsy. To do so, hover your mouse over the popup and click the tiny grey icon on the top-left corner of the popup area. Click the gear icon followed by the More Settings link to open the settings panel.

You can set the entrance animation on the Entrance Animation option under the Advanced tab on the settings panel. There are also options to set the animation duration as well as the delay beneath the Entrance Animation option.

Customizing the close button

By default, your popup has a white close button. To customize it, you can click the close button to open the settings bar. To disable/enable the close button, you can click the third icon (from the left) on the settings bar. To set the position, you can click the last icon. To set the size, you can click the star icon. To set the color, you can click the Colors tab to open the color picker.

The bottom line

Brizy (the pro version) comes with a popup builder feature, allowing you to create popups on your WordPress site without installing an additional plugin. When creating a popup using Brizy, you can add any element just like when you are creating a page. The Brizy popup builder supports a wide range of trigger types as well as display conditions to allow you to control the behavior of the popup you create.

One minor thing. The popup you created with Brizy will only appear on the Brizy-powered pages and templates. The popup won’t appear on the pages or posts you created with WordPress block editor (Gutenberg) unless you create a custom template for the single post and page using Brizy.

Brizy Block. Everything You Need to Know About

Most WordPress page builder plugins work in a similar enough way. When creating a new page, you can start by adding a new container. A container is a large area where you can place all the design elements. From column, text, image, button, icon, and so on. Each page builder plugin uses a different term for the container. In Brizy, a container is called a block while in Elementor and Divi Builder, a container is called a section. In the context of page builder plugin, the concept of block/section is pretty handy as it helps you to organize each section of your page. You will find how handy blocks/sections are when you are working on a long page.

For instance, when creating the homepage of a website, you can use different blocks/sections for the hero section, team member section, projects section, and so on. Take a look at the screenshot of the homepage of a website below.

The homepage above consists of 9 blocks as you can see on the screencast below.

If you have switched from WordPress classic editor to the WordPress block editor (Gutenberg), you might already know how blocks can benefit users and offer flexibility in the page editing process. For instance, if you want to add a missed block to the page you are working on, you can simply add a new block and then set the order to set its position on your page.

How to Add a Block in Brizy

As we mentioned in the opening section, when creating a new page (or template) with a page builder plugin (including Brizy), you can start by adding a block before adding any design element. To streamline your workflow, Brizy offers tons of premade block templates you can choose from. A block template is a block that consists of predefined elements. If you prefer to add and customize the elements yourself, that’s okay. Brizy also offers an option to do so.

To add a new block, you can click the plus icon on the canvas area on the Brizy editor. New to Brizy? You can read our previous article to learn how to use Brizy.

Select a block template you want to use. Clicking a template will import it to the Brizy editor. Or, if you have your own design concept and want to add and customize the elements yourself, you can click Create your own.

To streamline your workflow, Brizy allows you to save a block to the library. The blocks that have been saved to the library can be reused on other pages on other blocks on the page you are currently editing. Brizy also offers a cloud service to allow you to save the finished blocks to the cloud so that you can use them on different websites (on different domains). This feature is pretty handy for web agencies.

To save a block to the library, hover your mouse over the block you want to save and click the mixer icon to open the settings bar. On the settings bar, click the heart icon.

To access the saved blocks, you can click the Saved tab when adding a new block.

Turning a Block Into a Slider

Need to add a slider element to your page? Brizy indeed has no element dedicated to adding a slider element to your page, but it doesn’t mean you need to install an additional plugin only to add a slider. In Brizy, you can turn a certain block into a slider. To do so, hover your mouse over the block you want to turn it into a slider. On the appearing settings bar, click the hex nut icon and toggle the Make it a Slider option.

You can read our previous article to learn more about how to create a slider in Brizy.

Creating a Global Block

The ability to add a global element is a common feature found on page builder plugins. Brizy also offers this kind of feature. With a global block, you can apply new changes to multiple pages at once as long the pages contain the associated global block you make the changes to. Understanding the concept of the global element is getting more crucial in Brizy as Brizy uses this concept on the custom header and custom footer.

To create a global block, you can hover your mouse over the block you want to turn it into a global block. On the appearing settings bar, click the hex nut icon and toggle the Make it Global option.

Reordering the Blocks

When creating a custom header in Brizy, you need to reorder the blocks to place the block header at the top. Brizy has a feature to make it easier for you to reorder the blocks. Instead of dragging the blocks within the canvas area, you can do so from the left panel. Click the block icon on the left panel and drag the blocks upward or downward to reorder them. You can also delete a certain block from here.

Customizing a Block

To make your design looks compelling, you can customize your block before you add any element to it. You can set things like the background color, width, height, border, set the margin, and so on. You can also apply a parallax effect, entrance animation, and divider.

Setting the Background, Height, Width, and Border

In Brizy, you can customize a block (and other design elements) via the settings bar. To open the settings bar, hover your mouse over the block you want to customize. To set an image background, you can click the Background tab on the appearing settings panel. Simply click the image picker to select the image you want to use. You can use a different image background for the normal state and the hover state. Simply click the icons on the left side to switch between states. To apply a certain filter to the image background, you can click the Filters sub-tab.

To apply an overlay to the background, you can click the Colors tab on the settings panel. You can also go here if you want to use a solid color background instead of an image. From here, you can also set the border color as well as the size.

To set the width and the height of the block, you can click the gear icon on the settings panel.

If you want it, you can also apply a parallax effect to the block background. Read this article to learn more.

Applying Entrance Animation and Divider

The settings bar allows you to make basic customization. To add advanced customization such as setting the padding, margin, applying custom CSS, applying entrance animation, and so on, you can open the settings panel. To do so, click the gear icon on the settings bar and select More Settings.

To apply an entrance animation, open the Advanced tab on the settings panel. You can select an entrance animation effect on the Entrance Animation option.

To add a divider, you can open the Styling tab. You can select a divider style on the Type option beneath the Dividers option. You can add a divider whether at the top side or at the bottom side.

Exclusive Blocks

Brizy allows you to create both a custom header and a custom footer on your WordPress. However, the creation process is a bit different from other page builders. To add a custom header/footer to a page, you need to edit the associated page. Brizy has two exclusive block types for both header and footer. Specifically for the header block, there are additional setting options to set a header style (fixed, sticky, or static).

The Bottom Line

Section is the first thing you need to know and learn to create a page using a page builder plugin. Instead of “section”, Brizy uses the term “block”. Whichever the term you prefer, they are basically the same thing stuff. Probably, Brizy prefers the term “block” as it is more familiar to WordPress users. When creating a page or template with Brizy, you can add as many blocks as you want. You can use one block only of course. But, it’s not recommended as it would be way trickier to manage the design elements.

You can use blocks to divide your page into different sections. This will make the editing process way easier.

How to Add Parallax Background in Brizy

A brief intro about parallax before we jump into the how-to section. It is a web design trend that emerged in 2011. In the context of web design, parallax refers to a behavior where the background moves at a slower pace than the foreground when a user is scrolling down the page. Parallax is an optical illusion-based effect. When seeing two different objects — a close object and a distant object — the closer object appears larger than the one at the distance. Also, our eyes perceive that the distant object moves more slowly than the closer object. In this case, the closer object refers to the foreground while the distant object refers to the background.

Here is a simple example of a parallax effect.

When implemented properly, the parallax effect could offer an immersive experience to your site visitors. They won’t go away too hurry.

In WordPress, you have some options of plugins to add a parallax background. If you use Brizy on your WordPress site, you can effortlessly apply a parallax background to a certain block. Here is how to add a parallax background in Brizy.

Adding a parallax background in Brizy

First off, you create a new page (Pages -> Add New) and edit it with Brizy. Or, you can also edit an existing page. If you are new to Brizy, you can read our previous article to learn how to use Brizy. On the Brizy editor, ad a new block by clicking the plus icon on the canvas area.

Select a block template you like. Or, if you want to add the elements to the block yourself, you can click Create your own.

Once the block is added, hover your mouse over it and click the mixer icon to open the settings bar. On the settings bar, click the Background tab and select an image you want to use as the background by clicking the image picker. Once the image is selected, select a parallax effect type you want to use on the Parallax option. There two parallax effect types you can choose from: fixed and animated.

That’s it. To apply a parallax background to other blocks on the page you are working on, simply repeat the steps above. The parallax effect can only be applied to block background. Brizy doesn’t support the parallax effect for column background.

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.