17+ Best WYSIWYG WordPress Page Builders Compared [2021 Updated]

WYSIWYG-WordPress

What is WordPress WYSIWYG?

WYSIWYG stands for “what you see is what you get” – editing mode where the final output is visible in real-time.

WYSIWYG on WordPress is usually achieved with the help of a plugin that eliminates the pain of dealing with code and creates WYSIWYG functionality on WordPress.

For more information on WYSIWYG please see these sections below.

Today WordPress is the most popular content management system (CMS) in the World. 53% of all websites on the entire Internet use WordPress as their CMS.

Hands down, WordPress has tons of advantages – that’s true.

However, it has also one significant disadvantage: unlike DIY website builders WordPress is not the easiest solution if you are not tech-savvy.

That’s the exact reason why we have Drag and Drop WordPress Page Builders.

In this post, we have gathered and compared the best drag and drop WordPress page builders with WYSIWYG functionality available today on the market.

Let’s dive in.


Disclosure: Some of the links in this article are affiliate links. This means if you click on the link and purchase the item, we might receive an affiliate commission. Commissions are given at no extra cost to you and they do not influence our opinion on products.

WordPress Front End Editors Table

EditorMoney BackPrice
Divi Builder30 daysFrom $89
Elementor30 daysFree (Pro from $49)
Beaver Builder30 daysFrom $99
Themify30 daysFree (Pro $69)
Thrive Architect30 daysFrom $19/month
Visual Composer15 daysFree (Pro from $59)
Page Builder by SiteOrigin60 daysFree (Premium $29)
Oxygen60 daysPremium $99/year
Gutenberg WordPress EditorN/AFree
Live ComposerN/AFree
MotoPress Page Builder30 daysFrom $39
Frontend Text CustomizerN/AFrom $20
Microthemer30 daysFrom $49
Advanced Editor ToolsN/AFree (Pro from $25)
WPBakery Page Builder15 daysFrom $45
Blog DesignerN/AFree (Pro from $59)
Atomic BlocksN/AFree
Ultimate BlocksN/AFree

1. Divi Builder

Pros:

Cons:

  • Long learning curve
  • Uses shortcode based widgets
  • Can be slower at times with long pages

Divi is probably the most popular drag and drop WordPress builder out there.

Divi Builder is:

  • super easy to use
  • beautifully designed
  • extremely powerful

Here is how Divi Page Builder looks in action:

Divi-WordPress

Building a website with Divi is a breeze. There is probably nothing you can’t build with it.

Plus, Divi comes with hundreds of professionally designed layouts accessible right from the Divi builder in your WordPress panel. Some of these layouts are complete website packs which means that all you need to do is to pick one and add your content.

Adding Divi pre-made layouts and website kits to the WordPress website looks like this:

Using Divi Premade Layouts

See the demo of the website pack used in the example above > Divi Digital Marketing Layout – Live Demo

If you are not planning to have something very special or extremely unique on your website, Divi pre-made templates are great for building your website from scratch literally in the blink of an eye.

Here is a quick video that explains Divi in detail:

Now let’s see how Divi looks behind the scenes when you actually build on WordPress with it.

There are two ways of building websites with Divi Builder:

The first one is Divi Visual Builder where you edit your website on the front-end (right on your website like in the screenshot below). This is one of the best drag and drop WordPress page builders on the market.

Divi Visual Editor Screenshot
Divi Visual Builder

The second option is the Back-end Builder (or WireFrame view) – where you work in your WordPress dashboard (or inside Divi Visual Builder) with Divi modules like in the screenshot below:

Divi WireFrame View

*After the introduction of Gutenberg Editor, for this option to work, you need to have WordPress Classic Editor plugin installed. Alternatively, you can turn on WireFrame view on Divi Visual Builder (frontend).

Both options are great. It’s a mere matter of personal preference what option you use.

WireFrame view is great for visualizing the structure of your page and organizing long form content with lots of elements and design.

This one is definitely among our favorite Divi features. Plus, Divi Visual Builder and WireFrame view work seamlessly together:

Divi Builder WireFrame View
Switching between Divi Visual Builder and Wireframe view

Importantly, Divi is more than just a WordPress page builder. It’s more like a WordPress design and marketing toolset. It has everything you may need for your WordPress website starting from intuitive drag and drop interface and ending with advanced functionality like A/B testing.

Just check the Elegant Themes Divi page to see all it has to offer. It’s amazing.

The official Divi page itself is the perfect example of the utmost web design.

Free Divi Test Drive

Explore the surprising power of Divi Visual Builder

Divi Builder Main Features:

  • Drag and drop WordPress page builder with front-end and back-end editor
  • No coding skills required
  • Easy setup
  • Intuitive user interface
  • Works with any WordPress theme
  • Responsiveness
  • Awesome 24/7 Support
  • Huge User Community (including Divi centered forums, websites, and communities with countless tutorials on everything you might need)
  • Amazing Bloom & Monarch Plugins Included as a bonus

Additional Features:

  • 100+ Complete Website Packs
  • 800+ Pre-made Designs
  • 40+ Website Elements
  • Divi Library where you can save your custom designs, modules and layouts
  • Global elements
  • Split testing functionality
  • Inline text editing
  • Bulk editing
  • Animations
  • Undo/Redo functionality
  • Keyboard shortcuts
  • Searchable & filterable settings
  • Custom CSS control
  • Nice integration with WooCommerce (WooBuilder)
  • History, Backups and Autosave
  • Export/Import Options

