Crash Course on Framer CMS (Beginner Tutorial)

This Framer CMS tutorial for beginners will teach you the tricks used to build editable portfolios, eCommerce pages, blogs and much more.
🔴 Working File: timgabe.com/re...
Timecodes
0:00 - Introduction to Framer CMS
0:19 - Designing Content for CMS
0:37 - Components of a Card
1:02 - Adding Hover State to Card
1:56 - Placeholder Image & Video
2:20 - Hover State Conditionality (Preview)
2:34 - Three Ways to Create CMS
3:10 - Using CMS Collection
3:51 - Editing CMS Fields
4:56 - Adding CMS Fields: URL, Link, Image
5:47 - Additional CMS Fields: Toggle, Options
6:55 - File Type Constraints in CMS
7:03 - Adding CMS Items
7:17 - Linking CMS to Design
9:36 - Finalizing Home Page & Detail Page
9:59 - Starting to Drag Resources into Home Page
10:06 - Adjusting Resource Placement
10:14 - Using Default Template
10:23 - Importing Card Component
10:31 - Switching to Grid Layout
10:48 - Identifying Static Content Issue
11:00 - Editing Card Component
11:16 - Setting up Variables
11:28 - Adding Image and Title Variables
11:38 - Adding Resource and Software Options
11:58 - Setting Visibility for Icons
12:27 - Linking Title to Variables
13:00 - Adding Resource Type Options
13:55 - Configuring Video Variable
14:04 - Setting up Image Variable
14:17 - Configuring Link Variable
14:35 - Connecting Component to CMS
15:23 - Setting up Resource URL Linking
15:36 - Checking Hover State and Content
15:52 - Addressing Issue of Unwanted Play Icon
16:01 - Editing Default Video Setting
16:37 - Re-linking Video to CMS
17:09 - Configuring Play Icon Visibility
17:36 - Testing Conditional Logic
17:55 - Fixing Hover State Issue
18:20 - Closing Remarks and Further Resources

[@RealMehedi]

Mind blown. The best video on framer CMS...

[@TimGabe]

wow, that means a lot my friend 🙏

[@ditismijnnaampje]

One of the best videos I saw about Framer. Thanks Tim! Covers everything i just needed, haha.

[@TimGabe]

that's amazing, really glad you liked it 😃

[@kylehumber]

I thought I had a good grip on CMS but I never thought about building from a component in this manner! Such a helpful vid, thank you! I've got a good project coming up where I'll be able to put this knowledge to good use 😁

[@cryptostu]

Doing the lords work ser

[@Jomoji9]

Amazing. Best video on Framer CMS and is super easy to follow. Thank you!!!

[@TimGabe]

that's amazing to hear, thank you!!

[@anastasiiagulenko6260]

Omg, thank you so much for this video! It's the best Framer CMS video!

[@TimGabe]

glad you liked it!!

[@freeheel6319]

Really well explained Tim! bravo

[@daviktran4742]

Awesome tutorial for beginner! It's very very easy to understand. Thank you

[@rafiktekari]

Looove it!!

[@harshitrana4]

This tutorial is such a god send!

[@rabbysingh190]

Well this was the only video from your crash course which is confusing for me 😅, maybe i need to re-watch this video to understand that why do we need to setup CMS instead going directly and working with components and variable... Anyways great work bro!! Hats off for giving such an amazing course for free. Just Subscribed to your channel 😄

[@agorogfx]

Been expecting this ❤ thanks a lot Tim. 🙏

[@TimGabe]

happy you liked it, my friend 💜

[@shadesigns8304]

nice and clean explanation .thanks tim

[@sale7680]

Best master ❤

[@creatoratplay]

This was super helpful; thank you!!

[@victorbecerra4659]

Thanks for this amazing video!

[@Starman42069]

Excellent tutorial 👌

[@TimGabe]

thanks a lot, really appreciated the support!

[@lenjgan6850]

Thanks tim😊

[@TimGabe]

thank you 🤩

[@AaronHager]

Good one

[@jodithvalerie9446]

amazing video thankyou

[@FloNocode]

Masterclass Again !! Thx Tim . Course open in 2023 or 2024 ?

[@TimGabe]

thank you Florian!! i'm aiming to release the course early 2024! 😃

[@madamecelindra]

Thanks for your videos! Is there any possibility to use CMS for a onepager? Like having the collection list as a menu and each item leading to the scroll section on the same page where the actual item is (but without leading to a different page). I hope my question is understandable^^

[@yuvrajsingh-gm6zk]

Great countdown!😂

[@TimGabe]

haha!

[@opeoluwaopeifa5069]

Thanks tim, but what if i want each detail page in the cms to look different

[@TimGabe]

that's a different story! you'll need different collection pages or code overrides for that, i think!

[@NicoloSodano]

Yes!

[@TimGabe]

hope it taught you some stuff, nicolo!

[@edlin.o]

Is it possible to do it with pdf files?

[@kartikeya.m9380]

When is ur full course comming out

[@TimGabe]

early 2024, my friend!

[@taunado]

Thanks. Is there a CMS admin panel for clients to CRUD their website? Without having the ability to see or edit any design elements.

[@TimGabe]

thank you for commenting! 🤩

[@TimGabe]

this is so weird -- YT is sending responses to the wrong comments. regarding CRUD, i think that framer is working on this!

[@dariopadula7612]

Thanks Tim! I've noticed tho that the "option" variable has a maximum of four options. Is there an alternative way if we want the convert variable to work with more than those four options?

[@TimGabe]

haha!! thank you, friend!

[@TimGabe]

wow, just realised that this answer should have been to another comment. 😅 i haven't yet got to a case with more than four options, let me dive into that and get back as soon as i know!

[@mohameddaoui6532]

please use dark mode in framer it's freaking blinding me with that white UI

[@TimGabe]

i've just started digging the day mode again 😅

[@DartsHell]

@@TimGabe hahaha I have gotten so used to dark mode that white UI feels like floodlight on my eyes

[@elduke2011]

Very complex 😅

[@TimGabe]

cms is definitely hard in the beginning...

[@Zaindkir]

Very complex tutoriel bro

[@afreenshaikh938]

1:26

[@arm23an]

Why would you create CMS and not duplicate Components each time, seems such a waste of time or I think I am missing something ?

[@TimGabe]

imagine you have a website with 100s of items, like a blog or even my site with resources duplicating components quickly becomes unmanagable in those cases ☺️

[@jesamegbe1579]

rip webflow