Gutenberg came to change the way you work with wordpress

Gutenberg came to change the way you work with wordpress

Ever since the launch of Medium and introduction to the drag-and-drop content editing panel, the digital world became curious about the possibility of the code-free website creation. The number of the intuitive page builders started to grow, as well as the choice of the third-party WordPress plugins started to evolve.

Disclosure: Some of the links here are referral/affiliate links that means if you decide to buy through those links I’ll earn a commission at no extra cost to you. This is how I keep Designtheway.com up and running.

However, none of them delivered the expected code-free experience of the web page creation. The situation changed with the launch of Gutenberg blog editor.

Developed by WordPress creators, this is one of the most talked-of page builders in modern-day age. Having reached the top of its popularity, the community of Gutenberg developers was joined by ThemeForest authors delivering a number of Gutenberg-based WordPress themes. Following the general hysteria, many bloggers started to shift for Gutenberg without waiting for the new WordPress update to roll out.

What does influence their decision? Let’s find out.

What’s Gutenberg?

The content editor was released in public 1 year ago. This is a simple and intuitive solution for bringing the versatile presentation of posts and layouts of your WordPress-based projects.

Gutenberg is notable for its intuitive interface that allows you to apply quick changes to your site’s content in a code-free manner. That’s not a secret that WordPress still required the basic HTML and CSS skills in order to deliver your data in the way that meets your expectations. Using Gutenberg, you work in the visual mode exclusively.

The content editor was named after Johannes Gutenberg, i.e. the person who invented the printing press 500 years ago. Just like the inventor brought the true revolution to the European printing industry, the WordPress editor is here to change the way we create content and modify WordPress layouts.

How Does the Editor Change Your Work in WordPress

Gutenberg delivers a whole new content editing experience to all WordPress users, which was re-built to deliver media-rich posts and pages of your site. The content editor provides the ease and impressive flexibility to manage multiple blocks of your site in the visual mode.

In order to start working with the editor, you need to install the Gutenberg plugin first. Mind that the content editor requires you to use WordPress version 4.8. The plugin can be downloaded from the WordPress repository or by searching for it within your WordPress dashboard.

As soon as the plugin is installed and activated, you will find a new option below the posts and pages in your WordPress dashboard. Gutenberg doesn’t replace the default WordPress editor. It allows you to bounce back and forth as you select the proper way to manage your content.

gutenberg-edit-post

Also, you will notice new menu items being added to your WordPress dashboard. These are  a Demo and New Post options.

gutenberg-editor

As you open the Gutenberg editor, you will notice that it looks pretty much similar to Medium. It features more writing space, which is especially useful to those people writing on laptops and other devices with smaller screens. Still, Gutenberg includes a post settings bar. You can leave it or hide with just one click.

Similar to the default WordPress editor, Gutenberg allows you to switch between the visual and HTML text editors. The respective functionality is available at the top left of your working space.

Next, when you start creating a new post or page, you are provided with a selection of blocks that can be added to the working space with a single click. For example, you can insert a paragraph, image, heading, cover, list, audio, etc. As soon as a specific block it added, you can fill it with your content and change its position with the drag-and-drop functionality.

gutenberg-widget-blocks

You can add as many blocks as you want to single page. Apply all kinds of changes is a pure pleasure as you work in the visual interface. Similar to the default WordPress editor, Gutenberg lets you preview changes on your web page, save changes, and publish your content when it’s ready.

Modifying your content on-the-go using your smartphone or tablet you won’t face any issues. All features that are available in the desktop version work on mobile out of the box.

gutenberg-image-block

Core Features

The idea of the code-free content editing experience is the fundamental concept that unites all elements of the Gutenberg builder. The editor frees you from the necessity to apply additional modifications of the source code, thus making it possible to focus on the content creation and layout customization entirely.

