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
Click the palette button (Style template) at the top right of the editor and pick one of the ready-made templates, or choose Manage style templates and Create new to set your own fonts, page background color, accent colors and corner roundness. You can use your own fonts or pick an open source one. The Container width button next to it makes the page narrower (easier to read) or wider (more room for images). 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.
To split a long text into newspaper-style columns, use the Text columns setting of the Text element. 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 in the navigation menu: click the # button at the top right of the editor and upload it as the Logo image...
... 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 Section markers (a menu of sections), the Carousel and the 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.