Design the look and feel of a Portal

You can design the header of your Portal by clicking inside the header widget. There you can:

• Add a logo to the header in two ways:
  

  • Upload an asset from your local system.

  • Select an asset from a Library connected to your Portal or from the assets uploaded to the design theme.

  The following image formats are supported: .jpg, .jpeg, .gif, .png, .eps, .svg, .tif, .tiff, .webp

• Define the primary and contrast colours of the background.
  

  If you added a design theme to your Portal these colours will be set by default to the primary and contrast colours defined there.

• Customise the background of the header by either:

  • Setting a base colour for the header background.
    

  • Adding an image as header background by:
    

    • Uploading an asset from your local system.

    • Selecting an asset from a Library connected to your Portal or from the assets uploaded to the design theme.

    The following image formats are supported: .jpg, .jpeg, .gif, .png, .eps, .svg, .tif, .tiff, .webp

• You can also make the header background transparent by clicking on the "None" option. This means the header has no background of its own and the general Portal background will show.

Before you can publish your Portal for the first time you need to define the layout in sections that will be the frame upon which you will add your widgets.

Create the first section

When you enter the Portal designer for the first time you will be presented with a blank slate in the Portal preview and will be prompted to add you first section.

To add your first section:

1. Click on one of the layout alternatives.

2. You will be presented with your first section.
   

3. You can click on "Add widget" to select the type of widget you would like to add to your section.
   

   For more information on the widget types available for Portals, see Customise your Portal functions with widgets.

Section the Portal

Portals can be sectioned to fully fit your needs.

• Click the "Add section" buttons to create new sections above or below your first section.

• Click the "Change position" arrows to move the section up or down among other sections.

• Click "Delete section" to delete the section you do not need.

  If you delete a section by accident, you can revert the change with the undo function.

Configure individual sections

You can configure each individual section of a Portal by clicking on "Edit Section" and using the settings shown on the design panel.

Customise the background of the section by:

• Setting a base colour for the section background.
  

• Adding an image as background via:
  

  • Uploading an asset from your local system.

  • Selecting an asset from a Library connected to your Portal through the design theme.

  The following image formats are supported: .jpg, .jpeg, .gif, .png, .eps, .svg, .tif, .tiff, .webp

• You can also make the section background transparent by clicking on the "None" option. This means the section has no background of its own and the general Portal background will show.

Edit spacing for section contents

You can adjust the spacing of elements inside the section:

• Padding: Represents the spacing between the border of the section and the widgets inside.
  

• Gap: Represents spacing between the widgets inside the section.
  

 

Edit column content alignment

Each widget inside a section is housed in a column. You can edit the horizontal and vertical alignment of content inside those columns here.

Content width

You have the option to choose between boxed and full-width layouts for each section of your page. This “content width” setting gives you more control over how your content displays, especially on mobile devices:

• Boxed (fixed) width: Select this to prevent content from stretching too wide, enhancing readability by keeping text and elements within a comfortable viewing range. This is especially beneficial on smaller mobile screens.

• Full width: With this option you can set the exact maximum width in pixels your content is going to take on a screen. Choose this to fully utilise available screen space, making elements like images, buttons, and text larger and more prominent.  This is ideal for touch-based interactions, as larger elements are easier to tap on mobile devices but also good for larger screens since your content will not be stretched out too much.

You are able to create Portals that have multiple pages or add extra pages to already existing Portals. All pages can be configured individually in detail.

How to add Portal pages

1. Click the "Page settings" icon on the Portal header in the Portal preview. This will open the Pages panel.
   

2.  Click the "Add a page" icon on the design panel to add a page to your Portal.
   

How to manage Portal pages

The created pages will be shown in a list of collapsible menus on the design panel.

You will be able to manage the pages in the following ways:

• Expand and collapse them individually using the and buttons.

• Expand and collapse all menus with "expand all" and "collapse all".

• Change the order of the pages with the arrow buttons.

• "Copy" and/or "Delete" the pages using the three-dot button.

• Open the page in the Portal preview using the "Open page" button.

The collapsible page menus contain the base settings for the pages.

You will be able to configure the following in the expanded page menu:

• Set the "Page name"  in all languages available for your Portal.

• Set the "Browser tab title" in all languages available for your Portal.

• Define a custom "Page slug" for the page URL that will be displayed as a unique identifier for the Portal page at the end of the URL.
  

  Defining a slug can make your URL more userfriendly, because it can provide a short description on what your page is about. This setting is optional, because if you do not define a slug, an ID will be automatically generated instead that will be used as slug.

 

• Set the "Page background" of the page in one of the following ways:

• If no background is chosen, then the one configured on general settings will be applied..
  

  You should only consider updating the background of a specific page if you want to have a different background for it compared to what you have for your whole Portal.

• Set a single colour.

• Add your own image.
  

  The following image formats are supported:

  • ".jpg"

  • ".jpeg"

  • ".gif"

  • ".png"

  • ".eps"

  • ".svg"

  • ".tif"

  • ".tiff"

  • ".webp"

How to configure the fallback page

You can also find a menu for the "Fallback page" for your Portal on the design panel. This page will be triggered every time a page is not available for some reason, and will have a button that redirects users to the main page of your Portal when clicked.

You can customise the background of the fallback page as you do with any page. And if you open the fallback page for preview and click into it, you will see the detailed settings on the design panel:

You can make the following changes here:

• If no background is chosen, then the one configured on general settings panel will be applied.

• Set the primary and contrast colour for the button.

• Set an image for the Fallback page.

You can change the Portal background in two ways:

• You can use a single colour:

1. Click on the Portal you want to edit. The "General settings" panel will be displayed by default in the design panel.

2. In the section "Portal Background", switch to the option "Colour" in the toggle button.

3. Click the colour-switch below to access the colour picker.
   

4. (Optional) Click the row where "RGB" is displayed to witch between the available colour.

• You can use one of the provided background images:

1.  Click on the Portal you want to edit. The "General settings" panel will be displayed by default.

2. Choose "Image" in the toggle button under the "Background" section.

3. Upload an image from your local system or select one from a Library attached to the Portal.