With that being said, let’s see the main features making Gutenberg content editor so special.

  • Thanks to the block-based structure, you may forget about the need to work with HTML and CSS. All kinds of changes that are applied to the galleries, texts, images, widgets, and shortcodes are applied in the intuitive visual mode.
  • All blocks are designed to look equal on the page.
  • The content editor includes image and text placeholders, which guide you to the areas where specific types of date should be located.
  • Gutenberg is the WYSIWYG content editor, which reveals all changes that you apply to the layout in the real time.
  • The builder features the impressively intuitive interface that points out what specific kinds of changes can be applied to every block.

Top Reason to Try It

Gutenberg is one of the most powerful alternatives to the popular visual editors for WordPress. In fact, it contains all of the core features that you can find in the drag-and-drop editors, and even more. Here are several of the top reasons why WordPress fans give preference to Gutenberg:

  • With the help of the well-structured content editor, you can create even the most complex layouts code-free.
  • Gutenberg is a powerful solution that can replace the majority of WordPress page editors easily.
  • It is ready to be enhanced with a number of third-party extensions and widgets that are made to be compatible with the content editor.
  • Gutenberg is built with the focus on those tools that are needed for the effective content creation and its proper customization.

Gutentype -1st Gutenberg-based WordPress Theme

If you search for Gutenberg themes, you are likely to come across a bunch of Gutenberg-compatible designs that are not based on the content editor, unfortunately. However, the good news is that the team of Ancora Themes made an attempt to release the first Gutenberg-based WordPress theme ever. It’s called Gutentype and contains all of the core functionality of the popular page builder.

gutentype-in-action

In addition to the intuitive drag-and-drop functionality, Gutentype includes 7 of the most popular WordPress plugins that will make your web project work at its best. These include:

Now, let’s take a closer look at how the theme is structured and in what ways you can customize the layout as per your specific needs.

Header and Footer Layouts

In order to give you the freedom of choice of the perfect structure of the header and footer areas of your site, Gutentype was loaded with 3 header and 2 footer layouts. All of them feature clean and easy-to-follow structures, which are intended to add extra usability to your site’s navigation patterns.

Header Plain

gutentype-header-plain

Header Default

gutentype-header

Header Extra

gutentype-header-extra

Footer Default

gutentype-footer

Footer Plain

gutentype-footer-plain

Widgets

There are 7 homepage widgets areas that you can customize and upload with your own content.

gutentype-layout

Front Page Builder

This is one of the major enhancements making Gutentype WordPress theme so usable. Gutenberg content editor still lacks the complete freedom in terms of the layout customization.

In order to make it quick and effortless to apply the needed changes, GutenType theme was enhanced with the Front Page Builder. In order to access it, navigate Customize >> Front Page Builder. Here is how it works:

Gutentype WordPress Blog Layouts

For most of us, WordPress will always remain the blogging platform that can manage even the most content-rich projects well enough. In order to make your blog appeal to the visitors with its impressive readability, Gutentype was loaded with Boxed Layout Type:

gutentype-box-layout

… and Full-width Layout.

gutentype-full-width

Additionally, you are given the freedom to choose from 3 different layout styles: minimalist, grid, masonry.

The Minimalist layout is clean and spacious, built with the focus on the page-width images being accompanied by readable texts.

gutentype-blog-layout

As the name suggests, the layout presents information by means of grids. The Grid layout will be the ideal solution for the launch of fashion and travel blogs

Masonry is the Pinterest-inspired layout that delivers a well-structured presentation to the content-rich online projects.

gutentype-masonry-blog-layout

Conclusion

The popularity of Gutenberg content editor for WordPress is on the rise today. With so many webmasters haven tried working with the intuitive WYSIWYG editor, there are still plenty of users who haven’t tied its benefits on their own.

If this is the first time you are going to launch a WordPress project with using the content editor, then do not miss the chance to download Gutentype WordPress theme. It features all the major tools and options of Gutenberg page builder and delivers even more handy options for the quick and code-free start of your business. Check out how the theme works and feels of your own! We’ll be glad to learn about your own experience of working with the first Gutenberg theme!

You may also like

FREE PDF: Essential wordpress plugin for your website

free-pdf
Free Download

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.