How To Add A Page Builder To Your WordPress Website

Adding a page builder / WYSIWYG editor to your WordPress website can be a challenge, especially because there are so many different plugins & themes to choose between. A few years ago some page builder, such as Elementor, plugins started getting an enormous amount of users. That inspired lots of developers to create their own page builder plugin, most of them were bad quality and still are, but luckily some of them are amazing too.

Installing a Page Builder

In this short tutorial on how to install a page builder, we will be using Elementor. We will be using that since it’s the most popular page builder in the world, it has more than 3 million active users. It’s not only popular also very user friendly & good for beginners. Anyways, let’s get to it!

  1. Go to Elementor.com and click Download.
  2. Go to your WordPress dashboard.
  3. In the left sidebar, click Plugins > Add New.
  4. Click the Upload Button button and choose the Elementor file you just downloaded.
  5. View the video tutorial below on how to use the plugin.

Are you ready to install the Elementor page builder?
Click the button to download the plugin!

Video Tutorial: How To Use The Page Builder Plugin

This short YouTube video below shows you how to use the Elementor plugin you have just installed. Please watch it or alternatively read the tutorial below on how to get started.

Page Builder Tutorial

In this tutorial we assume that you have followed the steps above & installed the page builder Elementor. If you haven’t, please scroll up and follow the steps.

  1. Go to your WordPress Dashboard.
  2. In the left navigation, click Pages > Add New.
  3. Click the blue button that says Edit With Elementor.
  4. You can now edit your website with a WYSIWYG page builder.

Use sections, columns and widgets to create a beautiful layout for your content. Elementor has a ton of features, it might take some time to get used to it. It’s easy once you get a hold of it, so don’t be afraid of exploring!

Step by step page builder installation

Page Builder Plugins

There are various plugins to choose from when it comes to page builders. We have an article on Best Page Builder Plugins For WordPress where we rank all popular WordPress page builder plugins. In this article we mainly demonstrate how to use Elementor since it’s the most used page builder in the world, it has more than 3 million users currently.

If you don’t think Elementor fits your needs, then do try the other page builder plugins we recommend in the article, especially Divi is known for its high quality and large amount of features.

How To Add A WYSIWYG Editor To WordPress

WYSIWYG means What You See Is What You Get, so basically a WYSIWYG editor is a visual editor that allows you to create advanced designs with grids, columns and much more easily. You don’t need to know any coding to use a WYSIWYG editor which is awesome. In the top of the article we have a step by step guide on how to install Elementor. Elementor is a WYSIWYG editor, so go ahead and give it a spin!

The Best WYSIWYG Editor Plugins For WordPress

Finding the best WYSIWYG editor for WordPress can be difficult, but don’t you worry, we have already made the research. On our blog you can find reviews and ratings of the best page builders available for WordPress. We have tested more than 10 page builders available on WordPress.org, Elegant Themes & CodeCanyon.

We have rated their page speed, code quality, features, user support and much more. If Elementor isn’t for you, then we recommend that you take a look at Divi or Beaver Builder. You can find a review of all of these page builders on our blog too.

WordPress WYSIWYG page builder

How To Use A WordPress Page Builder Plugin

Using a page builder plugin might seem like rocket science at first. If you have followed our guide on installing Elementor then you’ll notice a lot of new options, that can be overwhelming. It’s important to remember that these page builders are software. Learning new software can take a few attempts and some hours or even days to get familiar with, so you feel comfortable doing changes. It’s important to remember that you are only changing page and post content, so in case everything goes wrong then you can reverse to an older version where everything works again.

That feature is built into WordPress, it requires no plugins. Simply head to your document and click “Revisions” in the right sidebar, then you’ll be able to revert any changes you have made the last couple of days.

WordPress WYSIWYG Editor For Frontend

The WYSIWYG editor Elementor we talk so much about in this article is a frontend editor. That means you see the final result of the page while building it. If you’re new to WordPress then it will all seem overwhelming but fear not, Elementor comes with a bunch of page template designs you can import easily. After importing a page template you just have to replace the content with your own so you don’t have to start from scratch.

Elementor, Divi and Beaver Builder all comes with pre-made page templates and modules you can import to get started in an easy way.

WYSIWYG editor installation and features

Using Page Builders on Posts & Pages

Page builders are only made for posts and pages. You cannot use them on for example the archive or blog feed. Luckily most of them comes with modules so you can import the blog feed/archive on a page and in that way create your own archive and blog feed design.

To get started with your new page builder on a page or post, please go to your WordPress dashboard and click Posts > Add New. Or if you want to add a new page, click Pages > Add New. Click the blue “Edit with Elementor” button, that’ll take you to your frontend page builder editor. You can now start designing your new website and create columns, grids and use different modules to make your design look awesome.

Free WYSIWYG Editors For WordPress

WordPress.org, Github & independent developer websites are full of free WYSIWYG editors for WordPress. The harsh truth is that it’s a very low percentage of them that are worth using. Most free plugins are learning projects made by new developers, where the final outcome wasn’t important. It’s important to keep that in mind when you start using a new plugin, so you don’t end up being too disappointed. Once you have looked at some of them through, you’ll quickly discover that the good plugins have a premium version as well.

The premium version allows the developers to spend a lot of hours on maintaining and developing their page builder plugins and themes, which makes them high quality. Often premium versions are seen as a negative thing, that is far from the truth though.

Installing a WYSIWYG Editor

By reading this article you should now have an awesome WYSIWYG editor installed on your WordPress site. We also hope you have followed our tutorial on how to get started, so it doesn’t seem too overwhelming. It’s important that you keep in mind that you’re learning a new & useful skills when working with a page builder. If this tutorial & guide have been of good use for you, then we’d love to hear about it, so please don’t hesitate to contact us!

If you still have questions regarding page builders, then you’re always more than welcome to contact us for support & questions. Even though we do not create and develop page builder plugins ourselves, we still have loads of experience with all on the market.

Are you ready to install the Elementor page builder?
Click the button to download the plugin!