Ryan Hayward
Ryan Hayward
  • 55
  • 360 484
Framer Tutorial: Responsive Navigation Bar
Get my Framer course 👉 ultimateframercourse.com/
More Framer products 👉 insertframe.io/
In this Framer tutorial, I share the best way to build a responsive navbar / navigation bar in Framer with a collapsible dropdown menu.
Got any questions? Drop them below or DM me on X @theryanhayward
Cya,
Ryan ✌️
มุมมอง: 1

วีดีโอ

Everything we made this year in Framer (2024 Review)
มุมมอง 774วันที่ผ่านมา
Products mentioned in this video: FramerForms (framerforms.com/) Superfields (superfields.io/) Thenty (thenty.io/) Videoframe (videoframe.io/) Frameship (frameship.io/) My Framer Course (ultimateframercourse.com/) Framer Career Course (framercareercourse.com/) Thank you all for an amazing 2024. Can't wait to create Framer tutorials for you all in 2025! See you then!
Make Money with Framer | Course Trailer
มุมมอง 1.6Kหลายเดือนก่อน
Enroll now 👇 framercareercourse.com/ The complete course on building & scaling a Framer business. Learn to make more money and become a more valuable Framer designer. In this course, you will learn everything to build and grow a serious Framer venture, from launch to scale. From selling sites to clients, to growing a team, this is the program for those willing get serious about Framer. I can't ...
Framer Tutorial: Build E-Commerce Sites in Framer (Shopify)
มุมมอง 6Kหลายเดือนก่อน
Frameship plugin 👇 www.framer.com/marketplace/plugins/frameship 5sty6o8n22smpbcb4oypsggk6 Frameship website 👇 frameship.io/ In this Framer tutorial, I teach you how to build an ecommerce website in Framer with Shopify. The tutorial uses the Frameship plugin on the Framer marketplace. Got any questions? Drop them below! Your Framer teacher, Ryan ✌️
Framer Tutorial: Creating Bento Grids
มุมมอง 2.2Kหลายเดือนก่อน
Framer Masterclass 👉 ultimateframercourse.com/ Duplicate this project: framer.com/projects/new?duplicate=myYPawSahoNs75rSviD3 In this Framer tutorial, I teach how to build a bento grid in Framer. Got a question? Drop it below! Love ya all, Ryan ✌️
Learn Framer in 18 Minutes (Crash Course) 2025
มุมมอง 14K2 หลายเดือนก่อน
Duplicate this project in Framer: ultimateframercourse.com/crash-course Enroll in the Ultimate Framer Masterclass (on sale) 👇 ultimateframercourse.com/ In this Framer tutorial, I share a crash course on the fundamentals of Framer. Learn sizing, positioning, layout, breakouts and more in this Framer tutorial. Got any questions? Fire away in the comments 🔥 Want more Framer power ups? insertframe....
bts: building a Framer business
มุมมอง 1.8K2 หลายเดือนก่อน
In this video, I share a behind the scenes look at running our Framer led business, Insert Frame. We build products & education for Framer and in this series we're bringing you on that journey with us. Learn more about Insert Frame 👇 insertframe.io/ Let me know if you want more of this type of content! - Ryan :)
Framer Tutorial: CMS References
มุมมอง 2.7K3 หลายเดือนก่อน
Get Framer power ups: insertframe.io More on Framer Plugins: framerplugins.io In this Framer tutorial, I teach how to use the new Framer CMS reference multi reference field. Got a question? Ask below :)
How to use Framer Plugins (NEW)
มุมมอง 1.5K3 หลายเดือนก่อน
In this Framer tutorial I share how to use the new Framer Plugins! My top plugins 👇 1. FramerForms (www.framer.com/marketplace/plugins/framerforms/) 2. Thenty (www.framer.com/marketplace/plugins/thenty/) 3. Ditter (www.framer.com/marketplace/plugins/dither/) All plugins: www.framer.com/marketplace/plugins More on Framer Plugins: framerplugins.io/ Enjoy! :)
Framer Tutorial: Parallax Hover Effects Made Easy
มุมมอง 1K3 หลายเดือนก่อน
Learn how to create eye-catching parallax hover effects in Framer led by ‪@framer.university‬ In this tutorial, we'll cover: - Setting up your Framer project for parallax effects - Designing a parallax hover effect from scratch - Best practices for smooth and responsive animations - Tips for making your designs more interactive and engaging Take your Framer skills to the next level and impress ...
Framer Tutorial: Custom Video Players
มุมมอง 1.9K3 หลายเดือนก่อน
Get VideoFrame 👉 videoframe.io In this Framer tutorial, I teach how to create custom branded video players in Framer that works with HTML, URL, TH-cam or Vimeo. Customise TH-cam videos in Framer Customise Vimeo videos in Framer Customise HTML videos in Framer Want more Framer goodies? 👇 insertframe.io Ryan ✌️
Framer Tutorial: Animate Buttons Like a Pro
มุมมอง 3K5 หลายเดือนก่อน
Unlock the power of Framer with this in-depth tutorial on button animation, led by @framer.university In this tutorial, we'll cover: - Setting up your Framer project - Designing a basic button - Adding interactive animations - Tips and tricks for smooth animations Power up Framer Projects 👉 insertframe.io Lots of valuable insights in this video - hope you enjoy. - Ryan :)
Framer Tutorial: Add light / dark mode to your site
มุมมอง 4.9K6 หลายเดือนก่อน
Ultimate Framer Masterclass 2.0 👉 ultimateframercourse.com/ In this Frame tutorial I share how to create a light / dark mode toggle for your Framer website. Ask any Framer questions below and I'll try my best to get back to them! :)
Framer Tutorial: Scroll Sections
มุมมอง 11K7 หลายเดือนก่อน
Framer Tutorial: Scroll Sections
Ultimate Framer Masterclass 2.0 | Course Trailer
มุมมอง 2.1K7 หลายเดือนก่อน
Ultimate Framer Masterclass 2.0 | Course Trailer
Building your first Framer site (Crash Course)
มุมมอง 14K7 หลายเดือนก่อน
Building your first Framer site (Crash Course)
Framer Tutorial: CMS Pagination
มุมมอง 2.2K8 หลายเดือนก่อน
Framer Tutorial: CMS Pagination
Learn the Framer CMS in 10 minutes! (Crash Course)
มุมมอง 22K8 หลายเดือนก่อน
Learn the Framer CMS in 10 minutes! (Crash Course)
Framer Tutorial: CREATIVE Custom Cursor Effect
มุมมอง 4K9 หลายเดือนก่อน
Framer Tutorial: CREATIVE Custom Cursor Effect
Do this to become a Framer expert
มุมมอง 2.4K9 หลายเดือนก่อน
Do this to become a Framer expert
I interviewed the founder of Framer
มุมมอง 1.8K9 หลายเดือนก่อน
I interviewed the founder of Framer
Framer Tutorial: Add file uploads to forms
มุมมอง 4.9K10 หลายเดือนก่อน
Framer Tutorial: Add file uploads to forms
Conference for Framer creators (free) | Official Trailer
มุมมอง 58510 หลายเดือนก่อน
Conference for Framer creators (free) | Official Trailer
5 Time Saving Tricks Every Framer Designer Should Know
มุมมอง 2.6K10 หลายเดือนก่อน
5 Time Saving Tricks Every Framer Designer Should Know
Scroll Variants Made This POWERFUL Framer Effect (Tutorial)
มุมมอง 4.8K11 หลายเดือนก่อน
Scroll Variants Made This POWERFUL Framer Effect (Tutorial)
Do NOT make these Framer template mistakes...
มุมมอง 4.2K11 หลายเดือนก่อน
Do NOT make these Framer template mistakes...
BEST 6 Framer Updates of 2023
มุมมอง 701ปีที่แล้ว
BEST 6 Framer Updates of 2023
Framer Tutorial: Multi Step Forms
มุมมอง 4.1Kปีที่แล้ว
Framer Tutorial: Multi Step Forms
This tool builds sitemaps with AI 🤯 (Octopus.do)
มุมมอง 2.1Kปีที่แล้ว
This tool builds sitemaps with AI 🤯 (Octopus.do)
Create custom forms in Framer
มุมมอง 16Kปีที่แล้ว
Create custom forms in Framer

