- 26
- 5 056
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 an Interior Design website on Framer
In this video we introduce you to our newest @Framer theme, Intor.
We show you how components are applied, how to edit colour 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: coastalthemes.com/template/intor/
🌊 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/
We show you how components are applied, how to edit colour 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: coastalthemes.com/template/intor/
🌊 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/
Переглядів: 106
Відео
How to use Forms on Framer in under 10 minutes
Переглядів 14121 день тому
@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, explore styling your forms, 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.c...
How to make Video Backgrounds on Framer
Переглядів 9921 день тому
Learn how to place video backgrounds which play on page load. This looks professional behind hero sections, banners and more 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.com/go/...
Building a Link in Bio website from scratch with Framer
Переглядів 182Місяць тому
Join us while we build a Link in Bio website from scratch using @Framer. This is a great way for designs to build a link in bio that has a flexible design and free to host using Framer. We also have our free @Framer template, Jeffrey available to remix and copy all you like 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...
Using the Framer CMS with static pages for dynamic content
Переглядів 812 місяці тому
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...
Creating colorful Tag Pills with the Framer CMS
Переглядів 862 місяці тому
Liven up your blog post cards with color coded pills which dynamically update when you upload a new post. This is one of the many ways you can utilize the @Framer CMS. 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.c...
Breakpoints & Responsive Design for mobile and tablets in @Framer
Переглядів 1212 місяці тому
In this video we'll show you responsive design, break points and how to adjust your content to fit different screen sizes. 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...
Importing components, fonts & drop-shadows from Figma to Framer
Переглядів 622 місяці тому
In this video, we'll show you how to fix some common issues when copying your @Figma designs into @Framer In Part 2, we look at styles, components, fonts, drop-shadows & gradients. 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: co...
Importing a design from Figma to Framer
Переглядів 683 місяці тому
In this video, we'll show you how to prepare your @Figma files for copying them into @Framer In Part 1, we look at auto-layout and sizing properties to ensure you're setting up your file for copying over. Be sure to download the Framer plugin for this tutorial: www.figma.com/community/plugin/1037108608720448600 Is there a specific topic that you'd like us to show you on @Framer? Get in touch wi...
A beginners guide to Absolute vs Relative positioning using Framer
Переглядів 2223 місяці тому
In this video, we'll work through the difference between absolute and relative positioning on @Framer These two positioning types can often get confusing but once you understand how to use them and what they're for, you can use them to your design advantage. Not only is absolute and relative positioning important for Framer sites, but if you ever decide to use CSS, you'll have a great base unde...
How to use Component Variables with Framer
Переглядів 1713 місяці тому
In this video, we'll talk about adding flexibility to your components on @Framer The asset library is your one source of truth, but giving yourself flexibility is essential to having a swift design flow in @Framer. Use variables to keep components attached to your asset library while still making essential changes to content, design properties and more. Is there a specific topic that you'd like...
How to add a Scrolling Anchor Tag to your Framer site
Переглядів 2813 місяці тому
In this video, we'll talk about adding anchor tags to your @Framer Site. Anchor tags are necessary for navigation. When you use an anchor tag, you enable navigation directly to that section, which is pivotal when focussing your users' attention to a specific section like a CTA, form or video. Is there a specific topic that you'd like us to show you on @Framer? Get in touch with us! 🌊 Coastal Th...
How to easily Add MailChimp to your Framer site
Переглядів 1883 місяці тому
In this video we'll take you through the steps of linking a @mailchimp form to your @Framer website. Linking MailChimp to you @Framer forms means that you can populate your subscriber list with a totally native experience right on your site. This is fantastic, it means that users will have a safe and trusting experience. Is there a specific topic that you'd like us to show you on @Framer ? Get ...
Adding Popups & Dropdown menus to your Framer site using overlays
Переглядів 6173 місяці тому
In this video we'll take you through using overlays on your @Framer site. An overlay can be a popup, modal, dropdown or toast, with each one being important when thinking about the user experience of your site. A popup is great for showing a signup form, while a modal is great for additional information. A drop down is used for menus, and finally a toast is used to show a success or fail notice...
Introduction to Dynamic Components in Framer using the CMS
Переглядів 873 місяці тому
In this video we'll introduce you to the concept of components in Framer. Components are useful because they can be re-used across your site, for example setting up a header, footer or sidebar would be a great use-case for components, helping you create a seamless experience across your entire @Framer site. Is there a specific topic that you'd like us to show you on @Framer ? Get in touch with ...
How to use Dynamic CMS Content in your Framer site
Переглядів 2283 місяці тому
How to use Dynamic CMS Content in your Framer site
How to add Shadows to frames & other elements in your Framer site
Переглядів 2263 місяці тому
How to add Shadows to frames & other elements in your Framer site
How to add Audio & Video to your Framer site
Переглядів 9774 місяці тому
How to add Audio & Video to your Framer site
An introduction to Fonts & Typography in Framer
Переглядів 494 місяці тому
An introduction to Fonts & Typography in Framer
How to add Hover Effects to buttons on Framer
Переглядів 2444 місяці тому
How to add Hover Effects to buttons on Framer
Using Grids in Framer for better layouts
Переглядів 404 місяці тому
Using Grids in Framer for better layouts
Using Stacks to add rows & columns to your Framer site
Переглядів 2154 місяці тому
Using Stacks to add rows & columns to your Framer site
Adding Collaborators & team members to your Framer site
Переглядів 544 місяці тому
Adding Collaborators & team members to your Framer site
How to add a Background in Framer using the fill property
Переглядів 3284 місяці тому
How to add a Background in Framer using the fill property
How to add a Button to your Framer site
Переглядів 1664 місяці тому
How to add a Button to your Framer site
Have you had any thought for how you could do this with multiple tags per post?
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!