Web Design: Develop beautiful websites with confidence, zero coding skills and for free! | Ronak Parmar | Skillshare

Web Design: Develop beautiful websites with confidence, zero coding skills and for free!

Ronak Parmar, Visual storyteller

Web Design: Develop beautiful websites with confidence, zero coding skills and for free!

Ronak Parmar, Visual storyteller

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
30 Lessons (3h 10m)
    • 1. Intro

    • 2. Class Project

    • 3. CMS

    • 4. How to get wordpress

    • 5. Install wordpress locally

    • 6. Log in to wordpress

    • 7. Dashboard

    • 8. Inspiration

    • 9. Downloading XD

    • 10. XD Interface

    • 11. Wireframe

    • 12. Wireframe of homepage in XD

    • 13. Project page

    • 14. Prototype

    • 15. Plugins in wordpress

    • 16. Elementor workspace

    • 17. Navmenu

    • 18. Style the navmenu

    • 19. Navbar BG Image

    • 20. Template in Elementor

    • 21. Text in our homepage

    • 22. Elementor error

    • 23. Black BG behind words

    • 24. Animate

    • 25. Work Page

    • 26. Default fonts

    • 27. Citylights

    • 28. Header

    • 29. Contact Page

    • 30. A few touchups

  • --
  • 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

There are many creatives graduating from college each year and there are many startups which are coming into fruition each day. It gets a bit difficult to launch yourself into the world when starting out. One of the methods of doing that is creating a website which tells your story. In this class we will go through the entire web design process to create an appealing website in wordpress using only free tools.

I know nobody has money when freshly graduating from college, I didn’t, so I taught myself web design for as little as possible and I have only expanded my knowledge since then. This class has everything that I have learnt till now and I want to share it so that other people can benefit. This class will be especially beneficial to art and design students but if you are not then also you can benefit from this class because I go through each and every step which leads to the creation of a beautiful working website.

Below is the list of things that you will learn:-

  • Necessary theoretical knowledge(Don’t worry it’s not too much)
  • Basics of UI and UX design
  • Setting up server locally in your computer
  • Installing wordpress locally
  • Designing your website in Adobe XD
  • Developing your website in Wordpress

We will be creating a portfolio website together. All the class files are attached here. You can also use your files. It doesn’t matter if you are a beginner, intermediate or expert, I am sure there is something for everyone.

One last thing you need three things for this class:-

  • A computer (Which you probably have)
  • An internet connection (Which you also probably have)
  • Creativity (This I know for sure that you have)


Download project files here

Meet Your Teacher

Teacher Profile Image

Ronak Parmar

Visual storyteller


Hello, I'm Ronak and I am formally trained in film and video communication from National Institute of Design, India. Studying in a design college has it's own advantages. Not only I had access to some of the best filmmakers in the country but I also got exposure to all forms of design- from graphic design to animation, from textile design to ceramic and glass design. I picked up a thing or two from there but the most Important thing that I learnt was to learn how to learn new things. Since then I have taught myself web development, graphic design and music production.

I am working as a freelance filmmaker and photographer in Bangalore, India.


