I’d like to share a no-code approach for building a feed page. In this example, I’ll provide step-by-step instructions on creating a Blog feed page. This approach can be adapted for various purposes such as News, Products, and more.
Prerequisite: You’ll need a builder account space. If you don’t have one, you can choose to Sign Up.
1. Create a data model for blogs:
- Go to the Models tab.
- Click → “+ Create Model” → Choose “Data Model”.
- Fill in the name for your model and include fields like title, subtitle, image, etc. then save it.
2. Create content for the blog data model:
- Go to the Content tab.
- Click → “+ Create Entry” → Choose the data model from the list.
- Add a couple of entries and move to the next step.
3. Create a new page model and entry:
Create a new page model or use an existing one. Below, I’ve created a new page entry for an existing “Page” model.
We highly recommend integrating your application with Builder to live edit this page on your site (learn more here). If not, you can click “Use The Fallback Editor” to create your page in a preview experience.
You should be able see the below add block within the editor.
4. Design the layout:
- Now, let’s create a section, box grid, etc., visually to hold the blog data.
- For reference, you can watch the recording below. Feel free to design the layout as per your preferences.
5. Connect blog data to visual elements:
- Our final step is to connect the blog data to the visual elements.
- Please refer to the following recording to understand element data binding and how to connect your Blog data.
You can add more elements to the visual editor, bind them to the data as needed, and experiment with various designs.
Good to know:
6. View your feed: Now, whenever you create a new blog entry, it will automatically appear on your new feed page. You can get a preview of what it might look like by visiting the Final Preview here."
The “Connect data” feature offers some out-of-the-box options based on your plan, making it easy to pull in data from platforms like Contentful, Contentstack, etc.