Understanding Modern WordPress Blocks

byJohnMaluth

433 followers

1 week ago

Before you can build a homepage or shape any layout, you must understand how WordPress blocks actually work. This is the part most beginners struggle with, and it is exactly where JDGresham said everything “kicks your tuckus.” Not because it’s hard, but because no one ever explains it clearly.

This post fixes that by giving you a simple, beginner-safe guide to blocks, containers, rows, spacing, and basic layout logic.

Step 1: Open a New Page
Go to Pages → Add New.
This gives you a clean space to experiment without fear of breaking anything.

Step 2: Understand What a Block Is
A block is a building unit.
Everything you add to your site is a block:
• Paragraph
• Heading
• Image
• Button
• List
• Quote
Think of blocks like Lego pieces. One piece at a time.

Step 3: Learn the Purpose of Containers
A container is a block that holds other blocks.
It controls alignment, spacing, and layout.
Use containers for:
• sections
• columns
• boxed areas
• hero headers
Without containers, your page becomes disorganized fast.

Step 4: Add a Container Block
Click the + icon and search “Container.”
Insert it.
Now you have an area where other blocks can live.

Step 5: Add Rows and Columns
Inside your container, add a Row block.
Rows help you build:
• two-column layouts
• side-by-side sections
• content + image sections

Start simple: choose a 50/50 column layout.

Step 6: Insert Your First Blocks
Inside the left column, add:
• Heading block
• Paragraph block

Inside the right column, add an Image block.
This helps you learn placement and flow.

Step 7: Adjust Spacing the Right Way
Click the container.
Find the Spacing settings.
You’ll see:
• Padding
• Margin
Padding pushes blocks inward.
Margin pushes them outward.

For beginners:
Set padding to 20–40px.
Leave margin alone for now.
This keeps your layouts clean.

Step 8: Learn Alignment Controls
Inside each block, you’ll find alignment options:
• Left
• Center
• Right
Use these to shape your content carefully.
Never use alignment to “fix” layout issues.
That’s what containers and spacing are for.

Step 9: Preview Your Work
Click Preview at the top right.
This shows how your layout looks on desktop and mobile.
Switch between both views.
Modern layouts must work on all screen sizes.

Step 10: Repeat This Practice
Create a few practice sections:
• a full-width hero section
• a two-column text section
• a simple section with one image and one paragraph
Repetition builds confidence.
This is where most beginners gain real control.

Understanding how blocks and containers work makes your entire WordPress experience easier. You stop fighting the theme and start shaping it. This step unlocks everything that follows.

In the next post, we will build your homepage layout step-by-step using only these basic tools.

That’s it for now! What do you think about this post? Share your thoughts in the comments below.