Table of Contents
We bring you a guide on how to use Gutenberg WordPress editor and blocks. Please read news about blocks changes which are coming in the very next 5.4 version. We have selected all the most often use blocks which are must be used on any website. Once released we will post more details on all features.
When WordPress had announced new Gutenberg editor back in 2018 we were excited about it. Now a couple of years later we see a huge improvement. Gutenberg WordPress editor is a great tool to create a website.
S AitThemes CitadelaWP plugins, you can create specific content for a company, business, blog or non-profit website presentation. Or even start a new online business. The website speed and ease of editing website are the most important factors.
What is a block?
Gutenberg WordPress blocks are building units of the website. Each of them has its own special place and purpose. It’s very important to use the right WordPress block for a certain type of content.
But how do you find the most suitable block that fits your intent?
To help you better understand WordPress blocks, we’ve prepared this overview of the most popular ones.
Text content blocks
There are several blocks, which you can use to insert text content on your website. You can use several blocks. From WordPress 5.4 there is a new setting, you can change text color.
- stavak
- Naslov
- Quote
- Popis
- Pullquote
- Table
- Verse
- Preformatted
Except this, you use Classic block which can be handier for a long paragraph.
Blok gumba
Creating a compelling CTA button in WordPress has become super easy with Button block. You don’t need to enter custom CSS or understand HTML. You can – but don’t have to – enter hexadecimal code of your favourite color to make the button look nice and eye-catching.
Where to use Button block?
Once the web visitor gets to your website, you want to encourage them to take action. That’s what CTA buttons are for.
In general, there are 3 places where you should use the WordPress Button block:
- Homepage – to complete action that will lead to fulfilling your goal, such as sign up for newsletter, discover special offer deal or register for free trial.
- Product page – depending on how your product page is lead, there could be 1 CTA button (BUY) or more buttons, e.g. product details, buy, add to wish list, etc.
- Blog – CTA buttons could refer to another useful article or purchase of your product/ service.
Button block settings
In Inspector, on the right hand side, you can easily manage settings of your button:
- Style
- Boja pozadine
- Font color
- Border
Text written in your CTA button should be short and straight forward, encouraging the action you want your web visitors to take.
News coming in next WordPress 5.4 version (release 31st March 2020)
Button block is going to be replaced with new Buttons block.
You can assume from the new name, that you will be able to create more buttons beside one by one in one block container. Often there is a need to create two CTA at a time, for example: Buy Now and Read More. Also, some new style and colour settings are coming. Choose Fill or Outline style and then the colour of the background. You can choose Solid or Gradient background. Some presets as a starting point will be available for more effortless fine-tuning. The good news is that all existing buttons blocks will be working and no need to migrate them.
Blok stupaca
Columns block is an amazing WordPress block that opens doors to new layouts. It gives you more options of page elements arrangements resulting in more design alternatives.
Working with Columns block is easy:
- No extra plugin installation.
- No coding required.
- All you need is a bit of sense for neat design.
In comparison to previous hassel you had to go through before the release of WordPress block editor, it’s super simple to use the Columns WordPress block.
How to use Columns block?
As indicated above, there are 2 ways the Columns block can be used:
- To organize the flow of your texts (in a blog post or on the regular page).
- To arrange other blocks into columns.
When organizing text into columns, e.g. within a blog post, you’re increasing readability and making your website more transparent & user friendly.
However, when you use Columns block to nest other blocks, such as images, texts and buttons, you’re altering the entire layout of your chosen page and creating new designs.
Column block settings
After inserting a Column block onto the page, choose how many columns you want. It can be any amount from 2 to 6 columns. Then you can start typing your text or adding blocks into each column.
Alignment of the content of your column block can be set separately for the entire block as well as individual columns. You can even choose the proportion of the column’s width. This way, one column can be wider than another.
Cover block
Let’s talk about the header of your website. It’s a section that defines the first impression when someone comes to your homepage. Kind of important, isn’t it? And did you know that Cover block can be used as a header on any of your pages?
Cover is the core WordPress blocks that helps you impress your web visitors. Especially when it is used right, or better to say, when it’s neatly integrated within your web design.
Where to use Cover block?
As mentioned above, Cover block can be used on any of your pages. Moreover, it can be added anywhere onto the page, unlike the header of your website that is fixed on the top of your website.
Cover block can be used as:
- Header of any page, including Homepage.
- Image or video overwritten by text used on product page.
- Content separator in blog post.
Cover block settings
Setting up your Cover block is very straight forward. First, choose an image or a video as a background. You can also use a single color instead. When you have your background set, add a title and subtitle.
You can choose the alignment of the block, and of course, the alignment of the text within.
Cover block alignment offers the following options:
- Align Left
- Align Center
- Align Right
- Wide Width
- Full Width
My personal favourite is the color overlay which is available in the inspector – the Cover block background image can be toned to any color you want. Together with customized font size and color, you can create beautiful contrasts and final look of your cover block will be astonishing.
From WordPress 5.4 you can choose the gradient background instead of a solid one.
Gallery block
Showcase images on your website using Gallery block. This standard WordPress block has been designed to hold your images and display them nicely on any page of your website. Similarly to other WordPress blocks, Gallery block can be positioned anywhere on the website or within the blog post.
Upload of your images can be done by choosing files from media library, from your computer or using drag&drop function.
Where to use Gallery block?
Depending on the type of your website, you might want to create a complex photo gallery or simple image presentation. You can use Gallery block on:
- Your homepage
- Individual subpages created as albums of your photo gallery
- Product pages
- Blogpost
Gallery block settings
Apart from the various alignment options of the Gallery block itself, there are a couple of interesting options within this block, such as:
- Number of columns the images are lined into.
- Image cropping to match the same size (of the smallest image).
- Hyperlink to give you the option to link to another page or media file.
Blok slike
Image block is nothing else but the block to display an image on your website.
That’s right. If you just want to add an image to any of your pages, you should use Image WordPress block. It may be similar to other presented blocks, but there are significant differences that make it perfect for single images.
When to use Image block?
Image block should be used especially when the object displayed on the image is particularly important for your web visitor you want to:
- Catch web visitor’s attention with a specific image.
- Display image with caption.
- Show infographics that help visitors better understand the discussed matter.
Image block settings
One of the biggest advantages of the Image WordPress block is it’s image size options. You can easily resize an image by pulling it by its corner, choose a fixed size in pixels, or define size in percentage.
Another significant option is input fields for alternative text, caption and link. I strongly recommend using these fields as they play an important role in on page SEO.
Media & text block
Let’s move on to more advanced page layouts that you can create using Media & text block. This core WordPress block allows you to combine media & text side by side, in a way that’s aesthetic and contextual.
Where to use Media & text block?
Although Media & text block is most suitable for use within blog posts, with a bit of imagination, you can use it elsewhere too. For example, you can create a nice product or service overview using image & text next to each other.
Don’t forget to add a Button block to the text section of the Media & text block, if used as product/ service overview. This way you can design nice CTA section on any page.
Advantages of Media & text block
- Bringing together image & text that contextually fit with each other.
- Avoiding misplace of image within the blogpost.
- Helping with site’s responsiveness (use “Stack on mobile” function).
Media & text block settings
When looking at the setting of Media & text block, you’ll notice quite a few alignment options, some of them are unique, compared to most other blocks.
Interesting and useful setting of this block is background color. By coloring the area around image and text that fit together, you can visually highlight their connection.
Insert a link from WordPress version 5.4 (31.3.2020). You can choose from link, media file or attachment page.
Stolni blok
Table block is one of the examples of how WordPress improved after the introduction of WordPress block editor in version 5.0 and beyond. Whereas before you needed plugin to insert table into your WordPress website, now you can simply use Table block.
Where to use table block?
Tables play a huge role in providing useful content in a well-arranged and transparent way. Surely, most of the websites have used tables. Here are just a few examples of using tables on different websites:
- Data comparison
- Pricing tables
- Product technical details
- Recipes
- Membership packages overview
Having Table block as part of free WordPress core is really amazing.
Table block settings
When you insert a Table block into the page, you need to define a number of columns and rows of your table. Don’t worry, this number isn’t fixed. You can add more rows and columns (or remove them) any time.
Then, choose a style of your table: default or stripes. Move on to alignment and font style and finally, fill in your table before you add a finishing touch to it.
More options include:
- Boja pozadine
- Fixed width cells
- Zaglavlje
- Footer
- Link (text entry in a table can link to other pages)
Which block would you like to see next?
Hope you enjoyed reading about our selection of very useful WordPress core blocks – available for free to everyone. Please, let us know which blocks would you like to read about next or which functionalities you find still missing in WordPress core. Thanks for reading!
Which Gutenberg blocks work with the BusinessFinder+2 theme?
Hello Bryan,
thanks for asking. We are sorry, Business Finder+ is not compatible with Gutenberg blocks as the theme is based on our older framework II that supports the following plugins: https://www.ait-themes.club/wordpress-plugins/#businessfinder
Lijepi Pozdrav!
Zlatko
AIT tim
Ich habe die Lifetime Membership und jetzt heißt es das Sie meine Fragen nicht beantworten wollen. Deshalb habe ich ja diese Mitgliedschaft gewählt. 1 Year Technical Support! Über den Support dauert es oft Tage bis man eine Antwort bekommt. Ich finde die Software gut in manchen Dingen zu kompliziert, aber wenn die Möglichkeit besteht Fragen zu stellen kein Problem. Aber wenn es jetzt heißt ich solle mir einen Programmierer suchen, dann hätte ich dieses Theme ja nicht gebraucht!
Also ich setze schon ein gewisses Maß an Service voraus!
Pozdrav Thomas,
thanks for your reply. Thank you for taking the time to tell us why our service failed to meet your expectations.
We value your business, and would like to address your concerns as quickly and correctly as possible.
I understand your frustration, and I sincerely apologize for any inconvenience we have caused you due to late responses, please kindly know that our technicians are ready to answer you most efficiently even as quick as possible when you decide for priority question (obviously within a few working hours). Customer Support is provided during working days from 8am to 5pm Central European Time.
Drugo,
please kindly note that we offer the following services: https://www.ait-themes.club/services/ and customization is a special request that we do not provide due to capacity reasons etc. Once you require additional work on your website, you should contact experiences wordpress developer or designer.
Hvala na razumijevanju.
Lijepi Pozdrav!
AIT tim
How do centre a button now – in the new wordpress 5.4?
Hello Tony,
you migt find the answer by contacting wordpress comunity forum i am convinced… anyhow, the best wey should be to contact our support team at: https://system.ait-themes.club/support/add-question.
Naši tehničari spremni su odgovoriti vam najučinkovitije čak i što je brže moguće kada odlučite o prioritetnom pitanju (očito unutar nekoliko radnih sati). Korisnička podrška dostupna je radnim danom od 8 do 17 sati po srednjoeuropskom vremenu.
Hvala na razumijevanju.
Najbolje!
Zlatko
AIT tim
I have a job wordpress website. I need to design custom theme for it. If you have enough knowledge of web designing then please create a complete video on how to design job board wordpress theme. I am really thankful to you for this act of kindness.
Pozdrav,
thanks for writing in and for interesting idea and feedback.
Our main job is to WordPress CMS based products as templates, plugins, graphics, and our the highest priority is to keep adding new features regarding Citadela product group: http://citadelawp.com
Anyhow, we’ll consider your idea and make decision.
Lijepi pozdrav!
Zlatko
AIT tim
I didn’t know about the Cover block, I will try it, thanks.