Gutenberg vs Elementor

WordPress 5.0 arrived with a new integrated block editor called Gutenberg. Many people may be asking themselves whether the Gutenberg editor can replace plugins that provide visual content building such as Elementor, or which one is the more suitable choice for their website.

Start Your Website NOW! Get Elementor for FREE or Premium only for $49/year.

Gutenberg Elementor image

In general, the Gutenberg editor is a good choice for building websites with basic content, but if you need to go further when it comes to design and functionalities, you should consider going for Elementor, because it offers many more customization options and functionalities.

However, to be able to use the full potential of Elementor you should buy the Pro version, while Gutenberg only comes with a free version that enables its users to use its full potential.

Gutenberg Editor Elements

Gutenberg provides drag and drop functionality and allows you to created pages, posts, and custom content types very easily.

It offers over 26 different content blocks that allow you to build and customize many different elements. All of its blocks have a wide range of settings, and you can add and use as many blocks as you would like.

Elementor Elements

Elementor grants access to ~ 30 different elements, which are the same as the blocks in Gutenberg. With Elementor you can easily build pages and sections using templates, create complex layouts and you have much more control over the different paddings, margins, and spacings around your pages.

On top of that, you also have more options for every widget and section, and you can add advanced features such as slides, pricing lists, tabs, and the premium version that allows you to design your headers, footers for your website.

Creating Pages With Gutenberg

When you create a page or a post with Gutenberg, you will see this interface:

The interface of Gutenberg is very clean and simple, and it also shows handy tooltips. To add a block you simply click on the Plus sign and choose the desired element you want to add.

Creating Pages With Elementor

Elementor, on the other hand, offers a completely new interface. It provides a live preview of your page and you will be able to see your changes instantly.

Gutenberg Interface

On the left side of the screen are the Elementor elements and their customizable options. You can drag and drop elements from the left sidebar to the right screen of your website and thus to build your page up to your preferences. If you need to customize an element, simply click on it and its customization options will appear on the left sidebar.

Pros and Cons of Gutenberg

Gutenberg offers many different block types. Each of its images, paragraphs, headings, videos, and other elements are different blocks. Some people like that, some don’t. Whether this is a pro or a con will be up to you and your personal preferences.

Pros of Gutenberg

A great thing about Gutenberg is that it refactors all of your old posts and pages, that were built with the Classic editor. So you will not have to worry about your existing content. Gutenberg takes care of it and it will look perfectly well.

Gutenberg Block Search

Another great thing about Gutenberg is that it has a Search for blocks feature implemented, and you can simply start typing the name of a block that you need and it will pop up.

Gutenberg Pros

Blocks can be moved around very easily, and you can use either drag and drop or the arrow keyboard keys to do it.

Customization of Blocks

Block Customization in Gutenberg image

You can also customize all of your blocks separately, and that allows you to configure the styles, fonts sizings, and spacings of any element up to your preferences.

Full-Screen Mode

Gutenberg offers full-screen writing mode, that reduces distraction and is very comfortable for content publishers. It is very easy to switch it on and off from the Tools and Options menu on the top of the right menu bar.

Cons of Gutenberg

It Is Different
Gutenberg is quite a different editor, that requires its content to be broken into different pieces called Blocks. You might be frustrated in the beginning until you get familiar with it, but once you get the way it works it becomes pretty easy to deal with it.

It Might Cause Conflicts

Another problem that Gutenberg causes is related to breaking functionalities to existing plugins and themes. Although the developers of the editor put all of their effort to fix such errors, in some cases you might break your website. That is why we highly recommend doing a quick research about the compatibility of your theme and plugins with Gutenberg.

Gutenberg Lacks Functionalities

Gutenberg is a WordPress editor and not a complete page builder. Differently from some more advanced page builders like the Elementor, the Divi page builder, the Muffin builder, and others – you might not be able to find the desired functionality implemented straight in the Gutenberg editor. However, Gutenberg still offers the essential functionalities to build a completely decent website.

Pros and Cons of Elementor

Pros of Elementor

Elementor is much more intuitive and it is very easy to use the drag and drop elements from the left sidebar to build your page while you can live-preview all of the changes. You can also include third-party plugins and widgets to enhance the functionality of your website even more.

Elementor Templates

Elementor Templates image

Templates are an amazing tool that allows you to save time and build modern and beautiful designs in a matter of 1 click. You can choose the desired layout from the library of Elementor and you can also sort them by keyword. That lets you find the desired template very fast and will drastically reduce the time you spend on creating your website.

Mobile Preview

The mobile preview is another and very handy pro of Elementor. This feature lets WordPress developers inspect how their website looks on mobile devices, without having a switch between browser sizes and devices.

Lots of Styling Options

Elementor Styling Options

