Step #2
Implement in Webflow
Apply attributes to elements on the page
Below is a list of elements and options that are used to create this Attributes functionality. Click any of them to see more details.
LIST
I want to use this
Collection List or Collection List Wrapper
See how it works
as the source of my Previous and Next item
Add this attribute
Description
Name
fs-cmsprevnext-element
Value
list
This is the CMS Collection List that will be used to generate the "Previous" and "Next" content.
*IMPORTANT: There must be a url link to the Template page of each item. See screenshot of setup below.
Based on this url link to the Template page, Attributes will look in this Collection List for the current item. This is the CMS Template page the user is on. Based on the current item, Attributes will find the Previous and Next item.
The Previous item in the list will be placed in the previous element. The Next item will be placed in the next element.
This list can be hidden on the page with display: none. It is only used to generate the content for the Previous and Next post.
*IMPORTANT: There must be a url link to the Template page of each item. See screenshot of setup below.
Based on this url link to the Template page, Attributes will look in this Collection List for the current item. This is the CMS Template page the user is on. Based on the current item, Attributes will find the Previous and Next item.
The Previous item in the list will be placed in the previous element. The Next item will be placed in the next element.
This list can be hidden on the page with display: none. It is only used to generate the content for the Previous and Next post.
Add this attribute
Description
Name
fs-cmsprevnext-element
Value
previous
This Div Block will be the parent wrapper of the "Previous" CMS Item in the list.
See definition of "Next" and "Previous" in the list attribute description.
See definition of "Next" and "Previous" in the list attribute description.
Add this attribute
Description
Name
fs-cmsprevnext-element
Value
next
This Div Block will be the parent wrapper of the "Next" CMS Item in the list.
See definition of "Next" and "Previous" in the list attribute description.
See definition of "Next" and "Previous" in the list attribute description.
PREVIOUS EMPTY
I want this
Div Block, Text Element, Button, Link Block or Text Link
See how it works
to be the empty state of the Previous item
Add this attribute
Description
Name
fs-cmsprevnext-element
Value
previous-empty
Optional element that allows a custom 'empty' message when there is no "Previous" item.
If not set, nothing will display when there is no "Previous" item.
If not set, nothing will display when there is no "Previous" item.
NEXT EMPTY
I want this
Div Block, Text Element, Button, Link Block or Text Link
See how it works
to be the empty state of the Next item
Add this attribute
Description
Name
fs-cmsprevnext-element
Value
next-empty
Optional element that allows a custom 'empty' message when there is no "Next" item.
If not set, nothing will display when there is no "Next" item.
If not set, nothing will display when there is no "Next" item.
Working examples
See this solution working live in this Webflow project.
Example
Previous Next items on CMS Template page
Combinations using CMS Previous Next:
You can combine this Attribute with others to create more complex solutions.
Frequently Asked Questions
Everything you need to know about this attributes solution.
No FAQ items found yet. Join Finsweet Community on Slack if you have any question related to this solution.
Developer documentation
Check the dev documentation
Next time implement inside Webflow
Use Finsweet Extension
