WP Page Builder free page Builder WordPress

WP Page Builderfree page Builder for WordPress sites entered the market on 1 August 2018. Team Themeum invested many years in research and development to create the perfect product.

1. What is WP Page Builder

WP Page Builder is a WordPress plugin to create pages using the drag and drop feature. Regardless of whether you want to create web pages from scratch or edit existing WP Page Builder handles it equally well.

It is a fully front-end tool with lots of options of design and multiple layout elements. WP Page Builder is so easy that you’ll need much less time in comparison with other similar tools for creating websites on WordPress. It gives you complete control over the design of your web site. The plugin offers 30+ functional additions, 60+ predefined blocks and free models.

2. Installing page Builder

If you want to install the free version, go to the plugins directory and upload it. Then log in to your WordPress and activate the plugin.

Or you can go to the toolbar and WP to do the following:

  1. Open the Plugins tab and click Add.
  2. Find WP Page Builder.
  3. Install and activate WP Page Builder.

3. Settings

WP Page Builder for WordPress allows you to easily set the parameters. Customizing the settings of the page Builder is a must.

In the admin panel of your WordPress site, click on the “WP Page Builder”.

Before you open the admin panel:

To configure the settings, just click on the desired option and modify to suit your needs. The following describes the options and their functions:

  • Post type (Post Type). Select the type of content you want to edit. You can click on multiple options at the same time.
  • To exclude the role of user (Exclude User Role). Allow for editing of certain administrators of your site.
  • Content width (Content Width). If you want to change the content width by default (1140 px), select the desired width.
  • The spacing of the columns (Column Spacing). You can save an interval of 30 pixels or choose your own.
  • Method of preserving the CSS (CSS save method). Determines what method to save the style sheet.
  • Cache (Cache). Hit “Clear cache” and “Sync” to clear the cache and sync built-in layouts and blocks.

4. How to create a page

The simplest part of the WP Page Builder is the creation of the page. You can edit pages in real time or publish the page using the normal WordPress and then edit it using the plugin WP Page Builder.

You can edit the page by this algorithm:

  1. Add the page title in the header.
  2. In the lower right part of the window under “page Attributes” select the template. Click “Template” and select “WP Page Builder Template”.
  3. Scroll to the top of the window and select “Edit with WP Page Builder”.
  4. Click “Publish” to start working with the page.
  5. The option “Add line” is visible after you open the page Builder WP. Click on the + sign to select any number of rows.
  6. If you want to import a previously exported page, click the “Import” button next to “Add line” and select the file to load.

5. How to set a web page

The value of the row-column default WP Page Builder is 50% -50%. But not only can you change the number of rows and columns, and adjust them.

Click “Add row” button to select the number of rows and columns that you want to have a page on their website.Select a specific row and click “Settings” to open the “Settings”tab.

Settings contain three tabs:

  • General,
  • Style
  • Advanced.

This guide focuses on how to use shared configuration rows columns (especially for beginners).
Go to the General tab. Here you can choose that will configure:

  • Screen settings (Screen settings). You can keep the default or select a Tie line / Row (Row Stretch /Row) and a Stretchable container /container without stretching the canvas (Container Stretch / Stretch Container Without Gutter).
  • Custom height (Custom height). Save custom height or adjust it.
  • The position of the content (Content position). You can choose upper / middle / lower position for the content or keep the default value.
  • Custom width (Custom width). Adjust the width of the content or save the default width using the slider.
  • Canvas (Gutter). Drag the slider to adjust the distance between the columns or keep it default.
  • Animation (Animation). Enable / disable animation.

6. The style page

Here begins the interesting part of creating a web site. WP Page Builder gives you several options when it comes to styling your unique web site.

  • General (General). Select a color, margins and padding for your content.
  • Topografika (Topography). Turn on the topografika using this option.
    Configure font family, font size, line height, spacing between letters, font style, and text transformation.
  • Frame (Border). Click “Enable” for the style, width, and border color and hover.
  • Shadow Boxing (Shadow Box). Enable / disable the color setting and the dimension of shadows.
  • The radius of the frame (Border Radius). Tap to include and set the border radius.
  • Background (Background). Turn on the background to specify the color image and the gradient for the background of your web site.
  • Overlay (Overlay). Drag the cursor to the parameter color opacity to adjust the overlay.

7. Advanced customization

On the Advanced tab of the WordPress website is configured to a new height. Click on settings at the top of the line and go to the tab “Advanced”.

Option “Advanced” has three sub-tabs:

  • General (General). Here you can select the Identifier (ID) of the column Class and Z-Index.
    The ID of the column. You can easily set the ID column by using the Advanced tab. This is especially important if you are working on a large website and have multiple administrators working in one place.
    Class. Turn on the preference class for my site using this option.
    Z-Index. The slider in the option Z-Index allows you to define the order of the stack. Z-Index only works with positioned elements (position: absolute, position: relative or position: fixed).
  • Adaptability (Responsiveness). Select which devices will disappear or appear a specific string. You can configure the adaptability for mobile devices, tablets, desktops and larger devices.
  • Custom CSS (Custom CSS). Add custom CSS code in the text box editor. This allows you to add custom CSS to any row, column, and widget.

