Skip to main content

How to create advanced custom pages

Published on: 23/08/2023 Last update: 12/09/2023 Document

How to use building blocks to create advanced custom pages

Within your Collection/Solution, click the plus (+) icon at the top right side of the page and select “Add custom page”.

Add a custom page

Add your “Title” and then click on “Add layout”.

After you select your layout, locate the + icon inside the layout body.

How to open the components list

Click on it and the list of the available components will appear. You can choose to add text, images and other unique components that work like building blocks in order to help you structure your custom page to your needs.

List of available components

 

In the below table you can find a description and an example screenshot of each available component.

Component

Description

Accordion

You can create an accordion by filling the “Item label” and body inside the accordion feature. Click on the “Add Accordion Item” to add more components to your accordion.

Accordion creation

An example of an accordion with three components is shown in the screenshot below:

Accordion example

Call to Action

The Call to Action feature allows you to create a clickable button. Just add your landing page link in the URL field and the text for the button in the Link text field.

Call to action example

Carousel

The carousel component lets you display a series of content items that rotate/slide through. 

 

Add image carousel

Content Listing

This component allows you to create sections in custom pages that list the provided content. For example, you can create a content listing that shows only the Event items in your Collection/Solution. 
content listing

Entity reference

An entity reference allows you to add a reference to a content item on Joinup in your custom page. This will add the referenced content item's image, title and link. See a screenshot of an entity reference result below:

Entity reference example

Github feed

Add your Github feed to the custom page to show an overview of the latest activity from your GitHub's repository 

Add github feed

Heading

Add your heading in the Heading text field and select the size of your heading by expanding the Heading level drop-down.

Create a heading

Move your heading block above another block (i.e. a text block) to give it a title.

Heading example

Image

To add an image in your custom page select the image component. Locate the "Choose File" button, click on it, find your image and wait for it to upload. When the image is successfully uploaded, add a text describing it in the "Alternative text" field. The "Visibility" options allow for further customisation of the page, depending on your needs.

Create a new image

By adding images, you can enrich your page and make content more attractive to users.

Image example

Map

By selecting the Map component, a single field will appear in which you need to add a JSON formatted code. If you do not have a JSON code ready and do not know how to create one then click the Basic Map (BMAP) Wizzard link.

Map creation

You will be directed to a webpage, dedicated on helping users create interactive maps. Here you can find a detailed how-to, that explains the BMA wizard tool.

In a few easy steps you can create and customise your map, adding it to your custom Joinup page.

Map example

Poll

You can create Polls for your users to vote and express their opinion. 

polling feature

Quote

The Quote component allows you to make text stand out. Just add the text you want to highlight (i.e. a quote) in the Quote field.

Create a quote and quote example

Testimony

The testimony component allows you to share a person’s testimony, along with their name, image and biography. You can also add the testimony’s source.

Create a Testimony

See below an example of how a testimony looks like:

Testimony example

Text

The text component allows you to add text on your page. While creating text, there are a few formatting options available. You can gain more information on text formats by clicking on the “About text formats” link, below the text field.

Text creation
Keep in mind that the Heading styles are not part anymore of the Text component, but are now a separate component. Refer back to the Heading component for more information.

In the example below, we added text under the images we created before:

Text example

Video

The video component allows you to embed a video in your custom page by inserting its URL.  

Adding a video to a custom page

The video thumbnail will appear directly on your page.

Video example

You can customise your page using the available features and components mentioned above. As good a practice, it is preferable to add Logo/image to your custom page, which will displayed in other areas of Joinup (i.e. in search results, on the Home Page etc.).

Add a Logo and file attachment

TIP: Do not directly publish your page. Save it as draft to see the overall result and make any changes needed before you go live with it.

Categorisation

Type of document
Document