Did you know?

Divi is compatible with Gutenberg.

Click here to learn more!

How Much Does Divi Cost?

There are two pricing options offered by Elegant Themes for Divi Builder. One is yearly access which renews every year and the other one is lifetime access with single time payment. Here are the current pricing information for both options:

Yearly access is $89
Lifetime access is $249

What is included:

  • Complete access to all themes, plugins (including Bloom & Monarch), and features
  • Unlimited websites
  • Unlimited users
  • Premium support
  • 30-day no questions asked money-back guarantee

More on Divi Builder:


2. Elementor

Pros:

  • Feature-packed free version
  • Intuitive user interface
  • Constant updates
  • Great documentation and videos
  • Active Facebook group community

Cons:

  • Can be complicated for new users
  • Custom styling doesn’t always work
  • No white label option for developers

Elementor is another widely popular WordPress drag and drop page builder plugin known for its ease of use, clean code and speed (both in terms of plugin’s work and the speed of websites built with Elementor).

As a plugin Elementor has great reviews on WordPress (4.9 stars out of 5 based on 5051 reviews at the time of writing this post):

WordPress Editor Elementor Review Score

It also comes with over 80 design elements including image, text, video, map, icons and more.

Elementor Showcase

See the real websites built with Elementor

Elementor works great with most WordPress themes and plugins and is available in over 50 languages.

Here is how building with Elementor looks like:

RELATED: Elementor & GutenbergDivi vs Elementor | Beaver Builder vs Elementor

Elementor Main Features

  • High speed
  • 24/7 Support (Pro version)
  • Auto Save functionality
  • Redo/Undo functionality
  • Responsiveness
  • Role Manager

Additional Features

  • 150+ Elementor Kits and Templates
  • Easy integration with major marketing tools and platforms
  • Visual Form Builder
  • Advanced Pop-up Builder (includes 100+ pre-built pop-up templates)
  • WooCommerce Builder
  • Content Lock Functionality
  • Cool motion effects and animations
  • Powerful Custom Positioning
  • Shape Dividers
  • Lightbox Overlay
  • Social Icons & Share Buttons
  • Star Rating and Reviews
  • Sticky Elements
  • Evergreen Countdown
  • Tutorials and other learning materials
  • Developer-Friendly

Elementor Pricing

The free version of Elementor includes 30 basic widgets and WordPress Drag and Drop Page Builder.

Their Elementor Pro version comes with 50+ advanced widgets and every other feature that makes Elementor one of the best WordPress page builder solutions on the market. This includes Elementor Theme Builder, Pop-up Builder, Visual Form Builder, Advanced visual effects and WooCommerce Builder.

Elementor Pro costs $49 for a single website, $99 for three websites, and $199 for 1,000 websites. All plans include 1-year support and updates.

Read also:


3. Beaver Builder

Beaver Builder is one of the best WordPress page builder on the market.

Nice and neat drag and drop page builder allows users to work on their WordPress pages without using a single line of code.

With Beaver Builder your coding skills do not matter and creating a stunning website is possible with simple drag and drop manipulations.

WYSIWYG-Editors

Beaver Builder has an intuitive and clear interface which makes working with this editor easy for anyone. Over 500,000 WordPress websites have been built with Beaver Builder so far and this number is ever-growing.

Here is a quick introduction video to Beaver Builder:

RELATED: Beaver Builder vs Divi | Beaver Builder vs Elementor

Beaver Builder Main Features:

  • Drag and Drop WordPress page builder
  • No coding skills required
  • Intuitive interface
  • Responsiveness
  • Compatible with any WordPress theme
  • Helpful community
  • Awesome pre-made templates

Beaver Builder Additional Features:

  • WooCommerce Support
  • Save & Reuse Options
  • Shortcode Support
  • Widget Support
  • Import & Export Functions
  • Translation friendly
  • Social Buttons

Beaver Builder Pricing

Beaver Builder comes in three different yearly packages. The packages are Standard, Pro and Agency. Here is what each package includes:

Standard Package – $99

  • Beaver Page Builder is included
  • Beaver Builder Theme is not included

Pro Package – $199

  • Beaver Page Builder is included
  • Beaver Builder Theme is included
  • Multisite Capability

Agency Package – $399

  • Everything that two above packages include plus Multisite Network Settings and White Labeling

All three packages come with 1 year support and are valid for unlimited number of websites.


4. Themify

Themify Builder is a well-known WordPress back-end and front-end visual editor that comes with Themify theme. However, Themify drag and drop editor can also be downloaded independently as a plugin if you are using a different WordPress theme.

Similar to Divi Builder, Themify also provides two editing options:

  • Backend editing
  • Frontend editing

So, depending on your personal preferences you can use any of these options and comfortably switch between them. With Themify backend builder you will be able to easily drag and drop different modules on your WordPress backend to build your pages. Themify frontend interface at the same time will provide you the classic WYSIWYG building experience, so you will be able to visually see what you do in real time.

Themify builder comes with over 40 professionally designed layouts which you can simply import and build your own pages based on them. Stunning web pages on many different topics can be created literally in minutes with these pre-made layouts.