ความคิดเห็น

  • @SohelLunat
    @SohelLunat 7 ชั่วโมงที่ผ่านมา

    thank u so much i need this tutorial

  • @youngkingc4086
    @youngkingc4086 14 ชั่วโมงที่ผ่านมา

    Since you're using both Shopify and Framer, and you need to connect Shopify to Framer using the Frameship plugin, I’m wondering: where should I purchase the hosting? Should I get it through Shopify or through Framer?

  • @AkinsRealm
    @AkinsRealm 17 ชั่วโมงที่ผ่านมา

    Exciting stuff, can't wait! 🙌

  • @eti_Uduot
    @eti_Uduot วันที่ผ่านมา

    This is all the course I need 😂

    • @ryanhayward3488
      @ryanhayward3488 5 ชั่วโมงที่ผ่านมา

      hahaha love it!

  • @eddiec8753
    @eddiec8753 2 วันที่ผ่านมา

    This is a real tutorial, that doesn’t assume you know things. Standing ovation 👏

    • @ryanhayward3488
      @ryanhayward3488 5 ชั่วโมงที่ผ่านมา

      Thank you so much!

  • @kristenziolko4790
    @kristenziolko4790 2 วันที่ผ่านมา

    Is it possible to usr a thumbnail image and then hover to show a select portion of a video?

  • @EessaUsman-f8j
    @EessaUsman-f8j 3 วันที่ผ่านมา

    this is the only video i found helpful for me

  • @sohellunat4644
    @sohellunat4644 4 วันที่ผ่านมา

    Your work is excellent and deserves a significantly larger subscriber base. The tutorial is exceptional.

  • @sk3946
    @sk3946 5 วันที่ผ่านมา

    Nice 👍

  • @MD.ImranIslamShah
    @MD.ImranIslamShah 7 วันที่ผ่านมา

    hey, is it any possible to make "Animation timeline`` as plug-in into Framer. i think this will help motion designer.

  • @dunkley7776
    @dunkley7776 9 วันที่ผ่านมา

    Incredible work. Planning on switching to Framer and your plugins are super useful. Thank you!

  • @dunkley7776
    @dunkley7776 9 วันที่ผ่านมา

    God tier content! Thank you, subscribed.

  • @honey6360
    @honey6360 9 วันที่ผ่านมา

    i don't want the modal pop-up for search. my reference "spotify web search bar", I want to create the search experience just like spotify search, how can I do that? Thanks for Help

  • @SsamCartier
    @SsamCartier 11 วันที่ผ่านมา

    Thank u brother

  • @BuildwithOmar
    @BuildwithOmar 12 วันที่ผ่านมา

    Crushed it man! Proud user of Superfields & Video Frame! Can't wait to see what you do in 2025!

  • @almighty.saumya
    @almighty.saumya 12 วันที่ผ่านมา

    Congratulations :)

  • @asdf4a
    @asdf4a 12 วันที่ผ่านมา

    excited for 2025! Happy Holdidays!

  • @samuel-tome
    @samuel-tome 13 วันที่ผ่านมา

    Y'all forgot to provide the code override :( link?

  • @shubrank
    @shubrank 13 วันที่ผ่านมา

    Hey Ryan, what do you use to record the screen + show your face in the box + add that nice background?

    • @ryanhayward3488
      @ryanhayward3488 5 ชั่วโมงที่ผ่านมา

      Screenflow!

  • @km55en5ei
    @km55en5ei 15 วันที่ผ่านมา

    Waste of time, signed up for nothing

  • @richiesun9676
    @richiesun9676 15 วันที่ผ่านมา

    I have a component from a template that has cms fields linked. But I added a new cms field, but can't see the new field when I go to 'set variable'. Any idea how to get it to show?

    • @richiesun9676
      @richiesun9676 15 วันที่ผ่านมา

      Field is an option field.

  • @Benji-Lindz
    @Benji-Lindz 16 วันที่ผ่านมา

    This looks like Auto-Layout: The Website Builder, and I am HERE FOR IT.

  • @See_thru_it_all
    @See_thru_it_all 16 วันที่ผ่านมา

    I'd love to see real-world uses with Thenty. EXAMPLE: Is there a way to allow users to input information about themselves in their dashboard and then have that information displayed on a public facing page much like LinkTree, or how MySpace functioned? Thanks!

  • @stephaniebarge6109
    @stephaniebarge6109 18 วันที่ผ่านมา

    Hello, Nice Video, is it possible to put flag for choosing several languages ?

  • @venzyxyz
    @venzyxyz 21 วันที่ผ่านมา

    Hi Ryan, how can i remove the little banner that appears on scroll of my website after which is coming from the frameship plugin? I can't seem to figure it out, i have'nt installed anything or used any snippets of code from Frameship, i even disconnected my shopify store and it still appears and it's annoying...

  • @venzyxyz
    @venzyxyz 21 วันที่ผ่านมา

    Hi Ryan. I love your tutorials. I've been trying to create a pop up modal where the customer clicks on a Download Now button and an overlay checkout page appears on the same page, or side peeks for xample. I've been trying to find tutorials on that but I couldn't figure it out or find anyone who explains this. Is it achieve through the same process and by embedding a code inside the modal or it's something completely different?

  • @SuperSurreal
    @SuperSurreal 23 วันที่ผ่านมา

    Very helpful! Thank you very much!

  • @yana_ivanov
    @yana_ivanov 23 วันที่ผ่านมา

    they change the rate, i paid but now its asking for another $39 for upload extension :(

  • @ak-loz
    @ak-loz 23 วันที่ผ่านมา

    So with this solution you'd have to pay for BOTH shopify and framer?

  • @Sanger2007
    @Sanger2007 23 วันที่ผ่านมา

    I dont know why you guys dont mention the prices of these things. $80!!!! that's not something you don't mention.

  • @nickgazendam7321
    @nickgazendam7321 23 วันที่ผ่านมา

    Hi, Anybody knows what type of File upload link you can use? In the video Ryan is using FormSpree.. can I also use google docs What are the options?

  • @vandanat9705
    @vandanat9705 24 วันที่ผ่านมา

    Can you please share the remix link that you said is below the video? I can't seem to find it?

  • @vishrutsharma9135
    @vishrutsharma9135 26 วันที่ผ่านมา

    Even though I've been using Framer for some time, a few minute concepts weren’t entirely clear. Thanks for clearing them up, bro !

  • @johnnydiaz6758
    @johnnydiaz6758 27 วันที่ผ่านมา

    At 4:55 You say to drag the product page stack from the left and drag it onto the canvas. It doesn't allow me to do that? Every time I try to drag it over and drop it to the canvas nothing happens. So I just selected the product page that was thrown in the gray area and dragged that under my Nav bar. I begun to add all the set variables as shown and they were appearing as they show. Price, Title and Image Ect. So I thought I was in the clear until I published as you suggested to view my functional product page.. However I just see the Navigation Bar and a blank white page below. What am I missing?

  • @albertoalfak
    @albertoalfak 28 วันที่ผ่านมา

    I'm still using a free plan and it seems like I can't access to all those controls. Switching to a paid plan would unlock them?

  • @gangster3915
    @gangster3915 29 วันที่ผ่านมา

    It's not free.

  • @webestdesigner
    @webestdesigner 29 วันที่ผ่านมา

    How to set the dark mode as default?

  • @akashchopperla9809
    @akashchopperla9809 29 วันที่ผ่านมา

    By the way what software do you use for streaming

  • @akashchopperla9809
    @akashchopperla9809 29 วันที่ผ่านมา

    And a recommandation. I think there is no 404 page for insertframe website. It is showing framer 404 page

  • @akashchopperla9809
    @akashchopperla9809 29 วันที่ผ่านมา

    I want to know the users create account and after book the product they can view ordered products, change their locations, etc

  • @TechYasser
    @TechYasser หลายเดือนก่อน

    Where are the assets of this project ?

  • @coffeeecatsss
    @coffeeecatsss หลายเดือนก่อน

    I have an index for my CMS (collection list) that includes a carousel of images. I want users to move to the detail page only when they click the button, but I encountered a problem where clicking on the carousel images also redirects to the detail page. How can I set it so that only the button triggers the navigation to the detail page?

  • @drakZes
    @drakZes หลายเดือนก่อน

    What is the point in building website with Framer and linking it to Shopify as to just use Shopify and build a website through Shopify?

  • @abahvictor5130
    @abahvictor5130 หลายเดือนก่อน

    For some of us who can’t yet pay for framer courses this means a lot

  • @abahvictor5130
    @abahvictor5130 หลายเดือนก่อน

    Definitely need another part, thank you so much for this

  • @russellnz06
    @russellnz06 หลายเดือนก่อน

    This was better

  • @russellnz06
    @russellnz06 หลายเดือนก่อน

    This was a tutorial for blogs. Not the Framer CMS itself.

  • @AkedoNiko
    @AkedoNiko หลายเดือนก่อน

    starts at 16:05 for anyone wondering

  • @Saintncl
    @Saintncl หลายเดือนก่อน

    Does it mean that checkout will always redirect the customer to a shopify checkout?