- 36
- 26 676
Coastal Themes
Приєднався 5 тра 2024
Bite-sized videos which will help you get started with Framer, Ghost, and other platforms. Starting with beginner tips to more advanced tutorials, we want to help you get the most out of building your site.
Coastal Themes is a premium theme company based in Cape Town, South Africa. We design, develop and distribute premium Framer themes and premium Ghost themes which are beautiful, easy to use, and quick to setup.
Coastal Themes is a premium theme company based in Cape Town, South Africa. We design, develop and distribute premium Framer themes and premium Ghost themes which are beautiful, easy to use, and quick to setup.
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
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
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
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.
Thanks for the feedback we'll consider it for our upcoming videos for sure!
Thank you! That is exactly what I needed to know. Thanks for just getting into it, being clear, and keeping it concise.
Thank you!
Thanks!
You're welcome!
I’m very grateful for your detailed explanation
No problem! We're glad it helped. Anything else you're wanting to learn in Framer?
great vid! can you make one on how to create a scroll-triggered popup?
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.
Nice video! Which tool did you use to record this video? To have quick cursor movement and resizing, etc. Thanks in advance!
We used Screen Studio mate screen.studio/
Thanks a lot
Most welcome :)
Make more content on SEO please, this is very helpful
Thanks we're working on it!
Can you please make more video about Framer SEO. Pleaseeee
Of course, we're working on it!
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!
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)
@@coastalthemes yeah just how to add them and make it look nice, etc! thanks heaps!
Thanks
No problem!!!
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. 🎉
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.
can you please make a tutorial on how to add youtube video on framer because i add it but it is not playing
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.
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?
And THANK YOU for your videos on Framer! They’re very helpful. 🙌 🎉
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 :)
Thank you, omg
We are so happy to help!
What is better using absolute or relative when we want more control over design?
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
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
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.
@@coastalthemes Yes, the desktop's set to stack. Thanks for the reply
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!
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.
@@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?
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.
Oh that's so smart, a good way to make it dynamic but keep it clean, thanks @Trazynn!
When is the Absolute positioning video coming out? Struggling to make mine responsive.
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!
Have you had any thought for how you could do this with multiple tags per post?
Sure, we are just thinking about it and will update you here.
@@coastalthemesif you get stuck let me know, I've done it
Could you let me know how you managed to do it with multiple tags? I'm struggling with that atm
What editing tool do you use?
For our videos we're using Screen Studio: www.screen.studio/
thanks, this is helpful, could u plz make a video about how to deliver a website "Project" to a client. in details
Of course @LanguagedesignLearn, can you explain more about what you'd like to see? Transferring the site? What settings to use? etc?
@@coastalthemes Delivering the website, transferring and settings if u can
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.
Showw
✌
Clean video, new sub here. What software you using to edit videos?
Thank you that's so kind! We use Screen Studio, it's been a great tool!
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 ❤
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?
Great tutorial! Thanks!
Thank you so much @jamesmonroedesign, do you have any topics you'd like us to cover?
Loving the content!
Thank you so much Wisani!
how can i create a exit-intent pop-up on framer ?
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!
@@coastalthemes thanks for the info ! Im new using framer, thats a little complicated for me, I’ll be waiting for that video! 🤩
Great tutorial! I'm learning so much from your content. Wishing you continued success!
That means so much, thanks Dave!
Thanks for the lengthy and clear tutorial!
Ah thanks Rob, that means so much!
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🔥👍
Great suggestion! We're planning one soon, and we're planning a Link in Bio tutorial from scratch!
You haven't posted in a while whats going on?😭
Victoria is away, we'll have more coming up soon that you'll really enjoy!
🎙 is this thing on... we're back with a much longer tutorial! Check it out in our profile :)
Thank you for this!
It's only a pleasure!
W tutorial
Yes, a W! 🏆 🙌
hey thanks for the information 👏
Thanks so much! 😊
i pretty much skip this step and straight up raw dog directly on Framer instead
never looked back since
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 :)
gem, subbed!
You're a star thank you!
Can you guys make a tutorial on how to use code overrides?
That's a great idea, thanks mate!
Your channel is a goldmine!
Thanks so much, we can't wait to release more videos that'll empower the community :)
This video is very informative. Thanks
Ah thanks Tarek!