With Themify builder you can create amazing animation effects too:

Themify Animation Effects

Additionally, Themify builder includes its own caching system that helps to reduce server resources and makes page processing faster.

Themify Builder Main Features:

  • Back-end and front-end builder
  • Mobile responsiveness
  • Multi-site support
  • Can be extended further with add-ons

Themify Builder Additional Features:

  • Undo/Redo functions
  • Import/Export functions
  • Easy duplicating
  • Flexible rows and columns combinations
  • Layout parts
  • 60+ animation effects
  • Custom styling

Themify WordPress Page Editor Pricing:

The basic version of Themify Page Builder is free. Builder Pro that comes with all 25 builder addons costs $69. However, you can also buy the addons separately for $39.


5. Thrive Architect

As the page builder positions itself, Thrive Architect is a “click to edit” solution (as they also call this “truly visual WordPress page builder”). Similar to other WordPress page builders, Thrive Architect adds a real front-end editor to your WordPress meaning that you do not have to deal with WordPress back-end to build your pages.

This aligns well with Thrive Architect’s promise about truly visual WordPress experience. If you want to edit something using Thrive Architect the only thing you need to do is to click on it and all possible editing options will pop up.

You can click and edit anything you have on your back-end right on the front-end where you actually see what you edit (as you know this is not possible when you work on the back-end).

WP Front End Editor - Thrive Architect

Just like other builders listed above, Thrive Architect requires no coding skills. It comes with pre-made conversion elements such as buttons, testimonials, lead generation forms, and countdown timers.

In contrast with other WordPress page builders, Thrive Architect makes a special accent on being built for business and conversions focused websites.

On top of that, 329 different landing page templates are available in Thrive Architect library to use at the moment of writing this post.

Thrive Architect Main Features:

  • Full front-end drag and drop builder
  • Designed to speed up the page building process
  • Desktop, smartphone and tablet previews
  • Mobile responsiveness

Thrive Architect Additional Features:

  • 329 pre-designed and conversion focused landing page templates that are also fully customizable
  • Plus ready made pages for all your other marketing needs including webinar and product launch pages
  • Additional conversion focused elements (buttons, countdown timers, forms, testimonials etc.)
  • Easy integration with the major marketing tools
  • Simple landing pages designed to quickly validate business ideas
  • Blog post layouts and elements designed for higher user engagement
  • Font customization
  • Full width layouts
  • Hover effects
  • Advanced mobile customization options
  • Animations

Thrive Architect WP Drag and Drop Plugin Pricing:

Thrive Architect comes at two different pricing options:

1. Thrive Suite Membership at $19 per month which is billed on a yearly basis at $228. This membership includes access to all Thrive plugins and themes, with unlimited support and product updates.

2. Thrive Suite Membership at $30 per month, billed quarterly at $90. This plan also includes access to all the Thrive plugins, Thrive Theme Builder, unlimited support, product updates, and Thrive University access.


6. Visual Composer

Visual Composer is a massively popular drag and drop WordPress page builder that requires no coding. It allows users to edit pages in real time on the front-end and view the end-results before hitting the publish button.

Design options include control over background, spaces, borders, parallax effects and more right from the editor.

WordPress Visual Editors - Visual Composer

Hundreds of content elements are available in Visual Composer (some of them are available with Premium access to Visual Composer Hub only).

READ ALSO: Elementor Vs Visual Composer

Visual Composer works with any WordPress theme and you do not lose your design layouts when you switch the themes.

Main Features:

  • WordPress widgets support
  • Custom CSS
  • Global templates
  • Responsive design
  • Compatibility with Yoast SEO plugin

7. Page Builder by SiteOrigin

The most popular WordPress page builder plugin out there that is totally free but powerful. It offers back-end and front-end editing options based on widgets.

SiteOrigin Page Builder works with any theme and keeps your layout and content in place when you change your WordPress theme.

Page Builder by SiteOrigin does not require any coding to build beautiful WordPress websites and pages that are fully responsive. It’s easy enough to edit WordPress pages with this editor both on the back-end and front end.

Although its functionality is not as rich as the premium options above the SiteOrigin Page Builder does its job effectively and with ease.

Main Features:

  • Based on content elements
  • Front-end and back-end functionality
  • Works with any WordPress theme
  • Useful history browser that lets to roll forward and back through your edits

8. Oxygen

Launched in 2016 by Soflyy, Oxygen is one of the best WordPress page builder that has managed to attract a lot of users from the WordPress community.

It is a drag and drop page builder plugin that lets you build powerful WordPress websites with a combination of pre-built templates and other basic elements.

Oxygen WordPress page builder

The Oxygen Builder is a full drag and drop visual builder that supports theme editing too. So if you’re looking for a theme builder or an alternative to Divi or Elementor, Oxygen is a great option to consider.

If you use WooCommerce on your website, you can use Oxygen to create and customize all the shop pages such as products page, checkout page, and product category pages. It also supports WooCommerce styles such as buttons, links, widgets, texts, notifications, and more.

Oxygen Builder Main Features:

  • Drag and drop visual editor
  • Fully responsive editing
  • Flexbox layout engine
  • Scroll animations
  • Full WooCommerce support
  • Global colors
  • SEO-friendly
  • Supports dynamic data
  • Built-in Gutenberg support

