Click on an item in the list and see the individual page for that item
We are going to cover #1 – Get API data and list it in Webflow in this blog.
Step by step tutorial
In this example, we’ll send a list of restaurants to Webflow from an API endpoint hosted by Xano (No code backend). So, for each restaurant, we’ll create a card that displays the name and description and when you click on the card, it takes you to a page with more detail.
STEP 1 In Webflow, create a page and select an Element (like a Div) that you would like to have your API endpoint results listed into. So, in this example, we’ll create a Grid that the restaurant cards will live in.
STEP 3 Inside the Cards-Container Grid, we’ll create another Div and add a class to it called Sample Card. You’ll also want to add the IDsamplestyle to it. This will be the example card that we’ll use to load the API endpoint results into.
STEP 4 In the Sample CardDiv, add an Image, Heading (H3) and Paragraph element (P). You can style it the way you want.
STEP 6 Click on your Page settings and scroll to the Custom code section Before </body> tag.
NOTE: You’ll need a paid Webflow account to enable this section.
Designing websites as we know it today has come a long way--especially when we use the latest tools. In 1991, when we were first introduced to web pages, there was nothing more than a plain black background with monochrome pixels…
In 2021, “no code backend development platforms” have become something of a buzzword. These kinds of platforms offer an exciting promise. What if you could develop applications to streamline company productivity without having to write a single line of code?…
While low code / no code development platforms have been around for years, it took a long time for many developers to warm up to them. There was a lot of doubt that these sorts of platforms would be powerful…