Looking good
Here are some quick tips to help keep the site looking great...
Please use the templates where possible
The page builder offers great flexibility in the layout and design options that are available. However, in order to maintain a consistent look across the site please utilise the templates as much as possible - unless you really do need to do something new.
There are some modules available in the page builder that aren't great from a usability point of view. We have therefore not used them in any of the templates. By using the templates you can be more certain that things will display properly and work across different devices.
The main type of templated content that we have used is re-usable 'saved rows', which can be dragged onto any page to add a particular section layout. We have also created some full page templates for repeating page types.
Use a row for each section
When creating pages it is best to create a new row for each distinct section of the page. The responsive design means that any columns within a row will become stacked on top of one another on a mobile. To keep track of how the content will display it is much easier to use a new row for each section. You can then easily set colours for each section by setting the 'class' for that row.
Use 'global rows' for repeated content
You can save any row as a 'global row' and re-use it elsewhere on the site. This means that if you update one instance of the row, it will update everywhere else that row has been used. This is a very powerful tool for keeping the website current and manageable. It is especially useful for call-to-action rows that may be used throughout the site but may require periodic updating. To save a global row, click the spanner on the row in page builder and choose 'save as'. Name the row and set global to 'yes'.
Use headings well
The headings are used to identify the page structure for SEO purposes as well as by screen readers. This means it is important to use this in a structured way throughout the site. Headings should be used in a hierarchical way. H1 is used for the overall page title, h2 is used for a main section title, h3 is used for a title within a h2 section, etc.
Image dimensions
It is best practice only to upload images that can be used anywhere on the website. This means that the minimum width of any uploaded image should be about 2000px. WordPress will then create the different sizes needed for different uses on the side including thumbnails. It is also best practice to try and use an appropriate sized image for how it will appear on screen, bearing in mind that very large images will slow down the load time of the website. As a guide, for full screen width images use the 2000px (full width) size, for a half page, use the 1000px width image for thumbnails, use the smaller sizes that suit what you're trying to achieve.
In Windows you can find the dimensions of an image before you upload it by right-clicking on the picture file and choosing "Properties" from the context menu. Now select the Details tab: the dimensions are listed near the top.
Image crops
Sometimes uploaded photos have different dimensions, to get a consistent shape on page you can set the image crop to the same value for all photos. We have mostly used the 'landscape' crop.
The content of the headers and footers (background images and menus) are all editable either from within the page settings or the menus section of the admin area.
The actual header and footer templates are quite involved and have been designed to work across different sized screens. They should be edited with care!