Oxygen Builder Pricing:

The best thing about Oxygen is that unlike other page builders, Oxygen only has one-time plans, so you don’t have to pay every year, and all the plans include lifetime updates, lifetime support, and unlimited installations.

The three pricing plans Oxygen offers are:

  • Basic plan – costs $99 and covers only the primary Oxygen page builder.
  • WooCommerce plan – costs $149 and includes the primary page builder plus WooCommerce integration.
  • Agency plan – costs $169 and covers basic, WooCommerce, and the Gutenberg block editor.

As the Oxygen page builder is relatively new and trying to establish it’s presence in the market, they have very competitive prices, so if you like the page builder, it’s best to buy the WooCommerce or the Agency plan before they increase their price to match the other costlier page builders.


9. Gutenberg WordPress Editor

WordPress has recently launched a new visual builder called Gutenberg, which is designed to ease the workflow for the users and give powerful styling options built-in in the editor.

This new builder uses a new blocks approach where each paragraph, image, etc. is considered a single block so that you can style everything the way you want without the need for coding.

You can create modern and multimedia heavy layouts with Gutenberg without installing any additional plugin.

But as Gutenberg is new and is geared towards ease of use, it lacks a few advanced features such as wrapping options, padding, and margins, etc. So Gutenberg is best if you are looking to create simple layouts.

Gutenberg Editor Main Features:

  • Paragraph block
  • Heading block
  • Subheading block
  • Quotes block
  • Image block
  • Gallery block
  • Cover Image block
  • Video block
  • Audio block
  • Columns
  • Lists block
  • and, Buttons block

Gutenberg Pricing:

Gutenberg is completely free and is now included in all WordPress 5.0 installations by default. If you haven’t updated to the latest version yet, you can install the Gutenberg plugin from the WordPress repository for free.

Additional resources on Gutenberg:


10. Live Composer

Live Composer is a free, open-source and best drag and drop WordPress page builder plugin that you can use to create and customize your websites.

What makes Live Composer the best WordPress page builder is that it offers a 100% drag and drop page builder interface with more than 30 content modules so you can create unique page designs with ease.

Live Composer WordPress page builder

With Live Composer content modules, you can create custom landing pages, blog posts, and other page types (about us, service, homepage, etc.). The builder seamlessly works with all the WordPress themes, so you don’t have to invest in any particular paid theme.

Live Composer Main Features:

  • 30+ content modules
  • Responsive editing
  • Full visual drag and drop builder
  • SEO friendly
  • Landing page support
  • Full WooCommerce customization
  • In-built Portfolio presets

Live Composer Pricing:

The basic Live Composer site builder is free WordPress page builder plugin with two premium extension plugins to which you can upgrade if you need more customization options.

  • The Pro extension pack costs $49 for 1 site and $99 for unlimited sites. This extension offers additional features such as restricted content, contact forms, preloader, breadcrumbs, ACF support, mega menu, and more.
  • The Woo extension pack is priced at $49 for 1 site and $99 for unlimited sites. This extension offer full product page customizations, product listing grids, account stylings, checkout, and cart page customizations.

Both extensions include 12 months of support, regular updates, and a 30-day money-back guarantee. In case you don’t like the product, you can easily ask for a full refund.


11. MotoPress WordPress Page Builder

MotoPress is another drag and drop WordPress page builder plugin capable of designing pages, posts, and custom post types. You can build 100% responsive websites with MotoPress, without writing a single line of code.

MotoPress Page Builder and Frontend Editor

The best part about this page builder is that it works smoothly with all WordPress themes, and it comes with 30+ built-in content elements like text, image, slider, grid gallery, button, social buttons, video, audio, post grid, accordion, tabs, table, and more!

Main Features

  • This page builder supports frontend editing, which makes the website building process so much simpler
  • Editing for mobile, desktop, and tablet devices is available
  • It comes with mobile-ready layouts
  • From sections to widgets and pages, everything is customizable
  • It is compatible with WPML (WordPress Multilingual plugin) and multilingual interface

MotoPress Page Builder Pricing

You will get three pricing options with MotoPress builder:

  • Personal plan at $39 for 1 website.
  • Business plan at $69 for 5 websites.
  • Developer plan at $139 for unlimited websites.

All plans include a yearly license for automatic updates and support.


12. Frontend Text Customizer – WordPress Visual Editor

WordPress customization is made easy with the Frontend Text Customizer Toolbar, which allows you to customize anything on your WordPress website, including plugin elements, templates, and menus.

Frontend Text Customizer Toolbar

The toolbar can be accessed with one click, and it is visible on all the pages. You can use the toolbar to add your custom style to any page on a site. No coding or technical skills are required to access this customizer toolbar.

Frontend customizer toolbar to edit CSS

Main Features

  • Animated frontend editor and history log
  • Comes with over 650 font styles
  • The toolbar supports Ajax based save — which means that you can save the edits without reloading the page
  • Compatible with all kinds of well-known browsers
  • It does not modify the core files of plugins or themes
  • One-click delete and one-click highlight

Frontend Text Customizer Pricing

Frontend Text Customizer’s regular license is available for $20 (with 6 months support). You can extend the support to 12 months for $5.63. The extended license is available at $100 for freelancers or agency owners to use on their client websites.


13. Microthemer — Live CSS editor for WordPress Site Builders

