Crash Course on Framer CMS (Beginner Tutorial)

Поділитися
Вставка
  • Опубліковано 9 лип 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

КОМЕНТАРІ • 53

  • @RealMehedi
    @RealMehedi 9 місяців тому +8

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

    • @TimGabe
      @TimGabe  9 місяців тому

      wow, that means a lot my friend 🙏

  • @creatoratplay
    @creatoratplay 10 місяців тому +2

    This was super helpful; thank you!!

  • @cryptostu
    @cryptostu 9 місяців тому +4

    Doing the lords work ser

  • @ditismijnnaampje
    @ditismijnnaampje 7 місяців тому +1

    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 😃

  • @agorogfx
    @agorogfx 9 місяців тому +1

    Been expecting this ❤ thanks a lot Tim. 🙏

    • @TimGabe
      @TimGabe  9 місяців тому

      happy you liked it, my friend 💜

  • @daviktran4742
    @daviktran4742 4 місяці тому

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

  • @freeheel6319
    @freeheel6319 4 місяці тому

    Really well explained Tim! bravo

  • @harshitrana4
    @harshitrana4 4 місяці тому

    This tutorial is such a god send!

  • @kylehumber
    @kylehumber 3 місяці тому

    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 😁

  • @shadesigns8304
    @shadesigns8304 3 місяці тому

    nice and clean explanation .thanks tim

  • @Jomoji9
    @Jomoji9 5 місяців тому +1

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

    • @TimGabe
      @TimGabe  5 місяців тому

      that's amazing to hear, thank you!!

  • @anastasiiagulenko6260
    @anastasiiagulenko6260 5 місяців тому +1

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

    • @TimGabe
      @TimGabe  5 місяців тому

      glad you liked it!!

  • @victorbecerra4659
    @victorbecerra4659 4 місяці тому

    Thanks for this amazing video!

  • @jodithvalerie9446
    @jodithvalerie9446 5 місяців тому

    amazing video thankyou

  • @SouthGlobal
    @SouthGlobal 9 місяців тому +1

    Excellent tutorial 👌

    • @TimGabe
      @TimGabe  9 місяців тому

      thanks a lot, really appreciated the support!

  • @lenjgan6850
    @lenjgan6850 10 місяців тому +1

    Thanks tim😊

    • @TimGabe
      @TimGabe  9 місяців тому

      thank you 🤩

  • @AaronHager
    @AaronHager 3 місяці тому

    Good one

  • @rabbysingh190
    @rabbysingh190 3 місяці тому

    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 😄

  • @madamecelindra
    @madamecelindra 5 місяців тому

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

  • @NicoloSodano
    @NicoloSodano 10 місяців тому +1

    Yes!

    • @TimGabe
      @TimGabe  9 місяців тому +1

      hope it taught you some stuff, nicolo!

  • @opeoluwaopeifa5069
    @opeoluwaopeifa5069 9 місяців тому +1

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

    • @TimGabe
      @TimGabe  9 місяців тому +1

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

  • @yuvrajsingh-gm6zk
    @yuvrajsingh-gm6zk 10 місяців тому +1

    Great countdown!😂

  • @dariopadula7612
    @dariopadula7612 9 місяців тому

    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!

  • @taunado
    @taunado 9 місяців тому

    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!

  • @edlin.o
    @edlin.o 4 місяці тому

    Is it possible to do it with pdf files?

  • @FloNocode
    @FloNocode 9 місяців тому +1

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

    • @TimGabe
      @TimGabe  9 місяців тому +1

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

  • @kartikeya.m9380
    @kartikeya.m9380 10 місяців тому +1

    When is ur full course comming out

    • @TimGabe
      @TimGabe  9 місяців тому +1

      early 2024, my friend!

  • @afreenshaikh938
    @afreenshaikh938 5 місяців тому

    1:26

  • @mohameddaoui6532
    @mohameddaoui6532 9 місяців тому

    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

  • @elduke2011
    @elduke2011 6 місяців тому +3

    Very complex 😅

    • @TimGabe
      @TimGabe  6 місяців тому

      cms is definitely hard in the beginning...

    • @Zaindkir
      @Zaindkir 23 дні тому

      Very complex tutoriel bro

  • @arm23an
    @arm23an 3 місяці тому

    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  3 місяці тому

      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 3 місяці тому

    rip webflow