Crash Course on Framer CMS (Beginner Tutorial)

Sdílet
Vložit
  • čas přidán 13. 07. 2024
  • 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

Komentáře • 54

  • @RealMehedi
    @RealMehedi Před 10 měsíci +9

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

    • @TimGabe
      @TimGabe  Před 9 měsíci

      wow, that means a lot my friend 🙏

  • @ditismijnnaampje
    @ditismijnnaampje Před 7 měsíci +1

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

    • @TimGabe
      @TimGabe  Před 7 měsíci

      that's amazing, really glad you liked it 😃

  • @creatoratplay
    @creatoratplay Před 10 měsíci +2

    This was super helpful; thank you!!

  • @freeheel6319
    @freeheel6319 Před 5 měsíci

    Really well explained Tim! bravo

  • @daviktran4742
    @daviktran4742 Před 5 měsíci

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

  • @agorogfx
    @agorogfx Před 9 měsíci +1

    Been expecting this ❤ thanks a lot Tim. 🙏

    • @TimGabe
      @TimGabe  Před 9 měsíci

      happy you liked it, my friend 💜

  • @shadesigns8304
    @shadesigns8304 Před 3 měsíci

    nice and clean explanation .thanks tim

  • @cryptostu
    @cryptostu Před 10 měsíci +4

    Doing the lords work ser

  • @harshitrana4
    @harshitrana4 Před 4 měsíci

    This tutorial is such a god send!

  • @Jomoji9
    @Jomoji9 Před 5 měsíci +1

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

    • @TimGabe
      @TimGabe  Před 5 měsíci

      that's amazing to hear, thank you!!

  • @victorbecerra4659
    @victorbecerra4659 Před 4 měsíci

    Thanks for this amazing video!

  • @anastasiiagulenko6260
    @anastasiiagulenko6260 Před 5 měsíci +1

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

    • @TimGabe
      @TimGabe  Před 5 měsíci

      glad you liked it!!

  • @kylehumber
    @kylehumber Před 3 měsíci

    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 😁

  • @rafiktekari
    @rafiktekari Před 10 hodinami

    Looove it!!

  • @jodithvalerie9446
    @jodithvalerie9446 Před 5 měsíci

    amazing video thankyou

  • @SouthGlobal
    @SouthGlobal Před 10 měsíci +1

    Excellent tutorial 👌

    • @TimGabe
      @TimGabe  Před 9 měsíci

      thanks a lot, really appreciated the support!

  • @lenjgan6850
    @lenjgan6850 Před 10 měsíci +1

    Thanks tim😊

  • @AaronHager
    @AaronHager Před 3 měsíci

    Good one

  • @rabbysingh190
    @rabbysingh190 Před 3 měsíci

    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 😄

  • @yuvrajsingh-gm6zk
    @yuvrajsingh-gm6zk Před 10 měsíci +1

    Great countdown!😂

  • @NicoloSodano
    @NicoloSodano Před 10 měsíci +1

    Yes!

    • @TimGabe
      @TimGabe  Před 9 měsíci +1

      hope it taught you some stuff, nicolo!

  • @FloNocode
    @FloNocode Před 10 měsíci +1

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

    • @TimGabe
      @TimGabe  Před 9 měsíci +1

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

  • @madamecelindra
    @madamecelindra Před 5 měsíci

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

  • @opeoluwaopeifa5069
    @opeoluwaopeifa5069 Před 9 měsíci +1

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

    • @TimGabe
      @TimGabe  Před 9 měsíci +1

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

  • @dariopadula7612
    @dariopadula7612 Před 9 měsíci

    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  Před 9 měsíci

      haha!! thank you, friend!

    • @TimGabe
      @TimGabe  Před 7 měsíci

      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!

  • @taunado
    @taunado Před 9 měsíci

    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  Před 9 měsíci

      thank you for commenting! 🤩

    • @TimGabe
      @TimGabe  Před 7 měsíci

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

  • @kartikeya.m9380
    @kartikeya.m9380 Před 10 měsíci +1

    When is ur full course comming out

    • @TimGabe
      @TimGabe  Před 9 měsíci +1

      early 2024, my friend!

  • @edlin.o
    @edlin.o Před 4 měsíci

    Is it possible to do it with pdf files?

  • @mohameddaoui6532
    @mohameddaoui6532 Před 9 měsíci

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

    • @TimGabe
      @TimGabe  Před 9 měsíci

      i've just started digging the day mode again 😅

    • @DartsHell
      @DartsHell Před 9 měsíci

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

  • @afreenshaikh938
    @afreenshaikh938 Před 5 měsíci

    1:26

  • @elduke2011
    @elduke2011 Před 6 měsíci +3

    Very complex 😅

    • @TimGabe
      @TimGabe  Před 6 měsíci

      cms is definitely hard in the beginning...

    • @Zaindkir
      @Zaindkir Před 27 dny

      Very complex tutoriel bro

  • @arm23an
    @arm23an Před 3 měsíci

    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  Před 3 měsíci

      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
    @jesamegbe1579 Před 4 měsíci

    rip webflow