1. Home
  2. /
  3. Blog
  4. /
  5. Atomic Blocks
  6. /
  7. Build a Simple Homepage...

Build a Simple Homepage with Atomic Blocks and Gutenberg

There are six videos on this page…

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

A DIY homepage built with WordPress 5 and Atomic Blocks plugin
A DIY homepage built with WordPress 5 and Atomic Blocks plugin

The Header Section

The header section uses the Media & Text block.

Media and text block settings
Media and text block settings

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

Logos displayed in a row using the columns block
Logos displayed in a row using the columns block

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

The headline and paragraph blocks
The headline and paragraph blocks
  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

I used the Post Grid block to add the two case studies
I used the Post Grid block to add the two case studies
  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

Call to Action comes with the Atomic Blocks plugin
Call to Action comes with the Atomic Blocks plugin
  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 width settings.
Not all themes support block 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.