Microthemer is a live CSS (point-and-click) editor that you can use to get developer-level design control on your website. You can design responsively, create CSS grid layouts, integrate with the page builder of your choice, and get expert help with this editor. 

Microthemer Live CSS Editor

You can use Microthemer to change the page design in a matter of seconds as the style edits instantly make an appearance on the screen. Microthemer also shows the HTML code for the selected elements, which makes it easy to edit and stylize.

Main Features

  • Microthemer can customize any part of a WordPress page
  • Comes with a variety of (150+) CSS styling options
  • It is equipped with drag and drop CSS grid controls
  • Supports Google fonts
  • Comes with a revision and restore feature
  • Built-in responsive design support with multiple breakpoints
  • Integrates well with other popular WordPress page builders like Elementor, Oxygen, and Beaver Builder

Microthemer Pricing

Microthemer offers both yearly and lifetime pricing options where yearly plans have an annual fee, and they can be canceled or upgraded at any time. The lifetime plans have a pay once, use forever policy. 

The plans are as follows:

  • Standard yearly plan at $49 for 3 sites in total, 1 year of free upgrades and support
  • Developer yearly plan at $90 for unlimited sites, 1 year of free upgrades and support
  • Standard lifetime plan at $78 for 3 sites license, lifetime upgrades and support
  • Developer lifetime plan at $399 for unlimited sites, lifetime upgrades and support

Lastly, there’s a Developer monthly plan at $0 for the first month (afterward, it’s $8.99/month), which is good for users to try the builder before paying for it.


14. Advanced Editor Tools (TinyMCE Editor)

Previously known as TinyMCE Editor, Advanced Editor Tools is a rich text editor that now merges the WordPress classic editor and the Gutenberg editor. This means that you can use the Classic Paragraph Block of the old classic editor in the new Gutenberg editor — giving you the best of both worlds.

The Advanced Editor Tools plugin allows you to add, remove, and arrange different buttons in the visual editor toolbar as per your choice, and it also lets you configure up to four different rows of buttons, including tables, colors, background, text, font family, and font sizes. 

Main Features

  • Allows you to opt between the classic block and classic paragraph in terms of setting the default block in the WordPress editor
  • Allows you to create and edit tables in the classic editor and the classic blocks
  • Search and replace function
  • Supports custom font family and font size in the classic block and classic editor

TinyMCE Pricing

The basic version of TinyMCE is available on WordPress.org, which you can download for free.

To get access to the premium editor, you can subscribe to its cloud essential plan at $25 per month, which, when billed annually, you get 2 months free. It can be billed monthly as well. You will get ticketing support in the premium plan, more than 9 premium plugins, and premium icons and skins. 

There’s another cloud professional plan which costs $75 per month which offers everything in the cloud essential along with a link checker, spell checker pro, and accessibility checker.


15. WPBakery Page Builder for WordPress

The WPBakery WordPress Page Builder lets you build responsive websites, and it also allows you to manage your content with ease as it comes with an intuitive WordPress front and back end editor.

WPBakery page builder for WordPress

Similar to other WordPress builders listed on this page, you won’t require any technical skills or programming knowledge to create websites using WPBakery page builder. The editor also comes with several premium content templates and predefined layouts, which allow building WordPress websites in a very short time.

Main Features

  • This WordPress page builder supports both front end and back end editing
  • Comes with 80+ predefined layouts and grid design templates
  • Comes with a shortcode mapper
  • Multisite and multilingual support
  • 200+ addons with hundreds of content elements
  • Built-in user role controls
  • Compatible with WooCommerce and Yoast SEO

WPBakery Page Builder Pricing

The regular package is available for $45 for use on 1 site, along with free updates, 6 months premium support, and access to a template library. The extended package is available for $245 for use in a single SaaS application, along with free updates, premium support, and theme integration.


16. Blog Designer and Blog Designer PRO for WordPress

Blog Designer is a quick and free solution for anyone who wishes to have a responsive blog page along with the website. Blog Designer comes with 10 unique blog templates, and you can easily set up your WordPress website’s blog with it. 

This plugin allows you to create an incredible website without any technical or CSS skills up your sleeves. The admin panel is also user-friendly, and beginners can use it easily too. 

Main Features of Blog Designer

  • Fully responsive
  • Cross-browser support such as for Firefox, Safari, Chrome, and others
  • The number of posts per page can be managed easily
  • Comes with 10 default blog templates
  • Custom CSS support
  • Translation ready

Main Features of Blog Designer Pro

  • 50 default blog templates along with more than 200 options for combinations
  • Comes with 10 grid templates
  • More than 5 unique timeline templates
  • Over 3 magazine templates
  • More than 40 single post layout designs with several features
  • Over 600 fonts

Pricing

Blog Designer is available for free on WordPress.org, while Blog Designer Pro’s regular license is available for $59.


17. Atomic Blocks – Gutenberg Blocks Collection

Atomic Blocks has changed its name to Genesis Blocks, but the beautiful design, powerful blocks, and the plugin’s innovative team remain the same. Atomic Blocks is nothing but a collection of page building blocks made for the new Gutenberg block editor. 

Atomic Blocks for Gutenberg

The plugin makes it easy for you to customize the page layouts and design sections to get better and faster results.

