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. 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.
Forbes recently said the “API economy” is “much more than a buzz phrase.” The benefits of application programming interface (API) integration are seemingly limitless, and it’s no longer just web-based companies that are embracing the digital transformation. API enables various…
Building apps is a complicated process that requires complex coding for even basic functions. Whether you’re hiring outside developers or working with your own team, app-building and maintenance can be both costly and incredibly time-consuming. IT departments receive many requests…
Backend developers write code that powers a website or application. Any time you input a command into a website or app’s frontend, the server and database must process that command. Backend developers are responsible for this server-side logic, ensuring a…