Build a Simple Homepage with Atomic Blocks and Gutenberg

There are six videos on this page…

• Video 1: The Header Section
• Video 2: The Logos
• Video 3: Headline and Paragraph
• Video 4: The Case Studies section
• Video 5 : The Call to Action block
• Video 6: Width Settings

To build this homepage we’ll be using both Gutenberg blocks which are built into WordPress 5 and  blocks that come with the Atomic Blocks plugin.

This is what the finished page will look like

The Header Section

The header section uses the Media & Text block.

The settings change depending upon where you click in the block.

1. Click the image
2. If your theme supports the width option, those settings appear above the block.
3. In the sidebar, always click the block tab to see extra settings.
4. You can toggle the Stack on mobile option. So the image will stack above the text for mobile users.
5. Always click the down arrows to expand the settings boxes.

The logos are placed in columns

How I built the logos row

1. I placed a columns block in my page.
2. I placed image blocks inside each column.
3. My theme offers several widths for the columns block.
4. I clicked the block tab in the sidebar to access all of the extra settings.
5. The columns block contains two columns. Change that to three here.
6. Always expand all of the settings tab down arrows to see extra settings.

The headline and paragraph row

1. I used a heading block set to H2
2. I used a paragraph block, then used the sidebar settings to increase the text size.

The case studies row

1. First I added a Post Grid block.
2. I chose the width and grid settings.
3. I clicked the Block tab in the sidebar.
4. Then fine tuned my settings in the sidebar.

The Call to Action row

1. Step one: add the call to action block to my page. And type the text and button link.
2. If your theme supports widths, select a width for your CTA block.
3. In the sidebar, click the block tab.
4. Expand all of the tabs to configure your settings.

Width Settings

Not all themes support block widths. If your’s does, you have up to three options.

1. Centre aligned (narrow width)
2. Wide width.
3. Full width.

The full width option will only span the full browser width if your theme allows it to.