Main Features

  • Google AMP support
  • Premium block, section, and layouts library
  • Role-based user permissions

Atomic Blocks Pricing

The basic version of Atomic Blocks is free, which includes 14 blocks, 4 pre-built page layouts, 8 pre-built sections. 


18. Ultimate Blocks – Gutenberg Blocks Plugin

Ultimate Blocks is a Gutenberg blocks library plugin that over 20,000 WordPress users use. It’s similar to Atomic Blocks in its functionality. The plugin comes with 15 Gutenberg blocks, including team block, price list block, testimonial block, info box block, content filter, table of contents, HowTo schema, countdown, and others. 

The good part about using Ultimate Blocks is that it is equipped with built-in support for the Astra theme, which allows you to create good-looking websites.

Main Features

  • Comes with 23 new blocks
  • Comes with an infobox
  • It is equipped with content timeline blocks

Ultimate Blocks Pricing

Ultimate Blocks is free. 


What is WordPress WYSIWYG Editor – Detailed Explanation

A WYSIWYG editor is what you see is what you get editor that allows to see how the end result will look like in real-time.

All the content types such as text, graphics, and links appear as the final output when edited in a WYSIWYG editor. So there’s no need to write code, and you can use the rich text editor to create and modify all the design elements.

TinyMCE Advanced WordPress editor

For example, when you edit anything in the WordPress editor, you can style it with all the customization options, and the look in the editor will be almost the same as the look you will get after publishing the document.

Microsoft Word is a great example of a WYSIWYG editor. In MS Word you can write and design the content elements, and the elements you see on the screen will be the elements you will get when you print the document.

WYSIWYG editors are designed for non-coders so that everyone can create documents or build web pages in a simple and straightforward way.

Now, for a long time, WordPress used the TinyMCE based Classic WYSIWYG editor for posts and pages, but with the release of WordPress 5.0, WordPress has officially switched to the new Gutenberg editor.

Let’s discuss both in detail…

Classic WordPress Editor

The Classic editor was the default editor in WordPress till version 4.9 of WordPress.

But with WordPress 5.0 Gutenberg replaced Classic editor and has become the default WordPress editor.

The Classic Editor is still available as a plugin that you can install to switch back to the previous WP editor. But it’s important to note that all the new developments will be done on Gutenberg only. And WordPress will discontinue the support for the Classic editor plugin by 2021.

New WordPress Gutenberg Editor

Announced in 2018, Gutenberg is the new block-based editor in WordPress. It is a backend drag-and-drop (partly WYSIWYG) editor where you can add blocks to the pages without writing any code.

With Gutenberg blocks, you can add, rearrange, and style content with very little technical know-how. You don’t need any prior knowledge of HTML or CSS to edit specific content blocks in Gutenberg.

While website owners and creators loved the Classic editor, it lacked many essential features offered by the competition (like Squarespace and Wix).

Gutenberg block editor

Gutenberg editor is designed to give the flexibility necessary for creating beautiful posts and pages.

And this all comes with the power of WYSIWYG.

With Gutenberg user-friendly drag-and-drop interface, you can now create professional web pages without installing additional third-party plugins.

The most popular themes like Divi, Astra, Generatepress, etc. have already started integrating the Gutenberg editor with custom blocks and customizations.

If you haven’t already used Gutenberg, you can click here to try its free demo.

Note: While Gutenberg is termed as a WYSIWYG editor, it is only a backend editor, and it cannot be used to build pages visually. Only advanced page builders like Elementor and Divi Builder offer 100% WordPress visual WYSIWYG experience.

Gutenberg vs Classic Editor

Here’s a quick comparison table of both editors:

Gutenberg EditorClassic Editor
Drag and drop interface
WYSIWYG experienceNo live preview while editing
Supports advanced tools like embeddingNeeds coding knowledge or plugins
Optimized for fast content creation
Offers pre-built templates library
Supports multiple screen sizesOnly supports desktop screen size

Let’s now see how you can use each one of these two WordPress editors…

How to Use the Old WordPress Classic WYSIWYG Editor

This Classic WordPress WYSIWYG editor is powered by a TinyMCE JavaScript software, which enables all the customization options of the editor.

TinyMCE is a web-based editor and an open-source platform built with HTML and JavaScript.

Now to use the WordPress WYSIWYG editor, you can go to your WordPress dashboard, and add a new post or page.

NB: As we already mentioned this above, after the introduction of Gutenberg, if you want to use the Classic editor you need to enable it as a plugin.

WordPress WYSIWYG editor

The WordPress editor is the main focus of the page from where you can control almost all the aspects of how your final published page will look like.

A few things you can customize with the Classic editor are:

  • Heading tags — H1, H2, H3, and so on…
  • Font styles — bold, italics, and strikethrough
  • Lists — bulleted and numbered
  • Alignment of the elements
  • Text and background colors
  • Tables
  • and Media — images, videos, etc.

The classic editor also supports custom styles so you can customize almost anything including design and behavior of the page and its elements.

Importantly, the in-built WordPress editor is very different from the third-party WYSIWYG editors mentioned in this article.

The default WordPress editor is designed to keep everything simple and for basic things only. In contrast, third-party editors such as Divi or Elementor take the WordPress WYSIWYG experience to a whole new level and you can use these to create almost any type of layout you want. 

