CMS collections for dynamic content in No-Code - Mini Project: Build & Apply

CMS Collections for Dynamic Content

📖 Scenario: You are building a website for a local bookstore. You want to show a list of books that updates automatically when new books are added. To do this, you will use a CMS collection to manage the book data and display it dynamically on your site.

🎯 Goal: Create a CMS collection for books with fields for title, author, and genre. Then configure a dynamic list on your webpage that shows all books from the collection.

📋 What You'll Learn

Create a CMS collection named Books with fields Title, Author, and Genre

Add at least three book entries with exact titles and authors

Set up a dynamic list on the webpage that pulls data from the Books collection

Ensure the list displays the book title and author for each entry

💡 Why This Matters

🌍 Real World

CMS collections let website owners manage content easily without coding. This is useful for blogs, stores, portfolios, and more.

💼 Career

Understanding CMS collections and dynamic content is important for web designers, content managers, and no-code developers to build flexible, maintainable websites.

1

Create the CMS collection with book entries

Create a CMS collection called Books with fields Title, Author, and Genre. Add these three books exactly: "The Great Gatsby" by "F. Scott Fitzgerald", "1984" by "George Orwell", and "To Kill a Mockingbird" by "Harper Lee".

No-Code

# Create the CMS collection named Books with the specified fields and entries

Need a hint?

Use your CMS tool to create a new collection named Books. Add the fields Title, Author, and Genre. Then add the three books exactly as listed.

2

Configure the dynamic list container

Add a dynamic list container to your webpage and connect it to the Books CMS collection so it can display the book entries.

No-Code

CMS Collection: Books
Fields: Title (text), Author (text), Genre (text)
Entries:
- Title: The Great Gatsby, Author: F. Scott Fitzgerald, Genre: Fiction
- Title: 1984, Author: George Orwell, Genre: Dystopian
- Title: To Kill a Mockingbird, Author: Harper Lee, Genre: Classic
# Add a dynamic list container connected to the Books collection

Need a hint?

On your webpage editor, insert a dynamic list element and link it to the Books collection so it can show the book data.

3

Add fields to display in the dynamic list

Inside the dynamic list, add text elements that display the Title and Author fields from each book entry.

No-Code

CMS Collection: Books
Fields: Title (text), Author (text), Genre (text)
Entries:
- Title: The Great Gatsby, Author: F. Scott Fitzgerald, Genre: Fiction
- Title: 1984, Author: George Orwell, Genre: Dystopian
- Title: To Kill a Mockingbird, Author: Harper Lee, Genre: Classic
Dynamic List: Connected to Books collection
# Add text elements inside the dynamic list to show Title and Author

Need a hint?

Inside the dynamic list, add two text elements. Bind one to the Title field and the other to the Author field so each book's title and author show up.

4

Finalize and preview the dynamic book list

Complete the setup by ensuring the dynamic list updates automatically when new books are added to the Books collection. Preview the webpage to see the list of books with their titles and authors.

No-Code

CMS Collection: Books
Fields: Title (text), Author (text), Genre (text)
Entries:
- Title: The Great Gatsby, Author: F. Scott Fitzgerald, Genre: Fiction
- Title: 1984, Author: George Orwell, Genre: Dystopian
- Title: To Kill a Mockingbird, Author: Harper Lee, Genre: Classic
Dynamic List: Connected to Books collection
Dynamic List Items:
- Text: Bind to Title field
- Text: Bind to Author field
# Finalize the dynamic list settings and preview the webpage

Need a hint?

Make sure your dynamic list is set to update automatically when the collection changes. Use the preview mode to check that the book titles and authors appear correctly.