There are lots of ways to customize the look and layout of your pages to make them more visually appealing and engaging for participants. Here are tips which you can implement when building your project pages.
1. Start by selecting a color scheme and fonts
Go to Settings > Style > Create new or select one of the template styles. You can add your own fonts or select any of the open source ones. You can select a background color for the page and accent colors for features like link buttons. See this article for instructions.
2. Create an eye-catching layout with the Columns element
Create a visually appealing layout for your landing page is to use the Columns element. This feature allows you to arrange text, images, and other elements side-by-side, creating a professional and easy-to-read layout that avoids large blocks of text.
For example, create a grid by adding two columns elements to the page. Choose 'Docked' as the placement and align one to the right and the other to the left.
The Columns element also allows you to feature an image or graphic on the background and layer text and other features (e.g. images, timeline...) on top of it. To do this, choose 'Floating' as the column placement.
3. Use graphics or photographs as the background or as hero images
There's different ways to add visuals to your project page:
- Image element can be used for adding a photo or graphic in the middle of other content, such as paragraphs of text.
- Page-wide image (hero image) is a banner-type image, spreading across the entire width of the page.
- Columns element, see #2 for ideas on how to use it.
4. Add your brand identity
Maintain a consistent look and feel by incorporating your organization’s logos and visuals into the pages. This helps build familiarity with your audience.
You can add logos as images and visuals as background images..
...Add a logo at the top of the page within the Pages menu-element...
... Or use your colours and labels that represent your brand style using the Spacer and Timeline -elements:
In this video we show how the timeline element can be formed on the page in two ways:
5. Keep it clean and spacious
Give your page a clean, professional look by using the Spacer element. It's a simple tool that adds empty vertical space between elements, making your page easier to read and feel less cluttered.
6. Add a little bit of color with the Spacer
The same Spacer element that you can use to add space between elements can be used to add color accents like lines to the pages.
7. Create paths that viewer can follow from landing page to access more information
Use elements like the Carousel and Grid to guide users through the project and present information in a structured way. This approach breaks down complex information into digestible sections, making it easier for people to navigate the page without feeling overwhelmed.
8. Our final tip: Preview your work often!
Previewing your pages is the best way to ensure they look exactly as you intended. While creating your pages, remember to check the preview frequently to see how things appear to the viewer.
Does this amount of space work here? How well does the text show up to the reader? Does it make sense to put this image here?
Checking often allows you to make quick edits and ensures your final page is clean, professional, and easy to read.