Elementor is very rich when it comes to stylings. It allows you to modify almost anything that you can think of. You can pretty much change all of the styling options of any element on your website while you use a visual editor for it. That means that you don’t need to write a single line of code.

Cons of Elementor

Elementor is a very powerful tool, but its free version lacks lots of functionalities. You might be disappointed when you want to change something with custom CSS, but you notice that the feature to write custom CSS is locked for the free version.

Third-Party Plugins or Addons Cause Problems

Some third-party plugins and addons sometimes cause problems with Elementor and might lead your website to a sudden crash. You must always make a quick research for compatibility problems before installing anything new on your website.

Another Con of Elementor is that it does not require lifetime update options, so you will be forced to go into yearly subscription and re-pay every year to use its full potential.

Gutenberg vs Elementor – Which One To Choose?

Both Gutenberg and Elementor are very good editors and your choice should be defined by two things – the type of project you want to build and your budget.

If you are starting a small project that does not require lots of customizations and handy features, and your budget is limited, you can simply go with Gutenberg and still build a very beautiful and modern website.

However, if you want to go to the next level and invest a little, Elementor would be the right choice for you. It is more professional and offers many more features, blocks, elements, and customization options.

How Do I Access Elementor In WordPress

How Do I Use WordPress Elementor Editor

How To Use Elementor Templates in WordPress

What Is Wp Elementor and What It Is Used for?

How To Use Elementor Plugin in WordPress

SiteGround Review Score, Recommended, 5 stars

How to Create a Website Using SiteGround:

1.Domain Name and Web Hosting. 2.Install WordPress and Theme.

What do you need before starting a website.

Before starting site setup process, we strongly advise that you complete the following preparation steps:

  • Have a clear idea for the site's domain name. For example, good tip is to make it short and with focused keywords.
  • Make sure to have an active credit or debit card so that you can make online purchases with it.
  • Make sure you prepare a computer that has stable internet connection.

Step 1: Purchase a domain name and web hosting type.

1. Go to "" from our referral link to get special price.

2. Choose the hosting plan you prefer and click "GET PLAN".

create website choose hosting

3. Type in the website name you wish and click "Proceed".

create website type site name

4. Type in your account information and client information in the appropriate fields.

create website type account information

5. Enter your purchase information and payment details.

create website type purchase information

6. Review your total, tick the "I confirm" box and then click on "Pay Now" button.

create website pay

If you have done it successfully, this is what you should see:

create website done

1.Domain Name and Web Hosting. 2.Install WordPress and Theme.

Step 2: Install WordPress and an appropriate visual theme for your website.

1. Log in to your account and click the "Websites" tab. Then click the "COMPLETE" button as shown below.

2. Select "Start a New Website" and then select "Wordpress". For an online store, select "WooCommerce"
install wordpress start a new website

3. Type your new separate WordPress login e-mail and password and click "CONTINUE"
install wordpress type your separate login width=

4. Click on "FINISH" if you don't want to add any offered features.
install wordpress click finish

5. Type "" in your browser and log-in using the WordPress e-mail and password you created earlier.
install wordpress log in

6. On the welcome screen, click on "START NOW".
install wordpress start now to begin

7. Choose a theme that suits your site type and your preferences and requirements and click "SELECT" as shown.
install wordpress choose a wordpress theme

8. To install the theme, click "CONFIRM" as shown.
install wordpress install theme

9. Add any free optional extras to your WordPress and click "COMPLETE" as shown.
install wordpress add extrast to wordpress

10. When you see the "Your site is ready" screen, click on "GO TO DASHBOARD".
install wordpress go to dashboard

11. Congratulations on your new site! This is your WordPress dashboard! You can use it to customize your site and change media in it. If you want to change the theme again, click "Appearance->Themes" and click the "Add New" button, as shown.
install wordpress add new theme

You can preview and switch to another theme by clickig "Preview" and "Install" buttons respectively.
install wordpress preview theme

How to Add Content to Your Website?

With WordPress, you generally have the ability to add the following types of content to your newly created website:

  • Post.
  • Media.
  • Page.

Below you can see instructions on how you can create a post or page and add media.

How to Create a New Post in WordPress?

Creating a WordPress post is easy - just follow the steps below.

1. Click on the "+ New" icon on top and select "Post".

Add Post Step 1

2. Fill your post with a short and SEO title, based on the topic your website is for and add content to the post. The more elements the content has, like links and pictures, the better. When done, click on "Publish" when you want your post to be public and seen by everybody. You can also click on "Preview" to check how your post looks visually before publishing it.

Add Post Step 2

How to Create a New Page in WordPress?

Creating a page is almost the same as creating a post, but with few important differences. Below you can find the steps on how to do it.

1. Click on the "+ New" icon on top and select "Page".

Add Page Step 1

