• Skip to main content

Revolution Pro

Demo site showing what great looking pages you can build with Revolution Pro theme

  • Home
  • A Gutenberg Blog Post
  • Tweaks
    • Layout Ideas 1
  • Blog
  • About

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?

Jump



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.

button


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.

More info


AB Profile Block


avatar

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.

  • Website
  • Twitter
  • LinkedIn
  • Email


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.

avatar

Sam Smith

CFO


Post 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

PhilG
7th March 2019

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.

Continue Reading Business Services

Home Care

PhilG
7th March 2019

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.

Continue Reading Home Care



Blog style listing


Business Services

PhilG
7th March 2019

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.

Continue Reading Business Services

Home Care

PhilG
7th March 2019

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.

Continue Reading Home Care

Bespoke Furniture

PhilG
7th March 2019

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.

Continue Reading Bespoke Furniture



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.

Button


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.

Button


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 headerTable headerTable 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.

This website is independently owned by an affiliate marketer of StudioPress. It is not sponsored by StudioPress, WP Engine, Copyblogger Media LLC, WordPress, or Automattic Inc. WordPress, Genesis, StudioPress and WP Engine, are registered trademarks of their respective owners.