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.
- Click the image
- If your theme supports the width option, those settings appear above the block.
- In the sidebar, always click the block tab to see extra settings.
- You can toggle the Stack on mobile option. So the image will stack above the text for mobile users.
- Always click the down arrows to expand the settings boxes.
The logos are placed in columns
How I built the logos row
- I placed a columns block in my page.
- I placed image blocks inside each column.
- My theme offers several widths for the columns block.
- I clicked the block tab in the sidebar to access all of the extra settings.
- The columns block contains two columns. Change that to three here.
- Always expand all of the settings tab down arrows to see extra settings.
The headline and paragraph row
- I used a heading block set to H2
- I used a paragraph block, then used the sidebar settings to increase the text size.
The case studies row
- First I added a Post Grid block.
- I chose the width and grid settings.
- I clicked the Block tab in the sidebar.
- Then fine tuned my settings in the sidebar.
The Call to Action row
- Step one: add the call to action block to my page. And type the text and button link.
- If your theme supports widths, select a width for your CTA block.
- In the sidebar, click the block tab.
- Expand all of the tabs to configure your settings.
Not all themes support block widths. If your’s does, you have up to three options.
- Centre aligned (narrow width)
- Wide width.
- Full width.
The full width option will only span the full browser width if your theme allows it to.