See full profile

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. Intro: hi, guys. Everyone as a student has thought of getting a website always what? It is difficult for many people to get a website because it's a bit expensive, integrated first of all. Secondly, if you try to do everything yourself, then it becomes a bit complicated. It's very difficult for anyone to learn to make a website when you're on a tight buzzard and you don't know how to get started. This, for real serious, is for the people who would like to make a website on our short on budget, but abundant in enthusiasm. Now we're start by getting WordPress, which is our country managing system. I really, well, freely to everyone. Secondly, we will install it in our computer. We don't need a Sarwer or US based on the Internet somewhere to learn to make a website, so we will install were present our local computer. Then we'll move the words, paint on it and look out for inspiration for creating our website. After that, we will be lower upside in a free tool by a movie called Adobe X'd, which is a prototyping software for websites and mobile applications. So you will create your design in adobe extreme. From there we will move towards WordPress annual Prep it for creating our website and after that we'll start willing or website with a free website Wilder called element or I believe me, you don't need to write a single line off poured to make a website. All you need is a computer on a decent Internet connection. That's a in this territory, a series. You will not only learn how to create a website, Marty Well, all stolen A software Adobe Ec Steve which is slowly becoming the industry standard for designing websites. And you alone wordpress, which powers 33% of the entire Internet. There's tutorials for absolute beginners will dive a bit deeper and gold the entire website creation process. This will not take you to the export level. This is for the beginners by this will give you a great primer and what to expect if you want to start creating websites. I hope you're excited for creating your own very first website. And the most exciting things about this tutorial is we will not be using a team off rebuilt team by anyone. We will be creating our only out our own website which will be created and early by us by nobody else. I'm Rana Palmer on. I'll see you in class. 2. Class Project: Hi guys. Exercise face which are below and you will be needing goes in orderto get through distributing cities. So go ahead and download them on the next thing your projects. So your project will be to create over state which I'm going to be greeting. Or you can create your own website so you can make your only out on the extreme shorts and post them in the comments section. But I would like to suggest you that you follow what I'm doing and after that, create our own website. Right, So I'll see you in class by 3. CMS: All right, guys. Welcome back on in the studio in cities we will be using what? Crystal Pepsi. Now you know what word persons, then those for you 20 feet own, then keep watching. Where? Prisons The world's most popular country managing system are CMAs right now on. According to Gordon WP, it powers our own 32 bars and of the entire in that right now, you must be wondering, where does he Yemen's is Whenever you make a website, you can do that either by according it are using a gun generating system or a website Very little similar tools that are available to you by our content violating system A special in a way, because it roids you a graphical way off managing your design and your country so you don't have to deal with all those courts, which are very hard to understand. And can we live it on by a developer and you can actually were deliver without writing a single line off court when you use the CMAs? And what press, in my opinion, is one of the most of our settlement and managing system out there right now? What? Ruskin evenly e commerce websites like Amazon very easily, as long as you know how to properly use it now. Going demanded in system can be a lot of things. And it has different definitions for different people because you can create your own CMAs also, and it can held the features that you want your CMS to have. So there's Sierra's is a very worser tale in its being A WordPress has become most popular because it is the first open source CMS, which allows the users to enhance its functionality without any bones. So you can do that by installing plug ins into WORDPRESS. Okay, so this is what does he hammers in very simple items. Okay. So, yeah, I haven't seen the next one. Why? 4. How to get wordpress: Hi, guys. Welcome back. So in this video, I'll show you how to get more press now. In order to get WordPress, you need to have an account in one of Donald Lane, but said hosting platforms such as GoDaddy or Blue Host are anyone with Joe when you like. These are the online website was taken platforms, so you can go ahead over in each one and compare the plans and off for richer when you like . Just make sure to get a word press hosting or Web hosting, and I will show the difference in nominate So open Go Daddy WordPress hosting and Web postings. The difference between the two is that if you get WordPress hosting, then you will only get WordPress on the good idea. In this case, on good and evil install were trust for you, and you would have toe think about updating it are doing anything about it. Whenever the logging into your account go directly into work, Chris and you can start building. And if you get Web hosting, then you enter the software called C Panel, which will help install any off the CMS such as Ah Wordpress or Dumler are for any other leg. It allows you to stall 125 plus free applications. So, yeah, you went off for anyone. If you are willing to use where President, I suggest you do out for WordPress roast evenly. It was It's easier and rightly want Warmbier things. And the 3rd 1 is by creating a sober locally in your computer. So you will be able to run for Crestwood are going online and without buying any off these hosting plans. So how do you do that? To create us over in your computer? Local? You Tito have a software which allows you to create. So we're locally and I'll be using them. Oh, damn. You responded apart different start towards E. Yeah. So you can go ahead and download it for when those Lennox or where sex, Whichever operating system you're using. I'm using windows, so I longer it. Yeah, save weight and it's downloading. I already don't really, so I'll open this up. McNulty. What they're saying is, don't install it in any of the folders like C slash program files X 86 World allows them to write anything inside it. So I actually invented next leave everything else is next. Yeah. Don't teens this installed Samp in your route. Fuller in the road for lead off your grave. So minus c slash Samp next. No, no, Next next. Now this really install after it installed. Open it up on the in the next. Really? I'll show you how to create the locals over using Sam. So see you in the next one by 5. Install wordpress locally: I will come back. So after you finish installing Zam, this window will open up and to ask you to open the control panel. Now you choose your language on D C. Yeah. So this is how the Zam Control panel looks like now, in orderto get WordPress locally, you need to download it first so that Zam can open it for you. So go ahead on duh. Go to WordPress northwards. E don't go toward restored calm because ah, it seem as the it seems as the web hosting, the WordPress will sting and Gordy. So, yeah, I don't go for this one because it is a bit expensive. I won't give you some parks, Which good and evil. So yeah. And in the WordPress start our website. I will get WordPress no, nor wordpress 4.9 point eight. See, you fail. Okay. It's done. And open this failure. It is. There's a faith now. What you need to do is you need to go to your Zam Fulla and inside here you will find off a local. It's detox. Can you do about it up and created aws here? So what is it that obvious? The database will contain all your WordPress file inside of it. I'll get a new folder and I limit portfolio done, and I will close it. Now. Open the down ordered WordPress file and extracted toe the full you just created. So it doesn't see Zampa. It's be dogs portfolio. Okay? And it will extract. It's done. No. What you need to do is start the apart is over and my skills over. Then go to your browser and in the address bar type local host, slash portfolio under And this wizard will open up to install WordPress. This will help you install WordPress. Now there is one more thing before you proceed. Continue, I assure you. Next school on DWS named their DWS name is more degraded. Portfolio user name. You're great food here. Password leave blank database hostess locals because we're with standard locally and table prefix gender to WP one cost changing. This will allow me to create multiple users and installed multiple instances off WordPress in my computer. Locally submit and just this error occurs. Consulate VW's we were only will look on a tour database server, but nobody will do select the portfolio. DWS, Are you sure it exists, actually, a dozen because we haven't cleared today. So to create the database, you need to go to Samp and in the my scale model, go to the Ironman Can this window will open in their date. Obvious is you have to clear the database here. So the databases sport for you. I create. No, it's done dragging in port for your root password. Leave blank. Local host WB one submit. Done. All right, Sparky. You made it through this part of the installation. Work. Risking now communicate with your database. If you already time now, do around the installation. Done. Yeah. So put all this information ahead and install WordPress, so I'll go ahead and put my name on a Parmar side title. User name. I like to call myself for Ronaldo for 72 and password. No, my bottle is very B. I confirm the use of weak password, your email, my emails Contact our contact on their surgeon invisibility. So you don't need to do You don't need to take this one because this really and discourage goodwill and being gang yahoo from indexing your website on your website won't show up in the sort result, So, yeah. Install WordPress. You know what's done? Where Chris has been. Story. Thank you. Enjoy. Use a neighborhood in a little further into do password. Whatever you to us. Now. Log in. So that's it for this video now, is he in the next one, My 6. Log in to wordpress: Hey, guys, come back This one. I'll show you how to log in and do WordPress photo local host slash portfolio Trento and this website will open up to access the WordPress dashboard. You need to log in first. And how do you do that? You need to type in WP Logan dot PHP The blue P log in north via tree and press enter, and this will open up. Alternatively, what you're going to is there is a log in here so you can click on this and this will open up again. Yeah. So 40 are using him minus right before trying to do. And my password? Yeah. So this is how they were dressed. Dashboard looks like. And, uh, yeah, we'll go through the dashboard in the next one, So see you there by 7. Dashboard: Hi, guys. Welcome back. And this video will go through the dashboard of WordPress. I was zipped through it so as to not waste too much time. If you want to go in there, then you can visit codex dot wordpress dot org. Here you'll find all the resource that is associated with WordPress. It has everything. So if you want to be a WordPress ninja, then go to everything and you will learn what you need to learn. This is how fresh WordPress page welcomes you. So you will see all this stuff. It is trading with that. They have already knew agita that they are currently battling and we can test it. It is called Gutenberg are not quite ready. You can install the classical editor so we just go with the classical editor for now. Installed. Activate Lhasa. Garrido. Done. This is how you are. Ah, wordpress Looks like now you can customize your site or you're going to you and your team completely. Next. Steps right of law. Post are then about beach. View your side, man Deductions. Next. Just activity. These are all the comments, not on your block posts, and you can moderate them from here, you can create a quick draft from here so as to return to it later on and finish it. You can see what are the events in your city and news regarding WordPress. If you are living, say, in New York, you can just sort New York and press. These are the word residents that are going on in New York. Next year's updates updates. You will see all the updates that are available. Hair it. We sure if there is any update for WordPress if there is any plugging update or if there isn't a team object, so I'll show you my dashboard. I have five update straight now, four off, which are for the against that I'm using. And when it's for the team that I'm using next this post, you can add a post here are new on the manage All the posts that are there, Media media library. You can add media here. I'll show you my media. This is how my media tab looks like. I have all the stuff uploaded in the DWS off my website. One more thing. The post section in direct Kartik cities, so you can assign car to get these two air posts and you can add tags so as to make it easier for people to search them next to speeches, pages you can create. Ah, what? The pages that are in Europe side. So I have so many pages I have in all I think when design. Yeah, I have 27 Peters on drink. Is Havenaar published here? You can see we don't have any beaches. We have, ah one published and one draft. So all toe the next twenties comments You can see all the comments here and moderate them next. Disobedience established. Kind of important because you can find all the teams that are available for you to use. You can add it him and you can go through them here. You can preview it. And this is how it looks like customize. You can customize the team which is active right now. So in this one, I think we have 2018 activity right now. So do you take me that? Yeah. You are customizing on a per mile. This is the name of the upside. If I want to do things the head out here, I can just type anything here but say this way it is important to select a team which caters to your needs will go through it later on in the street Auriol series. So just hang on to the tar that you need to select your teams carefully and digits towards the right side. These are the wizards which are currently acting on the website and words the left. These are all the digits that are available for you to use. Next is menus here You can create a Manu for your website. I have this man. You already cleared it and I'll show you how it looks like on the website with its eight. This one this is called the menu is the menu and we'll be going through later on industry tutorial. How to create this next just head Oh, this background amid is the header in this case for this particular team next his editor This is quite important it issuing You're wanting toe Be careful with this on the side. This is the end tired website here This is the court of the team that you are using If you're 1/4 than this might come, this will come very easy for you, but for someone who has no idea how to code, like if you're a designer or a filmmaker now if you don't know how to go down and so the steward are to go into editor and make anything in this next just plug ins against extend the functionality off WordPress. For example, if you want to add a paddle x effect to your website, then you have doing Staller again, which enables you to do that. There might be some teams which already has that functionality built in, but if it doesn't, then you can search for a plug in, which allows you to do that. And it started editor. So this is same as the appearance of data in the opinions of distributor it. It's the ward off your team and the plug ins Aerator helps you to address the court off the plug in that is currently active users. So these are all the users that are in your website, and there are various rules to each user. Subscriber contributor, author, editor, administrator. You can add a new user from here. I I signed. It'll do him or her GoPro fail if you want to jeans How your WordPress dashboard looks like like this one, and I inquired with her the next year. Stools. So tools there are. These are the really will lose card agrees and ask in order Import export. You can import or export the contained off your upside. Like, for example, if you want to export posts. Pisa's media you can download defiled from here. And if you want to uploaded somewhere, you can go into that computer and imported an extra sittings. So these are all the settings. Now, if you want to change the date, the time your email address, writing sightings, defaults and eating certain things discussions, you can go through a list of his all pretty self explanatory. But the actually wanting for Mullings, this is a bit important. If you're upside has complicated. Ah, for Maling, then it makes it difficult for Google are being to indexer. So you have make sure to keep this as simple as possible on privacy. You can read the privacy policy here if you want to, or you can create one. When were thing human collapsed A menu. If you aren't more working room what I like it like this forgot butchery wanting. You can select the screen options from here. If you don't want to see at a glance, you can just do you move whatever you don't want. Um, add what you want. What this dashboard does is it offers you a bird's eye view. It's like was in your website from top. If you want to go into particulars, then you guns women into it. Andi, make any changes that you like. This is the dashboard of WordPress, and I'll see you in the next video my 8. Inspiration: Hi, guys. Welcome back. Now we are done citing our work for us. Been Now it's time to get into their design phase. And the good started to see some of the websites from where we can draw inspiration. So the 1st 1 is awards awards, So e www air ideas. This is a repository off very good looking websites. You can go here and find unlimited inspiration for yourself. The next one is eliminators site off the month. So the element you can goto a limited Orbcomm showcase. You can find whatever is possible with delivering Dar Ph willow and I'll get into element a page builder. Enough. It's a video, so yeah, you can just open any website from here on a visit and draw inspiration. Andan the next Just been dressed so Pinterest. Everyone knows everyone go when dress is the Goto side to get any kind of design inspiration Well and yeah, I guess to visit. I'll see you in the next one, right 9. Downloading XD: Hi, guys. Welcome back. And in this video, we will download and install Adobe X'd. So if you already have it installed, then you're gonna skip this video. So yeah, it's more tired. As you can see, we can get extra for free. As you can see, it is, it has been known order so you can open this up. You can open this file over and install it, and it will ask you to sign into your adobe creative load up. Ah, very log in. You can install or do we extend from here? So you click on install and just wait After we extremes installed, this window will open up, and here you can create your document. Size is ideal for iPhone iPad web. You can create your own custom size also, and I know we'll be creating a Web version on DE so endlessly ponders what this will do. It will creator 1920 my 10 80 size document for us. So let me just open this up, okay? This is how it will be. Extra looks like when you creator documented, let's warned with an expedient which we will see the adobe X T end office. Andi, look at all these tools and these options. So see you there. My 10. XD Interface: Hi, guys. Welcome back. And this one. Let's go through the interface off to be extreme. So as you can see, we have Ah, Dr Mendel been here. When you create a new failure, this is what you will get. And, uh, towards the left, we have all our tools, and this is the asserts panel on below. It is the hardboard panel. So whatever you create her will be shown her, and we'll go through it, um, towards the right, we have the properties panel and worse adovia radius options on the these three lines. When you click on it, you get on the other options. So yeah, so let's school, I'll show you. Let's go through the tools first. What is the selection tool? Obviously, everybody knows that. And if you're coming from both the shop or illustrator, I you can skip this video altogether because you don't need it. Um, yeah. So this is the selection tool, and you can, ah, select the art board on, move it in there, and, uh, by pressing the space key and dragging, you can dragger. You can just hold onto it from anywhere on and move it around. You can by pressing the control and minus key, you can zoom out on by pressing control and press your friends, women. Or alternatively, you can all those who moderns women by pressing gulke and rotating your mostly. So if I've result he and rotate my mouse key mouse Most well known words I can zoom out and zooming by rotating my mouth. Really interesting. The Alte older option G up. So, yeah, um, next year's Dereck angry do so you can draw your anguish like this with the stool. And when you press the shift key and drag, you can clear the square easily. Now you must have noticed this small, tiny circles on all the four corners off district angle. So what? What these do is made your selection toe? Um, you can grab one of these Any one of these on when you click and drag inside you can around your corners. So essentially you can create a around the corner with this particular thing. I don't know what they call it, so yeah, also, if you want to do here, for example, if you want to make our own will lead this corner or say and the oppose it one. And what do you reduce? Select your rectangle. Click on this option right here. And then you can put the value in drone the different corners off this square. So to make this cordon around my fingers, this one Okay? Yes. Yeah. So, like this, you can around any off the corners, off your shape. Now, let's see, you want to fill in, fill in a color in this rectangle, then you can do it way going here and just selecting what you're gonna You won't, uh, It's a worn this color in this looks nice. Okay? And I want this one to be, um I don't want to choose a harder when I got out. Okay. Does this weigh in? I guess. Okay. So, yeah, So you can make shapes. Now, these tools I have created these two shapes, it's. And now I want to add a circle or and William So I can do that by actually, by clicking on this cool ellipse stool and making a circle. Now you can make a profit. So, girl, by pressing the shift key and dragging as it is, he do you think? Um, okay. One amazing thing about exteriors. You don't need gadgets because whenever you're dragger shape inside offered its, um, dragging him. Whenever you move a shape in 60 it's, I'm willing this several it automatically snaps to various points. No, this? Yeah, this is the center point of the circle and the shape behind over it. So you had this way. You can easily snap shapes or text or any object, any liberty in your document with the other. So let's help put the circle here in the center of this rectangle. Now, let's sound agreed. Some lanes I'll take this'll Angel a little cleared the lane and I want to put then exit like this. As you can see, it is snapping Order my giggly, Yeah, it shows you the guides. So yeah, Now, if I want to make these lanes the car, I can just I can just select them by clicking on it, pressing shift and clicking on the other one. Now these and they are selected on here, and then I can go here. I mean, pleased to size. I'm increasing the size by pressing the up arrow key so you can increase the size by pressing the of Iraqi and decrease the size without a single down arrow key. So I didn't favor. Yeah, I was born in 19. The color on its I want discolor on the on these lines that I have created. So what I can do is I can just take this, take this eyedropper and bring it here and click. Oh, yeah. Now my excess off. Same galore as the ship. Okay, so let's move with hair will just and keep this hair. Now, let's say I want to make a swig squiggly line. So I'm gonna make that he did again. Me, I can make leg really circles, and then 40 means them like this. Aan den believed all this. That's a lot of work. So what we can do is we can just take the paint will unclear and create lanes like this. Okay, Now, let's fill in some color into the shape. Mm. And that's a no, I just got off Don. Yep. Um no. None of however Peters will look like this. And then he gives you look create a 1,000,000 repeaters way. We're not going to create anyone like this where they we're learning something. So now let's say Ah I want to give a border to the ship so I can just click on it. Ana, go here. Now. She was the color on, I think. Greece. Wayne. Andi, I increase the size. Yeah. As you can see, we have this amazing border on the ship. My first leg. These and bring down Oh, they're going back. But we don't want them to go back. We wanted them toe be in front off this ship. Actually, um, we want this one. This shape this portable are weird thing to be behind the ship. And we weren't this shape to be about the ship. So how can you do like, either we can do that by clicking on it. Right? Click on duh. Guardians bring different, so it will bring it to a friend, or we can click on it and press control, right? Racket control or command right bracket. So let's say I want to send this shape this big shape this, uh, really shape to the back so I can go there by clicking on it and pressing control shift on left racket. So what this will do? It will send this particular ship at the back behind everything else that we have created. And if I just press command or control and lived racket, then it will you do it one by one. So yeah, this way you can fear chips and move them a pen down or bring forward arcing backwards and mess with their properties. Now, let's say you want a giver title go Just amazing the piece that we have created And we want the title to be, um, next year title. Okay, Okay. So the title of this rapacious title ondas you consider it is very tiny and we want Oh, increase the size. So what, you want to escape on DA Increase the size by going here? Oh, now on this is pretty slow. No, no, we're going to afford we can do is to increase the size, this claim on it. And you see this tiny circling just bring appointed work on click and drag Whoa! Now that is much easier than increasing it from here. Okay, so let's bring the title of the speeds which is titled Up here and me lately with Okay, Okay, then, now that we have created this amazing homepage, this beach, their title page for upside, and we want to create another piece. So you can do that by looking on the stool. They are Go to I knew these options will show up towards the right. No, You want to create over Page, which is 19 during the by 10 80 actually on it. Yeah. So it re creator New art board for us. Now, let's say we want to We want all this stuff in this page two. So how can we do that? Either You've danced with their selection tool. You can either you can select everything and press old and drag. And you go into it like this or the of a derma third, um, but much easier matter it is. What you can do is you can really let me leave this one. You can select your argo tool, Chris, on your distinct title off your art board. You can press art and dragged from here, and it really create a copy off your dartboard. So as you going to be, this is 1920 door. This is 1920-1. So that's where you can create copies off your art. Bored easily. We just don't know everything. Yeah. Now let's say I want to rename this particular art bored and you ruined him. Bash one to home. So what? I can do it. Like in Don't look on this great home beach presenter. And it's a This is our, um going dark beats. So, cornerback, so this Will you then rename your art boards? Now, if I go here in the layers panel, I can see you are in the art boards, man. A legacy we have to our boats contact at home. When I double click conduct contact the icon. This thing, if I double live on this under text, then it will rename this one. So you can t name your artwork from here also like this? Yeah, you can see your order. The name. But we don't wanted would like this because yeah, For whatever reasons, there are all these elements in this art board. So you can select any off these elements from inside here. Also, if I double click on this icon, I can go inside the art board and I can select ease off the element like his hair, and I can go back from head. Yeah. Now let's create uh, when more are good. Okay. And I don't want that. I want it the selection going and move anything from the elements of a in your artwork and the art Bordeaux. Now let's say I want this particular weird shape that I have created in this hard border and I don't want anything else. How can I bring that either again? Selective breeding like this and pressing shift pen clicking on ease off the element. I'm pressing order and drag and nothing happen because this is a very inefficient way of doing this. What you could do is you can go to your layers, Andi, In your inside your home you can click on line two because he warned actress shift tinkling on lane one because we want that too. And press cinch pressure friendly gonna lips one because it one lives one also and a tangle one. So all these are selected now I can either repress all day and right No, nothing happened again. Title is coming. So let me the selling dollies. Yeah, Now what I can do is again right click on group on these shapes. So now the group is created and I would say I want this group in this art board so I can just click here, result and drag. My everything is here and I want Oh, he's either this the strays don. So this way you can group my resting shift, Tendler going on all the it remains in your art board and reclaim them on group. So now these two are broke. Go and do that. Now, if you want Owen, group it, then you can do it by pressing control g again. No, you can't do that by by right clicking and unwrapping. Let me just group them again. Ontology. Okay, One more thing. I want to show you. Let me make a copy. Now you must notice these of think things. This is another feature off Adobe X'd, which is amazing that if you want to create, if you want to create our women's at a fixed distance from each other, then you can just do it because they choose you the distance like it will show here also and a good snap also. So yeah, like this. Now, Detroit neither distance between if I click and drag. Uh, yeah. So their distance between in the distance horizontally between these three art boards is when 65 excels under distance. Between this lease these three are boards were legally is 230 is expect sales. Now let's say I don't like the color of this rectangle, this particular color which is here everywhere, and I want to change it so I can do it by selecting each one of these shapes on the UN, grouping it first, then clicking on this and changing it. Or there is much simpler way, which is I can just click on this shape right click, and I'd color to assets. And when I go here, just just plain knitting, this is the assets panel. All the colors that are in this shape are here, and I want to change the color this color particularly so I can right click, and it and I continue the color. So yeah, it's very like the scholar and here I am done. So that's where you continues the color off easily. Really win that you want to change and similarly, you can I d. You can. I'd shapes here. So if if I want the shape Toby Ardito the assets I can right click and make symbol and it comes here now whenever I need it, I could just drag it from here like this. So this makes it very easy for us to make a start off design system between Go on your and go on your and their website. You can also Ida character stays here by again by clicking on that character style to assets. So it is here now. I can't. I have anything I typed anything on the I can just click on this style and it is a plane doesn't are. Let me just Yeah, And I warned Dio, this particular style will be applied to anything when I can click on it and click on this character straight. No. So now anything has to see him stay illustrated. I always say, I don't like I don't like does this stale. So what I can do is against the right click here in Britain and I contains the phone. All right. Got changer. But it's ankle on a li. All the extra tells this particular style of sliders. Teens. Now I want to change it for those wagon right? Click it and it on. Go here on week old. Now it is bold. So yeah, this way you can change the styled weed and every extra element or shape in your heart boards. This might not seem to be a big thing, right? No. But when you have hundreds off Pts or if you're creating an app on dure, send it to a client and the client comes back to you once as you to change the color off a particular element. So this makes it very easy for you Do teams the color. Now, this will be enough for us to make the website that we're gonna re creating. But let me show you a few more things. Ah, uh, if I create, let's say these various shapes and I warned them I warned. They're saying there, Toby, um horizontally. Elaine. So what I can do? I can select all of these on DA contest. Yeah, the sender's off. These shapes are horizontally, Ellie. Now let's group them by proceeding by selecting all on pressing control. G No, these are grouped. Now let's say I make a copy off the shaves by pressing older option. I, uh, dragging. And I want to rotate them, so I can rotate them by bringing my point in here and pressing shift. Now, pressing shift will make it rotating steps. So this is, I think, 30. 60 60 value. Yes. Well, I don't know the exact degrees which is distorting or it is we're getting. And 15. You can see it from here, So yeah. 3 40 wave 3 33 15 300 and 70. No, I wonder centers off these dese this group and this group to be Elaine were develops wagons , Alec disappointments Select the sun by pressing shirt and flicking on this one. Yeah, the center of this particular group. And this group is Elaine. Well, this looks like a human face. Okay, so that's where you gonna lane things. And you can just experiment with these migrating shapes and was clicking on each and every one. Now, let's say ah, knowledge, Look at reputed. So what repeated Ridder's Oh, let me go shape here. Now, if you are making ah equal Morse upside and you have hundreds off for those to upload, So are you going to is you can ah make these rectangles like this, right? Pressing All done. The clicking on it and bragging like this, or there is a much simpler way of doing this, which is delete delete. Click on this rectangle contributor. I'm just Drac. That's it. There it's all you have. Good. No, these options are If we could save, I greeted the line Will let me make it. This is It's a 60 60 pixels weighed in This particular line is extra picks since we're now , when I click on it down the go here, I can make the ends off this lying around by clicking on this one. Oh, are this one of the now? The difference between this last one and the 1st 1 is the 1st 1 stops where the part off this lane stops and the last one extremes a bit. So it is predicting outwards and this is a round one. And these options, these two options are for a shape. Now let's me let me make a shape. Yeah, If I want to make the rounds on the just people are a big round again. Click on this and go here. Oh, nothing is happening because the border is very so we are alert me. Good to go. Yeah. Now you can see that The corner 30 apartment. Because I have selected this one. And if I want to make them around, I can click on this one. And if I want to make them sharp and I can on the sun like this And this is very one your stroke, Toby, if you wanted. And so did you. 100 on this one goes and say, if you wandered outside, you gonna look undisciplined. And if you want, it isn't really strugg, and you can click on this. Done. Yeah. I hope you're in your understood various things on various tools and various options in this. So really Oh, I forward to show you one more thing. Yeah, uh, in exchange the colored stools, I first like these two. I can go here and click on this one. These two groups are merged. Oh, are against salad, please. And go here on now. This is subtracted the shape this way Cheap is subtracted from this. This a reddish shape. If I click on this one now, this one is intersect. So leave the portion which was not which was overlapping. He's left here and this really delete The last one will delete the portion which is overlapping as you can see these No, The part which is overlapping is no subtracted from this nondescript up in with me and I don't know the last update. I don't know who in the early next year. This is no better nor going back. I don't know when I'm going to get an interview. I hope you understood all these tools. I hope I was not very fast. I know. In the next radio we will start building our website, so I'll see you there body. 11. Wireframe: All right, guys. Welcome back on. Let's go through what? Aware Free Miss. In this video. As you can see, I have these three scans. So, basically, whenever you start building a website 21st need to do is get some inspiration on the internet. Then make some leotards in your copy first. I do. As you can see, I meet, uh, one Ah, do on three layouts for this particular tutorial. And then I went ahead and made this one. So, Ward, these are the layers in my co op er, just rough sketches which I came up with in order to start building our website. So what I did is I fell sketched layout for the homepage for the about page work bids and then all work with tech sector and I came over three different layouts for each off the pages. And after that, I picked up the most interesting elements in ease off the layout and then made this whenever you start drilling a website to start by getting some inspiration, then draw some layouts in your copy on guy. So just dry at least five layouts for each of the pages. When you're done drying them in your copy. Just finalized on the one. Would you like the most? And then we want to build the low fidelity Were general fear upside the low fidelity version is these boxes for where the different things in Europe site will go. Basically the low fidelity were genitals the hierarchy off content in your website. It is the bare bones. It is the skeleton off your upside it is then I really made to show the importance off different content on the website. Now, as you can see here towards the left, we have this extra box in darker grey, which means this is a bit more important than the thing towards the right. Now, in the low fidelity version, I shouldn't out of it in this imagine logo here because it is self explanatory. Whenever you put an X across ah box, it means there is an image there. And where there is nothing, it means there is a text. All right, now, some people also make a some infidelity version. Um, which has XT instead of these boxes here, you're in a certain So if this was, ah, same infidelity version than I would ever attend the text which is going to come here and in that case also no fancy typefaces used when leader first run, which is generally Ariel, is used because we just want to show the hierarchy of content when we're done with that, we move towards the high fidelity version and the high fidelity version is still not to the final version. But it has only color. It has all the content, it has everything. It is a vibrant version off our website, but it is still not a functioning website. It is just It is just how your website looks and works without actually being called It and t India's to the website are still possible in the stage. So this is water hybrid. Ality and low fidelity were generous and this entire process off coming up with these layouts and then moving on towards the low fidelity version than the hybrid led version, or sometimes the same if reality version. This entire process, called buyer framing and vier framing, is done for board websites and mobile applications, and that will be all for this video. So I will see in the next one my 12. Wireframe of homepage in XD: Okay, guys, welcome back. Now. It is time for the exciting stuff. It's time to create our homepage. As you can see, we have nothing here. We have an empty page, and, uh, we won't be using a layout because we are the boss here. We are doing everything in this website, so we don't need to create a layout. But if you're doing it for our developer, if you are just designing the website and you will be sending it toe developer, um, then you need to get a layout. You can do that by taking on your hardwood and just kindest. Yeah, done. This is your lord. No. Now, this is a 12 solemnly out by default. X d creates. Ah, well, column layout and there are options here. So there are 12 columns, Doctor. Where is 16 pixels? Which is the distance between two volumes on the court, along with 122 fixes on DA the side? No, the site space. The extreme corners off the starboard. This one this Despues dissuade speeds. And this way, space. Uh, is this one the last thing? This one which is 1 40 pixels. So yeah, you can know Jesus, You've been cleared guardian. And now you're 13. Ah, Now you have 13 columns. This way. You can do this. This we're going Treat columns on the design Your upside If you're giving it to order. Lover, I suggest you do everything using a layout you want if you yourself are creating it. But, uh, for the sake of district area, we won't be using this layout. Um, let me just turn this off, Okay? Now all the files that we will be needing are in your exercise files that you downloaded. So let's bring in the logo. No. Yeah. Then we have right on your the amazing guides Artwork. Okay, let me make this world on first. Morneau said more inside. No, you can get this form from Google phones. It is available there, and I'll make this bold, okay? And I'll change the color black. Okay, Now I want to change the color off. Own Why? Okay, we'll take this rectangle. Toolan will create a box, okay? And we can change the color of the box from this filled section and radically condit and select black. And I'll remove the border by removing the stick now, do you remember how scared? And we send this to back? We can do that by pressing command in your Mac or control in your PC and left bracket. So come on or control left. Bracket done. It said it's behind. You know, let me make this smaller. Um, how should I know that I can't do that? Because this layer, when your style is about the rectangle layer sold to select rectangle Let me go here to the layers panel And in the web, 1920-1, We have the skin rectangle. Okay? No, I can make it smaller. Done. Good. Yep. Now it's ok. No words. Next we have we have ah rectangle here. So the late may change color to black and remove the border. Okay. Done. Knowledge nickel was the layers panel. Okay, this attack too big. So what? Begin to us began group these weaken group this element. Let us call this entire thing an element in this repeat so we can group everything by selecting by clicking and dragging over everything that we want to grow up on pressing control. G. Now everything is groped on letting make it a bit smaller. I think that this plane, um, now alerts and bring our image, Which is when one more amazing thing about illustrator is that it gives everything in proportion. It is difficult for you. Do you mess with the proportions off limits. So if we make it bigger like this Okay, good. Mm. Now we're done with the basically out, maybe is a bit small. Smaller. Okay, Next year's let's tape our menu. Oh, now this is a little bit and it is bold. We won't we don't wondered. And we want everything in a poor gap. So jewell on me and we'll change the stale toe. Regula Finally, Degrees the Saiz. Okay, let's make the semi bold. Yeah, this looks better. Know what we should do is just right laconic on add character style to asserts and what this will do. It was like the style of light. So this home next here Okay, it's one. Let's Davis. Okay, guys. So go out from there typing more. You can press the command or control key and click anywhere in your artwork. So a martyr control click Now I o created this. Okay, Solar. It's reinjured work now to make their distance between Ah, these eliminations equal. Let's select all these on Go here. Now I can never remember which one to use. All writing. It's this one. Yeah. Now they are all agree that equal distance we can check it by clicking on this and moving there In there, everything is equally distributed. So let me just me make the distance a bit more, Okay? Mm. Yeah. Now everything is distributed in equal space. Let's make the white dangles start from here. Okay, Well, send it to back Control and Control and love bracket. Yeah, that school door layers panel open our our board. We have 1920 lash, one click on the rectangle three. Now you can duplicated by pressing control, be on just pressing the left arrow G to move it again. Control, be on. Just pick and drive. I'm truly click and drive. Now you can select only the three of these rectangles by pressing shift. Don't kick and increasing command or control of bracket done. No, you will. You can see the These directors have ah bordered with them. So let's fix that. It's a left. All the rectangles from here by president. Come on or controlling, clicking each one of these. Okay, tangle 3654 And moving the border from here. Yeah, cool on this looks decent. In my opinion. Let's bring in our court. So there's the text trail in your exercise. Wales called Court on. Let's make her textbook. Soto created extra folks click on B, including drug. Now it shows the guide. So it makes it very easier for us to create this textbooks and based done. Now, let's increase the hard border guard early learning. I think their distance between the lanes. Oh, just doing defy right now. And, uh, okay, this looks good. It's change those tired to regular on it's sport this dash. Okay, done. More tell sort ALS. Yeah, we have to put a black rectangle behind, but I live for so we can do this Not by picking the for external tool. Do you deny rectangle like this? Okay, don know. Let's remove the border and change the friend colored white and tear center to back by pressing control or command left bracket. Oh, before Putin is the color. So it's me like me. And do that control that Andi used to color to black Actually, I don't know. I made her by again. Now let me send it back the right click on this text layer and select. But I lived for and he's the color to write everything down. Wait, I'm sorry. Come on, say to me, Send this to back. Yeah, No, really referred. Andi White Done. Okay, so what? One pages done. There you go away. I don't know, Guys, buy it. This is happening. But the smart going over here go away. Uh, full crew today, designing our trend over a nice nice. Okay, so where we are done with our homepage in the next video, I will make another page off this website. I don't know which one to make. I think I'll make the sun. This one looks scored in the next video. Let's go through the process of making the speech on DA. I'll see in the next run by 13. Project page: Okay, guys, welcome back on the now. Let's create our product beat. I will start by duplicating discharge board on. We can do the repressing the old or option G on clicking on a web on dragging no other city name our our boats might double clicking on the name typing Hoon, This is our city likes, um Now let's bring in the pictures. But first letters believed on this. Really going believed. Okay, now let's start by bringing in the pictures now, we will be using the street pictures. This one, this one on this one. So click and drag all these into your 60 project. Yeah. What is the 3rd 1 registered? Now? Obviously, there are differences. Let's lift you, then make them a but smaller Let's keep them here for the time being. First, let's skewed rectangle. Okay. And your law in a second. Why I'm creating this rectangle. No, it's fill it with random color and remove the border. Yeah, I'll make a duplicate by pressing the older option geek looking on the rectangle and dragging again. I'll create one moved by clicking and dragging. Okay. Mm. Yes. No. Let's bring our photos on my own um this fordo is in the same. Yeah, spring there, Teoh May Could be there. Foot alert. Select both off these now you can make a mask by pressing control. Shift em. Yeah, So that images inside the shape Or alternatively, you can select. Do you do shapes? Getting in dragging across right liquor mosque with cheap. Now it is important to remember one thing which is your image should be above the shape in which you want to mask the maids. So if you want to crop the this image according to this shape, then this image must be about the shape. So let me make good weather. Okay? Now we don't need to make a mask over this one. My brother does not visible in India, but let's do it. Selling the two and press control shift or Come on, shift em. Okay. Again. Bring your care. Oh, everything Snaps and extenders that certainly using thing. Let me make it bigger. Okay. Click and drag across. Controlled shift in or Cameron shift em. Yeah, Done. Now let's group these elements by clicking and dragging across and pressing Command or control G. No, these are grouped. Let's make them want, but smaller. Okay, now let's make the navigation boxes here below. I'll grab the rectangle tool and me this box, remove the border and fill it with black. Now, let me duplicated by pressing the older option geek looking on it and dragging across. Okay, I just ah, back to big. So like them by clicking and dragging across and making them smaller. Now, if you want to make those smaller from all the four sides, then press shift old and then drag so you to make it make the shape smaller from all the sales. If you liberals ship, then a dream make it smaller or larger from the top left point off the shape. Anything this size is OK. Yes, it is. OK, yeah. Now let's make via rookies. We can do that by creating a rectangle increasing the border size off the team, the feel of border, toe white and change the internal removed internal. Phil, remove the Phil. Okay. Yeah. Let's bring this thing here. Uh, no. Do you remember how my rotating it in degrees? I'm doing it by pressing the shift key, bringing my point there here on just dragging so by If you do this? The shape and rotate and 15 degree angles. Now, this is the type who been so specifically is to size. This is okay, I think. And now let's me go rectangle knowledge, celebs, rectangle and this shape by pressing shift and not looking on each of the ship. Andi, subject, I would wait for the other side also. Yeah, No, let's make the dissenters airline. Okay, that is a lie. Now let's group them by clicking and dragging across and person control G. Now, the last thing is, we are type city lights off here, so and nothing is visible because the color is white, soldered select all changed the filled toe black change the phone Bold on and And three is the size done. I'll make the rest of the pages And I will speak to Buff so you don't have to watch all of them. Okay? These are all the pages that I made in the next video. We will go through the prototyping, so I will see you there by 14. Prototype: Welcome back, guys. Now it's time for some True today. Okay, This is very exciting, because we are gonna be creating almost Quigley lanes in between these pages. I forgot the way. Make one page. But there it's, uh But it's a great opportunity for us to make it right now, So let me do it, uh, to lead. Yeah. And I love legate. This one. Now, the page I want to create is the drop down my new when we click on about all Sorry when we click on. Well, so when weekly convoy over, drop down when you will come Which herds? Which has all our projects. Um um agenda skis are circulates on holiday for the sake of district area where we are making two products when it's a delayed, Someone is already so let's the war. He didn't do that. We did this rectangle Dooley grow a rectangle on lips near the border off black. Okay, And I eep city lights inside off it. Okay, Make it a bit smaller. Mm. Okay. Let me in. Duplicated by pressing old and drag. Okay. On gover, click holiday. Okay. Now, when we live in work, this drop down menu will come. Let's make a few more just so that it looks good on daybreak. Maybe you key crazy, Luna. The layoffs, Writing down words which came into my mind right now. So during the week rear, don't go crazy over these. Um, and next let's created triangle. Okay. Excuse the colors to black Andi increase the size so as to match this. Yeah, Good. This problem menu is extremely ugly. And our final thing will not be like this knowledge's that even do Kroger taping. So the movinto prototyping click here for today. Okay, Now, when you click on any element which in this case is work this text, this blue color over voting issues off and I can click and drag Dude, this page orderly. Okay, let's play this. Okay? And when I click on work does just dropped on me new shoes off. You're in a certain So when I got a good word to this speech and again under to see the options Yeah, the action is overly so. This this artwork is overly Don't this one Now, when I when I click on now, let's say circulates so city lie When I got it city lights toe the space age on, um, action is the agonist transitions. So when I presently so delights now we can't go back because we haven't prototype despues yet. So yeah, next year's A Let's connect the home page. We don't need one in home pays here. We need to connect the home page here. So let's do it one by one will connect the all the pages to home base first. So you're pretending this to here on this here and this, Do you Okay, start should not go here. This home page should come head this home page shirt compare. And this home. Beecher, come here. Andi, this home page should also come here. This home beech comes here. This home piers also comes here. No, the action here is over live. We don't want that. We want to transition on from here. Also, we wonder transition, transition Mm. And runs a shouldn't for transition. Okay, I would Sure I should have checked right now. Really? Only Franza shuhn transition. Okay, so now let's connect the work page of your all during the night. When you click on work, this menu pops up. I hope you're getting what I'm trying to do here. No, it's gonna view project to Yeah, I understand. With is the transition And when I click on this, it will come here. But the action will be early. And when I could condense, it will go here and the action will be orderly. Let me play this. Oh, I need to check it. Plea? Yeah, actually, any mission, Andi Mission Play work. City Lights view project. Yeah, Onda all it's gonna be about Paige. The option about in all these great is very Come here on this page. So let's do that. Hello. About is this one and we should gonna start one toe here and we need to connect this send to if this isn't overly on ammunition is none. Okay. Next, this contact on the contact is lost one. And we need to connect the contact with this year. Done. We are done. Onda, about a stern work is done. Home is done. Contact is altered. If I in my row type, let's make me goto prototype When I go to work. When I want to city lights and I won't be project here. When I click on work, it will come here. This is happening because we have not connected work to anything. That's why it is going here. When I click on this page and I play and when I click on work, nothing will happen because it is not connected to anything. So I hope you're in destroyed Ward prototyping is let me play it once again. So when I click on about and goes to about maniacally one more died. It goes to warn dark. I'm unlikely gonna work. Nothing will happen because we haven't penetrated this. The this work on this page from decide would do anything about that work home work circulates of your project on When I click, I go back your project next. Next, Next, next. So yeah, this way you can procure Dave your website and ah, a nice woman. You can see that Is this home I can hear it was Does the first start would that recruited our If you don't want this to be home, you can't make this one home. This this hardboard home by clicking here. Now, this is the home page. But I didn't need to go back in here. Yeah, this is the homepage. Actually guys, you must have noticed wanting this. Uh, this photograph is out of proportion on his because I already I'm Agelessly out in illustrator before beginning this tutorial. And this is the file on which I practiced. So he's known mine in the certain proportional image. So yeah, this is this is the way. This way you can cook a tape. Your website in Ah x'd. No. If you want to share your website to the world, you can go here and you can publish for today. On the title is support for elects Merge A answer to website portfolio of upside. Um allow them. It's often full screen show heart sport paints in or create a public link. Okay, now it is offloading in tow. The or movies or worse, for everyone to see. It's done. Now you can share it from here. Open browser copy link or the embed embed code so you can copy link link open. And then you know you can go to your browser window and beast it present. And here it is. Your website is live on the movie Star Wars work circulate of your project Next next, previous legal here work about guns here. Contact comes here, so yeah. This way you can send the order website to anyone to check. And when I click, you can see a negligee. Outsider chose the heart sports. Where, uh, Where? There are options to Clayton. This will be all for this video hand. I'll meet you in the next run by 15. Plugins in wordpress: All right, guys, welcome back How? It's time to deliver state in WordPress. So let me tell you one thing. It might get a little bit confusing at times, and at times it will be a bit technical. But don't fret. Follow what I'm doing at any point. If you have ah, confusion, then just common below and I will get back to you as soon as possible. So let's begin now in our Azam Goodwill panel. Let's start the party. More duel on the my scale model Start stocked. No, You know Broza Ah, what we need to type. Do you remember? We need to Dave Local host slash And what was the name off our databases? Ah, later. Much. It wants portfolio. So be or, uh be or arty portfolio enter. I do. What will we get? And we get nothing. Team created by Rana Parmar know where did this come from? Ah tell you just read for it. But to log in what we need to type is port for you slash w We had men on press enter now The user name is Ronaldo for 72 my password is Lahtela. Lola Lola Logan. Okay, welcome to WordPress. We have assembled some links to get your starting. Okay. All right. Now, first, let me tell you how I got my name of their Ah, what I did is I went to obedience teams and I installed this team call intentionally Blank . Have you? Don't. I would just go to our new on sores team in Ben. She ona Lea Blank presenter No deems home because the spelling is wrong. It is already installed for me. So yeah, let's go ahead and install it and activated. Okay. And after you have done that, you need to go to agita, and they're mean and ex template. It's going down. And here it must be something else in your in this last section. There must be something else. Positives right now and see where my name is written where work is written and do the same for your team. All right, now, let's move on. And let's begin by installing some plug ins. So go to plug ins. I knew Andi. Search element, our first. All right. 11 Darby's. We learn and store now. Okay. On while we're 100. Let's install premium Adams for Element Also for three memories for a limiter does is it adds the premium functions that are available with element or pro done on Active it active it. All right, let's go to our plug ins. No, we did not accurately wind or solar Stewart now 11 daughter activity. Now let's move on. And our some more plug ins, which will need So I knew the next year's beach simply. I hope I am writing the spelling, right. Ah, Element Or I should be here is how that yes, this one So paged emulator for a live indoor install now and activate Now we need to add some more plug ins next year. Stylist This one, It's don't know activity. Next is Vidic it again? Night. There must be some spelling room here. I don't know search for delivering Gordon and it should pop up this one with a good for the liver door. Install now activity. And we need this whole Now my new I don't really window rolls. All right, let's go back. And now menu are known. Install. That's it. We don't need to install anymore. Bludgeons Andi, activate. So this is it for the for this video. All these plug ins will, uh, help us start building our website. We need someone elegance. But we will install it later on as we go through the structural series. So I'll see you in the next one in which we will create pieces which are in our website. So I will see you there. My 16. Elementor workspace: All right, guys, welcome back. And in this video, we'll go through the different our workspace. As you can see, when you open the limit or for the worse trains his water, it looks like towards the right we have our navigator towards the left. We have our panel which basically has everything. These boxes and these are the visits that are available for us to use. When you click on these three lines, you have these options to stake their default colors before foreign except er And when you click on this, you'll dove idiots. And here, the global have just now in the hills not available in the free version off element talk. So don't bother going there. So elements these are all the widgets are elements as element or culture. No, there is one thing One interesting thing about delivering door witches that these basic elements on the general elements These are available in 11 door New Delhi on the wordpress elements. These came from the WordPress CMS soul. If you are using a limit also outside off your dress, which I guess is not possible, I don't know, But if you are using any other cm if you're sorry, if you're using a limiter in other CMS and these options won't be available similarly premium Barrantes. Now, these a rounds came from one of the plug ins that Winstrol all the premium channels for delivering taught and these ones the educated Deliverance. These came from one off the plug ins card. Would you get for element Dark? All right, now this is this makes 11 door over here. Then I we can It can also be expanded. Just like wordpress can be expanded. Right. We can be expanded. WordPress is functionality by installing a living coroner. Similarly, we are enhancing the usability of 11 door by installing these plug ins specifically made for a limited time only now words the center. What we have is this is our work area here we will build our of sight. Now, let me close this now and we have nothing. We've also be having made anything. You're right if you wear it anymore. Um if you want to review, just close this panel. Just close this panel on and you will be able to preview it. Okay, Now in the center, you can see this Is there Is this plus Aiken. And there is just for liking Now when I click on Plus, I get this. What is this? Now? These are all the sections, OK? This entire thing is a section this and darting is a section a section a section on these divisions are the columns. Now, if I click on this, I get a section with one column inside off it. Just look at their navigator. There is the section When I open it, I got a column which is empty right now we have nothing on to fill this column you can drag of Eject on. Put it here. This way you can feel in your columns now, Ready Later. Okay. And let me click on plus again on Let me click on this one. Now we have a section and we have three columns inside offered, so we can put different rejects inside each one of them. OK, now, word I dated, I dried in a section inside the column. The has a very confusing there is this outer section which contains the column All right. And inside this column you can also put a section by dragging dis option this reject and doing off these. Okay, so there's this outer section now, and there is this intersection which has two columns, and this one also has two columns. And this section has one column, so basically disorders. Um, I know it is getting a bit confusing, but help me out. This outer section currently has two intersections. This oil on this one. Fine. One column, which is this one towards the right and the inner sections. This one and this? Well, how to columns inside off it all right. Now, it is crucial to understand this because, um will be working on these sections and columns a lot. These are the building blocks off website. This applies to every webpage on the Net. Every layout is made like this only now these way, they might not be Varla section or column, but they are definitely, but they definitely use layouts which are similar in nature. All right, so we let me leave this for now. Okay? Now let's move on to this four letter. I can. Now, when I click on this, I get this. These are all the pages these air alert completes like that available for us to use. Okay. Now, As you can see, some of these have product on them. Now, These, um these layouts are these templates are available with are available only in the pro version. Which how Pruitt on on the ones we stoned have anything like this one. These are available for in the free version also. Now, let me insert it. All right. As you conceive, IANS are drink that paid. Here, let me close this. Okay, So this is how the baby looks like. This is a very nice option. In 11 door, you can meet over peace in a second, actually. Now, while you have to do it, I did these logos and er on the videos, things inside of it. So let me scroll up and open this and I continue this Aiken, by clicking on this ongoing here deleting Earn an equity leader. Hang bring in our local Ah, thank you. Here it is. This is Arlo will insert media, so Yeah, it does this way. You can change anything in this particular template. All right, now let me open this and let me click on this section. The section are doubting when I click on this in the winter spinal. I get these three options layout style and advanced. And in the layer panel, we have all the sections under his crucial straight section. When I turn it on, just look at the space and the side space here. This one. All right, This one. Just look, I did when I done it on Yes. All right, it feel it in our section is stretched across the entire Pedes 100. Me. Open it again. And columns Gap. Um, there are no area. This section has called him. So when I click on this section expected I Goddamn scab. No gap. Now there will be no, um, the stands between the columns. As you can see her. These two columns have no distance between them. These two are life catching each other. Okay, now let me scroll down. Now, if I want to change this particular for Tiger and click on it. Andi, look here. I just like this one. Maybe, I don't know. Maybe this one insert media and it comes here. Now you have to crop it before. And if you want a circle, he had to do with that in for trouble. Some other images getting sort where if you want it in a circle and then imported so you can addict the these pre made templates that are available to you. Now, here, I would like to suggest one thing, which is Let me delete it. Okay. Okay. And let me bring in another one. Um, let's bring in this one. And so I know I'm bringing that one because I want to suggest you one thing. Yeah. I want to suggest reminding which is study these templates, how they are designed. Just click on the section and check out all the properties that are applied Goto style and check everything outward. They have done all right, Goto addressed and check out what they have done in everything. That way you will love on a lot of things of Lord Off things. I learned it like that. I started all these templates on the then I created my force. Every website in 11 door. All right, just ready. These are new. You learned down off things are a lot of things. Just look at everything similarly went. Click on the section and study what they have done. All right, as you can see. No, this blue dispenses blue in color, which means our style is of light years opening. Click on this. I can see the style is the style that is applied is the size is 55 Every destry 100 uppercase exacta. All right, the study, all of these and you will learn to sell a lot of things. Okay, let's move on. It will believe everything. Barton Uh no wonder it moving and every dio Now you're going directly about a link here on and you're ready. We'll start playing whenever you bring in a reject insider column There will be three options here. Always the 1st 1 will vary. According Toa Davidge. It actually the 1st 1 and the 2nd 1 will vary. According could've injured that you were using and the 3rd 1 will remain the same. Always all right, style country. And as you can see, this is a video predict. So these are the options that are available in it similarly in style. These are the options are not available entered. My contains our issue like this our CSS filters. I got bored like some things on it. Like I'm blooded. I just right now is going to be exact. Great. Now go ahead and check out all these of idiots if you like. And in building the website that we are creating, I know you'll. And most off the widgets that are important in creating any of the website rate. Okay, Now the last thing and the final 10 I want to show is here, below these options. As you can see, these are the settings you can click on it on DA. You can change in the general starting Staters will accept. Drop easily out. You canteens up easily out from here. Also on the next one is navigator. So you can bring in or hide your navigator from here. This is the history of job. As you can see, these are all the changes that were made along. If I can click on here template and I'll get the template back yet it does all right. The next one is responsive. More. No, this is a bit important. A nightclub on decided these three options. Now, when I click on tablet, I can see the works be exchanged. Now it is a tablet. All right. It's in just amusing. And when I click on more way Leggett. A mobile is where you can create responsive websites. All right, on a preview changes When I click on this, I can preview what I have done below. And we are not seeing anything because we have not updated it yet. So if I click on update and then go here, I get this. I get to see what I have done. All right, so this way you canteen is a responsive wards. All right? No, This is a very basic overview. Off element are and you learn it in depth as we go through the street. Auriol cities. So I will see you in the next one by 17. Navmenu: Hi, guys. Welcome back. Now let's make some beaters. So I hope the prototype off our website is open in front of you. Just look at the menu is created. It has four options which are home work about on contact. So we read a page for each one of them. So it's true that pages I knew our new page home on and before doing anything before publishing and go door template. And here, select page. Very love. Full word blank. All right, on publish. Now this option game, These two options piece build a full right on the page where love full when blank. These two came from the plug in Beach Dem Plater. All right. Next our new beach And it is our work. W o r K andi again, he is really awful. Ripped blank publish again I'd new about for with blank publish And one more last one. Contact se o and D. Hey, C d is really careful with blank Publish. All right. No total pages. No, these are all the pages that we created, but we need two more. Just look at your prototype in your navigation menu. Click on work and the drop down my new pops up. And it has four more options, which are satellites. Holiday. They dream on crazy Luna now in the street area. We're not creating the last two, which is the driven crazy Luna. So let's are the He just for the other do. All right, let's go to our new on board. So the lates is really awful with blank publish. One more. I knew hardly there Israel awful with blank publish. All right, we are done. No. Now we owe created all these pages. Andi being to create a man, you know how to create a menu. Go to your appearance panel. Goto Teens We have this intentionally blind team actor right now. So totally gone. Customize hair goto me news and create a new Manu. Give it a name. My new Well, let's call it now. My new next. Add items home Holiday City lights, Contact about work home. I mean, during your home again. All right, let's are injured home after home. We need work after work we need about and after about. We need contacts on that and holiday comes under work, so just bring it a little towards right and it will become a self menu. Similarly, Brings circulates up on bringing it towards a little bit. Right. All right, Done. Next publish. All right. Now, Cruz, this Goto Bages go to home ended with element door and you will see this. This is how element door looks like. This is own navigator. Let's schools this for now. Let's first I'd ever menu so scroll down on drag before now may new from here. So here and what you have is nothing. You need to select the manu first. So go to select menu on Click On now when you done And this is the menu that we created home work about on contact menu location Primary Onda Look ideo a design and look at this and see the difference we needed in the certain though. So now we're toggle alignment on SingTel and it isn't designed. Dunno. All right. On a plate. Now we have created our menu. In the next video, we will style this now menu that recreated. So I will see you there by 18. Style the navmenu: All right, guys came to get stylish. Know that style or now menu click on this on. You heard. Get here. But for moving ahead, literally wanting, doing anything here with large jeans. Anything in our menu Because this is the section. This outer box is a section in a liver indoor and we add widget two sections. So if I click plus, you can see these are all sections. So I can create a section which covers the entire wit. I can create a section with new subsections or three or four more with this loud or with this particularly out or this layout and so on and so forth. So in a limo indoor, you have sections which has self sections inside off it. So the sale section And if I click on this, we have this. This is obstruction. This is another subsection are It is also called intersection. So if I want to add one more section one more intersection who this outer section again go here. We're all over with its low. I can drag this intersection here, and we have this All right. So will it mean believed all this? Okay, go away now Let's stay lower now menu so to style or now when you you need to select the intersection. So click on your now me nu, then go toe style The background color We have his none. So make it transparent And you see this The link color is black in our case, just referred to your design. Whenever you don't know what to do, just look at your design. None changed the background toe white, the link color to black which is already black background color. It could be bartered ape None. All right, now go to sub menu. Now what is so many a sub menu is the things inside work. So when I hover over work, I see this This is the submarine you We need to style this also. So some manu the color of sub manu links is black and some menu background is white. Okay, now, when I heard over the, however, these I should see some changes, right? So let's do that. So many link our let's make it white on so many new our background. Let's make it great. OK, so now let's look at it. Nice. Nice. Okay, now let's change the phone. Andi, do you remember which one did we use? It was discarded. Mourn set are so click on your knowing you again would go stale. Scroll down with typography and click on this pencil in the family. Click here and search for more Sirat. Now it does already. The Morningside Art is available in Elemental because it is a Google phone and all Google forms are available for everyone to use freely, which is very nice. Solarte Celik mourns art. Okay, on increase the weight, which is 700 in this case. All right, this is taking some shape. Transform. We need everything to be up our case. Okay. Decoration on the line or line. We need nothing like that. Letter spacing. All right, We don't need that. Also, let's degrees the size that is too big. So grab hold of this later on bag. Okay, this is fine. This note to prove your peas in the entire page in desert diarrhea. Live on the straniero thinking Andi, you can prove it. All right, this looks OK. Okay, Let's do one more thing in the sub menu. Ah, North's of menu. It's and content and mobile item a lineman salad center and what this will do. It will make these centered okay, And when I click on this, it goes to the left. And when I click on sanitary, it goes to the center and the soil will take those options. Tour straight. All right, guys. Now we have stay lower menu. It's time to add the background image. So let's mourn and I see you in the next one by. 19. Navbar BG Image: Okay. How alert sport damage that we have in our design. So to do that, go to style and in the midsection. Take on. Plus, now there is a full learning your exercise files called Rob that for that has all the images which are dropped according to the dimensions which we will be using so open of your crop for learn and import damage. And as you can see, I've already important it. So here it is on I'll click on it on inside media and it comes here. Look at this. It is very tiny. I know what it is here. So how do in reserved Saiz, Um actually, it say's will increase automatically as we are things to this section. So let me show you how if I go here on being in a spacer so and and dragged below over now , menu. You see this this the size of the photograph. Increased fire further increased the size off the spacer from here. Okay, so this way you can increase the size off the photograph. All right, Now, this is happening because this photograph is the background off this particular section style. And here it is a play and look at all these settings also. So the position is saying that, right? All right, let me show you When you import when you will in border, everything will be default like this. And you will see this toe. Get it? Like we warned. You need to. You need to go into a position makers saying that right? Attachment fixed. Could it be nor the beak and Saiz guardian. Now, this is all pretty self explanatory. I hope you in, Mr. But if you don't, If you don't understand it, just put the settings in which I, which I am putting here, all right. And you can see the photograph is here now, ironically, going to space. Certainly increase the size it's here. Okay, so this way you can put in the photograph. Now you see the space this space at the top of here. We don't want it. We actually warned or our photograph to start from the and this from the top of the speech . So to do that, we need to we need to move. This entire section doesn't jurisdiction abo on. We can do that by going into advanced and in the margin unlock these values, and we need to take it up in this section. In the top section, click on the down arrow. What it will do, it will bigger section about as it is going in the negative direction. You see this ministry, okay. And I don't know. All right, so this way you can move in their sections. Okay, guys. So that will be enough for this video. Ana, I will see you in the next one by 20. Template in Elementor: All right, guys, Welcome back. And in the last video, we made this. So before moving forward, um, let's see. Or now in new on lower logo, because we will be using these two things in all of our pages. Right? So let's go ahead and do that. So open up your widgets panel on the believed the spacer because we don't need it. I Let's delete this background also, because we don't need that also in all of our pieces or delete. All right, now click on the section. Right click. I don't see us. Template. All right, so So us. Template. Give this your name. So who's the head off? Our website rates. So there. Okay, Thank you Can say. All right, we have it here. So whenever you want to the user just ah, who's this? You can do that by going in this folder option. Click here on goto my templates and it is available for you. Do you? So if I press on inside? Yes. Yeah. See this? We have our never menu. All right, so this way you can import your your templates, so we'll definitely leader for now. Onda, let me bring back our image. Okay, so this way you can greet on sale templates for right So as he in the next one by 21. Text in our homepage: Okay, guys will come back. Now. Let's write our text. Own your style here. All right. Andi, I hope you have your designed open in your in front off you. So whenever you get confused or anywhere you don't know what to do. Just refer to your style that you greater. So let's type when your style. Here. Okay, so one of your widgets panel, I'll bring in. Ah, and bring in an extra later below our logo. And about our spacer. No, your style. Go to style on Spell it. Okay. Where did it go? All right. And in the typography, we need to use which foreign data from a more inside. Right? So I m o and E S e r Moore said right? Coun in Greece the size on the weight the way it is. 700. In this case, on transform style, we need only do teen anything else. Cool. Let's stick it. This looks recent, but we need to increase the size and more so yes. Now let's move it in the advanced random click on your text. Goto the margin. All right, unlock it on from the left in, please. So this will move your text towards the right. And this deception is available for all the elements in your puppies. Now, this is ever too much to move this on your style. Up. Go to advanced and in the margins. Action from up President, Down this down button. All right. Agreed. Dig your element upwards. Okay, now let's move. Style below. Okay, you can do that by just clicking your back speeds. And Steelers style has come down now. Now we need to make this distance smaller, so we'll go stale. Oh, typography on in the line. Height increasing slowly. Our decrees it. Yes, this was playing. Now that is a bit smaller and it is too close to our logo. So Well, let's fix start. It's in Greece the size for us and bring it down. Advanced. And from dog notes in, please, this nice. This looks nice. Okay, Now let's bring in our court open of your widgets panel. Bring in an extra leader on DA. Make sure it is below your ex layer on your style and about the space are all right. Hard. Any time. If you're confused, that which Lear is where just rightly, anywhere on your work area and goto navigator. And here you can see everything. Okay, so this is the section which is this one and the column this indicting Andi for now may new , which is this one spacer, which is below the now may new. Then the image, which is our logo Extra deter this our own your style next. And it extra litter, which is this work on the spacer at the bottom here. So bring a let's bring in the court. So they reserve X trial called code and your exercise fails. So open it up and copy the court and bring it in. Quote based knowledge fixes Solarte style it first Moto style X color black typography. The foreign does mourn. Set out the size is a big bag. So let's fix that. Mm, yeah. Sardine. Yeah, for dina slain. So now let's move it towards the right. And to do that, open the open of the advanced Randall. Unlock the margin, and from the left, increased distance increased the value. So line it up with awareness. Okay? Done on from the right. Increase the value. What increasing with this value from right will do is it will make this area for this text smaller, and it will bring down the text, which is like going up there. Let's just increase the value on you. You will see what happens. Okay, so this were that extra come down on its own. Don't presenter. Because that will mess everything up. Okay, Now this is taking some shape. Yeah, We're good to go, I think. Okay. So this is all for this video. This is taking some shape. In the next video, we'll put the black box around our own on Dr Leavitt for All right. So I will see you there by. And don't forget to update your Pedes as you make changes. All right. So I'll see you in the next one by 22. Elementor error: All right, guys, Welcome back. I hope you are doing fine. So today I log into my WordPress denies our pool updates for waiting for me. So let's do that. I have Great. Okay, so we have an update for peace Temp Later on, Remember Dons. Let's update alert. Select all iron update plug ins. His timely river element daughter greater it successfully remembered on separated successfully dissembling within a small ball of leaders have been completed. All right, let's move on. All pages on We were creating our home page. So when bays every Dwinell Ayman Dar and the preview cannot be loaded We're sorry, but something went wrong. We can learn more OK on this might happen sometimes. So let's figure out how to solve this. No, dy generally happens when a plug in suddenly starts to myself with your element. Or let's go to install plug ins. I think we need toe be activated The classic Erica. Okay, Andi. Knowledge Spragg in Bages home ended with a liver indoor. No, go back. Alright, guys, I found a mistake. Actually, What was happening is since we have waited the plug ins, right, we have Richard this plug in we updated now? Ah, peacetime leader for limiters award that there it is. Ah, when you go to pages more distant or dubbed it is in our home bids it means that template to default template. That's why l a mender was not opening. So let's denote again to full word blank on update. Now it should work ended with a limerick door. Yes. So we are back on DA. These kind of small mishaps will happen when you're working in a living dark or don't fret , Just take a deep breath and try to find a solution. All right, so let's move ahead. In the next video, we'll put the background Joe Bradley Whitford on own. So I'll see you there by 23. Black BG behind words: Alright, guys, let's begin. Let's put the background behind the world one on rightly Whitford. And we had to put a rectangle here also a black colored rectangle. So let's do that. To do that with what you can do is bring it in, bring intersection and put it below the world when your style and fill it with black and bring it up by doing that will miss your design of Don't do that. Trust me. I've done it 100 times going Bricker intersection for this kind of stuff. What you should do is make a new section all right, and bring in us. Be a sorry inside off it. I'm fill it with black. All right? No, Make it smaller. All right, on you can. Ingres. It's size. All right? Just wait a minute and you'll understand. What am I doing exactly? All right. Done. Now let's change the color of the world own. So go here. Click on interesting the school wall, toggle and change the color it away. Done. Then go back to your section. Click on the section. If you parent just selected from a navigator, then go to advanced advanced properties off the section, nor the inner section nor the spacer. All right, go to the properties. Off the section advanced. Unlock the margin in the top option. Just president. Downward arrow Key Soul What this will do. It will bring your section up. But wait, Stop. Undo it. What we need is we need another section for the world bride livered for All right. So bring it here. Only if you bring the section up here without bringing another one below this for the world . Rightly word for then, um in What will happen is when you bring this up. And after that, when you bring another section, the new section really comes on. We're here. All right. Just below this, just below this section Let me show you what I'm talking about. So if I go on, get to on 600 psi 600 is a bit too much who aren't regular, etc. Now if I bring a section does he does it's here on now. It is very difficult for me to was just selected and do anything with it, so don't know that Just are you everything? Let me believe this section on. Bring this section down again all right to do it properly. Just make the minimum height off the section larger. All right? And to do that, click on the section, go to lay out and then goto content. No, Go to column position and select. Stop. All right. On this will bring your space Are up the column up. Okay, Now increase the minimum height so as to keep the new extraction, which will create for the world Bradley Whitford as far away as possible. All right. Okay. Now, let's bring the section off. And to do that, we're gonna section goto advanced on, make sure that I lose on linked and in the top option going again. And this will bring your speed set up, actually, just bringing the entire section up. Okay? This is decent. Let's fix this. Select your spacer. Go to advanced, and from the right from the left, increase the value to make it a bit tight. Okay. All right. We need some more. So let's decrees it from the right. All right, this looks good. Okay, Some off you might experience a problem of it is that you won't be able to see the world on on battle because the section, The new section dissection with the space, it will be about the word on your style. Okay. And to fix that, just select your earlier on your style from the navigator, go to advanced and increase their their index. Okay, so this will bring your XT about DSP, sir. Okay. I hope you guys are getting more that I'm trying to say, Um, now, let's put the background for the world Bradley word for it. So let's go alone. Select your section on and you can see it's quite tall. And it comes until here. Now, are there new section? And as you can see, it is down here, which is a good thing. No, go to the video. It's panel. And bring in a spacer. Fill it with that. My grown my grand type. Color black. Okay. On the greaser to size. So I'm open their vast family from the Marzen. Unlock the Mars in values and from the right. Just type 700. All right. Finding the host, Wayne. Yeah. And from the right. Also from the left. Also. Okay. Now, before moving forward, let's seems the corner of dried liver for Dwight. Just click on it and you'll see this. So, like, the select the word Bradley Whitford on the other text color to wait. Done. Select your section. Actually select this section on decrees. Ertz minimum height. All right. Nowhere is the word. Bradley Whitford it is here. Yeah. Nice. Okay, there, it's fixed. This All right? Let's degrees the size and bring her down a bit. Okay? Okay. Ah, you see this? This has gone bag. It has gone back. So let's preview it. Let's updated once and preview. Yeah, we heard of extract. So select the spacer order. Advanced? No, actually. Go to section a glance. All right, Okay. And lay out on degrees the size. All right? Trust me, guys, this is the best way of doing this. And when we will animate, know when we will animate, he will understand why we are going through all this pain. Now, let's bring in another section for direct angle, which is here after the words stale. So necks just closed all this up on bringing a section. All right on bringing us be, sir. Okay. Now you've aren't bringing SP, sir, so just bring it anywhere. Here it is. I opened the last section and dragged this from here to here. Okay, so this well, so you can move your moved elements inside the column. All right, now, let's fill in. Fill it with black color. So advanced background, my ground type. Color black. Okay. And to see him doing again and roused. Oh, so you advanced. I love the margins on from right. Increase the value. So let's make it 500. I'm from the left. Let's make it 400. Okay. On content degrees. Dirt's height. All right. No click on the section. Go to advance. Unlock the margin values and from talk going toe the negative direction. All right, so this way you can style your page. Now, as you can see, we don't have the entire for the out of here. So let's bring that in. Open up. Your with their spinal. Go to the forest section can increase the maximum height. Now just will bring everything down and we allowed to fix it. Now, as you can see, we have a problem. Everything is too close to the bottom. Bullard. Six. Start. Open up Your with your spinal. Open up the first section. Select the default. Now me Nu on Go to advanced. Unlock the margin and from top go into negative direction. Now, just one lord, move this sections which are below All right. You need to be very certain where you are walking, you know? Yeah, This looks OK. Now select the section on. Go to advanced and go about. All right. All right, guys, this looks beautiful. OK, now there are some minor tweaks, so let's do that. So open up your with your spinal open up the section. So, like the extra Dido go to advanced and from dog. Okay, nice. Nice. Now one last thing. Now, when you unlock the values on decrease their top value. Nice. This is what we want Now alerts Fix something some more. We need the sub menu, Toby. Bigger because there is very small solarte spoon art. Yes, you can. I just heard by going into selecting the you can are just this bag with selecting the now menu from the navigator, go to content. And in the so many region there is this Peiding option. All right, so you can fix it from there. This is over too much. Okay, It's updated on a ticket Well, there are minor problem solar to fix them. Yeah. Yeah, this is nice. We're calling. It is a delights on one last thing. This section needs to go. No. Yes. Update nice. And we are done. We're done with our home page. All right, guys. So has he in the next one. 24. Animate: All right, guys will come back now. We're done building our homepage. I live. It's time for some animation. Who is excited? All right, so one up your weather. It's panel on. Don't look at the weather is when I look at the navigator here, you can see the section is selected. So if I click on this section and go to the advanced menu, I can see the animation option here. Now you're likely confidence. I left feeling you can see their entire section foods and let me review it. And nothing. 11. Yeah, it's all that. Okay, now we want the navigation. May new to drop down from about. So open up the section. Select the default now me, nu, go to advanced in France Animation fading down. All right, now review it. Okay. And this looks prezant where there is a catch. Since we have an animation applied through this section which is Frieden on, we applied, another animation will default. Now when you which is feeling known? The problem is both of these animations are starting at the same time, so we're not seeing the animation field in down properly To see it properly, just introduce an animation dele off some seconds, maybe 200. Explain. Let's review it. Yeah, this is okay. Or, alternatively, makers zero on increased the animation duration. Who slow now? Privy it. All right, But I don't know. I don't like to do this because it just makes the animation slow, so I'll make a normal and increase the animation delay. 200 maybe 300. Yes. Similarly, select The image, which is our logo. Go to Advanced and friends Animation. Fine, let's it's bouncing down. No bouncer. Bones in up. Yes, let's player, But let's get fungi. All right, Now we are the section on Do So like the spacer, advanced entrance animation bounce and right? Yes, in this section spacer advanced entrance animation bounce in left, last section spacer. I had asked an emission. Let's little did it or didn't. Whoa, let's privy it. No way. Forward toe. Apply the animation do on your stale and this. So let's do that extruded up and last in France. Animation. Yes, Tex Ritter Advanced entrance animation. If you didn't know. Yes, increased the delay reviewed. It was a bit too much, Marty. I know. And I was just playing around here so this way you're gonna animate objects in your with kids. All right, Now let me fix everything up. All right, Update. Okay. Now we have four more. No, We have five more pages to work. These are or were page about Rich Contact Base. And the two works like we have. So in the next one, let's make the world peace. I'll see you there by 25. Work Page: All right, guys will come back Now, let's make our page rate. So open up the widgets panel. Click on these three lions. Exert your dashboard. All be this. Go down work. Edit with element are okay. Yeah. Now screw alone. Score. Longs for long. Scroll down! Scroll down on whether to reserve. Yes, it is their slider box animation and drag it in. Now you must be wondering where is aware now we knew. Actually, we have to bring it in first. Before doing this, we should bring on now in you. So go here. Click on this. Fuller. My debates inside. Yes, on. We have a wooden How menu? What is it? It's got May. And here it is. Or now when you is down here, I'll go bring it up. Just drag this section about this one on we have are now menu in place. All right, now select the section time in the layouts panel. It's good section. Yes. Contend with 40 on who was this? And while Andi know? No, no, on I think column Gaffe Car Landscape. No gap. Yes. Now we haven't stretched in their entire section. Okay, again, open the widgets panel click on the section, Go to advanced. Unlock the margin values on degrees it off value. I it will. Eight hour a trick. Diego are visit up. Now. This came from one of the plug in start being started. Um, the plug in is vegetated for a liberal door. Okay. All right. Now, one last thing open, it would delay out Hi it for two screen. Done. Now, let's configure it open is okay. Modo section column Snyder box animation And here you can see there. Two options. Creative in visually. Next. Right Wonder veneer. So, anyway, click unclear. Dough seventeen's the title to Holiday City lights on university lights, Will. It is a holiday honored statement. Holiday holiday, All right? And he's the image. Oh, now, I already brought in these two images the air in your exercise, Wales. Okay, so click on this one. Insert media. Now, close this on open. Visually, she's the name. Do circulates guarantees a image. Dude, this one inside media. Okay, this looks pretty nice, actually. Let's revered ones. All right? This is a decent all right? No. Now let's configure the buttons. So element or style button? No, actually content. And here scroll down, but in text view project Really? Just let it be just a view on school. Where is it? So delights Land view No one last thing. You see this link button link. So we have to put the linked with this project with the circulates. So you can do that by going here on Goto satellites. And so, like this link Copy on Be assertive Best similarly, Go back holiday Copy when you're there. All right, based. All right. Review. Okay. Now there is a mistake. There is a problem, which is that the sub menus has become smaller. Solar. It's fixed. Act so open of this section column We've all now me nu, when suddenly knew a lot of values and from top it is 11 if you remember and from boredom. Also, it is 11. All right now alerts updated. Don't go here. Okay? For some reason it is nor chewing up right now. I don't know. Way exactly. Dashboard Okay, because it is Defour. Template came somehow again. This happens for no reasons. Sometimes in a live indoor. So just beware. If anything like this happens, don't fret and check out your settings. Okay? Israel er full write blank of the okay, Gaillard, stick it and it would eliminate bar on and review. Yeah, it came back. All right. Now when I click on view, it will take me to Yeah, which we haven't. Weird. Right now let's go back. Work holiday and yeah, yeah, In school. Back live on next. Now this plug in has a problem right now. I hope that developers fix it. When? When? The first time It we got an extra previous. No, it will repeat the same thing. I don't know why I checked it out in their website also. And it is happening like this. Only that is somebody off something. All right. I hope to fix this now. This actually, this is quite different from our design, Onda. We won't be able to create whatever we make design wise because we're using the free versions. Don't forget that we're using the free version of everything and who actually fit in quite well with our designs Style. Right. So it's OK. And this is done So overworked pages done. Now, in the next video, we'll make one off the project, peaches and I think I'll go with circulates, so I'll see you there by 26. Default fonts: All right, guys will come back. I wanted to show you one thing. It is the fourth straight. You can see that this foreign exchange and I purposefully did that. I want to show you something. Let me update it first. Okay, Now, when I go here, click on these three lines. I can see the four forints handy for forms are disabled. No green. A build. Um, click here. Andan. Take this option to see where the fall forms and check it and see you. Okay? No, it was this. I had a fresh the speeds. As you can see, it just seems because their default for inside primary Landover those secondary woodland over the slab body text a photo and accent text from Bordeaux. Now let's see. In their two months out, Lauren said, act all right. Find school open, apply and you're on me are done. Let's click on next. Let's actually previewed, friend. See, it's true. Where is ignored Working again? Good. It's exactly dashboard and close this 100 with element door date planned review now for somebody's until door copping so we will have to go and win, man. Really? And to do that, click on going to the slider box Animation go to style. 19 typography everywhere. Sore title Typography morning. Set up right away. It is not a plate, but anyway, we learned a thing. And that is how duties there foreign globally. This is a were letting Yeah, we're gonna do something of order. As you can see, our Lou is a bit field when come back to this background. So let's fix, start going toe color on decrease the opacity. Yeah, Yeah. Nice. Actually, person grease it a bit for any free. Make it right Like a swain. Found object. Now, Richard, work. Yeah, this is good. Next. All right, now our work is done. I know its exact dashboard. All right, look, I'll see you in the next round. Actually, in the next radio, I'll make go circulate speeds. All right, so I'll see you there, right 27. Citylights: All right, guys will come back on. We are in our circulate speech. Okay, so let's do that. Let's make this page dollars. Start by bringing in our head. Oh, mind M plates. Insert. Yes. All right. We have our header on DA. As usual, there is a problem again. Which me? Short fix. But I think I alleged with the stream because I have a much better way to show you guys to fix this. All right, so we'll let it be for now. I goto the weather. It's panels, cruel, down into the widget. Good elements. All right, on bring in. Where is it? The post carousel on. Put it in a new section on. Look at your design. Or do have we have three photographs off which one is in the middle and to our towards the side. And this is the plug in which will help us achieve that very easily. But before doing anything, just select the section on, make it full weight content to it. Full weight columns, cap. No app. All right, now we'll do post Carlos El Switch, bro. Greed this text because we don't need it. I believe the stump Neil actually on first. Important, these three files. Select this one in certain media. Scroll down, explore. Delete the text. Insert another for dough. Actually, this one and sucked do any worse. He died. I believe the next insert media. All right, it's privy it. You know, Allah, we have our work page. We have our circulate speeds. Now we have to tweak it a bit, So let's do that. Mm. We need some space. And maybe this our logo and, uh, and the visit. So how should we do that? I think advanced selling the post Paracel, Unlike the values from top increased Marshall. Yes. No, it's previous. Yeah. Nice. This is nice, all right? And we're done with our product peas. We can write city lights somewhere. Now, in our design, the circulators returned just beside our logo on. And I don't think that is a good place to write. So maybe you can write circulate in the middle. But maybe in the boredom here, actually, we should write it in the bottom here. So let's do that. Let's go here, Go toe. Whether it's panel and in the post. Let's, um all should related. Hundreds bringing on extra Dido below our post carousel. So it's what did here? Yeah, and teens or text to city lights. All right, Boiled bold. Andi. Uh, sender. Let's preview it. Okay? And things have found all those style typography. Morin said All right, review. Okay. His design just looks decent on. We're done with our work, Please. No. In the next video. Before making our about page on our contact page, I want to show an amusing thing regarding our now menu we should have made over now me, nu, in such a way that it is available in all our pieces. And we don't have to imported again and again. What, Every piece. Because that is not a good practice. That is actually wrong, Blake. So in the next video, before making our out and contacted, I'll show you how to make your now me nu so that it is available in all the pages. So I was you in the next one in which we will fix our now menu. All right, so I'll see you there by 28. Header: All right, guys are there. Now go ahead. In your plugging smiles on Goto our new on type in header folder element are and this really show up header footer element door by bringing strong force nickel someone. All right, so install it. All right. Accurate. Okay, it's done. Food every live in door. No food or eliminar activated. No. Goto appearance panel on into their photo Bilde on you have this hair up top. You heard Order complete. I knew future title off meadow like And then template a limb indoor forward selling the type of template this is This is our header And make sure you dis option because this particular to plug in supports only a few teams and the one which we're using right now is not supported. Now, in orderto make this plug in work with our team, you need to take this option. Okay? No publish. Behind ended with element are and we have this actually. Let's go back. Uh, 11 dog can waas abate. I did it with a limit. Yeah. Now go ahead and import our I don't insert. Yes, and we have it here. Here's fixed this now When you so menu. Unlock Top 11 Mortem 11 Andi, update. All right, knowledge School back. Exit your dashboard on goto our pages Flirts visit our home beach First edit with a limerick door Wala Okay, now we have a problem here. Why is there not coming here to school back on? Do? Actually, it is not coming because we have to change the template, Which is element, or can Woz update and now headed with element or and yes, we have our had. Uh, all right, now let's goingto this section guarded. Andi believe that evil Now menu the spacer on Lee image. All right, let's bring this section off. So, advanced alerts type in 80? No, we werent bored. Okay, now it is about so Well, let's bring it below. Was Aaron Alexis 49 Alerts Maker zero. Yeah, Yeah. Oh, no. But our one is gone. So whether it's increased this Yeah, it was back. Okay, let's fix this, um, Section advanced. I learned. Yeah, and we're done. All right, update similarly. Let's go back exit to dashboard on and fix our work Beach. So all these is work teaser compared with 2 11 Dark and waas. I'm a great ended with a liberal door. All right, let's believed. Actually, let's delete the section all together. And yes, we are done. All right, A bit similarly. Let's go back and do this for our city. Late speech. So all pages so deal AIDS. Open it up. Template element organ waas update ended with a limerick door on Billy this section. Yes, and we are done with our header. All right, so update on Exacto dashboard. All right. Now what is left? We are left with our holiday bids. I never contact beads on our about page. So in the next video, let's make the contact base to let me open it up first. It's perfect here. Only you contemplate 11 dark and was on a plate. All right, so I'll see you in the next one where we will make our contact page. So my 29. Contact Page: All right, guys. Welcome back on. Now it's time to plead or corn dark deeds. Now, before doing anything heard over to your Blufgan. Stab on, Goto our new and search for later. All right. And this will pop up letter forms more than contact forms. Go ahead and install it and activated. I will. Really, Leonard. So, yeah, just install it and accurate. And then after you're done that you will get let off on there. All right, click on it. And you won't see this because there's actually have already made one contact form. So let me the leader right now. Okay? Okay. And it's gone. Okay, so this is what you will see. So let's create a new form from here. New form. Um, now we have videos, options. So let's go over the first run. Contact form? Yes. Click on it. Name from name contact on great form. All right, Now what we have is this. Okay? And this one looks descend. Yordy deals name, last name, email address. How can we help oncoming questions already? This is designed. Let's do one thing. Let's being this spark about and lets the let's Brenda this part of the D Day? Uh, yeah, he already did spark below. All right, so just grab on it and drag it up, All right? A similarly grabbed this. Drag it up. All right again. Okay. And your retails alerts, Billy, These? Um yeah. On what? It's Yeah, I guess it just looks fine. Um, let's prepared. All right? It is not proving right now. Also, let's see what first updated on email from name when I was on ones of birds of form on your website. Um, this will be the name from Reggie Will receive the email. Alright. Safe iReport car. Let off its notification here, Then the milieu will receive from the form will be titled letter forms. Notification. All right. I would like to change the two portfolio website He made Michaeli portfolio upside form. All right on from email. This is the email idea where you will receive the forms letter submitted on your website. So if anyone is submerged form on the website, I will see you the email on this email lady. All right, now leave. Everything else is on sale form. Okay? Updated now go to pages. All pieces on contact. Click on it and make sure. Do you have a limb and organ was here. Okay. And ended with the element door. Oh, my dear. Forward one thing. Okay. Yeah. We hope that letter form here. I don't form or we can bring it from. So here is our form, All right? No, it's revered months. Okay, here is a reform, and it looks decent. Okay, The other way of bringing it is just literally, Leader, uh, believed back. You age. Go took our letter forms. All right, Uh, look on the form farm settings and get distinct short code red co Penis. Copy, then Goto Page is all peaches. Contact ended with a limit door. All right, let me bring now You're to bring a short cord. So here it is, dragged here. All right. And peace. The short code apply. And here is our form. Let's preview it. All right. So the other two ways, which in which you can bring your form. Now let's fix this. So we let's go here and select our form. Navigator. Short gold. Advanced margin. Here it's on. Log it. And from the right, make it 300 from the left make it 300. And let's preview it. Okay, Now go to contact and click on style. This piece and this option came from the plug in stylist. All right, if you remember, we install a plug in called Stylist. So deception came from it. Click on it on you get this. Now click here. Goto next, advanced foreign family and type more NSA rocked. Yes. Go here first Goto deceptions. Then click on this and go toe. Next. Advanced foreign family mourned. Set up more. Right again. Click on this. Common questions. Next advanced foreign family month start. All right. And we have our form. Ready. See it and go back. Mm. Fresh. Yeah. And our form is ready, and we are done. Now we have We need to be this left, which is city lights and about. And here I would like to stop making any more pieces because this is enough for us to make this entire upside. Now, I would like you do Go ahead and make the about face on the holiday. Is now the images for the three images like we used in the city lights. Yeah. These three images there will be three images in a Fuller called holiday in your exercise phase. All right. All you need is those three fails to make this. Okay, So go ahead and make the page for holiday and about and posted in the comments below. All right? And I will check it out. So yeah, I guess that is it. Our website is really There are a few more things which I would like to share regarding eliminate door and the entire design process in the next video. So I will see you there by 30. A few touchups: All right, guys will come back to another video on in this video. I would like to share some things with you when you look at our now me nu, it is not exactly how we made it in our design, right? Just look at your design and look at this. It is a bit different, and these menu options are a bit close together. So you can fix start by going into style. The speed Aaron select. There. Now we knew. All right, then. Goto next advanced on da word spacing and increase it. All right? No, nothing is happening right now. Let's make good 40. Yeah. So going to go in and make it 40 from your parting. All right? And save. Okay. Mm. And let me go back. Be on based Riendeau home, actually. All right, work? Yeah, it is good. Is good enough. Yeah, it was good enough. Okay. No, I saved. Actually, I cooperate. This I'll be a student here, right? And president Brine. What? We were seeing as nothing, but we should see our website. A right vision. See this. We should see the home base here. Now, to get that, you need to Let me close this. First, you need to go toe, um, settings, reading on your home page displays. Select this one or started bids and select your home bids. Two home all right, and see you teens is no. Let's stick it. Let's go to our website and, yeah, our Lincoln's local owes slash portfolio. All right, let's go back. All right, guys. Now we're done building our website, and I would like to share some of the things with you. The header take now you must be wondering he made ahead Are any portrait in different places and later on, he told us to make ahead of its up years. In all the pages are the ones. Now I want to tell you one thing. Whenever the import of free team, you won't be generally able to enter the header on the floater off the team, especially in the free version, off a limb and er, because it doesn't allow you to it. They had heard and footer. And to do that, we installed one off the plug ins header and food are 11 door be installed. This plugging header footer Limon door which allowed us to create the header and footer for Element or Pezuela. Now, when I go into pages, all bases going home going here, tear on here. Yeah. 11. Dorgan. Waas. No, you must remember we at the beginning. We used this option page Baylor Full weight. Blank. What this does is it empties the working here for us to create something from scratch. All right. And dis option here a limit Or can Woz? What this does is it will use the header and footer as it is and it gives us the work area toe build anything in between those two in between the header and a footer or rate. And it is very crucial. Dona surrenders that you won't be ableto added the header and footer with the free version off element or no. Yes, I just if you want to go become a web developer yourself and you don't know how to go get the pro version of element or it's amazing, it's super. It's very nice. Secondly, I want to talk to you about Adobe X'd now. We went through Adobe Eckstine, a rash. We did not go in depth in it. And I'm glad that reading because, um, it was updated a few days back on the though it doesn't affect us very largely. What? It would have been nice if those options were available for us back then. Only now, the third thing. I want to talk about the responsive upsides the website we created right now. Let me go ahead and wizard site. Okay? No, When I did he say is this. As you can see, there's oil gets hot spot and everything is Norwood. We're because we haven't made it like this one looks OK. Yeah, there's one looks. OK, this is the move eyes. Yeah, we haven't made it responsible. And you can do that by 100 in $11 and going here and go into mobile and just a did it. So, you know, similar way. That would be for the stop version. It's similar. It's the same thing. Only. All right. No one thing do we know they're there is um Oh, when I click on this when I click on the section here when I click on the section hair I can go into Advanced, Responsive and I have these options. I don't stop. I don't tablet higher on mobile. All right now, if something is not working properly and move away in the mobile version, right. Um, just hide it here. Like, higher in trouble. You can hydrate on mobile. For example. Let's suppose that just lighter walks an emission is not working properly in the mobile version. All right, So are you going to is You can click on this advanced, going to responsive and hide it on more. Well, all right. And then when I will removal version okay. Won't work. So I loved updated. When I go to the mobile version this I won't be able to see this. And then you can. In the mobile version, you can rebuild, let understood you can rebuild their entire thing in the mobile version. Okay, We're not going into the responsive website thinking in this industry tutorials, it is because it will get a little complicated. And I want you to practice under dextrose version first. And then if you are curious, you can definitely teens the workspace from here and create your website for the desktop mode or the mobile moon or right on the third thing. I want to talk about his Eduardo elements. Let me close this page going to plug ins, Andi. I knew. And here search for envy and right or elements in this one. The 1st 1 And what elements? Template. It's Install it. Activate. All right. In these tabs towards the left, you can see there is this option called elements Notley. Connect on. You. See this? Just agree to everything. Continue. Okay, Now you'll see this and at the top. Here you have these options element, or we were Wielaert photos and more. Now we're using a living torso. Click on this. And here are the industry tapes. All creative designs, Alerts click on creative and design. And we see this. We have these options. We have these layouts. These template gets available for us to use. No, even you. Our weren our your mounts over these. These cruel and you can see how they look like, Okay. And we import these now, let's see. Um, I like this one. So what I can do is I can click on this on import template. Now, this will be important in our element, are okay. And you can click on a template like me, right? Click on woman Lincoln in Newtown and there is this other option. Also create a new page from this template to make it available as a draft. Please, in your pieces list on Rachel. Unmitigated ph for this one. And, uh, hurts Collard, um, and Michael template and create new beach. And it is creating a new page for us. All right, And we can go to pay this. And here it is over. And why do template beat for red will check in later on. Let's take out this one first, and it is lording. Yeah, As you can see, we have overhead. They're here now. This is because the workspaces what is the workspaces? Let's it is a live in dark and waas. That's why we are seeing this. Okay? And you can I did it. You won't be able to address this because there's a free version of Element are okay. What you can do is you can you can open the navigator. It's on the section, go to advanced, unlock the margins and from dog going to the negative direction. And while everything moves up All right. In the Leo columns, they have no up. All right, on here we are with our template. Okay. Now, as in one of the previous we does that door, Ludo Strategies and I will again tell you to study these. Okay? Just study these templates because they will teach you a lot. They will did. You already will understand everything. Now, in high school, you can see there's the These photos are not schooling. When you're scrolling, somehow we are strolling. We're still not schooling. You can do everything. You can do this also an element or those tragedies click on this one. I study or the bodies are advanced. Speeds are there is a speed, sir. For some reason, spacer is the most India's Richard in Limerick Door. I believe I swear toward is very honey. Okay. And now I think I understand what this is. When I click on the inner section, I think this is the background. No. So, you know, you can learn like I'm tranquil. Learn where this is, how they are done. This So yeah, I will explore it later on. Um you also do it and you learn any Rando, Ron, and you won't believe what you are you are capable of doing with this free tool Like I can't stress it enough that we all everything that we're doing is for free. It's just amusing. No, let me close this. And the last thing that I want to talk to you about is, um I know that there will be some doubts in your mind so you can write to me at any point If you feel like if you feel that you are stuck and you're not able to learn even by starting these, you can write to me at my email address. Contact. I did run a former dot com, and I will try to get back to you as soon as possible. Okay. And I hope you learned something in this tutorial series. He practicing? Don't stop anywhere. Just find the things you want to learn on. You want to do and do that. All right. The motivated Always. Don't fret at any point. If you are stopped, then it is amazing. Please, you can find anything and you can learn anything for free. And platforms such as these allow you to learn everything that you want to be moderated on . Everything they do. Wonderland explore plug ins, explore WordPress. No, I didn't go through the teens and workers that but I guess we don't need it. And there are already so many amusing tutorials available everywhere for that. So you explore those, So Yeah, I guess this will be enough for this tutorial on. I will see you in the next tutorial series, which will be about the mix website. Brenda, I hope to see you soon. Bye. One more thing. One last final thing. Please do comment below. Did your life are? How can I improve this crew? Torrey in cities also do the screen shorts off your website and put it in the comments below. And I really look at them. These girls comes off like it on. But if you don't like it, then please write to me. How can I improve? So yeah, I will see you soon.