2. Fill your page with beautiful content plus a good title and click "Publish". You can also preview it, just like with the posts.

Add Page Step 2

Since this is a page, make sure to create content that is more general. You can also create different types of pages, like a file download page, a report page, etc. To best explain pages, let's say you have a website for food reviews and a page would be describing general information about different categories of foods (fruits, vegetables, meat and so-on).

How to Add New Media in WordPress?

You can add media via two main ways - from the Wordpress menu or from the "Add Media" button within Posts and Pages. The later option is more commonly used, due to the fact that it is significantly more convenient. Below are the steps for it.

1. While in a post or page, click the "Add Media" button.

Add Media Step 1

2. From the menu that appears, click "Upload Files" and then click "Select Files":

Add Media Step 2

3. Select the file you want uploaded and click "Open":

Add Media Step 3

4. Modify the file alignment (left, right, center), size, what should happen if someone clicks it and other preferences and when ready click on the "Insert into page" button. For posts, it is "Insert into post":

Add Media Step 4

When done, the media should appear in the body of your post or page. WordPress also allows you to add audio and other file types, but be careful with the server space and use small size files due to the risk of filling up your server drive.

In case you want to Add New Media from the WordPress menu, you have to go the "Media" panel and repeat the beforementioned steps to do so:

Add Media Step 5

In this FAQ’s we are going to introduce you to the most common and frequently asked questions about websites and their creation. Let’s get started!

FAQ’s How to Create a Website

What is a Website?

A website is mainly made from web pages that contain related content all classified by a unique domain name (A domain name is your website name. It is the address where Internet users can access your website). On a website, you can post contrasting content connected with the sphere of your website.
There are different types of websites, which you can find on the networking space like:

Interesting Fact: The first website uploaded on the internet went live on August 6, 1991.

How Much Does It Cost to Create a Website?

To find out how much it will cost to create a website, firstly you need to have a clear idea about the type of your website. What it is going to be: e-commerce, blog, educational, etc.

After that, you need to choose:
The Best Hosting Provider.
The Most Suitable Wordpress Theme.
WordPress Website Builders/Plugins

After choosing the best hosting provider, it's time for the right theme for your site, and the plugins, then you can estimate how much it will cost to start your website.

Have in mind that if there are also free web hosting services and free WordPress themes available out there.

Do I Need Any Programing Knowledge for Creating a Website?

Probably yes. Creating a website is not an easy task, and it is good to have some programming knowledge if you are considering creating one, But there are also alternatives that you can use for creating your website without having any programming knowledge.

One very popular alternative that you can use is to install a responsive multi-purpose WordPress theme like Avada and set drag & drop page buider, which will help you to customize your website at ease.

Can I Create a Website for FREE?

Once upon a time, it was said that everything is possible, so creating a website for free is possible, although it's hard to achieve without any expense.

To start your free website creation you need to find a free WordPress and to install it on a free hosting service. After you have already published your website on the internet, you need to install free plugins, which is the most difficult part. It is problematic to find reliable free plugins. There are some freeware ones available, such as Yoast SEO that can do pretty nice work, but most reliable plugins which are required for quality improvement of your website and are massively adopted are not free.

How Long Does It Take to Create a Website?

This is a question that concerns everyone who is considering making a website. The truth is that there is no specific answer to this question and everything depends on the height of your goal. If you are thinking of creating a small blog, you can make your website in a day. But if you are considering making a big online shop or something similar you will need to spend a lot more time.

Which Are the Best Platforms for Creating a Website?

The easiest way to create a website is to use a CMS(Content Management System) website builder platforms like WordPress or Joomla. The CMS platforms can help you create and customize your website without having much coding knowledge.

The Most Popular CMS Platforms:

Jimbo, etc.

What Is HTML? - Quick Tutorial.

HTML is the standard markup language used in the web pages, with which you can create your own website. Using the base of the HTML and CSS(Cascading Style Sheets - another web language with which you can put style over the HTML fundamental) languages can be very helpful for making little customization changes to your website.

HTML Code Examle

The <!DOCTYPE html> declaration defines that this document is an HTML5 document
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
The <h1> element defines a large heading
The <p> element defines a paragraph
The <br> element means a line passing.

HTML Element Example

<h1> This is Heading </h1>
</br> - Line Passing
<p> This is Paragraph </p>

What Is Web Hosting

A web hosting service is a type of Internet hosting service that allows individuals and organizations to upload their websites on the internet. There are different types of hosting services like:

  • Shared Hosting (Server shared between many users)
  • Dedicated Hosting (A dedicated server only for you)
  • VPS Hosting (Virtual Private Server)
  • Cloud Hosting (Hosting services that are provided to customers via multiple connected servers that comprise a cloud)


Leave a Comment

Your email address will not be published.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.