Building a layout with GenerateBlocks

Think of your web page as a stack of page sections, one above of the other.

Each page section is wrapped inside a container block. The container block enables you to give that page section a background color, background gradient or background image.

Full browser width or contained

The container block can span the full browser width or be contained to a specific size.

You can stack as many blocks as you like inside each container block.

So you could stack a headline…

And, a paragraph, and a button block, inside a container block. If you give the container a background color, all blocks inside that container share that background color. The light grey color in this page section is a container background color.

Typography

Although it’s called the “GenerateBlocks headline block”, you can use it for any custom typography.

Use the headline block for all your custom typographical needs.

Most of the time, on most of your posts and pages, you’ll use the built in WordPress heading block or the WordPress paragraph block.

But when you need something special, use the GenerateBlocks headline block.

I think you’ll find it covers all your typographical needs.

Putting it all together

  • start with a container
  • stack any other block inside that container
  • use the grid block to build columns
  • use the GenerateBlocks headline block for custom typography
  • use the button block if needed
  • add a background color or image to the whole container

Don’t forget to add a sprinkling of images.

Where should you start?

Practice placing blocks inside the container block. Then experiment with the background image, color and gradient settings for the container block.

Once you really understand how the container settings work move on to the headline block. It’s very powerful and will help you to build great looking page layouts.

Next learn the grid block. It will enable you to build all kinds of page layouts.

And last but not least, practice the button block. It realy can spice up your call to actions.