Plus, with advanced WordPress page builder plugins, you can build right on the page (this is called the front end) in real-time instead of building on WordPress dashboard (back end) and constantly switching between editor and preview.

How to Use the New WP Gutenberg WYSIWYG Editor

Gutenberg (introduced in 2018) is a visual drag-and-drop editor that focuses on helping users to create modern web pages.

The Classic editor was great for writing blog posts with a few headings and images. But Gutenberg has changed all that with its block-based approach.

Now, in Gutenberg, you can drag-and-drop content blocks to put together beautiful pages.

Note: Again, don’t confuse Gutenberg with page builders like Elementor and Divi. Although Gutenberg is much more advanced compared to the old classic editor, it’s still not a front-end editor. Gutenberg is a visual backend builder that allows you to design pages within the WordPress editor – on the backend. But it is not a complete alternative to page builder plugins like Divi or Elementor.

Blocks

Gutenberg is a block editor, which means that every element in the editor is converted to a block when added to the page.

Every new paragraph, heading, list, image, and so on resides in its own block.

To add a new block to the page, you can click on the plus icon on the top left corner. All the blocks are presented in a left sidebar with a search box on the top.

Blocks in the Gutenberg editor

The included blocks in the Gutenberg are:

  • Paragraph: This adds a simple paragraph field.
  • Heading: This adds the heading tags: from H1 to H6.
  • List: Creates a bulleted or numbered list.
  • Quote: Give visual emphasis to the highlighted text, which means that text is quoted from another source.
  • Code: Displays code snippets where you can add HTML and CSS to create custom content.
  • Preformatted: Adds text that respects your tabs and spacing and also allows custom styling. Usually used to display code snippets within the content.
  • Pullquote: Gives particular visual emphasis to the highlighted text, where the visual design is based on the theme.
  • Table: Inserts a table that can be used to share number based content like charts and data.
  • Verse: Useful for content like poetry and song lyrics.
  • Image: Inserts an image that you can add from the WordPress media library.
  • Gallery: Display multiple images in a rich format — often based on the theme.
  • Video: Allows you to either embed a video from the media library or add it from Youtube.
  • Button: Adds a button (CTA) to prompt visitors to take the desired action.
  • Columns: Adds a block that displays content in two or more columns and allows you to show different content in one row.
  • Group: Combines multiple blocks into a group.
  • Spacer: Customizable height that you can add between any two blocks.
  • Social icons: Displays icons that you can link to your social media profiles.
  • Custom HTML: Allows you to add custom HTML code with CSS and preview the results as you edit.

Specific embed blocks are also available for Twitter, YouTube, Spotify, SoundCloud, Vimeo, Dailymotion, Reddit, TED, and more!

Patterns

Block patterns are predefined block layouts that you can insert and customize instantly.

The idea behind patterns is to simplify the editing process by making frequently used blocks readily available within a patterns library.

So, instead of customizing a block every time you add into a page, you can insert the available predefined sections.

This is how patterns look like in the Gutenberg editor:

Gutenberg editor Patterns

Patterns are available for buttons, headers, gallery, text, and columns.

Some of these patterns are:

  • Large header with a heading
  • Large header with a heading and a button
  • Heading and paragraph
  • Quote
  • Two buttons array
  • Two columns of text
  • And, two images side by side

While the current patterns library is limited and only offers a few introductory sections, Gutenberg contributors are discussing many possible block patterns that will be added in the future.

For now, you can install third-party plugins like Redux Gutenberg Blocks, CoBlocks, Atomic Blocks, or Stackable to add additional Gutenberg blocks and patterns.

Reusable Blocks

Commonly used sections that are not available in patterns can be saved as reusable blocks.

Reusable Blocks in the Gutenberg editor

This is a useful feature for creating visually similar pages like blog posts, landing pages, or sales pages.

For example: you can create a pricing section and save it as a reusable block. Then every time you need to add a pricing section on any page, you can head over to the reusable blocks and insert the relevant pricing section quickly.

Reusable blocks are connected with each other, so any change on one block will appear on all the other blocks as well.

Sidebar

The right sidebar in the Gutenberg editor consists of the page and blocks settings.

Gutenberg editor Post settings

In the post section, you can edit the following elements:

  • Status and visibility: Let’s you change the status of the post/page as a draft, password-protected, or published.
  • Permalink: This is the editable URL (link) of the post/page.
  • Categories and tags: This specifies the category and tags of posts.
  • Featured image: This adds the images in a post that is usually displayed on the top (after post title).
  • Excerpt: This is a field where you can enter a short post summary.
  • Discussion: Lets you enable or disable comments on the posts.

Settings in the Block section appear only when a certain block is selected.

This is how paragraph block customization options look like:

Gutenberg Block customization settings

Here you can edit the typography (font size) and the block’s color (text and background color). You can also add an HTML anchor or additional CSS class(es) to control the block’s styling using custom CSS.

Editor Interface

Gutenberg editor is designed to give powerful customization options with a distraction-free writing experience to bloggers and website owners.

In the editor, you can either work in the full-screen mode (which hides the WordPress left sidebar) or in the spotlight mode (which focuses on one block at a time).

Full-Screen mode in the editor is pretty useful for creating pages and viewing the results in real-time.

This is how the block editor looks like in the full-screen mode:

Gutenberg editor interface

