Your site already has a banner across the top.
Today you will put two things side by side on a page, instead of one under the other.
You will use a new block called a row, which holds two things beside each other instead of one above the other.
Open the interactive on the board before pupils arrive so the starting site is visible. Remind the class that their work carries forward by itself. They do not need to find or reload anything.
The new idea today is the row block in Layout. The common snag is dropping blocks beside the row instead of inside it. Plan to model "inside the row, where it opens out" on the board in the first build beat.
Until now, everything on your page sits in one long column. A heading, then text, then a picture, then more text. One thing under the next.
A row lets two things sit beside each other instead.
A row is a block that holds other blocks. You put things inside it. Then those things share the same line on the page.
Here is a row holding a picture and a line of text:
{"languageVersion": 0, "blocks": [{"type": "wp_row", "inputs": {"ITEMS": {"block": {"type": "wp_picture", "fields": {"IMG": "ball"}, "next": {"block": {"type": "wp_text", "fields": {"TEXT": "I play football every Saturday with my friends.", "SIZE": "normal", "ALIGN": "left"}}}}}}]}
Keep this short. The point is only that a row is a holder, and things go inside it. Do not name HTML tags yet. That comes in the later beat.
If a pupil asks whether three things can go in a row, say yes, but today we will practise with two.
The blocks example should show as a live picture of the row, not as raw text. If it fails to render, sketch on the board: row across the top, picture on the left, text on the right.
Open the interactive. Your site is already there.
Look at the Home page on the Your web page tab.
Find the picture and the sentences near it.
Notice how they sit: one under the other, in one tall column.
Do not move anything yet. Just look.
Thirty seconds of looking is enough. Ask two pupils to name the order they see from top to bottom. The goal is that everyone feels the single column before they break it. A quick partner sentence ("what sits under what?") is optional if the room is ready.
If a pupil's site looks different because they changed a lot earlier, that is fine. Any page with a picture and some text will do for this beat.
Open the Blocks tab on your Home page.
From Layout, drag a row block onto your page.
Drop it under the first text block, above the picture.
The row should look open, ready to hold things inside.
Now find the picture block already on your page (from Content), or pick a different picture from Content if you prefer.
Drag that picture inside the row, where the row opens out.
Not above the row. Not below it. Inside it.
Open the Your web page tab. You should see the picture sitting in the row.
If the picture is still in the tall column on its own, drag it again into the open part of the row.
Model this on the board in two short moves: open Layout, drag row, place it in the stack under the first text; then drag the picture into the open row gap. Say out loud inside the row, where it opens out.
Circulate and look for pictures that landed under the row instead of in it. Watch also for rows dropped onto the workspace outside the page block. Those will not appear on the page. Ask the pupil to drag the row back into the page stack.
Look-for: the picture block is visually nested inside the row on the Blocks tab, not stacked as a neighbour.
The small choice (keep this picture or pick another) gives variety before the next beat.
Stay on the Blocks tab on your Home page.
Find the text block (from Content) that talks about the hobby in the picture (for example, the football sentences).
Drag that text block inside the same row, next to the picture.
Both blocks should sit inside the row together.
Open the Your web page tab.
The picture and the sentences should now sit side by side.
If one of them is still under the row on its own, drag it inside the row again.
Celebrate the first side-by-side moments on the board. Ask one pupil to show their live page.
If the text is a long paragraph, the side-by-side layout can look tight on smaller screens. That is fine for today. Pupils can shorten the sentence in Your turn if they want.
Short extension with no extra minutes: a pupil who finishes early can type a clearer sentence that matches the picture.
You're previewing this lesson. Get full access to this lesson and hundreds more — each one ready to teach, with interactive activities, printable resources and pupil progress tracking built in.