MENU

Fun & Interesting

Crash Course on Framer CMS (Beginner Tutorial)

Tim Gabe 40,480 2 years ago
Video Not Working? Fix It Now

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

Comment