Everything you need to know about WordPress's new page builder tool

Gutenberg WordPress block editor

Easy, flexible content for your business website

The new WordPress page builder tool

Here at Feel Created, we love Gutenberg, the out-of-the-box page builder for WordPress. We love that it's easy for WordPress beginners to learn (and if you're looking for a Gutenberg tutorial, there are plenty out there). But we also love how professional web designers and developers (that's us!) can customise and tailor it to look and work in exactly the way you need.

First launching in 2018, the Gutenberg WordPress block editor ramped things up considerably. Compared with the original classic editor, it dramatically improved the user experience. For both new website creators and seasoned pro developers.

Witnessing the rising popularity of intuitive page builders like Squarespace and Wix, WordPress brought in Gutenberg block editor. It’s the visually appealing and user-friendly answer WordPress fans have been crying out for. 

In this guide, we’ll give you a rundown of what it does and how you can use it to build a great-looking website in no time.

What is the Gutenberg block editor in WordPress?

Gutenberg is a block-based editor that makes building websites so much easier. As the default WordPress page builder, it's much more visual than the previous classic editor.

You can see what your WordPress website will look like as you build it. So you can say goodbye to the constant back-and-forth between the back-end and preview (though a preview feature is still available for desktop, tablet and mobile if you prefer it).  It's all there, right in front of you.

If you’re a fan of popular page builders like Wix and Squarespace. Or if you’ve enjoyed WordPress page builder plugins like Elementor and WPBakery, Gutenberg is for you. Better still, the new WordPress block editor tool is completely free. Unlike the other premium options. So there are no more expensive extra licence fees.

You can easily add elements to a page with customisable blocks.  It lets you add – and move around – images, lists, videos, paragraphs, buttons and a whole raft of other elements.

Gutenberg builder block example

Gutenberg page builder vs WordPress Classic Editor

Long-time users of the WordPress classic text editor who haven't had a look at Gutenberg block editor yet, might be wondering: what's the difference? Let's take a look:

Not only does it look better, there are many things that are much quicker and easier to do.

Thanks to the Gutenberg block editor, you can easily add a block for the specific content you want. So, if you wanted to add something like an image, you’d select the image block. With the classic editor, images can be added, but it lacks the content adjustment that the Gutenberg block editor provides. 

WordPress block editing is so much easier to learn and use. You can move your elements up and down your page. And edit them as individual blocks rather than being tied to template themes. 

So you’ve got much more control over your website’s layout and design.

Flexible content creation with blocks in Gutenberg

The new Gutenberg editing experience makes content creation a lot simpler for beginners to get to grips with. 

Before, with the classic editor, you’d have to make your changes, install your plugins and then preview the page to see what it looked like.

Now there’s no need for constant clicking around to check on your edits. You can see how things will look without installing a separate page builder plugin.

And with the block editor, you can add blocks, rearrange them, and delete them. All without writing a single line of code.

Are there other WordPress page builder tools?

You might have used other page builder tools for WordPress. Think Elementor and WPBakery (among others). And you might be wondering how the Gutenberg editor is different.

The likes of Elementor and WPBakery are third-party page builder apps that have been fairly popular with WordPress designers. They both have intuitive web design interfaces with drag-and-drop content blocks, like Gutenberg.

But as they were both created by a different company, they aren’t built into WordPress. So, you have to install plugins if you want to use them. 

Plus, not all other plugins work with them. Or you might find you need a lot more plugins to get your website to look and work how you want it to. This could cause other problems with things like security and page responsiveness.

Overall, Gutenberg is easier to use and has a better support system. It’s also faster and works with anything built for WordPress. With no compatibility issues.

How the Gutenberg block editor works

With this page builder for WordPress, you can launch your full website in record time. As Gutenberg block editor is the default WordPress editor, it’s made everything straightforward for both developers and beginners.

  • It has countless pre-built blocks, so you can easily add in new sections.
  • It saves you time with its user-friendly drag and drop.
  • You can use the toolbar and settings panel to customise and resize your elements. So they align with your brand.

Thanks to Gutenberg, it's now fast and painless to set up your own website without any coding knowledge. And if you need help then there will be a Gutenberg tutorial out there for you. Or you can ask an expert (we're happy to help). But, as with any page builder, there are limitations to customisation without coding.

Plugins will only get you so far and can come with their own problems. 

When you’re ready to take your brand to the next level, you can choose to work with a specialist WordPress design and development agency. That’s us!

The idea of ‘blocks’ might sound rigid, but we develop custom elements with much more fluidity. We give your content pages an impressive, magazine-esque feel. You’ll get a website to match your brand while still being quick and easy for your team to use. 

But we totally get that a lot of businesses want to have a go themselves first. And thankfully, Gutenberg makes it possible for you to get a website up and running super quickly. 

If you want to go down the DIY route, read on for our top tips for using the WordPress block editor as a beginner.

How to use the WordPress Gutenberg block editor

You'll find that creating a new blog post or page looks the same as it always did.

Find either ‘Posts’ or ‘Pages’ on the WordPress admin menu and click ‘add new’.

Gallery Image

This will launch the block editor, and you're good to go.

Gallery Image

Then, you can start adding blocks. By default, the first block is a title and the next is a paragraph block.

