In this tutorial, we’ll explain how to create static collection pages, but first, let’s explain what a collection page is.
What is a Collection Page?
Very often, you have a list of items you want to display in a list on one page, for example real estate listings, job listings, available rental cars.
You want users to be able to click on an item in the list and redirect them to a page with more info on that specific item.
That’s a Collection Page, i.e. a page with the information from an individual item in a collection.
What is a Static Collection Page?
A Static Collection Page is a Collection Page with a static URL, i.e. a URL that doesn’t change.
Static collection pages are created every time you sync a Static Collection in WeWeb. This allows WeWeb to pre-render these pages when a user – or a search engine robot– visits it.
This is important because it means Static Collection Pages rank well in SEO.
What are the Pre-Requisites to Create a Static Collection Page?
1- You need to have setup a Static Collection
If you’re working with a dynamic or cached collection, you won’t be able to create a static collection page in WeWeb.
2- You need to have bound your Static Collection to a Collection List on the page where you want to display all the items from your collection
How to Create a Static Collection Page
Once you’ve created a Static Collection and bound that collection to a Collection List on a page, you’ll want to create a Static Collection Page.
Remember, you’ll only be able to bind this Static Collection Page to a Static Collection. If you’re working with Dynamic or Cached Collections, these will not appear in the “Select source collection” popup.
How to Display Data from a Collection Item on a Collection Page
Once you’re on your Collection Page, make sure that Collection Page includes the elements you need to bind the fields you want to display.
Sections
In the example below, we have 3 sections:
- Simple navigation, i.e. our navbar
- Listing, i.e. where we include the info from our listing
- Footer - Hello!, i.e. our footer
Note that in WeWeb, you add elements in sections. If you don’t have sections, you can’t add elements. This is how you would do in web development: add a section and nest elements inside that section.
In WeWeb, you can identify sections in the navigator and on the page with this little icon:
Elements
In the Listing section, we added 3 elements:
- a heading, to display the name of the listing
- an image, to display a photo of the listing
- a rich text element, to display more information about the listing
Bind Data to Elements to Display the Data from your Static Collection
To display data from your Collection on a WeWeb Collection Page, you need to bind Collection fields to Elements on the page.
In the example below, we bound the image element in WeWeb to an image field in Airtable:
You can do the same with the heading and rich text elements except you would bind those to text and rich text fields in Airtable.
What’s important, whether you’re using Airtable or another backend like Xano, is that the field type in WeWeb should match the field type in your backend.
In WeWeb, you can identify “bindable” fields in the in the right sidebar with this little icon:
When you see a purple plug in the navigator or on the page or a purple dot in the right sidebar, that means the element or field is bound to something:
Make sure everything is working well for each individual item
On the Collection Page, you can view how it looks for each item in your collection by clicking on the dropdown menu in the top navbar:
Now that you have a nice Collection Page for each individual item, you’ll want to make sure users can access it when they click on an item on your page with the Collection List.
How to Redirect Users to the Individual Collection Item
Back on our “Properties for sale” page with our Collection List listing all real estate listings, we’re going to link the repeated Flexbox element to our “Real estate listing” Collection Page.
Note that we chose to link the entire flexbox but we could have decided to add the link to the “View listings” text instead of the entire flexbox.
That’s really up to you to decide if you’d rather your user have to click on a specific text element or on the entire flexbox to access the page 
