Tips & tricks
- Flexible page
- CMS
Tips & tricks
- Flexible page
- CMS
Tips & tricks
- Flexible page
- CMS
The Secret to Flexible CMS Pages in Framer
Learn the secret to making a flexible CMS page in Framer. I’ll walk you though why you need it and how to make one. It’s a lot simpler than you think.
Posted by
Nandi
Table of contents
Quick story time: So, this one client came to me with a pretty specific request. He wanted his CMS pages to be flexible, meaning that sometimes he’d have one large image, other times he’d need two side-by-side, and on top of that, he wanted to add or remove image blocks based on the project’s content. For example, sometimes a project might need 4 image blocks, sometimes 5, sometimes more.
Here’s how I did it!
Set up CMS layout options
First, I set up the CMS so that each project had multiple layout options. For each project, I could choose between:
Option 1: One large image.
Option 2: Two images side by side.
Quick story time: So, this one client came to me with a pretty specific request. He wanted his CMS pages to be flexible, meaning that sometimes he’d have one large image, other times he’d need two side-by-side, and on top of that, he wanted to add or remove image blocks based on the project’s content. For example, sometimes a project might need 4 image blocks, sometimes 5, sometimes more.
Here’s how I did it!
Set up CMS layout options
First, I set up the CMS so that each project had multiple layout options. For each project, I could choose between:
Option 1: One large image.
Option 2: Two images side by side.
Quick story time: So, this one client came to me with a pretty specific request. He wanted his CMS pages to be flexible, meaning that sometimes he’d have one large image, other times he’d need two side-by-side, and on top of that, he wanted to add or remove image blocks based on the project’s content. For example, sometimes a project might need 4 image blocks, sometimes 5, sometimes more.
Here’s how I did it!
Set up CMS layout options
First, I set up the CMS so that each project had multiple layout options. For each project, I could choose between:
Option 1: One large image.
Option 2: Two images side by side.
Different layout options.
Different layout options.
Different layout options.
This was all controlled by a simple dropdown menu in the CMS where I could pick the layout for each project. For projects that needed more than one image, I’d upload multiple images for the layout.
Use conditionals for layouts
With Framer, you can control which components show up on the page based on the CMS data you’ve input. So, if a project only has one image, you’ll only see that one, and not the available image blocks.
Let’s say I have 25 possible image blocks available, but not all of them are needed for every project.
The trick is to add conditionals to the visible property of each component. Let me show you how this works:
This was all controlled by a simple dropdown menu in the CMS where I could pick the layout for each project. For projects that needed more than one image, I’d upload multiple images for the layout.
Use conditionals for layouts
With Framer, you can control which components show up on the page based on the CMS data you’ve input. So, if a project only has one image, you’ll only see that one, and not the available image blocks.
Let’s say I have 25 possible image blocks available, but not all of them are needed for every project.
The trick is to add conditionals to the visible property of each component. Let me show you how this works:
This was all controlled by a simple dropdown menu in the CMS where I could pick the layout for each project. For projects that needed more than one image, I’d upload multiple images for the layout.
Use conditionals for layouts
With Framer, you can control which components show up on the page based on the CMS data you’ve input. So, if a project only has one image, you’ll only see that one, and not the available image blocks.
Let’s say I have 25 possible image blocks available, but not all of them are needed for every project.
The trick is to add conditionals to the visible property of each component. Let me show you how this works:
Visible conditional set.
Visible conditional set.
Visible conditional set.
I uploaded an image for layout five and selected option one (one large image). Since layout five now has an image, the component connected to it is now visible.
I uploaded an image for layout five and selected option one (one large image). Since layout five now has an image, the component connected to it is now visible.
I uploaded an image for layout five and selected option one (one large image). Since layout five now has an image, the component connected to it is now visible.
Layout 5 visible after adding image.
Layout 5 visible after adding image.
Layout 5 visible after adding image.
Depending on the option I selected (option one or two), the variant of the component changes. For example, if I choose option two, it’ll show two images side by side.
Depending on the option I selected (option one or two), the variant of the component changes. For example, if I choose option two, it’ll show two images side by side.
Depending on the option I selected (option one or two), the variant of the component changes. For example, if I choose option two, it’ll show two images side by side.
Layout 6 visible now with 2 images.
Layout 6 visible now with 2 images.
Layout 6 visible now with 2 images.
It’s all automatic, and Framer takes care of the layout for me.
Wrapping up
To sum it up, if you want flexible CMS pages in Framer, just use conditions and set your layouts based on what content you’ve added to your CMS.
You can easily control which components show up based on image uploads, layout options, and even mobile/desktop variants.
I’ve also got a mini tutorial if you want to check it out in more detail: How to create flexible CMS detail pages in Framer
I hope this helps you create more flexible, dynamic pages in your Framer projects.
See ya!
It’s all automatic, and Framer takes care of the layout for me.
Wrapping up
To sum it up, if you want flexible CMS pages in Framer, just use conditions and set your layouts based on what content you’ve added to your CMS.
You can easily control which components show up based on image uploads, layout options, and even mobile/desktop variants.
I’ve also got a mini tutorial if you want to check it out in more detail: How to create flexible CMS detail pages in Framer
I hope this helps you create more flexible, dynamic pages in your Framer projects.
See ya!
It’s all automatic, and Framer takes care of the layout for me.
Wrapping up
To sum it up, if you want flexible CMS pages in Framer, just use conditions and set your layouts based on what content you’ve added to your CMS.
You can easily control which components show up based on image uploads, layout options, and even mobile/desktop variants.
I’ve also got a mini tutorial if you want to check it out in more detail: How to create flexible CMS detail pages in Framer
I hope this helps you create more flexible, dynamic pages in your Framer projects.
See ya!
