Scroll

Help Centre

Working with rows

Using Rows

This article will show you how to use rows in the layout of your website.

In this article:

Considerations/Prerequisites

  • 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.

Detail

Adding Rows and Content

adding--a-row.png

  1. To add a row click “+ Content Row” at the bottom of the page.
  2. 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.
  3. 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.

Row Settings

row-settings.png

  1. 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.
  2. 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.
  3. Use the Background colour selector to set the background colour for this row.
  4. Use the Header colour selectors to set the header colours to be used in this row.
  5. Use the Font colour selector to set the text colour to be used in this row.
  6. 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.
  7. Click Save to apply your chosen settings to the row.
  8. For advanced users only. See Styling your website for CSS additions.

Reorder your rows

reorderrows.png

  1. 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.
  2. Click on the row you wish to move holding the mouse button down and move it to the required location. Release the mouse button.
  3. Click the Save Changes button to save the new row order.

Dos and Don’ts

  1. Add welcome text in the top row for best search engine optimisation.
  2. 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.

Common Problems/Mistakes

Using a lot of bold colours or bright picture backgrounds will impact accessibility for visually impaired users.

Common Questions/FAQs

 

Rows and Widgets - An Overview
Using Widgets
Image selector

Keywords/meta tags

rows, layout, structure, design

Have more questions? Submit a request