CMS

CMS Pages & Dynamic Content in Framer (CMS Lesson 3)

CMS Pages & Dynamic Content in Framer (CMS Lesson 3)

CMS Pages & Dynamic Content in Framer (CMS Lesson 3)

Justin

·

8:31

·

53K views

·

About this lesson

In this video, we’ll dive into how CMS Detail Pages work in Framer and how to connect them to your collection items using dynamic content. You’ll learn how to design a single layout that automatically generates pages for every item in your CMS—saving you time and keeping your designs consistent. We’ll cover how to use variables, connect fields manually, and even handle conditional visibility to make your pages feel intentional and flexible. Whether you're building a blog, portfolio, or product catalog, this is a must-know feature for scalable web design.

https://www.youtube.com/watch?v=tnEJHVkXjjs&t=0s Introduction

https://www.youtube.com/watch?v=tnEJHVkXjjs&t=32s What are CMS Pages?

https://www.youtube.com/watch?v=tnEJHVkXjjs&t=129s Adding a CMS Page to your site

https://www.youtube.com/watch?v=tnEJHVkXjjs&t=216s Adding Content to a CMS Page

https://www.youtube.com/watch?v=tnEJHVkXjjs&t=291s Connecting Elements to Fields Using Variables

https://www.youtube.com/watch?v=tnEJHVkXjjs&t=408s Conditional Visibility

https://www.youtube.com/watch?v=tnEJHVkXjjs&t=477s Wrap Up

Check out the full course here: https://www.framer.com/academy/courses/getting-started-with-framer-cms

🌞 Start for free: https://framer.link/yt

📚 Learn more at: https://framer.link/yt-academy

💎 Join the Community: https://framer.link/yt-community

🎉 Follow on X: https://framer.link/yt-x

