Framer: Learn to Make Beautiful Websites in Minutes Using AI

1. Introduction: Welcome to an extraordinary journey into the future of design. Welcome to Framer today. I'm here to unveil the innovation that sets Framer apart from the rest. And it all boils down to one game changing feature, AI power. Hey, I'm Ellis and I've been working in web design for over two years and I have a degree in digital media. I have used many different platforms from wakes and square space to webflow. And Framer really does stand apart, a platform that understands your vision with a simple prop. Within moments you have a fully functioning, uniquely tailored website at your fingertips. That's the magic of framer's AI. But let's not stop. Let me take you on a quick journey through what you're about to learn from crafting personalized websites, effortlessly harnessing the power of AI for content management to master advanced customization. This is your roadmap to become a design guru, we'll cover everything from creating blocks with chat GPT's aid, to seamlessly customizing your websites elements For a truly unique touch, you'll dive deep into the nitty greedy of design enhancing navigation, perfecting sections, and even mastering the media integration. So are you ready to seize the power of framer and ride the wave of AI powered design innovation? This journey is about to reshape the way you create websites forever. It's time to unlock your creativity. 2. History of UI UX Design: So in this video, we're going to take a trip down the memory lane, where we're going to dive into the cool story of how UI UX design has evolved over time. It's a journey from the early blips of technology to the sleek and user friendly interfaces we enjoy today. This is the history of user interface and user experience design. All right, let's kick things off. In the 1960s, back then, people like Douglas Engelbart were laying the groundwork for what would become our modern interfaces. It was the era of clunky machines and basic graphics. Far cry from what we're used to now. Fast forward to the '80s were apples making waste with the Macintosh. This is when those clickable icons and Windows started becoming a thing. Suddenly computing got a whole lot more visual as we roll into the 2000 mobile phones take center stage. Remember those good al Nokia phones, They were the trailblazers of mobile user interface. The times of texting Nine style. A bit quirky but oh so nostalgic. But hold up, it's 2007 and Apple drops the iphone bomb touchscreens and pinch to zoom become all the rage. It's like we've jumped into the future, right? Mobile devices start changing the whole UI game. And guess what? Here we are today with Abscalore social media and gadgets that talk to us. A UX designers are working hard to make our digital life smooth and enjoyable. It's all about getting that app to feel just right when you tap the screen. Looking ahead, we've got some wild stuff coming our way. Augmented reality and virtual reality are peeking around the corner soon. It won't just be about tapping and swiping. You might be waving at your gadgets to make things happen. Through all of this, it's the designers who've been the real MVPs, they've been crafting, how we interact with tech, making sure it's not just functional but looks good too. So there you have it. The history of user interface and user experience design. Hope you have fun strolling through the tech timeline with me and I'll see you in the next video. 3. Why Framer?: This video, we're diving deep into the world of website creation. We'll be exploring popular options like Quick Square, Space, Webflow, and a newcomer with an AI twist framer. By the end of this video, you'll have a clearer idea of what each platform offers and why Framer might just stand out. So let's jump right in. When it comes to building websites, you've got options galore, Wick and square space are user friendly choices, perfect for those without extensive coding skills. They offer dragon drop interfaces, predesigned templates, and easy to use tools to get your site up and running swiftly. Then there's Webflow, a powerful tool for those who want more control. With Webflow, you're working in a visual interface while having access to code level customization. It's like a bridge between design and development, offering flexibility and creative freedom. Here's where things get interesting. Framer, traditionally known for his prototyping prowess, has shaken things up. Imagine typing a simple prompt and voila, and AI generates a fully editable website for you. It's a concept that's changing the game. Why might you choose Framer over the others? Well, imagine the possibilities with framer's AI, you're not just picking templates. You're generating custom layouts based on your ideas. You're not stuck with preset styles. You have a starting point that's uniquely yours. While Wicks, Square space, and Webflow have their strengths, Framer's AI powered approach provides a refreshing take. You can start with AI generated layouts and then fine tune them to perfection. It's like having a personal design assistant always ready to experiment and iterate. But there's more framer doesn't just stop at design. It bridges the gap between design and development with the ability to publish real websites. It's like having a one stop shop for both creating and launching. The convenience is undeniable in the end. The platform you choose depends on your needs. If you're looking for quick set ups and simplicity, wicks and square space might be your buddies. Webflow is the route for those seeking advanced control and framer. Well, it's the avant garde choice for those who want AI powered, editable website magic. So as you embark on your website building journey, consider what fits your style and goals. Thank you for joining me on this exploration of website builders and I'll see in the next video. 4. Framer Pricing: So how much is it to actually start using Framer? Well, I have good news. You can publish your own website for completely free. Then the next plan is only $5 a month. It adds a home and 44 page templates and a custom domain. Next we have the basic plan, which is recommended for personal sites. You can create an unlimited amount of pages. You can also password protect your website and you have a higher visitor cap for $30 a month. You get the pro plan. It's recommended for bigger sites and offers detailed analytics of the website and offers ten content management system collections. You also have a 300 page search limit and a very high visitor cap. If you go down below, we actually have the team pricings for $20 a month. You can have up to five editors on your website and you have a seven day version history. You can also live collaborate with everyone on your team at the same time for $40 a month. You get everything that's included in the team basic plan for $20 and you can manage project permissions. And you can also have ten editors and you have a much, much bigger file storage. There's also a 30 day version history, which is really helpful for a large project. If you really want to take a step back, here's a little tip. All of these prices are actually the prices you get per month if you pay all in bulk for a year. So if you want to change and see the prices, the monthly prices without any strings attached, if you want to cancel after a month, here are the prices that you actually pay. So they're a little more expensive. For the Team Basic it's like $5 more expensive. And for the Team Pro it's $50 So it's $10 more expensive. And here as well, you can toggle it back on and off, and you can see that the Mini is only $5 The basic is like five as well, and the pro is ten. And the free stays free, thankfully. And here's also another tip that I really recommend checking it out. So actually, if you scroll down, you can have the description of each plan in the detailed description of what everything offers in a really, really user friendly way, you can see a visual representation of what kinds of services are offered in every package. So actually, here's the thing that you want to look out for. For example, in the basic plan it says one content management system collection, right? So if you're only on this page looking at this and haven't scrolled down yet, you would think, oh don't other plans like contain that already, Like, so do I need to buy the Basic? And you click on and get the plan? But actually, if your priority having a CMS collection, you can scroll down and see that actually the free one and the mini one already contain that CMS collection. And you can pay much less, or even you don't need to pay anything to have that collection. So this is kind of, you know, misleading, a little bit, little misinformation in my opinion. And then you can see a detailed description of the CMS items, and you can see the detailed description of all of the services offer for the businesses. Honestly, I don't really think you would need this, but you know, you never know. And it's always good to know your options. So yeah, watch out for this for sure. And if you scroll down a little more, there's an FAQ section for all things about finance and pricings. And these might actually answer some of your questions, So definitely have a look at it as well before making any major decisions about the plan. So yeah, the free one is great to try out the service to see what it has to offer. And then if you actually want to publish your own website or your website for a business, you can go for the mini, in my opinion, just to have that custom domain. But of course, explore your options and explore your needs like write out the features that you want, like what your needs are, and then compare them in this detailed table. And just match that and choose the cheapest option. I feel like that would be the most convenient way of saving money as well. So yeah, thank you for watching this video and I'll see you in the next one. 5. Getting Started: In order to get started to create your very own website on Framer, you first need to know where to find stuff on Framer and to be familiarized with the interface. Let's start with the website itself and what it has to offer here on the main page. You can actually start straight away with the prompt, but then you're going to have to go into detail and actually know the interface in order to customize the AI prompt and what it has produced. Let's see what's below here. Here's some promo, but this is not actually what I wanted to focus on. Here we have the AI prompt again, but if you actually scroll down, you can actually explore the templates as well that you can start off with. Let's look at the new and the free ones here. You can have many templates that were created using Framer. Some of them might have been assisted with AI, some of them are completely designer produced. You have the paid ones and you also have many free options. Here at the free tab, you only have the three options to explore. Now that that's out of the way, I also wanted to show you the AI website templates, and here we can see some of the examples. There are also staff picks and recommendations just from designers. Anyways, for your resources. Apart from this course, of course, there are many resources for you to learn. If you have any questions at all, you want to go into detail about some topic that interests you to actually get started and get to know the interface we want to login. Once you're inside of your account, you're created with the dashboard at the very center. You have to get started buttons and you can start with a I, start creating your very own website in one instant. You can also paste your design from Figma, or you can watch tutorials other than this tutorial of course, and learn Framer with Framer. Below that, you have your very own recent project. I already have a couple which is a blank canvas and something that I just tried out. You can also see the last time it was viewed, the last time it was edited. You can also list it, or I have the icons and have the preview. You also have the search bar to search for your own project. You can sort it by last viewed by me, last edited, and alphabetically to create your very own project. You can also do that. Here on the left part, we have our personal account and our personal recess and archived. If you click here, you have the account settings, the night and day mode which you can toggle between. You have the desktop app that you can download. You can also start the app to import from Figma and sketch your own prototypes. You can also hide this get started section by clicking right here. You can also go to Home page and request support community, and this is also where you sign up. If you go to archive, you can see your archive projects that are no longer in use. Here. You also have the My Team tab. If you click on the three dots, you have the Team settings. You can invite members, copy, invite, link, and create a new folder to stay organized. If you go to all, we actually have the same dashboard because I'm all alone here. Unfortunately, I'm not working with anyone else. We can go to templates, you can see your templates here, or you can create your very own templates that you can share around with your team members. If we go into archived, we have the archive project of the team. Let's go to rests, and let's go to an empty canvas here, let's delete this. We actually have quite a lot to explore. Let's go one by one. On the top left, we have the framer logo and we have the option to go to the dashboard. We have the quick actions. We also have a bunch of different options. Where you can create a new file and all of the options with the file. You can also edit, like copy, paste, Select. All these all have their own shortcuts that are conventional keyboard shortcuts. On any laptop, I will not be going into detail. Then you have the view. We can change the modes here. Again, we can zoom in, zoom out, You can also do this with your mouse pad, your mouse, whatever you like. You can stylize your text here, which is also possible on the right side. More convenient, I will show you that later. Then we have the groups. Groups. We can flip stuff, we can create components, and we can create components from code. We can preview, we can also create code components. Here we have some preferences for the site settings. We have more advanced site settings like custom domains, redirects and analytics, and your plans and the version of history of your website for any questions you can direct into help. You can also go back into your account. Now that we explore that on top, we have the name of the project and the plan that the website is on. On the right we have the account logo. We have site settings. We also have the live preview button, which shows you the version of the website when it is published. You can also invite collaborators here. You can publish and make your website go live here. If we go to the left, you have your pages, your layers, and your assets, which is basically pretty much like a tree from broad to more narrow. First, you have your pages. We now only have one page, our home page, You would also have your CMS is here, and you can create a canvas when you want to create a prototype. Let's delete that. When you are actually creating your website, you will be working with layers here. We actually have a couple of texts that we don't need. You can see that you can start with AI. And we will create a bunch of different layers that we will go into in the later videos. Here, all of your assets like images and code and different stylizations will go into here. At the top, you can insert your elements. You can start with AI, can insert sections, headers. You create your CMS here and import all of your elements, like media forms, icons in here. Next we have the layout. You can customize the layout of the web page. You can also create text which changes the coursor. You can type whatever you want. Actually, on the left that pops up the window that we can see here. These are all of the alignment options here. You can also link to something. You can also customize the position of the text like this. Or you can also click and drag it here, and we'll automatically change the numbers here. You also have the type of positioning which is advanced and depends on basically how the text is being positioned according to the stuff on the website. We also have the size of the text. We can add effects on hover, on press. You can have a loop. May have different styles, we can hide it, change the capacity. Next we have the font color the actual font. You can change it to anything. You can also change the size of the font, the alignment of the font, and some accessibility options. Here at the bottom, you have your cursor options. This one is just dragging around the canvas. This one is just your normal cursor to select and drag stuff. This is for commenting. Here you can change the mode as well. At the top, after text comes CMS, for example. You can add your own blog, or you can import your own CSV to import your own CMS collection. You can also have your very own actions here, which is just shortcuts to some actions on the website. For example, create with AI or start a web page, create a component, et cetera. This was an introduction to your interface just to get you familiarized with your workspace. And I will see you in the next video. 6. Practice: Create an Account: So your very first framer assignment is just to create an account and get to the point where you can create your website. So on the main page, you click on Sign Up. You choose your login method, you click on your option, either sign up with Google or sign up with e mail. And then after confirming and activating via the e mail you receive and your inbox, you are all ready to go. And if you want to practice it, you can do it by yourself or you could follow this video and do it together with me. So I'll see you in the next video. 7. Chapter Overview: So in this chapter we started exploring framer, the history of user interface and user experience design. What it is, why it's so important to have UI UX designers where it all started. Where it all began and what we are at right now and what the future holds for us in terms of UI UX design. We also explored the interface of Framer, where things are, what you can do, a little customization of the text. We explored a little bit the setting of Framer. We also looked at the templates. Framer might be the choice for you, why you would want to use an AI powered website builder. Why you wouldn't use, for example, like Wicks square space or Webflow, which are all at the top of their game. But Framer is such a newcomer and is creating so many innovations at the same time that I honestly don't think why you wouldn't give it a go, at least anyways, as the chapter summary, we looked at this stuff, we also learned how to create your own account and how to get started. In next chapter, we'll actually be creating your very own website. And it's not just going to be any website, but it's going to be an AI powered one. Which means you're going to learn how to write your very own prompt. And how to be as detailed as possible. What some tips are to get the best result you can from the AI. We will also learn how to customize stuff, how to change your font, how to play around with the colors and the layout of the page. We will also explore some external tools that I will talk about in the next chapter. I'll see you there. 8. Chapter Introduction (Your First Website): Welcome to the next chapter. I already gave you a little sneak peek preview. In the summary video of the last chapter, I also gave you a clue on what else we're going to be using with framer. Actually, that's a color picker and color palette assistant to help you make the best decisions for color for your website. If you're not happy with the AI generated ones, you can also use that as a guide. As I previously mentioned in this chapter, we're going to be diving into your very own first prompt to create a website. We're going to practice that by doing an assignment later together. I will also provide you with some tips and details on how to write a detailed prompt for the best results with AI. I'll see you in the next video. 9. Writing Your First Prompt: Let's actually learn how to use AI and produce the most effective results for your very own custom website. So a few tips to write a detailed prompt for your website is the first one is specific. Provide clear instructions on the type of website you're aiming to create. Include details about the purpose, target audience, and any specific features you want. Next is design elements. Describe the visual elements you have in mind. Mention the color, palette, typography, preferences, and any branding elements. Next is user experience. Explain the user experience you're aiming for. Are you looking for a clean and minimalistic design or something more vibrant and dynamic? So keeping that in mind, let's write an example prompt. So let's write, I'm looking to create a portfolio website. Here we are, indicating what we actually want to create and what our desires are for my photography business. Again, it's good to be as detailed as possible for what kind of business I am planning to create, my website. It's a really good prompt, showcasing what kind of business it is and what it actually is for is really great for the AI to understand you. Next let's write, I want a clean and design that reflects my creative style. Here we're going into stylization. We mentioned that we want a clean and modern design and I also want to reflect my creative style. And we're going to describe our creative style in the next sentences. Let's write, the color palette should be a mix of muted pastels. Here we're already describing our personal preferences, our creative styles as mentioned before. And we're also giving it a color palette to work with. And this description should be good for us to get started. And here we can see the bar that got filled up describing how detailed your description is. And if it's good enough for the AI to be able to execute it well. So if we click on Start, it will actually start creating your website. That's what the next video is for. So I don't want you leave you with a cliff hanger, but I will see you in the next video. 10. After the Prompt: The previous video. We left it off here by writing a pretty detailed description and eight prong. So let's actually click on Start and see what it generates. You can see the progress of creation, right? As it creates, you can see that it creates straightaway the optimized versions of the website for tablet and for phone. Here you're prompted to choose your free domain with the framer dot ending, and we're going to click not. Now the amazing thing is the AI also generates text for you and all of the headers. So even if you're not sure what you're going to write on your photography website, it has already showed Judas suggestion of what you can delve into. So here we have some placeholder photos, some descriptions of the photos. And it has used different elements to make the website more visually pleasing. And you have the reviews at the very bottom, like any classic, you know, service based website. At the very bottom, we have a little footer with the social media icons and copyright. So I kind of like this prompt and I feel like we're going to go with that. And you can see the optimized versions are really well optimized and there's nothing really much you want to do. If you're happy with the design, you can straight away putt in your images instead of the placeholders and maybe change up the text a little bit. And it would be pretty much good to go and attach the links here, obviously. So yeah, this is actually really amazing, and I will see in the next video, looking at how we can customize all of these elements. 11. Customizing Your First Website: So now that you have your very own ready website generated by AI, it's actually trying to tailor it even more and get everything exactly right. So to customize your website, you just click on the element you want to edit. And you can either use AI to change it or you can go to the right and you can change. For example, let's change the color of the texture, red by going to the right. And you can click here, Color, You can change the color here. You can also drag around the element to change the position of the elements. For example, I want to here and this kind of looks like a journal cover and it's, I think, perfect for a photography website here, for example. I can also write something else, for example, space and explore now could stay like this. And we could update this date if we want. And it's currently up to date though. So for this one we change the position of the image. And if we go down, you can actually change everything up here. You can change the position again of the paragraph in the, the heading in here. For example, if you double click, it takes you to the image, there's an effect that's applied to it. So for example, you can select different blending modes. Right now it's at luminosity and gray scale, that's why it's like this. But when you double click it, the image is actually like this. If you go to normal and put down the gray scale, we have the normal image. And you can also select different fills instead of an image. And you can replace and choose your own image by clicking here. You can also change the resolution, the sizing, and add alt text for accessibility. Also, stock photos and images that you could use and you could use Search here. You can also crop the image if you want. So let's move on. Go down and it's pretty much the same. We have a couple more elements that we can move around. And here we can change the text, the icons. This is all customizable and you can always change it up. And here you can also see the created theme for us. And we can shuffle it up, and we can select the elements we want shuffled, and it will shuffle according to the color palette. So that's it for this video, and I'll see you in the next one. 12. Color Palette Picker: In this lesson, I wanted to show you an external tool that I use when I'm creating my own websites and when I need to choose colors and a color palette, especially when I need to do it in accordance with accessibility. Just in general, it's a really good tool to help you make the right color decisions and still have it like tailored to you and what you actually want. At first, this might seem overwhelming for just like a simple color picker, but actually there's a whole color theory behind choosing the right colors for your website or for anything, any graphic design that you do. Let's start by looking at the main page. Just to be clear, this is Adobe Color, an external tool that I use to choose my colors. I have used just my Adobe account to use this tool. Here we are met with an example color palette, just to get you off started. Here you can see we have the color wheel. We have extract, theme, extract, gradient, and accessibility tools. Let's start with the color wheel. You're probably familiar with this. This is a color wheel. And look what happens when I grab one of these nodes and just take it around, it changes the colors that are associated with this color palette. The reason this is happening, this change is happening, is actually on the left, the harmony rules. There are many different harmony rules, and you can see the explanation here. The color rules ensure a harmonic balance of colors based on the color you have set as base color. For example, right now, this is our base color. We can choose base color just by clicking it, and it will base your decision around that color. There are different rules. For example, monochromatic is choosing the same colors in the same range, just different pastels. And you can actually add nodes as well on here. You can have a triad, you can have complementary colors, right? This is really nice. Split complementary, double split, complementary. And all of these act in different ways. It's all just done for you automatically to compound. So yeah, there are different kinds of rules and you can also set your own custom rules, just adding nodes and playing around. And this is not really based on any rules, so you might want to be careful with this. I would recommend at first sticking with these ones, with the preset ones, for example, I like this one, and I can save to my library this color palette. I can also name it, for example, my green. And I can also add some tags so it's easier to find. I can save it and I also publish it for the people to see and check out my color palette. In the center, you can see the shades and you can choose the primary one. You can also choose the mode you're in, just right here. And you can also change the values here, which is going to change the color palette entirely as well. You can play around with the Argu values with the brightness. Basically, everything is customizable. You also have a color picker tool. You can create a palette according to that. Here you can extract a theme from a photo that you provide. It can give you a color palette here. You can do the same and get a gradient here. You can actually check for contrast and for accessibility, your color palette. Remember my color palette that got a little mixed up. You can, you can actually choose the color palette in accordance to these rules. See for example, C and D are in conflict. These two move the swatches on color wheel to make the colors distinct and color blind safe. A color blind person might not be able to differentiate these two colors. We need to change that, no conflicts are found. When we change it to this, we have the color blind simulator and we can actually see what these colors would look like from a color blind person's perspective. We have the color blind safe, and we have the contrast checker. You can check, you have the different levels of accessibility. Aa is easier to qualify for than AAA. Let's go with AA. And we can choose the color here and make this more darker and lighter. And we can see that this contrast ratio is fine. But if we take this down and make it darker, everything fails and the contrast ratio is not meant. You can see here, you can change this maybe this way. But no, even if you make this brighter, it won't work here. For example, in the smaller font it fails, but in the higher fonts it is just fine. Here, you can actually have contrast suggestions which will change. For example, we can set a contrast ratio. It will provide us suggestions. For example, bad contrast, It will give you that as well. We can save it to libraries. Here on top, we have a few more fun things to look around. May have the Explore page where you can explore different people's color palettes and you can see where they were used and where they got extracted. Next, we have trends. This way you can look around and see the trends of colors in the world in fashion, in illustration, graphic design. This way you can stay up to date with popular color palette. Next, we have libraries where you have your own color palette that you created. Next, you have the theme switcher. You can also have a little color game, and you need to remember the sequence that it played in, For example, here, here. And you also have a timer. It's just fun to play around with, explore, maybe see some new colors that you like, and make note of that. It progressively gets harder and harder. Let's do this last one. Oh, I don't know if I remember this one. And Game over. See, you also can tweet your high score. Here you have just a couple more helper buttons, like help forum feedback, your own account, different Adobe apps and Adobe Cloud. This is all I wanted to show you for the color picker. I hope you enjoyed it and I'll see you in the next video. 13. Practice: Create Your First Website: In this practice, we're going to create our very own first website from scratch. If you want, you can try it out for yourself alone, or if you want, you can follow me. And we can do this together. Going to click Start. With AI. To start, I will write a prompt for us. It's going to be, in my case, we're going to be designing a website for Yeti Learn. But it can be whatever you want for your personal website or it can be a portfolio website. It can be anything you want. I will start writing my prompt, a website for Yet learn. A learning platform that courses that offer courses that are available on different teaching, on different course platforms. The courses are about Creative Coding, Spline, Unity, Unity, Do Firefly, Adores Express, and Journey. Let's try this prompt. You can see it, put the title, our name in the very center. There's a pricings in an FAQ page. Actually wrote some text about you learned in our courses. I want to mention these colors. The color palette is, let's specify that this is the primary color. Let's see what it generates miserably. We can see what it generated for us. We can see only your inner unity have some text here. Cutting edge courses for various skill levels. Here we have some courses like the Sublime Course, the Firefly course, and the Unity one. We have the pricings will remove this section because we don't actually sell courses on this website. This is just informational. I don't like this for example. I can regenerate this. I don't actually like any of these, so we can just instead type FAQ. We have some questions that people might be asking. Now that we have the basic layout here. We should also remove pricing from here. Courses would take here, FAQ could take us there. And I think I'm pretty happy with the colors. And now we can actually use this as our starting point to completely customizing our website. For example, courses here. Yeah, I'm actually pretty happy with this page. We'll dive deeper into customization and adding sections and removing sections, doing navigations, and creating multiple pages in the videos that are coming up in the next chapter. 14. Chapter Summary (Your First Website): So in this chapter, we actually created your very own first website. We first started off with writing a prompt, how to write a prompt, and some tips and tricks on how to write the best detailed prompt and what some kind of, you know, limitations are with framers AI. Nonetheless, I think it's pretty good like still it's AI and it actually creates a functional website for you from one single prompt. I also showed you a color picker tool that helps you pick out your colors for your website for pretty much anything you want in the digital world. You can use it in graphic design. You can use it in web design. And I just wanted to show you a really useful tool that will hopefully make your workflow a little bit easier. Then I showed you some customization of fonts, how to change colors of elements, and how to change an image. How to change the text. How to actually regenerate with AI. If you're not happy with the result, but you actually want to give it another try. Yeah, we actually created your very first website that's fully functional as well. In the next chapter, we'll actually look into CMS, a content management system. I'll go into detail of what it is in the next intro lesson, but I hope I'll see you in the next video. 15. Chapter Introduction (CMS): So this chapter is all about CMS. You'll ask me, what is CMS? Well, it stands for Content Management System, which is basically a system that helps you manage your content creation, like from blogs to job listings to marketing pages. All of that is managed by content management systems. In CMS and Framer, there are collections which allow you to show content and manage content on your website easily. A collection in Framer acts like a simple database where you use a set of different fields, each with a specific type, to collect a list of items that can be stored and referenced throughout the website. This allows for greater flexibility and control of your website's content. Make it easy to keep up with fresh and relevant information without touching your site's design. Cms pages allow you to display content like blog post, help articles, updates job offers based on CMS items. So we'll go into detail about all CMS features. So we'll go into detail for content management system in this chapter and you'll learn more as we go. I promise it's not that convoluted, it's just easier to do it than explaining it and learning it by doing. So let's dive right in and I'll see you in the next video. 16. Create a Blog Website: In this video, we're going to see how to create your very own CMS. That means creating your very own first blog, which is going to be stored in a content management system. Let's go back to our website that we created in the previous chapter, just as an example that we used. Here's our website and we want to click on CMS. We can either import a CSV file to have a CMS collection, or we can add a blog. In here, we have different topics. As an example, we have five different blogs here. Here on the left, we have the collections itself that I was talking about in the previous video. In the introduction, we can add more CMS collections. If you have a higher plan, you can add more. You can also have, for example, job listings, et cetera. You can use the CMS in all the different kinds of situations. We'll just stick with the blog we want to. On top here, we have the indicator that this is indeed a CMS. Then we can add a new item to the blog. We can edit the fields, or we can import. Let's try and add new item. Here you enter your title, for example, space exploration. It automatically generates a slug for you that you can of course change if you want. For example, I changed it to just space. Then we can dated, for example, today's 31st August. We can choose an image to represent our blog post. We can set the resolution and add an alternative text for accessibility and SEO. Or we can choose one from stock images. For example, I want to search space, we can choose, for example, this one. Here we go. Now it's imported into the blog. Next, you want to actually write the blog or paste it. If you're wrote it somewhere else, you can stylize it. For example, I'll give it a heading of space exploration. I can change the heading size just like a normal markdown. Let's choose this here, your actual block post would go. You can also link something to the text. You can bold it, make it italic. You can also make it a code snippet and you can add a bullet list. You can number it. You can add images, You can add video. You can also embed code HTML. For example, if you want to embed a Youtube video, you can do that here. Yeah. Then once you're done, you click Safe in your blog post is right here, for example. We might want to go in here and look what examples they have. Now that you can also edit the fields, you can change the title, you can have a placeholder text area. You can also change the name of the date. Here's what we're modifying. For example, I don't want this to be a date. I want this to be date, for example. Or like date published, something like that. It's all up to you. Content can be changed. For example, blog posts right now that you actually have the CMS. And we'll leave these examples here for now. We want to go back and we have a separate page called blog, and all of our blog posts are here. Here's even the one we created, even though it is controlled by CMS. You can double click in any of these and change the properties. It will take you straight there. You can even stylize it here. Changing one of the elements in the CMS will change all of them. In the blog post we have home, we have blog for example. I want to link this for example. I want to write blog post. I'll just leave it like this for now. But we would modify it actually. Then I want to link this to blog. When I preview this, I scroll down. I click here and this will take us to blogs. We'll load up the images. You can click into any of these and look at the content who took us back entirely. Just wanted to go back. You can click and read your block post, just right here. Yeah, this is how you create your very own first CMS collection. There are many, many possibilities of what you can do with it. Have a higher plan, but it's all pretty much the same. It's the same idea of you creating a blog or for example, a job listing. And you just put in your values and write the content in here. I'll see in the next video. 17. Content Writing Made Easy: Now that we know how to actually create your own blog collection, we want to fill it up with, you know, not pre made writings, but something original and something that belongs to us. Right? So we're going to write, click, and delete all of these templates and pre made blog posts. All right, we're going to go to Chat PT. I'm going to give you tips on how to write your very own blogs with the help of Chat PT. You want to sign up if you don't have an account already or you want to log in like I will in my case, you want to sign in and you can use your e mail address. You can continue with Google, your Microsoft account, or Apple. I'm going to continue with Google. Let's look what actually a GPT is. It's a large language model based Chappot, developed by Open II and launched in November 30, 2022. It pretty much gives you the answer to anything, anything you ask for. Of course, it has some filters and bugs and it can lag and hallucinate. Open AI says itself, it's important to note that it might not always be factually correct because it's knowledge cut off. Let's look together is September 2021. It might be outdated, it doesn't even know about. It knows about Framer as a prototyping tool like Figma, but it doesn't know about Framer's. I, we're going to help it out and we're going to let it help us. I have a blog, five log log posts, about space exploration. One of them should be named as space exploration. We need to be as specific as possible when describing to Chad GPT what we want. Because in the previous video, we created space exploration. I just wanted to fill it out as well, the one name space exploration. The text is going to go in here. Let's see what it gives us. It types in pretty fast so we don't have to actually wait that long. Let's see. It actually doesn't really have one that's only name space exploration. I guess it just specifies further what it's going to talk about, for example, unveiling the cosmos beyond. These are short though I want to make them a little longer just so they are maybe three to four minute reads instead of one paragraph the blog posts three to four minute reads, it will just type it more up. We can see it didn't actually follow the prompt and it's rewriting what it wrote. Because I'm really not sure if this section would be a three minute read. Let's put it in a different way. I meant make each blog post. Here we go. We can see that it's a longer, more specific. I actually like the length of these, but now it just only wrote about one block post if you'd like me to see, actually asking us if we want the continuation with the rest of the block post, let's say. Yes, I do. Sometimes it can freeze up a little bit. Just let it think a little bit and we'll get to go. We can see that it for two more. And I want to say it's asking me again. I'll just make it clear that, yes, extend each of the blog posts. We can actually see that each of the blog posts is now 400, 500 words. Maybe this one is a little just longer, just a 400 words. Now that we have this, let's actually look at the content that it wrote about here. It's about unveiling the cosmos beyond. Actually, instead of looking through each one, we can ask for a summary. Provide me a quick summary of each blog post. Let's look at the reviews of the blog post. First one is about the profound impact of space exploration, tracing its history and highlighting its significance. Yeah, I like that, and I'm going to go with that next. We have icons of human ingenuity, celebrating the visionaries who united humanity's journey to space. This post pays tribute to figures like Udi Ga Guiden, Neil Armstrong. I like that. Then we have the topic of quest for habitable worlds, for the understanding of the universe, and potential for extra terrestrial life and finding habitable exoplanets. Next one is actually a little bit of a controversial one. Or not controversial, that's talked about a lot right now, travel and colonization space missions to Mars. It's actually talking about space sexes ambitious projects. But because it's outdated, I don't think it actually serve recent examples, but maybe the ones that happened before 2021. The last one is space exploration versus ethical considerations. Striking a delicate balance which is talking about planetary protection and cultural preservation, maintaining the integrity of celestial environments. I really like all of these blog posts. Now that we have all the content that we need for our blog, we can actually start putting it it. That's what we're going to do in the next video. 18. Filling in Your Blog: Now that we actually have our blog posts and our content, it's time to put it in our website, the one that's called space exploration. Let's just go and take the very first blog post it. Let's make sure that we're grabbing the right version, which is the extended version. We're going to take this, put this here, we're going to copy this. Put this in here. We have our header. We actually might want to, for example, to chat PT, say for blog post one. Since it is so long divided into sections, I just want to show you some formatting that you could do with chat PT and framer. Let it wait and think a little bit. Here we go. We have our sections of the blog now it would be easier to digest. I feel like even in the current climate with Tiktok and everything, I just pasted the name of the section. I'm going to select it and choose Heading to, for example, the cosmic journey begins. We're actually going to delete this. We have it all clean and no repetitions. We will select heading to paste this. You just go in and pat, well, actually you can do it even easier and faster. So we have already two sections. We will paste the other ones. We'll delete the section part. Got an extra letter. We're just selecting each of the section words, make sure there are no spaces. And then I could either bold it by using the shortcut command on Mac or control on Windows, or I'll just go in and select heading two for each one. Here we go. We have our first blog post. We already have our photos. We have the date published. Let's change the slug to be a little more specific. We didn't want to do that. We'll paste that in here. But we'll do space exploration here. The slug is shorter, it's already saved. That's all we need to do. Now, if you go in, there's your blog post. You want to do this for every single blog post that we created that you created. And let's actually do it. So add a new item. Let's ask Chachi Pet to divide, divide each of the blog posts into sections like you did in this case. No need to ask me to continue. I want this for every blog post that we have. So I try to be as specific as possible so it doesn't stall and it just doesn't wait for me to answer. But does everything in one go? I actually didn't understand and only wrote for our second blog post, divide into sections, Blog post number 345. Let's just wait for it to produce the results, Hopefully the ones that we want. So let's see if it actually did it for every blog post. And yes, we can see 543 and we have two here. We already put in the first one. What we want to do is click on Create New Item. Copy the title. Date published. Let's do the same. Let's change the photo. Something related to space. Let's copy this blog here. Delete. Delete the Leave nothing behind that's not selecting for came reason. Here, right go. Let's highlight the last section of this blog and we want to see the changes. And we have one more blog you want to do this for every single blog that you have created. To keep the video short, I'm only doing it for two, but hopefully now you have the idea of how to do it and hopefully implemented it. And I'll see you in the next video. 19. Practice: Create Your Very Own Blog: Welcome to a new practice video. We actually want to put together everything that you have learned in this chapter, the website we developed in the previous chapter that we started out. Let me show you really quickly, get learn. I want to have a blog that will describe the courses that we have. I'm going to turn to Chad GPT for help. Once we're in Chad GPT, we want to ask for help. We have a Unity, a creative coding, and a Spplying course that I want to write about. In the blog I want to write, I am creating a blog at the courses that are offered by our company. We are called Unity Learned. We offer online courses that are educational and are all about innovation. So we're going to write for Fate of Coding and Unity, we want three block posts. I want three block posts on the topics. It makes it up three block posts. It spline, it sometimes mixes it up with the math term, spline the three D, Animation and Modeling Software and creative coding. These block posts will be an introduction to the course and describe what awaits them. The learning outcome is specify, don't make them too long, and see what it comes up with. Here we go. Here are our blog posts. These will need to be changed up according to our actual courses, but this is a good starting point. I want to add this to our blog collection. Let's delete this one and add, we'll delete the template ones. Let's add a new item. Our title is Creativity with Unity Game Development Course. Next, we'll take this in here. These are already bolded. That's how it copied it over. Let's, let's choose an image. So we'll choose this photo as our cover. Now that we have our first blog post, let's import the rest of them. Put in the title Date, Search for an image. Then you want to paste this. See this time. For some reason it didn't paste the paragraphs. Which is weird because it did in this one, right? That was weird. I don't know why that happened in here. And we'll write in creative coding, maybe we'll just type in coding because it's not really widespread. Well, I like this one better. Here we go. Now we want to add this to our page. Here we have the blog. Let this just load in. I know why that didn't update. This is not what we want, so we need to add this. The reason why it's not popping up here, we need to add a new page. Sorry, not here now. It has updated. There we go. This is horrendous. Nothing is actually readable. So let's change this color to white to make this a little more great, a little more white. Sorry. Let's make this white as well. This is much better. The other version was really, really bad. Let's still at the block pages that we're not using here. We also need to change, let's see. Okay, so we have this, we'll go here, we'll customize this. Change this to white, change this to a little more white. The text is actually there, but it's so hard to read. I didn't actually notice it. That's why it's important to choose good colors. I click Click on Content, Where, here we go. I go to Body. I go to Edit. This way, all of the body text throughout the blogs will be changed without the need to go into each page and change the font or the color. Instead of these, I just want to have one which will say blog and we'll do our courses. Let's link this to blog. The reason I just wanted to double check, this is the parent of these. When we link this, all of these elements inside of this box also link to that blog page. Now if we actually preview this scroll down, click on Blog. Here we have our blog, fully responsive, Perfect for your tablet and for your iphone as well as your computer. Here we go. This was our blog creation. Hopefully you got to practice on your own. If not, you followed our practice tutorial. And that's absolutely fine as well. And I'll see you in the next video. 20. Chapter Overview (CMS): So in this chapter, we learned all about CMS, which stands for Content Management System. As I'm sure you already remember, we looked into blog creation, how to add a blog and integrate your blog into your website that you have created previously. And we have also looked at ChatchPT's help and how we can create blogs with ChachPT's aid. And we looked into how to import those into back into framer. And we also practiced by creating our very own blog, and we practiced that a little bit. And we customized text and the fonts and actually came across a couple of problems that were really confusing. But in the end we managed to solve them. And hopefully you learned from those little hiccups as well. And I'll see you in the next chapter where we dive into advanced in, and I'll see you in the next chapter where we dive into advanced customization which is basically effects, different sections, headers, all of that, all of what you were waiting for. Everything that is customizable is about framer, Once you already have your AI created website, these are the things that really are going to hone down and make your website unique. Of course, this is not powered by AI, but it's good to know how to do these things so you can customize your website by yourself after you have your base template created by AI. So I'll see you in the next chapter. 21. Chapter Introduction (Advanced Cutomizations): Welcome to the next chapter which is all about advanced customizations. We'll look into creating customization with effect sections, headers, and adding your own forms and media and all of that good stuff that we will cover in this chapter. This will really help you create truly unique website and really tailor it to your own needs and the way you want to create your website. And we'll also not only look into using each element separately, but also combining everything together to create one cohesive thing. And we will also practice this and add it to our website that we've been developing throughout the course. 22. Why Customization Matters: So I want to go a little in depth of why customization actually matters and why it's important to have your website customized and you tailoring your elements to fit your needs. Tailoring sections and customizing sections allows you to display the information in ways that aligns with your goals. If you enhance your navigation, for example, customize your header. It simplifies the process of navigating the website to your visitor, thus improving the user experience. Next, it reflects branding. If you have all of your elements in a similar way and designed similarly, it reflects your brand message and reinforces your brand image. Custom media forms and interactivity actually makes it more appealing to the visitor. It also optimizes functionality, which aids usability, consistency and professionalism boost users confidence and finally drives interaction. Custom icons, patterns, and social integration encourage engagement. So these are only a few reasons why customization matters on your website. And hopefully you'll stick around to watch our chapter and see how to truly tailor your website to your needs. So I'll see you in the next video. 23. Sections: This video will explore the first customization that we're going to look into, which is sections. Let's go into our example website that we already worked with before. What we're going to want to do is go into Insert. Here we have our section section under Basics. Here we have a bunch of section options that we can choose from. All of these, of course, are click and drag as well. You can get this from this or this from this. It doesn't really matter which you choose. You can also create it from scratch. Let's look from the top and work ourselves to the bottom. At the very top, we have our first option. Let's see, it's going to insert at the very bottom. We can also change the position of it by just clicking and dragging. For example, I put it up here, it is all clickable and customizable. Here we have two buttons, we have some text. This is one of the sections that we have. This is a very simple example, we can just move on. Next we have the same section, but just for the background, you can actually add an image. Let's add something from unsplash, For example, this one here we have the same thing just with an image background. If we go further, we have a few that are an image on the right and some texts on the left, we have the complete opposite. The image is on the left, the text is on the right. One more that we have is this one here. We have two images, we have some text here, and we have some text here here. It's actually promoting the Figma plug in, which we will look into later. For example, we can grab this and we can actually move this around in this text box. You're actually free to do anything you want, but it's actually easier to choose a section that you like from here. Let's look at a few more. For example, this one is two images in a horizontal way. Here we have an option for 46 images. Sorry, here it actually promotes what we have on framer. Next we have some irregular shapes, Double clicked, imported toys. Let's command Z and cancel. There we go. Here we have four placeholders for the images and four text boxes. You can click into it and expand layers and customize all of this. You can actually also. Next let's look at more. We have some that are like cards like this. We could use also this for, for example, our courses that we promoted in one of our practices we can review, we can have many reviews here. We can customize the width of each column. We can change the place of this and this, and we can play around like this. Next we have some reviews. Next we have a review in a big section. We also have our contact form, which is essential for our contact page, imported twice. Again, here you just have name, e mail, and message, you can directly contact us, as in the website. Next we have some pricings. We have an FAQ section that you can also customize. You can go in here and customize the FAQ section as well. You have this table. You can the question and the answer here. You can change your question. Next we have our trusted by section. You can just replace these with a logo, Companies that trust in you and show their support. Finally, we have a sign up today which is really similar to the very first one that we looked at, which is right here. Actually, I think it is exactly the same. Just without the text. Yeah, it's pretty much all basic small customizations. They're all similar. They all use and utilize the same elements. But it's nice to see some variety and see that everything is already prepped for I'll see in the next video. 24. Navigation: We will look at navigation, which are basically headers and footers, in this case they call them top bars. Let's delete a few sections that are left over from the previous lesson. It's a little less messy. Here we go. We'll leave the blog. I'll leave this one. I like the image. We go to insert and we go into navigation. We select a top bar that we want to use has actually put it at the very bottom, so we want to drag it up and put it at the very top. On the left we have the logo and on the right we have the about contact and sign up section. It's actually preview this. Here it does. At the very top, you can see these buttons in the logo. Of course, you can customize it again. You can click in, you can see there are multiple options for different use cases we want to click into here. Here we can actually change everything without letting it be out of date and stay updated here. Instead of text, we could put our logo here. We can actually link this stuff to, for example, like about and contact, but we do not have those pages right now. Let's go back to navigation. We actually looked at the black version here. There's also a white version. There's also a logo version. If you click on it to the very bottom. Let's take it to the top. Delete the first one, Click into it. Here we go. We can change out the image here. We can actually add more components, as many as we want. Actually, the reason why I'm saying you can achieve anything from any template is because if we click on Desktop, we go on the right. You know how there are two versions of black and white. You can actually go in here and change the color from here and get the same result like the last one. If we click here and match it, here we go. We'd need to change this text out here, It's readable, actually even do that. Let's click here. Choose the color. We're going to have to do it for every single one. I'm going to shift, select all of them and change the color altogether. I would of course, use this black if my logo was white or colorful. In this case, we would actually use a white one or brighter one that meets the contrast requirements. Now let's look at the footer. Let's click here. Let's see where imported. Here we go. I'll actually drag it over here. No, that's not what I want to do. That's like this. And click Insert. Here we go. This way, the desktop version is going to be primary and then we're going to optimize for the rest of them. Here we can see all the different pages you would want or you could create, and none of these are linked at the moment, But if you click in, then click in again, and you can link all of these out here. Similarly with the white footer, the only difference is the color and not the actual functionality of the template. Now that we have cleared up below bit the hitters and the footers, it's now time to move on to pages. 25. Pages: Looked into navigation. Let's actually move on to whole pages. This is how you can literally create a page in just one click. I clicked on the very first one without explaining. I know that. But here we have the landing page. Quick and easy, you have all you would need for most websites. We have the image placeholder in the middle. We have a button, some text. We have the trusted logos. We have a couple of sections that would direct you deeper into the website. We have our FAQ section where you can change out the elements. We have the prong to sign up today with our simple footer. What I notice here is there is no header which is a minus, which I would recommend adding one. After you have explored the pages, just add a header into this one. If you decide to use this page, this is all optimized and the design is responsive. Let's look at a few more pages. There are quite a lot of options for us to look at. I'm not going to go into very detail of every single one, because I want you to also explore it on your own and play around with it. And you already know that we can customize everything, Change the fonts, the logos, the colors, and change the images honestly. That's pretty much all you need to know. Here we have a portfolio page where you can display your project. You can see the pages that we add are all in here in the Pages section. Next, let's look at the teaser. This is just like a promo, a little stay tuned and sign up, you put in your e mail. And here's a little teaser. It could be a video or like a photo. It could be anything. You want a blog. We're already familiar with blogs. You can also add one here. You can add a separate blog article without the blog collection. If you want, we can add a sidebar which is basically a side bard header. We have different kinds of projects here, prompting us to view more. After the sidebar, we have our project page, which is pretty similar to the other ones that we already looked at. We also have a blank page. Let's see if it loads right. Blank page just for your creations. Let's preview it. Here we have a full long carousel that you can play around with. We also have an image blog here, which is pretty much like an image documentary diary. We have a four page classic. Just to have a broken link, if you have somewhere the visitor doesn't want to be redirected, you just put this in. Next, we have some portfolios. We have a Coming Soon teaser page. We have again, an introduction. Most of these are for personal use, for blogs, but you can also always change it to a work thing and be more professional rather than casual on here. But it's all up to you. You can change up even your pages however you want. You can drag this here, drag this around, and see what happens. I know it's not as flexible, but it is in some ways when you really look at it, try around, play around with stuff and see if you like it and just give it a good shot because it can create such good results. I would just give it a little time and see what happens and just keep using Framer in the meanwhile because you never know what's going to happen and what task you will have. Yeah, this was pages. Feel free to customize and look around it. I will see you in the next video. 26. Media: Now we'll look into media here. I know it can be a little overwhelming, but all of these are pretty much similar. Let's first look at these subcategories in media. You can import an image, a video in animation, or audiom. Let's start with a simple image. We'll click on Iff and drag it onto our section. And you can see that it has added itself onto the section we want to click into it in surge Gif. After you import the Gif as a medium, you can click on it and you will have a Surge button here. You can just type in what you want. It will give just that look how cute this is. Every time you search it up, it's going to be different. I deleted it. I'll type in cat again. It's going to be a completely different image. I'm sorry, this is too cute to not get distracted. We'll leave it there. Let's go and look at the next form. We have videos. We can either import a video straight from our laptop or import a video using frame from Youtube or import from Vimeo. Let's click on Youtube because no one uses Vimeo. Here we have the player. We had to have an example link here. We can turn on and off the auto play. For example, I looped it. We can either mute or unmute and decide on the color of the player. We also can have some borders. Let's click Publish. Let's select all of these command X them. So cut. I will post all of these onto the page here. We just have an example I have pasted. And now we can preview these. At the very bottom of the page, you can see that the Jeff is playing right away. We can play the Mayo integration. I am not sure what happened to the Instagram one here because it is a little bit key. It's always double check that the Wi works and everything would load. Next, let's look at the animations. Let's click on Lotti. Lotti are basically quick animations that are really low cost. Are really not using up almost any of the optimization from the laptop or the desktop, and it is actually very light. After we imported the lot, We can select the link that we are getting the lot from. We have the playing instruction, the source. Upload it, and you can see the lottie is playing just fine. We have the direction. Next let's look at the audio. Here you have a bunch of different options you can choose from, from Spotify to Apple Music to Apple podcast, Sound Cloud, Simple Cast, and simple P three that you can import from your laptop. These are all the media options for this for framer, I'll see in the next video. 27. Forms: In this video, let's look at forms as elements. First, let's look into input. We can add an input. This way a visitor of the website can type in your e mail. For example, click on Subscribe. Now we have their information, we can double click. We can use a different service for the input from loops, form Spark mail, chimp, and get weight less. We can also redirect the visitor once they have hit subscribe. We can also change the word for this. Let's look at the rest of the forms. These are all just the same forms just for different services. For example, let's look at type form and calendly. In calendly, you can connect your calendly account and you can book an appointment on type form. You can fill out a type form directly on your website. That's it for forms and I'll see you in the next video. 28. Icons: Next let's look at icons. Here we have a bunch of different icons that you can use to customize your website and add some custom illustrations to add a little bit of flare. For example, let's look at humans. It will take a little to import and if we double click in it, we can actually customize it right here, which is pretty amazing. You can change the stance, you can change the body, It is absolutely great. You can change the direction here, you can change the skin color here. It is all very customizable just if you're looking for a quick human icon. Next let's go into Twinmoi, have actually emoji icons all in one place. We can search for an emoji here, we can just p it just like this. Let's search for it and it will give us the equivalent icon into emoji. Next let's move on to Mogi. You have different, actually all of the variants of Mogi you can completely customize it. And you can keep looking through and find really exactly what you're looking for. You can change the radius of the circle. You can rotate the face. You can change the character, and you can change the background color. Next, let's go into Feather. In this one, if we click in it, we have a big, big list of icons that we can use. For example, Wi Fi and it changes to Wi Fi. You can mirror it. Nothing will happen because it's not like a mirrorable icon here. If we actually want to mirror it, you can also change the color of your icon. Next, let's look at Hero. Here we have just a different list of many different icons. Here we have the Wi Fi icon, again, is just a little bit different. You can choose whichever you want for your liking of them will cross over and have the same thing. For example, this one has a house as well that is different from this one. You really just need to look at the style that you want and decide what kind of icon you actually want to use for your website. Let's look at the last two. I'll actually not change it, so we can see the difference. Here we have the list again, just different styles of icons. The last one phosphor, this one is a little more rounded again, we have our list just right here. This was our exploration of many different icons. There are really some funky ones, you know, funny ones. And you can customize it however you want. You can add it to your website just by dragging, and it will add magically here. You can click and drag and position it anywhere on the page I'll see in the next video. 29. Interactives: Onto Interactive. For example, let's look at the search bar. We just click and drag it anywhere on the website To add it here we have the search button. It's actually small. Let's take it somewhere where it's a little more visible. Let's take it to the top. Let's take it up here first. Let's insert it, for example, here. And reduce the padding so it's a little more integrated. If we scroll down, click on the search. You can search your website this way. Let's look into ticker. We just drag it anywhere on our website, we click into it, click into it twice, and we can select our children here. It's just going to be rotating between all of these. For example, I chose Material on Feather and Hero. Let's actually see what this does, as you can see infinitely loops between all of these icons. And it's a really nice pad, so it looks natural. Let's go back and I'll show you how to customize this. We double click in here. We can change the speed of the rotation. We can change the direction. We can align it to the left center, or to the right. We can make this broader here, it's covering the entire page. We can add a higher gap. Actually change the direction here, line it to the center. You can change the padding, which I don't want to do. We can select the sizing of the objects. We can stretch it out, or we can leave it at auto. We can also choose the clipping. That's the nice pad that's being added. And I want to leave it like that on hover, for example. I want to slow it down. Let's see what this does. As you can see on Hover, your icons slow down. This is really cool to show off your logos just to showcase something that you want. It infinitely will loop. I think it looks really nice. Let's move on. Let's look at slide show here. It operates in the same way. We choose the content. For example, humans phosphor. Let's choose a third one, feather. Let's look at what it does. If you click here, we'll actually rotate between all of these with a nice animation. Let me show you how to customize this. We can choose the direction, We can select autoplay, change the interval of autoplay, how often it changes out. We can choose if the image is draggable, When it's like a Jpeg or a PNG, sometimes on a website, your image drags out and I find it annoying. I will say no. You can also change the capacity, the scale, and the perspective, and rotate it. You can align to the top, to the center, and the bottom. You can select the number of displayed items at one time. You can select the gap, for example, if there are two, you can select the gap. You can add or remove padding, you can change the radius, you can change the transition at which they are transitioning. You can completely customize. And you can preview the animation here, which is quite amazing in my opinion. You can see a huge difference. You can select the stiffness and the damping and you can see the curve. You can actually see the animation here, which is extremely convenient if you're not familiar with animations at all. You can add a delay, but we're not going to do that. Let's see what our animation did. It looks horrible, but that was just for demonstration purposes. Next, let's look at Carol, which is honestly similar. Let's import it here. That will click Select Content. Here we go. Are we sure that this is a Sol? I'm not sure that this is a Sol. Here we go, This is a Sol. Let's delete this. Let's preview this. Here's the Sol because it's not filled up. It's not really doing anything to add a couple more objects. So we can see its functionality to click here, we can see the animation and everything. So here we go. These were our interactions. Really fun stuff to play around with. And if you know what you want to do, it's really nice and easy to achieve stuff just by using these tools. And I'll see you in the next video. 30. Social: Let's look at the socials. Here we have all kinds of social media, Instagram, Facebook, Twitter, Google Maps, trustpilot and tag and bed. Let's start with Instagram. Let's see, you can add a link to an Instagram post, and here you have the Instagram post on your website. It's as easy as that. Next, let's look at Facebook. This one operates in the same way. Unfortunately, the link here is unavailable. But here you just import the link and it would display your Facebook post. Next, let's look at Twitter, which is going to be the same thing. Is just going to display the tweet. Although it's not Twitter anymore but X, but the link still works. But anyway, let's move on to move on to Google Maps. This might be actually more useful than the ones we looked at previously. You can just import your coordinates. It will display that location. Right now it is displaying some place in Amsterdam. You can scale it up, it will just expand the map for you as much as you want. On the top left, you have the coordinates. Yeah, this is pretty amazing in my opinion. Then we move on. Let's go to trustpilot. You need to have an account with trustpilot and a business ID for it to work. Last but not least, let's look at tag and bed. Let's look together what tag and bet is. It lets you actually import feeds like from Instagram and from Facebook and all of different social media very easily. Here we have all of the integrations. We don't even have Framer on this list because Framer is not that popular, apparently. Yeah, this was the social step, and I'll see in the next video. 31. Utilities: Let's look at utility. Here we have a bunch of different options, utility options to add to our website. Let's start with lemon squeezes. Import it anywhere we have our by now button, we can actually have a link to lemon squeeze. And we change the style of the button. We can, we can choose the font and we can choose an effect on hover. Next let's look at Gum Road. Road is a great marketplace if you're looking for templates, if you're looking for different fonts, effects, overlays, you can actually link your product here. We can add a code block directly on your website. We put in the code here. We can choose the language to format it in. We can choose if you wanted static or dynamic, we can choose a theme, we can choose the font again, and the font color, the borders and the padding. We can also embed content using the embed option. You can add it here using a Uro, or you can add your HTML code right here. For example, you want to embed not using Youtube video embed, but using e frame. For example, if you want to import a tube short, this might be a better option for it to work. This is the option you use. Next, we have our copy clipboard and download buttons. We can write what content gets copied when you click the button, which is honestly pretty cool. For example, if you have a bunch of code you don't want people selecting, you can just have this at the bottom. You can paste this code in into this button. When you click on it, this exact thing is going to be copied, which is pretty amazing. Next, let's look at the download button. You can choose a file that will be downloaded here, or you can insert a URL, for example, PDF. You can also, in any of these, customize your font, icon, and style. Let's move on to Open table. I do not have an open table account, but you can have reservations made using this. Next we have product hunt, the fork event, all of these. If you're using them, these could be super useful. But because I don't, I don't really find them useful. But on product, you can select a product that will be displayed here. Let's quickly look at the fork and event. You can reserve a table using the fork. Have the customers reserve a table using your, the fork account. You can also, you buy tickets from Event Bright if you are selling tickets. Let's finally look at sticky and logo. Sticky. You can have sticky notes and logo. You can insert your logo and it's just an image honestly, but it is a logo. And you can choose the company name, the radius on sticky notes. When you go live, people can actually write their notes here. It's not working right now, I'm not sure why. Maybe if we put it on an actual page. Let's see, Now let's go live. Hm, I'm not sure why this is not working. Uh, you can just, you know, add it as a sticky note, as a decoration to your website, never mind. Sorry for almost misinforming you, I apologize. Yeah. These were all utilities and now it's time for us to experiment with all of these elements in customization. 32. Putting it All Together: Time to actually put them all together. Let's go back to the dashboard and start with, let's create a quick new website. For example, it's going to be about a marketing company. It's Extorial Design. Actually, let's do a surf shop that specializes in all kinds of different surf sports, from wave to wind surf to cite surf and win foil, make it colorful and vibrant but maintain a surfer. Let's see what it comes up with. It's a nice refresher for us too, now that it's done generating, let's actually look through it. First thing I see it's random background image that apparently, I don't think it could generate it. That's weird that it did that. Here we can see that for kite surfing, actually put in kits that are not related to kite surfing. In windsurfing, it put wake boarding in normal surf, It put normal surf probably because it's more widespread than anything else, but that's not really the point. Let's look at elements that we could add to customize page. First, I want to insert a navigation bar at the very top. I think I want to add this one. Let's just drag it up. Let's click into it here. I want to add home on. I'm going to go to Icons, I'm going to go to Hero. Here we have a little icon, let's make it blue, it matches the vibe. Let's make it a little smaller, Let's put it on the left. Let the logo, we don't have a logo and we want to link, I don't think we actually can link this icon to our home page like I want it to. Let's scrap that, but we have our header now, let's go back. Let's put our logo, remove our icon. Let's go back to our home page. Let's, for example, let's insert a Youtube video about surfing. I want to insert it to make this, make it the whole page wide. Let's go on Youtube. Let's go on Youtube and search video. Let's just copy this link and import it just here. Let's turn on auto play. Now when we preview it, we have our header here. We have our video just here. Let's go back. Let's add something else. Let's, for example, add a contact form. Let's add a form. I want to add a type form. Well, now I want to add calendly. For example, if the shop has some events that it's hosting, then it can show them right here. You can choose calendly account to connect. But let's also go to our pages. Let's go to our sections. Scroll down, let's add contact form here. The customer can stay in touch if they want. You can customize this and choose all the different colors to fit your color palette. Yeah, here we just mixed a couple of elements to spice up your website. You can obviously add elements according to your needs and the way you want to customize it, but this was just a little example to get you off started. I'll see you in the next video. 33. Practice: Use Any Element: In this practice, we will use two elements to enhance our website that we have been creating throughout the course. Let's go into our website. Let's see. Main thing that it's missing for sure is a header. I keep calling it header, but it's actually called a top bar here. I will go in and import, for example, this one just clicking and dragging it in. Let's double click to go in. Let's type in Get Learn here. And we don't really have other pages. I'll just remove this or I can leave this. For example, I did forget that we have a blog, I think. I'll just remove these and leave blog here. I'll link this to blog. Let's not make it blue. It's already clear that it's a button. Here's our first element. If we preview this can click on Blog, and our blog shows up. So not happy with the thing that happens when you click on it. Click on Let's click on Link and on Hover. We could make it a little gray, nothing less, No underline. Do not want that. Let's preview it now. You can see it becomes gray. Here we go. Let's go back. This is our first element. What's happening? I have no idea what's happening right now. Go back to home. I think we are stuck. So let's reload. It did save our top bar. As for second element, let's see, I want to actually add our Youtube video. Let's add it just here. We add it into the section. Let's cut this and put it up here. Actually, it's a smaller bit. So we can, Let's remove this. Actually, I want to make this side. Let's click in. We have our Youtube video. Let's actually optimize this for other platforms. This smaller, make this smaller, make this white. And make this white as well. It changes here, make this smaller, it fits horizontally. And put it down like this. Here we go. I mainly want to focus on the Dextop version right now. If we preview this, we have our video right here. A couple of things I want to change is I want to put in our video. Let's type in, let's copy this, Link it in here. Turn on Autoplay. Perfect. It cuts off a little bit here. We might want to adjust that, but you know that's details and you could fix it later. But the main point was I wanted to add a video and a header to my web page, and we successfully did that. That was our practice. Hopefully you enjoyed this chapter and you tried it out for yourself, or you followed along with this practice. And hopefully you learned something. I'll see you in the next video. 34. Chapter Overview (Advanced Cutomizations): This chapter, we looked into advanced customization and using elements to, you know, customize your website to really your needs. We looked into headers, we looked into footers, and we looked into a bunch of different integrations with forms, Google Maps, how to add icons, how to add little cursels, little animations to your website. And I think it's been really fun and you can really customize your website. For example, like the logo scrolling thing is one of my favorite ones. It's just so easy to do, but when I look at different websites, when I'm browsing the web and I see it and I'm like, how did they do it? But with Framer, it's actually so easy. And it might not be that easy, you know, with different platforms like what flows wicks or square space. And doing animations like that is kind of harder or like the animation curve. And the animation example how exactly your animation will behave with elements. And just to give you a general idea of the animation is actually amazing. And I haven't really seen it anywhere else before, not in web designers at least. And I find it really, really useful when you're trying to, you know, tone down that animation. But you don't know what's off. And you keep trying to change the numbers, but it doesn't work. So this way it's actually visible and you can get the effect right on just by looking and tweaking. So now was this chapter, and we actually added a couple of elements to our website that we've been developing throughout the course. And I don't know if you're doing the same, if you're developing one website or if you're, you know, creating a bunch of different ones for each practice. But hopefully it's been useful and it's been fun for you and that you are learning something new and it's actually simplifying the process for you a little bit. So I'll see you in the next chapter where we will be exploring the nitty gritty stuff of framer like pitch settings. You know, it might be boring. Like you might say that all is kind of boring. But you know, it's the stuff that we actually need to know to utilize the website to its full potential. And, you know, some settings are essential to know when you're creating your own website. So we'll look at that in the next chapter. I'll see you there. 35. Chapter Introduction (Nitty Gritty): So welcome to our next chapter which is the nitty gritty of framer, which is basically just standing for, you know, details of framer that you might not want to look at at first. Because you're just like, oh, there's AI. There's like, you know, an AI creating my website that, you know, oh, why do I need page settings? But it's actually really important to look at them. And we'll just go into detail what you can do in there, what some sort of functionalities are in there, and also some miscellaneous stuff using actions to simplify the process of development and speeding it up. And also we will look at the Figma plug in for Framer. It's actually really useful and because Framer used to be a prototyping tool, it's actually really interesting to look into the integration. So we'll look into, we'll choose some prototype in Figma and try to import it on Framer. So I'll see you in the next video. 36. Explore the Page and Site Settings: Now let's explore the page and site settings, which is right here. Here you can see a bunch of different things. On the left, we have first site settings and then page settings. Let's start off with site settings. We can go into general is where we can change the site title, set the site language. We can also add a site description which will aid our SEO. We can disable transform and layout animations if the user prefers to reduce motion for accessibility. This is where we can also unpublish our website from all domains. Because we haven't published this, There's nothing to unpublish. This is where you also add a Favicon. This little thing is called Favicon. You can see it's framers one right now. Also when you're sharing for example a link to site, this image would pop up, for example, on Discord, like the image pops up when you send a link off the website. So you can set it custom set it right here. You can add a password protection to your website if you want, which is on a higher plan. We also have some advanced settings like Canonical Ural. You can connect your Google Analytics ID to track your, to track your website's performance. You can also add custom code and scripts to your website. You can add some start of head tag. End of head tag before. At the start of body tag. At the end of body tag. This is actually if you want to get into advanced stuff with Framer, you can add your own code. Next, let's look at the domains. Our base domain right now would be Creative Coding courses. Framer, I mean, I could change it to like Yeti Learn Framer Ai. And we could publish it at that. Let's actually do it. We can see that it is now live at Yetiarnframi. You can see that the website is published and optimized. We can also add a custom domain. If we upgrade, we can actually add a custom domain. We can also add redirects. Instead of creating a new page, if you want to just redirect, Instead of creating a new page and being like, okay, this is the new page, you can redirect your old URL to new Url. We also have staging and versions. This is how you keep track of backups. For example, if you enable staging, you can actually select a version for your website that you want published. Here we have different versions. Right now we only have one, which is stage and live. Next we can go into analytics of the website and you can see the number of unique visitors and total page views and you can see the duration. Normally, if we had any viewers, this would be like an up and down line graph. But right now, because we just published it, we do not have any. We can also see the top sources of visitors from Google, Twitter, Facebook, Linton, or Framer. These will update depending on where the visitors are coming from. We can also see our top pages that are performing well. If we go into plans, this is actually where you can upgrade your website and upgrade your personal website or make it a team plan. Next, if we go to homepage settings, you can change the title of the home page, the slug, the URL, But it is the home page, so you're not changing it. You can add a page description. You can also add a search in search engines. This will show up if you search it up or you can disable that here again, you can add a page image instead of the site image and also add some custom code. The settings are pretty much the same for all of your pages. Yeah, these were the page and site settings. Hopefully you have a little bit of a clear understanding of these. I'll see you in the next video. 37. Using Actions: Into actions to simplify your creation process. As you can see, these are just shortcuts to do stuff for you. For example, you can type to browse pages or search. For example, we can create a section. Some of the actions you can actually take are create a web page, Create with AI, create a component, you can publish your website. From here, you can open the website, You can see the version of history or invite collaborators. Or you can browse the team library. I want to visit our blog page. If I put in a slash, we can see the blog pages, for example. If I go into blog pages, it takes me to this blog. If I put in, it takes me to blogs. All of the blogs that we wrote previously. Honestly, I don't think this is very functional or something that is popular. I just wanted to show you it because it is there and it could be used if you want. Honestly, everything is designed in such a user experience friendly way that I didn't actually think of using it until I started creating this course. And as something that I should talk about. Yeah, this is here, for example, version history. That could be useful because I'm not sure where to find that. I can see all of the changes that were made to the blog, for example. Like 3 hours ago the blog page wasn't there, now it is here. We changed stuff from this to this. You can actually see the changes, which is pretty amazing. You can actually go back to this version, but by selecting and copying layers and pasting them in here. Yeah, this was a short video about actions. Let me know, please, if you find this useful, I'm actually curious to hear your ways of how maybe you find use cases for this. But honestly, I would just rather go into settings or go into insert and do everything myself because it's literally just two clicks away. Yeah, I'll see in the next video. 38. Figma Plugin: In this tutorial, we'll look into Figma integration with Framer. Let's click on Get the Figma plug in. Let's click on Try it Out. Let's log in with Framer. Let's click on Try it Out again. Let's go find an example website that we might want to import. Let's turn it on. Let's select a layer to copy. We selected a layer, now we copy to clipboard. Now we just create a design new website. We paste, here it is, As easy as that. You can see at the bottom that it's uploading from Figma and you can see our layer is just here. Let's actually select another page. Let's select the home page. Let's copy this copy to clipboard. Now we just paste it. You can see that all of these elements are fully customizable. You just import it, a prototype, into a fully functioning website in just 10 seconds. It's all clickable. You can choose an image, you can change your text, customize your elements. All of these elements are separate. Just like Figma, you can change the shapes. None of these are just like images, but these are actually elements that you can change. Yeah, this is pretty amazing. And then you can click on Publish. Let's preview it. Here you have a fully, I know why I can't scroll. Let's go back for a second. It can take a few tweaks for it to be amazing. For example, this is not a form, so we would have to switch it out to a real form. Going into insert forms and adding one of the forms here, adding a section here. But yeah, this is actually amazing in my opinion. Let's go to the website and check it out. The desktop is here. We want to take this and drag it into here. 1 second. We're almost there to try it out a little more just to fit our entire page. Let's see, I think this is good. Now, if we go to the website, now we need to first updated and then go to the page. Now we have our Figma design. These got messed up a little bit in our framer and it's a fully functioning website. Yeah, this is pretty amazing. Here you go. Yeah. Just stretched out. It's no big deal. Can make it smaller. Put it here. Here we go. This is how you integrate your figma with Framer. I'll see you in the next video. 39. Sell Framer Templates Part 1: Familiarize ourselves with Framer. And how to do things in Framer. How to create your own website. How to even import your prototype from Figma. How to customize your website in advanced ways. How to really add, for example, an image, a video, a carousel, all of those things. How to animate and how to add lot files. You learned what lot file is, how to create your own blog. All of this knowledge that you have now. Yeah, you might be wondering, what do I do with all of this knowledge now? How can I apply it? Web design is really big right now and it's getting only bigger day by day. A lot of people design templates. Here I want to show you the template section first. Here we have a lot search button for the template or you can scroll down and here we have different categories of templates. There's a free one staff fix artificial intelligence agency, blog brand guidelines, business change log e commerce, et cetera. There are many different ones. Let's look through a few of pre website templates. Let's, for example, open a few in different genres. So this is like game three D modeling. This one's very corporate style. Let's also open one for a photography portfolio. Let's scroll down. Here are a few pad ones and we'll look at those a little later. Let's look at the very first one, the game like one. Let's see, it's very modern. Much a tablet, maybe. Friendly design. Or iphone as well. Like any phone, honestly. Here we have different configurations of the website. Let's, we have just different three D model characters. Let's see, it's a NFT Collection website. We can preview it. Actually, let's go to the website. Let's see, we have a message button, a Twitter button. We have the menu, and that takes us down here. Here we have a nice little animation. We have their Instagram, and we have mail benefit for holders, a couple of text blocks, some attributes. The road map FAQ section with a little animation, really like this font. Meet the team. We have the footer. This is very nicely made. All of these links work and take us to the different sections of the website. Here we have a little description of the website. We have the actual features that are used, scroll effects, textiles, breakpoints and scroll targets. You can actually learn about each one right in here, there's no gate keeping in frame of community. This is officially confirmed. If you go into the template, they literally tell you what they use. So you can actually try and recreate this effect for your own website. You can actually learn as well and not actually just wonder how did they do that. You can even contact the creator of the template, I've switched to a new one, like we've had enough of that one. We have the list of pages here, again, the description. We can report this template. We can look at how templates work. It's a beginner start off for anyone. We actually can sell our template. That's what we're looking at right now. Let's look at this one. We can preview it as well. Just a little inspiration for what I'm about to explain. I know I haven't said much, but here you can scroll down. Here are some animations. This is very nice. We can click on this, there's a little animation as well. These are really nice. Here we have a little more like some icons, some wait list. Let's go up, can scroll down to benefits. Let's look at the last one, a photography portfolio grade portfolio website for an agency or if you're a creative individual or a professional. Instead of looking at the photos, let's preview it again. I can see these are really nice photos, some really different work cases showing the variety of photos. If we click on them, we actually go to the photo. And a detailed photo, a detailed information of the photo when it was taken. Timeline, the role we can visit the website, this is pretty amazing. We can see a few more shots, some detailed shots of the photo. We can see here, we can go back to the home page. We can go to these links. This is pretty amazing. Each of these you can see, note how detailed this template is like they went and wrote this text. But this is just a template. It's probably AI generated. But it's still like the effort is there. It's not just like some lom ipsen text. It's actually made up a story for the template which gives a little bit of life to the template itself. I'm actually curious about this one. A popcorn company here. Look at that. A nice photo. Why am I telling you and showing you all of these templates? Well, because you can actually create your own templates with framer and sell them. You could give them out for free as well. You can actually earn money still by making your templates for free. You get an affiliate link and you get some money off of that. But you can see that the templates are here on sale as well. And they're ranging all the way from $40 $20 to $100 If you want to look what it has to offer for $100 let's see. You can click here and it takes us to a blog that we know actually how to create. Let's go back. Let's see, there's some documentation. Takes us nowhere, Get started, Takes us to the pricing. And if we click here, there's some very nice animation. You can see this, we have literally learned. And this is literally just click and drag, right? You know exactly how to create this. Let's see what else. These are some dropdown menu. This is really nice. The arrow animations, pop outs here and some icons. But this is very easy to add. You can look at this and be like, okay, okay, this might be a little challenging, but it's doable, and this is $100 We can recreate this with what you learned, with what you learned. And you can experiment with, let's go in. And you can actually still scroll down and see what they have used and learn for yourself what they have used and recreate this template. What I'm trying to say is you can make money by creating templates. How do you actually make a template? We watch this entire course. You learn how to do website design and framer. Now you go into templates. You scroll down, That was a little too much. Oh my god. There's a become template creator. You can click on Submit a Template here. First you need a purchase link from Lemon Squeeze or Gum Road. Let's look at lemon squeeze first. Both of these are platforms where you can sell your stuff on. Let's click on Get Started for free, You just sign up here. Let's sign up. After you have signed up, you will receive a confirmation e mail. After that, the link in there will take you to this page. It says, Welcome a board partner. Now create your store. Let's give our store a name. For example, Crafts. I want our store L to be Es Crafts. Craft. I can't tell you. Why not? Let's select Our Country Turkey, and click on Create My Store. The store Ul has been taken. I will do what everyone does and add another letter. You're now inside of your store. You need to complete a couple of steps to get your store up and running. We need to add a logo contact e mail, and we need to enable live payments and all features. You can do that in your own time. I just wanted to show you how to sign up and actually sign in. You need to add your logo, you need to change some stuff, but you shouldn't take that long. 40. Sell Framer Templates Part 2: So now that we explored a little bit lemon squeeze, I actually want to show you Gum Road. I love Com Road myself. There are many, many useful resources. And we looked at Gum Road a little bit when we were looking at insource and advanced customization. And I think it is a great marketplace. First I'll click on Start Selling. And once you're in, you have your account. And I love the web design of Gum Road. And here I have some stuff that I have downloaded before. Let's see, I can actually have my own products. We look at the design here. The color is just great. Has some encouraging texts as well. I love Gum Road. I promise this is not an ad, but your first product doesn't need to be perfect. Just put it out there and see if it sticks. So we want to click on new product and that would be a digital product because we're going to sell our template. We need the name of the product. This will be template, make some selections, fill some boxes, and go live in minutes. My first template digital product. Let's select the price. It's my first sever template, so let's make it nine bucks. I don't think that's that bad. Let's click on next. Here we have some more stuff to fill out. The name is still editable. You can add a description. Here is my first Cramer template. See on their right it is updating live as I'm typing. Enjoy it. We can write for example, it is our template for digital product services not like Gum Road, but for example, we're selling online courses. This template is all about online courses and their introduction. So they are not selling digital goods by promoting them. This template will offer you your company exposure and attention in the cyber space. You can write whatever you want, it's gums. Rewrite this entire description with the help of chat. You can also make it spicy by adding an image. Inserting a button, you can answer some text, you know, hello world, you know. Let's type in Youtube.com You can add a button. So here you click on at a very pretty button. This will take you to Youtube.com and here we can customize the URL. My first template, this is the store number, I think. I'm not sure if you can change it, but you can double check. You can change the cover. This will go in here. This, for example, will be the template screenshot. You know, the the main page, the home page, and top home page. That would be your cover. My recommendation in this thumb mail. Maybe it could be a framer logo or whatever you like, product info. Call to action. You can have different calls to action. I would keep it. I want this summary. You'll get a very nice put here. We have additional details where you can add attributes and values. For example, you know, this can even be this description of stuff he used in framer. Like in the template, you scroll effect was one of them. You can add al ah, you can see on the right. So on the right you can see scroll effect and you can add any value to it, MA, pop up effect, insane and stuff. You know, you can have form of it, in my opinion. You can invite your customers to circle community or a discord server. We don't have a circle community anymore, that's not applicable, or they can pay what they want. We can add a suggested amount and a minimum amount that we can change. In the previous page, we can offer variations of the product. If you have, for example, a template in different color schemes, maybe you could do that. But they can take it in the framer and change it anyway. But that's really up to you in your imagination and we can change the quantity, but it's a digital product, maybe. Don't do that. And additional amount, how much it costs to have this add on or a different version. Here we have some settings we can limit product sales, allow customers to choose a quantity, show the number of sales, a unique license, key, per sale product as publication. For purposes that means tax specified Refund policy policy, if you want, you can have a fine break. All right here, T over there, you can see it right here. Film policy. Film policy right there. And you hover over, you see this fine text right here. Can enter the content we don't want to sell and we can upload right here the follow right here. We can change this. There are two different content editors. We also share it after you have published your product that was gum and that was lemon squeeze. After you have published your product on lemon squeeze or gum bro, you will get a share link that you will use in this type form. To submit your template to framer. You would type in your name, E mail address. You don't need a tarter profile, if you want, you can. Your published URL goes right here and then you submit it. Then there are some requirements for the template and you can get rejected. But here in the list reasons why it might be rejected. If it is accepted, what you get, the benefits are here, make money on free templates as explained as well. So you can see detailed information about all of this on framers, submit a template page. So hopefully this was useful, and I'll see you soon. 41. Chapter Overview (Nitty Gritty): So in this chapter, we explored all the details about Framer, some page settings, and some site settings. We also explored the amazing Figma plug in, which allows you to import any design from Figma into framer. And it actually becomes, you know, a fully layered website, functioning website. And it differentiates, you know, the text from image to elements and you can actually customize all of it. We also looked a little bit at actions that I don't really use, not going to live, but how you can maybe simplify the process of doing stuff in framer. And those are kind of just like shortcuts and how to search for pages using action. So that's it for this chapter and I'll see you soon. 42. Course Project: So in this practice, our goal is to create a website and just use one of the advanced customization techniques that we lack in the premies chop game. Feel free to try it out for yourself and achieve it yourself or come along with us, but try to, you know, change it up a little bit on the go. So we're going to start with I, so we're going to create a new website and we're going to click Kramer. And so we're going to write our Rome just in here. And let's think. I'm going to write this for a dog care brand. Our product in includes for care. Show the product. Okay, let's try this. P. Okay, so after it has generated our website, let's see. We just need to add one element, one advanced. Let's skip the tutorial one advanced element. And we will be ready. I would like to add Carousel. Let's add the elements to the carousel. Let's take these out of Canvvast's, take in the carousel. Here we go. Let's stretch this out a little bit. Let's preview this. Here we go. Here we have our carousel, which was advanced skilled in our course. Lastly, I'd like to just publish it and name it for Po Care, for example. Why not? Now our website is published and live and anyone can access it and see our care, just see what AI generated about our brand. Yeah, that's it for this video.