This article expands on link assets, providing examples of block links and explaining how to set them up.
Topics covered here:
What are block links?
Block links are simply link assets displayed as a row of blocks or tiles. They can provide an engaging and visually appealing way of giving users access to your content - whether they navigate to curated collections, individual assets, or external URLs.
The screenshot below shows block links navigating to specific movie genres within a Responsive Web app. A similar scenario for sports would be to create links to the different sports that make up your content - for example, football, tennis, cricket, etc.
How do I create block links?
There are four main steps to setting up block links in Presentation Manager:
- Creating the link, which includes naming it and setting the link destination
- Grouping the links into a list so they can be displayed in a row
- Configuring the link location - i.e., setting up the page that users will access the links from
- Configuring the link destination - i.e., the location that users are taken to when they click on a link, from where they can access the linked content
How to link to a page or a list
The destination you set: Page, Item, List, or External URL, determines how your link behaves.
To find out how to set up block links like the ones above that navigate to a page or a list, select a destination option below:
1. Create the link and set the destination page
Start by creating the links that you want to display as blocks. Here, using the Action block link (as seen above) as an example, we've created a link and set the destination as the Movies {genre} page. The link's title is the genre Action. Add the images you want to display on the links.
Do this for each link you want to display - setting the relevant page template (e.g., Movies {genre}) as the destination, and the title as the required genre (as in our example): Animated, Adventure, Comedy, and so on.
2. Group the links into a list
Next, group your links into a list. Create a new list, then add each of the links you created in the step above.
We've set up a list called Link List Example. Each link it contains represents a movie genre block link.
3. Configure the link location (link from)
You now need to specify where the block links will be displayed.
Select the page you want your block links to appear on and add the relevant row type. In this example, we're adding them to our homepage using a B1 block row. We've selected our list Link List Example, which contains all the genres we want. You can see it previewed in the page body.
Once published, the links will appear in a block row on the app's homepage.
4. Configure the link destination page (link to)
When a user selects a genre block link in their app, they're redirected to the Movies {genre} page for the specified genre.
The image below shows the Movies {genre} page set up with a Hero Text row and a Continuous Scroll CS5 row configured to display the list Movies - {genre}.
Each block link will filter on a specific genre, e.g., the Action link filters on Action movies, and the Comedy link filters on Comedy movies. The filter process is based on the genre specified for the movie in the asset metadata.
The images below are examples of what your end-users would see after selecting Action or Comedy genre block links in a Responsive Web app. The linked Movies {genre} page is displayed, showing movies in the relevant genre. Note that the page URL changes depending on the genre selected.
1. Create the link and set the destination list
To set up block links that navigate to a specific list, we'll create a link entitled Action (adding a suitable image) and set the Destination as List. We'll then select the list we want to link to. In this instance, we've linked to a list called Action with list ID 4930. This list consists of movie assets with a genre of action set in the metadata.
We'll do the same for all the other genres we want to include as block links, selecting a relevant list to link to in each case.
2. Group the links into a list
Next, we'll group the links we've created into a list. We'll create a new list and add our genre link assets to it.
Each link shown below represents a block genre link.
3. Configure the link location (link from)
You'll need to specify where you want your block links to appear. Select a page to display the links and add the relevant row type.
In this example, we're adding the B1 block row to our homepage. The list selected is our Link List Example, which contains all the genres we want to display. The preview appears in the page body.
4. Configure the link destination (link to)
On selecting a block genre link, your end-users are redirected to the relevant List page. Remember that you've linked each block link to a pre-defined list, e.g., the Action link is set to display the Action list with ID 4930.
Below is the Action list with ID 4930.
We've set up the List page (below) with a Hero Text row (LH1) and a Continuous Scroll CS5 row.
Finally, this is an example of what your end-users will see on selecting a block genre link redirecting to the List page, which displays the Action list with ID 4930. The list ID displays in the page URL and changes upon selection.
Need more? Discover how to link to a list from a menu item.