Your site works. Today you decide how it looks.
There are two kinds of choice, and knowing the difference is the lesson:
By the end your site will have a look you picked, the same on every page.
Open the interactive on the board. The picture on this step is one finished look, not the only right answer.
The whole-page versus one-block distinction is what pupils take away. Everything else is choosing colours.
Every block has its own boxes. A heading has a colour box. A banner has a colour box. Change one and only that block changes.
The page block has boxes too, and they are different: they set the background, the writing colour and the font for everything on that page.
Designers call that the look of a site. Pick one and stick to it, or a visitor cannot tell your pages belong together.
Say the two kinds of choice plainly and move on. Pupils meet the idea properly by doing it in the next three steps.
One box on the page block recolours everything behind your writing.
This is the block you need:
{"blocks": {"languageVersion": 0, "blocks": [{"type": "web_page", "fields": {"NAME": "Home", "BG": "lightblue", "FG": "navy", "FONT": "Georgia, serif"}}]}}Check: the whole page has changed colour behind everything, not just one block.
If it did not work: only one block changed colour, so you clicked a heading or a banner instead of the blue page block.
Model this once. The page block is the big blue one everything else sits inside, and pupils click a heading by mistake first time.
The two ✨ gradient choices are popular and hard to read text on. Let them try one, then ask whether they can still read their own sentences.
The same block sets the colour and shape of all your writing.
Check: every sentence on the page changed together, in one go.
If it did not work: dark writing on a dark background is unreadable. Change one of the two until you can read it easily.
Readability is the teaching point here, not taste. A pupil who cannot read their own page has made a design mistake, and they can see it themselves.
See the difference between a whole-page choice and a one-block choice.
This is the block you need:
{"blocks": {"languageVersion": 0, "blocks": [{"type": "wp_banner", "fields": {"TEXT": "All About Hurling", "COLOUR": "seagreen"}}]}}Check: the banner changed and nothing else did. That is the difference.
This is the beat the lesson is built around. Ask the class to say out loud what changed this time compared with step 3.
The banner colours are a fixed set of five. They are deliberately strong, because a banner is meant to be seen first.
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.