MODULE 3 OF 8 · 75–105 minutes
Build with blocks and images
Loading progress…
LESSON 3.1
Groups, columns and spacing
Your goal: Build a section that remains readable on a narrow screen.
Group blocks keep related content together. Columns can place groups side by side on wider screens. They are layout tools, not a reason to split a sentence into separate blocks. Start with the content order, then add layout. Use the editor’s spacing controls instead of empty paragraphs or repeated spaces.
See it in practice
Create two service cards with a heading, a short paragraph and a link inside each. Place each card in a Group and the Groups in Columns. Where the block offers a mobile stacking option, enable it. A preview icon is useful, but also narrow the actual public browser window.
Try a small change
Make one card heading much longer and increase one paragraph to five lines. Preview the page at about 320 pixels wide.
What should happen, and why?
Realistic content reveals cramped columns and fixed heights. Remove unnecessary fixed sizing, allow stacking and keep the source order understandable.
LESSON 3.2
Images that communicate
Your goal: Select an appropriate image and write contextual alternative text.
Use an image you created or have permission to use. Upload it through Media or an Image block, choose an appropriate display size and avoid huge files for small thumbnails. Alternative text replaces the image’s meaning when it cannot be seen. A caption is visible supporting information; it is not a substitute for alt text.
See it in practice
For a photo showing how to identify a worn tyre, describe the visible wear that matters. For a purely decorative background that adds no information, empty alt text can be appropriate. A filename such as IMG_0042 is rarely useful. Do not include private people or information in demo uploads.
Try a small change
Add one relevant image to Services. Write alt text for its purpose on that page. Add a caption only if it contributes information, then check the image on a narrow screen.
What should happen, and why?
Useful alt text depends on context. The same photo may need different text in a repair tutorial and a decorative banner.
GUIDED BUILD
Put the lesson to work.
- Create a two-card service section using Group and Columns blocks.
- Add a permitted image, appropriate alt text and a useful caption if needed.
- Test long content and a narrow browser; fix overflow or cramped columns. Export your practice site.
Check your work
These are your own practice confirmations. We do not inspect your external WordPress site.
BREAK / FIX
Find the cause. Check the repair.
The mobile preview shows two extremely narrow columns, and extra blank paragraphs create a large gap below them.
Reproduce this only on a disposable practice copy if it is safe. Otherwise explain the diagnosis and recovery steps in your notes.
Hint 1 — Where to look
Inspect the Columns settings and List View.
Hint 2 — The principle
Responsive stacking and block spacing are separate from content.
Hint 3 — Explained repair
Enable mobile stacking where available, remove empty Paragraph blocks and use Group/Columns spacing controls. Check the real public page at a narrow width.
CHECK YOUR UNDERSTANDING
Five questions. As many tries as you need.
Get at least four correct. After checking, read the explanations and try again. All six practice checks and a passing quiz complete this module.
Keep these references
Official documentation. Screen labels can differ by theme and WordPress version.