0:00Now that we built a collection and added0:02our items, it's time to take the next0:04step, turning that content into actual0:07pages on our site. In this lesson, we're0:09going to walk through how to use the0:11items in a collection to generate0:13dynamic pages automatically and how to0:16design a simple layout that updates0:18based on the content inside each item.0:21By the end, you'll know how to create0:23fully dynamic CMS pages that look great0:26and scale effortlessly.0:33In Framer, CMS detail pages combine a0:36single reusable layout with the content0:38of a CMS collection, automatically0:40generating individual pages for each0:43item, populated with the right content.0:46In other words, you design one flexible0:48template and Framer uses it to generate0:51a separate page for every item in the0:53collection. Each one automatically0:55pulling in the unique content from the0:57CMS. You're not going to be building a1:00dozen static pages, just one layout that1:02adapts. It's also worth noting that CMS1:05detail pages are entirely optional and1:08only generated if we add them to our1:10site, which we'll go over in just a bit.1:12Now, let's take a look at the items in1:14my articles collection alongside its1:16detail page. You'll see that the content1:19from my selection colors item is being1:21displayed automatically on the page. At1:24the top, there's a drop- down menu.1:26Clicking this reveals all the other1:28items in the collection, each listed by1:31their unique slug. This is where the1:34slug field comes into play. As I1:36mentioned in the last lesson, Framer1:38automatically assigns a slug to every1:41item in a collection. That slug becomes1:44part of the URL and allows Framer to1:46dynamically route each CMS page to the1:49correct content. So, whenever you add a1:52new item, it instantly gets its own1:54page. No extra setup needed. It's a1:57powerful way to scale your site without1:59having to manually build every page2:02yourself. Now that we've covered how CMS2:05pages are generated, let's walk through2:07how to add one to your site. To do that,2:10we'll head to the canvas of the project2:12and click on the pages tab in the left2:14panel. Then click the plus icon to add a2:18new page. From the options that appear,2:21select new CMS page. Next, we want to2:24choose the collection we want the page2:26to pull from. I'll choose my articles2:28collection. And then you'll be asked to2:31pick between an index page or a detail2:34page. An index page displays a list of2:37items from your collection like blog2:40post previews or product cards. While a2:43detail page is where you design the2:45layout for a single item. So in this2:48case, we're going to select detail page,2:50which creates a dynamic page layout that2:53updates automatically based on the2:55content in each item. And just like2:58that, the fields from my collection are3:00populated onto the new detail page.3:03You'll also see the new page appear in3:05the pages panel just like any other page3:07in the project. What's important to note3:10here is that this is the single layout3:12that we'll design and edit that Framer3:15will use to generate separate pages for3:17each item in our collection. At first3:20glance, it might seem like some of the3:22text fields didn't come through. But if3:24I check the layers panel, I can see that3:26they're all there. The issue here is3:29that the text defaults to black. So3:31since my background is black, I'll need3:33to update the text color to make it all3:35readable. Now that all of our fields are3:38populated on the detail page, we can3:40start styling it just like any other3:42page on our site. If we take a look at3:45the layers panel, you'll see that Framer3:46has automatically use the content from3:49our fields to create stacks and frames,3:52giving us a solid starting point to3:54design the layout. But what if we want3:56to add a new field to our item and have3:58it appear on the page? For example,4:01maybe we want to include a button that4:03links to an external website or a signup4:06form. To do that, we'll first need to go4:08back to the CMS collection and add a new4:11field. So, I'll click edit fields. And4:14for this example, I'll add a link field4:17to support our new button. Once that's4:19in place, I'll select an item from the4:21collection and populate the new link4:24field with a URL. With that set, we can4:27head back to the canvas and add it to4:29the page. But before we do that, I'd4:32like to point out something in the4:33insert panel. By navigating to the CMS4:36section of the insert panel, you'll4:37notice a fields category. This lets us4:40quickly grab text or image fields for4:43our canvas. But for our new link field,4:46we'll have to connect it to the link4:47property of an existing layer using4:50variables. Variables are what connect4:53elements on the canvas to the content4:55stored in your CMS. Think of them as4:58smart placeholders. They automatically5:00pull in the correct text, images, or5:03data based on the item being viewed.5:06When you drag a field from the insert5:08panel, Framer sets this up for you5:10behind the scenes. But it's helpful to5:12understand how variables work because5:15you can also add and customize them5:17manually to create even more flexible5:20designs.5:22We can add a variable to almost any5:24property in the properties panel by5:26clicking the plus sign and selecting set5:29variable. In this case, I'm creating a5:32simple button for my new link field. So,5:34I'll create a new text layer. Go to the5:36link property, click the plus icon next5:39to link 2, choose set variable, and then5:42select link. Just like that, the text5:46layer is now dynamically populated with5:48data from my items field. It's really5:51that simple to bring content from your5:53CMS into your CMS pages, whether you're5:56dragging it in from the insert panel or5:59manually connecting it with variables.6:01Just keep in mind that any changes you6:04make to this CMS page, like fonts,6:07spacing, or layout, will automatically6:10apply to every other item in the6:12collection since they all share the same6:14template. That also includes nonCMS6:18items. So, if you add something like a6:20background shape, a button, or even a6:23decorative graphic to this page, it'll6:26appear on every CMS page using this6:29template.6:30For example, if I use the drop down at6:33the top to switch to another CMS item,6:35you'll see that the banner image, date,6:37and any other design changes I've made6:40are exactly the same as the previous6:42page. Only the content changes.6:45Everything else stays consistent. Before6:49we wrap up, it's worth mentioning6:50conditional visibility, a powerful6:52feature that lets you show or hide6:54elements based on your CMS content. This6:57is especially helpful when you have6:59optional fields like the button I just7:01added that shouldn't appear unless7:03there's actual data to support them. For7:05instance, if the link field doesn't7:08contain a URL in one of our items, we7:11don't want to display a button that7:13leads to nowhere. So to handle this, we7:16can set a variable on the visible7:18property in the styles panel by choosing7:20the link field and setting the variable7:23to is set. That tells framer we only7:27want to show the button if that field7:29actually has content. If not, the button7:32stays hidden and the layout7:34automatically adjusts, keeping your7:36design clean. This technique works for7:39any element on your CMS page. And it's a7:41great way to keep your designs flexible.7:44It even allows CMS pages to adapt their7:46look and feel based on the content7:48available, making each page feel more7:51intentional. We'll dive deeper into this7:54in a more advanced lesson in the future.7:57So, now you've seen how CMS pages work7:59and how powerful they are when it comes8:01to scaling your content. To recap, CMS8:05detail pages use a single layout to8:07automatically generate unique pages for8:10each item in your collection. Best of8:12all, you design it once, Framer handles8:14the rest. In the next lesson, we'll be8:17exploring collection lists where you can8:19display multiple CMS items on any page8:23of your site. See you there.

Watch on YouTube ↗

‹ CMS Update: Index Variable

That’s Framer: The pro site builder loved by designers ›

More in this topic

Framer Update: CMS 3.04:13
Framer Update: CMS 3.0
Framer Update14K views · 1 month ago
Ship websites with enterprise needs, at startup speeds0:33
Ship websites with enterprise needs, at startup speeds
Announcement8.3M views · 3 months ago
Framer Update: CMS Dynamic Filters7:25
Framer Update: CMS Dynamic Filters
Framer Update14K views · 3 months ago
Framer Update: CMS Components5:04
Framer Update: CMS Components
Framer Update11K views · 4 months ago
Framer Update: Empty States in CMS Lists3:23
Framer Update: Empty States in CMS Lists
Framer Update4K views · 4 months ago
Wireframer: Blogs and Changelogs with CMS3:40
Wireframer: Blogs and Changelogs with CMS
Framer Update5K views · 8 months ago
On-Page Editing in Framer: A powerful new way to update Framer sites, right in the browser.5:12
On-Page Editing in Framer: A powerful new way to update Framer sites, right in the browser.
CMS10K views · 10 months ago
Framer Event — Introducing On-Page Editing7:29
Framer Event — Introducing On-Page Editing
Event12K views · 10 months ago

Create a free website with Framer, the website builder loved by startups, designers and agencies.