Webflow For Entrepreneurs and UI/UX Designers | Ashokkumar C. | Skillshare

Webflow For Entrepreneurs and UI/UX Designers

Ashokkumar C., Webflow & UI/UX Designer

Webflow For Entrepreneurs and UI/UX Designers

Ashokkumar C., Webflow & UI/UX Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
33 Lessons (7h 32m)
    • 1. Course Introduction

    • 2. 02 What is Webflow

    • 3. 03 Let's Create Our First Webflow Project + Pricing

    • 4. 04 Section + Container + Columns

    • 5. 05 CSS Grid 2.0

    • 6. 06 CSS FLexbox

    • 7. 07 Basic Elements

    • 8. 08 Typography

    • 9. 09 CMS (Content Management System)

    • 10. 10 Media (Image and Video)

    • 11. 11 Forms

    • 12. 12 Components

    • 13. 13 Export Share and Publish

    • 14. 14 Style Panel or CSS

    • 15. 15 Elements Settings

    • 16. 16 Mouse Click or Tap Animation

    • 17. 17 Element Trigger Animation

    • 18. 18 Page Trigger Animation

    • 19. 19 Style Guide

    • 20. 20 Website Navbar

    • 21. 21 Website Hero Section Using CSS Grid

    • 22. 22 Website Using Columns

    • 23. 23 Website Using Flexbox

    • 24. 24 Testimonial using Slider

    • 25. 25 Website CTA and Footer

    • 26. 26 Symbols

    • 27. 27 Blog Page Using CMS

    • 28. 28 Single Blog Page Using CMS

    • 29. 29 Website Responisve

    • 30. 30 Add Animations to Our Website

    • 31. 31 SEO in Webflow

    • 32. 32 Hosting + Google Analytics

    • 33. 33 Final Thoughts

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Are you excited to get into the world of Web Design using Webflow but you don't know where to start? This course will allow you to create a website without writing a code using Webflow.

Hi there! My name is Ashokkumar & I’m a Webflow Web Designer. I’m here to help you learn Webflow efficiently and comprehensively. Webflow is a fantastic web design tool used by industry professionals to develop high quality & functional websites. By the end of this course, you will be able to create a practical and effective responsive website.

This course will teach you everything you need to know about Webflow including CSS Grid 2.0, Flexbox, CMS (Content Management System), and Interactions 2.0 And you'll learn from scratch, so it doesn't matter how much experience you have when you start.

Throughout the course, I’ll invite you to participate in a project which I’m working on. It’s a project that requires a fresh website that is responsive. This will prepare you for dealing with real-world projects if you choose to move towards a Webflow Web Designer career path.

This course is aimed at people interested in Webflow Web Design. We’ll start from the very beginning and work all the way through, step by step. If you already have some Web Design experience but want to get up to speed using Webflow then this course is perfect for you too!

First, we will go over what is Webflow and Why you should choose Webflow over other popular website builders. We will look at what our design looks like for this real-world project, then we will learn about Webflow basics and how to make use of Webflow basics to create a website.

I’ll go over all of the essential features necessary for creating an excellent website, including CSS grid, flexbox, columns, CMS, interactions, type, colors, SEO, and website hosting.

One of the awesome new features of Webflow is interaction 2.0. I’ll be teaching you all about those and how to use them to add animations/interaction to your website. This is one of the parts of web design that’s growing and being adopted rapidly so you won’t want to miss out on learning it early.

It is now time to upgrade yourself & learn Webflow.

Meet Your Teacher

Teacher Profile Image

Ashokkumar C.

Webflow & UI/UX Designer


Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.



