Customizing the homepage

Manage the looks of your homepage and make it unique to your community

Stijn Zwarts avatar
Written by Stijn Zwarts
Updated over a week ago

Admins can customize the homepage layout to make it unique to their community. The pagebuilder offers lots of possibilities to create a structure that is suitable for your needs.
On top of the homepage, there is always a banner. Another key element is the list of projects, which give a preview of all the active projects and folders. Beyond these two elements, you have complete freedom to structure components and information.
Maybe you want to promote something on top? Maybe you want to focus first on the main vision? Or maybe the proposals widget is key to you? You can decide how you want to communicate to participants.

To customize, click on "Pages & menu" in the admin panel. Then click on "Edit" next to "Home".

You now see the Pagebuilder for the Homepage. On the left you see all the available sections, layout elements and content elements, in the middle you see a preview of your current structure and on the right you'll see the settings of any selected element.

Changing the order that projects appear

The list of projects will always appear in the homepage and cannot be edited much, however you have the freedom to decided the order in which they appear to be able to highlight important projects at the top of the list.

To edit the order go to the list of "all" projects in your back end, you can arrange the order of the projects using the double arrows at the far left of the projects. When you click and hold these arrows you can drag them to the desired place. They will then appear in that order on the homepage project list.

Homepage banners

Click on the banner and on the right, you'll see all the options to configure it.

You can choose from; Full-width banner, two-row banner, and fixed-ratio banner. These templates are only visible on the homepage before logging in or registering.

When to use which banner?

  • The Full-width banner is best for a nice visual result but doesn't work well with text or crucial elements on the sides of an image. This banner is also reused in the narrow version of the banner shown to users that are logged in.

  • The Two-row banner is the one you need when you don't want the banner text or button to appear on top of the image. This banner is also reused in the narrow version of the banner shown to users that are logged in.

  • The Fixed-ratio is the best variant if you use text or don't want the banner to be cropped as much as the full-width banner on different devices. When using this banner, we show a solid coloured background based on the primary colour of your platform on top when users are signed in, instead of this banner image. This is to avoid weird looking results.

Banner texts for registered & non-registered users

Besides the homepage banner templates, you can also edit the text in the banner. There is a difference between the text that is shown on the homepage before and after logging or registering.

This text can be used to make clear what the platform is for and to give a call to action.

Button (Default, No, Custom) for registered & non-registered users

To enrich your banner you can also add a button to the banner. In the banner before logging in we have set up a button to register by default. If you want a different button you can select 'Custom' and fill in the text of the button and the link that it needs to direct to. You also have the option to disable the button.

For the banner after logging in you also have the option to add a button. This can be useful to direct users to a certain project you want to highlight or to a page with more information about the platform.

​Structure your content with columns, text & whitespace

By combining the layout elements you can create a compelling story to structure more complex content. Let's go over it.

2 column & 3 column give you the possibility to use columns that are responsive on mobile. The column elements can also be configured in different versions when you select them.
Whitespace is a basic helper element that adds whitespace above or below any element, whenever you need it.
Text elements can be used to put text on the canvas with basic formatting.

Button elements can be placed on locations where you want to create a clear call-to-action. Buttons have a configurable size and can be used to link to an internal or external page.

Embed elements are your go-to system to embed external components, like a specific map or video.
Accordion elements are popular as a way to bundle FAQs or other structured Question-Answer content. This comes in really handy at the bottom of a homepage.

Add smart sections wherever you want

In our library of elements, we also offer a Proposals element and an Events element. The proposals element is a specific call-to-action for platforms using our proposal feature. Whenever the proposals are more important than te current projects, you should add them high enough on the homepage for extra visibility. The upcoming and ongoing events can also be added anywhere you want, especially when some high-impact upcoming events are happening.

Images sizes and dimensions

There are multiple places where you can customize your platform with images (pictures or designed visuals or graphics) to make your platform more engaging and communicate the right look and feel, the hompage banner being one of them. In the following article you'll find the exact guidelines per image type to make sure your images are shown correctly and don't look blurry:

Did this answer your question?