Quick Design Tips

Here are some quick design tips to add a little extra polish to your pages!

Learn more about:

• Padding & Spacing
• Images
• Content Width

Padding & Spacing

Page content looks best when it's clean, consistent, and easy to understand. Adding space between elements on a page is a simple way to make your content easy to follow.

Consider the differences between these two versions of the same page.

The page below has 40px top and bottom padding added to the content rows, which gives the content room to breathe, while the distance it creates helps people to visually group related content.

Consistency and balance are also factors in creating effective page layouts. Adding the same value for the top and bottom padding means the content stays balanced in the middle of the row – which is more pleasing to the eye – and using the same amount of space throughout all the sections helps to maintain focus on the content.

When you create a new section or use one of our pre-built Page Templates or Section Templates within Visual Builder, they already come with our recommended padding values. However, if you need to adjust the padding we've included a quick guide below, and we also have a more detailed article on this in Visual Builder - Sections, Columns and Blocks.

Adjusting Padding

You can adjust Padding in a Section, Column, or individual Blocks. To adjust Padding values within the Visual Builder:

1. Click the edit icon.
2. Click the 'Layout' tab.
3. Expand the Section/Column/Block Spacing bar.
4. Type a number into the Top/Bottom and Left/Right fields.

You can unlink the values (by clicking the link icon) if you need them to be different from each other. You can also select EM or % for the padding unit if needed.

Images

Try breaking up large blocks of text up by using images. By using our pre-built Section Templates you can quickly add and then customise an image + text section.

Image Optimisation

Using an image with an unsuitable resolution is one of the most common errors made when adding image content to a page resulting in fuzzy-looking images if the image is too small, or slow page load speeds if the image is too big.

Here are some quick tips to help you optimise images before uploading them to the platform:

• JPG/JPEG is the recommended file format for images as it's compressed but still good quality for the web.
• The images you upload should be close to the size it will display at on the site. We've got our most common sizes listed on our Sizing Cheat Sheet.
• Use online tools such as Squoosh, or photo editors Photopea and Adobe Photoshop to resize and compress images before adding to the platform.

Content Width

The optimal line length for your body text is considered to be 50-75 characters per line, including spaces. So what are the downsides of violating this range?

• Too wide – if a line of text is too long the reader’s eyes will have a hard time focusing on the text. This is because the line length makes it difficult to gauge where the line starts and ends. Furthermore, it can be difficult to continue onto the correct line in large blocks of text.
• Too narrow – if a line is too short the eye will have to travel back too often, breaking the reader’s rhythm. Too short lines also tend to stress readers, making them begin on the next line before finishing the current one (hence skipping potentially important words).

We recommend either setting the maximum width you want content to be from within Visual Builder (see below) or break the text into multiple columns.

Setting Content Width

You can adjust Content Width in a Section or Column. To adjust content maximum widths within a column in Visual Builder:

1. Click the edit icon on the column.
2. Click the 'Layout' tab.
3. Under 'Content Max Width' either use the slider (max. 1000px) or type in a value.
4. Make sure to also check Column Alignment settings to ensure the content aligns as intended.

To adjust content maximum widths within a Section in Visual Builder:

1. Click the edit icon on the Section.
2. Click the 'Layout' tab.
3. Set Section Width to 'Custom Width'.
4. Under 'Section Max Width' either use the slider or type in a value.