Examples of Gutenberg blocks
On this page I list blocks that a freelance service provider is likely to want to use on their site. Jump to the examples.
A service business will often start their homepage with a headline saying what they do. Then they have a paragraph saying who they help. Followed by a jump link to the next section of their homepage, or a specific page in their site.
If you have a service business scroll down to see some typical examples of blocks you might want to use on your site.
Container, headline, paragraph and button.
This is the page title…
This is a paragraph of text and it goes right here on the page, where it fits quite nicely. Don’t you think?
Media & Text
This Is The Block Headline
You could put some text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mattis dictum dolor, non egestas erat consequat ac.
Container with background colour instead of background image
I Provide Common Sense SEO Advice…
We didn’t believe we could get on page one with our budget. Harvey proved us wrong.
AB Profile Block
Lucy Smithson
Marketing Supervisor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mattis dictum dolor, non egestas erat consequat ac. In tempor convallis leo ut tincidunt. Fusce eleifend nunc dui, sit amet accumsan odio ornare eu.
Quote Block
This is an example of a quote set to large size text.
Simple but appealing
Pull Quote with border
This is a pull quote. It has more styling options than the quote block above.
And it looks great!
Pull Quote with background colour
This is a pull quote. But this time I added a background colour instead of the border.
And it looks great!
Drop Cap Block
The drop cap block is an acquired taste. Some people love it and others hate it. It is however one of the many elements you can use to brighten up your page and add eye candy to your site.
Testimonials
This is a testimonial block
You could put several testimonials in a columns layout, or let the testimonial span the width of the content area. You can also change the background colour of the testimonial if you wish. Or even add a link.
Sam Smith
CFOPost Grids
There are many options when making post grids, I’ll show some examples below…
Show featured image only in a grid layout
Featured images and teaser text
Business Services
A business incubator approached me to not only make their site rank on page one, but to show them how I did it. This worked out well for both of us.
Home Care
The content for this website needed to build relationships as well as rank high in Google. I worked with a content writer to get the right message across.
Blog style listing
Business Services
A business incubator approached me to not only make their site rank on page one, but to show them how I did it. This worked out well for both of us.
Home Care
The content for this website needed to build relationships as well as rank high in Google. I worked with a content writer to get the right message across.
Bespoke Furniture
This business had employed a web designer to build a great looking website but they didn’t rank on Google at all. I helped them fix that.
Blocks with background images
Cover Image
Cover image with a nice yummy photo.
Call to action
Call To Action
The CTA block is a great way to grab attention to your most important links.
The container lets you add a background
There are several ways to add background images to sections of your page. Use the container block to place other blocks in a single container, then add a background colour or image to the whole section.
This is a heading
You can put other blocks in this section and then add a background image or background colour to the entire container. I’ve added a button too. But you can put most blocks inside a container if you wish.
The image module
You can break your page up and add some eye candy using the image module.
Image Gallery
The notice block
Please take note!
Use this block to draw attention to a section of your page and make sure you get your reader’s attention.
You can make the text bold or italic and add links.
Table module
The table module is not perfect, but it is easy to use. Only use the table block when you have table data. To place content in columns, use the columns block.
| Table header | Table header | Table header |
| This is content in the first table cell. | This is content in the second table cell. | This is content in the third table cell. |
| The table uses stripy formatting to make it easier to read. | Only use tables to format tabular data. | Use the columns block instead of tables unless you are using tabular data. |
List items inside a columns block
To layout content in columns use the columns block, not the table block.
Left hand column
- List item one
- List item two
- List item three
- List item four
Right hand column
- List item one
- List item two
- List item three
- List item four
Accordion
This is an accordion question
This is the answer to that question. You only see the answer if you open the question. Or you set the accordion to be open by default.
This is an accordion question
This is the answer to that question. You only see the answer if you open the question.
This is an accordion question
This is the answer to that question. You only see the answer if you open the question.
Blocks Galore!
Because blocks are so useful, plugin authors are churning them out at an incredible rate.
But beware! As with all plugins, think carefully before you install things in your WordPress website. If you’re using one of the modern StudioPress themes that has been specifically optimised for Gutenberg. You might find that the Atomic Blocks plugin is the only extra Gutenberg plugin you need.
My advice is always to err on the side of caution.