↑ ↓ Navigate ↡ Select ESC Close

Crash Course on Framer CMS (Beginner Tutorial)

2023-09-14 Education
50.0k
1.2k
77
Tim Gabe
Tim Gabe
157.0k subscribers

Unlock all features

FREE: Get instant access to 10 AI summaries, chats, or transcripts per day.

Description

This Framer CMS tutorial for beginners will teach you the tricks used to build editable portfolios, eCommerce pages, blogs and much more. πŸ”΄ Working File: https://timgabe.com/resources/cms-for-timgabe-com 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

Top Comments (10)

@RealMehedi 2023-09-14

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

15 1 replies
@AkyildizSerdar 2025-02-10

I watched like 10 videos about CMS in Framer but none of them had the answers to my questions except for this one. Thank you.

6
@cryptostu 2023-09-14

Doing the lords work ser

5
@ryanweeks2823 2024-12-23

This was the PERFECT tutorial for learning this. Once I figured it out, everything clicked into place and it was so much easier to work with. Thanks for doing this.

3 1 replies
@the-heritage-explorer 2024-12-02

Really, really helpful Tim, been trying to find how to link cms to components, but nowhere until now.

1
@TimGabe 2025-01-24

if you’re interested in the future of creative work, follow along here: https://timgabe.com/newsletter ❀

1
@RobertoVillaLobby 2025-02-16

Really good. Seriously considering buying your full course after today.

0
@RealConnectionDesign 2025-08-14

Needed a refresher on a few parts. Best Framer CMS tutorial out there by far. Congratz and thank you Tim!

0
@pavel9347 2025-03-06

I watched so many videos to understand something so simple - but nowhere else they mentioned it! THANKS!

0
@Joilsonwd 2025-12-16

14:35 Thank your for shared! I had difficult to set CMS on component in the same time. Works togheter was a challenge for a FAQ section in my project. Very confusing infos on web. But this tutorial was the best! We need to create variables on components and after we can connect to cms collection on the page. Interesting. Webflow works very different and to me was easy there. But on framer was a challenge until here. Thanks a lot!

0

Unlock the Data Inside
Turn Videos into Knowledge

  • Get FREE 10/day: transcripts, summaries, chats
  • Chat with videos, export text & PDF
  • $1 free API credit for RAG, chatbots & research

Free forever plan β€’ All features unlocked

App screenshot