Lesson 1: Creating Layouts with Columns and Groups
Overview
WordPress makes it easy to create structured layouts using columns and groups.
These blocks let you control how your content sits on the page, side by side or in neat sections, so it looks balanced and readable.
You don’t need to be a designer to make your layout look good. Just keep things simple and consistent.
The Columns Block
- Use columns when you want content to sit next to each other.
- Great for text and image pairings, feature lists, or short highlights.
- You can choose from pre-set layouts such as 50/50 or 70/30 splits.
Example:
Left column: a photo of your product.
Right column: a short paragraph explaining what it is and how to buy it.
The Group Block
Groups are containers that help you organise content. You can place several blocks inside a group to keep them together.
This is helpful for sections like testimonials, contact details, or featured products.
Tip:
Add a background colour or subtle border to a group block to make that section stand out.
Key Takeaway
Columns organise your layout horizontally, while groups keep related content together vertically. Both help create tidy, structured pages.
Practical Task
Open one of your pages and add a Columns Block.
Try placing an image on the left and a paragraph on the right.
Then, add a Group Block below it and include a heading, short text, and a button inside.
Preview the page to see how your layout looks.
Lesson 2: Adding Media Blocks
Overview
Media blocks help you bring your website to life with visuals. These include images, galleries, and videos.
Used wisely, they add movement and interest without overwhelming your message.
Image Block (Recap)
You’ve already learned how to add an image, but now you’ll make sure it fits your layout.
You can:
- Adjust alignment (left, right, centre, or full width).
- Add captions for context or credits.
- Use the “Replace” button to swap an image easily without deleting the block.
Gallery Block
Use this block when you want to show multiple images together, such as a portfolio or collection of products.
You can:
- Choose how many columns appear.
- Rearrange or remove images inside the gallery.
- Add short captions under each image.
Tip:
Keep your gallery simple. Four or six images per row usually look best on both desktop and mobile screens.
Video Block
If you have a video hosted on YouTube, Vimeo, or another platform, you can easily embed it by pasting the video URL into the Video Block.
It will automatically appear on your page without slowing it down.
Key Takeaway
Media blocks make your pages engaging, but they work best when they support your words rather than compete with them.
Practical Task
Add one media block to your page.
- Try replacing an existing image with a new one.
- Or, create a simple gallery using two or three photos.
Check that your images look good on both desktop and mobile in preview mode.
Lesson 3: Using Buttons and Links
Overview
Buttons and links guide visitors to take action. They connect your content and help people move easily through your site.
In WordPress, you can add a Button Block to create a clear call to action that stands out.
How to Add a Button
- Click the + icon and select Button.
- Type your button text, for example “Book a Call” or “Shop Now.”
- Click the link icon to add the destination URL.
- Use the side toolbar to change colour, size, or alignment.
Tip:
Keep your button text short and action-focused. It should tell people exactly what happens next.
Examples:
- “Get in Touch”
- “Start Your Free Trial”
- “See the Collection”
Adding Links to Text
To link a word or phrase in a paragraph:
- Highlight the text.
- Click the link icon in the toolbar.
- Paste or search for the page you want to link to.
Tip:
Always use clear link wording. Instead of “click here,” write “Read our privacy policy” or “See our services.”
Key Takeaway
Buttons and links keep your visitors moving through your website. Good ones feel obvious, helpful, and natural to click.
Practical Task
Add one button to your Home or Services page.
Link it to your Contact page or an enquiry form.
Then, add one text link inside a paragraph using a clear, descriptive phrase.
End of Module Encouragement
You’ve just learned how to use layout and media blocks to make your pages look structured, professional, and easy to use.
You can now mix text, images, and buttons to create pages that guide your visitors naturally from one section to the next.
It’s worth taking time to play around with these blocks. The more you experiment, the more confident you’ll become in shaping your pages to fit your brand and style.
You’re doing great. The next step is to start working with real-world examples and put what you’ve learnt to work.
Support+
If you’d like to practise creating layouts or adding galleries with support, bring your draft pages to the next Support+ live session.
I can help you choose the right blocks, refine your design, or give you feedback so you can make improvements to ensure your layout is balanced and mobile-friendly.