• Menu
  • Skip to right header navigation
  • Skip to main content
  • Skip to primary sidebar

Before Header

Why Genesis is the Foundation of Any Smart WordPress Design ↴

Flagship Content

Web design tutorials for service business owners.

  • Search
  • Home
  • Start Here
  • Content
    • About
    • Flagship Content: How is it different to cornerstone content?
    • Homepage Content Blueprint
    • Content needed for a Service Business website
  • DIY Page Layouts
    • Start Here
    • Atomic Blocks Layouts
      • View The Layouts
      • Using Layouts
      • Adding blocks to an Atomic Blocks layout
      • Tips For Using Layouts
      • Problems and Solutions
    • Examples of Atomic Blocks
    • List of Atomic Blocks
    • List of WordPress Blocks
    • Block Navigation
    • Eye Candy
    • Tips for New Users
    • Blocks that Serve a Specific Purpose
  • Navigator Page
  • Search
  • Home
  • Start Here
  • Content
    • About
    • Flagship Content: How is it different to cornerstone content?
    • Homepage Content Blueprint
    • Content needed for a Service Business website
  • DIY Page Layouts
    • Start Here
    • Atomic Blocks Layouts
      • View The Layouts
      • Using Layouts
      • Adding blocks to an Atomic Blocks layout
      • Tips For Using Layouts
      • Problems and Solutions
    • Examples of Atomic Blocks
    • List of Atomic Blocks
    • List of WordPress Blocks
    • Block Navigation
    • Eye Candy
    • Tips for New Users
    • Blocks that Serve a Specific Purpose
  • Navigator Page
You are here: Home / Uncategorized / Adding blocks to an Atomic Blocks layout

Adding blocks to an Atomic Blocks layout

In a previous tutorial I showed you how easy it is to build a web page from an Atomic Blocks layout.

In the video I made to go with that page I used the Freelancer layout. The image below shows the freelancer layout.

In this next video I will add Sections and Blocks to the page I’ve already made using a Layout

Download Video

By adding extra blocks to this Atomic Blocks layout I made my homepage look unique.
This layout is called Freelancer and is built into the Atomic Blocks plugin.

The “My latest blog posts:” section you will only see blog posts after you add blog posts to your website.


Adding Atomic Blocks page Sections to your web page

You can add a new block or page section above or below any other block or section in your page.

Find the “top level” block

The page layouts that are built into the Atomic Blocks plugin are, in places, quite complex. Display blocks can be nested inside column and container blocks.

So if you want to place a block inside an existing layout, make sure you have chosen a spot with adequate room.

This image shows columns nested inside more columns

Take care when adding blocks to Atomic Blocks layouts. You can not put a wide block inside a narrow container.

No1 is the top level block we need

In our example we’re looking for a top level block. Because we need to insert another wide block above it.

If we tried to insert a wide block below number 4 in the illustration above, there would not be enough room.

When you’ve found a top level block, click the Three dots button

Adding blocks to an Atomic Blocks layout is easy, just use the Insert Before option.
Click the three dot button, then choose Insert Before from the drop down menu.

Because we selected a wide, top level block, there is enough room to insert another wide block above it.

In this example, the spacer block makes it easy

In the Atomic Blocks Freelancer layout there are several spacer blocks that divide up the page.

I can see that the spacer is a wide block, so I can add a wide block directly above the spacer block. I’ll put my Call To Action block there.

Now you can choose a block to insert

The easiest way to insert an Atomic Blocks, block into your page is to search for it by typing a forward slash then typing the name of the block. I wanted to insert the Call To Action block so I typed /call (see below).


The end product

I inserted a Call To Action block above the Things I can Do section and below the FAQ section.

Adding blocks to an Atomic Blocks layout

For Atomic Blocks users, the easiest way to build a professional looking homepage for your site is to…

  • Start with one of the built in page layouts.
  • Add any suitable Atomic Blocks page Sections to that page.
  • Add any WordPress blocks or Atomic Blocks blocks that you need to complete your layout.

Building a page from Sections

You don’t have to build your web page from one of the ready made page layouts. You can build your page from scratch using containers, columns and blocks.

You can also use the Atomic Blocks page sections to build your page row by row.

For instance you could stack these sections one above the other on your page…

  • Hero Header
  • Services – four column
  • Testimonials
  • Text List and Image
  • Team Members
  • Contact Info and Map

If you need to add more information, add any WordPress or Atomic Block you need, above or below any other block, container or section.

Looking for a StudioPress theme or hosting?

Check out the two links below…

Get Premium WordPress Themes

Buy a StudioPress theme outright and use it on all of your sites. There are three ways to get all of the StudioPress themes AND save.

Get Premium WordPress ThemesChoose Your Theme

Get Genesis Framework & StudioPress Themes free.

When you sign up for a WP Engine plan, you receive the Genesis Framework and 36 StudioPress Themes free. That’s over $2,000 in value.

Get Genesis Framework & StudioPress Themes free.Free themes with hosting

High Quality Hosting

Filed Under: Uncategorized

Previous Post: « Atomic Blocks Tips For Layout Templates
Next Post: Six Gutenberg StudioPress Themes (problems & solutions) »

Site Footer

Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use.
To find out more, including how to control cookies, see here: Cookie Policy

Copyright © 2021 · Mai Law Pro on Genesis Framework · WordPress · Log in