BLOG

How to Create Custom Pages Using a WordPress Drag-and-Drop Builder

If you’re working on launching a website, you may find yourself looking over some beautifully-designed sites for inspiration. Designing appealing websites in WordPress, however, might not be in your usual wheelhouse. Fortunately, that’s where drag-and-drop page builders come in. These plugins extend WordPress’ design functionality in many time-saving ways.  

In this article, we’ll take a look at the benefits page builders offer to your WordPress website design process. We’ll also walk you through how to customize a page with a WordPress drag-and-drop page builder. Let’s get started! 

Why You Should Consider Using a Page Builder for WordPress

WordPress is notoriously flexible, in part due to the fact that it’s an open-source platform. This means developers and programmers can create new plugins for it. That includes page builders, which are a popular tool among website designers across a wide variety of skill levels.

A page builder can change the way you interact with the editing functionality of a standard WordPress post or page. A ‘drag-and-drop’ builder opens up the option to click and drag elements onto each page.

This is typically done via a live preview that shows what the page will look like on the front end of your site:

Beaver Builder Demo Builder

There are plenty of other common features that page builders can add to your design toolkit, including:

  • Easy drag-and-drop designing. As we mentioned, page builders make moving site elements around an easy task. You can add, delete, and rearrange items and sections at will.
  • Built-in modules. Most page builders come with a library of modules to choose from. These usually include commonly-used items like images, videos, and galleries, along with more advanced features.
  • Multi-column layouts. Breaking out of the one-column design model can be tough, unless you’re handy with style sheets and HTML. Page builders make it easy to select how you want certain areas of your page or post to be structured, and create unique layouts. 
  • Live editing. Page builders bring truly live editing capability to your WordPress site. You can manipulate and edit your content from a front-end, live view. This means no more questioning what your site visitors might be seeing that you’re not. 

Ultimately, page builders provide functionality that nearly any type of WordPress user can benefit from. They’re excellent for first-time site owners, yet even agency designers can make use of page builders to assist clients.

How to Create Custom Pages Using a WordPress Drag-and-Drop Builder (In 4 Steps)

Beaver Builder is one example of an extremely popular WordPress page builder:

Wordpress Drag & Drop

Trusted by some of the biggest names in WordPress, this tool comes with lots of ways to add on enhancements and save you time while designing. Let’s take a look at four steps that will help you start designing pages with Beaver Builder quickly.

Step 1: Download and Install the Beaver Builder Plugin 

To get started, you’ll want to check out the pricing options Beaver Builder has to offer. There are several choices, starting at $99 for a standard installation:

Beaver Builder Prices

Additionally, if you want to try it before you buy it, Beaver Builder Lite is available for free through the WordPress Plugin Directory. Then, you can simply upgrade when you’re ready.

For now, we’ll focus on the plugin’s premium version. Once you choose and purchase a plan, you’ll be able to download the plugin’s .zip file from your account page. If you’re upgrading from the lite version, be sure to deactivate and delete your existing Beaver Builder plugin first. Don’t worry, however, as you won’t lose your content. 

In your WordPress dashboard, go to Plugins > Add New. There, you can select the Upload Plugin button and navigate to the .zip file you saved earlier. Upload the file and click on Install Now:

Wordpress Plugins

Once the installation process is complete, you’ll also want to select Activate. This will add all the necessary components to your site:

Installing WordPress Plugins

You’ll also want to visit the Settings menu. There, you can click on Post Types on the Beaver Builder settings page, and check to make sure the page builder can be used on all the post types you want to customize:

Beaver Builder Settings

Now that you’ve successfully installed and activated your plugin, you’re ready to start designing with Beaver Builder!

Step 2: Create a New Page and Launch Beaver Builder 

To start editing with this page builder, you’ll need to add a new page. Navigate to Page > Add New, and you’ll notice an additional option. Click on Launch Beaver Builder in order to start editing with the page builder:

Launch Beaver Builder

Unless you preloaded a theme, you’ll have what looks like a very blank front-end view of your website after you launch the builder. Additionally, you will see a palette of tools to the right. If not, click on the plus symbol in the upper right-hand corner of the page to open the modules menu:

Beaver Builder Tutorial

You can now click on the various tabs to reveal drag-and-drop options. This includes column structures in the Row tab, and pre-built, beautifully-designed pages under the Templates tab. 

Step 3: Add Modules to Your Page and Customize Them

At this point, you can start dragging and dropping modules to your heart’s content. Let’s take a look at one example of a versatile module, and walk through the process of adding and customizing it.

First, choose the Accordion module from the Layout tab:

Beaver Builder Walkthrough

Click and drag the Accordion module to wherever you’d like to place it on the page. Once you do that, another edit window will pop up containing all the settings for the Accordion feature. 

You’ll see an Item panel, for example, where you can create as many accordion items as you need. You can also set the text that will be revealed when each item is clicked on, and customize how the content will display and act:

Beaver Builder WordPress

Next, you can click on the Style tab and access all the options for styling your accordion menu. This includes font, color, shading, and backgrounds. You can also change the size of the accordion elements as well:

Wordpress Drag & Drop

Finally, there is the Advanced tab. That’s where you can play with animations, margins, visibility, and HTML elements. 

Once you’re done tweaking your module, don’t forget to save it. Additionally, if you really liked the accordion you made, you can save its settings so you can quickly add it to other content. You’ll be able to find your custom modules under the Saved tab in your main Beaver Builder toolbar.

Step 4: Save Your Page or Create a Template

Now, you can repeat the above step to add and customize as many modules as you’d like. Once you’re happy with the page you’ve created, you’ll want to make sure to save it.

You can click the Done button in the upper right-hand corner of the page to access your options. You can then Discard, Save Draft, or Publish your page:

Wordpress Page Builder

If you’re looking for more options, you can access a larger menu by clicking on the down arrow in the upper left-hand corner of your page. From there, you can do a number of things, but one handy feature we will point out is the Save Template option:

Wordpress Page Builder

This will give you the chance to save the page you just created as a template, which can be used again later. You’ll be able to quickly load layouts you use a lot and edit them like any other page, which is a handy time-saving feature.

Conclusion

Page builders can be a real life-saver if you’re looking to create a customized look for your posts and pages. Columned layouts and drag-and-drop modules mean you don’t have to remember shortcodes or dig into your theme’s code in order to create a stylish website.

Getting started with a page builder like Beaver Builder is as easy as remembering these four steps: 

  1. Download and install the plugin.
  2. Create a new page and launch the builder.
  3. Add modules to your page and customize them.
  4. Save your page or create a template.

Here at WP Tech Support, we can handle all aspects of your website’s support. From page design to plugin security, we have monthly plans for any budget, so you won’t have to worry about your site’s performance!

Comments

  1. ปั้มไลค์ July 21, 2020 at 12:07 am

    Like!! Great article post.Really thank you! Really Cool.

  2. I relish, cause I discovered exactly what I used to be having a look for. You’ve ended my 4 day long hunt! God Bless you man. Have a great day. Bye

Leave a Reply

Comment policy: We value comments and the time that visitors to our blog spend to give feedback. Please note that all comments are manually moderated and any deemed to be spam or promotional will be deleted.