Creating and customizing a WordPress website has never been easier. You don't need to build it from scratch. You don't need to hire a developer. You don't need to learn everything about the back end of your site. You just need a drag and drop plugin. 

In this post, we'll take a closer look at what this type of WordPress plugin is and why you'd want one. Then we'll look at some of the best options on the market.

Grow Your Business With HubSpot's Tools for WordPress Websites

These tools were initially developed because the WordPress Classic Editor lacked the functionality and design elements that users expected and needed to build their sites. But some users didn't want to install a plugin; they wanted the default editor to be redesigned. That's why WordPress replaced the classic editor with the Gutenberg editor in WordPress 5.0 in December 2018.

Now that the new block editor has been released for a couple of years, some wonder if drag and drop page builders are obsolete. Let's tackle this question below.

Will Gutenberg replace page builders?

To answer this question, we first have to understand the difference between the editing experience that Gutenberg offers and the editing experience that page builders offer. 

In the Gutenberg editor, elements like a paragraph, image, or video are presented as distinct blocks of content. That means you don't have to worry about the alignment and organization of these elements — you can just move, edit, and format each block. Each of the 25 blocks comes with its own toolbar and settings for changing things like color, width, and alignment.

While it doesn't allow front-end editing, Gutenberg does offer an approximation of what visitors will see on the front-end of your site so that you don't have to constantly toggle between the editor and preview screens. Overall, the Gutenberg editor is a huge improvement from the Classic editor, which offered fewer design options and required shortcodes, custom HTML code, and embeds to add multimedia and other visual elements to your posts and pages.

However, page builders still offer more components and templates — and therefore, design possibilities — than the built-in Gutenberg.

For example, for the image block in the Gutenberg editor, you'll find some options for aligning, cropping, and re-sizing the image. Beyond that, you'll have to add some custom CSS in the Advanced tab of the sidebar, or download an image optimization plugin. Whereas with a page builder plugin like Elementor, you can not only set the size and alignment of your images — you can also add a hover animation, border, shadow, opacity level, max width, and styled caption. 

In exchange for this greater functionality and flexibility, you just have to download or purchase and install these WordPress plugins since they're created by third-party developers and not built into the core software.

Now that we understand the benefits of a drag and drop page builder plugin, let's check out some of the best options. 

Best Drag and Drop WordPress Plugins

The best page builders will not only offer drag and drop functionality — they'll also offer unique elements and modules, preview options, and more. Below we'll look at free and premium options so you can find the perfect tool for your budget. 

Free Drag and Drop WordPress Plugins

Creating a custom website doesn't have to be expensive. Let's look at some free tools that can help you create a beautiful website that looks like it was created by a developer or web designer. 

1. SiteOrigin Page Builder

With over a million downloads from the WordPress directory, the SiteOrigin Page Builder is one of the most popular free tools for building a responsive design.

Its simple drag-and-drop interface combined with its advanced row builder make it ideal for both beginners and advanced users. To create truly unique layouts, you can change the padding, spacing, and borders of your rows and widgets by filling in simple input fields instead of coding. However, you can add custom CSS for even more control, if you have the experience. 

This page builder not only seamlessly integrates with other tools and themes by SiteOrigin — it's also compatible with any WordPress theme, uses many WordPress widgets you already love, and looks just like the WordPress interface. That way, you get the best of WordPress's built-in functionality and its extensions — all without needing to learn a completely new tool.

SiteOrigin page builder left sidebar settingsImage Source

2. Themify Builder

Themify Builder is one of the most powerful and intuitive page builders for WordPress that doesn’t cost a dime. With this plugin, you can customize nearly every aspect of your site. Themify builder has a back and front-end edit mode so you can drag and drop elements to create unique layouts on the back end and then make additional changes to the font, background, and border of these elements on the front end.

Other unique features of the Themify Builder include a column and row generator that enables you to create responsive grids that display differently on desktop, tablet, and mobile as well as over 60 animations effects, which you can add to elements that you want to pop off the page like your CTA buttons.

frontend-mode

Image Source

3. Post and Page Builder by BoldGrid

Designed for users of all skill levels, BoldGrid’s Post and Page Builder provides an easy-to-use WYSIWYG interface that offers simple controls for beginners and advanced customization options for professionals.

Its drag and drop system is built on the Bootstrap Grid so you can drag and drop columns, rows, and containers to create unique and responsive layouts. You can add animations and control the margin, padding, box shadows, borders, and alignment of almost any element. Although the Post and Page Builder by BoldGrid will work best with BoldGrid themes, it’s designed to work with almost any WordPress theme so you aren’t restricted.

For more blocks, blog widgets, and sliders, you can upgrade to the premium version.

Text Setting pop-up on BoldGride page builder interfaceImage Source

4. Nimble Page Builder

Once installed, Nimble Page Builder is integrated into the WordPress Customizer. You can easily drag and drop text, images, forms, maps, icons, and other modules onto the page and preview how they’ll look live on your site. You can use the Nimble Page builder options on any post or page, from your home page to a single post or page, category or tag page, 404 pages, or even search results. You can even start building a page from scratch.

