Coastal Themes
Coastal Themes
  • 36
  • 26 676
How To Build a Responsive Framer Mobile Menu
In this video we'll take you through creating a mobile hamburger menu on your @Framer site.
Using component variants we can create a simple dropdown burger menu on mobile which has a changing icon.
Is there a specific topic that you'd like us to show you on @Framer? Get in touch with us!
🌊 Coastal Themes: coastalthemes.com/go/website/
🚀 Get Started with Framer! coastalthemes.com/go/framer/
🐥 Follow us on X: coastalthemes.com/go/twitter/
✉️ Mail us here: coastalthemes.com/go/email/
#coastalthemes #framer #responsivedesign
Переглядів: 95

Відео

Ghost for Beginners Part 2: How To Create A Custom Ghost Domain
Переглядів 2714 днів тому
Learn Ghost for beginners in our new series. In Part 2, learn how to buy a domain, and connect in to your ghost website so you have your very own custom domain. Ghost is a website builder perfect for blogging, allowing you to make pages and posts which you can lock behind paywalls. Is there a specific topic that you'd like us to show you on ‪@TryGhost ? Get in touch with us! 🌊 Coastal Themes: c...
Ghost for Beginners Part 1: How To Set Up Your Ghost Website
Переглядів 6121 день тому
Ghost is a website builder perfect for blogging, allowing you to make pages and posts which you can lock behind paywalls. Learn Ghost for beginners in our new series. In Part 1 we walk you through setting up a ghost website following their onboarding steps. Stay tuned for Part 2! Is there a specific topic that you'd like us to show you on ‪@TryGhost ? Get in touch with us! 🌊 Coastal Themes: coa...
How To Create an Exit Intent Popup in Framer
Переглядів 414Місяць тому
Exit intent popups are key for your @Framer website. Learn how to add this custom code to your assets so you can make any popup an exit intent one. This epic code resource is from framer.today and you can find it here: framer.today/resources/exit-intent-popup Is there a specific topic that you'd like us to show you on Framer? Get in touch with us! Check out our Framer & Ghost Themes! 🌊 Coastal ...
Learn the NEW Framer CMS Referencing Feature
Переглядів 155Місяць тому
@Framer's newest CMS referencing feature allows us to nest CMS items across collections. In this video, we show you how to connect a blog collection to an author collection - this lets us pull from a list of authors. We also dive into the multi-referencing on Framer, where we can create lists of items. Anything else you'd like to know about the new Framer CMS Referencing tool? Drop a comment be...
Framer SEO Basics To Optimize Your Site
Переглядів 276Місяць тому
In this video, we show you how to optimise SEO on your @Framer website. From HTML tags, alt text and meta info, we'll guide you through the SEO basics. Is there a specific topic that you'd like us to show you on ‪@Framer‬ ? Get in touch with us! 🌊 Coastal Themes: coastalthemes.com/go/website/ 🚀 Get Started with Framer! coastalthemes.com/go/framer/ 🐥 Follow us on X: coastalthemes.com/go/twitter/...
An Introduction to Parallax Effects in Framer
Переглядів 4252 місяці тому
Here's an introduction to implementing Parallax on @Framer - understand how to use scroll speed effects to create smooth scrolling that brings your Framer website to life. Once you understand the basics of scroll speeds, you can begin to apply speeds to different layers to make 3D looking effects. Is there a specific topic that you'd like us to show you on ‪@Framer‬ ? Get in touch with us! 🌊 Co...
Framer Essentials in Under 25 Minutes
Переглядів 3652 місяці тому
Here's some @Framer essentials in under 25 minutes, perfect if you're a beginner to Framer or just getting started. Explore the different offerings and core functions on Framer to help you get a few steps ahead in no time. 01:30 Pages 01:46 Layers 04:00 Responsive Screens 06:00 Assets & Components 07:55 Stacks & Layouts 10:40 Framer's CMS 15:20 Framer Elements 18:30 Frames, Rows, Columns & Grid...
An Advanced Guide to Absolute Positioning in Framer
Переглядів 3562 місяці тому
You asked, we delivered. Here's a deep dive into Framer's absolute positioning. Learn how to pin to frames, manage your parent and child elements and work with absolute elements in responsive designs. Is there a specific topic that you'd like us to show you on ‪@Framer‬ ? Get in touch with us! 🌊 Coastal Themes: coastalthemes.com/go/website/ 🚀 Get Started with Framer! coastalthemes.com/go/framer...
Making a Membership Site Using Ghost Website Builder
Переглядів 6 тис.2 місяці тому
Say hello to our @TryGhost theme, Misty! In this video we teach you how to use the Ghost editor, customize your theme, setup your membership paywalls and more. 00:00 Intro to Ghost 01:28 Dashboard 02:02 Customizing your theme 08:00 Paywall Settings & Connecting to Stripe 09:47 Paywalling Content 10:55 Membership Sign Up Settings 12:50 Exploring Page Templates Ghost is a website builder perfect ...
How To Build an Interior Design Website in Framer
Переглядів 2,8 тис.3 місяці тому
In this video we introduce you to our newest @Framer theme, Intor. This modern template is perfect for creating an interior design website. Join us as we show you how components are applied, as well as how to edit color styles, text styles and more! Is there a specific topic that you'd like us to show you on ‪Framer? Get in touch with us! Grab your very own copy of Intor the Figma file: coastal...
Learn How To Use Framer Forms in Under 10 Minutes
Переглядів 3943 місяці тому
@Framer brought out their new forms earlier this year and it's about time we gave you a quick tips session on how to use them. Learn how to use Framer forms and explore styling, functionality (such as connecting, Google Sheets, Webhook & Email) and other quick tips. Is there a specific topic that you'd like us to show you on Framer? Get in touch with us! 🌊 Coastal Themes: coastalthemes.com/go/w...
How To Add Video Backgrounds in Framer
Переглядів 4263 місяці тому
Learn how to place video backgrounds which play on page load. This creates a professional look for hero sections, banners and other spaces on your @Framer website where you need to add a touch of motion. A great addition for any portfolio site, photography or business page. Is there a specific topic that you'd like us to show you on Framer? Get in touch with us! 🌊 Coastal Themes: coastalthemes....
How To Build a Link-In-Bio Page with Framer
Переглядів 3094 місяці тому
Join us while we build a Link in Bio page from scratch using @Framer. This is a great way for designers to create a link in bio site that has a flexible design and is free to host using Framer. We also have our free @Framer template, Jeffrey available to remix and copy coastalthemes.com/go/link-in-bio/ Is there a specific topic that you'd like us to show you on Framer? Get in touch with us! 🌊 C...
Using Framer CMS for Dynamic Content on Static Pages
Переглядів 2794 місяці тому
In this video we'll explore how to use content on the @Framer CMS to feed into static pages. We make an about page and combine CMS content with regular content. This is perfect if you or your client want to manage content from one place without touching designed pages. Is there a specific topic that you'd like us to show you on Framer? Get in touch with us! 🌊 Coastal Themes: coastalthemes.com/g...
Using Framer CMS To Create Color-Coded Tag Pills
Переглядів 3094 місяці тому
Using Framer CMS To Create Color-Coded Tag Pills
An Introduction To Framer Breakpoints & Responsive Designs
Переглядів 3305 місяців тому
An Introduction To Framer Breakpoints & Responsive Designs
Figma to Framer Part 2: Importing Components, Fonts & Drop-Shadows
Переглядів 1695 місяців тому
Figma to Framer Part 2: Importing Components, Fonts & Drop-Shadows
Figma to Framer Part 1: How To Import Design Files
Переглядів 2115 місяців тому
Figma to Framer Part 1: How To Import Design Files
An Introduction to Absolute vs Relative Positioning in Framer
Переглядів 7335 місяців тому
An Introduction to Absolute vs Relative Positioning in Framer
How To Use Framer Component Variables
Переглядів 5275 місяців тому
How To Use Framer Component Variables
How To Add Scrolling Anchor Tags in Framer
Переглядів 9486 місяців тому
How To Add Scrolling Anchor Tags in Framer
How To Connect Mailchimp to Your Framer Site
Переглядів 5046 місяців тому
How To Connect Mailchimp to Your Framer Site
Using Framer Overlays To Add Popups & Dropdowns
Переглядів 2,5 тис.6 місяців тому
Using Framer Overlays To Add Popups & Dropdowns
An Introduction To Framer Components
Переглядів 2956 місяців тому
An Introduction To Framer Components
How To Implement Dynamic CMS Content in Framer
Переглядів 5476 місяців тому
How To Implement Dynamic CMS Content in Framer
An Introduction To Framer CMS
Переглядів 1226 місяців тому
An Introduction To Framer CMS
How To Add Shadow Effects in Framer
Переглядів 5216 місяців тому
How To Add Shadow Effects in Framer
How To Add Audio & Video in Framer
Переглядів 2,1 тис.6 місяців тому
How To Add Audio & Video in Framer
An Introduction To Framer Fonts & Typography
Переглядів 2156 місяців тому
An Introduction To Framer Fonts & Typography

