Your page says the right things and looks the way you chose. Today you decide where things sit: a banner across the top, and two things side by side instead of one under the other.

Getting started: open the builder on the next step and carry on with your site. It is already there.

Everything you have added so far has stacked down the page, one thing under the last. That is what a browser does unless you tell it otherwise.

Two blocks change that:

• a banner is a coloured strip across the full width, for the one thing you want read first;
• a row puts whatever you drop inside it side by side instead of stacked.

Both are just tags with a class on them, and the stylesheet does the arranging:

<div class="banner" style="background: seagreen;">All About Cats</div>

<div class="row">
  <div class="card" style="background: lightblue;">
    <h2>Cats</h2>
  </div>
  <div class="card" style="background: lightgreen;">
    <h2>Dogs</h2>
  </div>
</div>

Start with the thing a reader should see first.

1. In the palette, click Layout and drag a banner block to the very top of your page, above your heading.
2. Type the one line you most want read, and pick a colour from its dropdown.
3. Open the Your web page tab and look at it as a reader would.

Here is the block, and the tag it wrote:

{"blocks": {"languageVersion": 0, "blocks": [{"type": "wp_banner", "fields": {"TEXT": "Litter is choking our park", "COLOUR": "seagreen"}, "x": 10, "y": 10}]}}

<div class="banner" style="background: seagreen;">Litter is choking our park</div>

Before you build anything, work this one out in your head.

Below is a row holding two box blocks, and each box holds a subheading. Decide, and say it out loud:

• Will the two boxes end up on top of each other, or beside each other?
• Where will "What we can do" be, left or right?

Here are the blocks:

{"blocks": {"languageVersion": 0, "blocks": [{"type": "wp_row", "inputs": {"ITEMS": {"block": {"type": "wp_card", "fields": {"COLOUR": "lightblue"}, "inputs": {"ITEMS": {"block": {"type": "wp_subheading", "fields": {"TEXT": "What we found", "ALIGN": "left"}}}}, "next": {"block": {"type": "wp_card", "fields": {"COLOUR": "lightgreen"}, "inputs": {"ITEMS": {"block": {"type": "wp_subheading", "fields": {"TEXT": "What we can do", "ALIGN": "left"}}}}}}}}}, "x": 10, "y": 10}]}}

Now stop everything stacking.

1. From Layout, drag a row block onto your page.
2. From Layout again, drag two box blocks and drop them inside the row, in the gap in it.
3. Put a subheading and a text block from Content inside each box.
4. Check the preview. Were you right?

Here are the tags those blocks wrote:

<div class="row">
  <div class="card" style="background: lightblue;">
    <h2>What we found</h2>
  </div>
  <div class="card" style="background: lightgreen;">
    <h2>What we can do</h2>
  </div>
</div>