Vertical Content Feed
For the fundamental information about displaying content on your platform, please read the guide: Content Row
This guide below will only explain the parts/sections that are exclusively relevant for vertical content feeds.
In contrast to the Content Row component, which displays live/video content in a single horizontal row, the Vertical Content Feed component allows you to display livestreams/videos in either of these two options:
Grid layout
Vertical row layout (with one livestream/video per row)
The grid layout is useful if you want to display a large number of livestreams/videos together on a page, whilst the vertical row layout is useful if you want to give each livestream/video more space on the page, to bring attention to each individual piece of content as the viewer scrolls down the page.
Scroll to** "Feed display type"**, were you can select between row or grid.
Scroll to the "Feeds" section and then click on the button to manage feeds. You can select a single feed, or you can select multiple different feeds (see the help guide at Content Row for more information about managing feeds.), which will then appear to the viewer as different feed options, either in a dropdown menu or with tabs.
Scroll to the "Feed selector type", where you can choose between tabs or dropdown. If you choose the dropdown option, then we suggest you use the default styling for this. If you choose the tabs option, then you can edit the appearance of these tabs by using the styling for "Feed selector classes", "Feed selector active classes" and "Feed selector inactive classes".
If you only have a single feed selected, the name that you have given to this feed in the "Manage Feeds" section will behave as the title for your vertical content feed. If you have multiple feeds selected, then you might want to add a main title, which you can do by activating the "Show title" toggle, adding the text and using the "Title styling".
By default, the vertical content feed will have a feed limit of 20, which means that 20 livestreams/videos are displayed at any time on the page, and the other livestreams/videos (if there are more than this limit) are accessed using the navigation buttons below the content. You can edit the number of this feed limit, and if you have multiple feeds you can also customize it on a feed-by-feed basis in the "Manage Feeds" section.
There are a number of different components for which you can change the styling when using the vertical content feed. These are all found under the "Settings" section. Some of them are only applied when using the row layout or the grid layout, which are noted in the name of the styling (e.g. Row title styling).
As mentioned above, when the number of livestreams exceeds the feed limit, the other livestreams/videos are accessed using the navigation buttons below the content. The styling for this can be changed in the "Pagination" section.
Press "Save section" at the bottom left to save your changes and get a preview to the right.
If you are happy with your changes press "Publish" to make them live on the platform. You could also press "Discard" to delete all your changes after last time you published.
This guide below will only explain the parts/sections that are exclusively relevant for vertical content feeds.
In contrast to the Content Row component, which displays live/video content in a single horizontal row, the Vertical Content Feed component allows you to display livestreams/videos in either of these two options:
Grid layout
Vertical row layout (with one livestream/video per row)
The grid layout is useful if you want to display a large number of livestreams/videos together on a page, whilst the vertical row layout is useful if you want to give each livestream/video more space on the page, to bring attention to each individual piece of content as the viewer scrolls down the page.
Selecting the layout
Scroll to** "Feed display type"**, were you can select between row or grid.
Choosing which content to display
Scroll to the "Feeds" section and then click on the button to manage feeds. You can select a single feed, or you can select multiple different feeds (see the help guide at Content Row for more information about managing feeds.), which will then appear to the viewer as different feed options, either in a dropdown menu or with tabs.
Choosing how to display the different feeds
Scroll to the "Feed selector type", where you can choose between tabs or dropdown. If you choose the dropdown option, then we suggest you use the default styling for this. If you choose the tabs option, then you can edit the appearance of these tabs by using the styling for "Feed selector classes", "Feed selector active classes" and "Feed selector inactive classes".
Adding a title for the vertical content feed
If you only have a single feed selected, the name that you have given to this feed in the "Manage Feeds" section will behave as the title for your vertical content feed. If you have multiple feeds selected, then you might want to add a main title, which you can do by activating the "Show title" toggle, adding the text and using the "Title styling".
Changing how many livestreams/videos are displayed
By default, the vertical content feed will have a feed limit of 20, which means that 20 livestreams/videos are displayed at any time on the page, and the other livestreams/videos (if there are more than this limit) are accessed using the navigation buttons below the content. You can edit the number of this feed limit, and if you have multiple feeds you can also customize it on a feed-by-feed basis in the "Manage Feeds" section.
General styling of the rows/grid
There are a number of different components for which you can change the styling when using the vertical content feed. These are all found under the "Settings" section. Some of them are only applied when using the row layout or the grid layout, which are noted in the name of the styling (e.g. Row title styling).
Styling of the navigation buttons
As mentioned above, when the number of livestreams exceeds the feed limit, the other livestreams/videos are accessed using the navigation buttons below the content. The styling for this can be changed in the "Pagination" section.
Save and publish
Press "Save section" at the bottom left to save your changes and get a preview to the right.
If you are happy with your changes press "Publish" to make them live on the platform. You could also press "Discard" to delete all your changes after last time you published.
Updated on: 20/11/2024
Thank you!