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/resources/cms-for...
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

Пікірлер: 54

  • @RealMehedi
    @RealMehedi10 ай бұрын

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

  • @TimGabe

    @TimGabe

    9 ай бұрын

    wow, that means a lot my friend 🙏

  • @ditismijnnaampje
    @ditismijnnaampje7 ай бұрын

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

  • @TimGabe

    @TimGabe

    7 ай бұрын

    that's amazing, really glad you liked it 😃

  • @freeheel6319
    @freeheel63195 ай бұрын

    Really well explained Tim! bravo

  • @agorogfx
    @agorogfx10 ай бұрын

    Been expecting this ❤ thanks a lot Tim. 🙏

  • @TimGabe

    @TimGabe

    9 ай бұрын

    happy you liked it, my friend 💜

  • @cryptostu
    @cryptostu10 ай бұрын

    Doing the lords work ser

  • @creatoratplay
    @creatoratplay10 ай бұрын

    This was super helpful; thank you!!

  • @shadesigns8304
    @shadesigns83043 ай бұрын

    nice and clean explanation .thanks tim

  • @daviktran4742
    @daviktran47425 ай бұрын

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

  • @Jomoji9
    @Jomoji95 ай бұрын

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

  • @TimGabe

    @TimGabe

    5 ай бұрын

    that's amazing to hear, thank you!!

  • @kylehumber
    @kylehumber3 ай бұрын

    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 😁

  • @anastasiiagulenko6260
    @anastasiiagulenko62606 ай бұрын

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

  • @TimGabe

    @TimGabe

    6 ай бұрын

    glad you liked it!!

  • @harshitrana4
    @harshitrana44 ай бұрын

    This tutorial is such a god send!

  • @victorbecerra4659
    @victorbecerra46594 ай бұрын

    Thanks for this amazing video!

  • @rafiktekari
    @rafiktekari7 күн бұрын

    Looove it!!

  • @jodithvalerie9446
    @jodithvalerie94465 ай бұрын

    amazing video thankyou

  • @Starman42069
    @Starman4206910 ай бұрын

    Excellent tutorial 👌

  • @TimGabe

    @TimGabe

    9 ай бұрын

    thanks a lot, really appreciated the support!

  • @rabbysingh190
    @rabbysingh1904 ай бұрын

    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 😄

  • @AaronHager
    @AaronHager3 ай бұрын

    Good one

  • @lenjgan6850
    @lenjgan685010 ай бұрын

    Thanks tim😊

  • @TimGabe

    @TimGabe

    9 ай бұрын

    thank you 🤩

  • @madamecelindra
    @madamecelindra5 ай бұрын

    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^^

  • @dariopadula7612
    @dariopadula761210 ай бұрын

    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

    @TimGabe

    9 ай бұрын

    haha!! thank you, friend!

  • @TimGabe

    @TimGabe

    7 ай бұрын

    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!

  • @opeoluwaopeifa5069
    @opeoluwaopeifa50699 ай бұрын

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

  • @TimGabe

    @TimGabe

    9 ай бұрын

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

  • @FloNocode
    @FloNocode10 ай бұрын

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

  • @TimGabe

    @TimGabe

    9 ай бұрын

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

  • @taunado
    @taunado10 ай бұрын

    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

    @TimGabe

    9 ай бұрын

    thank you for commenting! 🤩

  • @TimGabe

    @TimGabe

    7 ай бұрын

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

  • @yuvrajsingh-gm6zk
    @yuvrajsingh-gm6zk10 ай бұрын

    Great countdown!😂

  • @TimGabe

    @TimGabe

    9 ай бұрын

    haha!

  • @NicoloSodano
    @NicoloSodano10 ай бұрын

    Yes!

  • @TimGabe

    @TimGabe

    9 ай бұрын

    hope it taught you some stuff, nicolo!

  • @edlin.o
    @edlin.o4 ай бұрын

    Is it possible to do it with pdf files?

  • @kartikeya.m9380
    @kartikeya.m938010 ай бұрын

    When is ur full course comming out

  • @TimGabe

    @TimGabe

    9 ай бұрын

    early 2024, my friend!

  • @mohameddaoui6532
    @mohameddaoui65329 ай бұрын

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

  • @TimGabe

    @TimGabe

    9 ай бұрын

    i've just started digging the day mode again 😅

  • @DartsHell

    @DartsHell

    9 ай бұрын

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

  • @afreenshaikh938
    @afreenshaikh9385 ай бұрын

    1:26

  • @elduke2011
    @elduke20116 ай бұрын

    Very complex 😅

  • @TimGabe

    @TimGabe

    6 ай бұрын

    cms is definitely hard in the beginning...

  • @Zaindkir

    @Zaindkir

    Ай бұрын

    Very complex tutoriel bro

  • @arm23an
    @arm23an4 ай бұрын

    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

    @TimGabe

    4 ай бұрын

    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
    @jesamegbe15794 ай бұрын

    rip webflow