WordPress Page Builders Explained (Step-by-Step)

Home   /   WordPress Page Builders Explained (Step-by-Step)

We want to fix the problem of the blank homepage.

As we do this, you’re going to learn about a type of WordPress plugin called a “Page Builder”. These allow you to design page layouts without any coding knowledge at all.

After this chapter, you will be able to:

  • Install a page builder plugin.
  • Create custom layouts.
  • Add content and design to your new homepage.

1. Getting Started with a ‘Page Builder’ in WordPress

We’re going to install a page builder plugin called “Beaver Builder”.

  • Go to “Plugins” and then “Add New”.
  • Search for “Beaver Builder”.
  • Click “Install Now” and then “Activate”:
Page Builder in WordPress
247-Page Builder in WordPress
  • You’ll see a large screen that introduces Beaver Builder:
Page Builder in WordPress
248-Page Builder in WordPress
  • Go to the front of your site and visit the homepage.
  • Click the “Beaver Builder” link in the main menu.
Page Builder in WordPress
249-Page Builder in WordPress
  • Click “Cancel” and move past the pop-up messages.
  • Click on the “+” icon in the top-right corner.
Page Builder in WordPress
250-Page Builder in WordPress
  • You’ll now see a box with multiple options for redesigning your homepage.
Page Builder in WordPress
251-Page Builder in WordPress
  • Let’s start by creating a layout for our homepage. Click the “Rows” tab and then select “1 Column”.
Page Builder in WordPress
252-Page Builder in WordPress
  • Drag-and-drop the “1 Column” option into the center of your page:
Page Builder in WordPress
253-Page Builder in WordPress
  • Repeat that process with “2 Columns”. You’ll now see a layout with one row on top and two columns underneath:
Page Builder in WordPress
254-Page Builder in WordPress

Now that you have the layout ready, you can place content into these different regions.

  • Click the “Modules” link in the top bar.
Page Builder in WordPress
255-Page Builder in WordPress
  • Select “Photo” and drag it into the top row.
Page Builder in WordPress
256-Page Builder in WordPress
  • You will now see a pop-up area on the left-hand side of the page.
  • Click the “Select Photo” link.
Page Builder in WordPress
257-Page Builder in WordPress
  • Choose the wordville-header.png file that you uploaded earlier in the book.
  • Click “Save”.
  • You now see a large header image across the top of your site:
Page Builder in WordPress
258-Page Builder in WordPress

Let’s repeat that process to add content for the other parts of our homepage layout:

  • Click the “+” icon in the top bar over the site.
  • Select “Text Editor”.
Page Builder in WordPress
259-Page Builder in WordPress
  • Drag-and-drop the “Text Editor” box into the bottom-left area of the site.
Page Builder in WordPress
260-Page Builder in WordPress
  • You’ll see a box with a WordPress Text Editor, as shown in the next image.
Page Builder in WordPress
261-Page Builder in WordPress
  • Add some content to welcome people to your site.
  • Click “Save”.
Page Builder in WordPress
262-Page Builder in WordPress

Let’s repeat that process for the other side of our layout.

  • Click the “+” icon in the top bar over the site.
  • Change the “Group” setting to “WordPress Widgets”:
Page Builder in WordPress
263-Page Builder in WordPress
  • Look for the “Recent Posts” widget in the right column:
Page Builder in WordPress
264-Page Builder in WordPress
  • Select “Recent Posts” and then drag it into the bottom-right column:
Page Builder in WordPress
265-Page Builder in WordPress
  • As with the Image and Text Editor, there are some settings you can change. For example, it might be a good idea to improve the Title: “Recent Wordville News”:
Page Builder in WordPress
266-Page Builder in WordPress

When you’re happy with your changes, click the blue “Done” button in the top-right corner.

Page Builder in WordPress
267-Page Builder in WordPress

Click “Publish”:

Page Builder in WordPress
268-Page Builder in WordPress

You should now see that you have a good-looking layout for your homepage. Tools such as Beaver Builder can be used for your homepage, but also for other pages as well. They can be really useful ways to quickly build a beautiful site.

Page Builder in WordPress
269-Page Builder in WordPress

Tags

Categories

Archives

Translate:

Translate »

Contact Us