Designing homepages

After creating a homepage, you can design its layout and structure using rows and columns, widgets, and a hero teaser to best serve your organization's use case. To edit a homepage, you need to either be its editor or have "Access moderator mode" permission. 

Haiilo provides multiple layout options for customizing your homepage.

  • Rows: A row is an element that covers the width of the homepage. There are 9 row options to choose from. The row you select determines the number of columns and layout of your homepage.
  • Columns: Every row has columns. Each row option has between 1 and 4 columns. The column width determines the size of widgets on your homepage.
  • Widgets: Into each column, you place widgets that contain content that users will see and interact with. For each widget, you can also decide if it should be shown on the homepage on mobile devices. This allows you to optimize homepages specifically for mobile use.

example of rows, columns and widgets on homepage.png

Design a homepage

  1. Go to the homepage. If the homepage isn't yet activated, it can be accessed using the homepage's URL.
  2. Select Enable Edit view from your user profile drop-down
  3. An empty homepage includes a default row, which covers the whole width of the homepage. Add a row by selecting the plus sign and remove a row by selecting the minus sign. When removing a row, all widgets inside the row are deleted.
  4. Select a plus sign at the bottom of a column to add a widget to it. Configure each widget according to its settings.
    add a row or widget to a homepage.png
  5. Continue adding and arranging widgets on the homepage. However, it's best to keep the homepage design clear and simple.
  6. You can also add a hero teaser to the top of your homepage.
  7. When you're done, select Save in the edit bar at the bottom of the platform

If you haven't already, remember to activate the homepage in the Administration.

Example homepage use cases

We'll help you find a homepage structure and layout that suits your needs. We've created a few typical use cases for this to give you a little inspiration along the way to creating your own Haiilo homepage. We explain our recommendations in these articles:

Was this article helpful?