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.
…
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 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.
- Headline block
- Paragraph block
- Button block
- The three blocks above are all nested inside a Container block
These are the settings for the 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 width is set to Align Centre
The other blocks that have width settings are all set to full width.
The next block you can see is the Pullquote block
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.
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
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.
The three columns of text below the “Work With Us” headline
How this 3 columns row is made
14.) This is a columns block. It is 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.
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
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