CMS, Layout & Design

CMS Update: Index Variable

CMS Update: Index Variable

CMS Update: Index Variable

Edo

·

5:47

·

10K views

·

Apr 17, 2025

About this lesson

We’re excited to introduce a new Index variable for CMS lists, unlocking layout options that weren’t possible before. You can now make the first card span two rows or two columns in a grid for a more dynamic look. This addition also enables conditional component variants based on item position, letting you alternate between left and right-aligned cards, or switch between filled and non-filled backgrounds. Lastly, this update gives you precise control over layout details, like showing dividers only between items. This release also includes fixes, improvements, and other additions.

Example project showed in the video: https://cms-layouts.framer.website

Update page with all improvements: https://www.framer.com/updates/cms-index-variable

Sign up: https://framer.link/yt

Follow: https://framer.link/yt-x

Learn: https://framer.link/yt-academy

0:00Hi everyone, this is Edo from Framer.0:02Today I'll show you how to create 0:04flexible CMS layouts thanks to a new 0:06variable like having the first card span 0:09two rows in a grid for a more modern 0:11look or having it span two columns 0:14instead. You'll also learn how to change 0:17component varants based on item 0:19position, which also unlocks the 0:20possibility to alternate left and right 0:23cards or switching between field and 0:25non-field backgrounds. Lastly, we'll 0:28cover details like showing dividers 0:30exclusively between items. I've also 0:32added a remix link in the video 0:34description so you can dive into this 0:36project yourself. But now, let's get 0:40started. Here I have a simple grid with 0:42content coming from the CMS. And if I 0:45select the first item, you'll see I have 0:47a columns and rows property. By the way,0:50if you don't see the rows property, make 0:53sure that when you have the grid 0:54selected and you go into the advanced 0:57layout options, you have the height of 0:59the item set to 1:00fixed. If that's the case, when you 1:03select the item, you should be able to 1:06see this rows property. And now I'm 1:08going to simply click the plus set 1:11variable and see there is this new 1:13property called index. And then I'm 1:16going to select equals. And now when the 1:19index equals and I'm going to set one,1:23I'm going to have a span two. And as 1:26simple as that, you'll see that this 1:29item is now spanning two rows. Now to 1:33show you how flexible this is, I'm going 1:35to change the value of the index to 1:38something else like 2 3 4 etc. And this 1:43essentially tells which position has to 1:46update its card. Super 1:50powerful. Now let me show you another 1:53example. If I go over here in the second 1:55page I prepared, there is another grid 1:58and this time I want the first item to 2:00span two columns instead of rows. Now if 2:04I go over here, I see the columns 2:06property. I hit plus and just as before 2:09I do set variable index and then equals 2:12bring it to one and then say span to 2:15when yes and just like that you see that 2:18the first card is the one to be featured 2:20but you can also make it the second the 2:22third and so 2:24on. Now let me show you another 2:27example. With this example I want to 2:30show you how powerful the index variable 2:32is in combination with component 2:34varants. Here I have a component on top 2:37of the list with a default variant and a 2:40feature one and I want to use this 2:43feature variant for the first article in 2:46the list so that when there is a new one 2:48it has this featured look. I can go here 2:51and with the first item selected then I 2:54go to the variant property hit the plus 2:57set variable and go to our index 3:01variable. Here I want to set equals 3:04again and then set one and when yes I'm 3:08going to choose the feature variant and 3:10just as easy as that you'll see that the 3:13first item is going to be featured with 3:16his own card and again I can decide to 3:19feature other positions in the list as 3:22well if I want. Now I'm going to show 3:24you another example and this one is 3:27particularly interesting because it 3:29unlocks an entirely new type of layout 3:32that was not possible before. Here I 3:35have the first item as a component 3:38again. So I have the primary variant 3:42which has the image on the left and the 3:44right variant which is an image on the 3:47right. Now if I go back I can go to the 3:52variant property and hit plus set 3:55variable index and this time I'm going 3:58to select is odd.4:01Now this means that when the variable 4:03index is odds there is a conversion that 4:06is going to happen and when yes I'm 4:08going to leave the left variant and when 4:11no I'm going to set the right variant 4:14and you'll see that there is this very 4:16nice alternating layout which is very 4:18useful for things like featured sections 4:21of your 4:23site and I'm going to use the same 4:25technique for this other example in 4:27which I want the item background to be 4:29filled on not filled depending whether 4:32their position is even or odd in the 4:34list. I'm going to do that by setting 4:37the index variable and then again is odd 4:40and then when yes filled when no not 4:43filled. Then you see a really nice 4:45effect immediately 4:47applied. Lastly, a nice little detail 4:50about dividers that you can now fully 4:53control when to show and when to hide.4:55Here I have two variants, one with a 4:58divider and one without. And in the list 5:01if I select the first item and I add an 5:04index variable like before and then set 5:06it to equals one, I can pick no divider 5:10exclusively for the first item so that 5:13is only shown in between 5:16items. And this is about it for the 5:19index variable. This update brings a lot 5:22of other improvements to the CMS that 5:25you can check in the updates page. And I 5:27also remind you, you can remix this file 5:29I just showed you so you can dive in 5:32yourself. I'll see you next time and 5:35happy building.5:38[Music]

TeachesGrids CMS Fields

Also coversComponent Variants Components Links Remix Links Sizing Variables

Watch on YouTube ↗

‹ SEO and Accessibility in Framer (Fundamentals Lesson 26)

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

More in this topic

Framer Update: CMS 3.0

Framer Update: CMS 3.0

Framer Update14K views · 1 month ago

8 Framer shortcuts you're probably sleeping on

8 Framer shortcuts you're probably sleeping on

Layout & Design3K views · 2 months ago

Framer Update: Stack Sorting and Bento Grids

Framer Update: Stack Sorting and Bento Grids

Framer Update7K views · 2 months ago

Sharing Vector Sets Across Projects (Vectors Lesson 7)

Sharing Vector Sets Across Projects (Vectors Lesson 7)

Layout & Design1K views · 3 months ago

Connecting Vector Sets to the Framer CMS (Vectors Lesson 6)

Connecting Vector Sets to the Framer CMS (Vectors Lesson 6)

Layout & Design2K views · 3 months ago

Ship websites with enterprise needs, at startup speeds

Ship websites with enterprise needs, at startup speeds

Announcement8.3M views · 3 months ago

Animating Vectors in Framer (Vectors Lesson 5)

Animating Vectors in Framer (Vectors Lesson 5)

Layout & Design4K views · 3 months ago

Customizing Vectors with Variables in Framer (Vectors Lesson 4)

Customizing Vectors with Variables in Framer (Vectors Lesson 4)

Layout & Design3K views · 3 months ago

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