loading

09/05/2019

Gutenberg and its design blocks. (with examples)

Gutenberg and its design blocks. (with examples)

Gutenberg is the new editor of WordPress. It was released together with WordPress version 5.0 and the truth is that it has very important tools for the design of our contents.

In a previous article we said that this WordPress product was created in collaboration with Yoast SEO, which allows us to infer the advantages it brings to the positioning of our website.

Although it still lacks some functionalities, the truth is that it introduced many elements that make our work easier.

Let’s take a look at Gutenberg’s design elements:

  • Spacer
  • Media and Text
  • Columns
  • More
  • Button
  • Separator
  • Page break
Copy Of Copy Of Allowed Fonts (2)

1. Spacer block

Its function is to leave a blank space in the place you indicate. For example between titles and paragraphs, between paragraph and paragraph, before and after images, or anywhere else in the text according to the design you want to print.

It gives us the ability to vary its size by moving it from the blue dot. And this block becomes reusable which is undoubtedly a great advantage.

This is not exactly one of the most functional blocks. In my opinion, it makes something very complex that should be achieved with an enter and ready. Besides, sometimes it keeps the spacer that comes by default even though we vary its size.

2. Column block

This is one of the most versatile Gutenberg brings. It can help us to stop depending on some builders like Visual Composer or others.

It gives us the possibility of having a block with the necessary columns varying their quantity in the sidebar.

It also allows us to add images and improve the visual aspect of our text. The floating bar enables different dimensions and we also have the general options of other blocks.

Here’s an example:

Dogs

Special care. Attention the 24 hours.

Cats

Special care. Attention the 24 hours.

Fowl

Special care. Attention the 24 hours.

It is perhaps a little difficult to handle at first but with practice it becomes very easy to use and the results are very good.

3. Media and text block

This Gutenberg block allows us to place a multimedia file that can be a video or an image. We can also add explanatory text and edit it to make it more attractive.

In the same way as in the column block, it is very easy to apply different dimensions. It contains the same options as the other elements.

We can change the font size and adjust the background and text color in the sidebar. It is also possible to add links in the text which is very advantageous when promoting certain products.

These are some examples:

Travel agency

Paris in the autumn. An unforgettable experience.

Rome and its wonders, ideal for your holidays.

Real State

The house you want in Dreams Real Estate. Visit us.

Project in seaside resort The Coast. There are few units left.

4. Block More

The Read More block is the one that marks the boundary between the content to be displayed and the one that requires a click of the user to be shown. It is very useful if your content strategy has considered this point.

5. Button Block

This is an add-on that was not in the previous editor. Before we had to insert an image and link it, all this is now resolved with this tool. With the possibility of inserting the button we have much easier tasks.

Just insert the text and add the link in the option that appears and ready. To modify the background color and also the color of the text ta offers a panel with several tones. And even offers suggestions on combinations.

While we can change the style that comes by default, the options are scarce. It’s also a handy resource.

6. Separator block

This is a functionality that allows us to incorporate a line to our text, for example:



7. Page break block

This resource is also interesting because it allows us to include the pagination of our entry. Therefore, we indicate when to split the text and the reader to continue should click on the next page number.

The examples above are just a sample of what we can do with the Gutenberg editor. In addition, if we apply a little creativity and use it well it can become a very important tool to highlight your publications.

Cheer up and you will see the results.

Translation: Deepl

Images: Freepik, Pixabay

Generic placeholder image
Nicolás González

Web Designer & Developer
Freelance

+598 98 398 010

[email protected]

Related
Posts

Media library
Wordpress:
the treasure
of your website

The WordPress Media Library is the place where we store multimedia elements and then add them to our content. It is a very valuable space, ...

Plugins for
Wordpress:
Choose the best
in 2019.

Plugins for WordPress. They are fantastic tools that allow us to customize our website. The possibility of having these applications is perhaps the reason why ...

Your company’s web project. Where to start?

Your company’s web project translates into the creation of a web page that gives you visibility, traffic and most importantly: customers. Where to start? It ...