WordPress blocks are building units of your 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.
Let’s start with WordPress blocks for CTA buttons.
Creating 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:
- Background color
- Font color
Text written in your CTA button should be short and straight forward, encouraging the action you want your web visitors to take.
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 column’s width. This way, one column can be wider than another.
Let’s talk about 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 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.
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 positions anywhere on the website or within the blogpost.
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 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
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 option to link to another page or media file.
It might start getting a bit confusing. First, you could add image to Cover block, than there was a Gallery block to work with images and now it comes to Image block which is nothing else but block to display 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 helps 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 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.
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
- 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 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:
- Background color
- Fixed width cells
- Link (text entry in a table can link to other pages)
Which block would you like to see next?
We’re very excited about the WordPress block editor as it really seems like WordPress got ready for 2020’s well ahead of time and made the process of creating websites so much easier.
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!