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. However, designing appealing websites in WordPress 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 examine the benefits page builders offer your WordPress website design process and walk you through how to customize a page with a WordPress drag-and-drop builder. Let’s get started!

Why You Should Consider Using a Page Builder for WordPress

WordPress is notoriously flexible, in part because it’s an open-source platform. This means developers and programmers can create new plugins, page builders, and popular tools among website designers of all skill levels.

A page builder can change how you interact with the editing functionality of a standard WordPress post or page. A ‘drag-and-drop’ builder lets you 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:

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

• Easy drag-and-drop designing. As mentioned, page builders make moving site elements around easy. 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, galleries, and more advanced features.
• Multi-column layouts. Breaking out of the one-column design model can be challenging 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 WordPress user can benefit from. They’re excellent for first-time site owners, yet even agency designers can use 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 a viral WordPress page builder:

Trusted by some of the biggest names in WordPress, this tool offers many ways to add enhancements and save time while designing. Let’s look at four steps to help you start creating pages with Beaver Builder quickly.

Step 1: Download and Install the Beaver Builder Plugin

You’ll want to check out Beaver Builder’s pricing options. There are several choices, starting at $99 for a standard installation:

Additionally, Beaver Builder Lite is free through the WordPress Plugin Directory, so you can try it before buying it. Then, you can upgrade when you’re ready.

For now, we’ll focus on the plugin’s premium version. Once you choose and purchase a plan, you can download the plugin’s .zip file from your account page. If upgrading from the lite version, 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. Select the Upload Plugin button and navigate to the .zip file you saved earlier. Upload the file and click on Install Now<:

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

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:

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

Step 2: Create a New Page and Launch Beaver Builder

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

Unless you preloaded a theme, you’ll have 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:

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 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:

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

For example, you’ll see an Item panel 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:

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:

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

Once you’ve tweaked your module, remember to save it. Additionally, if you liked the accordion you made, you can save its settings to add it to other content quickly. Your custom modules are under the Saved tab in your main Beaver Builder toolbar.

Step 4: Save Your Page or Create a Template

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 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:

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

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

Conclusion

Page builders can be a real lifesaver if you’re looking to customize the look of 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 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 WordPress Maintenance plans for any budget, so you won’t have to worry about your site’s performance!