How to build a Content Management System (CMS) in Framer

⚡️ Build stunning sites at lightning speed with our Framer course: bit.ly/45plk7v
Check out Danny’s KZbin channel: / @dsapio
I will be teaching you guys everything you need to know to master the CMS inside of Framer. The CMS makes your life so much easier because it's user-friendly and easy to collaborate. You can create scalable content throughout your website, and it's just a really great way to manage your website. So today, I'm gonna be teaching you guys how we can create a course-style website that has different lessons, different teachers.
👉 Framer Remix link to follow along: framer.com/projects/new?dupli...
📽️ CHAPTERS
---------------------------
00:00 - Intro
00:40 - Jumping into Framer
01:25 - Editing Sizes
03:49 - Adding Elements
05:2 - Framer’s CMS
06:10 - Connecting CMS to elements
08:37 - Variant Linking
11:40 -Editing CMS
Learn more from Flux Academy on other social platforms:
---------------------------
Instagram: / flux.academy
Tiktok: / fluxacademy
Twitter: / fluxacademyhq
Linkedin: / flux-academy
#framer #webdesign

[@samuelfabayo1370]

This is an amazing tutorial video. It's one of those videos that's ahead of it's time, I am sure the audience will catch up. Very valuable content

[@jaywbus]

wicked cool!

[@garnvik144]

Thank you! Is it possible to import a total custom design from Figma for the course/blog layout, versus building it in Framer like you did in this video?

[@markcoyle6439]

Beautiful! just what i was looking for this week :)

[@FloNocode]

Hi that will be interesting to create an avanced filter for vidéo or blog ? How choose if a personne want just article of Jessica of on a subject. Ist possible to create on CMS an filter in Framer

[@joshuavizzacco5691]

How do you make it so you can manually adjust images and new sections per individual project vs having everything tied to the cms?

[@jocylynkirsty4877]

I may have just asked him the same thing.

[@GuidoPolonia]

Is it possible to have this first article to look different from the rest?

[@carlosgeeronimo]

Good one!

[@bendingreality-]

What do you use to record your screen? The way it moves and zooms in and out is really smooth

[@MrKearnsd]

probably Screen Studio. Great tool to make videos like that.

[@taunado]

Thanks. Is there a CMS admin panel for the client to only CRUD the content, and not have access to any design/dev of Framer?

[@tenr01]

This

[@A.Montgomery]

Good question, I asked Chat: In such a scenario, you could, for example, provide the client with a separate Content Management System (CMS) like WordPress or a headless CMS like Contentful or Prismic. The client can then manage the content through the CMS while leaving the Framer project untouched. The integration between the Framer prototype and the CMS can be done through APIs or other connection methods, depending on your project's requirements and the complexity of interactions. This way, the design and functionality of the Framer prototype remain intact while giving the client the freedom to update and modify content as needed.

[@taunado]

@@A.Montgomery Thanks. Might as well just use Wordpress as it now has a block builder.

[@A.Montgomery]

@@taunado Thanks, I might check that out as well. Since I'm building my first website, I ended up with Framer after my research about non-coding, user-friendly website systems.

[@taunado]

@@A.Montgomery Nice, yea I also built my first website using Framer and it's great to learn the basics of how the DOM works, but has serious limitations. Keep exploring as every solftware is a like a tool in the kit and knowing which one to use per project is going to save you a lot of time and struggles. Framer for marketing websites with minimal dynamic content that requires custom javascript. Webflow is amazing for custom coding, like adding GSAP animations and learning more about CSS. Wordpress seems to be the ultimate for anything component based, seeing as it's block based you can develop a library of blocks and re-use them. Wherein with Framer and Webflow it's more grunt work to re-use components and projects. Though it's still amazing and suited for more custom projects. I'm using Wordpress for lower budget clients and theme development, and Webflow for higher-end work. Wordpress requires learning some PHP code so it has the highest learning curve of them, but the highest scalability and customization.

[@alexquargnali6810]

easy if you can start with a new template from framer, if you need to import and set every part of new articles it's a nightmare

[@jocylynkirsty4877]

Are you able to adjust the frame length of a page in your CMS without affecting another page?

[@thedesigncult]

Not sure exactly what your asking but generally you want to have height set to auto on the page wrapper for the pages to be flexible in height.

[@jocylynkirsty4877]

Right! Thank you so much for replying. I'm using a template for my design portfolio. In the template, the CMS serve as the Project pages. I need to adjust the length of the frame of one project page in the collection without affecting the length of the frames of the other projects. One project might run long with images and information, but the other just has a few images. Due to the length of the other project, I am left with a huge gap on the shorter project page, and if I try to close the gap, it affects the other pages and the long project is now cut short. It was suggested to apply a conditional on the "Visiblity" feature based on the Title of the Project Page that way changing the frame length will only affect the project page whose title matches the condition set. I have very little coding experience though, and can't figure it out. @@thedesigncult

[@blairebarham]

Hi, I am actually doing the same thing and having the same issue! Did you figure this out?

[@blairebarham]

@@jocylynkirsty4877 Did you have success in figuring this out?? I am having the same issue! This is my first time using framer.

[@thedesigncult]

Hello @blairebarham and @jocylynkirsty4877. I did reply but seems like my messages was deleted. Maybe because I included a link or something. This can be solved by setting the height of the frame to auto. To do this you need to convert the whole page wrapper to a stack. If it's not a stack it's not possible to use/choose the auto value. It's also important that the container(frame) of the CMS content is also a stack that has the height: auto value. To get the auto value you choose the "Fit content" property dropdown instead of "Fixed" or what ever value it is today. You can also just type auto in the box where it is pixels or % now. If you still have problem try searching for videos covering stacks in Framer to get an understanding of how it works. If you are familiar with Figma, stacks is more or less the same as Figmas auto layout.