1. Home
  2. /
  3. Blog
  4. /
  5. Genesis framework
  6. /
  7. Specific themes
  8. /
  9. Revolution Pro theme by...

Revolution Pro theme by StudioPress

Revolution Pro is the first StudioPress theme to automatically set up the front page for you .

You click a big blue button and WordPress sets up the front page just like the demo site.

If you’ve watched the video you’ll already know how easy it is.


I like Revolution Pro theme so much that I built a whole demonstrator site with 10 demo home pages. Take a look and see what you think.

MY – Demo Site

Revolution Pro theme auto set up needs Gutenberg

To set up your homepage in this way you must be using the new WordPress post editor, Gutenberg.

Gutenberg has blocks for each type of content you can add to your page. For instance, to add an image to your page you use an image block. To add a headline to your page you use a heading block. To add a paragraph to your page you use the paragraph block.

Container and column blocks are fiddly to select

Most of the blocks are easy to set up. The container and columns blocks are fiddly to select. But they’re easy to use once you’ve mastered the art of selecting them.

The blocks that display content on your page are simple to use with easy to understand settings.

However, to make sure you have a good idea of how the blocks in the demo home page work, I’ll go through each block here.


Revolution Pro homepage headline

I’ll start with the container block, it sits just under the black and white photo of windows at the top of the home page.

The Container block has three blocks nested inside it.
The Revolution Pro Container block has three blocks nested inside it.

The first block on the homepage is a photo block showing a building with windows

Below the photo of the building there is a container block that contains three other blocks.

  1. Headline block
  2. Paragraph block
  3. Button block
  4. The three blocks above are all nested inside a Container block

These are the settings for the container block

The settings for the container block
The settings for the Revolution Pro container block

The container block (4) has a faint shadow. This comes from the Additional CSS Class of boxshadow.

The container is pushed into the image by the Margin top (%) -25.

You must apply a background colour to the container, otherwise the black text would be invisible against the black photo.

The container block background colour.
The container block background colour.

The container block width is set to Align Centre

The other blocks that have width settings are all set to full width.

Revolution Pro container block set to Align Centre width
Revolution Pro container block set to Align Centre width

The next block you can see is the Pullquote block

The Revolution Pro Pullquote
The Revolution Pro Pullquote

5.) You use the Pullquote block below the container block.

The demo site uses the Pullquote block without changing any off the settings.


The eBook cover is in a two column block

""

This is the dialogue box with the CSS class of “image-grid”. Add image-grid class to the columns block settings.

To make the image grid responsive in Revolution Pro add a CSS class of image-grid
To make the image grid responsive in Revolution Pro add a CSS class of image-grid

What does the image-grid CSS class do?

Normally this grid of images would display as a 3×3 grid on large monitors. But on small screens the images would stack one on top of the other.

After applying the image-grid CSS class, your site will display the 3×3 grid on all screens. Even on small smart phone screens.


The Work With Us Section

The Work With Us section in Revolution Pro theme
The Work With Us section in Revolution Pro theme

This section of the Revolution Pro homepage is made from…

  • The headline “Work With Us”. This is a H2 heading block.
  • The paragraph below this headline, This is paragraph block set to large text.

This is the paragraph block settings, dialogue box, showing the font size large setting.

Paragraph blocks have a text size setting. This paragraph is set to large text size.
Paragraph blocks have a text size setting. This paragraph is set to large text size.

The three columns of text below the “Work With Us” headline

A three column layout containing 3 headings 3 paragraphs and 3 text links
A three column layout containing 3 headings 3 paragraphs and 3 text links

How this 3 columns row is made

14.) This is a columns block. It is set to display 3 columns

The columns block set to display 3 columns
The columns block set to display 3 columns

Each column contains heading and paragraph text

15.) Is a H3 heading block
16.) Is a paragraph block
17.) Is a paragraph block containing a text link


The space between blocks

When you build your page from content blocks using the WordPress Gutenberg editor, each block sits one on top of the other.

If you want to add more space between any two blocks, you can place a spacer block between them.

You can then set the height of that spacer block. For instance, you could set the spacer to 10, 30 or 60. This would give you a small, medium or large amount of space between the two blocks.

The demo theme homepage uses the Atomic Blocks, spacer block. Gutenberg also has a spacer block which is very similar.

This is how the spacer block looks in the post editor
This is how the spacer block looks in the post editor. In this image the red arrow is pointing to the AB Spacer block icon

 

You can choose how much space to apply between blocks using the ab spacer block
You can choose how much space to apply between blocks using the AB Spacer block

Width of blocks in the Revolution Pro homepage

Some Gutenberg blocks have a width setting. For instance the image grid is set inside a grid block and the grid block has a width setting. But other blocks such as the heading block and the paragraph block do not have width settings.

To make your homepage look like the Revolution Pro homepage, use the full width block setting when ever possible.

The exception to this rule is the container block that contains the page headline. The block that pushes into the image at the very top of the page. This is a container block, with a background colour of white, a headline, paragraph and button.

This top container  has a width setting of “Align Centre”.

The image below shows the full width option

The width option in a Gutenberg block
The width option in a Gutenberg block

Remember, some blocks do have a width option and some blocks do not have a width option.

Also remember the container block at the top of the page (number 4) has a width of “align centre”.

If you’ve read this far you might feel overwhelmed. Which makes it all the more exciting that the new Revolution Pro theme can set all of this up for you automatically.

This auto install feature is new to WordPress 5 and Gutenberg, but it points to a bright future for WordPress and it’s users.


What to do next

If you’re new to Gutenberg and would like a simple tutorial Click here.

To see some more Genesis & Gutenberg layouts click here