Please note: this article is only applicable to websites built after November 2018.
Video - Reorder Widgets and Rows
Video - Formatting Rows
This article will show you how to use rows in the layout of your website.
In this article:
- Dos and Don’ts
- Common Problems/Mistakes
- Common Questions/FAQs
- Related Articles/See Also
- You may like to consider planning your preferred layout before you start adding elements to save yourself time.
- You can add as many rows as you like.
- Each row must contain at least 1 and up to 3 widgets.
- You can give rows a coloured background or use an image as the background if you wish but bear in mind accessibility and take care not to make your website look too busy.
Adding Rows and Content
- To add a row click “+ Content Row” at the bottom of the page.
- Once you have added your new row a small tool bar will appear to the left of it. Click the + sign to add a widget to your row. Using Widgets is covered in another article.
- Click the pencil icon to edit the row. A window will appear on the left of the page where you can add settings for the row.
- Give the row a title using the Title box. This text will be displayed at the top of that row. You can use the alignment buttons to select how the content of this row will be aligned; left, right or centred.
- Use the margin settings to choose how much space will appear around the outside of this row. Use the padding settings to choose how much space will appear around the inside of this row.
- Use the Background colour selector to set the background colour for this row.
- Use the Header colour selectors to set the header colours to be used in this row.
- Use the Font colour selector to set the text colour to be used in this row.
- To add a background image to this row click Select Image. The image picker will appear and you can either upload an image to use or choose one from the library.
- Click Save to apply your chosen settings to the row.
- For advanced users only. See Styling your website for CSS additions.
Reorder your rows
- Just above the top row click the Reorder Rows button. A window will appear to the left which gives a display of your existing rows.
- Click on the row you wish to move holding the mouse button down and move it to the required location. Release the mouse button.
- Click the Save Changes button to save the new row order.
Dos and Don’ts
- Add welcome text in the top row for best search engine optimisation.
- Choose coloured or image backgrounds carefully. A page with lots of different coloured rows will look busy and untidy and make it harder for patients to find what they need and affect accessibility.
Using a lot of bold colours or bright picture backgrounds will impact accessibility for visually impaired users.
Related links/See Also
rows, layout, structure, design