How a page is built, step by step

A layout is a plan for a page. This page explains the plan in the order that you build it, step by step, so that the words section, Component, row, column and position make sense before you press a single button.

The idea in one picture

Think of a page as a stack of bands, from the top of the screen to the bottom. Each band is a section. A section can be split into columns that sit side by side, or it can hold rows, one under the other, each with its own columns. Each column holds one or more positions, and each position is a named slot where a module can go.

• The layout is the whole page plan.
• Inside it, each section is one band across the page. It carries the background colour or picture, and the space above and below.
• Inside a section, a row is a line of columns. A section with one line of columns needs no rows. Add rows when you want several lines in one band that share its background.
• Inside a section or a row, each column is one part of that line, up to 12 side by side.
• Inside a column, each position is a named slot for modules.

So the full order is Section, then Row, then Column, then Position. Rows go one level deep only. Sections always stack from top to bottom: nothing sits beside a sidebar except rows inside the Component.

The builder decides where things go. The modules decide what goes there. You make the modules on Joomla's own Modules screen, and you tell each module which position to use.

The four words, and the special ones

Plan the page first

1. List the bands of the page from top to bottom, for example: header, banner, introduction, services, call to action, footer.
2. Mark the one band that is the page content, which is the text that you will write in an article.
3. For every other band, decide which module will fill it, and give its position a short name in lower-case letters, such as banner or services.
4. Decide which band needs a colour, and which pages need a sidebar.

A plan of five or six lines on paper saves a lot of clicking.

Build it, step by step

1. Start. Open Components, then Webal Layouts, and press New layout. Type a name in Name of the new layout, choose Blank under Start from, and press Create and open in the builder. A blank layout holds only the site header and the site footer.
2. Look at the outline. The list on the left is the outline. It shows every section from top to bottom, with its columns and positions inside it. The preview in the middle draws your real site with the layout that you have on screen.
3. Add a section. Press Add section and choose a section template, such as Hero (full-width band), Colour band or Page content only. The new section appears in the outline and in the preview.
4. Give the section a name. Click the section in the outline. On the Selected item tab, type a name in Name. The name is only for you, and it shows in the outline.
5. Choose how wide the section is. Under Content width, choose Page width to line the content up with the header, or Edge to edge to let the content itself reach both edges of the screen. The section's colour runs the full width of the screen with either choice.
6. Give the section a look. Choose a Background colour, or press Choose a picture for a background picture with a Shade over the picture, and set Space above and Space below. This is the place for breathing room: the space belongs to the section, so the bands of the page do not crowd each other.
7. Add the columns. A new section has one column. Press Add column for more. Under Modules per row, choose how many columns sit side by side on a Phone, a Tablet and a Laptop. To set one column on its own, set its width for each screen size: Phone, Tablet, Laptop, Desktop and Wide. A size that you leave as "Same as" follows the one before it.
8. Add rows, if the band needs more than one line. Press Add row in the section's settings. What the section holds becomes row 1, and row 2 follows. Each row has its own columns. See Sections with rows and pictures.
9. Choose the column kind. Under Column kind, keep Ordinary column for most columns. Choose Stacked modules for a band that holds modules one under the other and that should fill its width: this is the best choice for a band that holds one module. Choose Page content column only for the column that holds the page content.
10. Add the positions. Click the column, press Add position, and type a Position name such as services. Use lower-case letters, digits, hyphens and underscores, and use each name only once in a layout. A column can hold up to eight positions, and the modules of each position stack one under the other.
11. Place the page content once. Click the column that should hold the words of the page and press Add page content. If you chose Page content only in step 3, it is there already. The builder allows only one, and the button is greyed out once it is placed.
12. Add a sidebar, if the page needs one. Press Add section and choose Component with sidebar (right) or Component with sidebar (left). The Component uses Cassiopeia's own page grid. Its main column holds the page content, and you can press Add row to put more rows in the main column, one under the other. A layout can have only one Component. To give the content and the sidebar more room, choose Roomy or Spacious under Gap between main column and sidebar. See The Component, its sidebars and rows.
13. Put the sections in reading order. Drag a section in the outline, or move it with the keyboard, until the order is the order that a visitor should read the page. Headings come from the modules and the page content, so the order of the sections is the order of the headings.
14. Check. Open the Layout tab and read Checks. A problem stops Publish, and a warning does not. See The Checks tab.
15. Publish. Press Publish. Nothing is live until you do.
16. Use it. On the Layout tab, under Where this layout is used, tick the pages that should use the layout, press Review changes, read the list and press Apply these changes. See Using a layout.
17. Fill the positions. Open Content, then Site Modules. For each module, type the position name in Position exactly as you wrote it in the builder, and set the Menu Assignment to the pages that should show it.

One layout can serve the whole site. A section whose modules do not show on a page prints nothing on that page, so each module's Menu Assignment decides what each page shows. Make a second layout only where a page's structure truly differs. See Empty parts print nothing.

A worked example: a menu band

A café wants one band for its menu, on a photograph of the counter: a row with a heading, then a row of three dishes. On a phone the dishes should stand one under the other, on a tablet two should sit side by side, and on a laptop all three.

1. Press Add section and choose Colour band. Name it Menu.
2. Press Choose a picture and choose the photograph from the list. If it is not there, upload it in Joomla's Media manager first. The shade starts as Dark, so the words will be white.
3. Press Add row. The band's column becomes row 1, and row 2 is added under it. Click the position in row 1 and type menu-heading in Position name.
4. Click row 2 and press Add column twice, so that it has three columns. Give the positions the names dish-1, dish-2 and dish-3.
5. With row 2 selected, under Modules per row, choose 1 for Phone, 2 for Tablet and 3 for Laptop. The columns now print col-12 col-md-6 col-lg-4, and Desktop and Wide keep 3.
6. Look at the preview at Phone, Tablet and Laptop, then press Publish.
7. Under Modules, put a Heading module in menu-heading and a module for each dish in dish-1, dish-2 and dish-3. Assign them to the pages that should show the menu.

On a page where none of these modules is assigned, the whole Menu section, with its picture and its space, prints nothing.

The muddles, cleared up

Try it

1. Make a new layout called Try sections, starting from Blank.
2. Press Add section and choose Hero (full-width band). Name it Banner.
3. Add a second section, Page content only. Name it Words.
4. Add a third section, Colour band. Name it Boxes, then give it a Background and set Space above and Space below to a larger step.
5. In the Boxes section, press Add column twice, so that it has three columns, and add a position to each one: box-a, box-b and box-c.
6. Read Checks on the Layout tab. It should say that everything looks right.
7. Press Undo a few times to see how the plan comes apart one step at a time, then press Redo to bring it back.

Related pages

• The layout editor
• The Component, its sidebars and rows
• Sections with rows and pictures
• Words used for layouts