Of course, you don't have to have things in this order. Just click on the add button (+) and choose your block from the menu.

Gallery Image

You can browse the block categories or use the search function to find the block you need.

Gallery Image

Like a particular block you've created? Click on the menu at the right corner of the block toolbar and select 'Add to reusable blocks'. Then you can use it again, elsewhere on your website.

Gallery Image

Gutenberg block settings

Gutenberg’s intuitive interface makes modifying your website styles super simple. You can adjust colours, fonts and sizes quickly with the toolbar and the block settings panel.

  • On the toolbar, you’ll find the basic formatting buttons like italics, bold, insert link, and alignment.

  • You’ll find the settings panel in the sidebar on the right-hand side of your page. Here, you can adjust colours, fonts and other style options.

  • You can arrange your content into columns, change image sizes, add animations, HTML anchors, and custom CSS in the block settings.

  • You can also add metadata for SEO, and alt text for images here.

Templating Gutenberg

Templates in Gutenberg are known as patterns. So, what are Gutenberg patterns? Patterns are pre-made layouts made up of blocks in Gutenberg.

You can use these patterns all over your website to recreate sections you want to repeat. So, instead of painstakingly adding one block at a time, you can insert pre-made sections, saving you time. 

It’s easy to save, reuse and even share your patterns with other WordPress users. 

Building your very first website? You can choose from a range of patterns created by professional designers. So you can build your entire website layout within minutes.

And if you want a bank of premium custom patterns that align perfectly with your brand, a developer can help you with that.

We can build what you need. So your team can select the right patterns for each new page without spending hours recreating the wheel. Plus, you can be confident that every page of your website will remain on brand. No matter who updates it.

How to use Gutenberg patterns

Click on the ‘Add block’ button in the toolbar at the top of the screen

Gallery Image

This will open the block inserter.

Then click on 'All patterns' from the menu.

Gallery Image

You can scroll through all the available patterns in this view.

Or, if you want to see the patterns in a larger window, you can scroll down to the bottom of the block inserter menu and click on 'Explore all patterns'.

Gallery Image

There, you can browse or search for the category of pattern you need.

Just double-click on it to add it to your page, where you can customise it.

Customising the Gutenberg block editor experience

There's so much customising you can do with the WordPress block editor without any coding. It's a great way to get started, especially if you don't have the budget for a developer.

But when you’re ready to enhance your brand, talk to a WordPress development company. We create fully personalised, customised websites that really showcase what you’re all about.

If you want a unique experience for your website visitors, way beyond what you’d achieve with a theme or plugin, talk to a developer

Need help with Gutenberg? Need help with Gutenberg?
Sign up for our newsletter
Sign up
Latest
Arrow left Arrow right
What We Do Hosting and Maintenance
Read more: Hosting and Maintenance
Project Longitude, WordPress CMS build
Longitude, WordPress CMS build
Read more: Longitude, WordPress CMS build
Feel Created shortlisted for two Wakefield Business Awards
Latest News Feel Created shortlisted for two Wakefield Business Awards
Read more: Feel Created shortlisted for two Wakefield Business Awards
What We Do Custom WordPress design & development
Read more: Custom WordPress design & development
Postdoc Portal, Prosper, Launched by the University of Liverpool
Latest News Postdoc Portal, Prosper, Launched by the University of Liverpool
Read more: Postdoc Portal, Prosper, Launched by the University of Liverpool
Blog Article The best social media platforms for business: How to choose the right ones for you
The best social media platforms for business: How to choose the right ones for you
Read more: The best social media platforms for business: How to choose the right ones for you
Website redesign or refresh: Is it time for a spring clean?
Blog Article Website redesign or refresh: Is it time for a spring clean?
Read more: Website redesign or refresh: Is it time for a spring clean?
Project Learning English
Learning English
Read more: Learning English
Thinc
Project Thinc
Read more: Thinc
Latest News Blackpool Sixth Form College Launches New Website by Feel Created
Blackpool Sixth Form College Launches New Website by Feel Created
Read more: Blackpool Sixth Form College Launches New Website by Feel Created
Feel Created Shortlisted for Prolific North Creative Award 2023
Latest News Feel Created Shortlisted for Prolific North Creative Award 2023
Read more: Feel Created Shortlisted for Prolific North Creative Award 2023
What We Do Website & System development
Read more: Website & System development
Why website maintenance is vital for online success
Blog Article Why website maintenance is vital for online success
Read more: Why website maintenance is vital for online success
Project Venn
Venn
Read more: Venn
What We Do Web design
Read more: Web design
Project Nicholas Associates
Nicholas Associates
Read more: Nicholas Associates
How to choose the right WordPress agency for your website build
Blog Article How to choose the right WordPress agency for your website build
Read more: How to choose the right WordPress agency for your website build
What We Do Digital tool planner sessions
Read more: Digital tool planner sessions
Yoast SEO plugin: A beginner's guide
Blog Article Yoast SEO plugin: A beginner's guide
Read more: Yoast SEO plugin: A beginner's guide
Latest News Feel Created partners with Blackpool Sixth Form College to deliver new website
Feel Created partners with Blackpool Sixth Form College to deliver new website
Read more: Feel Created partners with Blackpool Sixth Form College to deliver new website