You can also switch between the visual and code editor from the top right dropdown menu.

Code editor in Gutenberg

In the Classic editor, if you wanted to move a paragraph, heading, or an image, the only option was to cut and paste, which often resulted in the loss of stylings.

Gutenberg solves this issue with simple move up and move down buttons.

You can click on these buttons to reorder the blocks or drag and drop the block into its new position. This saves a lot of time — especially on long pages.

Move up down settings to reorganize blocks

Another handy feature added in the Gutenberg is the / command. This is an autocomplete feature similar to tools like Notion and Slack, where you can type / followed by any block name to add it. Like /heading or /image.

Autocomplete command in block editor

You can also check the word count of the content with the document outline in the editor.

Document outline in the editor

Overall, Gutenberg provides a less distracting and more WYSIWYG experience compared to the previous WordPress editor. Gutenberg works great on mobile too, and the block library is growing at a steady rate.

However, as we mentioned above Gutenberg is not a complete WordPress WYSIWYG solution. It has certain limits beyond which building on WordPress will require some coding. For more complex pages and complete website design control in WYSIWYG mode, you can use advanced page builders listed above.

Conclusion

In case dealing with the code is not your strongest skill, drag and drop WordPress page builders are very helpful solution that completely solve this issue for you.

What they do is that they literally transform WordPress into a simple and easy website builder.

Of course, it is up to you to decide which of the above is the best WordPress WYSIWYG editor, but one thing is for sure:

With page builders you get the full power of WordPress and the ease of WYSIWYG at the same time – two major components combined in one.


FAQs

What is WYSIWYG mode?

WYSIWYG (What You See Is What You Get) mode is editing mode where the user can see how the end result will look like in real-time while editing the document in the editor. The new WP editor – Gutenberg is a backend WYSIWYG editor that adds page-builder-like functionality to WordPress.

What is WordPress Page Builder?

WordPress page builder is usually a plugin which when enabled allows users to build websites in a code-free mode. Today, WordPress page builders are extremely advanced and are more like website builders with tons of sophisticated features and capabilities.

Do I need a Page Builder for WordPress?

It depends on what you want to build. For a very basic blog you normally don’t need a page builder. This is the original purpose for which WordPress has been initially built for. So simple blogging is very easy with WordPress, you don’t need a page builder for it.

But if you want to build a website (not just a blog) then you will likely need a page builder to do so (if you want to build code-free).

How do I add a page builder (WYSIWYG editor) to WordPress?

With Gutenberg, you don’t have to. Gutenberg comes preinstalled.

But if you need something more advanced, then this will depend on the particular WYSIWYG editor you want to use.

If the editor you want to use is available as a plugin you can add it by going to the WordPress dashboard > Plugins > Add New.

There you can search for the editor plugin (like Elementor or Beaver Builder), or you can upload the plugin .zip file directly. After that, click on Activate, and the editor will be available to use in posts and pages.

How do I use the front end drag and drop page builder in WordPress?

It’s important to note here that Gutenberg is not a front end editor. With Gutenberg you edit in the backend but in WYSIWYG mode.

More advanced builders, like Divi, Elementor or Beaver Builder allow front-end editing, so the first thing you need to do in order to use them is to add them to your WordPress website.

Once you have the front end editor installed and activated on your WordPress website, you can go to Posts > Add New and click on Edit with editor (different editors will have different wording here like “Edit with Divi” or “Edit with Elementor”).

To edit an existing page with the front end editor, you can navigate to the pages (or posts), find the page that you want to edit, hover over it and click on Edit with editor to open the page within the editor. Alternatively you can just go to the page on your browser while logged-in to your WordPress dashboard and you will see your editing options in the top bar.

Which free page builder is best for WordPress?

The best free WordPress page builders are Elementor and Beaver Builder. These page builders offer features like responsive live drag and drop editing, pre-designed templates, inline editing, background overlays, and 40+ free content widgets. You can download these page builders for free from the WordPress plugins directory.

Unlike Elementor and Beaver Builder, Divi does not have a free version.

Secret Divi Deal

Subscribe To Our Newsletter

Get updates and learn from the best

Article by:

More To Explore

10 thoughts on “17+ Best WYSIWYG WordPress Page Builders Compared [2021 Updated]”

    • Good question, Bill. Thank you.

      Most of these builders can be used on both WordPress.com and the self-hosted version of WordPress (WordPress.org).

      The only thing is that for WordPress.com, you will need to have their Business plan, which allows the installation of third-party plugins.

      Reply
  1. This was really interesting to read. The only front end editor that I have used is Elementor (although I do have significant experience now working with it). It really does offer great functionality, although it does slow most sites down slightly, so that’s something to consider.
    I feel like the addition of Gutenberg was a step in the right direction for WordPress. As you stated, the classic editor was great for basic blogging, however, it lacked the ability to build pages the way that many other website builders did. While it’s not a full replacement for a front end editor, it does offer quite a few great options as you get used to using it!

    Reply
  2. So far, I love Elementor. It does the job for me without any additional cost. I know a lot are using Divi but I have been meaning to check out Themify too. Thank you for sharing this comparison. Makes it easier to decide on what to use.

    Reply

Leave a Comment

Do You Want To Boost Your Website?

drop us a line and keep in touch

20% OFF Elegant Themes Membership