1. Course Introduction: Welcome to my wife floor for entrepreneurs and us is an oppose where really together building a website from spread using their flu. Fido writing a cedar line off. My name is a show coma and I'll feel living through the spores. I begin my career is a UX designer, but I didn't know how for better website. So that one day I came across his breath flute and I started building websites for myself and for my clients. Currently, I'm a founder of dissension, tell you where were designed and be websites for plants using flow. I designed this course for those who are seeking to build websites without writing a single line off. By the end of these goals, you will be able to build and launch your own or your plants website video a day. In this course, I'll be teaching fundamentals on ed ones. Concepts flew way Look, it ceases green flag sports interactions issue and how to launch your website It invent the ideas put forth. This course is you are your expertise. I know who wants to expand his skills and will websites and also the entrepreneurs wants to build a website for this part, there are no requirements necessary toe and role in this course. I just only want you to come off on finding and ready to. Not if you think this course is right for you. Just pandering to it and learn a new skill on enhance your knowledge. 2. 02 What is Webflow: So in this station have recover what is workflow and why you should choose my floor or other bread for so they start to it. What is where, Flo? What floor is a visual editor who create websites online? Select squarespace and Vic obviously already helps. Great spacing pigs. Then why you should Jews Afro, they're on. Drop in on You want your website to be fast, See? Because he too long on it didn't momentum in their flu. You can get your only outs, your own templates. You don't require any third person to do those kind of things for you. Invent flow. You can do everything by yourself. So that's why I will flow is bad of platform compared to other squarespace and Vicks. So in the next session you will create your first wear flow project. So he is the link. You can get this pay pretty. You can downward dispute pitting from decision and you can click on this link or you can just illegally type this rough road or communion browser and you'll have your wife floor so sealing the next one 3. 03 Let's Create Our First Webflow Project + Pricing: So in decision, I will walk you through how you can create jobs. First Airflow project and I will also show you the pricing edge off air flow. So, for each projects, how much does it cost? So, in order to create your first vengeful project, you need to go to the website. My throat don't come in your query, Bob. Open up. Google Chrome just empties after naming on this page. Just clicking and it started. It's free. Let's start with your email or you can start fit your Google account. I already have my another kindling to it. Their flow Melancon so heavily used. Right you made use my man signs in. Continue. All right. Uh, Valentim passed wild. Then I will continue. I don't want to say my password. Great. So I directly come here on land on this page after landing on this page in order to create your first workflow project unit to click here in this blooper. Don't leak here, Fred. A new project, my flu provide eyes. This doctor templates all you can use free or paid samplers that help in the community. But in thes session they will start with the blank template Select is blank template. Read the name my first. Were you upset? Right? Hit on the create Jordan. It will create your website. Great. So now your first floor website is done close to yourself. I'm sure you have followed all the steps that I've shown you just now. And you are on the same page where I am right now. Great. So after creating and projects, I want to show you surprising that were flawed Charge. I don't have more projects. If you want tohave working more projects in your Lifelock com unit toe Upgrade your account to where Flo, Bro Their flu has two kinds off accounts. Either you can buy the hosting A comes while you need to host your website and one account where you can create websites for yourself or for your planes. Metro projects three times surprising that feliz a freemium products so definitely there Free plan In the free plan, you get two presents toe walk, meet. I suggest you know what that is Free plan and you can explore more with flow. But in order to access move features like exporting your core. If you have baby website invite flow and Now you want to export your core and want to use that corn video back and system than you should won't fit this plan $16 from one. If you build annually, it would be 1 92 bucks and this pre plan they give you two projects with two pages for each projects. You can't get more projects or story more villages in a free plan. What? In this life plan, you get 10 projects with unlimited off pages. I love features. Come back to this free plan in pro plan. You get unlimited projects and you get the site protection. If you have ah website very. You warned your users to see certain changes when they have the passport and taken enter the password and taking cientos bridges that you have put the side protection. Right. So these are the plan that airflow use. But if you have been your website already, right, so now you can also Okay, let's talk this first, you can create your team painful. So if you want to create a team on, you want to hire someone else to build your website or you are walking with another freelancer or the don't know poor. He's working on your project. Then you can add him to your team, right? These are the futures you can read If you want. You can add aside blonde to your website also, let's say what is a side planned First let me defined that first. If you already have or do you fear build a website and now you want to make it live to the airflow. If you don't want to export court and use it with other platform. But if you want to build a website, invite flow and you want to host your website. Venting that flow unit toe other side plank three overflow It just I love you. Get connect your custom domain. If you have a domino ordered or eventually the website from you bought your moment you can connect your doorman with this life site. So let me so in order to any side plan. So I have this. I plan here I choose my project and had goto that project. I will call this section at the end off our Ticos when I will make a website live the website. We're going to build every make it live and I will walk you through the whole process. So I'm not covering that part here. But you should be over with his things. All right, so in the upcoming videos, I will show you Wait like you don't want. So I mean, sure, you All the features that airflow has I will walk you through all these features that how to add this element, What is sanction? What is contained and what is great. All these elements, all these components and the CME is I will have a separate videos for all his features, right? All these humans will on the US airs and the settings how you can use these panels. And what is his view? Pores and how you can export your core. I will walk into everything in the upcoming videos. So see you in the next one. 4. 04 Section + Container + Columns: all right. In this session, off our workflow basics relocate at a element sections where you can use these elements to create your website. So we will start with this layout. So in order to create layouts in my flow for your website, you must help understanding off section container great and columns. I will call all this four in this'll ation. In the next lesson, they will cover teas and so so section continual creed and columns. Let's loan bite is an example. So he is the design, like very simple design and eating thing One where I will explain what this section what is container and columns section is like on architecture or a container, right? So if your house lets it, this is your house, all right? And this is your property area on inside that you have a container. This is what you have built in your house, right? I'm these three are the reasons for the problems you can say so. Let's learn all these full by an example. Right, So section in section element. It's an element off html where you create a section for your new are the reason or the section Let's say you have thes. This is our design that we're goingto deal in. This goes So this is a section. That's it. He's one days like blue one. This is your section area inside that you have a container. I All these items are in this container, this blue one which is fixed to it. I know you are on a big screen for the small screen on a laptop that stays the fixed wit. Right. So this is the container where you hold all your main Later off the website here I have I took these three boxes, which are columns, three columns greet. You can say where I am holding my data for individual. Let's about the sale better. I have holding image heading and the parrot off just like for us to. In the section you have your container, the container won't exceed your loud right if it's a fixed to it or it's in the percentage of the pixels so it won't exceed your loud. So in that you can put your content. I have took here the three column layout, but you may have the only one column layout, right? All you can have two or three or four column layouts. So we create these example using Onley, these section container and columns. After creating days, I will also show you how we can create these. Leo, this three column using Census Creek. So first of all you need is to bring this conception on your can was here. Once you are done, just give it a name. You can come here on the right side off your dashboard. You can give it a name. Let's in section. All right, this is a CSS property. We will cover these right while creating is giving this background colors and all. So in CS is you can define a glass name and idea right off this object. I d element i d. You can say if you want to set an ivy click here in this same elements setting pap, right, you don't name section you Can you put the section but in orderto faith ease. You can use the dot and hashtag before if you are using i d. If you want to create a manual style said, then you need to put hashtag in your CSS file to access this section by idee if you are fitting. This buys class name. You have to put dark before that. So once it's done, what I will do now is I will put my section with is 100 person. It is 100% it sets now I will food What I would say my height off this section 200% Vieux port height. So viewpoint, height and group would ve is nothing. But it contains all the space off your screen if I'm here. So now my section is fully like this from start from here, here all the corners, it cars off your screen. So that's of you Put height And if you put people tweet, let's and not use. If you click here on this percentage, you can say the big serves or the am or people tweet values the report wheat. So now all are same. You would beat his 100 wasn't invade and 100% in height, right? So now let's use the color off paid. I think you Let's use this pink. Come here. No figment. Select your color. Great. Now come to your where, Flo. And in if you scroll down in this style section, you will see off backgrounds. A bag down section, other tab. You can just put color here. Um, you can click on this on this button and you can say to your color whatever color you want to use in this case, I will use this being color, for example, that we did that we're building here. So it's done. The section is done. Now what we need we need a container that holds our content off the website. And it looks cool on each and every screen or the device. Right? So I will again go here in this element section. I will drag this container. I will put it under my section. If you look it here, it says section right, the section. So I will put it here. So now it's there. My container is there in this section, right? So if you look at their also contain of it is locked to keep it responsive. It Maxwell to change their container size, we can say the size off our container. It's saying this case, we can use the container size so 75% in viewpoint, we'd so we can say so. 75%. Right? So whatever my view parties. My container will be in the 75%. Really, It will hold 75 was not the real quick wit. His wit. Right. So in that section in the country now I have three column Leo three columns. So invite flow. You can use columns by airing elements called your element section again and bread these columns. Hold on. Now, if you're here on the pink background, it was a section. If you come here on your country, you read that column section the common column element on your container. Then it will show you its name there just like you. So I will just drop it here. So now in the settings, if you said it is a three column, you can set it as a four column. You can have one column bitter second column Quite big, but we need in this case, we need three column. So I will say it has three column. Great, Good. But if you are building these and if you want to make changes so you can click here to change your grade of the columns, columns, one column or you can select your columns, right, you can see like here. If you in the everybody in the at the end. If you click your this columns, it will select the whole class. And if you come here in these elements settings, you can say to your columns, right? It's not like you can just do these, but you can drag. If you customize it, you can just practice. It will work, right? So if you want your first calling, Toby six. It writes Excite with On Second Toby on second and fourth, second and third. Toby three by three. All right, so it's three and six, but I want three by three. So now in order toe, create this blue or the yellow one. Let's get this blue First. This container you have select your column from here. Or you can go in this navigator. All right. In this navigator, you will find all off your elements. Let's see, in the section we have container in that container. We have columns just like this. We have a section We have a container in that condemn. We have columns. So we are getting there. We just need toe colored them out. So let's use these columns. I got this container Let's Mike it. No copy the color from the signal file and just based here it's blue. Okay, bye. Before columns leave 10 by 10 bailing on the margins from its size, so I will make it zero. Or we can keep it for now so that you get the example. Let's say for these I will put a pairing off ban on time or you can use 30. Let's put 50 15. Sorry, 15. So it will put 15 here 15 years for all these three columns, but we need to give the name This column. Name a figure. Name it. TOTHIS column. Let's get this. If you click here, it will show you the your existing classes, right? So we need these columns. So it will said that property that we have you set it set for his first column, 15 15. So it will set here also. So now let's start it for the 3rd 1 column. Great, Okay, White. It's not showing because we need to set the height off it. It's a 400. Let's use 300 so it looks good. Now let's kill off Background color toe column. I selected the colors if I put a color here, it will affect all other columns. So let's do that. Great. So it is walking, right? Boom. So if you put our content under ti's under this thing lets you that this column let's use the okay, let's use this letter, will you? But now, for now, I hope your court the idea. So let's put some painting over, uh, container so that you can see the magic care. I'm giving it the Betty. I will cover these all in all a letter will use. So don't worry about these right now, so let's make it 44. So you see these So here, just like this, we have a section that section. We have a container which holds our tater off our website. For each section, you need tohave. You must have a container class or the container from here you can use or you can create your own gun, Dana. Just like I added, my own 75% invade, but that we have columns. So we have used the columns that we're flow provides. But you can get these kind off sales using ceases, greed and flax walks. So in the next will you? I'm going to call. Sex is great and flags walks. After that, we will cover all these. Perhaps right from here. These elements So see you in the next one. 5. 05 CSS Grid 2.0: so in decision we will use the essence. Agreed that flow have it's Ah, CS is style or the property. You can see that CS is has you can use that ceases greeting were from very easily just by dragging and dropping this great from the elements section. But before that I'm sure you are also creating these his layouts in your own way. Airflow cones. If you're practicing along with me, I'm sure you will learn that flow faster. Right. So this is how people learn. Learn by doing so. Please learn. And I tried to create loads like this. You will get this figure file from the resource of sections so downloaded and try to use and create layout like these. So we only have this section and container in place. Now we will use this is create to create these columns. The use obsesses great is nothing but just to create allowed in a row in a column light right. So if we delete our columns so we can delicate by going in tow navigator section or the tab off our floor dashboard, select these columns from here just or you can so you can just hit the delete button on your keyboard. It's gone, right? So let's select this container. So I'm going to show you a hack that you can use to simply dragon. If you don't want to drag and drop every time, you can just simply use If you select this element container and put command or control on the keyboard, hit control, command and race E. Then it will show you such about very concert. Your symbols were concert your elements in their flu, so I won't create, so I will type three. So it's giving me great. Okay, so greed are in columns and rows you can use as many is rose in your lay out as many as columns in a layout, right? So here, in this example, really three columns and we don't need second row because we will use one drawer and three columns, right? It's one by three. So if you select is on T here, if you look at here after selecting these or after getting what dragging and dropping your greed element you in cities and it greed. I'm here on the bottom, and when you click that you can see the gap off your grade, right? It means this is your greed. This is You can call your grades. This box is four blocks. You look at here So these gape This is called a rogue. If you look at 16 let me make it 50 See the difference? It's called your rocket. Sometimes you have some lay out for the season in your website Very required toe Pull some space between your grades right between the layoffs. That's how you can put this. We will use this feature in our design where I have used these. It's great if you look at this So I put the 50 from here and I used 50 from here as well. So this is what I will be using. Census is great in our when we go on what actual project So this is how you can set your height or you consider space or the gap in ceases greet you They call it Get that role. The robe is 50 in the column Gap is 16 So I want to use 30 because let me see now example I have Yes, I have 30. So it is 30 but we don't need the second row So what we will do if you come here and these columns and the rose if you add if you click on this plus, but you can add a column, right? So we need three column scraped school so you can keep that. And it's in the last truth or legendarily, if you put more data and if you need arose that you can use this more prison rated column for you next column and in the rules, we don't need any rule at the moment because we have only this three columns and we don't have any rows here. So what we will do? We can deal it our row from here, right? All we can add our road from here, but we don't need a Negro, so we will delete their one also Good. Let me show you the other way you can. You can increase the size of your great right. So here, if you there's one fr means one fraction, it will consider it as 100% right, so you had three fr. So in the one contender you are using three or find putting gaps in your let me make it 16 again so in your container. You have three sections or three fractions used. The fraction. If you want to increase the fraction, you can do it from here. If you click on that fraction here, you can increase let's at one point or the two fractions. So see the magic. This is how it jeans the layout that you want to use. But in our case, we want only one direction. You can also make a fraction zero point 25 fractions. It'll point for I All right, so it's like 75% 25% and 50% off your great good. We have agreed in place now re need de visa. So what is diesel? This is season. You can just drag and drop onto your greet. Okay, great. Like Gordon diesel in your house, you have the reasons. Let's it the launch, the drawing room in your bathrooms. Those on the pitch in Those are called the D reasons you have did in your house, right? So you're putting some Let's in your bedroom in its color diesel and in your bedroom you have lets a decision bathroom. Let's get the name of bedroom. The last name right in that you have your TV on the cover. So let's use this image rights. So this is how use image. It's just a matter of copy. Uh, the adding the element. You can choose the image if you don't have image and just upload image, or you can drag and drop image. We will use back cells. We will use back cells, toe, get the image. So let's use these DVD meat. Okay, I said, this is a bedroom, right? So let's download e small size. This is where you get the free photos that you can use for your commercial use so they will not going toe. So you so don't worry about it. So after doing that, I will just drag and drop my image here, but it won't work until and unless I just closet. All right. So I'm not sure why it's not working right now. Chewed Well, you can just drag and drop any image on here, but defacement, if it doesn't work, just click on this upload button. All right, so I'll go to my download section and download. I will click on the image. Pity me. I just download it. So if you look at here already is selected women's because I have open tees, a set section here, this images section where you can put images, you're really of files and you give fight or the defiles if you want to. You disease your image in your house. Let's give these great and name call house in your house. You help a bad room, right? It's a one section or the reason off your house on and you have bedroom inside the bedroom . You have a TV or the so far your bed in your house. You have You want to have a kitchen, so you will have another day visa in your house that is called a kitchens hotel. So I'm going to use deal here. So right, So the beer I heard earlier waas these bedroom. Now I have kitchen, so I'm giving you the example here so that you can use these. Do you on disagree in your project into Bill your website. You have kitchen right in the 2nd 1 you have kitchen, but now what I want to do on said the color so that your lower that way have been using. So let's use these Let's get that now. It won't work because we have to remove these image. All right, So said the height. Just like the t in our last will you come to your size section and give it 400 pixels high or the 300 pixel height. Now I will rule these or let's say, let's play with more. So you knew Ki Chun. We will set its color up toe red. Right now you have in your house, you have the reasons Bad room reason where you help bedroom kitchen The reason where you coop a delicious food on add another deal for you're garden or your laundry room. So let's say control E or command eat toe. Such are the reason I will put a deal here. Okay, great. So let's say launch. Right Said its color. If you scrolled homes, you can set its color. Let's use this one this green. So Okay, the Israelis letter. Okay, so let's so see, we have a section inside that section. We have a container inside that container. We have created allowed three column layout using greats. Great. So now you want toe help? More rose. Let's say if we extend his father. What you need to do create the addict is great. Come here in the role section off your great click in this federal plus I can you have added a row successfully in your websites. What I will do Have Richards copy Mike doing the control command. See off his bedroom. Reason I would select in my house and I will just based it. See the way it looks. It's very easy to create a website within a day. It's not looking good, right? This. Let's make it 30 This great. Select your green here any degree by clicking here, or you can click this. If you look at this icon here, conflict these you it will open automatically. No said it's 2 30 right? Good. It looks awesome, right? It's very pleasing toe I. So this is how you can use grates in the floor. It's very simple and widely used in designer and developer community. This is great to create layouts very effectively. This is how you can use the reason. If you have any query or the question, please leave it in the community section. You can ask me and I will surely help you with your problems on the questions you have. So I'm sure you have got something out from this class. And I'm sure you are also playing around and along with to me via watching this video. So in the next video, I'm going to cover flags, box, CSS flags, walks take threat flow, doesn't have it here. But we will use thes style section off air flow where we will create ceases flax box. Right, So see you in the next one. 6. 06 CSS FLexbox: Hi there. So in the last section V help seen This says it's great we have learned how to use this is green effectively invite flow in thesis session, I'm going to show you how you can use flags Marks. It is also ready, popular and widely used by the available to create Allowed very effectively easily within an hour. So we have these great here. Let's did that create. We don't need it. Animal, right? We're going to create these three columns using flags box. So how you can use flag smokes is if you select a container inside your container. Let's make your condemning height. 200 wasn't forced so that it will go on your cream. All right, so here I am going to show you how you can use black smokes. So bring your TV zin by adding elements. Dragon, drop on your container. Good. You have your being here. Now give it a name. If you're any query related toe style. Don't worry. I'm going to create a separate Will you hope you style effectively and how you can use more features in this style panel. So let's give it a name to our deal. block. Let's flags right inside their flags really create l or create three new reasons. Let's give it a name. This tale flags books, right? The 1st 1 was flax inside. Dead, not flex works. Let's change it to something else that will help you understand it better. Flex container has changed in the coffee. It's called Flex container. Inside the container. I have the flags, but I'm using the blacks condoms. Just giving the name. Don't worry about it. And it's just a matter of giving the name so that you or your friend or your developer they're walking on the website. They can understand what is it, right? So it's a matter of giving the name. So I will copy this flags item, and I will based it two more times. So we have three flags. Item here. Good. So now just select your flags item and in the size section off style panel. Give it the height off 300 and just get that color. Thes your local. Oh, good. I would give it a name I call up. Let's cities. Could the three it will affect that. They really see this. He's going outside off container all right, so don't 20. We will fix it, I said. Now select your flags container. Now I already to learn flat spots. You just need to hit one border in your layout. Here, you can use your lives as a block, right, so it will stay in the bloc sections. Next to that, we help flags where you can create your flags, items and flax box in where. Flu. If you hate that, if I hit here, so it flags now good. It is flags now, but where is my reasons or the my flags items Click here in your flex item. Give it off with Let's say 20% could. So I held my flex item. See great Click Your flex container that I think that you have made flags. Select that the flex container in flex box. You can said your layouts of your country inside the flat spokes. As in what vehicle? Let's say it's column in in there, floating. Call it vertical, but in ceases it is called. A column on a horizontal is called rope in CSS, but in where floating? Call it as horizontal, so never get confused when you are my new long CS is in the future. So column is what ical horizontal Israel's right, just like viddied insists, is great in our last for you the my default of airflow Seitz off layout Flag slowed as horizontal. What? So the direction you can set horizontal or vertical? Oh, you can your TV, your direction. You can set he as three waas. Let's say if I put the rivers, it would say Roe iwas in the CS is in the back and but you don't need toe worry about it right now. But if you want to reverse your content, you can just hit this partner and it will be he waas All right, look. So this was flags direction. Okay, now a line your items would So my items are biting Awful stretch It means it is 100% to its flex container. If I put my flex antenna height six, it won't work because I have said hide fixed height to my fixed tied to my flex item which I five movies. If you click on these, it will say about us, Recep, If I didn't see right so it is See it was 600 was and that's Why? So let's make it 300. So all we'll be seeing now. Good. So it was a landing items. You can align your items toe drop, right toe talk. Can I Clanton Center. What? But since we don't have any height and Metea's let's set it, don't worry about it. So let's see what this for now, we don't need it. You can say toe a line. Items to pop. It's your content, but you can make it to center. You can set it toe end in flex works. They call it like if you want to say toe item to talkto Stacie Black start. See here If you our on Ellie element, they will show you a pop up a tool tip that have some description and that from that you can understand more about Element or the state. So here, if you put on the top, if I want to put my content on top, let's say if I have any heading right in my rep side or the flex items, these items, so we'll also qualities. But if I have anything, it's a this one. Everything will be at the end, so it is steak toe your and off your container But I want to keep it a stretch right now. So this is what you should But if you have any requirement particle equipment you can use Thies flag stop or means flag start flex center and a line items and right then Good. So now let's see the justify, justify is what we going to use here. Toe took a space like this We don't have a space like this at the moment But in testified you can justify your convent like to stop by default it will be to start right there. Your content will be to start but I want to put Mecca in the center So see the magic here. If I click here in the center just difficult to the center See, all the content in my flex container will be in the center right? So if I want to put my content at the end right and means here you want to start from here Initially it was from here but I want to start my contract from the end. If you hold on, visit with end it is at the end. It will start from the end not from left, not center, is under right Sweeney overtones for you as an entrepreneur or the designer, you can create your own towns. Let's say I want to justify my country to the left. Then I will use this if I want sent up out my content that I will use this if I want to right along my country than I will use these in flax box free. But I want to put space between my country. Right. So between these flags items, what are the items are there in my flags container. I want to put space between them. So what I will do is I will use this space between bottom with the feature from where flow . So if a click here, it will put space between the content and it equally distribute the content right? Great. But what if I want to spook space around, so let's use the next. But then, if you click on the next bottoms based, distribute evenly with space around all Children, so see, all are same. If you look at these one, let's that this is a 10 pixels. It's our 10 except from here. He's one is also putting the 10 pixels. He's one is also putting the plan pixels right. But we don't need that we need is space between. So the next one is wrapping your content in Mac float. So if we pulled a next item here, So it is just aligning toe the same Rovi help. But now what if I want to read my content rep means I have 30% off with for my flags item, it will automatically read my content to the next broke. So I will use this facility is flex container and I will put right Look at this. It had disporting these on this three new boxes the next land rights elects pulled some these one so that you can understand it. Patio pet look. So we had this all this wrapped So if I add any other so it will start doing that. But I don't want anything like that. So this is how you can use wrapped in flags books, just like we had adding Rose in overseas is great, right? So this is how you can do that? You can align your content, don't drive If you don't wrap, it won't give you that option But if you wrap, it will ask you how the only set your content, this is how you can do is and rob center bottom. Stretch on. All right. Good. So this was our flags box that you can use to create Lee else, right? So I mainly use flex works within my seats is great. So I used exists is great to create these boxes And inside that I use this flats box. Let's say if I have a green here and I want to center align the heading toe my center off this flags items So what? I will use every lose the flags books again and this will call nested Flags Box. All right, so click here in this this billy out it will make sure flags I don flacks walks I want my content aligned with the center So I will use thes I've own is heading or any content inside this flex item Toby Center align. So I will use this justify content to my center. So all the content I pulled Let's say here if I select this flex item copy face of my hearty If I put a paragraph if I put a fight hit control Plus e and I write better. So it will give me this paragraph. Look at this. It's not looking good. Why? It's not looking good. Because we need to learn one more thing on That is if you're selective flex item here. All right, I want to set my flags Item content. Toby, what occurred right in here? We have used horizontal. But here I really use water calls so that it looks cool. It's starting with funding from the center. It's putting them. But we have not put the painting. If I put the pairing 10 here and bring them here to a local wedding day in here. Since we have the fixed the hike, let's use for 50. Okay, Now it's looking good. Right? So this is how you can use flats box and inside their flags Waas, you can use another flag. Sparks toe, create allow in tow. Stallion. Leo, lead in the water car. It looks cool in the mobile. It also looks cool. So this is how you can use flags box in their flu. So I hope you have also did this practice along with me and you have long this flag sparks essentials. Don't worry. If you have not got anything, you can watch this video again. And if you still have any query, you can let me know. I will surely help you with your queries. And I'm going to use all these features that I'm explaining here to create is lay out our design, right? We will convert over design using these layers, so don't worry about it. So see you in the next one. 7. 07 Basic Elements: welcome back. So in the last session we have looked at how to use flags box in workflow indecision to really look at least list item linked block and Botton in where flow how to use this wound but very effective elements in your website. We have looked at these do block in the last two years so I'm not going to call it is here in this video but we will go with this full one here so will start creating content or adding elements on our can waas by adding a section So as I have mentioned in the last will you toe bring that such feature off Airflow unit took click off press control plus e If you are on Mac unit toe race common plus e then he's such a bar will show up inside that you concert section Okay, there's a section so you can just hit the enter and it will be on your can Waas on a once you have selected section, I will again off bring up that search feature the search bar and I will look for container once the container is done I hold that you have learned all this basic that I have called in my previous will use. So here I am not going to talk about these two things, right? So now in the container, I want to use this list. I want to show some list on my website. All right, so let's bring that on. Put on in your container. Just dragging and dropping it. Great. Since you have your least inside your list, you will have the least items, right? The least you can style it using the style Deb off the style panel off airflow. You can style your leased by. Let's say, if you don't know style it, just click here. Your least item that say, If you see the Lord's it want it a fact leak None. Right? So it's all coming from the back and upsy essays, right? So I'm not going to cover that in death here, but I will show you how to use thes features here for these list. What If you want to use the bullet points, you can click here. You can also click here for the square bullet points right for the rounded you can use. Select is for the square. You can tease all right. And if you want Oh, number your least items. You can use this 1 23 right? If you'll just copy and paste it, it will auto increments. After doing that, you can also use these letters A B C on this Roman numbers. You can use that, right? You can get all these from here. Okay, So now I will double click on my least item so it will allow me toe ad Next that. So let's say my new or forced least I talk great. It's It's been added. So now what? I will do everything he's but the one and I will just go pee and based my list item. Right? So I wouldn't know style. My list item. I want them to be in order or on order. Let's I would you circle for my list items You can give a color. Come here down here in this typography section. But I will used on hold video a new will. You will be there so that you can I know how you can use typography. How in this position in where Flo ride. So I'm not going to show you that here, but it will be a separate for you. What? So after adding thes All right, now let's more to the next one. The next one option is after least enlisted. At least item is nothing but the same one. This list item, right that you can add. But if we just hope he placed it, This is how it works. Or if you want to Edler least item, just control e and type leased and at least item. It will automatically hurt new Lean at eight. Least I don't. Right. So this is have you add the list item in life low? Great. So now let's move to the link block element. All right, so in this link, bloke, what I want to do I want to create a border town where it has an icon or let's yes, let's go. It is really great important which will have icon and a text in that. Right? So how we can do that? So come here. Just drag and drop. There's on toe your container inside your country. Okay. The link block is here. You can use ling block toe Connect it with you. You are in Let's say five type here the Road or google dot for dot in the dot com. It will saying, and you can open when you the clicks on your legs. If you want to open it in a new tape, you can check here. All right, So if I dive, I need toe aired A X rock here for the text. I will again do control e. I will write down X block. I will look for tax, bro. Here's the tax broke. This is our did my tax inside my link. All right, so let's say like you. Okay, good. The click here. Let's add some style your bottom right? So for now, I will just hide it. So in the layout in this place, and if you look it, you can hide the content by clicking here in the layer. This plane land its height right now. So in the league blow, I want toe get a button. But first, let's put some parity our container so that it's pulled some space from the drop on. We have some space in the room to create a button look awesome. So select your ling block here after selecting it gives the name. It's a week here part time, right? So you an appropriate name Toe Egion Every elements on your website so that you or your partner or any developer is working on your website or in your team can easily understand What is this bottom for? Right after giving it a name, I want to put some painting around my button around my tax right. So I will use if I click on the zero. If you could get to come here in this spacing section in the style panel, If you click here in these zero, you can put then. So now I want 10 from all sides side. So if you even see these Adul it tends is there right? So you can read It feels like this. You can drag these reading so I want to put do and be big cells from every size from top pour down left and right. So I will press the old key on my keyboard and I will read this so it will put spacing from left and right, right. If you're doing it from top and bottom than do do I Sosa on I would be from all the sex, so I will also press shift if I put chief See is putting that 2020 from all the sites. Great. This is how you used painting in where Flow how to set. Ready? This is how you can set. Ready in where? Flo. All right, I would. Now I want to give it a background color bar. Before that, I want to Moody's underlying from my button text. Right. So I will click here in this paper off a section in the style element property You can click here the decoration you can just market you can put under land on top you can put underline what? Um by using these decoration. But I don't want any underlined. So I will. He is not important this cross water so it will remove that underline from my link block. Now I want to set a background color toe my link block. I will come here in the backgrounds and I will lose. Let's say amusing thes. Let's use thes Orangemen Tokelo All right, Um good, this looks good, but this blue color off our tax, it's not looking good. So what I will do now is I mean in the typography. I will say Change my color Black. It looks good now, right? So this is how you contain the X color on the underlying and a background color to your link block. But as I mentioned, I want to also use the image here. So is I. Have I took these in the previous lessons to use image. So, as I mentioned, hit control, press control on a keyboard and hate and then by image. Okay, you got damaged there. Just hit Enter so it will add image inside your link broke right? So if I come here and I want a full image eczema, let's put this image right. So let's key, you can change the wheat and the height of damage. From here. Let's say the high. Let's put the height of the image to 20. All right, let's put the image of your dog 21. Let's make it a little PICO. Let's 100. So does he join him? Each? That's 100. So this is your image, and you click here button. So when you preview your design so you can click this I button toggle preview when you click this, this is how you can see your website. If I Hubble here, see these? It's a link. If I clicked your will open google dot com in a new tab just like this. That's what this is how you can great blocks link block in your right flow. Right. This is done. Now let's move on to the next one which is bought time. I know all the designers and everybody wants to use border in the website and every website has brought on. So let's put this button on my container. I've been high these link block and this is my button on. Just like I changed color in link block. You can change color to your bottom, but just going here, let me use the red one. All right? This is how you can gene the color off your bottom and you can link so you click here. It will open a setting element just like blow. You can lead your button to the page off your website if you want to. On you can. And it is into the pits section that we will call in our design where I will link this how it walks link. Cool. Oh, this section. So where I will call it this way section, and you can say in the click on this button, you can send the email, write, use us. Ah, the contact page. You can do that. You can set a call. I look in a stage off file. Let's say if you have a file here off clear file, you can just simply just so this cannot catch a fight on keeping off that open in a new tab . Let's preview these. If you're talking or not, click it. It will open an image. The new tape. Right? So this is how you can use Porton in where flow. It's very simple. Just dragon Drop E on your can was, and it will walk smoothly, just like her mentioned off. It's his cases right where you can use it. Book. So in this situation, when decision, we have covered these three simple but very effective elements that can be used in your website that are most used in a website in a single website, gentlemen Steve, let's say if he's let this plus button ed custom attributes. If you look at these one here, here, so it's important, right? So they have used important. It's a button, but the way they have defining it so unique that you can also create this kind of bottom in your workflow. So in the next session, I will call this typography section right where I will also show you how you can use these search tile panel. Invite flu so that you can style your design. You can add images you can airbag only images. You can style your headings. You can give phone size and do you can change the new phones and all the things that you can do in their flu. So in the next session, I will cover. It is typography. So see you then. 8. 08 Typography: Hi there. So in this section we will look at how to use typography panel on headings and paragraphs and links and more in their flu. So I hope you are also practicing along with me so that you can understand that floor where easily it's highly coming, right? So typography is very essential in any website, right? So any user comes beer website, it's it should be attractive and it should be well, different, just like here. So if you look at our design that we're going toe build toward our cause is where I am using some headings and where I held some paragraphs and I have some more headings with some links. This is a link tax link. So this is all we're going to cover anticipation so that you can or you will be able to create allowed like these in my floor, right. So headings if you're drag and drop heading onto your condemn DNA, so headings there are six kind of headings heading one mostly heading ones are used in your hero section off your website. If you look it here, this is heading Wondered I'm using here right and heading two or three are used here. The subheadings right off the subheading means on the section heading mostly used are heading to and heading three heading full fine. Six are used. Do different small. Let's look at this. It's heading for right. This is heading for This is how you can use headings If you click your didn't show all settings, it will show on the settings that was here. Right? So this was your Etch one, right? This is the edge on If you copied these and test it now let's put it at school. It's too great. Now let's set it toe edge three. No, let's said its edge for so answer like that. So everyone is vigor. It's smaller than edge one. And so right. So you can use these kind of headings. Uh, yes, but your requirements as for your designs, right? So I will. When we start creating these layout, we will create a style guide to create these headings, and I will show you how toe air phones. Right? So now I want to use a phone that we are using here for our headings. The foreign name is a domain, right? Or the dome in, However, you want to pronounce it, it's lonely nor domain. So I will look for this phone in Google forms. So how you can add phones in workflow. So click here in this project setting. If you If you click here in this where flow in the corner off both left corner. You clearly if you hold on the lower, it will show these three lines. And if you click that, it will show you these three options and select the second option project settings. All right, it's loading after this is open right unit to select its phones. If you click here these phones, it will allow you to add your custom forms. If you have a phone file downloaded right, then you can just upload your phones here. But I don't have any phones or local. Let me show you a one phone that I had. All right. Okay, it's not here, but you can upload your phone right from hell. Look, But here, let's use after coming down here on the screen, you can select a Google phone or you can upload your own custom phones. In this case, we will use Google phones because most designers are using free phones that are Google phones and it already farce to load right because it's coming from the Web. So it is. First off, we wondered Omen, that we have seen Okay, look at the dawning Click the bombing on I want Regular and the board. I only want the leading and I will hate that adding button So it's added right? Great. And I wont another phone authorities for the text I have used is Roboto. So let's add the roboto here. His phone service free So you don't need toe pay for for using this phones, lectures these light regular renew same a bowl bowl and and add phoned. This is how we were phones. I we have a two phones here. Dominic and Roboto. Now go to your designer. If you click here, you will going toe It will take you into your dashboard on your website Dash world, once you are here, So what I want to do I want to create a pitch. So if you go here in this pages section all right. And if you click this create a new page By clicking this you can create a folder and by clicking his file. You can create a new page. We want to create a new page. It's a style, right? Right. So we are creating a page here called Style Guide. So I will take a section inside that section is you know we will. Is condemning in that container vividly No headings. My control E and selecting Heading I will copy. It is for six times 3456 and I will change it. Stool. It's three four. It's fine at six, right? Great. You have at six. Select this age one. Come here to your style. You can give it a name or you can select its all its own headings means if facilities all 81 heading So in your whole project, in your whole this project, it will use its one property. Whatever you have defined here in a legend headings all edge one headings will be same like thes. So let's say this. So in order to get a so I have a phone, it's storming. So let's select a domain score loan. Selected Stoning aerial selected for people on the phones. Select on Darmian. Let's look for Domine. Okay, good After again selecting a phone. I want to see what is the front weight. The front weight is bold, so I will select. A bullet is already selected. So it would be there after doing that and to see what is the phone size? It is 72. I will set my phone size to 72 and now line height off my form. So how the phone height? I will say it. It's also here. But if you click here, it would say 82. All right, so let's put 82 here, so if you look at it looks similar to this, but we need to set a color off phone heading. Color it. Is this right? Copy that color. Select your phone. Heading here on. All right. Submitting it. Philip. These alleged one headings. A press clipping. These just copy your color. Here. It will look same, just like he's heading one. Let's put one also. So it looks like that heading one. Great. So now we have our heading here. Nightie facilities, all headings. Okay, So now you have this phone edge one created whenever used. You used this edge one. It will help the same style, the same form size and the phone. Hi. Tried the line height and the formed color. So if I Let's say if I use a new hatch want for a red herring see my default It's like this , right? So you can say my main these all you can say I am nothing where Flo State will look same everywhere. Great. But this was our edge. One just like this. You can add style. Screw all these six right? From here you will have these file. If you're going to resource extraction, you can download this file and import into your figment file. And this is how you can use No great. This is how views headings in workflow. Now let's look at the other element that has in typography is paragraph Just Dragon brought this better off here. You can help this paragraph. You can set the style same as we beat for headings. You can see it all better. Oregon had last name, right? So this is how you can use bag grabs similar way You can select this link. This is a differently not a ling block. But it works the same way made sickly me. It will work the same week. You can just link your settings, toe page, pate, sections, email, phone or the attachment right. The next one is he's backs. Rock backs looks a similar to better drops, but they're not, because tax blocks let me put it here. So if you want tohave a small, small tax right there, you can use textbook. Let's 40 some tax inside Diablo. Let's say my let's all turn em 10 name or the by If you want to buy, I sure showed up. So put these when you can use tax rocks and you can give uh, leading to it by clicking. If selecting it and it will ease, put every show up and you can hit this cliff so it's linked. But it's a tax block, right? This is how you can use tax broke and flow. Now the Blaquart every blow has this bloke court, and everyone wants to use this block court so you can just make toe drag and drop on your art bold. Or you can Woz and you can customize it however you want. And this is a rich backs block in your blog's If you have. If you want toe show your whole content. Write off whole conduct your block where you will need this reach tax block So it will have headings. Headings on it will have paragraphs A few click here. You can also hair at the image from here. Actually, if I can just upload a new image, I can set image full of it. I can set image toe left the line. I will use the full one. Or if you want to use images like these, you can use the mayor elect is also Hi. So this is how you can use typography elements in workflow very effectively. What? It will come by practicing right? So if you practice more and if you want to know more about these, this is how you can do it. So in the next session, I will show you how you can use the CMS in white flow said that you can use blocks, you can add categories, you can have your team members and you can do many more things with CMS. So see you in the next one 9. 09 CMS (Content Management System): Hi there. So in this video, we will look it. How do you see? Um is where Flo CME is. CMS is nothing but database you can see in your website. Well, you need a CMAs if you want to create your team members. Right where you can use Simmons. If you want to have blocks on your website where you need CMAs. So in this session, we will create a simmers for a blow article. Tech Veer went to use in over design. Right when we can. What over? Season in tow. Working where? Flo Website. We will need this block article. CMAs. So I'm going to show you how we can create a Samos. So first in this panel in this left fennel off your workflow panel, click on TCM. It's gone. It will show you. Or you. Although I regretted Seamus list here, if you don't have any, you can click on this created UCM new collection. Barton. When I click that it will open this panel. All right, so we're already have few templates. The collection templates available for block post for authors for categories for projects and planes. The members listings you rents. If you're building an even website. You can use this collection. It's a ready made collection for the recipes and so on. Right? So in this case, in decision, we want to use block post. So let's click. That already creates stays Look posed with some pretty fine fields. So in collection saving you need to your collection name, right? It should be approved rivers than All right, blow post. Right? But you know single ever isn't should be like this in the cooler. It will be like this and your collection urine is thesis. I will ensure it is when we create a website. So when it shows up So if you create a block let's say this is a website. You sell your daughter for Ohio. This post will be you are in order, Princes slug. After that, we will have our blow post name. Right? So when you school down so in that you will get the collection fills so in wear flow. If you use the pretty fine template for your collection, you will get all these things pretty fine. Right? So if you want to add a new fail if you don't have any fails here If you want to add a new first in your CMS or no collection, you can use this. Add new field, but click on this magnificent button and you will have these options. All right, so now these are the options you get in Web flu. All right, so if you want to use the plan text, you want to reach tax works. Busiest stacks is used for your blog's details. Your contended else. That's why it's already used here for your post body, right? The buffalo already used this. The image height for your Brock post and the thumbnail. You can also use the more people images if you have ah, gallery. If you want to show more than one images in your block post, let's say if you are creating a block post or the recipe post collection than you will leave this multi image seen so that you can based or put many images off you off your recipes, right and the video link link. Also you can use you can use email fails in your blogging if you're creating a team member where you will need this link and this email so that you can provide your remembers email in a contact number using this phone. You can also use this number one. You can use the debt time so that you can say the current, uh, off manual dead time myself. Otherwise, we're flow, create its own, created and updated on that time when you create a new post, I would show you that switch. If you want toe set your blow post. It's a future post or not. Very well, then you will have to use this, which this is what they have used here and color. If you want to sit a color to your post, let's say a few of for certain portal certain categories. You have certain colors for the titles or the category name. You can use this color and options you can use also his options, and you can use this fly. But age failed also to upload. Believe files here, right? So since we have these, I feel really a grated cheese block post. As you can see here, it's been added here in our CNN's collections, right, great. So it's done. So now that surgeons is before you well, so now we have our block post, but I want a category. Its collection. Also, because I want to connect certain categories, let's say finance, wealth and health categories if I want to create any categories. If you're creating a block for a tech company so they have categories like design, tech development kind of categories so that for that you will need off. Get a very collection. So I will again click on these creating a new collection. Barton. I will have this pretty fine collection. Templars were flow. I will click these categories and you will see these your category name. It will help category. It will love category like sick cattle. Really? If your better greener design. So our website, you are getting very designed and it will show all the categories off the particular design or the category belongs to write. So for these looks like this, that the first they have used, I'm going to use only the name for T. So I don't need all these, but let's put it there if they require in the future for any categories, let's of for finance categories, we can use a your local or the blue color that that our Tim color that I will show you when we start converting our design right in my floor. Okay. Hate on this. Create collection you connect. Collection will be created. Great. Seems to have good two collection. Now you need toe. How are you? Want tohave? A bloke post If you click on this block, post their flu health these lunatics or damage data that you can import or you can at your own bloke forced by doing taking on these new blow post When you click on the new broke post, let's say the name of four bloke post is taste the post bodies Lord and some if some Darla right? This is a post warning. I really use heading there for our block post. That's hello. If I select is they will give me these options. Let's use heading three for this Hello and for thes way. We won't use anything so well. Stays a as a better graph, right? So in the post summary, let's put some content loading. If some for somebody, let's posed details raped and for the image. Let's pull on images that use thes image that we have used only. So these two image for your thumbnail and for your man image, right? But Tom Nell Remmel should be same as what you have designed right for your block post. And for the main page, you can upload a bigger image. I don't want to say it any color on the future, so I will just play these. Let's set off feature so that I can show you a simple example. Let's used, he's It's not said that it's killed is off first post. Great. A post is created, but we haven't said the critical for post in orderto have that functionality in your block post. Come here in a block post. Click on these I gun the city night gone. You want to connect your It is blow posed with his collection. So to connect to collections unit toe add a new fill My clicking here or here I click here I went to reference my bloke post wheat categories, right, So I will use Let's give it a name. Get their goody. Let's select the collection I want to use categories thinks feliz require. Without selecting this field, you won't be able to create a block post, so Okay, let's say this will. It is then, so collection. Okay, so go into your chest, blow school down. Do you reach you that this film is record scenes hoping here. So it won't work because we have note, enter any category, right? So there is own error on this page. Check the error myself. Fix it because we have not added a category without Eleana creativity. It won't allow us to and details. So let's get a new getting villages like Vic late in the new block post. Let's name it as design or finance, right? That said, it's colored toe the being like red. It's great finances created. Now let's get a new one. Let's get name is wealth used this color toe these orange like color. Once you get agrees created, go to your block post like your chest blow. Now you're a beauty is a category. Let's set off. Broke with the finance, right? It's done. Let's create a new blow post here. You turn them well. He's hap. Sorry is well, my new no post. Um, he's wet all right. And a poor summary. Let's give it to post somebody that's use an image year. This is how you put the image. I won't select any get together here. So what it will do? It will not let us create this block. Forced because he's getting very is mandatory for you to select off for you. That's use this finance again. Okay, well, so far really created off collections. And we have referenced this collection with this collection. So Red Beacon Fage Peters off this collection, right? So now just publish you page so that those collections are available for us to walk with. Okay. Now, in orderto fate, your old broke post you need is at an element off collection. Least collection list is nothing, but it shows all off your block forced that you have in a collection. Let's say toe once you dragon brought that collection from Ellie Element section, click here. Click here twice on this section. It will ask you to from its source. We want our broke post select bloke post. We have to blow pose right now. So review said are Leo, toe to colon. Right? But this is how our block post will look. See the second the last one we created was healthy is well on. The 1st 1 was dashed blow. Great. So now we need to show our image. Look, title and bloke Somebody that we had. So come here In these collection item when you are here. Election least Webre Election least collection item and said collection. Least you will have your items. These are these are call your items collection items in that aid heading by pressing control or command E. If you're on Mac, you can use Command e. Or if you're on a PC, you can use control. E toe, bring that search bar and by an image. Right. Okay, So you're image bag. There is. You're no toe. Bring your image foam. You're a set panel. It's very simple. But to fetch your block post image you need to select is get image from and a terminal, right, Because you want to show thumbnail here. So see, it will show your all off your blocks here. Right now, we have only to block posed in our collection so that it will show only to block post here . Right? You in under our image. We want ah heading. No, let's use the heading three. All right. And I want to get a text from my collection. Just click on this. Get text from block Post, Select field. I want a name off my block post. Okay. The name off my block post I hear now I want to show a post somebody so that users can get idea. Like all what is this post is all about so less Use this tax block or paragraph. Very glove and get decks from Select your post summary. Great. Your post. Somebody is here. But now I want to shoot the name off My get A very off this post belongs to write So for that used text link Nextlink and I want toe send all off if visit leaks on this Becks link I want my user to see all the blow that are coming from this category So I will select this category here I will use this collection page are excellent This category and I really sell it Attacks the name off my category that particular most belongs to write. So these my balls Great. So this is how you create a collection of the CMS in the air flow and you can fill your debtor like this? It is very simple and very easy to use. I hope you are practicing along with me so that you learn very flow fast, right? And please share your comments. Or if you're an equerry, share it in a community section. I would surely help you out with your queries and see you in the next one. 10. 10 Media (Image and Video): Hi there. So indecision really learned media How you can use images with you You do video and largely an emissions in my float. So not that many people are raising this lordy animation. So I'm not going toe Show an example of this But I will show you the basic off how to use this. Right? So we will show They even set the example of this. So I already have a section in inside text section. I have a container. Right. So I'll click on this element section after dead. I will scroll down still, I teach here in this media so I will drag this image. I will put it here. No, you can choose image from here and also here in the settings off your elements the current elements were selected. You can goto this elements that in super said the settings for your images, right or whatever the element you have, I'll choose an image from our already added image. Okay, So this is how you would imagine where Flo, But you can also give it the old tax because thes or taxes very useful in S u my new launch of websites. And when it's published And when you When Google growls your website this all Texas where useful Let's give it a name. My read drunk, right? I just give it a name You can set the wit and the height off your image. I want to set my heart's from 200 exult So it's smaller, right? She's hoping said the return hired off her image. Great. So the next element in the media is the will You you can give You are ill off the video here, Right? So I already have a video. You are, and I will just to link it here. Um See you. What? This is my reference material. You too that I have good this video to connect overflowing mulching. So this is how you can add our external video to your life flow page of Afro that site. You just meet the UL off it. You can use vim. You you're also and you can you use YouTube. You are on the next one in the media. Is you Do we have just used you? So let's use this. You don't use this one with these. You get many controls in these. You don't get that many countries. Let's stay that really element Now let's issue too. When you open your elements setting you can eat a mutual will you, right? If it plays, it will be muted, right? And can be auto play on show player controls. I don't know the Shoma player controlled so it won't show any player controls when it place I saw in these one. So this is how you can audio video in you to the floor that site So this was the media in workflow. And in the next one I will show you how we can use forms in their flu. So see you then. 11. 11 Forms: either. So in this election, we will learn how to use forms in rack flu. Right. So when you come here in tow elements section and the panel, you can say scroll down, stay. You see these forms that my to create a form you need of form bloc, which holds your input input fills your levels and your tax areas, and this form files upload future and all right, so how we can use that? So let's just practice form. Look, I report it in my container, so already overflowing. Use your form like these, right where you have name. This is your level for any input field for particular failed rights so you can use levels. Let's say you want to add a new field. It's a message emeritus. You want toe get your user's name is the military and the message from him. So now what you need you need a message for Leo. So for massive food toe at that, I will use you can press control and e this such bible open until level okay and select this level hit. Enter this level on selected By selecting this level again, you can hit control plus e or common policy. If you're on Mac, look for text area. Yeah, for any message. When you want a bigger tax, Brock right tax will. Then you have to use this text area so I will see. Let there, and I will bring it here. Good. So let's rename it by clicking double click on any filming, you can enter it. Let's name the message. And now, if you want to put or if you want to put a placeholder in your fields, right, yes, you want to see the example Devyn. You double click on this field. Or if you see like this field and come here and this, said elements sipping, you can give a place where the name right that is will be there. It will be there by default when before user enters anything in your in foot feel, let's say I will give it example. I shook right. So see Harvey. Well, so example a shock at i dot com, Right? And here for the message I here notes. So this is how you can said a place where the attacks in workflow, if you want to make this, will require from your fly no client or your user. You can set it as by selecting this feel. Even set it as required. All right? And you can make it or set it as auto focus. So how it works if it's not order focused now. So this is how it would look if he said or to focus on the first filled? No. See how it looks. See, This is how it would look. It will auto select your first field. We tell Phil you have said auto for his own. It would be like that Feel all right. So the same way you can do for email and message. But one more thing that I want toe show you is in these. This isn't named it I'm fitting from and I want to fate right from my users. But if you have phone number to Skopje, these full name selectees You mean the estate? Select your email in port pasted here. This is how you can copy paste your feels. You can change it to phone right venues selected for four number. You select your feel here. Inside, you feel you need to change your name here. Okay? There lies. It will conflict on your phone may not be submitted. I in the text type. You can have your field text type as a plane for name and all humane for emails. Password for any password. If you want to get from your user Four numbers, we need affordable year. You can also have a number, right? But we need for numbers are really set it for number. What? You can say it as example like this, but this is your phone number. So this is how it works in right flow before I mourn toe other element. I want to show you select Click here anywhere, Anywhere on your canvas. And she let the former bloc in. Given name, do your form. All right, so describable. Okay. This is the name that you will see in you. No, back. And I mean in project settings. I will go there in a sec in a minute. But before that, I want to show you these few other things. Let's give them name, Name? You made Change your toe phone and let's junior to message. Okay, So this is how you can said unique names for your feels so that it's easier for you to see in the rate of is great. Select your form. Look No. When you select from phone block and come here in this element settings you will help three options your success and Adah when they use their submits a form If it submits successfully , he will see this Mrs Right. So you can change message here. You can put a new heading here, right? You can put heading here also let me put heading accusers Needle dragon broke and you can a line or you can lay out your contract right? So when its success it will show like that. If it's here, let's say do you take No But if better, it will show like this. Great. Now let's published of a page of the website and see if it's working or not. Right? So now what I will do I will publish your page, your prototype to shave it. Your client You just need to come here in this published section. If I click here, you can publish edger use ever it. This is a project name in the flow does not wear followed. Io is a tormented where Flo providers for your free prototypes right. You can connect your costume, Bowman. He's one. I will call at the end off course when we make our website love. So I'm not covering this right now. But if you take these and publish it and see the magic will submit the form and we'll see if it successfully submitted or not. Right? Let's say based there's don't chrome. It's a This is testing. Sorry, testing my ideas submitted. Okay, great. This is a success Measures right? This thing. That's why the screen is here. So now to take your you have God separation from this form or not, your toe klik yawn stuff left corner. Click their photo project settings. When you are on the screen, just click here in his poems once you click here. All right, so you can so send form submissions tothis If I take my men right now, they will still that Okay, you got a new forms of mission from your website. But to see the from submitted details this is that it is at the annual unsee. If I had a new site planned, allowing me to how 1000 rules in this subscriber form Liquid is the former name that we have James Joseph swear words. He's one, right. This is the created date that they will dilute. Mr. It was created Name, first name, email, phone and message. You can delete it from here. If you want to delete your table, you could delegate from there. You can download you. These details is a CS Wi Fi. All right, So this is how you can see your form Details. This is very convict India's your form. Name your subject line whenever someone submits a form on your site. If you want to set a new name right, that will show up in your email so you can set the name here. All right, you reply to address that address, which is, Let's ape your auto responder and you can put that literacy here, your email template that if you're a new let's say, details inside, never in the form data, the details. It shows that our fill in the form right. So this is how you can use forms, invite flow. Let's see more features. It forget this is a selection. You feel anything? Let's a If you have few options that users can select it from here option one option to and all. He's one that you can use. I don't know the future they have in the form one is that Jack Box and Ready overtones. So let's use this jack box to see your dad walks right. Click. Here you have it here. If you want to any more, you come here where you can customize attack box and you can just copy paste and you can help more jack box, Right? That last one is I want to cover Is radio button in your absurd If your radio burdens disease open area buttons in your workflow form, it works similar weight that, like this, feels we have met settings for this feels this is out Israeli Overton and this jack box work, right? So thesis walls and these are the fields were there My flow provides. You can also use custom forms if you want to use. But for that you need to have a gold that so I wouldn't show you how to use custom court invite flow in upcoming videos. I'm not able to use this right now. This pile up because I don't have a site plan feature right now a few aside on future. You can just drag and drop this file. Upload here, and it will walk right so anyone can upload the files, the document, pdf or anything you want to fetch from your user. Great. So I hope you got something from this lesson. And I I'm assumed that you're also practicing along with me so that you can learn faster in the next. Will you, Averill court his component section where you will have all these features. How to use this, which is this lightbox now? Bar, background, radio and world. So see you then. 12. 12 Components: Hi there. So in distillation relocate the component Deb, invite flow. How do you use these elements that were flow pro wise? The background video broke down and amber and all. So let's start with these First I'll start with background, will you? So I had a better on video in your website. So if you look since on websites where they have a background, will you in the landing page. So if you want to love Baylor, will you in your lending pictured in your website? Just drink teas. Andi, drop it here. Right. Okay. So once you dragon broke it there. When you can was it will ask you toe upload a video the same fit Do you get by elements Settings? You can upload a video. Let me upload a video. I have already downloaded a free with Leo from Beck says so. It's uploading now. I thought once it feelings applauding and all. Let's look at the future. The other one is that drove down, right? So just drag and drop this drop down on your again. Waas So I will hide this for now, but it will still process in the bag around so toe how it broke down Struggle in your website or in your nail bar? No menu. You can just make you just need toe dragon. Drop this drop down from this component section off elements. When you review your website, you can click here You can see your all persons that right So it's very basic Where if you click here if you go here, Andi complete open menu. It will let you show the fields and the links you help in your drop down menu. Drop down menu on If you want to put your drop down menu right now, how it works is let me Joe's on do that. If I click here, it opens that probed on many. Right? But what I want to do is when I hold my mouse on the drop down I wanted to open. So you just need to jump these open menu on hole, right? If I'm here if I go there If I however I'm always on the drop down, it shows me that, um menu. If I blue my mouth from there, it will hide like this just like this. It works. So now if you want to add new blinks. Either you can just copied his one or you can add a link from here. In the conflict is bottom. You can add link this link feature of walks, same way that we have seen in our large studios how textbook our tax links and link block walks. You can set your link to your your URL Page eight section email, phone and attachments. Right. So this is how you can use drop downs in workflow. Now let's see if our okay, it's applauded. So I will reset my and see here. It's okay. See, this is how you can add the background video right in where, Flo. Well, let's see. There's it's settings. If I click here if I goto elements, settings what I see there are no turn. Mostly, things are low for these background video, but it will continue auto playing on where floral mute your background video. So if you want to use in your will, you in your website so preferable automatically mute your video so don't get panic. Okay, so now let's see a little it is, will you from here? Let's locate this one. Lets me just hide it. Uh, on the next one is the M ed. So what is Amber? So let's put em bear here. You know Ben Waas? All right, so I will close it for now. But let's assume I have a big reason, right? And I name it as Mbale. Right? This is what I named it. So remember, I have discuss about customs seizes managed a 1,000,000. So this is how you can use You can help this, amber, and you need toe target your keys. I am big division. If you you see asses unit toe, forties dark and write down the name of your division on. This is how you can l a style to your box. Let's say I want its height, Toby 200 picks up and read to be 300 picks up. Right? And I want its background. So this is what you can do manually. If you want to add a custom layout if you don't want to use where Flo style, this is how you're gonna, Right? So, Megan Color, it's a raid. All right, Let's say it didn't work. Why? If you want toe add style in custom gold unit toe, give his style name and unit toe. Close it right not to look. See? This is how it works you can use. Let's say that one. My new embed. Let's close it. That's one. See the magic. This is how you can use custom etched Emily few knee if you require in your future websites or in your own website. This is how can use and Mary feature off air flows to a custom. CS is and custom html elements you can also use. You can also end JavaScript, but you need to name it. JavaScript. You need to have scripts. Sorry. Nor javascript. I'm really sorry for that in the script. This is how you can add scripts. So this is our embed Walks in, ref low. Okay, great. Let's still it that we don't need it now. What is next? The next thing is light box, right? So sometimes you have a gallery, you know, website, and you want to put put a light box when I use that leaks on your image, it opens in a light box in a model or a pop up. You can say to use a light box, select these light books. Here, click. You, um, you will see these options that were flipper wise. So this is how you can add lightbox. But if you need a video toe, put a video. You can click on this interview. Let me put a year. You are ill. You can find a layer and taken foot every year you're in here. You can air image night, so I will choose our already adult image here. Let's caption e max is right. So this is how you can add you made all right link with but the light box. If you have a light box images more right so you can link it with that you can group on Name that. So now said the image off these light walks that user will see before they see the actual image. Great. So I have said my light box image. If I go and click here, it will show me this and see if he's so for that. Even see these back cells perfection that I have entered, right? So this is how you can add lightbox in white flow for your future projects. And here the men future off airflow Comms menu off your site. All right, so I will put it out. Sections at the top. So this is your menu stunt, right? So in the menu, if you upon it like he's like looking that small area, you can open your collapse menu right in that they have used container in the container. There have a brand means you can set a global for. Let's use our logo control E Command E. Let's is an image. Let's use this image. Is your logo 50? So this status our logo, that's so you can, said the logo. If you click on this brand or the link, you can say the link I diffuser leaks very wantedto send your users toe. So mainly people use the lobo in the side in the menu there, several users to their home page off the website, so we will do the same right. If you select your neighbor here and select your neighbor hand, scroll down on do this background. You can change the background A little fuel. No, but let's use black or the white fully white. Let's use something like this. So this is how can set the background color off your nobody, and you can also say the phones Let's use roboto. See how exchange. Let's use it medium and let it be 14. Right? So see the manual. It's coming out quite well and you can add this link. You can just copy paste it many times however you want and you can link your links to the particular the respective pages. All right, good. So this is how it works. So how you can set your menu in the responsive? Let's if I'm wanna I have let so this is how it would look. But they found one that stopped and it just scroll down. If you want to show that three bars, you can show it from here. Menu I can four always appear so it will always appear here. If you want to save your menu icons Toby appear for your mobile only then it wants show up here. But it was a joke here in your mobile device, right? So you can use this section here at the middle off your top. But this view ports are like 1st 1 is backstroke second, honest tablet total on his landscape where mobile on the 4th 1 is the mobile portrayed more right on the mobile portrait more. I want to use that many with him, but I will set it for my tablet so that on many Douglas if I have many links here, but it looks nice on my tablet. Great. If they click here and if I want to see I want to open my menu, have it would look. It looks like this on your mobile. You can change its look if you click, it is no, Menu said. It's background color. Let's say again these rail. That's how you can change the baron colors off your menu. By default, the airflow provides your problem Menu as a drop down menu. Your manually in your tablet or mobile wasn't. But if you want to change it, you can come here. No settings. Select this drop down. I want it to show from the right side. Right. This is our do. Look, if you want to set it to the left, this is how it will look if I'm here if I click here, this is how it Sure. Right. So this is how you can use menu invite flute. It's very easy to use. Right. So next. Why lament in this component one is the search. You can use this search. One is raising. He just You can have it searched on a lot of us on or off by the full. It's off if you want to go on its own, right? So if I come here, the focus will be on right, so I put it off. You can change the place where their name to search my new blocks. It's done like safe. It is interest, anything. It's a name, right? So it one, because by PLO new to publish your page and then and then it will walk. You must help these utility pages. If you go into a very section, you will see the search result page. You can. What if I These have every want based on your design? Better on the website is, and you can set this up right? So again, I would like this pages page and I'll click here in his home and my search will be there. But this is how can and search invite flow. I will remove that, such from here, and remove this menu on. Let's see what is next. It's slider. Slider is very easy to use in rare flow. You just need toe drag and drop your slider on. You can see in this element setting you can air more slight by clicking here else lights. Right now it's to hear when you click it, it will be treated. You can have as many. It's like this. You want you can. If you want to go to second slightly for editing anything, you can click the arrows. It will show you how it works, and it will take it that particular slight that you want to go. Oh, if you don't want to use the arrows, you can use thes drop down and it will show you. It's like you want to go right? So for slide animation, let's on, said the first light like, Let's use you can you can click here in this little arrow and on collapse it If I going the mosque one. They ensure Mindy's Ville Use light feature feature in our testimonial section of our website. So where I will cover is also in the first laid. I want to set its background immunity if I scroll down my slide one in my style section. If I hit on this Alberton and it will show it will ask me toe Choose my image. I will choose my image right. And now, if you have the custom image you can help height and width off your image. But if you want to If you want your image toe contain all the size, you can just have it cover. Right? But if it's not looking good, you can set for additional theremin. I mainly use this center line, right sweeties center say Mitchell, look cool. Initially, it was showing me many images, right, so you can hide those images style by clicking here This style, your image will be hide, right? You can use this fixed style to fix your image If you are creating a barrel X kind off layout unit to use this fixed one so your image will be fixed on that particular place. So to use this contained so it will use the water, the height and we torture remains. It contained your image. It is light. All right. This is how you can use images in your slider once it's done. Leads change for the second slight letters are different color. Let me use these drink here for this. Let me use this blue for the fourth sled. I don't want it, so I will Ability Still, by selecting it and hitting the delete button, I held these three slights. So when you see like this light, come here element sitting and toe. Put any mention in the slides in my floor. You can just click here, then slight. So by the board. It's like if you put the cross fade looking magic, this is how it will work. Crossword, right? It wants like and you can set. The deer isn't have everyone you can also said the easing off your cross reading, Let's say, is in and out skittle magic, See is how it works. Let's see, this one is 800 milliseconds. This is how it would work, see, really flow and smoothly. Right, so this was gross frayed on. You can use fairy in for out for a door and slide over. It depends on your choice. And however you want to use life in your life flow, right? This is how this slide over walks. Great. So now you have your slide over animation and your set is easing in and out for your slights. Now, if you want to keep this the civil swipe gestures, if you're on your phone, you can use this Web gestures here. It won't work. But if you are on your phone, Okay, so I did it for the definite I'm I'm sorry for that. I should have done it for the backstop, but they deceived. It won't show up here because I did make things is when I was in a tablet. More so. This is the plus point off using Web floor if you're on a backstop, if you make anything, it will change everywhere here if you are on your tablet. If you make anything here, it will change that toe heels right, But it won't change toe the its upper size for the next. So since you're here, that's going to do with this. Isolate my slider. I don't want toe visible. My strive Jesse's. I want o orto play my slights, right? So let's help these as 15 100 and see how it if it's working on orchids working, see, after a second and 1/2 it's walking, so this is how you can set your slight store top play. You can hide these arrows at each point. See how it works. If I'm here, if I'm the 1st 1 right now, I'm the 1st 1 toe it is. The arrow is not showing. Let me assure you See, Click here. It will not appear So This is how you can hire Ensure Errol's? No. So these slight doors How do you want them? You on the ground it? No, I want them number. This is how you can put numbers. I want them shadow right in ordered colors for For these one, I will. I think we should use thes one, this black one. So it looks good on every slights. This is how you can use these slight nails In where? Flu. So this is how you can use lighting where flow. It's very handy. It's very easy to use them learning my flute. Great. So now let's look at this. Perhaps in this component section, if you want to use the steps in your website so you just need toe Dragon drop that day, he, uh Let's that I adopted the background. Let's do it the slide. And also delete this video. Yes, it's been ability. So this this is the tapes you can use in their flu by dragging and dropping. If you click this arrow, it will open the more options that you have inside the cab men. Tape right? No. Has two things. A menu and type content. The 10 men you used your links that use you for he'll contained. Let's if What? This step one. His name is Kitchen for the step to his bedroom. 40. Step three is cardinal, right? So if lightly for user clicks here in this kitchen, I want to show content with this kitchen related. So enter contain here. Right now there's no content. You can select your type one in your types 100 you can hate control and E. And you can use. Let's heading back again. Put controlling me. It's a better Hi, let's say you can Will you want to use the image for your heading? So let's spring the image like this. So this is how you can set the content in your first tape for your kitchen and for my second their bedroom. If I click this one on, I add that's heading right. Any fight like here in this one, I only need a paragraph. I don't need any heading. So this is how you can set your content in your tabs. If you want to add another tape, how you can do that? Selector tabs. Here. What would the Ellie element sections or the elements setting section click on this plus button? It will add another that have a new tape in your test section that you can click these ones toe goto the particular type if you want to. You can also choose the easy Any mission here, just like we did in Slider. Click here and you can will see the magic, right? You can have been an hour. Put these. This is how it works. So that was it. In this tape section, you can customize it. You can style it however you want, right? As for your design requirements, So let's abilities and let's see what is next in the next one, I we have his map. So many websites uses map toe show the location so that users can find them very easily in the Google maps. They can find them okay to use maps in read flu is very, very, very simple. I compared to other websites. If you hate these settings, if you thought If you come here and complete here on this a b a key, right, So you can click on that l a p a ki. So this is where you need to put on a fake ID at Google Kreutz. So if you go to your even creator epic, please. From here, if you prayed Link, click this link they ridiculed to the Google and you can create a key. And you can put a key here than it will work. Very floor, Leslie. Right and smoky. So this is how you can add maps in your website. Great. So now you have the map on. Let's see what we have in our component. Okay, we have Facebook. Just dragon Facebook. Here. This is our Facebook works. You can have your your l here within height of that facebook by gone box. You want to show it as a box your Facebook likes, right? So in some websites in your blokes, people are using this feature. How many likes there are? I saw you there. You and it. You said your particular page. Your page off your facebook page. You can set the link here and will face the likes of your Facebook page. Just like these you can use. Do we go? And it will count your to its for particular blogger particular page or pretty well for about your website. So this is how you can use all these components that are very effective and that are most in your Web site. Right? So I hope you have learned something from these components section A few antiquity, please let me know I would surely help you on See you in the next one. 13. 13 Export Share and Publish: Hi there. So in this session we will look it how you can export your core using where flows one of the best feature and how you can share your project with your colleague over to with the teammates and how you can publish your page within Vermont, where flow right. So in orderto export your cool, you need tohave your layout here website. Really? If you're building a back end system and very want to integrate it back and with estimates . And if you want to create your ex temple file in where Flo you can do that. You can simply create the dashboard in the layout you want in my flow. And after creating everything, you can click here in this export core in this panel, once you click it, it would analyze and loading your cold. Once it's turned, you need toe. Prepare a zip file toe export here court. It's being loading here, so wait until it Lords still loading because we don't have that money that I would be her collection that try slowing, but it won't six here. Export don't include cmx, strong sanity or content, right? Some content from the collection panel you have tow export your collection content from your collection panel than and then it will work here. You will only get an html five. Since we don't have that much off estimate layout, it will not work here. So this is how you can use export coal decision CS is your jowls. Keep and assets your images in your files and everything will be here. Right? So this is how you can export Quoting why flow? The next thing is sharing your project. You can dish it really only link if I click here. And if someone if I shave a copy, it is leading to a shared this project with anyone who can see my Nash war. They can see all of these things that they can see the phone style on everything right. But they can't added anything in my project. So you can share this really only Ling by clicking here Down, leaning You can invite collaborators collaborators at those who can edit images or edit content on your website. Let's say let's assume that still it is first on, I will end something here. It's a heading on. I will also use an image, so I will see like this image. So this is what I have at the moment on my website. Once you are done completing and building your website and you want your client or your teammate or your founder toe editor contain, you want to get review from someone. You just need to add collaborators here by clicking the sharing one in what collaborators are. You can just dive into this editor more right. You can either click, get your a little more from here or my clicking days here a little more. Let's see how it works When you click on that letter. This is how it will look. Wait, it's being loaded. Okay. See, this is your Imagine the heading that we have in good ready. Nor was it okay. So this is what layout you get If you have any pages, if you click on this page is he can see how many pages the hell you if it leaks on this tile guy on this such beach. If you click on the home page and you can also at the collection, let's say we have blocked post. If you want to use any block pose, he can add a block post from here. Right on In the settings they can see this account settings. And here you have your general helped and supported where Flo provides. And here you just need toe. If they he clicks on the logo have been low world simply he find any change here? Let's say if right now the publish on the stop Border town Sorry. Bottom right, Gorno, If you see the publish, it's not applicable right now because we haven't made any change. But if I may change my new bedroom All right, so it will be a C one on published change if you publish it. But this one change it will be published and sailed in your We're floating right If it like on the back to life side you can go toe to life Site out This is how you can win your bet Too low site Right. So this is how you can use where flows Powerful tool The editor tool in white. Your collaborators, right? The one thing the This is how you been in great your collaborators Click on this in White Collaborator It will take you to its dashboard in Editor You can Add your in fighters here , right? Just see here. It's me right now at the CMAs or business, I plan toe dessert at collaborators. You need to have a side plant. All right, so that you get this feature off Any collaborators in your airflow project? I know we don't have any side plan, so we I'm not able to do that. Okay, So this was the sharing your project. And in writing collaborators No. You can publish your website using red flows. No men, right? Use that out Said three. This is a dummy domain that were flow gives you that you can share this website with anyone once you publish it. Seats unpublished. Let's publish. Probably selected domains. This was my silicon moment. I'm publishing it Trade If I click here and it's my my site is low. No, but it's using a referendum in. You can cooperate his link and share it with your friends toe. Get reviews off your website, right. You can share it with anyone before you launch direct actual Domon. So here you can connect your own Doman. If I click here right now, I don't have any dormant until here. If I click here. It will take me to the settings. The back end off air flow in hosting. I need toe Add this blonde in orderto health feature of connecting my domain. Right. I can use these also, but in these I get the CMAs ap excess sites such function. It isn't everything in this world or a plan you don't get any of that function is too high , highly recommend to you. Check all these features that is different. Different plants provides in where flow then you can choose. But people are using these mainly. So I suggest to go with this woman. Also were flows recommending this plan because it has so many features and sees you can see here you can help three content editors. You can in white clear liters toe added content on your website. Right? So if you help these plan and it, then and then you will help these option available. You just need to read your dominant and your doorman, your domain, your own domain. Let's abc dot com It will really love, right? We just need to add your domain here. So that was your publishing your project and connecting your car custom domain with airflow . So I hope you have learned something from this class. These are very useful features their way small but very useful features. And you can use these for in your project. So see you in the next one. 14. 14 Style Panel or CSS: Haider. So in decision, we will look it. How do you style panel in where flu style panel is used when you want to style your layout ? Let's say we are going to create these layout invite flow, then how you can get you headings bigger and how you can change its color, its line hide and the position off your off your heading or your or things. You can see the paragraph. Ortiz input feels like so we can. Or we can create this kind of Barton's and this kindof layout, using the style in Where flume style is nothing, but it's a serious is what we're flow. Call it as a time in HTML and CSS using HTML. You create the structure off your website and using C essays, you make your website look beautiful, adding colors and reading good phones and adding some animations that the basic animations . So let's say we have heading Hell, I have a heading. Let me change the heading to these h three now, so I will change my heading toe units. It's too. Let's take each to and I want to have a paragraph also, I hope paragraph Andi, I want toe help Burton. So this is what I have and I want tohave in my website. Right? So now I want to make this heading look bigger. So while heading should be bigger And I wont also change the color of this paragraph and this partner but I want to make them look pretty. So what I will do now is every telling these and I will come here in this tile panel on I will give it a name or if you don't give it a name, it will automatically taken name right off your heading. So, without giving a name, I will change the color off my heading to change the color of your heading. You need to come here this typography you want to change color you heading to see this color changing color to, let's say blue when this purple kind of color on I want to change the fund off my heading toe dome in that we are using you know, a website, the storming, the front I selected and I've wanted the phone size to be 64 Big Sur in high end. The size and line height should be 10 pixels more than your phone size. So my phone size and 64 So my line had should be 74. This is how I you see a sense float. So now my heading is this right? So let's use a couple of big purple, OK, it's a problem now. Great. So my heading is changed. My learning style learning style in wet floor, Right? This is your heading, and let's change the style and look and feel off your vanik enough. So just like I did here, you can change your typography and this typographic section. You can change phones. You can get a great how it's a bull or normal light or so right. So this is how can change your generating phones and foreign size on the line night and also the color. But if you want to align your contain in the center off your page, so this is what how you can align you content in their flu in CS is I know my name is justified. Toe the lab site. I want it to be in the center, so click here. If you want your content to start from left side, it's left justified. If I want my content to justify So everything looks good. Very 5 30 So it may put some space for this big heading. If I put this this this will look you want, right? So that's how you can use that 65 if you want to. Stein, your that said the name off your water, right? So let's hit Control E and alleges the tax block for small names or small content. I've used textbook Also, you can use text block. Let's assure Jara, right? So I will idolize it. So in the style, in the typography in the spine element, you can change now it's it's not add allies. But if I want to idolise, it's idolized. See? It looks dead in the five. Want a border? You can have a border with these. All right, you can have border on top off your name where you're gonna border in the center. Great. I don't want any border. I want you swore the feature. Let's change his phone to Roboto. Right? So what also do the same for these for these bad rough? But if you look at this better rough, it looks quite so smaller compared toa these heading So what I will do? I will English the size off my paragraph. You should use multiple off eight. All right, so 16 look, school and I will say line height 24. Now, if you look at this, it looks good with these formed, right? No, If you look at these, you paragraph is quite bigger and you want to he want its size to be like this. Like finally really pixels Maximum size should be finding it. That's what you want in your design you have so come here in this size section. All right, where you have you can say it written height off your paragraph. Minimum weight. Let's if I put my minimal which should be 200 and the maximum minimum height to be something like that. So if I put my minimum height 20 then it will. It won't. It should be 20 then It can be bigger than 20 but it should be a minimum 20. All right. Hit the max of it. You can say Let's see if you want our wheat to be 500 right? It's finding our max of it should be 600. So Max it off content. What will not exit from this? 600 pixel off it, right? Right now you have 500. If I make it 600 this is what it is. But if I make it 800 it won't walk because I have set my max weight to 600. So this is what you have to keep in mind while creating a layout. This is this is very important. Panel invite flow to style, your content. So please repeat of will you If you don't understand or if you have any questions, please ask me. So this is how you can use millions of it and maximum with for your content to set a maximum with Let's a maximum height toe 20 pixels. So see the height is that if I change the background color and located it contained the baby girl from here See it only affects of that. And did you see that Barton is also moved up? Because we have said our maximum i 20 I will remove it simply continue it by doing these. Or you can click on these blue but on and literally said right and I will dream also his background color That's Ron looking that you? Okay, so now you have style this But if you look it here, my name is that it is not held that space that I want. So how you can put space from top and bottom off my content, So select your name Here. This name was tax block. Whatever you have created and put some margin to put spacing. If you look at here, they have spacing the margene. If you put margin, let's if I put 40 margin so it will put space from outside off my content. Let's say if I make it I'm background color grade. All right, let's make it like these Red. Did you see if I put marching it live space from your content toe outside off your content ? It starts from here to here. But what if I pulled baiting right? So I will remove my trading margin so it's it's it's a visit. And if I put trading off four D see So Brady, it leaves the space within your content inside your content, right? If you put margin, it will live space outside off your content. Let's say if I put 14 from top also This is how it works. I see right, If you really want a margin and let's put 20 off Margie, let's remove all these ratings. I don't want that and we don't want a background color, so I will. He said that to see the margin I put it made us on your design. Let's say these one in this design, we've won, um, spreading for our he'll contain toe loop. Reading from his menu is 130. So this is the here we will use betting, right? But what if you want margin? So the Here I will use margin toe put space between these boxes. So I will put 30 on this book's margin. Then it will live. Torta picks us outside off it. Right. So inside that look it if you look it inside of this box I have used 50% padding. I have care of people's impairing toe this box and 40 pixels marching. So this is how you can use spacing in well flow. So in display, you can hide your content just by clicking teas display none. It hides your elements. If you want to show it, you can just hit on this block, it will show up. You can make your content flags by clicking here. I hope you now understand what is flags box and all. I have called that in my previous videos. If it don't please go and watch those videos on. Using this inland block is works like the flax box again. And he's one in landing that before for the X content. That safe I put here, it works like this inland, right? It will take that, but we don't need it now, so I will deal with that. So this was our spacing size. And this or flu I haven't. You're this overflow. Let's say let's put the or floor height. So if you more if you have a Devi's own, let's take a dim ism click here and a visa. If you come here into a navigation sector section, if you bring all your content within that within that, within that, these on, I will simply give it a name. My new deal right on. What I will do is I will say the height off my do 200 pixels. So look at the height off, my dear. It's 200 pixels my Martin And my name is outside of thes the reason. So I want to hide everything that overflows to my taste defined height. So I will use this or flow Hide He didn't say If you look it, it's hidden now, right? But it is there it is still there, but it is hidden. Users won't be able to see. But what if I put these scroll right, so it will show my content. This is how you can pull scroll against a friend in where? Flo. Right? But what if I want to say it is an auto, but only so this is how it would look. This is how you can use hey, done or flow. He done photo and scroll in their flu. Right? So let's remove days for now, we don't want it let sitting with the height off the reason. So it's all fine now, So the next thing is position. So let's I select my reason before flags, books and CDs is great. People were using the developer and the dizziness with using this position in CS is toe a line or the layout. The content in to see this is you can also use this position here in their floor. Let's say you have contained. He's one and you want to make it. Make it absolutely beautiful, it aesthetic, so it will stay wherever it is. What if you make it really to you, Right? It is related now. And if I add an image, they say, I want to add an image here. Let's find this image, My images here now right next to my button. Let's remove this burden. For now. Let's my images here and let's give a background color to over do block. Let's give it a color like this. Okay, and now let's change the color, not liking it. It's not shooting well on the background. No, select your deal that you created. Now what you need to do is put some paintings as I mentioned, if you hit all in your marquee ball on your keyboard and drag is, I will settle very well. You want to drag. It lets a 40 if you hit the shift, it will take it from everywhere. It will put betting inside the content. This is how wedding walks I wanted toe put bedding in my deal. 40 40 from everywhere right from top bottom, right and left. So this is how my content looks now. My days and it's selected. It is said as lib you No, let's say you want to put your image or you want to set a new imager. Let's take it with this. Let's say you want to put your image here. So how you can do that? Select your image. Come here in position Section in your tab on Hate this position. Select absolute right. It is absolute. Now see? It is targetting. Did you do? You might do because we have said related to my division section. But now our images absolute right, So it's not related to this content, but it is related to our my deal. Right? So what about the content we have? It will stay there. But the image is absolute now. So now what I want I want to put my image here here in this corner on the top right corner of my mind. New do so how you can do that If you have said this absolute selector image and it is if it's absolute, you can use thes cough. Laugh top right now I want to You stop, right? So I will use that. See how my image exposition And if you want to set it to left you unprotected to your bottom left What? I'm right. This is how you can said to images I want to set me measure to lap side and it will take a full height off you. The reason If you can set also it with the right side, you can also say game it with the bottom, right? You can also say to your image on the top I'll feel off your reason and you can set it the full off you the reason But I will put it brought. Mets has said the height to 200. This is 200. It is on the top. Let's let the image again Now what I want to do is I want food, this image on top of everything. But what if I've pulled it is heading. Here's the magic comes What if I pulled? What if I make this heading religion and I put Z index Z index is nothing but a TV concept . You how how There's index, you increase the number of his higher it looks. Tarkenton looks closer to your eyes. Quite 35 appointees to look at this. The heading is on top off our image. But now I want my heading behind my emails and my image should be on top off everything. So I will change it. Toe three. All right, so it's bon heading is there, But it's my image. Z index is higher than this heading. So I will say, like this image you can use thes position the off left, right and bottom. This is said to pop now I want is I want to put some Margie's from top my image I don't phoned it in a positive I want in a negative or the minus 10 so it will go up right? It will go up here. My images This is glam image is you can use these. So this is how you can create an hour left content in where? Flo, If you have a name age, if you want to create an overly content, this is how you can use or left so that this is the use off is a use off position in my flow. The one wanting I wanted so show you is fixed. My image is fixed now, all right, so I will make it, he said. Make it, he said. So it will stay there. Let's make it insect. It's in the bottom. Let's put it on top. It is fixed. Let's give it, select your body and said its hide. So 5000 pixels. If you review your website, and if you scroll down, your image will stay there. This is how you can create fixed images and fix to lay out if you're using a parallel. Estes is how you can use or set your image to be fixed on. The last one is speaky. All right, so it will stick. Speak here. Let's zero. Let's make it sticky. So see, this is how it's going. All right, so you decided to the top 10 and then it will work. This is how you can state your content in where Flo. So the next one is the background that we have seen. This one is the border. In the border. You get two things in the border radius and the borders. Let's say you select your mind, you and you want toe boot, some border radius lets you want to call your borders off your element off your reason. You can enter either five or lets a tense. It looks cool. It's quite Sabel. This is how your border will look if I said it toe pan. But what if I I don't want toe put my border toe every corners? I just want to put border to my partner, right? He's what I'm left and what I'm right. So I will click one his individual corners I wanted on the bottom 20. I want it in. The bottom line is, I don't want he's one. So look at this. It will only live space. Don't my my bottoms, the corner will walk. This is hard to walk. Few in visit. This is hard to walk. All right, so now let's add 20. You are adding a 20. Now you want to set a border color to your element. You can select this middle one, and you can click on the solid, sweet, solid border. You can set the border. Let's a three and you can. Jane took a little border. The water Would you like? This is what it looks night. Now on. If you want to make a border dashed. You can use these lashed. Now you're border will look like this. If you want it around it, they're surrounded. This is how to walk, right? So this is how you can use border if you want to set border only on the border town. All right. Do you have facilities? Individuals, Right, individual and sleep on this boredom. It will say only the partum off element. So this is how you can use borders in my flow. Okay, so my element looks like this. And what if I want to make transparent my element? So you can in the effects section. You can just use this opposite e. It looks transform on. You can use it. How everyone It walks in a one like zero and 10 and one within that you can use the's 91st on 60% and how you want, but I don't know the subjects. I will reset it. You can add bok cellos to your element just by clicking these You can said from outside or the inside off the block. So I wanted outside off my box. And I really used this distance like this having his blow So that blur my distance on I said the opposite Ito Quiet Load that. It looks good to me So this is how you can say it. Balk shadows in my flow from outside and inside If you set it inside, do it will show the shadows in your inside off element if you set it outside so it will show you share those outside You can use this angle and how you want to Let's see if I put it on top so it will live Show me the boxers from top, right? If I set it on this side he didn't show me here. This is what you can use in my flow. This blur is is like if you don't have that many blow, this is how you can set a floor in workflow. Great. So the next one is that transform? Transform is nothing. But you can move your element from here. Let's say like these on the X axis. Why exes and Sarah? Texas? This is what we have used in the index, right? So I don't want it so I wouldn't make it settle and I will make it zero. I will show you a good animation in my floor right now. So now what I want to do, I want to I want to move these element, this whole element on our off tastes. So how can I do that? So if you have selected element Klay cure on my new deal, why does it should be selected and click here This arrow, it will show you the spades off. Your element is whether it's our It's praised for its focused If you said it, Howard, this is our on in the fuselage. It is how our if you change its color, let's It is not that that cities gola double like these and I want to move it up a big so I will use this transform. And I really it's really is it's mood type and I will make it minus thank all right now, if you preview your upside, this is how it will work. See? But it's not moving very smoothly. So how you can do that? So if you sell it to you again and school down in your style section, right, So now you need toe ad, uh, transition here. I thought I have said it on. What did I said it? Okay, sorry. It's on our state. It was on our state. But now when you said the nun, and at some transition it should be Transition should be added to your none state, right? It should be none. It should be normal. State off your element. I will add some transition police property use. I will use these. Move or let's say all properties advances, all properties. It should be 200. You can change it to whatever amount you want. You can change. This is also in my flow. All right, so you conceal a tease. Tease, tease, tease Never used. Let's use, please. And let's preview your see how small plates queen, right? When I hold on that house Maclay its queen. So this was your on the whole state. It was your move property. Now let's at a scale. I want it to be scanned. So let's say like this, right? 1.2 when I whole So let's see if it scares or not. Okay, First, I need to go to the normal state. And if I scared if I This is how it's skills you can use this animation Simple animations in your website. Now, if I come here, this is scaling. I will remove that scale Because I don't know is that the next one is the rotate. I want to rotate my Leo like this on let's at this scale. Also, days will be 111 So now if I preview my design So this is how it this is, how you can clear animations are simple animations on our in where Flo for the last property, I guess, is the skew property, right? You can skew your element, my teeth. If you want to make it truly, you can skew it like this. Let's say it is like this and cities how it looks to see how it will see. You can secure your elements in my flow once it's selected. I will move this Q and this game. I just simply I will just implicate this move one. No. So after these effects, you have these filters. I really add filter on my image. Right. So how you can use this select click on this filter, you can set its floor all right. It is our ceases properties you can use in Buffalo. His brightness brightness Author image If you want oh, air brightness to your image, you can set the corn. Press your image. You can say you rotation off your image. You can change things. Slogan, workflow situation and my flow. Grayscale off your image if you want to make a grey image. But this is how you can make your image great if you want to in what if, Let's say feel black icon and you want to make it white so you can use this in what filter flow? Sapio this waas the filters in life low. Let's remove that. We don't want that, but writing of what happening if I our here it doesn't look like a important for the principal thing, right? My cursor should change through and hand icon. So let's select your That lets. If I hover. Hello here I will say it's Gaza. Sorry, let's make it non state. I said that God. So I will make it a point off. So if I hover here, it looks like it's clickable, right? You can use many things here. The point on weight and all. Let's use these thing is how you can use these cool features here. So this was our style panel invite flow. And I hope you have learned something out off it. And police practice along with me so that you can understand better all these little little elements. But they have very effective and they will play a big role in your website designing. Right? So if you're in questions, please let me know I'm below. I would love to help you out with your queries and see you in the next one. 15. 15 Elements Settings: highlights. So in this election we will learn how to use the settings elements that in step and your style manager were all off your seasonal style. Attacks are stored in where Flo. So in order to use this element settings, you must help on element on your canvas. So let's put this deal block here to set this deal. Look, let's say you want to get a name he'll Right now you can do the class name here and you can also give itto I d and I d call hero I d. Let's This is what I am calling but you can have your own names here. This is a back which is Demel will read. So this is your day. So it's do if you want it, set it as your header. You can set it as Heather because it will help you in your s u right So Disease article section. But I want to do so. This is due So this is my day view. Let's set its high tow 100 pixel right? Let's make its Baghlan color, But these being gay shred hand once it's done. You then said you have once you have said your I D and your last name. He is the one trick I want toe show you is Let's boot marching off from it and here you can use upon more class. If you're the same class right on, let's say it is. You know who? Let's change it, girl toe read it won't affect is one, but it will have its style on deck Picture margin. This is how you can use the mambo class in workflow. You can have some element, but you can give a different name. Toe the class and it went off the first last. But what if I It is Hello? Who will it effect? Let's see. No, it won't because you have a different last name here, so it won't affect here. So it's a plus point in workflow, right? So you have your element. Sitting here you can explore is you start learning where flow more and more. What now? Let's talk or the style manager style ministering nothing, but it stores your class names. Your CIA says that you have defined Listen, this radio and hey, don't do Let's see if you have refined that in here, Let's see. Is here. This is your main glass on This is your combo Oakland's. This is why it's Mr like these. What you can do, you can any the name here where you can bility let deleted It's all you can eat this cleanup 26 It will be up everything every class We need to remove these in order toe let them also So let's they will see now you have nothing here. So if you add a new do inside your container you to create a hero, you won't find a hero here anymore. You locate a new hell and give it and hide in the background. However you want you can there any time you will see A says If you don't want it lets the more it we don't want it. So let's clean up in the morning that So this is how you can use element settings and style Manager in the flow. So see you in the next one 16. 16 Mouse Click or Tap Animation: hi there. So in this glass decision, we will look it. How to create animations. Invite flow. Where Flo has a very good feature off, creating animations very easily and simply so to create animation, you must have a loud on your then Waas your most a website, right or any element on you can Waas. Let's say, here I am using three Miti's the same image and in any mission, their flu perverts to kind off any missions element regarding the mission and page thriller animation. So what is element trigger animation is if you hold on or click on this question mark next to the element rigor text, it's it. Select an element on the canvas. All right, so we let's say we select this element in lower Can Waas see that arrangement now? What's next, then was then click plus off, then click plus a boardroom animate the selected element when a user Indrek cities such as on our or click soakers. What they're saying is when you select your element here, you click this plus I can, and then you will get all thes animation types in where flu. It's a mouse click. So if you look at year. It will tell you what it is it anyway. So if you hold on mouse clicks so it will say animate on first or second, click or tap. Right? So some people call it as step. So let's start with the first animation is mouths mouse click. So to say, I hope your celebrity elements click here in this step and in element trigger Click on this blows and on this mouth that right good. So you get on first leak And on second Lick and emissions, let's the first time you click on any element how it will animate And when you click on secretary that same element how it will work, right? So well, what we will do is I will add a bottom here. Let's in this container. I have this control e I will add this Barton I like this button here on top. I met me at this deal so it stays on top This button What I want is let me just give it a name. Click me to see magic too scared and name right Like this. Okay, so after giving it the name, just select it. Selectees bottom on and click on this. Plus I can't an element recur. Click on this most clicked. Yep, you will get on first click and on seven. Click right on first Click. What I want to do is select in action. If he's elected connection, that's it is apparent. Disappear Freddie and slide flavor grow. He's We've been animations that there. All right, so it's a sleep from left. Let's create on click. This is how it will look on that button, Right? They say, if you look at involved preview so you put on, Let me see. It's your important This is out there. One click it to look like this. You must this little animation and click here. This is how it will work, right? This was your These are the pretty fine animations that airflow pro words. I suggest you toe play with each and every animation, so that you get and understand the tenements is animation or each element works how it is, Elie mentions. So what if you want to create our own custom animation? So all right, let's click on this fleet and select this custom animation. If you look at here, click on the start and animation. It will open these time the animation. Right, A new thing. So what you want to do is what you need to do is click on this plus icon, Give it the name. Mm image right. When I click on this button, I want to move my image. Do Here. It's 100 fixer. Okay, so now, after giving a name doing this, select your image that the element that you want to move right with your element You want toe animal on taking off these so like that element and click on this. Plus I cannot gain. They will do this properties. We want the moves of values move. All right, So opportunity to is he Oh In these affect, you can use the class so wherever, whenever or wherever you have what you will use this image in your website. It will affect everywhere if you have set it to class. If you said it as an element, it want to affect every right. So let's say fixative. Plus I want to move my image. The X X is 100 Rixos. See, it's working right so it will affect every means You have cities image also for now. See how it works. This is how it will. What? You can make it smooth by easing it right, you can use present or you can use your own custom just like fitted in our last video in the style whenever we created more information. But I really is the free safe because it's very Henry to use. I want easy in and out is in and out so smoothly Place very smooth right today. So now the first leg is done On my first click my image will move like this Right one, My second plate. I want my image to be back here. So how will I do that? I will say let this But then again I will click on this mouse. Click that property that is created and we've been select its mouth. So remove image Now on the second click V one of image to be back to its original position . So we've in click here Really is to start any mission. Either we can call duplicate these and play around it Or we can create a new It's a new animation Who made it back? This is how so We want our image. Not not. Say sorry. Selector image. They wanted to move back to Seattle, Right. Okay, let's preview it if it works. Fine. One there. Does he want that? Go here. This is how you can create click or tap animation in workflow. 17. 17 Element Trigger Animation: Hi there. So in the last lecture in the last session, we have looked at a mas click animation in my flu. When you click on this port on these image moves on the Execs is right. Let's see the example, and I like this image. It will move my image 200% on the right side, the right axis. If I click again on the image, it will move like this. Okay, so so in this station, what we will learn is, let's say in the examples. If you find, let's say, if I select his image on an element element, trigger Quintus Plus I can. After clicking that plus icon, you will get these options. All right, mows our right. So I knew click on this mouth hover So these animation will look like if I hold my mouth on this image, then see how it performs right? So the image was selected and I selected this mouse, our element in your animation. Now I won't. When I hold on my image, let's said an interaction. Let's It's a flip. All right? Oh, these are the simple one. Let's great a custom one did not. Days one Let's get a custom one just like we did in our last, would you? So he gave it the name. I just gave it a name. Mouse hover on. I want when I hold on this image, I want my image doing scale. May I say one point? Do? Okay, right is the desert that is an out animations easing properties that you can use every just used is in right on her over. This is how it will work, right? The second properties on How are out when I will Hauer it will scale my image and then I move or leave my mouth from this image It will again said toe what it waas before, right? So let's click here and starting any mission. Let's just duplicate this animation That grated Let's duplicated. I do look at every select is man. They will be selected. Let's make it one right. What do I close before? So let's said this is out. So now if you preview in your preview more when I enter hover my mouse on this image. It was scale. When I leave my mouse, it will go back to its original position. Right, So this was Mo's horror and most our out animation in airflow. Now let's look at what is next. The next one is most more element. Animation it. What? Same as Mao's Hauer. My slates believed that an emission I live, it is most over and out. I would select his image here on. I will select this most more element. These. Let's play most animation. All right, let's create these on. These are your exes, right? So when I move my mouse on these elemental, it's it is image. It starts from here in the middle of the center, vertically and horizontally. Center that point it will start from there. If I take my mouse toe here on the right side of my image, then the animation one vote like that. If I move my most of the website, it will work, respectively. So let's say, for the most eggs action exception means exacts his actions. Zero is this sale and more 100 is this site right? All right. Zero on the left. So let's zero when I move my most there. If I move my most here, I won't his more property. Let's see mm. On day 100 right execs is 100. I will say it has minus 100. And when it's when I take my mouse here, I want I will Said it as in plus 100. All right, great. So let's see the live preview. You can struggle the zone so it can you see this is Harvey to Iraq. Whenever my mouse is goes on, the X exists. It will play the enemy. Actually, for if I do, the eggs exists where it won't work. But if I do on XX is it will work on the Y axis. It will not work. Right. So to say the Y axis. And you mentioned you need to say zero I Let's just call it off. He said the wise is on it. I want to move, Rob. So I will come here. I will add minus 100 on 100 person, every ad plus 100 right? So if I preview teas in my view port. Let's see how it works. See, your image will follow your mouse, right? Sorry for these guys. So my intuit has has been expired. So this is how it works. All right. Your whatever you move your mouth or the closer the image will follow it, right? So this is how you can use Mas one most more animation, most more element animation in the flow. It's very simple. You just need to understand. The eggs axis and the Y axis were used on the If you if you want to go on. Zero. If user go on exist, if he goes to 0% unit to set it to in the minus radio, if he calls on the plus all right side so and the 100% unit to set it as a plus. Where you? So this was our mouse. More element interaction. Now let's see which one is next. It's crawling to view animation, right? So let's say Let's let's put these on this one also. So when I'm schooling my Paige, I want toe perform some animations, right? If I reach your thes image should come from right Say, if I reach you this image should come from the lab site. So what I will do? I will facilities on deal. It hit. Let's select is the second the wage click here on this element trigger excluding view in that one. When he made school in tow view, I want said this innovation I want my yeah, I want my image to slide from Did I slide? Right? So if you preview disease, have it will look right. Okay. And let's make another in emission on days. If I scroll my it's going to view I warned the's image. Do grow right. Let's see. This is how it will or if you can if you want to set it to slide again if you come from the left side. So let's see this information in action. When I schooled on the arrangement they see Look at the animation, right, Let's see them again. See? See, This is how it works in workflow. Sitting with these selectees I had If you are here when scroll out off you right wells into scroll when it's scroll out a few where do you want to send it? That's how it works, right? So it looks like same like these so you can play with these also what a So we have looked at these animation Three girls All right, These ones now the while scrolling in view right, so rain. So look at this. Define actions that because when elements scrolls through Vieux port. Let's it. He's one you put, Andi said. Is the base cool animation? I want eight property to be in the vending zero. There's nothing. It's, let's say, zero. This is how it looks. It's 100. This heart will. Let's add a property here. But what he on zero, it was zero opposite religion. The opacity from zero right when it's 100 wasn't It's one, right? So let's cities in action. See, initially it waas Fred out. See the image now when it's in schooling into view, it looks like this. This is how you can use this rolling animation in their flu. It's very simple. This is Hogan use, but no, this. He's one triggers like you see. Yeah, the 2nd 1 He's one Driggers. Only the element. What if I want a perfect all the classes altered image? Let's Jane delivered. See these? Initially it was bigger in good. That or arrogating to that element of this image. When now I want it to target all off the images I have. So it said to the class. Now see? Hardly walk. See, this is how it looks. You can add these animations in your blocks or in image reality When you that is scrolling down the distorted images comes from the 0 200% in opposite E. You can play with this animation in the floor. All right, all the innovations that provide is one moves Cal wrote it and skew and Babylon color or the filters you can use. These animations invite flow. All right, so I will delegate from you. So there's no emissions left in the element trigger for now. Great. So in the next session, very look a page trigger animation in their flu. How page Digger animations works in the flow, So see you in the next one. 18. 18 Page Trigger Animation: either. So in decision, really look it page. Bigger animation. In the last videos, we have looked great element, triggering animations so the page trigger inflammation walks through your page and the element Onley. Target your elements on the pace, right? So let's start with the first bigger animation. If you click here. What it says is, let's click here. Click Blows would create an animation triggered by a change in the busy state, such as In Load, Right. So what I want to do when If, let's the first animation is if you click this. Plus, that's the page load animation. All right, so if you'll look great some websites They held this animation when the pages loading, they used this gift or defer animation that shows them it's loading right, that spinning but the issue so that you can achieve in their flu. Also, just by, let's say, went this page, he's it starts loading or when Page finished loading their two kinds of animation for page loading. When my baby starts loading so very it starts loading. I won't like start an animation when my peach starts loading. I've owned gays anyway, John, all right in the create start, let's say, Well, okay, I need to create the animation. I'm really sorry for that. And the president and emissions, Let's get in animation your direction. Let's elect is when my peach starts loading. I want my teasing rage. Do let's say make 1/2 right half off recipe. Great. So let's see it in action. See when my page Slowly, it's half off the opacity. All right now, the second option you have is Rand piece finished loading, so I will select my image of game and I really And when my they'd finished loading, I want the same image and it's or busy d doh 100% right minded person. So when it was looking like these, it won't work because we help make some these. Let's not open city because it wanted, because you don't have that many elements on our bait. Sure, its not to use these do something as let's more within reach two on XX is 200 Rixos. Hi. See if he's see this is having we don't help that my male remains or the website layouts in our his page. That's why it loads fast and finished fast, right? So This is how you can use base your animation in the flow. You can put a GIF file and you can show that give file when a page starts loading. If you're blow posed on any other page off your website. And now let's look at the other page Digger animations. I will move mouse in view port, right? It works. Same is more on moving your mouth or your element that we're seeing the last will use. But here it will work the same way. But what you need to do always before your training in emission, please. Three days. This will help you a lot here. I want my image to move anywhere I more my causa on the page Play mouse innovation. Let's say I will get an animation here. All right. So I will select my image. I will move my name age. All right, I will move a 1,000,000 the x axis, just like we said. If you want to move on, the zero person on on XX is we can use minus minus 50 Vieux port wheat. Great. On he, uh, the can use 50. Report it. You put it is nothing What it takes the heart if use 50 and it will let the half the size off your viewpoint like the your screen. What are the screen you have? Let's say if you have a bigger screen, they will take that half that scream. Right? So this walls the excesses animation for your mouse animation and on the y exists, we can move it minus 100. Or let's in my nurse 50 report height and on 100 off by X. I want to use 54 times. All right, so let's see how it looks before we said it lets it the animation is allowed night. No, it will affect only selected element north whole elements off this, right. So don't worry if I do these if I go here, If I do this, see on my page earlier it was affecting only the element. Now, wherever move my most, This is how you can make a coarser full animation. I the circle you have any Whenever you take your mows it for Lozier Moscow. So this is how you can create he's mouse more, Almost more animations right on in page to go. So these are the animation ratios like you always should keep the 50 50 on execs is if you make it 10. Let's see the difference. This is how it looks like your mouse and all. Let's make it 50 50 so always keep it 50. Don't change it if you want change. Do you contain this Modine? Look a tous a smoothness off our because the animation All right, right. If you score faster, a few mouse, we almost faster. This is hard to walk. Great. So it was our most moving report animation for Page Trigger. Now let's look at the next one we have is a scroll animation, right? So sometimes you want to create Neymar. Let's I have a nail bar. Let's drag and drop on neighbor here right now. Let's take it out of that section or nobody's here. So sometimes what do you want to do when you scroll? You want to hide you? Nobody. Your menu. When you school off a little bit, you want to show it just like other popular websites does. So let's make that kind off. Any mission using this page is called Trigger. For this page trigger. Select your neighbor first. Andi Select is paid school But before you make animation, I want you to do some stent is in position off your neighbor. Let's make it fixed so it stays on top. Let's make it so 100 person. So this is how it will say so it will stay on top, right? Whatever the element you have, it will stand on the top now when you're nobody selected, click on this interaction there and select your page trigger. It should be paid. Scrolled. All right. When I scrolled my page down, right, I want this. No bar to go up. All right, I want to disappear. So what I can do? You can use the's page scored down animation. Let's use thes. Let's use this. Create in any mission, your custom animation. All right, So when I scored down, I want to hide my animation. So let's you neighbor toe minus on why exes set it to minus 200. So disappears, right, great. But now let's said you're paid school off his scroll up. It should be appear. So now let's said that they school up, start an animation, get an animation and used the property, and on why exists? It should be zero right should be zero big SOEs. Let's see if it's walking. If I school down, so it heights. If I scold up, it will. Sure. Let's see why it's not working. So this happens sometimes, right? If you're building something, it will happen on these on eight school up When they score Love, I warn these property. He's okay. So neighbor was not selected that. So I see. You need toe. Say, select your never. So here. What you can do is you if you If you want to change your targets, just click on your property Here. It's a recon bility. You can duplicate it or you contain the target. I want to change my target duties. Neighbor. All right, there's no but he, uh, it's sick. So now it should be walking. If I scroll down, it's walking. If I school up, it's working. Fine. See, this is how you can use these speech Scroll Any mention in rap flu, Right? So let's see what next we have. He's for the Peach. Digger is wild. PH is crawling. So let's say you have these here. Let's Yes, he's one. Lets it this image when it's cruel. I want to move my image. Doing the right site right off the boat on the can was Let's it's said that beach while pages growing good now, creating an emission place cruel animation Create your animation. All right, this one. Select his image. I want to move these image. Do so let's say on the X axis and want more toe 500 when many zero Let's say it falls on the zero from its property toe. Find it right, Great. So let's see if it's working or not. It was on for the y axis. We want this on. The exact is only right. So this is how it will work? No, let's see minutes. Just let's, let's say five Skorney. I'm schooling. See, this is how it will just your image. Look at them is it's moving. Hi. You can use this kind off triggers in your website to create very cool animations using my flows Interaction read. This was our last regarded free has used here and learn. So I hope you have learned his interaction tab. And if you're an equerry, please let me know. I would love to help you out and see you in the next one 19. 19 Style Guide: either so indecision. Or in this section we will start building a website before we started building or website. I want you to download these Sigma File, which is in the resources section. You can download all the assets from there and load this pigna file into your fig Malcolm and open the style guide page and that page. We have er style guide for our grid system for typography and the colors that we are going to use in our website. Right? So it's a good habit to create a style there within your website before you start creating any website. Father, you should help these great system or this tile guy created so that when you use any heading right, when you put edge one in no absurd story it or committed Klay, bring these layer right for you. So it's very handy and very useful for you to create a website very faster. So now going to your workflow conch. If you have not created this style girl page, I suggest you to create this telegram page by clicking here in this busy section by click this, create a new page and create a style guide page I already have created Despatie, so I'm not going to create it now. What? You What we need to do is we need to create this container Is men container off for a website that is holding our main data for website. Right? And there's no bar container. So for the navigation bar throughout a website. So this fruit container that I do is for neighbor and this main container is for our main content for website. Right? So these two columns that I have derided using these men container I left 30% off gambit in them and this is done like that. So this is a three column layout and this is a two column layout, right? As we have learned, all these insists is greed flags, vaults and the columns invite flow. So I hope you understand all this concept now if you don't please go and watch our senses greed, flags, books and columns Will you invite flow in orderto paid these men container What I will do I will look for a section I will add a section first By controlling e or commodity, you can add this section right inside that section. I will use my own container. I won't use this where Flows container. But I will use my own content. So to create your own container unit toe have our division. You can bring that division here doing control your command E look for the reason Do you new book on you do broke is added on inside or under this section section Right, So in facilities do look and give it a name, Let's say rapper right, Give the last name Here in this style section you can get a air in Rebel Let's give the name Ray Well right. Okay, So I have loaded my rapper here on the 10 Waas. Right? So now look at this main container verities 80 person in wit. So now you have to do it Said it's we'd toe eight people isn't right the Mac suite so that our content does not or don't exit is rep Oh, what they would be put inside This rapper will stay inside this report It won't exceed or go beyond this rapper So now all your reports should be center aligned so that it lives space from left and right Right, So by selecting your rapper class or the block here. What I will do I will use in this spacing I will make it center element horizontally. Right? So I have selected my element and I want to make it center horizontally. So let's click that it's horizontal. Now, whenever you are on the page, you will see its horizontal. Okay, lets some pool space toe this section. Let's give the name, uh let's say style guide. You don't name style gate Okay, in such delicate section The Hell rapper Okay, let's put some space toe. This style guide layer will put some painting a building off 100 from talk building off 100 from bottom. Right? And we have our wrapper inside that style. That section So inside of rapper, what you need to do is to create these typography. This can be done. These columns can be done using ceases Creel and Flags book. So I'm not covering this because it's very easy toe. Create these tiles while we're creating websites and now we need our typography. Typography is most an essential place, very critical rule in your website. If your type of office, well defined and align than your users will low and reload toe Come and visit your upside again and again right? So we will start with his happenings, right? His headings There are six headings we have taken hell and even where flowed so provide six headings So let's bring heading here in this rapper So before I bring that heading I want to create a new division inside that rapper Let's bring you block Okay Now I have my d block You can you can just It is collapse my tip Eucalyptus arrow It will, they're so when you click on the steel blow give it a name I pull graphic right So that we you should you name very carefully so that anyone is working When the website can know what is there in inside of fish typographic they will understand that diesel on their day local will understand what is type of right So inside that I have used two columns right? So I will simply put a column here My going heading click at elements looking one heard elements and bring these columns inside our typography Ok, we want to column Great so vividly is only to collaborate In one column first column We have headings till six heading threats. So let's spring headings do control E look for heading. Okay, Heading. Is that Just click it? Okay, the heading is here. Great. Now I want you to copy Paste this same heading for five more times. 12345 Great. So we have six headings here, but they are heading one. If you look at here, it says it won, but we want to make them. It's true, It's three. It's for and at six. Right facility. 1st 1 it's H one right here. If you look at this elements settings at one select 2nd 1 let's make it edge to select 3rd 1 Let's make it three. Select 41 Let's make it at four. And the 5th 1 is that fire 61 is edge six. Okay, cool. So you have your headings. But in order to get his style all right, we really required a phones that I have used here phones for these heading one I have used roaming. And for my paragraphs I have used Roboto and for Britons also have used roboto and this link also right for the content from let's a paragraph, text links and tax blocks or the buttons. I have use Roboto secondary form, but my primary phone is for how all the Helling's is domain. Or don't mind. However you pronounce it right. So in their flu toe, get phones is very easy. You can use Google phones in where Flo and they are free to use. Nobody will charge you and they are very good looking for So toe headphones in my flute, Just click you and click on project settings We will bring and down or those phones and click on these phones. Okay, I already have Domain and Roboto, so I will remove them. Okay, so these are Google phone step, and these are custom phones. You can upload your forms. If you downloaded from Google forms, you can upload. Otherwise, you can just lord directly from Google. So how you can do that is just clicked its electrical phone problem and look for Dominic. Okay, here's the Domine. Like that phone it is. We will use regular and 700. It's bold. Right? And let's keep it as letting just add phone. Okay? Our phone is added. The door mind is added. Now we want Roboto. Okay, Roberto is here. Let's click on the light. Regular medium board and black, right? Just add them. Okay, They are Read it right. So now just click in this design, huh? It will take you to your dashboard. Your current project Dashboard. Okay, We don't help that paid loads that place if you click here, this page is home. On the talk you can see the pages you have other as you can click here also, you can see the pieces you have. Okay, let's click on this tile guy Page. Okay. Here are the pages are not I'm Surely here are headings that we want to create Look like this, right? So what we will do now is that select is heading edge one. We want to make it If you are in fig MMA, if you select is you will see in the tax section Your phone size is this weight and its line height and all the color also. But what I will do is I will see like this phone and you should click on this Cool So you will get the core off the ceases cold for your website you can get for android also You can just go be placed its gold in your android application. You can use that CS is it will affect seem like this. So here the phone family. If you look at here the phone family if sea like this Look at here the phone families dumbing So let's select our phone family toe, let's say for for all edge one. So if you click here, they will ask you to create a new class or use the HTML tag all at once. So we want to use all that one because in a website, very what I use as one heading it should effect, which would use thes file that that we're going to make now. Well, that's one. Okay, great, they said, Date one. Let's let the phone is bombing If you scroll down typography. Selective phone No mean look for coming here The moment that we have a dead from Google phones now we have foreign style is normal. Let's keep it as it is now. Phone trade is bold. Now let's make this bull here. In this phone rate, it is normal. Let's make it pulled. Okay, great. Now the line height off your phone is 82 pixels. So, if selected, actually selected. This is your line height. Let's make it 82 pixels. Okay. Great. No. Where is your phone size? Your form sizes here. Right line 1982 fronts as in 72. Let's make his phone size 72. Right. The this is coming like this. Let me make it 100%. Okay. This is your H one. This is your heading. It won. Let's say this year which one? See? It looks like that. Okay, Now we just need to change the color selected sculler for all adjourn headings. Like 90 days for it. It's one headings. I want this color. Right. So this is set on def. You click this color box, they show you the colors. You can select a color here, but I will add color. You can save colors in my flow for your project. I click on this. Plus, I can I will make it heading. Okay. I sailed my color. Right. So I will show you how to use it when we do for that too. Okay. Rates over at one is done. The heading one is done. But I want to Do you know certain things that is, they stop margins. And the border much is. I don't want to use them because they are not necessary for now. You can keep it as it is if you want to, but I suggest you want to use because you can put your own margenes when you are building look page right, great. So here for the age to now, select your age, too, and select the college to Helling's and you were in the designs Bridge to on the phone sizes. 64 70 trees is line hide, and the form rate is bold and it's families dumbing just like we did for each one. All the headings phones we will use his Dominic selectors edge to selectors are alleged to . Now let's remove these margenes. We don't want that now. Come here. Selected Domine. Let's make it 63 18 63 or 64 83 64. You can use your arrow toe just plus minus your phone size, and it WAAS 73. The line height is sounded three and the color. If you click on this color box, let's let's use this self color for the headings. All right, on. Now it's war. Let's make it cold. Okay, here's our edge to right. He is alleged to Is ready. Just like that, we will make it three you can located this three is 1 48 picks up form size in 55 line height. Let's select his HD hits. Three. Selected Tom in that said his full 48 and 55. I think that if I just 55 select this color your threes already. I know it's sitting with these. There is the living losing with these margins. Okay, you're edge trees. Rate is now at four same way, just like we did for these All these. Let's remove these. They don't want it. Now let's let the domain No, let's elect bull. You can set it as full B eight and 55. Okay, they are saying right, 48 55 whereas for also so let's see and change it toe to toe. Let's say 36 736. The six on lets me 20 full. Let's make it eating Forage six Heading six. This is it for going to a court roaming select Domine forage for on board the phone size is 26 off line hundreds. 41 26 14 long. And these I'd make it. Pull it this board already. This is how you can create a style guide in workflow. Let's see, Let age five I Let's make it domain. Four. Well here, ending with these margins and all in this typography. Let's see what is its 24 27? Make it form size 24 27. Let's change its color toe piece. This was your fire. Now let's come here. What is that? Six is 18 pixel form size and 21 pixel line height. It's six. Select at six. Darling. Make it pull it in pixel form size and 21 picture is your line height and said colored booties. So this is how you create style like for all of your headings in Where Flo, Let's if I want to use these heading right, So how can I use it if I'm on my home page and want to make heading three for my blawg hurting, I can set detailing three C. It's getting that style that we have defined so you don't need to create your headings every time on your upset. All right. This is how you can change your headings from one place If I want to change my heading. If I change its color from here, it will affect in my website at very what I use heading it one. Okay, so this was our typography. How toe air headings in my flu in the next one. We're looking at this paragraph. So let's create the paragraph in the second column. Let's a paragraph control e a paragraph. Okay, I have added a paragraph. Now I want my paragraph B Roberto. Okay. Select your paragraph. You, and select a selector and make it for all paragraphs. Let's make it from what off first? Okay, in your phlegm. A selected group photo. Look for water phones that we have a lead. Okay, So what are now? And I want it formed. Way to be normal. Let's say it is normal on its former size is 18 and four. Line height is 28. Let's do that. 18 and 28. Okay, good. So the food color for all paragraphs is 000 means black and the 54% of 54 opacity. So let's do that. Select your phone. All paragraphs. Where paragraphs. You in this color box, Choose a black. You can just like these. Well, you can enter your gold here. I want to make it 54. Let's make it will be four, right? So it will look seem like our back off here that we have. Okay, so we have headed off paragraphs off wherever I used very craft or wherever I used the's better going off in my website. It will take thes style. Great. So you're paragraph is ready. So now Sorry. I think we have amazed anything or no. Ok, it's working. Fine. What? So I want toe create this link Text link. Okay, select your tech current control E look for next link. X link is there. Okay. Selector, X link and in selector, select for all links where I want to make my text link Phone families Roboto. So select roboto here. Okay, great. So after selecting Roto at the phone to it is normal. So it is normal here also, nets look for its form, size and four line height is 18 and 21. So it's phone size is 18. Let's make it 18 and 21. Okay, for all the links we will have in our website let's look for the colored. This is the color. Let's change the color toe. Our Tim Cullen select is click your complected. So this is a team color. So she like this color. Selective your tax link and change color toe. Just copy. Pasted on let's cities colors. Brian Woody, Primary blue. Okay, we have saved of a color. Okay, so I don't want underline. So I will removed in the style I will do with the underlines. That looks good. Okay, the link is made. Now we have to create this Porton. So how you can create this part on is if you look it this bottom, it has this rounded corners. I hope that you now know how to create around the corners that I covered in my previous videos. So look for that video and you can run from that. So at a button, I have added a button here. Okay, great. So now what I want to do Let's say I want toe a break so I will air. This is the reason for now so that they look they're on the separate lines. So this Barton is his blue color that we have sailed. So let's make its blue for all the buttons. Right? Select your Barton as you like. My button click here. All right, so now this was all links. And now for the sport. And let's get a class called Martin. Okay, now what? I want what I want you to to ease make its background color toe the primary blue that we have sailed in the background. Check with his blue. Okay on If you click on this text, it will tell you it's it will show you It's family in the form, size and height. So it's phone sizes. 16 pixel front weight is 500 minutes. It's medium. So let's so that if you select what on in Roboto let's make it medium 500. It is 16 okay? And the water's line height line height is also 16. So let's make it 16 here. Okay, I would Do we have any spacey? No, we don't have any spacing, but it is takes transform to capitalize. Let's make it capitalize. Select your part on If you click on this more type options, you will see. It is later spacing. If I pulled If I increase it. So this is how it will put later. Spacey. We don't want any, so I will Just recipient. You can put this takes in their intent. Okay, Great. We live the space. Okay. This is your columns Here. You can make it capitalize. It is known right now. If you want to make it capital. So all will be capital. I everyone capitalize from even selective. Okay, let's give it a name. Just like we have here. Okay? Subscribe. No. So we have entities. CS is. And now let's make your phone color. But foreign color is white, so let's make it see that your phone Let's make it white. Okay, it is right now, so if you come here in this spacing section, we want to change our spacing toe look like So Now if you click old and look for if you How are your Carson on this potent of blue box, it will show it spacing. We are putting 16 from top and 16 from bottom and 32 from left. Right, So let's do that. Select your porter Pulled 16 from top. Okay. 16 from power and it was starting to from left and right. So this is how it looks like these. If you come here, you will see how it looks like that. But now we've one of border radius off eight pixels. So let's do that. Select your bottom if you scroll down tail this border section in the radios, let's make it eight. We want a pixel from all the size with the sites or the corners. Let's make it a pixel. C. You're important is really in where? Flo. I never use any bottom. Let's say if I want to use any button here, I will click here. I was at this bottom. It won't work now, but used the class that we have defined in this part on. If you select your Burton creator, we have used the button. Let's select your this newly created bottom and gave it a class name called Barton. It will take its style, right, So this is how you can use Barton's in flow. Okay, so we helped gold our typography section on this great system, right? This container, how to create the container. Now let's look at this colors that we're going to use You can discolor just like I have added. Hi, My creating these one. So I have those colors so you can hurt them also. All right, so these are the shares are plated. We're going to useful. Let's say we have used 54% for our these text. I dis 54% opposite Lee. So you can we have used this. You can also use that. So in the next will you we will start creating our website Since I was a style guide is really now we can create our website in where? Flo. So if you have any queries in style girl section, just let me know I would love to help you out and Syrian the next one. 20. 20 Website Navbar: either. So in the last session we have looked at how to create a style guide in where, floor like this. But in this session, we will start with our landing page. I hope you have these things off downloader and you are also practicing along with me. So in thes one, before you start creating order loving anything from the design unit toe break down what you will use. So if we look at our menu with the header, it has a logo. Okay, so we can use it as a link. We can use their flows before neighbor, and we can customize it. According I will requirements. OK, so this is your logo and desire your links, and this is also linked. But what I have date is here is my logo. All right. And this links I have used off flags box kind off layout here. So what you can do, you can use a flax books and you can put a space between these I don't so that you can get these kind off effect. So let's create these. So going your workflow account okay. To create a neighbor like these, use a fluid container. We which will help a 90% off 90% off wheat. Okay, I have added a new block. Give it the name like fluid. Grapple. That doesn't we have for men. Content is rep O on this is a fruit bearable which will be a bigger than rep. Oh, so let's make it 90% in Max with it does not exits our Leo. OK, so this is done. Now what we will do, we will make it center line like this. Okay, so this is done. Great. So now unit, don't bring your local and this link so really lose where flows they fold. Nobody, right. So is when the fluid vaporous selected just toe control e and type now. So there's nobody like that. Your neighbor will be here, right? Right to one thing. Bring your neighbor outside off this food wrapper and bring this fruit report inside your nail bar on just in Theo condo container. The data you have in your congenital Bronn went in your bottom. Just bring them inside this food rebel north in the container, like just dragging and dropping. Let's tear. It is continuing. We want don't want to use that. Let's bring this inside that through rappel. If you look it when you dragon broke the element, it will show you where it is pressing that element. OK, so we health is now select your mayor watch. And if you go to the elements settings, let's change these Tow these. All right? We also we don't want this never. Well, here. So if you make it like this, it will walk if you have a size, which is kind up on 992 for landscape tablets. So that's why it's not feeling that good. OK, so your neighbor is working Hope, envy or fruit Verbal inside that we have these front where we can put a logo. It is link herbal. And these are your links. Okay, let's start with changing the background color. We don't want any color. Be white bedroom. So select your nail bar. Give it a name. Nobody. Okay, School down till your background color change its back on color white. Okay, you can sell this white color here. The article is still You can use it anytime. Okay, so your color has changed. Now click on this link and you will see the phones. We have used. And if you go to this goal, if you go to this gold section now, you will see we have used for a little friend phone twenties medium. And this is the phone size and the line height. Okay, So in order to get these look for your links, right, let's just so mean on select your link, let's say no link. Okay? And really the other one. OK, but the ones that did it it So your new link, let's make it are 18 phone size in 21 line height. You Your phone size should be 18 in 21 because it's taking these already because we have used Link Previously, we have said links all Ling's in our style. That's why, right? Let's change its color. Both these one This 21 toe B 25 That is hell. What? OK, it's done. But we need to change it to medium because it is 500 here. Okay, there is no space later spaces there, So we're not putting that. But if you if you click on your many new link and you will see it is hoping this 30 pixels right from left and right. So what we will do? Selected You're nailing if you come in this basin section, let's put 15 from here in 15 from here. So if you add another link, he, uh Let's make it. It was 1st 1 was how it works, how it works. The 2nd 1 is about us. Okay about us. The 3rd 1 is bloke. Okay, The tournament is blue. We are not putting any links from top and bottom. So let's do that. Let's remove these one. If you want toe right, let's make it then. So that it has some space toe plate. Right, So great. So now we have our links. The other lingual toe Aires, Down Lord. Right, So we can add it. Let's just copy and paste this link now, Lord, App off here. Don't know your ab. APS is capital. All right, this is your link. OK, so now what you need to do is at your local now. So toe area locally, Quintus Bryant on when it selected Just hit control e and look for image. So I have already bring all the images here. You can do the same. Just download from all the images from the resource is section or you can export images from your fictional file, so I will look for logo. Here's my logo. I will select it. Okay. The logo is there like these right now. We will. We will create a loud like this. Okay, So in order to get these, what we will do, we mean create a new flex box. Inside or inside are fluid Grippo. So let's create of flags box. It's a fruit ripper at another deal. Okay, there's deal said that deal. What we will do is we will add, uh, now I don't flags. Okay, This is a class name inside that. We will bring all these menu and what? Okay, so now you have bring all your Ron and no menu inside your nail flex. So now what unit toe to ease. Let's bring this menu. But also, what you need to do is create another division inside this deal flow because we want to create a nice pit flags for our download app and how it works. So inside the male me new right at another deal, call like this completed like these on Just read it out off from now, we knew. Okay, this door out. Great. Or you can add it inside, Tad, if you want to. Okay, let's select your no menu. Andi, if you make it flags, it will vote. But we need to make our net no item flags for Select your name right from here. And if you come here in this layout, let's make it flags. Okay? It is flags now. Great. We wanted horizontally. Let's align the condom center A land, its center And now what you need to do is a facility namely new right on the doubt selecting anything. Just make it sizing. Grow if possible This one So what it will do it will take all the space is left inside your nail item with a net no item flags box are actually let's click this sizing See, this is how it grows. It will back and it will hold all the sizes remain in honor Flex Let make this name no menu flex again right? This is called a nasty flags Inside of flags you are creating off flags again. Let's clear these flags. Okay, This flex is here. Don't worry about this. We will fix this. Let's at another deal here. Let's add. Okay, let's take it out off that. Let's bring all these items. Was the three links that we heard inside that one? So now we have boxes. Now, let's make this name. We knew flags after making flags. Let's justifies contains space between Okay, the space between Good. You know, Manu is space between now. So let's if you look at this. This is how it will work. But this is not working as we have hoped, right? So what you can do is you can create a simple now when you like him here. All right, so this is really do this one. Is these now what you need to to once doing these? If you don't do this, justify center just like we did here. We made it. No menu growing possible. Just do the same thing with this day block. Good. Possible. So look at thes. We have got what you want. What? We want it right. Like these. Let's make it look more better. And according to our design, let's pull some 40 pixels from top. Okay, let's do that. Select your name right down or your new bar. Let's boot off pairing off 40 pixels from top. Okay, it's it's looking good. No, we are getting there just like this. Now the thing you need to jeans is this unitary 40 pixels from margins from these logos or what we will do. We already have 50 in here. And look at this link your little fusions on. Now we need to it only 25 so we will select on logo. He will give it a class, let's say logo right and a mounting up 20 fly from right side off feet. Then, if you look at your menu, is working on looking like saying like this, the menu that we want if you are on a bigger screen. Still, it will look same if you control miners, right? If your mom this is have to look, it won't Jan's its position. Who? This war's creating a new menu in my flow. Now let's make it look better in Have let if you sell it established here, So this is how it will look in tablet. So in order to Katie's in the tablet, what you need to to it is outside. So let's bring it inside. All right, let's bring it inside. Let's make this name. We knew. Okay. Okay. So let's make this menu here. What we can do is we can It is for is possible. So the links are there. He's one is outside. Right? So if you want to put it here, what we can do is we can create another do inside a neighbor. I, Tom me, like don't now select is okay. Oh, what you can do is, if you don't want to add a new do, you can hurt his name. But don inside you, He's name here. Here, but it will still it want for Because we have made these sizing. So let's at a new do select your new right on flags and the new new Okay, dude, here, bring all off your no menu in a border inside. He's one. If you're on the deck, stop. It won't work the same way because we have to make it flex right? Otherwise, it is taking that space. Let's bring it out off the deal. Okay? So if you are here, if you click here, it will open this menu. All right. Great. So our menu looking good. So Okay, so we will look at things. It is responsive. One. When we complete our dashboard on the deck, stock was in first. Right? Then we will move both these backstop or the view pores like for the tablet for the mobile landscape and the poor pregnant. Right? So I hope you are practicing alone. And if you have an equity, just let me know. I would love to help you out with your queries. So see you in the next one where we will create his hero section off our website. Right, So see you in the next one. 21. 21 Website Hero Section Using CSS Grid: Hi there. So in the previous lecture, the previous session, we have created his name Ball. So I have made a little change in his neighbor. So if you have created like, he's just Greg this logo, it was initially here. Right? So just break your local out off your name right on flag so that it does not affect our No , What's it? Looks cool. Right? So it looks like this that we have designing or figure five. So now really clear these poor son his hero section in thes class. Okay, so once the nobody's created and done now Hewlett toe, add a new section. If you select your body on if you make great like this at the section. Ok, let's call this section of hero. Okay? You know, now you will need required toe add a rapper class, that container that we have created. So for that every block. Then select a new block and had a name Rapallo. Okay, cool. Select your hero and aid some spacey if you select is heading or this image on the control . Sorry, old. And the carcel your mouth to this logo. It says wanted to pixel from top So let's put one turkey from top. Okay, it's Don on and 100. Let's use 100 100 from bottom. So let's put 100. If you click, it is spreading this park. Um all right, so we have used so far pairings and the section on the weapon I create like this. Now I want you to use a column or CS is greed or the flags box. So in this case, I suggest you to use a flags walks Okay, so we will put a space off 50. So let's get of flax books or the seas is great. So let me show you it Victor sees is great. So it is very easy. It ceases. Great. 10 flags box. Let's add a control E and at great it is here. Okay, if you unwrap these, you will have this great. We want only one Drew, but two columns, right? One and two problems. So let's click on this grade. If the click here, let's give a name to this greed. It's a so call or Hillary. Let's say hero greed right on. If you edit your greed and just removed the row from your great great and we've warned off 50 XL off gap between our columns. So let's add a gape here in this column 50. Great. So now we have the great look like these. Now Earth ease section forced off this image. Let's use this image first inside the great create 282 new diesels. These do just based it, right? Let's get the first Do give the name left contained, right. Give it as a right and then Okay, so now in the right content is he made. I hope you now know how to use him. Aging my float. Okay, Now you have this image. You can just grow like these. It is negative toe. Make it large and small. Now choose image. Let's see. Reach image way Have to use the no days, not days. Yeah, he locate image. I hope you have downloaded at all the images from our resources section. Now the images here it looks like this. Okay, good. So now let's add this content in the left content Greed. I feel in this edit more when you are, the more it looks like this for an elite more it will look like this. Select your left content at heading. Heading. Gave you use edge to here. It's 64. So let's use H two. Okay, Good. The 64 edge to good moving is a stew. Let's cop. It is contained from If you're in the score, you can see the contained here Beat. Just basted here next anymore. These So meet Teoh Money saving us. It's done. This is how it will look. You can make it edge one if you want. Couldn't make it s one. Depends on you. All right. So now you need to add a paragraph. Feel for this Lord M ipsum text. So let's add a paragraph. Select your heading after you're heading. Let's make it edge does it? Looks little Beto heading and a better graf better. But this is your paragraph. So this is how it will look. But we want Onley thes much optics. So let's copy paste this text from here. So here minutes at these on this is how your content look. We will add some padding and margins like this. The gift we have. Okay, so if we look, it are heading and seeing how much braiding or the margin we have is 24 right leads at 24 from border Magic. But what I will do, we want four. We will put margin tothis back up so that it will afraid toe thes box and is heading also. So let's see from top It is 24 and from Bordeaux. MITI's 38 right? Select your head off. You're gonna do a name. Let's see. It'll better it waas 24 I think something. Let me see again. Yes, and 38 from water. Let's put 28 from bottom. Okay. To make a phone like days you will require to create a little bit of custom element. Okay. And your toe you required toe. Add a form. Look. Nets, click on this. Better control E at a form block here. McDyess, you will have this form. We will build this failed levels. We don't need them. Okay, We really give these two things here. So what I will do now is to make like these, we will add inside this form blow form. We will add another deal. Let's call it get up. Get that on. Let's put our tax food and our board done inside that. Yeah, that Just remove these reading from here. If you have any breeding, they don't have any breeding death nets at this party here. Okay, let's go to name. Let's see. Get up. I mean, I these that help. Okay, this is what we have. Bark. If you look it here to spacing in the trading we have given here, toe this part on its 16 16 from all the sides selected Spartan, give the noon class here it will call a combo Class C. It's new combo class it gate, but not right at the bottom. Let's make it 16 in the 16. So it looks like Ah, but on we have here, right? He's one. Okay, this is looking good. But now let's use flags. Walks here toe. Bring this that attacks feel and this scared, but on the same line, selectors get every reason that were created and make it flags from here. Okay, it is flex Now. Let's center. Lend them okay to center line. Now what you need to do is let's see if you look at this these texts and see this 2020 from all sides, right? So what we will do from this button? Let's 88 It's aged some eight it reading from all the sights. It's at these, Bernie. Let's make it it from on the site. Okay? It is eight from all the sides. And if you look at the bar box, it's border releases. Epics A Let's make this box get a box more than ideas at Big Sur. Okay, this expects matrix And now and l this box shadow tothis to view I zero color Let's at a Bob, Cheryl, get up the styles box shallow. Let's add it from outside. Let's make it like these seven days, so it is already black, so let's just make it 17. Okay, Would on from the eggs and the why it is four. And the blood is aiding pixels. Let's make its plus 18 pixels. Okay, seats coming. They're safe feeling with that? This is our don't know if he had 18. This is how it will look. Okay, so now you're doing these four big. So from all the sides, literally stances for pixel on. If you look at your box, it will look like this. What we need to remove thes border border on border lines from this tax will select this tax will selectees Mordor. Let's removed Let's get a name. Let's see on that next filled Okay, Andre Moods Border That states border is not thinking right now. See, there's nothing but it is type ever. So let's make it like this example is John So what we can do? We can just cope with these placeholder. If you click on this X field, just get named Expected emails off. Let's in the days we want it required if the let's not make it required, but it's required, then if they don't and anything they can. Priestess of mid Borton, right? Otherwise it one for so it should be there. So this is how it looks. Let's see. What is the style of these placeholder? It is a normal roboto. Okay, lets see. Like this tax will go here in this typography. Let's make it Trovato first. Okay to the water. Now, Now you make it 16 picks of phone size, 24 line height. Let's make it 16 and 94. Okay, on the color is 00 20 toe. So let's make it color. Let's make it black. Let's make it 30. Don't Okay, so if you look at this. It looks like he's right. But let's make it sweet. Go something like 94. Okay, so let's make kids select your get a box. Let's make it Mac. Suite 394 at Saint See. This is how you form looks like the custom form that we have created in workflow. If someone else, they can hurt the name. No. Right, So this is how it will look. Someone hits. The phone will be submitted. Great. So this was your get a phone? That's a a member form. Let's say that form. Okay, book. This is looking good. All right, let's Makesem spreading on. Let's make a rapper. Let's say it is rapper Toby, 75% so that it will look exactly like what we have here. Like these. Look at these. All right, with your new money, saving us has done with your new money saying that's his done. If we still make it 80 it will save meet your new money saving assistant. Right. So this is how you can create a Haledon where Flo using flags, walks just like we have used here and the seas is great to create, Like these. Okay, So in the next session we will create this section is why you saved for your finance where we will again use the ceases. Great. Or if you want, I can show you an example off columns. Right. So see you in the next video. 22. 22 Website Using Columns: Hi there. So in the last video, we have created his hero section. And I hope you have also created the zero section. And once you built this website, please share the link you previewing in the description hide in the community section so that I can locate it. And if you want any tradition, I can make situations. Great. So in this section, we will create these section section two against the six and one okay off our landing beach . So let's create it. So I hope you have is created now. Collapse everything, using these arrows in your negative, your body and at a new section that's Cali, Section two. Okay, Inside that section, I will create a do, and I will said it's glass name to rappel. Okay, let's have a dissection. Let's pulled some 100 from top on the bottom. Let's bull stays. 100 100 reading. Okay. The betting is done. Now. I want this color, right? So I can cooperative scholar from here, but I have already grated the colors in my life my flow. So if I want to set a bag and go directly cure I mean Jews, that color it's here writing Yes, that's one. So this is how you can set the background colors and instead of rep Oh, let's add our Davies on Witches Gold Section title that's edited rezone ah, section tighter. Okay, inside that reveal use heading and attacks linked. It's at a heading. Okay, I heading Let's other tax link Also together. Then we can just Ellett style text link. OK, I helped his heading since we were really of use heading to So let's heading three year okay and selector sex entitle Mac Every content aligned to the center inside that's it's entitled on food when people see alternative pixel margin from he's heading six and uh, right your name, then put 20 from bottom. Okay, now let's Coop. It is text from here after popping is just Teoh. Why choose Why yourself for your finals? Let's at this link also, let's at this link, learn more about you. You said what you said tell us. Hi. So this is how open air links. So as you can see here off, a job is way simple here because we have created a style cars. That's why we don't need toe and each and every time the Stiles writes. So this is how you can make your websites. And now this section is here. Let's select its report and a colon. If you won't or ceases great less ceases. Great. Or the column states used columns just like I have mentioned in the last video. If we want a three column here, so end of 2nd 1st Column Let's do here your first column. Copy that, Do you your second and told All right that. Do 1st 1 Select the columns. Let's pull some baling margin. First, select your this link in all the keyboard and see its 60 from top right? So were selected for lungs here and in the marches. Let's say three. Call now, create last name and put Imagine off 60 from top. Okay, so now let's at thes box here. So we have this box. Let's get a name. If you don't let's let's remove this for now and see. Let's get this 1st 1 first and inside that gone. We want to remove these from here. You can bring weight if you don't. It's fine. You can make it 15. What, you can just make it cereal can make it. Siegel select. The last one is cereal zero everywhere. Everything will be zero right, so you can add it. 15 here, 15 here. So that leaves the 15 15 15 15 is there. Let's make it this column. This one is also 15 someone there conflicting from here, and this one is also a victim from there, Shipped in from here. So it makes tucked eater t right. So let's and this do what I want to do is lets remove this one now. We don't want it just removed. All right from these also, let's remove this. We don't want it for now. For the 2nd 1 let's give it a 30 right in the last one that's gave a 30. The Dean. Let's do Let's edit Do you hear in this colon? Selected deal on. If you want to give the name, it's a box. Okay and said these background white and make shadow. Let's set its belong with Why Dwight on Let's change its border. It is a big SOEs if it's cooled down since it is radius, let's put it at Big Sur on the book show. He's 4 20 on the wire. Black color, Select days here the black on it is black color. He's one will rely for and 20. Let's make it blood 20. Let's make it full and he's one waas 0.1. So let's make it 10. So your boxes really know, right? So inside your box I have food for P from all the sides spreading for cilipi box and go T o sauce basing section and 40 from all the sites using control sieve on dragging these What? Right. This is 40 now you can copy days toe each and every one of these. You know why it's looking like these? It's terrorists, Joe sitting right, Let's make it 50. So oh, you want If you want toe remedies, you can do it. Zero is a zero. I don't know. All of same now, since all the same, let's make it Let's active 15 from here, 15 from here. So all the boxes Collins will be picking from here, or the pain that you're then so then looks good. Then select is make it then you can change, right? So while building when you use these columns, you need to manage all these by yourself. Well, right now, I have these. I want image heading and the better rough. Let's a image there. It's hurting minutes. Bad enough, right? So let's choose the image in Soweto. Let's Jews days make it. Make it saying Where does the Soweto unless you're making make this four okay like that before we have said, is H three n. H. Four on these one contained. Let's cooperate the content from here. Well, here and based it Suspect is heading next. It is so better. Okay, he's on. Looks good now. Just height is for now, so it looks good to you. It is like this now. After you, he's one. The Helling pulled some 30 from talk on 20 from bottom selector heading margins to your heading Tutti from job on 20 from boredom. That's giving the name. Let's get a name. It's a box heading. Okay, so this is how it looks. Delete these boxes so just we can copy paste on box that it saves over time. Right? Poppy, just copy now you just need to do is change the contained that you have. Let's say let's change this image. Let me change that image off that girl. Let's change these weak, I guess. This one? No, that guy is walking on his lapped up. Now it's a matter off changing your herrings days. Let's let's use H five the's age for our looks brighter. That is what I think he have them his age file. If he used his each file on for four days, this is how it will look. The headings and the importance see always looking good. Right? So this is how you can use columns in my flow. So in the next session, I will create teas where evil Lucy, this is great or flags wall. So that all the concepts of court Let's say the abuses is really here and used columns here and now they will use flags box in this section to create a loud like this. Okay, so guys seem in the next one. 23. 23 Website Using Flexbox: Hi there. So in the last session, we have looked that and created thes section in the floor. If you're creating this section along with me, that's cold for you. Because you are learning the flow and you are stepping for the right. So now in this section, we will create these layout or the section right decision. We will create these using flax walks. So this was we used columns. And for these one, we have used breeds and he's one even use flag sparks. Right? So if you have if you want, you can collapse all. So select your body. I create a new section. Let's get the name Section three. All right, let's put some spacing from top Andre from bottom 100. Okay, inside that section three at a new do you for our container. Let's get the name Rapallo. Right. So that's what we have here. So this is our section title that we have created here, so we can copy it right from the first section. Let's copies and based it inside these. Let's did it. This we don't be quiet. We have toe meat is thes Better graph. So a that contained nights copy that content from you on a tear, right? And you tear once you edit. Let's said it's makes with do MM for 98 right? So let's set its makes with selected for 98 Max Wheat. Okay, you select this max week, get it contained. Let's put the center element that element that we have, said the max. Wait, let's put it center. It will be in the center. All right. Okay, great. This is done. So now let's create this. In orderto create these, we will require a flax box container That said, This is all flex most container Inside these, we will need three flags box items to create this one forties 11 for image and one for this section. So let's create a first Flags box container. Let's do you Let's say more by flags, Dana. Okay, let's put 60 from top. Margie, Let's do that. Okay, it's done. He's one. We need three divisions for the flags. Items B one, 23 Right. For the first view is, let's get the name Plex one. Okay, this is gonna flex item. So this flax one, let's give the same name to this flex one right? If you don't want to create it right now, you can, because we just need to copy it. Ease and placed it here so it'd be there for now. Let's flags to if you look it here. Tous Flex two is a little bit bigger, competitive, so we will put in a percent age for this flex, too. Let's make this flags to 60 ball, son in wit. Right? 60. And these are the 20. Or you can say he's one is that would be V eight is 30%. So 30 30 60. Let's make it 40. We have to paste it here. I can use the week. Did I have said here? But I don't want to write the just testing it right now, So let's put an image. Yeah, this image, this box image. Okay, the images here. No selective flex container. Let's make it flags. So it will be in the center because it is horizontally flexed. Hi, You're images there. It's good. Now in the flags. One. Okay, Davies on. Uh, let's get a visa. Do you want flex one flex One. I don't Lex one I don't want right for these one. This is I don't to what we can copy pasted inside that we really need heading just like the hell hell in the bed are going off I said, The better golf. Okay, let's make this heading smaller than thes. Let's use it as a four. Which file you can use it each file its various vato. So let's change it. Say better. Just copy paste these paragraph condon and basted here in your page. Okay, you have these, but let's create these manually. We don't want to use any major. Let's were it is manually. So in order to create these vivid require a box, let's create a box inside this flex item. Want this section tourism and then you do. Do you put it up on top off this heading? See the return height off this box Here the Wheaties preppy in high descriptive. Let's make it 50 in orderto create a square. Sorry, a circle boxes in border radios unit toe help. It's wit and hide. Sorry. Inside it was same 50 50. And if it's gold down in the border areas, let's make it 50%. Okay, good. 50% and let's see the background color off it It's a big grin. Calories Thes, right? So let's come here and see on the blue. 20%. Okay, it's used that blue to let these in this bag around, which is this blue and make it 20. It looks like this right? So inside that we helped his little heading that I used. So let's use that. Let's use it for at six. I think it seeks is better. Yes, that one. Select your block, that circle that you have created earlier. Let's keep let's name it's circle. Make it flex. Set it a line center and just different hunter toe the sandals. So let's make that hurting one. Right? And let's change its color. Don't that flew off Primary brew Closer. It will look like this. Great. So we have created our circle also. For now, let's put margins from top and bottom 24 16. So select your heading. Drink before on 16. Okay, great. So you have you You have your this box ready using flax walks, right? So we have used flag spokes here a lot in this section to create a loud like this first week. It used flats, books here and here, and then here. Right? Great. So this is done. But to make it look like better. What we will do, we will pulled this one. Lets take his own. Let's food. Its margin from the right side is 50 pixels so that it looks good. It may put some building on the margins. Let's copy this flex one I don't want and put it here back. All right, so you have that. So now select this flags one on. What do you need to do? Is make it flags. Okay, make it vertical. It is time and said it is justified. Contempt space between. So now what will happen if you look at these? It will look like this just like our design, right? This is what we have in our designed to. This is what it looks like here also so create. So once it is done, just OPI this flags one and based it just leaving the older one give you flex three. Okay, The class name. Just put the marching from the laps at this time and just remove these right one. So from all decide. It looks cool. All right. So this one where we have used flare says. It's great here We have used columns and here we have used flags box, toe, create, allowed, like kiss that we have in our design. Look it here. It looks exactly like What do we have? You know what he's saying, right? So it's just a matter off your national. Or if you're in a bigger dashboard, that will look like that. So great. So this is how you can create allowed using flags box in Where? Flo. So in the next session, we will create this slider for these testimonials, reveal you slider and inside once later even showed two testimonials. Right, So see you in the next one. 24. 24 Testimonial using Slider: Hi there. So in this video, we will create this section where we will lose slider in my flow. So now we have created thes sections. So now let's get a new section. Now I'm sure you know how to create a section Click section, section four. Okay, say the trading 200 100 from top and bottom of the section inside that section. I want you to create a rapper that we already created here. Okay, No, Said the background corrupted section, but is but this one was it this Okay? Okay. I'm really sorry. It's typography. We wanted the veteran that so I was thinking rights not showing up. Okay, so this is what we want it now. We want these section titles Corporatist section title and based. Did you Okay, let's copy the eggs. Well, feet. That's it. This one, It's gonna be all right. Let's keep it say MITI's. So now I want you to add a slide. Oh, in this rap. Oh, that's right, Slide. Oh, OK. We've almost like it is here. Select your slider and change its background Color toe Transparent. We don't need any color right now. Anyone? We don't need this next in previous wouldn't let's hide them from here outside them. We don't need this light news, right? Once you hide your slide off neighbors like these arrows and all. Great after click on this lighter and pulled 60 pixels off marching from top in Celje. Slide one. We want these two boxes with the contained. So we already created this box. It's let's use them here for pity's one. So what? I would first inside that I really create a new do Do these. I, uh, walks. One invokes do here. Uh, he's one. So in these Dave Block, I will make this day block. Uh, what you can do is you can make this light 50%. Let's say like this 50%. 50 percent. So you will have to slights here. Seconds later will be 50% as well. No slight. So you will have to slides the same time. So let's bring thes one up. It's spring things in the 2nd 1 that single days, so that you don't need to worry about your slides. Let's my gate on. That wasn't so the content shows up. So you, Homeric 50. Let's make it for the eight so that we have some space. The buttons. Let's use this mosque. All right, so after you making that 48 48 let's put some Marge's from right side. It's a 2% percent forties from Lipsyte, 2%. So this is how you can create allowed like these for in a single slide. It would look like taste like this, right? What we need a very love. It started that we don't want these. He's just need a minute off here. Let's select is let's say, the last name testimonial said the type of Dorothy Elin text with the left side like this on. Let's copy. It is text from here and put it here a place where you have these. That still is this for now. You don't want it at the moment, let's make it 50 from all the sites. That is what we have in this box. If you look at it is 50 so let me get 50 after these. So inside. So insect is do you at a new do right to make these clients four door and his name and position release flags walks for that after the Indies aid the image and look forties image . Okay And said that Duke again great. A new do I heading and said that and a paragraph title right that we will lose. So now toe make it look like these Change your heading PFI Let's see what he okay lets you that six. And for thes lets you 16 or something. I'm not sure how it was 14 and 16 that it was 14 and 16. So let's make it like that. And that scared the name. See you, Ianis. All right, Your name is here. The name Stary Lonnie. Save me. Okay, Once this is done, it's a select is one. Let's make it flex. No, it's centered a line so it will look good and awesome. Select this at six. That's just sitting on these from Doc and Water. For now, we will set it letter. Don't worry about it. So if you look it here if you see it's too right. Who big sell margins I heard in my designs What? This is hard to loop. And if you pull the margin from the image, it is 16 to select the image input the right margin. Those 16 but a And if you see, let this whole Sorry if it's like this whole walks with flags and see it is 24 from top. Let's make it 24. Okay, so this is how to look like or design. If you look at here, this is hard. Look, you just need to cooperate that box and based it inside this lighter also. So now you can just corporate tastiest like us. Right? So you have your slider. Really? Now solicitous later. And make it auto play from the settings Auto place lights after four seconds. Let's four seconds. Now let's preview this lighter. Let's see if it's working. It is working quite well, but let's deal. It is one from here. It's Kobe based days. Let's put it here. So that all looks good so that he will have a good loud here. But this is how it looks. Right? So this is how we can use flags, books again to create allowed, which looks cool for your website that makes session. We will. Okay. Is city and is there food? All right. So see you in the next one 25. 25 Website CTA and Footer: hi room, So indecision we will create thes city year and this food for website In the last session, we have created these testimonial section using the slider and in this one will appear days . So if hope you have your ref rock on one in thesis project is also one. So to create days What I'm thinking is let's just hope it is this first he'll section that we have designed earlier, right? Because it saved We just need to remove these than it will look same when we just need to change the image. So in order to do that, just like here in these one, let's see its creator section first section give it a name Section five all right. And create a new Devi's own for off rappel class condemned forever class. And this section gave it 100% from top on a big sell from top and 100 Bixel from bottom so that over contained stays It looks good. So in the zero section, let's copy this hero greed right and wasted under the's rappel. Okay, just abilities. We don't want that. Come here. Just go get a condemned in the court Copy the Monday. We can just change it. Okay, after copying it, Uh, let's see the spacing. It's study. So let's select is Harry. Let's give it toppy. 20. Loose change. It's hurting who had three. So it looks like this looks good. Share it, you sell. Good. Now I want to change his image. So let's change these image that we have you. Let's find that demand. They made you see you. So now we have that image. Also see, this is how it will look. Let's make these content off these great Let's get a combo class city left. Okay, let's make it in the center. So if you look, it is now the convince off. This left glass with left city is aligned with the center because we have used to create since I agreed. You can align your elements right so the white dome will look in the center. If you want, you can set its We'd let's say 500 tonight said that that's take click on these. Why does the name it said? It's makes with 500. Now this looks good. It looks like our design. So see in your website when you create certain things you shoot, Keep using them again and again. Don't great every items, right? Every time. No upset. So now we will create a photo. All right, so the city is really So now let's start getting off Photo off our website like these. So what I'm thinking is let's create a flags box with it. Flex were flex items with a 50% and inside the second flags books we can use It is great. Create a content like thes thes columns. Right? So let's great of flags box in your selector body and at a new section section here, going your elements settings said it as your food. All right? And they had a name here. Fudoh. Okay, the background color of this food is days. Okay, now look it. I have said it's 53 and from bottom it is also lets 85. So let's food for big three or let's say 50 from top braiding forties footer from properties 50 and from boredom making use Torti all right inside that foot off. Use a tale for over upper class at the apple class. Now create a great they say. How do you use nested paid so create a great I took a long grade by so doing this. Let's give it a name for okay inside that for degree in the 1st 1 V V and a local. So let's find a logo here. Look who is here now. In the 2nd 1 they will again use a great but these great let's remove these rules from here . It's not agreed. Everton Name May ST Read. Now you have three greats. Three columns in a great So the title off that 1st 1 is Let's used this deal and said that Do you use heading or x block? Okay, inside the text blocks. Or let's use the heading Where the backs Brox in text block. Let's said changes. See, this is what the style Select is about. Heading on its size is 2020 threes, slain heart and the phone where it is 500. Select his backs. Block Select The phone Family is over, though, for his firing drink. This war's I was 20 and 23. This is 20 the form says his drink tea and the line height was 23. Let's get a name it's about okay, Okay. After about giving a name. These we have links. So to give anything like that you do a cane inside that they'll give a lean text link. He was a text. Links like these findings CSS properties. It's a little fundraise is so let's select. It is older in the water because we have used this links on formed sizes. 16 on the line Height is 19. Let's say 16 19 and it's small world like these. Its radius fired rate. Let's use it to eight. Fine. Great. But this one I had he used the color. The RGB. This is the color they have used. What is colorful? Click here. This colors I If you based it here, it will set light. Okay, What's not working? Let's see. In the designed, the main color it is 35 1 So let's elect his color. He's one, but they have used a 72% best city on the color. What many days off? Mission going this gold area. The text from here Minutes eighties off Mission. Okay, so if you look at thes stop spacing from bottom with dwells, let's set spacing bottom 12. But this link Okay, let's select this block for these the long Let's make it flex. Make it more tickle. Okay, Saved. It's said its margin from bottom 12. Okay, okay for the for the title is 20. Select your tighter in my flow and leave a space off 20 from Wharton for the margin. This is how you can add these links Now the 2nd 1 is excuse selectees Do block Copy Pasty tries right in The 2nd 1 is useful links because for wings. But this is how on one is download for download. I do have the Burtons. Let me drink that Bottoms up image. You can use the link block here because we want toe book emissions Attack image Let's bring the mute 1st 1 that will play right and based this'll ing Look twice Just delete this links from here, OK? Just please His topics of margin from this link block That's a two picks up, right? You can get a name like let's store button. Okay, you can link this links. You can mend them as page links so all the things will be Beijing's right, So these are heading foot uh, headings. Okay, so these ideal for the headings if you make any. Jane, Did you change? He also so now just changed these icon toe. He's absolutely right. Gun. So this is how you can create your food? Er in their flu. All right, so I'm not adding all these information. What? This is how you can create photo. You can use greed and insect It greed you can use are not agreed to create a layout like thes. So when you start creating a website, you should have all these elements in your mind before you start loving. Write it. You should have the idea. What will I use? Like, what should I use to create a look like this right in my life? Look. So this was it, guys for these landing page. So we have successfully created our landing bays like me published these so you guys can see it. All right, so we have created a hero section. We have created this features on these This section also. Okay. I need to change the title off it. Don't worry. I will do this letter. All right. But I hope you have learned something from it. So in the next class, in the next session, we will start creating our blow. We already have our blow here. I think they have created while we were learning. Where? Flo Stance. We will create all these blocks. All right, So guys Syrian the next class. 26. 26 Symbols: either. So in the last video, we have finished our landing bridge. So in these with you, we will pay a bloke page. Not very women feature all the blog's from our CMS. Right? So in order to create this blueprint, you need to create a page here. Just click here and give me the name and the ask you. Please. Okay. Just great. I see why it's not create being. Let's see. Okay, it's you. It's Gator name Did all save it. Okay, The block page has been created. What we want here in this block, which, if you look at this block page so we have our head of and we health is 60. You and these photo we But we have already created all days I had, uh, city and photo in our landing page. Then invite flow. There is a concept called symbol. You can create a symbol off your head. Oh, all right. To create a symbol for your home page, if you could a symbol. And if I make any change here, it will affect toe every single where I have used this symbol header. Right. So to create a symbol, just click select your head or your neighbor from here. All right. And hit the right click and you can create a symbol from here. Or you can create a symbol from adding this element. And here you can get a symbol from here also. So it's created. Give it a name Hadow. Okay, it's been created, right? So the other thing we want dead Waas to see a year Let's get a single from here. Page 60 year. Okay. The city is also created The last one we want is photo. Okay, so now we have trees in bones that we can use anywhere in our website. So if I make change here, it will offer toe all off my symbols, right? For these names in bold, it will affect everywhere. So to use thes go to your block page. All right, well here open. You never get, though hit control e or Come on, be on type head. Oh, if you look at here, you will find this head us involved that you have created Oh, to use these you can goto air elements in the symbols. You will find your symbol least here if you drag his header from here and put it here. See, this is how it all. It's very simple to use. So we will add another toe. His pre city. The last one is food. But so we have our symbols here. So this is very simple but very effective drink that we can use in our website development process. Right? So and these one after these symbols, we will create this bloke page right after pretending bloke, we will air all these items. All right, so see you in the next one. 27. 27 Blog Page Using CMS: All right. So in this section or indecision, we will start creating of a blocked page. So since we have that, it is symbols from in our last video. So I have gone ahead and grated one more symbol for these section Daido. So we are going to use it, Our Lord. So that's why I get it a simple for it also So to create a layout like these night This is our future block All of four featured law will look like this on Dressed off the blocks will look like this, right? So to create this at a new section when you're again Waas, it should be a bore. Your BCD give you the name blow section. Okay, food that spacing. Let's say here it is again 1 30 Makes use one turkey. Okay, inside that here If you look it here he's one is 50. So let's put 50 listening Put 15 on Just use this block section and said that he acted deal and give it the class name Rappel right foot inside that No control e And get that simple that I have created section Daito, you can get symbol. This is a task for you to call it a symbol, right? To create this symbol yourself. So I will. Now I will just unlinked this symbol because I want to change the tax. Here. It's block night school here and school jails. Corporate. Is that text title off Deasy's block? Okay, this looks good. So far is everything is good. Now let's bring these categories for our block post for all menus. That list is all we will show all the block posed with every categories intake. Click this finance. We will called a particular template A category temper to show the finance related post only. Right. Great. So now you have good day. So less great A new section diet Can you name get section on the set. I like this inside that Hughes, He's the reason Give you the name Rappel Okay and pulled 20. Sorry. 50 flammable and 50 from below. Creating you can do that Or what we can do is nights cute. He's 1 50 from off. Okay, After doing these, you can boot 54 below so it will look good in that Use another. Do you have these deal here, Give the name, get all get links right and make it center. So all the country will be in the center is all day. Let's use these. Let's say if the's is our links, let's get a link here. Let's say sorry for that. Let's see if this link get a leave from here, not laying block. Sorry, Link. I want to use a link. Nextlink. Nextlink. Um okay, sorry. He's excelling, not tax block. That's protects Link. You guys here your name is all, um All right. Right then. Other one. Our finance. And, well, he's one. Use good finance and world is thes one. Let's pull some margins. Let's 25 from this site. The left 25 from right. Let's just sitting with these for now. Let's give it hit here. All right, let's say thes is as finance this color. Hi. Find bombs. I think get Get the color off these you get that's name not married because what? We re dough create off collection list here to get all of our categories from the late ofhis right from CME is currently we have two categories Theis categories. Wealth and finance Toe. Get your data vase from it and finance air here off collection list collection least Okay. Okay. That collection least select the date of is you want that? We want to get every okay inside that alerts Curtis inside the collection. I don't It's these. It's sitting with this last one. We don't want that. This is what we want here. Let's make it two column or if you gone, that's fine. We don't want to make it to call it like to be Hyundai for Vit. Let's change the name of this getting very let's decks and the name of that God Avery Wealth and finance. If I click on the category, it should take me to the collection page off. Got a very page, right? Whatever the current category, I want to go to hell. Yes, right now what it's doing, It's getting in the order. What I want in the orders to knew this one was a rep for So what I will do. I will go here in this filter section with a sort order section. I will use the short order if you saw your get the very created on or less to new. Let's see how it looks. Okay, This is how it will look Right. So this is how you can call this gator that is here on this page. But let's remove these. We don't want it now because they wanted this look and feel. That's why I called it. Now, what we can do is we can make all this walk flex right in the center. Everything is in the center. Let's make it flats as well that everything will be in the center. Okay, way Trade Red white smoke. Okay. I'm sorry. I'm sorry. Not Let's not like that. Flags. Let's make these a list flags. What are the items out there? It will be flexed. Right? OK, good. Let's san justified on during the Santo. So this is how you can justify your content in the center. If I click this category, it will take me to that 40 below page That getting ready, Right? So what if I hope in accidents Lane's name if I hover and change its color toe the blue That said this. Okay, see how it looks now? Okay, let me do jacket again. Okay. Let me do that now, Okay. It's true now from that we should work. It does. No, you toe individually forties. Let's set the Howard Carlo in these. Let's make it these flu. If I How bout if I hope it will look fruit. Okay, so this is done. So now let's on. So this is the future. Block off our bloods. Right? So I have the image Futural image and the got a very name heading up the block post the block was named and a content or summary text. Right? So now I will do is I Repeat a note of section here? Let's get another section. It should be a full here. Give you the name Teacher Blawg. Okay. Wanted ski one, do you? But a new TV's on for over rebel class. You can do it like this. It's my than once it's done. Okay, now what you need you need a box, right? Let's greater box like that inside that I may I had a collection list. Okay, let's get all the blocks from it. Okay, Points a little collection. Least you can change in the elements settings. I won't only one block because I want to show only one feature block. Okay for selectees. Limit item. American limit. How many box you want to show for facial. Right? Um I want only one. Okay, this is it. I want, want, want and I want to short head blow. It has a feature on Like, this is a future bloc. So let's do this now. In those filter led to the filter. Let's see, Not name no name, No Remember feature. Okay, If his own, it will only show Let's reach block. Health is well, let's see in the later please. If you go in the healthiest held health deserve he's this bloke has feature on he asked This frog has a future on here for that. So it's fitting that great. Since you're here, let's clean and add link block right this link block Oh, let's enter to because we will use the link again So we can you We can't use link in the link block. So let's use add a deal here, do you Okay? Picture love are Let's a block walks okay today its how you create a block box. So let's act is shadows and the colors The border it is that and the bedroom color is white border. 80 years is eight, okay, and the painting is 50 from all sides. This is 50 from all the sights now I want he's I don't the bulk shadow I want Let's make it see Let's come here and let its book Shero Magic zero Let's make it, Dan Top a city ban on. See? It's 20 and four. We have used this earlier, but let's still used Is now on 20. Look at this. This is how it would look right? So inside that we have agreed. But in that great, we will have image and the attacks like this and agreed. You want one pro grade? Here. Let's that image. Let me just your block forced. Let's face the image from here. Let's see Tom Bellamy. They want only terminal image. Okay, that's it. Here. Create a new deal inside that what we will do? We will use the tax link. Okay. Again, we will use our tax link for our block name. Okay? Oh, yeah. We can use the text in what we can use the link block. Let's use the lingua because we can use the heading inside that we don't need No style, our headings. Okay, this is it. And somebody next. Let's used better graph You Okay, So once all this is done, let's select is and let's set these not collection page of the category predates current. Get a very piece. The text name is the category name. All right. And get a color like these The he was this element settings. We can use the colors. We can get the background image. We can get the better of color on the tax color. I want a text color, so I will use thes heels. Carla. Right. So this is how you can use the colors. See, the color is blue. All right? For the good of very color. Great. So now nights bring these on the next line. Before that, we really use flax box here. Okay. Toe use flags box. Let's make it flags. Make it vertical. Okay. Yes. This is what we want it. So here insect is linked. Block. I want to use a heading. It's a h three words for at a heading inside a ticking clock at three. Okay, catch for this things could metre text Name your gold name right. When a user click on this link blow, I won't them to go and read the full blow post. That's remembering these selecting this collection beach and the current block forced for this better enough nights. Get the summary for the post. Some reading. We have a great So this is what we want for a future post. Let's see the spacing for these headings. It is eight from top on 16 from bottom. Select your heading. Turning to heading or this link block. Let's say eight from top on 16 from bottom. Okay, great. This is good, but I want my tax to be center in my image. Right? My image. Let's select your Steve. Look here inside your great and make it center. See, this is hardly Fox. Do you feel let's make this image people like if you like. You see, in the Dave the design, it's a click here. Let's make it for the one to fire. That is fine. That looks good. Toe me. So this is how you can create a feature bloke post in my flu. If I click here, it will take me toe my bloke. But if I hold this laying block, I want to change Carla something like these. Think about this blue, which is that new and see if it's working or not. Okay, It's not looking now what? We can do that later. Okay, Great. Since you have these not safe I click here on this world. It will take me with this category. Peace. Since we don't have anything here to show it, don't show anything. So let's go back toe blow page. No, we help get Avery's linked here or block Section title is laying the now we want block was all the block post. Except he's one. Right? So he what we will do leaving use a collection. Lived a new section before reused collection list again a new section Man Meat Oh, blow Opposed Right inside Ted Joe's use. But do you look for our grapple? Use it for report. Okay, this 50 What? I'm not sure. How much is it? It is Study turkey from dog Moges in forties. It is already doing here, so we're not using that. Okay, that is done, Dr Big. So no, Let's bring these in tow play, so no, just bring a collection list here. Uh, let's use the collection least okay, This is a collection least we want our block post All of our blood post. Okay, Now go here and copy that box. We want only glove box. So what we were doing collection leaves. We've seen he's I control E, and you may meet block box. Okay, so all the blocks will look to seem like this. Yes. Now, since we have ah, broke all the blocks here, just click on this collection least, right? Let's make it great. This is great. It's great. Now we want Tohti no longer and 30 rogue. Okay, so it's dead. So if you look at what we have only two rules here. But it is what are generating that through the third order to be required, right? It is auto generating that. So now all you need to do is bring this image purse plea. So in that box, uh, is that image? Let's say this image. Okay, I got the same age. Come in. Okay. All the time. That's all here. But here. We don't need right now to 50 51 50 Breeding. Let's run with that bloke. Well, right on. They moved it. Zero Seattle. See? You know, I honestly zero and let's see how much is it from the bottom. We can set it later, so don't worry. Let's make it zero for now. Okay, All off our blocks are here, but we don't want to show Our health is wealth one here. So we will dream. Weighed, you know, in a big part. Let's add a new deal right after these image inside. No details. Right inside that if you look it, I have for 20 from Doc Turkey from water and 50 from left and right. So do that 30 from Doc Take from water and 50 from left and right. Right, So great. So once you have these let's, uh please don't And these and this Let's do that if you look at here all the same so we can copy these if you want Let's copies and see if it works. Great. It is walking. Right? So now just go be these heading. Just based it here. And he's very tough. Just copy paste it here. But this is how it Well, look your block post, right. So, to the mix I think we are going to do is select our disk election. We don't want to show off future blow in these blocks, right So let's hide that filter. Let's a future a off. It will show only those block posed with not how that feature. Right. So this is walking toe fine. If you can, please difficult. Here it will take us toe look. Forced id Finance. Finance. Well, the categories also walking. Right. So in the next video, we will create a detailed blocked page. If I click here for user clicks on a blow, it will open a little broke page like this where we will show the auto name and the date off the block creation and these subscriber for All right, so I see you in the next one. 28. 28 Single Blog Page Using CMS: either. So in the last session, in the last video, we have created off a blocked page. And in this video we will create this plot details page so that your reader, your readers or your users can read this bloke right? So nights steak toe that page, we can do that. You can go. Can you copy these? That's not copy that. Let's get thisted page from scratch. So if you open this page panel in my flow, if you scroll down, then you'll see this bloke was template. It's open that look here what we need. We need handouts on how we can help user. Can you symbol that we helped create it? No. The next one. Ease foot door and the city. Right, Let's use the city speech. City food. That's foot today. So let's add a new section here. It's gonna lead as seen Block. Okay, inside that. Let's add a two block off these rebel glass and is very close to that. Do block on. Let's make it won t from Bob. Okay, that's looking good. No, what we have We have a category here, so let's use our category here. So let's end these do look for block single No details. We can use a tax on the tax link. That's the text link is Look at a very let's maybe block. See if you do you have any official? No, no, we don't have Anybody can look at it from our previous blocked page, but we will look at it after. Let's use this How toe? No name. Let's heading excited as edge to let me see. Let me can use Yes, we can use edge to it is it should be 64 years. It is 64 it is attached to. After that we have a flags marks Veit has or we can use. Let's a tax block inside of flags conditional for these alternate in the date creation off our block. So let's do here inside They do let attacks block. I had namely by I sure Children just selectees make it is a link. No copy. Days again we will link. You have just Thank you. Just make it collect these Then we have a date. It's coffee. And Christie, this will be the date so you can click here, Get tax and select field created on, right? Not get agree or Post is great. It on it will tell you the date my during the semester 1 2020 And these should not be a link. So let's use a different next block and make you looks like he's okay. Make this deal that every help that gun market flags. Okay, that looks good. Now let's abilities and see the spacing, the healthy one. Great. Then from these and then from this side. So let's give a margin, Ben from left and then from right. Okay, so now the color off that is before. So if it's black, let's say this is black. Let's use these as black. Okay? You know, get 54. This was before. What's the name of that explode toe? You can copy teas and their state on these. Thanks. No. So this is how you can use flex walls everywhere. So let's find a category name. It's saying the category creativity. PH. Let's get the facts from the category. Same is that's its name. Its name is finance. Okay, let's also said the color text color here on getting very color. Thanks. Reddish. Okay. Okay. Now, So you have these single log details now make everything in center line. Okay, So it's not everything going because we hartis as a flag spokes like center in the line. Okay, so everything is Cento selectees and select the pigs as your poster name. Right. This is your postman. Now see the it's banned margin on then from a bowl. So select your heading and put margin off 10 from dog on time from bottom. All right, so this is how again set cuisines. So blow Griddle is looking good now. So now the next thing we have is ah, blow inmate. The men blogging image. So Oh, in these Rapallo they can image He, uh All right, on used these image as your men image wanted. Tom Nell Image. All right, so these looks like of a small image. Here, let me see. Is it a main image of the common image thumbnail image? Okay, okay. I released. Submitted these images. Let me see you t last one. The images I uploaded here is the bloggermann to terminal and that so you can replace it. I replace it. Toe blow thumbnail. Wrong man, right? No man or long term male cancer. See visionaries. It waas thes Richard Rain image. It should be mainly made. Okay like that. And they should be a lot. Tom nearly made this one time mill image. When it's uploaded, you can save it. You can see it and see here. Let's change toe Rain delayed. Okay. It's looking good. Right? So see the ratings 30 that D, um, make it touch deep from dogs. Okay, so you are images here? Uh, after that, we have our main content off low post. So what I will do is here. I have. If you look a veto is 9 60 It's not. They converted. It were using its A quite small law in the Great because it looks cool in your bloke. Let's a new deal. Gold still Mole Rapallo. And give it a max with off 9 60 Okay. And make it center so inside that they can use our block. Let's see if we can use here 40. So Ok, so to get all the details off your bra post haste, it'll post body you live to use rich tax block. If you control e and right, reach next, block its decks. This is where you can lower all your block detail. So here get text, said the post body. So this is the contented I have at the moment in my post. So this is how you can get all the content off your post right now. At the end. We have the subscribe form for here. All right, so in order to get that or make that, I have used a different plea, let's let's unlinked this here. Okay, now let's change the name. Let's end this box first. This is the same book that we use everywhere, right? So let's it is in these on this great. It is great. Let's make this grade, uh, eight for the radius. If you go into code, it will tell you a pixel off your border areas so you can do that here can give upon book class subscribe form, right? Not from its form. So scrape form, make it a big self, give you the name subscribe form and said its border radius toe pixel. After doing that, we have to pull it off, trading off key from everywhere left. So from everywhere, let's do that braiding off for 50 from everywhere. Okay, let's add the box. Show the bulk sort of is 20 pixels, right? Don ordering deficit 01 That means the pants off Alfa. Let's use the box shadow. Let's make blood 20. Let's make this distance for Let's set these 10. Okay, this is what we want It. Good. Now change these one. Also, let's say the zone is 36. Let's see its statistics. No legs change its rich for all right. So let's get a name. It's a let's say so. Calm. Right. Changing to which four. Okay, sees it Is that for now, subscribe to our newsletter. The tapes scope it subscribe to a newsletter. Toe handy tips my kids walking. So now just remove this button from here. So, uh, had one is ready now. One thing at a port on here. What? Don? Outside off that flags. All right, give the last name, but on. Okay, great. So now selectees and see the margins from Wharton. There's specs. Feel to this border is 16. Select your text will accept that we have used a little, but let's give it a combo name. So describe friend and you 16 from water. Okay. And then the text to subscribe. Now subscribe. Now I'm This is how you can make you on such great form here. All right, so it's walking now. I want you to create this related articles. Hi. So let's create days. So once the block is done, when we asked for subscription, let's create a new section. Next, create a new section, uh, and dictate articles. Okay, this one, our before their court blocked page, we will copy. It is blocks that we have used earlier, Right? So, in order to copy them, what we will do is just copy teas on added here, let's see if you can based deep here. I'm sure they along. I love you too based, But let's go here at a D u New block and said It's toe rapper inside that for a poor let's rest them. See, this is how you can just Kobe pressed e o your items okay in this block Andi, that this block, let's just removed later said the limits is only two limits is only two. I said that the filter with cheese the bloke post is note the current polls id so it won't show the current one. What? This is how you can add the blue post in my flow. What once it is done, I want you to go again in this block page, right? So we can just show all the block blocks, erratic toe that particular dignity. So let's copy hes lock section that's going to your activities here. You can copy pre state for now, the village that other things off Thirties Coop investing thing. Let's just copy paste all these locks. Let's just go based. Okay, lets go came back here He's one. Select is all blocks on and look for your getting these template. Sometimes their flu rocks. Ah ha! So these are all the block post. Let's select some Genji's on the filter. Sure, the category The bloke category future is off on the belonged to the current category, right? So here what we can do, we can say change. It takes two. Get a very name the block and he's one should be only financing that the filter. It's get the goodie. It's the name, not dead men you want The deputy equals current category, right? So it will only show financier it'd block post. So this is how you can copy paste this blog's and great. Okay, very beach. So let's bring that not heading. We want heard up. So let's at his header. Now let's add a CT here that we have used our here and food up three. So if you look it here, if I click on days, the link is not safe, right? Right now, if I change link here, it will affect everywhere lesser how it works or about us or the blow. Let's say Klytus, it will take me to that bloke page. I want perspective, the page and reach base. I want no going to the block peace If I click on this logo that you take me to my home page off my website, it's all a bit, uh, so if I'd call toe any piece, it's a blocked page. Five days. If I do days, it will take me toe my homepage. So this is the use off symbols in the flow. You can use it everywhere. For each lead, support the Parton's. You can use symbols right? If you are building of upset and very thing that these elements will relate multiple off time so that you can make it a symbol. So this was it. So this is how you can create a bloke post in where? Flo, Right? A little blow post in Where? Flo. So you also create these layouts and play video Tate and learn more about where flow than you'll be able to create websites more and more flawlessly. So So the over website is really now. In the next session, we will make our website responsive for the tablet and for this Mobil's, then we are quite near toe. And of course, with move on learnings, then you'll bay. You will become a great airflow developer after practicing and creating websites. Right, So see you in the next one. 29. 29 Website Responisve: Hi there. So in decision, we will create a website Responsive right. A tablet response See And more responsive using workflow. So now you have your website Really hear your next off wasn Israeli in a few or your client is satisfied with days. Then you should ask him to move ahead with this This Ponzi one bright So if only school now What you do is you want to make it responsible. Tablet chairs Click on this tablet and this view port here at the top part in the center See the tablet? I just hate that tablet. Now you will see your website like these. Okay, so now what we will do is we will select a head Oh okay. You know a header like a double Because we have military symbol So you fifteens year It will change everywhere in our website Right? So click here double click and select Even select is your logo you conceal it is this menu but right so now we want to change in venue button. So if you want to open your menu right, drop down Just click on this element setting By selecting this menu bottom you can click here Open menu. But you can add a link. Well, you can just danger menu type toe a right and left right that we have seen these in open usuarios So I'm not covering that here. So I want my menu. Will I look like this, right? I don't want to change it. So what? I want to change And Virginia the menu. When When you is praised, the button is clicked is many What turned this hamburger? I can change its background color. Let's change it If you come here in the background this background If you selected you can change it. White Oh, your game Jealous? Give it some time. Changing toe, right, Right to the right. Look schooled I don't want any of the color. No. Once this is done, this may new one Now change These may new If you look at you bottom, you will see in there We knew Click on the mailman. You or you can select it from here. Also, click on that new menu and change its background color. Let's say he's one. Yeah, this one looks good to me. All you can change it to white also right? But what is quite not looking good. And let's change its He's one toe. He's also because it looks awesome, right? It's like this is coming out from here. Okay, good. So now you menus looking good. You have your links here Now, if whatever you change, you make you it won't affect to your next stop because you are making changes in the tablet more. This is the best functionality or the future off air flow. If you make sees in any view port, let's sell mobile corporate right. It will affect to the mobile only nor the bigger side. Not more than these. 478 pixels. Right? So this is how your menu looks now It's OK now, if you want to make it center line, these links just click here nibbling center So all the Netherlands will be in the center now. Great. So this is your futon from decides it Want off here. But this is how your manual looks like, right? Okay, so if you want to keep it center, keep it center. If you want it clear to land, you can keep it left alone. But I will make it center because we don't need to change in mobile and landscape port landscape mobile, right? So that it stays same. Whatever the change you make here in this tablet more it will affect toe all your mobile sizes. Just keep this in mind if you make changing mobile, it won't affect to your tablet, but a few maintains in tablet It will affect the CSS style ville Effect all these sizes, right? Ok, good. So you menus ready? Great human use ready now. So let's see Review how it looks. This is how it will look. Look it here. Let's change it. When? When it's up on, I want to change its color Not now. Let's make it right for now. Ran You know my new result one right Like this Select your menu. Now when menu is open, you have to see these open. Then you need to change its color but this one and change its he's one. He's one engine this color for your hamburger toe black or lets a blue Okay, let's keep it. Let's let's make it blue so that it stays with our style. Okay, so this is how you reach for my news now? Facilities in changed the icon Hamburger I concolor toe blue dome 18 feet or state. Now, if you look at this in a privy more for ever, it wasn't. It will look like this, right? No. What if I going mobile size and I looked for it now it looks awesome. See, you don't need to change anything if you make it obtains in this tablet was on. You don't need to make a change here, but if you go in the landscape, look awesome. Great. So our menu is really so we don't need toe touch here because were you symbol here? We made this symbol, Heller, so it will affect all the places. Let's if I go to the block page. And if I change the CDC, these I can hear if I open days look same, right? It's taking the current patriots. Jenny, it's color toe blue. Great. So my new is walking now. Let's from here. No. Great. So let's change our hero section. This is no looking that cool. So what will I do is I will change the size off these. So let's say select is great before usually great selective rep. Oh, try to insulated from here or you can selected from here. That's a little rapper. And give its makes with it. Do 90. Full ascent. Look at this. So all the rapper in this tablet wasn't Wilhelm exits off 90%. Okay, good. No, the only thing you need to do is you can change it phones to, let's say 48 48 let's put it 50 Dan off your well. Okay, good. This is looking good. Now let's change thes railings. Let's make it 100. Let's get 60. Because this one is looking ruled. Now, I don't think meaning to make a change here for number. If you go scroll down for thes thes one is also looking good. You can make it, Kate one a long way. But let's keep it s It is because this is looking good. Use a good feature section. This is also looking good. No, select your these menu flex and make all the lemons in the center. The items will be in the center. Great. So this is also looking good. I don't think we need to make any change here now. This'll either is also looking good. The's one is also looking good. We can change the phone size off the 36 on 46. Okay, It's also looking good. Now the main is also looking at The photo is also looking good. So all the things are looking good here in the tablet one. Now let's goto our landscape One uh this one is also looking good to see this is the especially here. You can see off columns. It will tinge automatically. Right? So if you see that this box let's put 20 from boredom. This is how it will look at it. All right. So you don't know anything here. But we can change these if you want. Let's change these. What we can do, we can pull. We can make it work. Tickle. Let's make it work to go. Okay. There is nothing good. Now it's in landscape, so it will also affect the tablet one, right? So if you look it here on CNN six and down. So no, it went off the day Britain, because we are in the plans get more. So what do you need to do now? Is selective flex when I don't Here, go in these flex along. Now let's change it's read here. 200 was no yes and it wasn't, uh, 90% because it is flexed, right. It will affect the other one. Also, he's one. Now let's change is marching to zero so it looks good. Same goes to things. Also, let's not get zero. So it looks cool. Weekly updates and all. Now let's take this image. Where do you want to put this image? So what we can do? Let's see if you can do anything here. Let's see the limit in order. Let's say a limit order. Let's put this image or the U. K. This is the best feature of flags Walks and in their fluids were easy. I want this image to beat of first, right, So let's make it order first. See, Damit is here right then all other are looking good. Look a tease. So if I make it last, it will be the last I wanted at first. So I So this is how you can make websites responsive and where floor very easily, but it won't get much off the time, but it's looking good. Let's make thes fits for those with is also 90. Okay, the majors wants looking gold. Go on your landscape one. Let's put some margins from wartime Blitz of 40. So this is your image. You're contained. Now he's one do thing. Yes. I think we should make it 100% of slights. Let's make it 100. Okay. It's looking good to me all. Let's make this like tools. 100. Okay, so all are looking good. All this light we have in good, right? Okay. This was a slider in the landscape. More. Now let's look at this. How we can change this. Okay, so what I'm thinking is I want to put this image here on top and below that image. I want to put this country. So can you do that in the flow? Yes. Let's select your And did you greed? Let's at a new rule here. Right? And alleged abilities. 1st 1 here. So what will it it will do? It will say the image and the content we heard on the in one I do in one column, right. This is what we want it. Okay, good. So now if you ended your great from here again and see if you can do anything we want it's column on the role. You can define it however you want. This is done. But what if you want to make it like this just like we did here in the flags. So let's do it. Select your great, make it flags here. OK, we look the same. Make it make it like this article. Plaques Direction should be vertical and inside that selective for right content and said it's orderto first. Okay, good. So now you have the layout that we wanted at the image should be on call on the contract A the bottom off or the below that image. Right? So this is how you can use flags box if you have used. This is great, and now you want to change it and want to use I Hope Flags Box. You can do that. So here, if you look at these, um, this is looking you can say good, but let's let's make it in a one column so that it looks nicer that we don't need to make much in this in our mobile wars on Right. So let's make let's at a neuro. Let's still it. He's one so that all the content had come to the new one. Look at these. This is the power off. Using census greed in workflow. Let me pull some spacing, Margie. Oh, my God. This is looking awesome. Right? Great. So now all these is looking good. Now, if you want to change these 100 100 to 60 we can do that. Let's do that so that it looks good. Let's make 60 as well. Let's change. He's one also 60 60. He's one too. 60 60? No, this one 60. I'm 60. Great. So our landing raises looking good. All right, this is what we wanted. Now if you come here Tothis Mobile was on. Let's change its form size off our heading toe 26. Let's make it 46. That looks good. Okay, All is looking good. Let's change these toe, not touching toe over 24. You can so that we can make it 32 and 42 Notes dough that That's Gene. It's so these are looking good, right? So we don't need to make anything because we already did in landscape. So here a job becomes easier. It started toe all the sex and little retarded because it make change. Yeah, not think to change here. Nothing to change here. This is looking good, But if you want, you can make this change. Toe 26 is old. 46 months to change. What if you make it to do? And 42? This is also looking good. If he's select is and like 20 it looks like a battle. Okay, so now what is left? This is looking good. I don't I don't think we need to change this, but it's looking good. If you want toe, you can just select is great. And it that we had two more. Rosie, I'm sorry. I'm sorry. Just took control Z. I have one more rule here and communities it is All will be in the new. All will be in the one call. Right? So I will. Responsive is done for mobile for the lower deck. Stock wasn't off over lending beach. My response is done for phase one. Now let's go. Are blocked page and see what we can do here. Let's 30. The pamphlet change this block toe around 60. Now this is looking good. I don't think it requires and change what? We can change these to. Let's say you can change these 2 20 in that 20. Okay, it's coming out quite well. That is looking good. No need to change. Hear anything here Visitors to change these. We can do that by editing our greed and adding one more. Grow there and make it like these. Make these If you're already here, make one. It looks cool. So the future. Look what is also looking good. Let's change these and make it 20 from here and drinking from here it looks quote Okay. This one is looking good here also. Oh, these are also looking good to me. But we can do what you can do if you want to make it one column just toe they won't. He's one. Just a month is one. It will automatically take space. You don't do anything all out there, right? See a low post. They are looking awesome in landscape more. This image is also looking good because it's ah symbol that we have used in our Dexter wasn't off the landing beach, so it's also looking good on. If you look at this man footer, this is also works at the well. You need to maintain the few symbols it will affect everywhere. Now let's look at these Mobile One for a block. This is looking good to me. Let's change it, toe. Ben, it is looking Good morning to change anything. Here, Let's make it 40 are This one is also looking good looking good. Exchange the full toe. 22. 42 right. Oh, we can make it 28 today. Oh, this is gonna got quite a while. Okay? These onis 28 let's get the symptom heading. Selling like he's one. Give it heading. Let's schools hold heading seven. All will be heading soon. But so that is also looking good. Always looking good for Blawg in mobile. So now let's go to the next off one. You see, they're looking different, right? So now let's go to our bloke post template. How it looks look like these. If you look at things, this is how it will look like You must help big image here, right? Another local. Let's change this. Arrange to he's one and seeing a great looking. This one is looking awesome. Your blow busier. Always here. We don't need to change anything here because this is all looking good. This is looking good. This one is also fine for me for not on this one is also would no just change gays. Let's make it 60. Okay? And it's come here. C r. This one is looking good. Holies done right because we're using the same class and the same breeds that we have defined in our block prison. That's what we have used here. So it will affect everywhere. If you're the same class given toe butter element it will affect the sea. Is is that you may change in the parent class Change these daunting issued changed the singer 26. Okay. 0 48 I would say for date is fine. Yes, 48 let's make it repaired. This is looking good to me Now let's see Mobile One, Let's make it 26 now 22 okay and 42 all days is looking buddy so over website is really right over website is ready do launch. But before launch a few hour off s you we need to change is your settings in a war website talent? Then we can launch your web site so that Google crowds of our website. Right? And we get moved views of the traffic on all upside like that. So this is how you create responsive website in workflow. So I hope you have learned something from this glass organization. If your iniquity please let me know, I would love to help you out with your queries and guys seeing the next one where we will change the S u settings and how to address you in where? Flo. Right? So see you in the next one. I hope you learned something from this station or this glass. In the next one, we will create on any mission for our website that will put a small, small animation slight animations in our website. See you in the next one. 30. 30 Add Animations to Our Website: Hi there. So in the last session, we have made our website responsive for tablet landscape and mobile was on right. So now we're ready to launch our website. But before we launch you want to make a website? What? We want to add some any missions toe website so that it looks nice and your users likes your website, right? Soto at any mention in your website what you need to do, just select. Let's say if I want any mission on days I want Toe said. Any measure on this left content it comes or slide from the lab site and his image slide from the hi excite, right? So select your left contained of the content here, Whatever you element you want to my enemy. Just select these interactions and I want on element trigger. That's a when schooling to view the sentiment, right school interview. I want my element to slide using this building figure off airflow. I want to my slight to come from the lab side. See, this is hard, but now let's take this image, this light campaign. I want to slide it from the right circle. Let's use the same ones calling view Straily sliding from right site. My So if you look at these, you know, preview more, you can see if it's looking on on. Let's do that. See, this is how it will look so great. So now that was Ah, it was Ah! Hello section now let's eighties section titles Also Sex entitled We Have It's You Come Like money That's going to view. I want to slight them from from boredom. Okay, Just like them from autumn and all the section titles. What I will do I will trigger sitting in the figure skating. I will say it is a class. So all the section title that has the same last name SEC title will affect the same effect . Right? Let's see these, my great. Now let's select this box. And them also, uh, slide from bottom and emissions. Call interview this box. What I want to do, I will select a slide from bottom. Okay, this one Good that these So let the other walks What I will do this time I will a delay tothis one so that they look like a stagger when the sliding from water from water. I want to add a Let's appoint three off. Really? All right. Great. Now let's elect these one. And at the same slide any mission from bottom two point 0.6? Let's say how it looks. Okay, so now if you look at your animations so far, this is looking good. This is looking good that this one is looking good. If you look at this, if it's cool, this is how it will look. David also slyly, Let's and toe six. I want to make a deal. He's on six. What this one must be. It's in mind it's at me. So this is how it looks good, right? This offset. You can also use the upset. So since how If you reach here, then it will start. This is work tops at me. But this animation is done. Now let's make it toe his one also to school interview, school interview. I want to make it slide from left. It's like this. I want to make it slide. Fly from right on. I want toast like this image scoring of you. I want to slide eight from bottom. You can use these many properties, but I will do slide because it looks gold If you look at these, say this is hard to look. Look at this. Right on. Let's make animation on these. Just like our hero section two the same year to this life content What we can do is we can just make our he'll section I love convince select Left indent Selected slight and make it class so we don't need to create every time I tried Country selective like the class. Okay, good. So now if they come here, we haven't added anything here, but it'll build off it Still off it? Look at this. Right. So this is how you can use class property in the interaction step to create an animation for your A website. So that is turned with the animation. This is coming. This is also coming. This is coming. This is coming, right? This is looking good. Now let's come toe second page. Great. What we want to do is let's add animation on this block walks selectees, right? It is going to view. Let's light this alleged growth these cities, let's use the crew one on if we Jews, These man, uh, no walks the walks like these on Medicaid while scrolling in view, we can use that. Why I was calling in view became on school. We want to play a school animation. It's a at an animation here. Mm, it's a look. Page, score and emission. Just give it a name, right at zero. Let's make it, uh, transparency. It's zero. Okay, what The 50%? Let's say like these when it is 100. Let's make it 100. But so let's see how it looks. That's talking thes. This is how between while your school inflates jeans, it'll create Hey, feats, it'll that's monkey ceiling D 55. Let's say if you look school still, that's not good enough yet. Let's make it 80 right? And we helped just toe main. They are a little bit like not looking good, But here, taking a look. What's if if there school when their schooling view while schooling the opposite? These changes. Okay, so we helped edit our animation. Now what I want to do, I want to add a page load animation that we have learned while we were learning the basics off flu. So I already Aditi's page loading any mission give file orgy file here. You will find this in the resources section, and I want to add a do broke here. It's a do block. Okay, give it a name. The Lord. Okay. Give its high tow. 100% view port height or gates. And it wasn't or what you can do. Just tell it it. Okay. Now, what I want to do is, let's say, let's use the position position toe fixed on on top. It will be on double everything. All right, on, Let's make it seem next toe. 555 Now let's set. It's bigger on color toe, black looking. Let's genders index to something else. Because why? This menu is okay. Let's put it on top. Okay. Here, dog all. Let's make it absolute. I guess it's not fixing. You can make it absolute, uh, to see the video now? Yeah. Further up global and always looking find. Then why this one is not work. King recall days. All right. Said he's now let's toe black light of 10,000. You can use it. 10,000. Okay. See you on top. You have to use the maximum number here, so I have used 1000 here. So it is here. I want to make No. Absolutely. It's my gate fixed here, and let's make it flags. Okay. Horizontal is entitled. And vertical center. Let's add any major here. Okay? Now, I want to add this gift for all I have here, so it looks like these which is loading when or if it is loading. We're going to show these animations right now. Let's sleep on it and change it. Hi. This 100. Let's make it 100. This is looking bored. So no, just go Here in this animation panel went on the page trigger when my periods loads. All right, I want to say it eight while raised lower. Finishing right. I want to keep it until my patient load while it finishes. Loading man. Page finishes loading. I want these before that. When paid. Starts loading. I want to say he's one. Let's say three lower. Okay. When paid, starts loading. I want to show these. So let's say that I don't want to move anywhere. Sorry. Initially noted initially, there. Relax. He's zero initially. It will be there when it starts loading. Okay, wait. This one is done. Lord, When Rachel or finishing, I want to Muti's on the right. I want to move days so that it goes out off our next door. So let's do this. Let's what you're looking this animation place, what we did. Now let's sit it. So let's set the initial will use that thes. Let's make it. Let's make it minus 100 person C. It's gone, right? So let's make it is out. Let's make it three. Let's be with that is how it close. Let's make it six. Let me. It's mostly right. It's totally up to you. What I will said it does. Three. Now let's say for animation works fine. I know it is loading. I want they see it's going well. If I say it again, see, this is having so let's make it as a symbol also so that we can use it everywhere. So now let's see he's one. Create a symbol. Get the name. Let's a three loader. OK, it's done. Now what you can do is it's done. Now go here to these. Look, Paige, let's put that pretty in order here. They put it on the talk, right? No. Template Beach also put that here. Sorry, it was freeloader. Pretty Notre. Sit here. So whenever you feel here? It works the same V right? So cool. So this is how you can air animation in flow. But this freeloader is image goes, Let's see few cities. All right, let's go here in a home page since we had these This is how it looks when you're bridge looks right. So this is how you can create a pre law order If you go toe blockades you to set it. Now we're on this different page. That's why it's not working. What? What I will do? I will come here. This home page I will click this page loader. I will open these. I will still I will change it. Toe my older class. Right click. Here it is element certain elements select. I started my class. Wherever I have this glass it will affect the same way If you make it days. Subject is class. All right. All is looking good if I'm here If I go to my let's say if you have genuine law Marlys on the block page if you're there, should walk. If it doesn't love to create a new, you just have to link it. Right? So let's say on links in war. He's one. If you're here, create here. Page load. When first start an animation selectees on patient finishes I want this. You could walk here, I think. Right. So here on here, you just heard. Unlike you. Symbol now at the beach Trigger, Please, Lord Select. He's on here, silly. He's It's walking. Right? So this is how you create this kind off animations in my floor, right? So in the next plus, since we have done everything, here's in the next class reveal, start making a CEO settings in A for project so that people can find us on Google or being or vertebra the search engines out there. Right the world. So see you in the next one. 31. 31 SEO in Webflow: All right, so in the last video, we have Eric Animation Toe website and in these will you We are very closer to launch our website right before we launch about website we need to set up or s u it's such engine optimization so that you use certain keywords when people such poor few things on Google When the type let's say money saving. So if you use thes givers in U. S, you tend you website my drank off in Google or in being to do that for s you. Let's say if you click on this page, invite flow in the spade. You have all this pages you get in, ref low Now what you need to do to set up your S u is just when you hold on any page name here, you just need to click on this setting. I can't edit settings when you click that it will open these baby sittings right where you can set up a CEO for your website. Right now, there is no issue that were set up. That's right. Self titled tag and use of the floor. This is the you. This will be the Ural off the website when you launch your Web site with your custom domain . So now what do you want to set a title here for your website? Let's say you are you several so that you can use money saving or let's finance you see that this is how it will look in Google search. Right now we need a content you sell helps you the you fine Nam's, um finance and money saving ideas. Don't seeing you taxis See sister random dates I'm using here. This is how your my dad looks like. This is very important if you don't know anything. Just however it is question marks. Next Dio headings. It's a described a page, right what this pages about Just describe it and it should be voting 1 55 to 300 characters , but so that these are Google's standard characters. They have said for the description and four titles. Their stated to 55 characters, right? So I'm using it. Just giving your demos on normal type it. Okay, so after it's done, this is how it will look in your Google page when someone such for money saving or finance or use a word is how it will look right. So now when you search you when you share your website toe, any other platform lets up Facebook, Twitter or any other platform lets a lingering. So where you want your page name in the title, right and the description. You can customize it, right? So and you can also at the image. So here, if you look at here, if you look at open grab setting, this is what you have to use. Open grab settings to help that image on your page, name on the page, title and the description. So let's use the same if you can. You you can type or you can use it as the same detail entering s you title date. Let's use it the same. Let's use the description was the same. You can customize it however you want, but now about the image for image you need toe L. A. You are here so you don't need toe uploaded image anywhere, but you just need toe earlier image here. It should be 1200 pixel by 6 30 have a 19.1911 aspect racial. Let's at an image from here Let's see if it works. Just sailed. Tinges. If you go to you a saint's panel here you will if you have or on any major. Let's savy How are on these image? This is not love, Hillary. Main image, right? Just sleep on this setting. I can open the said setting and this will open. You can delete your image You can all take Let's money saving Arce stunt Done. Okay, this is your old tapes, but what we need, we need a you are in. So when we get there, you are it. If you click here this arrow next to your image name, we will get these. You are right, Copies Ul does Airflow applauds your he raises. So now this is done. Now come to your page here in this beach. Just add your GOP Ural here. So look at this. This is how it looks. But you need to air your own right. Just like using these 1200 by 6 30 pixel off. 10 height limits. Heretic looks cool on every social media platforms. So this is how you can set your open grab settings on here. You can area custom pool if you want to write, just like we used Embed. This is here from here. You can also the custom cool. Great. Our homepage is set and ready. So this is how you can add. This is Hogan had s you in where? Flu. But what if my block post? Right. So I want to set as your former blocked pores toe. Here you come. You for your blue pose. When people see your blow post and Google search, you need to give the name that you have your blow post, right? So what you can do, you can either given name by yourself or I would suggest to use the field that her that is coming from the CMAs. Let's a name off your block course in how to invest and description. We will use the Post summary here. Okay, now let's This one is done. It's you're sitting Now let's at the open graph. I used the same that we have used for the issues. A things now at the image. All right, let's use the main image for that particular block post. But if he sitting these and see the world, what is next? The images also changes so This is what users will see when you share your block post on social media. This is how it will look. I just save it. So this is how you can erase you from the veggies? Or you can go to setting project settings for move, issue Tanzi's And if you come here and project settings in the step look for s you here please queue. This is what you can do in the civil flows off. Doorman indexing This is your airflow sub vermin that we use user use ever Don't wear four or denial. That is you subdermal indexing. We don't need you Google to index this great So you will said it right? Yes. What about the extent that you can upload here side man Where floral gender everything automatically If you wants you host of upside here it will do these automatically. You don't need to worry about these things, right? If you want, you can add it custom Lee customize it s purity requirements But where Flo does it for you . So now this is a Google site verification right for your search console Very You can see how many users have visited your website you just need toe hurt. This link here, this verification code that you get in Google such concert, you just need toe paste it here. Right? So this is how you can set up a CEO in flow. So in the next review, we will look at how to host over upside with airflow. So see you in the next one. 32. 32 Hosting + Google Analytics: All right. So our website is now ready to be launch right to launch your website. You must have where Flo is hosting. Plant side plant and it to your project. So this is how can a difficult project settings in the hosting? You can add a site plan if you bite his plan to see Miss my very you get caesium is and this plan is recommended. I also position Take this blonde You have toe act his plan in your account on a where you will get these options available for you. Right? So I have my another account where I have access that for my own website. So here, because you can see I have used this plant is this is the current plan this plan where I can wear custom domain where custom Doman means it's your dormant If I add a custom domain here, Okay? I need to type my domain here. Let's say again I will do this liberal with a blue door. Greek designs start in. If I It is here at Domine, what it will do is it will create. They do links right this to that If you can make your pasty Ford here. It's not connected here. But your toe Go to your console off your host, our domain name provider. Right. So aboard this moment five years ago That's right. It was the issue here. But if you buy a your doorman is new, then it will connect easily. Right here. You can take status by just clicking here, and it will just connect your dominant with your on you if you want to. If you still get this issue detected, you can. Lt's details like the type of this type. You can create this visitor console. Dominant was the star and you put your doorman from and create the scene M records and Eric course you can add these in your dough. Mencius extra. Then it will be connected. Right. So this is how you connect your domain in my floor? Your custom doorman, if you don't want to use where flows hosting plan, you can simply export you gold. Just like I have showed you in. All right, right. Introduction video. I don't want to connect it now because I already have. It's gonna get now this 301 Redirect if you already have a website Let's say it is building were praise. You have some bloke posed there, right? So you can add that old part here and you can set the new party overflow part here so that what will happen if someone types in Google? Let's abc dot com So don't treat open that all of upset, which is not working now, right? So what you can do you can say here your embassy was here. All right, it's a lets you for Look, post bloke Now you're broke Post days Look, let's now your urine name is post your page name, right? This is your patient him after you know my name the little lulu dot every si dot com after slash broke it was your old you are Now this is your new yearly wear flow, so you can just a redirect, but Okay, So this is how you can do this. 313 direct in their flu and thes everyone publishing options where Flo gives you an SSL certificate toe. Make your website secure. Just like if you click here, it will show you this connection is secure so that people can trust your websites and nobody will help your website, right? So many. If I edge Tamil so that your page with the website load faster, you can magnify a CS is and you can many for your tears on you can use the supreme head of your secure from How does nobody uses this? Used these features a lot, so you better you should not too. But this is how you can add your hosting in your workflow forties A website right, So your toe pay for it It will be a one year subscription on your website will be live right? So now you're upset is low so you can start generating money and leads from your website where you can start making money by creating website for your client. So guys are This was eight in our flow class. So please watch my final thought video where I will tell you what to do next. Right, So see you in the next one 33. 33 Final Thoughts: Hey, we immediately build a website and building, although there for basics toe build our websites. So I hope you enjoyed this course and learn something up off it for the next day. For you is to go and build a website for yourself and for your plan advise.