Using Page Builders With WordPress
In this tutorial, we provide a brief overview of WordPress Page Builders, what they are, and how they are used. We also provide links to tutorials and the documentation sections of the most widely-used page builders for WordPress.
Refer to the following tutorials if you need help with this section:
- The WordPress Block Editor
- How To Use WordPress Blocks
- How To Create A Post In WordPress
- How To Create A Page In WordPress
***
What is a WordPress Page Builder?
A page builder is essentially a WordPress plugin that lets you create, design, and customize your site’s pages and posts without requiring coding skills.
Page builders replace the need to use code in areas of your site like configuring settings for global or individual page layout elements like alignment, spacing, background colors, inserting media, typography, etc.
Many page builders allow you to create complex web page layouts quickly and easily simply by choosing different elements from menus, using drag-and-drop to place them on your page, and configuring options and settings for different elements and functionalities.
For example, if you are creating a new page using the WordPress Classic editor, you start with an empty content editor, add your page elements inside the content area, and then format your content using the editor’s menu buttons…
If you are creating a new page using the WordPress Block editor (which itself is a type of page builder), then you would build your page layout by inserting and rearranging Blocks and Block Patterns inside your content editor…
With a Page Builder, however, you build your page layout by creating a new post or page, then inserting elements or templates from the page builder into the page, then configuring settings for each of these elements, groups of elements, templates, etc.
So, for example, the screenshot below shows the blank page of a new page created using a very popular page builder for WordPress called WPBakery.
As you can, see, you can start building your page by adding an element, text block, or template…
If you choose to add an element, for example, a screen will pop up giving the choice of inserting a wide variety of different elements into your page…
After selecting an element to insert into your page, you can then configure settings and options for that specific element…
You build your page by combining and configuring different elements individually or in groups within templates and “containers,” then adjusting design options like number of columns, width, padding, etc.
Although different page builders offer different features or ways to build pages, most of them basically work in the same way.
Here, for example, is the same page-building process using the Avada page builder. As you can see, you would start with an empty page, then add a container, columns, elements, templates, etc.
A page builder like Avada, for example, makes it easier to create a page layout by allowing you to select “containers” with pre-defined column layouts into which you will insert your content.
After selecting a basic layout, you would then insert different page elements by selecting these from a menu…
Additionally, many page builders let you specify global settings and options for a wide range of layout and design features.
As a final example, here is a screenshot of the Elementor page builder, which is another very popular WordPress page builder…
Elementor allows you to select predefined customizable templates as a starting point for your pages…
You can easily insert different customizable elements (called ‘blocks’) into your page layouts by selecting these from a menu.
Once you have added an element or block into your content, you are then presented with fine-tuning options and settings specific to that element…
Note: The default WordPress Block Editor works in a very similar way to page builders but offers a sitewide “block architecture” that other page builders can incorporate into their software. This effectively lets you use your favorite page builder with WordPress Blocks to build extremely sophisticated and complex page layouts, designs, and themes.
To learn more about using WordPress Blocks as a page builder, go here for detailed step-by-step tutorials and more information:
Why Use A Page Builder For WordPress?
Using a page builder offers users many advantages:
Requires No Coding Skills
Even if you know exactly what you would like to change on your site, it can be quite difficult to make even minor changes to your site’s page layouts or design styles if you don’t know how to do this.
With a page builder, you don’t need to learn HTML, CSS, JavaScript, or PHP to make these changes. You simply open the element that you want to change on your page or website, make the required changes (i.e. edit the content or select a different option or setting), then close that element and save the page.
This can make editing your web pages faster and get things done without hiring a professional web developer or designer.
However, you will need to know how to use the page builder application to make these changes, so this is another program you will need to learn how to use.
A Feature-Rich Page-Building Experience
Another advantage of page builders is that they typically come preloaded with loads of elements, widgets, and features like sliders, image carousels, galleries, content grids, social sharing buttons, pricing tables, charts, CTA buttons, forms, animations, etc.
Page builders eliminate the need to install other plugins you would need to install to get the same functionality. However, page builders can require additional server resources to run, which can slow down your page loading speed.
Built-In Professional Templates
The most popular page builders come with many preinstalled templates that are very attractive, professionally designed, and beautifully crafted to make creating standard web pages like your Home Page, About Us, Services, Products, Contact, etc. easier and faster to build.
These templates are generally very flexible and highly customizable, giving you virtually unlimited page design options.
Easy To Customize
Most Page Builders are highly customizable and provide user-friendly features like drag-and-drop, a live preview mode, and the ability to quickly and easily add modules to your pages, and then configure, rearrange, and resize these to suit your needs. They also allow you to change design features like global or individual styles of elements, like backgrounds, fonts, colors, padding, margins, borders, etc.
Page Builder Tutorials
If you’re on this page, it’s probably because your web developer chose to build your WordPress site using a Page Builder that they are familiar with and comfortable using.
Although Page Builders can make it easier to build and customize pages in WordPress, they still require learning how to use the program and having good design skills to create professional and functional page layouts.
For this reason, we recommend letting experienced web developers of designers create and customize your site or pages using Page Builders. However, if you want to learn how to make simple changes and modifications to elements on your site’s pages, then select your Page Builder from the list of the main/most popular Page Builders used with WordPress below and click on the links to their tutorials and documentation sections:
- Avada
- Beaver Builder
- Brizy
- Divi
- Elementor
- GeneratePress
- Genesis Pro
- MotoPress
- Oxygen
- Page Builder Sandwich
- Site Origin
- Themify
- Thrive Architect
- Visual Composer
- WPBakery
- WP Page Builder
Avada
Website: Avada
Using Avada:
Beaver Builder
Website: Beaver Builder
Using Beaver Builder:
Divi
Website: Divi
Using Divi:
Brizy
Website: Brizy
Using Brizy:
Elementor
Website: Elementor
Using Elementor:
GeneratePress
Website: GeneratePress
Using GeneratePress:
Genesis Pro
Website: Genesis Pro
Using Genesis Pro:
MotoPress
Website: MotoPress
Using MotoPress:
Oxygen
Website: Oxygen
Using Oxygen:
Page Builder Sandwich
Website: Page Builder Sandwich
Using Page Builder Sandwich:
Site Origin
Website: Site Origin
Using Site Origin:
Themify Builder
Website: Themify Builder
Using Themify Builder:
Thrive Architect
Website: Thrive Architect
Using Thrive Architect:
Visual Composer
Website: Visual Composer
Using Visual Composer:
WPBakery
Website: WPBakery
Using WPBakery:
WP Page Builder
Website: WP Page Builder
Using WP Page Builder:
Hopefully, the links to your page builder tutorials and documentation provided here will help you learn how to use your page builder more effectively with WordPress.
***
Updated: April 9th, 2023