8. Layouts and blocks

WP Page Builder has lots of pre-designed blocks and layouts.


When you choose the layout, WP Page Builder will provide specific business models. Thus, you will be aware of the most common layouts for businesses in your industry.
Click the “Layouts (Layouts)” on the left (under Blocks).

The screen will display the options of layouts. Choose the one you like best.

Click on the imposition layout and click “Import” to add layout to your website.

When you import the layouts can be easily placed on the created web page in accordance with the number of selected rows.


The blocks have predefined sections that you can easily customize in their own way. Preset blocks of six:

  • Feature
  • Reviews
  • Team
  • The call to action
  • A table of prices,
  • Content.

9. Add-WP Page Builder Addons

WP Page Builder has 30+ add-ons (add-ons) to improve the efficiency of your website. Click “Add” on the left sidebar. You will see all the available add-ons.

They can easily be dragged from the sidebar of the WP Page Builder to the page.

To place one of the add-on (add-on) to WP Page Builder:

  • Add a new row.
  • Select your addon and drag it to the newly created row.
  • Navigate to the addon and click on the settings icon in the upper left part is a addon to configure.

Addons provide a new and unique flexibility page and you can use custom settings for each Supplement.
When you select the addon, the settings tab displays directly:

  • The “General”Tab.
    Used for additional changes. Here you can change every aspect of the addon, in accordance with the needs of your website.
  • Tab “Style”.
    This option allows you to customize the virtual appearance of the addon.
  • The “Advanced”Tab.
    Is common to all Addons. These settings help to change the General appearance of the addon.

Example. Add group buttons

An example of how to select and use the addon. Button group – one of the most simple but also most popular supplements. You can choose how many buttons you want to place on your web site using this particular addon.

When you select the addon and it opens the General tab. Here you can define the button name or add / remove new button. You can also choose the alignment (left, right, center) buttons or the alignment of your choice.

Clicking on the style tab, select the visual style button groups.

You can enable / disable the typography addon. The inclusion of typography allows you to change all forms of lines, as well as all modifications associated with the font.

The “Advanced”Tab

This tab is common to all Addons.
The tab contains settings to:
– Typography
– The imposition,
– Border
Is the radius of the frame,
– Shadow,
– Opacity,
– Responsive,
– Custom CSS.

On the Advanced tab, there is a huge choice of options. For example, selecting the “Shadow window” visualization will look like this:

Or select your preferred background for your addon, selecting the background.

Likewise combine as many parameters as you want, from the extended tabs to simplify creating a web site with add-ons.
You can learn about the functionality of every addon that offers a WP Builder, here.

10. Using parameters undo / redo

WP Page Builder has options for unlimited undo / redo with one click.

For creating a website requires a lot of trial and error. Thus, unlimited possibilities for action undo / redo are a necessary part of the plugin for building pages.

At the bottom of each page you will see two arrows. Left arrow is designed for the option of cancellation. Right – this is a repeat.

Every time you make changes, you can undo them with one click. If you want to return to a previous state, just press the right arrow and you will have a website in the last amended version.

11. Different

WP Page Builder provides a variety of options that are important to create a professional web site. In this case, the important parameters sidebar.

This paragraph shows how:

  • To import
  • Export
  • To completely clear the page
  • Using the library,
  • Save.

Click on the option “Tools” in the sidebar and you will find 3 options:

  • To import
  • Export
  • To clear the content.

Let’s look at the function of each of these options:

How can I import a page

If you have saved the page as a file .json, you can easily import it from your device.
Click “Import” on the sidebar and load the page you want to place on your website.


You can easily export the page with one click. As soon as you click on the export option, the page will directly be uploaded as .the json file. You can then import it for future use.

To clear the contents of the page

Use this option to completely clear the page and start from scratch. Be absolutely sure to use this option, you will not be able to return to the previous state when you clear the contents of the page.

A single click will clear the page completely, and you will get a page like this:


The plugin WP Page Builder allows you to save all your projects in one space. You can store your favourite pages for later use or save and edit later without repeating the whole process again.


If you want to see how the website looks before you publish it, select “View” on the sidebar. Of the site as follows:


The “Save” option, as the name suggests, help you save all the work. You can save all changes with one click. After you save your changes, appears the message: “WP Page Builder has been updated”. This means that you have successfully saved all your work.

Advantages of WP Page Builder:

  • It is an ideal product for those who love editing in real time.
  • Simple drag and drop of the page Builder will allow you to use add-ons, blocks, layouts to navigate and manage on any page of the website.
  • The Builder allows you to disable or hide any existing member to clean it later and also these items can be saved for later use.
  • You have access to the pre-blocks and layouts, allowing you to work faster.
  • All add-ons free. If you want to use the pro features of the page Builder, without losing a single penny, then WP Page Builder is for you.
  • Use WP Page Builder doesn’t require any coding skills. But if you want to apply more advanced design, you can use the custom CSS option.
Leave a Comment

Your email address will not be published. Required fields are marked *