5d:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/1rc641binzbjp.js","/creators-assets/_next/static/immutable/chunks/12ci1vsd8nj4u.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/2ply_q-h6u_2z.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/1pb7yncyfm9fe.js","/creators-assets/_next/static/immutable/chunks/1j6jg0y72xk13.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/26nhnsanh2piz.js","/creators-assets/_next/static/immutable/chunks/03itqfxm4gmj8.js","/creators-assets/_next/static/immutable/chunks/114fkj16mhe97.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/16inv17cv83xq.js","/creators-assets/_next/static/immutable/chunks/2760bhhttj0zo.js","/creators-assets/_next/static/immutable/chunks/3_z6gb0g1nigd.js","/creators-assets/_next/static/immutable/chunks/3vlbhrh3-zofo.js","/creators-assets/_next/static/immutable/chunks/120bipr4k16wv.js","/creators-assets/_next/static/immutable/chunks/3ea2l_ol8wqqa.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/1zr4ew02k6y_l.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/08ajsjh8ypdt2.js","/creators-assets/_next/static/immutable/chunks/1ddgh6mv1wg4x.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/3t6k2_m2gc3-k.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0w6oa8_ba59u4.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/3c3kl-ixsd844.js"],"PostDetailCard"] 5e:Tda1,

How to Create Different Layouts for CMS Detail Pages in Framer

The Problem

You download a template from Framer's marketplace (free or paid) and everything looks great. Then you hit a wall: the CMS detail page won't do what you need.

Maybe one project needs six images, another needs three. One needs a video, another doesn't. You try editing the page and end up creating separate pages for each project instead of keeping things dynamic.

The Solution: Visibility Conditions

The trick is visibility conditions. They let one CMS detail page adapt to different content without breaking.

How It Works

Say you have four image slots on a detail page. Three projects use all four images, but one project only has three.

Set the visibility condition on that fourth image: "If image 4 exists, show this. If not, hide it."

The layout adjusts automatically. No empty spaces, no manual fixes needed.

Adding More Images (Beyond the Template Default)

If your template has four image slots but you need six:

Duplicate the image components to make slots 5 and 6
Add your images to the CMS
Set visibility conditions for each new slot: "If image 5 exists, show this"
Same for image 6

Now the first project shows all six images. The second shows five. The third shows three. The page adapts based on what's there.

Using Videos and Other Components

Want some projects to have videos and others not?

Add a video component to your detail page
Create a "video link" text field in your CMS
Connect the video component to that field
Set visibility: "If video link exists, show this"

Projects with video links show the video. Projects without them don't show an empty player. The component just disappears.

This works for anything: embedded forms, audio files, whatever.

Different Layouts Using Component Variants

Here's where it gets interesting. What if you need completely different layouts for different projects?

Create one component with multiple layout variants:

Variant 1: Two columns, two rows
Variant 2: Three columns, one row
Variant 3: One column, four rows

Method 1: Odd/Even

Add a "count" number field to your CMS (1, 2, 3, 4...).

Set the variant condition: "If count is odd, use variant 1. If even, use variant 2."

Projects 1, 3, 5 get one layout. Projects 2, 4, 6 get another.

Method 2: Specific Numbers

Want four completely different layouts?

Set conditions based on the count field:

If count = 1, use variant 1
If count = 2, use variant 2
If count = 3, use variant 3
If count = 4, use variant 4

Each project gets its own layout.

Method 3: Using Text Fields

You can use year fields or any text field:

"If year contains '25', use variant 4. Otherwise, use variant 1."

All 2025 projects get one layout. Everything else gets another.

Why This Matters

One CMS detail page handles everything. No duplicate pages. No manual work every time you add a project. Just set up the conditions once, then add your content.

The visibility condition is the key. It gives you flexibility while keeping everything dynamic.

5a:[["$","$L5d",null,{"post":{"id":"019c09d1-be83-7b9f-adb9-f25c5415bc08","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"c2877e7a-0bea-4cd9-aa87-591e400ff3e9","name":"Design with bharath","slug":"bharath-design","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/c2877e7a-0bea-4cd9-aa87-591e400ff3e9/kmy0tots","badges":["expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"79","resolved":true,"title":"CMS Dynamic Layout ","body":"$5e","bodyJson":null,"introduction":"Dynamic layouts for CMS in Framer","slug":"cms-dynamic-layout","author":{"framerUserId":"c2877e7a-0bea-4cd9-aa87-591e400ff3e9","name":"Design with bharath","slug":"bharath-design","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/c2877e7a-0bea-4cd9-aa87-591e400ff3e9/kmy0tots","badges":["expert"],"followed":false,"followsYou":false},"media":[{"type":"youtube","url":"https://youtu.be/YxFmQIbzOU8?si=lrcyLscClXWfneL7","metadata":{"videoId":"YxFmQIbzOU8","title":"Dynamic Layouts for CMS Detail Pages in Framer","thumbnailUrl":"https://i.ytimg.com/vi/YxFmQIbzOU8/maxresdefault.jpg","thumbnailMetadata":{"tint":"hsl(0 0% 3%)","aspectRatio":1.7777777777777777}}}],"post":null,"createdAt":"2026-01-23T16:57:46.824Z","updatedAt":"2026-01-29T12:54:26.691Z","publishedAt":"2026-01-29T12:54:26.691Z","featuredAt":null,"approvedAt":null,"type":"tutorial","attributes":{"level":"beginner","duration":1019,"summary":"Learn how to create different layouts for your CMS detail pages in Framer without creating separate pages for each project. This tutorial shows you how to use visibility conditions, components, and variants to change layouts based on your content dynamically.","categories":[{"id":"6bf792d6-94b7-455b-8d62-b13e7c02fa1d","name":"CMS","slug":"cms"}],"tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-01-29T12:54:26.691Z","updatedAt":"2026-01-29T12:54:26.691Z","reported":false}}],"$L5f"]

Suggested for you