КОМЕНТАРІ

  • @elegantscience
    @elegantscience День тому

    These are generally decent videos. But... you go through each sub-topic so quickly & move your cursor back & forth across the screen (zoomed in) so fast, that I have to stop and go back to see what you were just talking about. And things like "if you know Flex you'll know what these are..." then rushing on, is kind of unhelpful. Yes, I'm familiar with Flex, but not how those things necessarily work in Frames. Then pushing the cursor to another zoomed-in part of the screen, and half-explaining the next thing makes these tutorials feel a bit too rushed. So just a humble suggest: occasionally you might want to slow down a bit and take a breath, and maybe spend more time on granular specifics in a more step-by-step fashion. Thanks for making these.

    • @coastalthemes
      @coastalthemes День тому

      Thanks for the feedback we'll consider it for our upcoming videos for sure!

  • @DayDstrysNit
    @DayDstrysNit 3 дні тому

    Thank you! That is exactly what I needed to know. Thanks for just getting into it, being clear, and keeping it concise.

  • @devinbrown1841
    @devinbrown1841 4 дні тому

    Thanks!

  • @YasserShaaf
    @YasserShaaf 19 днів тому

    I’m very grateful for your detailed explanation

    • @coastalthemes
      @coastalthemes 14 днів тому

      No problem! We're glad it helped. Anything else you're wanting to learn in Framer?

  • @mj.7769
    @mj.7769 Місяць тому

    great vid! can you make one on how to create a scroll-triggered popup?

    • @coastalthemes
      @coastalthemes 28 днів тому

      Noted! We'll get to this -- but here's an EPIC resource I found today.... kanja.lemonsqueezy.com/checkout - mouse leave, scroll % and time delay.

  • @IJOBSUA
    @IJOBSUA Місяць тому

    Nice video! Which tool did you use to record this video? To have quick cursor movement and resizing, etc. Thanks in advance!

    • @coastalthemes
      @coastalthemes Місяць тому

      We used Screen Studio mate screen.studio/

  • @gorkemorg
    @gorkemorg Місяць тому

    Thanks a lot

  • @MiguelQueiros45
    @MiguelQueiros45 Місяць тому

    Make more content on SEO please, this is very helpful

  • @worksmart8166
    @worksmart8166 Місяць тому

    Can you please make more video about Framer SEO. Pleaseeee

  • @_Adam._
    @_Adam._ Місяць тому

    Have you seen the new Framer plugins? Have you used the Rive animation one and if so, would you make a tutorial/video on it? Thanks!

    • @coastalthemes
      @coastalthemes Місяць тому

      For sure!! Thanks for your comment. Anything specific you're after? Or just simply just how to add animations into sites using the plugin? (and make it nice)

    • @_Adam._
      @_Adam._ Місяць тому

      @@coastalthemes yeah just how to add them and make it look nice, etc! thanks heaps!

  • @bharat5194
    @bharat5194 Місяць тому

    Thanks

  • @dewhammer
    @dewhammer 2 місяці тому

    Thanx for a concise and informative video. Have you seen the Framer event page? A gorgeous parallax animation hits you from the beginning. As for parallax, I love it, well in theory, because across devices they may stutter and preform suboptimal. But when they work, it’s a beauty. 🎉

    • @coastalthemes
      @coastalthemes 2 місяці тому

      Hey! Glad you enjoyed the video and found it helpful. The Framer event page is stunning - on-page load float in + parallax = amazing. Thanks for sharing.

  • @wajahattaj
    @wajahattaj 2 місяці тому

    can you please make a tutorial on how to add youtube video on framer because i add it but it is not playing

    • @coastalthemes
      @coastalthemes Місяць тому

      If the video is set to autoplay, but it's not on mute, Chrome has a policy that it won't play. Try making sure it's muted if you want it to autoplay.

  • @crsmoore
    @crsmoore 2 місяці тому

    If you then at the end of this video create a Tablet view from the Mobile, would you have to do everything all over again, or will it be less of a problem than when you created the Mobile view from the Desktop one?

    • @crsmoore
      @crsmoore 2 місяці тому

      And THANK YOU for your videos on Framer! They’re very helpful. 🙌 🎉

    • @coastalthemes
      @coastalthemes 2 місяці тому

      Tablet is less of a problem, we find about half the time but you still need to work on it you can't just leave it :)

  • @laurakalmakoff
    @laurakalmakoff 2 місяці тому

    Thank you, omg

  • @pravinmedia8inproduction406
    @pravinmedia8inproduction406 2 місяці тому

    What is better using absolute or relative when we want more control over design?

    • @coastalthemes
      @coastalthemes 2 місяці тому

      Use relative position as much as possible and only switch to absolute when it's necessary for design elements that aren't an important part of the UX

  • @meh0_0
    @meh0_0 2 місяці тому

    hey, my desktop sizing isnt working well when i do this. does that happen? 'fit content' doesnt work, so i temporarily made it just really long so i could see my content. once everything was set, i tried 'fit content' again. no luck, the page was just extra long. I had more sections to add, once that's done, i'm back to my frames going outside the page... any fix or suggested resources i could look up? it doesn't scroll much either, stops pretty much at the top

    • @coastalthemes
      @coastalthemes 2 місяці тому

      Hey! Oh interesting. Do you have a layout applied to the desktop which organises your layers into a stack -- then apply fit content? It's tricky to tell without seeing what's going on so feel free to drop a remix link & we'll help you out if the above doesn't work.

    • @meh0_0
      @meh0_0 2 місяці тому

      @@coastalthemes Yes, the desktop's set to stack. Thanks for the reply

    • @meh0_0
      @meh0_0 2 місяці тому

      I think i got the fit content issue fixed, not sure why. i didn't change anything - reloaded, published, and changed fixed to fit content again and it just worked!

    • @coastalthemes
      @coastalthemes 2 місяці тому

      Hey - glad the content issue is fixed though! Sometimes things just need to be switched off and on again. Plain text, by default, is unformatted so if you're wanting paragraphs and more structural flexibility then we would recommend you use the "Formatted Text" CMS field.

    • @meh0_0
      @meh0_0 2 місяці тому

      @@coastalthemes Thank you so much! My last question (hopefully🤞), can I set this up as a page? Is it possible to make it my home page? Right now I have a Home and /collection.. when i set the /collection as a page, it's a blank page with the cms content below it. setting this as home page, the collection remains there and the blank page is the new home screen. edit: Only the index works as a page?

  • @Trazynn
    @Trazynn 2 місяці тому

    You can go even more advanced by making absolute objects allign with other objects that have max or min widths assigned to them. That's great for when you have a lot of graphical elements (like a splatter of paint) that you want to keep away from text or buttons.

    • @coastalthemes
      @coastalthemes 2 місяці тому

      Oh that's so smart, a good way to make it dynamic but keep it clean, thanks @Trazynn!

  • @_Adam._
    @_Adam._ 2 місяці тому

    When is the Absolute positioning video coming out? Struggling to make mine responsive.

    • @coastalthemes
      @coastalthemes 2 місяці тому

      Heya @_Adam._ we have an advanced absolute positioning video dropping tomorrow. Hopefully it helps and let us know if it solves your troubles on the responsive side!

  • @CameronCalder-v3z
    @CameronCalder-v3z 2 місяці тому

    Have you had any thought for how you could do this with multiple tags per post?

    • @coastalthemes
      @coastalthemes 2 місяці тому

      Sure, we are just thinking about it and will update you here.

    • @CamCalder-t2z
      @CamCalder-t2z 2 місяці тому

      ​@@coastalthemesif you get stuck let me know, I've done it

    • @chrishodson2748
      @chrishodson2748 Місяць тому

      Could you let me know how you managed to do it with multiple tags? I'm struggling with that atm

  • @CameronCalder-v3z
    @CameronCalder-v3z 2 місяці тому

    What editing tool do you use?

    • @coastalthemes
      @coastalthemes 2 місяці тому

      For our videos we're using Screen Studio: www.screen.studio/

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

    thanks, this is helpful, could u plz make a video about how to deliver a website "Project" to a client. in details

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

      Of course @LanguagedesignLearn, can you explain more about what you'd like to see? Transferring the site? What settings to use? etc?

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

      @@coastalthemes Delivering the website, transferring and settings if u can

  • @denitsab.9815
    @denitsab.9815 3 місяці тому

    I'd love to see a framer form - make - mailchimp webhook tutorial, since nobody seems to have done it yet. I've been looking everywhere.

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

    Showw

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

    Clean video, new sub here. What software you using to edit videos?

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

      Thank you that's so kind! We use Screen Studio, it's been a great tool!

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

    Just wanted to say how absolutely grateful I am to this channel and video. For some reason, my brain wasn't comprehending how positioning works, and FINALLY I experienced that ah-ha moment! Working on my UX portfolio and your channel has been such a big help. Thank you ❤

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

      That's amazing it's only a pleasure and we have more on the way! Is there anything you'd like us to cover on top of what we've already done?

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

    Great tutorial! Thanks!

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

      Thank you so much @jamesmonroedesign, do you have any topics you'd like us to cover?

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

    Loving the content!

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

    how can i create a exit-intent pop-up on framer ?

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

      Heya Danny! It's possible with Gestures which requires some code: www.framer.com/motion/gestures/ In Framer's words: "You can design a popup overlay that appears when the user's mouse leaves the page. This can be achieved by setting up an interaction that triggers the popup when the mouse cursor moves outside the boundaries of the page." In the meantime, we'll consider putting a video together for it!

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

      @@coastalthemes thanks for the info ! Im new using framer, thats a little complicated for me, I’ll be waiting for that video! 🤩

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

    Great tutorial! I'm learning so much from your content. Wishing you continued success!

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

      That means so much, thanks Dave!

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

    Thanks for the lengthy and clear tutorial!

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

      Ah thanks Rob, that means so much!

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

    If you had the time it'd be amazing if you made a full framer tutorial for reasonably large website.Everyone else gate keeps information but not you though🔥👍

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

      Great suggestion! We're planning one soon, and we're planning a Link in Bio tutorial from scratch!

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

    You haven't posted in a while whats going on?😭

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

      Victoria is away, we'll have more coming up soon that you'll really enjoy!

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

      🎙 is this thing on... we're back with a much longer tutorial! Check it out in our profile :)

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

    Thank you for this!

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

    W tutorial

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

    hey thanks for the information 👏

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

    i pretty much skip this step and straight up raw dog directly on Framer instead

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

      never looked back since

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

      Savage, but once you're comfortable with Framer, that makes total sense! So many designers are such Figma power users that the workflow isn't as seamless, I think this is a great midway to learning the platform :)

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

    gem, subbed!

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

    Can you guys make a tutorial on how to use code overrides?

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

      That's a great idea, thanks mate!

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

    Your channel is a goldmine!

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

      Thanks so much, we can't wait to release more videos that'll empower the community :)

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

    This video is very informative. Thanks