CMS

Framer Update: New Conditionals & Transforms

Hunter

5:45

12K views

Jun 28, 2023

About this lesson

This update brings new functionality and improvements to our Conditional & Transforms features. With the addition of the Is Set conditional for Formatted Text fields, you can adapt your layout based on when your CMS Content exists. The new Color and Number Transforms enable you to create layouts that dynamically react to your content and properties by changing color, rotation and more. Along with this, we’ve fixed some bugs and made improvements across the CMS. Watch the video to learn more, or remix our example file here: https://chirp.framer.wiki/

🌞 Try Framer for free: https://framer.com

🎉 Follow on Twitter: https://twitter.com/framer

💎 Join Community: https://www.framer.community

0:00hey y' it's hunter in this video I'm 0:02excited to show you the latest 0:04conditionals and transforms that we've 0:05added to framer they allow you to 0:08dynamically change your layouts based on 0:10different properties and content you 0:11have on your 0:12website I'll show you how it works in 0:14this demo file here we have a website 0:17for a local bird conference and a 0:19schedule with a list of events that come 0:21from content in our CMS and what we will 0:24do in this video is make the layout of 0:27these items in the schedule respond 0:29based on CMS content let's open up the 0:32CMS to take a look at the structure of 0:34our 0:35content if you click on one of the 0:37events we'll see they have a title a 0:39slug the type of event they are which 0:42can be either a talk a workshop or just 0:44a casual event and then we have three 0:47location options big tent Rolling 0:49Meadows and cheerful 0:50cave then we have a time and an about 0:54section now that we know the structure 0:56of our content let's head back to the 0:58canvas to make our layout resp on to it 1:01the first thing I noticed on our page is 1:03that it could use a bit more color and 1:05it's hard to differentiate between talks 1:08workshops and just casual events let's 1:11fix this by showing a different color 1:13for each event type if we zoom in and we 1:16select this little element on the 1:19left we can see its current fill is set 1:22to the primary color if we click the 1:24fill Title Here we can go to set 1:26variable go to our Field named type and 1:29use a new convert 1:31option what convert option does is it 1:34allows us to say when the value from the 1:36CMS equals talk in this example set the 1:40value to this color so for instance when 1:42it's set to talk let's make it Pink if 1:46we go back we can add another 1:50condition so that when it equals 1:52Workshop we'll set it to 1:55purple then what the fallback means is 1:58anytime it doesn't equal one of these 2:00use this color so for the Casual events 2:03and maybe any other events that we 2:04haven't set up yet let's use 2:08black let's zoom out to see how it 2:12looks nice you'll see we have pink for 2:15our two talk items then purple for 2:18workshops and that blurred black for 2:22casual now we can set the time and 2:24location using prefix transforms if we 2:28go to time we can assign it to the 2:33content and we can go 2:35time and we want to add a prefix so we 2:40can go time space and because location 2:44is an option we can go to set variable 2:47location display 2:50option and then on top of that because 2:52we can change transforms we can add a 2:55prefix and we can say location space 3:00now one more thing I want to do here is 3:02show the capacity of each location we 3:05don't want to update all our CMS items 3:07with the capacity let's just put it 3:09right into our design and make it 3:11respond based on the location we can 3:13make this a stack then create a new text 3:18layer then we'll access the transform UI 3:20Again by clicking content set variable 3:23location convert 3:26option this will set different content 3:28for our text layer based on what the 3:30location field of this current CMS item 3:33is equal to when this collection item 3:35has a location of big tent I want 3:38capacity to say 200 when it's set to 3:42Rolling Meadows I want 3:45500 and we'll add one more condition for 3:47cheerful cave and then we'll say this 3:50holds 50 3:53people and then on top of this we can 3:55add a 3:57transform and we can say 4:01capacity space and let's add an M Dash 4:05so it fits in now with this transform we 4:07have everything responding to our 4:09content and we didn't have to update any 4:10of our CMS items it just responds 4:13exactly how we'd like it now I'll show 4:15you one more new way to make your layout 4:17respond to your content if we preview 4:20our site we can see that our content is 4:23starting look pretty good but if we 4:25click on the lunch for instance we'll 4:27notice it doesn't have any content 4:29because it's just lunch whereas the 4:31other events have 4:33descriptions what we can do to fix this 4:36is use a conditional check to see if 4:38there is a description for each event 4:41and then conditionally show the 4:43information button let's do that now so 4:45if we close our 4:47preview we can go to the info button and 4:50this is where our information overlay 4:52lives and all we have to do is go down 4:55to 4:56visibility set variable about 5:01is set and that's it this condition will 5:05set the visibility of the info button to 5:07yes only if about content exists in the 5:10CMS item if we preview our site we 5:13scroll down you'll see lunch no longer 5:16has an information button and only the 5:18events that have information show 5:21that and that's been an overview of the 5:23new conditionals and transforms in 5:25framer we can't wait to see how you use 5:28them on your own sites thanks for 5:30watching and I'll see you next time

TeachesCMS Pages / Dynamic Content Variables

Also coversCollections Stacks

Watch on YouTube ↗

‹ Navigations: Mobile Menus

Framer Update: Fit Text ›