Don’t worry what theme you choose either. Since Nimble Page Builder uses native WordPress action hooks, it’s compatible with all WordPress themes.

 

5. Live Composer

Live Composer is a free front-end page builder plugin that has helped over 50,000 WordPress users create and customize a site with ease. With a front-end page builder like Live Composer, you know exactly how your page will look when published. All the headings, images, and CTA buttons you drag and drop on the page will look exactly how your site visitors will see them. Since there’s no need to make changes, hit the Preview button, make more changes, hit Preview, and so on, you can create custom pages in real time.

Live Composer comes with over 30 modules for creating custom landing pages and blog posts that are optimized for desktops and mobile devices. You can add testimonials, image galleries, call-to-action buttons, comment forms, and more simply by dragging and dropping the module onto the page.

User dragging and dropping icon module on mobiel page via Live Composer plugin

Image Source

6. GT3 Page Builder

GT3 Page Builder is another free but powerful drag and drop page builder for WordPress.

With this tool, you can create an unlimited number of custom pages. GT3 Page Builder comes with a number of useful modules for creating posts and pages on a business site. These include the standard features, like an accordion and toggle, slider, gallery, blog, video and progress bar, as well as more unique modules like one for your team, testimonials, pricing, and more. Each is customizable — you can simply fill in the input fields or add custom CSS, as shown below. 

Gallery module settings in GT3 Page Builder

Image Source

Premium Drag and Drop WordPress Plugins

To build and customize more pages in less time, you need a premium page builder. The tools below are rich with features and templates and used by thousands and thousands of WordPress site owners.

7. Elementor Page Builder

Elementor is a visual drag-and-drop page builder with advanced design capabilities, making it the page builder of choice for over five million WordPress users. 

Elementor offers hundreds of templates to choose from. Once you select a template, you can customize it with Elementor’s live editing and switch between desktop, tablet, and mobile previews to create beautiful and responsive pages in real time. You can add forms, sliders, buttons, images, headlines, search bars, and more with the 80+ widgets built into the Elementor interface.

Elementor editor text box

Image Source

If you're building a basic site, then check out the free version. It may offer all the templates, widgets, and animation effects you need for free. 

8. Divi Builder

Divi is another WordPress page builder used by millions of users. With Divi, you get a front-end editor so you can drag and drop elements, include special effects, add custom CSS, and see these edits in real time. You also get a lot more. 

Two of its most unique features are the split testing system and the Magic Color Manager. With the former, you can create multiple versions of a page with different colors, headlines, or entire layouts and show them to different visitors to determine which variation performs better. Divi’s Magic Color Manager is a dynamic color system that automatically remembers your recently used colors and stores them for easy access and also suggests new colors that match your current palette using an algorithm. 

If you purchase the Divi theme, you’ll get the Divi Builder and over 800 pre-designed templates. However, if you decide on another theme, then you can still install the Divi builder on your site.

9. Beaver Builder

Beaver Builder is a front-end drag and drop page builder for Wordpress used by over 175,000 sites.

Editing a page is quick and easy with this page builder. You can start with a template or a blank page, then drag and drop columns of content onto your page. Once you fill those columns with text, images, and more, you'll be ready to publish. 

Like Divi, you can purchase the Beaver Builder theme and get the Beaver Builder plugin included with your purchase. However, you can use the Beaver Builder plugin with any WordPress theme — thought it will work best with a theme with a full-width layout and minimalist design.

Editing button in Beaver Builder live demo

Image Source

10. Visual Composer

Visual Composer is another popular premium page builder that lets you customize the look of your entire website. In addition to pages, posts, and custom post types, you can modify the headers, footers, and menus across your entire website.

You can start with one of Visual Composer's professionally designed templates, or you can simply start dragging and dropping elements to build a page from scratch. For almost any element, you can add background effects, shadows, and animations and control the padding, margin, border, and radius. 

Pasting image in Visual Composer drag and drop interface

Image Source

11. WPBakery Page Builder

With over four million downloads, WPBakery Page Builder is one of the most popular page builder options on the market.

Like the Themify Builder, it offers a front and back-end editor mode. You'll also get access to WPBakery's template library, which contains over 80 predesigned templates and layouts, and over 50 content elements. In addition to its robust built-in functionality, the WPBakery builder can be extended with over 250 add-ons. This multitude of features and add-ons makes the WPBakery Page Builder ideal for creating  complex and detailed layouts for your pages, posts, and custom post types. 

WPBakery Page builder frontend editor

Image Source

Creating a Custom WordPress Website

WordPress is a powerful content management system, but most site owners extend its built-in functionality with plugins. This is true of its editing capabilities. The Gutenberg editor is an easy-to-use block editor, but a third-party page builder offers more design options and templates.

The drag and drop plugins mentioned above are some of the best WordPress page builders. Any of them can help you create a site that looks exactly the way you want it to without needing to code. 

Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

 Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

Originally published Sep 8, 2020 7:00:00 AM, updated September 08 2020

Topics:

WordPress Plugins