Learn to do stuff program build stuff | Michael V | Skillshare

Learn to do stuff program build stuff

Michael V, Also known as Learn Coding

Learn to do stuff program build stuff

Michael V, Also known as Learn Coding

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
22 Lessons (2h 7m)
    • 1. Intro

    • 2. Set up local host

    • 3. Download Theme and Plugins

    • 4. Creating pages

    • 5. Run the setup

    • 6. Creating taxes

    • 7. Set up payments

    • 8. Creating products

    • 9. Creating variable Products

    • 10. Send invoices

    • 11. Creating the header

    • 12. Creating the footer

    • 13. Creating the first homepage section

    • 14. Creating the gallery section

    • 15. Creating the section sales

    • 16. Creating the call to action section

    • 17. Set up animation

    • 18. Set up ninja forms and contact page

    • 19. Creating Blog Posts

    • 20. Fixing the sidebar

    • 21. Creating the WooCommerce sidebar

    • 22. Make the Website responsive

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

In this Wordpress eCommerce course I will teach you exactly how to build a fully-functional e-commerce (online store) websites using the Elementor Page Builder you don't need to buy anything to follow the course.

In this online course, you will not only build an eCommerce site with wordpress, but you will also master the Elementor Page Builder

Would you like to learn how to instantly create an amazing WordPress eCommerce website for your business, blog?

Would you like to make money charging over your clients?

Would you like to learn how to build a website from scratch with the Elementor Page Builder?

Would You like me to teach you each and everything that are needed to create a professional online ecommerce WordPress website?

If You answered YES~ to every question given above, Congratulations.

After taking this course you'll have a unique, professional and easy-to-use WordPress eCommerce website to be proud of - and you'll have created it yourself withou

Meet Your Teacher

Teacher Profile Image

Michael V

Also known as Learn Coding


My name is Mikel I was born in eastern europe and I'm an expert in Wordpress, Webdevelopment and programming. During my school time I learned a lot about Webdesign and Webdevelopment. Afterwards I specialized my self at Wordpress. Meanwhile I created some Wordpress Themes. Nowadays I'm self-employed in several businesses and if you have some questions you can contact me by my E-Mail.

If you have some problems with any of my courses you can contact me, I'm willing to help you.

See full profile

Related Skills

Technology Web Development

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: in this course, I will show you how to build this awesome looking shop from scratch without buying any theme or plug in. You don't even need to have a domain because I will show you how to install a local server . We will use the elemental page builder so you don't even need to coat a single line. I will show you how to automatically sent and voices create variable products used the contact form, make the website responsive and much more. After this course, you will be able to create awesome looking shops and also Mastella mentor. 2. Set up local host: So, first of all, let's install over local host. So let's go and type in something Google and download the sump local host to follow the tutorial. Euro need to buy. What? Posting package. You can use the local host and follow the tutorial. So let's open it. Yes, OK. Next. And what do we need? Your My esc. Your file zilla. Yeah, Mercury, Wait PHP my Edmund off course. And next some next. Next. Okay, and let's install Perfect. And now let's finish the installer. And now we need to go and type in loaded host. PHP my Edmund Start the Petch in my stray off course and reload the page. So and now let's here that's put in and create our daughter base. I will call it a mentor shop Who's and the mental shock here. We need to choose and let's choose would have 16 been and create. So now we need to creating you phoner in our some phoner. It's it's Open it here. No, and see then some HT dogs. And let's create a folder. Um, road press. So en turds download then used words and off WordPress English download. It's don't note it down would press put it in a folder. Yeah, we can create. Yeah, that's call it worthless. We can do it like this. I think this is the better way. So we can remove or folder here and just put in our WordPress folder. Now we can just type in local host. Our name would press shop. Yes. And choose your English. Let's go. Database name Waas here. Elements. So amends, right? Yes. Use the name route passwords non and submit. Run the installation site. Name? Very user name. Edmund Passwords. Let's choose Easy. 112345 Firm Your e mail. Yeah, it's just choose one and yeah, installed WordPress. Look in. That's Putin. Edmund. And one, 2345 Perfect. And now let's download the theme and plug in. 3. Download Theme and Plugins: Okay, let's start with team and go to appearance themes at New Serge and put in Ocean VP. This is a free themes, so you can install it like this and don't need to purchase it. It will take a little bit. So now activated. And, yeah, that's begin with the installation off the plug ins. Elemental off course. Return to require plug ins. You didn't work. Let's go back to are plug ins. Your plug ins at New I would also like to install um, Element or Adams for our work matters and widgets. Newcomers here. Essential. Arun's. Yes, it's the 1st 1 from VP developer. Let's install it also, and now we also need ocean BP sticky, sticky header, ocean with peace, sticky Hera Yes, in storm and activated off course. And it's also install Ocean Extra your stole begin storming plug ins, storm turn, and also I don't really like the P forms. I would prefer to use ninja forms, so let's also install ninja forms, pluck ins at new search plug ins, Ninja Stall now and off course for newcomers we should also installed. It's the most important plug in, so let's wait a little bit and then install who commerce here, type in commerce. Install now, and we should also activate all the plug ins. So let's go to install plug ins and activate all the plug. It's true comers and never Now let's activates on the plug ins first and the set up Who can do later. So back to plug ins, um, your installed plug ins activate the essential errands for elemental, back to appearance plug ins back to plug ins and stole plug ins. And now activate ninja forms. So now we can build we're pages. 4. Creating pages: Okay, let's move on and create some pages at new. So let's create first of all, over home page. Let's call it just home publish. Publish. Mm, yeah, the settings we can do later. Then new page. We will also need a block page. So let's create the page. All so it's just a block publish published, and let's also create the contact page. So let's go again to a new page Tire toe Contexts as publish, publish. And also don't forget to go to users. Know Toots Yes and themes and settings, right reading that choose aesthetic page, steady page, home pitch, home posed page block and let's save the changes. So no, we have old set up and let's move on. 5. Run the setup: Now let's run this set up for all vu commerce Plug in, click on commerce and run the set up. So where is your store based? My store is based in Germany. Ed Druce, Just juice one Berlin Post side Euro. I will also prove it. Okay, um, let's go. And I would recommend off course. Lana in PayPal. This on the best payment methods? Of course, you can use also stripe, but yeah, let's choose this too. Continue. Also used shipping methods. We can Yeah, you Some don's I will only ship in, for example, Germany. So it will cost, like about five year old location not covered by your others. Don's I will deactivate off course. You can put in some flat rate or free shipping and also the cost them here he can choose kilograms, grams, pounds, and so on. Here centimetres millimeters inches yards and yeah, kilograms, centimeters and continue. Now let's choose. Yeah, male chimp Automated Texas off course. Why? Nuts and continue connect your store to Jet Peg. I would say skip this step because we don't need it right now. And yeah, that's it. Very easy. No can create some products and pork products and you go back to the dashboard because now we need to create our menu and I will use two menus here. Let's go and, um, under appearance menus. And I would say, Let's create and menu for the Hera and a menu for the food. So let's call it Menu one, create menu and no, let's use here our my towns, cold shop, contact block home and off course. Okay, I think we don't need to menus. Let's use only one at two menu and then we can display it on the top four on the main on food er and so on. And I would say, Let's choose main and then go here and put off course over home and lock on the top. So kind of this. And, of course, shop also here. And let's save the menu. Okay, Nice. And yeah, that's it. Now we can go for 6. Creating taxes: Now let's set up our newcomers. So go to newcomers. Sittings and yeah, here's our address. Zip selling location, cell toe, all Sochi. It's use. I will use Germany. Germany shipping location, uh, ship to only to Germany. And, uh, here? Yes, Save changes. So here you can choose where we want to ship or sell. And yeah, so this is very important. If you lift like journey like me, you can't really ship to America. It will be too expensive. So now here pro acts and shop page able placeholder doesn't matter. Kilograms, centimeters enable reviews. Do you want it? Yes, of course. And able can always change it. Parrots Not really important. So then let's go to tax. This is and very important. That's choose here. An inclusive or exclusive. I will choose inclusive because we have to do it in Germany like this. And here cast UMA Shipping address Text class Hero can use the reduced 10 rate or text class based on CART items. So that's used to this. He rounding will need additional tax classes, excluding or always including I will include it. I know that in America they sometimes short excluding tax, but you can choose it like here. So how you want to show it? Price display. Safe changes. Then, of course, we have some text options here, for example, standard rates. Here we can insert a row and let's say country code, um, zero or two. And then we can state so we can put in and country told our state code rates, 90% takes name standards, priority shipping. So safe changes. So we just need to put in our country code state called posts code the city maybe. Or I would say, we don't need to put City and post that, because in Germany yeah, the texture is always the same in every and can t in every state, so we don't need to do it. But let's say the changes like this and reduced rates, so we just need to go to our country code and so on. So that's also make here an example. Did you? It's state quote possible. You can put in like different states and countries and so on. So yeah, I just need to Google if there is a special rate and yeah, reduced rate. And in Germany we have to for some some products. There's a reduced rate, so we can choose later if we want to use the reduced rate or this dinner traits. So go back to standard traits and your state food, just leave it blank and save changes. So we have now the standard rates and also the reduced rates, because some products will have other rate. So here you can also put in some state and country codes and so on. So when you're living in America, you will have to put in, yeah, some state codes and Googled them. Google the rates and put it here in Germany. We pay all the same Texas in every state, so we don't need to do it, so that's it. 7. Set up payments: Now let's set up our payments so we can use direct bank transfer. Here. Check payments. Cash on delivery paper. I would recommend you to use off course PayPal and direct bank transfer you. So that's open this one. And this one off course. You can also use check payments or a cash on delivery if you like. I will use this to so direct bank transfer. Here. Description, account details. And you just need to put interior account, name, account number, bank name, sort cold, Iban and Bic. So that's putting account number. Bank name soared. Coach here. So kind of this. And yeah, now you can receive payments because you have your band and your big, but in here end off course we can old. So pay, Paul. This is the easiest way to I pay here. Can put in the title pay Paul Pavey, api, PayPal. Then your email. This is very important. And yeah, that's it. Safe changes, safe changes. And now let's move on. End built our homepage 8. Creating products: So now I would like to create some products. So go here to all pro ducts and now create your first product. So how we name it, let's call it T shirt. That's also create a category at new category. It's Call it man and yeah, set product image, upload fires, select fires. Then I have a special folder for product. So lots off products here. It will take off first a little bit that I can choose here, this one product image and yeah, now we can use simple products or group products or, yeah, very able products here. I will explain it a little bit later. So regular price say nine. We can old. So what? Here we can also choose sale price, but I won't. So texts Tex able shipping only none. Texutil text class, reduced rate, zero rate. This is like you remember 90 persons and seven. So let's go to inventory here you can put in your sq air. So how many? I don't know if you have one, but here we can put it in and then off course in stock or not. So you can also enable it and, yeah, go to shipping now here, you can put in your weight. Maybe your product is very heavy, so you can also dimensions put in. But yeah, that's some dimensions. Very small t shirts. Yeah, but you don't need really needed it for very big products like 25 kilogram off 1,000,000,000 us. You will need to put in here because it will cost a lot to ship them. Um, yeah. Here you can cross selling product. It's our first product, so we can't attributes. This is for vory very able to product Mariah Herbal products and advanced here. Now we can say fit and publish off course. We can put in a description and your old so product description. This is like a large one for the product site and here, a little short description. So let's publish it. And you can also choose here Product gallery, because we have also not only the front sight off the tee shirt, we have also yet the backside. So let's choose this one at two gallery and no, it's publishing. And yeah, I will create some more products. So we have yeah, some products to show. But I think now you know how to do it and you create some products on your own. But of course, I will show you how to make some varietal products. So when you have, like not only red T shirt, you have old so blue one and yeah, so I will show it to you in the next part off the tutorial. 9. Creating variable Products: Now I will show you how to create variable products. So first of all, we can go to attributes and at your, for example, size add attribute. And after this, we need to configure terms and put in like name, for example, s had new size and and XO here. Okay, apply. And now we can go to our products. I created some products. So here, like this, for example, of the blue dress. And let's make the blue dress a variable product. How can we do it? We can go off course from simple product to variable product. Click on attributes, click on size Safe attributes it. Okay, Nice. And then we can use it for creation. And that's like first. Yes, and except safe attributes. Then go on. Variation more and you create all variety variations from all attributes. OK, click on it. No, it should create all the three variations. Perfect. Okay. And now we can, for example, Putin's year, a special image if we choose, for example, blue or green This dress in blue green. If we, uh, put anything in, it's like, let it like this. It will use this image. And of course, all sizes have the small dress. So in the small same color. So of course, we can put regular price sale price and so on. Same things, but yeah, you can just put in year old prices and now safe the changes and all right, now, don't worry about the design, because it will look a little bit different from yours, because, yeah, I just want to show you how to do it. And yet here we can put in M s and yeah, all right. And to cut off course, changed the category and so on so he would appear like, woman. You can do it here like that's best selling and you woman and yet, but it's very easy. 10. Send invoices: Okay, now we created our products, but we should also send our invoices to our customers. And for this we need to go to plug ins at New and search for Plug in called Vu Coomer's Pdf and voices pluck in Yeah, it's the 1st 1 Let's install it. And after this, I will show you some settings. Horrow set up the pdf So now activate the plug in. And after this, it should show up here. Yeah. Newcomers, pdf and voices. Here we can choose how to download ho to view it down off the pdf opened the pdf in in your browser tap with no doesn't mirror choose template Simple paper size for Oh, here we can Yeah, put in our hair, Aluko. You can put it in your shop name. This is important. I called it very and shop address Brown Street to just put in your address, your name, your logo. Then you can also put in some terms conditions and so on. But we can safe note the changes and go on, lie here. We can go to documents and here we can choose how we want to attach it. So let's say if the customer byproduct and new order. It will be send out or a failed or or cancelled order. Protesting, completed, refunded and so on. I will use completed aura. So when the aura is completed, it will. We sent out. Or new aura. It depends how you want it. Let's have a new order and display shipping address. Um, shipping if different from building address. Okay. Display email. Address? Yes. Display. Phone number and voice. State invoice number. We can just get Try things out. Reset invoice number years. You alone. My account and voice download. Yeah, of course. Only one invoice. This older, created, unable invoice number disable for free products. Okay. When you, for example. When you have, like, free e books or something like that. But we don't have you and yeah, no last staring legislate mode. Publicly. Late document numbers clean up every seven days. I wouldn't agree. Like maybe yeah, every every days. This is important. Um, yeah. Here. Is everything okay? So safe the changes. Okay. Perfect. Now we can create invoices, and then voices will be sent out to our customers after they put chase our products. So yeah, Perfect. 11. Creating the header: Okay, now let's move on and customize our theme. So visit the site, customize and let's make the head on event after the hair of the food. Here we have first the site identity. It's this site title so we can change it. I will leave it very and yeah, we can leave it. Menus off course we have our main menu are many one than widgets. We'll talk about it later. Home pitch settings. Aesthetic page here We could also changes general options. General styling. Here we can change, for example, the color off our site identity. So let's leave it like this. You're have, um, then General settings layout. Why? Box separate? Yeah. Also put in Twitter Facebook, your L. But yeah, necessary. So now the page, titled This One is very important. Here. We can select our herring tech. It's for the CEO, then off course, our style. Let's choose background image. It's, for example, for a block, so we weren't kind of this. So that's a like an image upload files team. Uh, already did it. So let's select it. Then position top center fixed. No repeat cover height. Kind off kind of this capacity overlay color. It's not for the home page. It's, for example, for a blocked page or the maybe shop pH. If you want, we can disable it and enable it. But I show you have to do It's later on. Of course. Grow to top. We have can change the Eiken, then the pig nation on the other. Things are also not very important. Typography will change it in the elemental page. Builder football. Let this one. We don't need it. Let's disable it. All right. Headroom already. Okay, No. Or Hera is done. And we can move on and you make our foot off pretty. 12. Creating the footer: First of all, we have to go to Vigee. It's select for a one, and now we can add a widget. So let's have a look. And I would like have, for example, the maybe contact info. Here we can choose style, but no Aiken's poor link. But in my opinion, it's not the best, which it, but you could also use it. You keep it instead of Skype, call us. You could choose, like, visit us. But in my opinion, this widget, it's kind of too big off course. We could remove all the text, all the texts and putting. Maybe some Ford Aiken's. This would look pain of this. Yeah, but and also removed. Maybe some content, for example, and the fox, or maybe the mobile number. And then we would have the address phone email and yeah, I think the website this old some of necessary birds so we could create kind off this. It's been so this and the website. Mm. So no slowing. But we could also choose another widget, for example, or could leave it like this. So now we have contact information. Then we could have kind off. The 2nd 1 would be for example, our instagram this oneness kind of nice we can choose, like three columns and six images. And yeah, so you just need to put your user name or take. And it was so here. And it's kind of nice. I think so. You can get some more follower, then off course with three. Here we can put in, for example, Um the cast your menu select many one title men. You? Yeah, kind of this. And the last one could be, for example, the search Tyto looks put in search. So the customer is able to put in here, for example, some product names or something he's searching for. So we had this also end off course This copyright text, we have also to change it. Ah, you foot a widget. We can also works Very nice, in my opinion, to make fixed for a So let's have a look. Oh, Parallax was this one? Yeah, this one. It's also looking very nice. And you? Yeah, this and text We have to change its right here for a bottom copyrights. Um, all rights reserved. So now we have also here are copyright x. Of course, you can also disabled for a bottom. Okay, nice. Now our fora it's ready and we can move on published. Don't forget it and let's move on. 13. Creating the first homepage section: Before designing our home page, we should install one more plug in. Let's go to plug ins at New and choose here. Type in element, elemental Iran, and we should install one more hair on called Elemental Iran. Elements from Wet Take ST Let's install it. Okay and activate. Now let's go to pages all pages and choose the home page. And now it's do some setting. So we have to content layout 100 persons, then Hera. We have to this able it disabled the top bar enable the Hera and yeah, also the menu. Choose Menu one title. This is very important. We have to choose this able because we don't wanna havoc and that's it. So no, we have everything set up and so we can edit with Elemental our first section. So now leads select this 100% with structure. Then let's say stretch section yes and style. Let's say background slider and at some images, a plot fired select files. This too de select these. It's here. Let's select this too. Create new gallery and served the gallery. Okay, now we can say go back to lay out and say that high should be men high. No. Let's say, um okay, let's delete it again. Say you're here. Yes, Stretched Min height. No fit to screen. Um, Middle Ford and OK, layouts. Okay, then the style background slider at images this to and serve Guillory. Perfect. Now we can go and say the transition there. So many, but failure's OK, so we can show. Hide it. Overlay one, cover two. Okay, this one's nice. We could also put in the particular effect birds. I think this is This would be a little bit too much so kind of this or both layout and put the particular effect This would look like this, but yeah, I think it will be really too much. So let's go for the style. Let's say we want to have backgrounds. Um, background overlay. So we go to classic and say, let's say cholera. So we have kind of this one. Who? Yes. And now we can also say boxed and content Worth said it too. Yeah, kind No. 500 And select our content. It's put in our head up and type in, like, shop or the name of our shop. Really beauty shop. Then say size. So Okay, center style. Let's select, um, this kind of blue. But we can also shoes this kind column yes, the column and say, style, background color. Make it like black, this black. But also, um, maybe kind of this or Yeah, I know. Maybe. Yeah, it's so like the black and maybe change here style Pa Graffiti family. You can choose the rubble tow boat and make the size kind off. And it's a three 100 style ford or transform uppercase and put in, like, maybe kind of text shadow. Let's have a look. Maybe this blue notes with the bluer and queues you four and I would also four so kind of this. And let's also put in some more content. You're going back. Text. Let's take in explore are pro ducts. Style it, Let's say center takes color blue and topography off course. Also a whole bottle. Or maybe another fund. Truer. Yeah, let's make it Capital Mobile two selected. The size should be Yeah, around 24. Then wait. 400 stone decoration. Everything okay? And may be white coming here. Why not? Oh, leave it like this. Respect. I would say maybe the background should be, um white off this. Let us know. Got it. Leo style. Yeah, it's a look. Okay, now, huh? Let's leave it black and make this one white and then explore our well, Let's say awesome. And then let's go and put in maybe a button. Yeah, a button should be put in. Let's choose it where we have the button here, then they say Center on shop. No, Select the Eiken. Let's select the so and to know there's a very interesting thing because now we have the link. And when we now click on the button, we will stay on this website. But we want to go to our shop. So we have to go to the shop, then copied the link off course and just paste it right here. So now we go back to style and can also style a little bit the button, for example. We can say that text color okay in the text. Tell us, OK, the background color. I have a idea how to do it. And of this. And then let's say, um, board the type solid. The border should be maybe white Or let's make a blue button. Yeah, let's make let's select blue button. You're I know. What's the problem? Yeah. No, I know this And make it more border radius kind of this and put in box Shero, maybe white. Yes. Uh, okay, let's leave it without but on hover There should be a change. Let's say the text color shits. Black in the background. Color white. Yes. And, uh, border no change to this and off course that have on your vacation. Sit. Be here kind of this. So now we have our first section. Okay, now let's move on. 14. Creating the gallery section: Okay. Now, let's use one off the cool elements from the plug ins so they can hear put in its structure . And then, let's say, um, yeah, off course, heading head off, type in like, um, our collection. And let's center it and say style, black typography, global toe then that say size should be 41. Wait, 800 transform. No, let's say this style. Normal decoration None. Okay, all right. Now, the I would like to use, uh, the off course, the oh, we already choose it. So let's also type here. Um, here we have words. Vita So, so nice to use, like, 30 and black and center it. Okay, nice. And here the get should be smallest possible and puts What could we also put in? I would say Yeah, that's okay. And no. Here. Where's our gallery? That's choose it. Hugh, This one, uh, it's no, we have, like, Guillory items. And now I would like to show you how to build new ones. Like now we have all in gallery item, but we we need okay, all it's ok, but we don't need gallery item. We need, like, the man collection. Let's say and at new item. Let's call it woman. So gallery items, um control name. Let's put in the 1st 31 controlling man. I name T shirts and we have learned ipsum some tax like this is our awesome t shirt or something like this. Yes. No, let's select our products in Sirs. So this one will be the first and 2nd 1 could be this this shirt again. One should control man and item Name and t shirt. Oops. T shoot. We can also put in like the link We can put the link to the shirt or we can just put in the length for the who shop. This is like how you wanna do it. You can just putting for shirt or for who will shop. So Casteu McCann all so shoes from more then Only this should so kind of this also control name, man And then he, uh, control name Women control name women and control Name women. Well, this is the men one that's select this change and product like this Putting products. Of course, we can change the name and change everything here The gallery ling button the light box button and yeah, but we can just leave it like this. Of course. Put in all the all the things to the Let's take this and putting all the links and so on. But it will take too much time. I think you know how to do it. Just go here and put in the control name. This is important. So it will food out like we'll show you here. The item name or it's the item name. It's this one. The description off course. Then here the button. So do you wanna have a also lightbox button? It's it's you every worse it activated. So the customer can look Yeah, our collection. And yeah. And now let's update Don't forget to update, because it's very important. But yeah, it Yeah, I will maybe change the Texas and so on without recording, because it will take too much time. They think you under stand. How to How does it work? And yes, so now we can just No, it this year Woman, woman and a woman Wait, Let's fix it. Control Name Control. Name, Control Name? Yes, Suitor Man Man. So we have man, it's working, woman. It's not working. Why have a look and roads are here. I see. Should name it. Oh, so, capital, you're a woman, a woman and also woman. Now it should work. No. What's the problem? Mm. Oh, here, man and control name, Woman in the three item. And if I change it, man. But I will fix it. I fix that. I don't know what the problem waas off the plug in. You just need to go to women. Then just remove it and at it again like this. And no, as you can see. No, What's working? Perfect. Nice. Okay, now we can move on for doing the new section. I would like to change the aching color. We can go to style than, um, Hugh item style or the Eiken style and poor in this color. And no, we can update so nice. 15. Creating the section sales: before moving on, I will show you something like this. Here we have, for example, our dress shirt jacket, blue dress. And as you can see, there is the price you can go to dress like I dress black. You put in your categories. You can put here some categories, and then you can, um we will use the widget called product Brit, and you can then sorted by this category. So no, it's uncut theorized. But you can put in, like, new or man and he just at new category and say, like, um, best selling and then at new, and then you can, yeah, choose it or nuts And here. So here we can also put a regular price and sale price. And this is very important for us right now, because we will also show on the page are sale product project products and and some products like new Product. You can put in here the category new and then select some products or show some products with the category New Look here. We have, for example, go into all products I created for examples here. This one. And as you can see, it's in the category year, man. And you just put in a queue tilikum at category, and then you can for in the categories choose them. I man and you. Okay, No, we can update and lower it again, so our products will update it. And we can make the new section or next section, So Okay. Here. No, it's loading. Here. You can see I created some products, and of course, you should put category and everyone so that your customers can Yeah, see, like for dresses, the catcher dresses And there will be on your website like a special side for dresses where all addresses will be. Because you have the category dresses and also knew you have, like, here. New new three and four for new items ends. Okay. No, I wanna show them here. I will off course create the new section by copying right. Click a copy, select structure and right click paste. Same that copy. Right? Click paste. All right. No, we can choose our product grits or a special one year. Put it in columns for let's say, sale pro corrupts and put are I just say say you pro ducts. Course we can old. So chains like I don't know the style. Say revere style. So we don't at card simple style. I will have a simple style. Then off course, we can choose here. Color typography, product title like sale. Um, this It's looking nice. Then. Of course, the at card button should be also mm, changed to this and yeah, no, let's change the typography for the, um, for sale price like this green one or for a product sale. We can't change it here. We have to go back to the customizer. Will do later when we will. Yeah, make the block. So product title can choose there fund or boto and also make the size a little bit slightly . We, uh, say okay, this one 600 transform? Yes. Like this and worlds. Should we change here and off course, we can change the topography. So we have like or just leave it. Oh, it waas Okay, let's leave it and yeah, no, we have sailed products. And what can we do? We can just click here and duplicate widget and yes, drag. It's right here. Okay. And remove it. No, we sailed products. Say products. Let's say our new prove prove pro ducts. And now we can read just recent products and choose the category. But hear this category, the new kitchen. And now we have our products, our new products amazing. 16. Creating the call to action section: Okay, Now let's design the last section. Click here. New section, select your structure, and this section will be kind off called to action. So we have life. Our head, uh, se doomed over lifestyle center. Take photography. Change it Later. Formed soybeans. This Mm. How could smeg it black then shoes take Cerrito. Okay. Kind of this story to here. This one. Center it, then. Oh, Button, I did shop now. Button, we can actually just copied from here. 40 and pace. That's here. What year? You So we have no this section and I would like to have here the maybe some more spacing it's and this and old. So I would like to use some shape divider here. We can use waves. And of course, we can see them because we have no Okay, I have a good idea. Let's just choose the background. Hello, radiant. For example, This and this and we're waves here. We can we can change. Hello, I worry. Yeah, and then off course, But here, heading 40 style and let's change it to in Bere is IDs your style. Faith, divide up waves. How did its make white birds? Hi. Change this and here on the bottom also waves these legs. So we have kind off this called toe. Actually, I would say it's looking great. Okay? No, we again updated. And I would say our front page, it's looking amazing. No, we can move on and create the other pages. 17. Set up animation: animation, for example, Here, then edit column and go to advanced. And yet you can choose this animation, for example. So when you visit the website, you will have kind of this. I think it's Yeah, looking good. And okay, now we can move on. 18. Set up ninja forms and contact page: Now let's make our contact page. So we have our plug in ninja forms and there is already here. Yes, I agree or no. And there's already a contact form design here. You can see. So it's pre made for us. And off course. Weaken. Change makes some changes. Like display form title. We can change it from Contact me to contact us. Don't display it. Okay, Leah. Height successful, advanced above element. And so on. So but it's not necessary. So here we can email, confirmation, success message. And also we can put in some are there? Um, yeah. Fields like to state the phone name and so on. Buds. We don't really need it. We just need submit message, email and name. So done. Let's publish it. And now we can create our contact page. So let's wait little bits. No. So, no, it saved, and we can go on. So go to page is And where is it? Or contact us Page. Of course, we will need to change the settings off this theme. Like content layout. 100 persons. The head, uh, disabled and able. Then the men. You mean one Tyto disable and update so now we can create its with elemental put in our contact form and also nice background for the backgrounds. I'm using this video. I will show you how to put in in the background this kind off video you will just need to copy dealing. So just type in like four K and then you will get lots off. Four k very loose, and you can just choose one. I'll choose this. There will be I won't be. Also the sound of music playing in the background. It's very nice. So just copy it this and then you can close it. Okay, Now it's slow it and we can create a news section. Just put it here, this one we need. And now we have to stretch the section full with then style it like, um, this Just let's make first over heading here that say contact us. Center it, then off course color style. Okay, I can see it. No, that's made 41. Wait 800. Transform this. And okay, now we need to go to section and style the background image. Let's putting our background image this one and position. It's fold attachment fixed. Repeat, no. Repeat size cover and advanced. We should. Putin's here 101 100 off course our background Overly classic this one and change the color off our hitting. Okay, Nuts. And now we need to make our contact form. So click here. Let's put also a herring they need to the text. And we need to go to dashboard Ninja forms dashboard and copied the shot coat. Copy it. So now we have the short coat put in here. Let's say center and style Italy bitten. How? It's looking a little bit weird because we're styling just short. But it's Mm, Yeah, you will see what will look like. So let's put a photo. So yeah, maybe a little bit smaller. And also and what I like to do is here, put in some pairing. You will see why. So maybe you like 100 pairing. Yeah, kind of this. And okay. And now we need to click here and style background to video. Okay. We need to for back to YouTube pipe and four k video. Four k video. Let's choose this one. Um, which that's just choose this Karp Eudes and put it here. And also a fallback for the, um yeah, people who can't see it on may be, I think, on some smartphones, although one I'm a true so now updated. Okay, we can also change something like here we can put in that it will start like, mm, nuts. Like we just so like to thank you for watching screen so we can put into year, like, starting time 30. And you end time. Whatever. And it will play. So how does it look like? No and old. Very important. Your background style background. We should. Okay, everything is white. Let's type in. Yeah, kind of this and change. Of course. The heading from white to black. Okay, No update it and have a look. This is how our contact form iss looking right now, I would say it's kind of pretty 19. Creating Blog Posts: for the website is looking now. Off course, you will need to put in here the links. So when you click on it, you will get to the shop. But I showed you how to do it. The gallery. It's working year. Everything is working right now And what we need to do right now is to make a block to make our block pretty and yeah. So how do you make block posts? It's very easy. You just go to posts and here you can make some bloke posts. No, we have one cold Hello world. Let's make another one. Let's call it like I didn't know our awesome shop. And here we can Yeah, let's put in image and she had Let's take this one and select And then off course we can publish it published. Okay, Nice. And now go back to where is it? Year over posts You post? No, you can see we should also put in our category or we can just remove it. I think we could remove it here. You might also like. So this is how the block post would look like So yeah, I will remove the breadcrumbs because it's too much? I think so. We have here, for example, Hello world. We can edit it and just say like I don't know, Put in here some text, some leuven ipsum. Just copy. IDs, paste put in feature image, for example. This one and it's called our awesome team. Yes, Updated. This is how you create block posts. But yeah, let's fix the site bar because in the sidebar is nuts looking good. So just go to block. Then we will need to open. Yes, you can see I think the bread crump is not necessary here we have, like our block posts or two posts. You're and are awesome. Oh, we have no name for it. So But let's customize the site bar. Because now we have, like, recent comments. But we have no comments and we have like, meter. It's also not looking very nice. And yeah, so we will need to fix Hm some of these widgets. And of course, we will also need to do it on the shop page. Customize it. No power two pages loading here or awesome team. Awesome shop. You can click on it and maybe change the text or put in some text because there is no text in it. And the description is also not showing. So we will fix it right now. Copy IDs your copy. Spend paste and update. And no, it will work. So this is how you create your and block pages like your book posts. You can just You can also, of course, put in some um, yeah, some other blocks, like an image or whatever, Just at a block. And then you can just put media and text, short coat, image and so on. So however you want and off course, also some widgets and lots of things. So you can also put in you tripling butts. Let's leave it like this, of course update. 20. Fixing the sidebar: Now let's move on. And here's I was hyper and I don't really need so many widgets like the meter likes deleted the categories to lead it like the recent comments. Also the leader. But you can add some other widgets, like the Social Aiken's Follow us and just say, like Twitter, Facebook, instagram, Google plus Man. Yeah, that's it. Then we can add another one and put in like our may be over. You were where the Is it our and or instagram buds that say, like two images to show, Or maybe even more for Does it look like, Yeah, kind of this? So all right now it's looking great. We can publish it and let's have a look on the shop. 21. Creating the WooCommerce sidebar: The last thing I would like to show you is how to get rid off this site bar, for example, on the car page, If you want, Like to buy it, proceed to check out my opinion. It shouldn't appear here. And you can remove it very easy. Just go to pages and, for example, the car page this just go on the car page, click on it. And here you can go to content layout and just say 100 perfect for persons and no update it . No, it will update. You can update its here. And as you can see, no cyp are and off course this you can do on every side. So yeah, I hope you enjoy the tutorial. 22. Make the Website responsive: Okay. Our website is looking pretty awesome on the death stop, but it's not very responsive. So let's make our website awesome on mobile phone so we don't use any, will lose any customers we can have. Look how the website will look on smartphones and you have some changes. So the website will look the same on the desktop or on biggest greens, but on smartphones. And there will be another kind off design or other head. Oh, sizes and so on. So let's have a look how to do it with elemental. Okay, so this is all normal. That's stop view. But I would like to here click on this the stop device Desta Fighting Responsive mode. Then on mobile, you change full ISS. So there is no background slider on the mobile device. Okay, here you can see I changed something. You can click on it and then you can go to, for example, content and say, Okay, I wanna have one column on a smartphone or to we can just change it. Yeah, two are looking good. Okay. This section it's looking good, but for example, I don't wanna have this section, so we can also remove the section so it will show up. Who can remove every section we would like, for example are this is not necessary And smartphone. We can just go to style here, advanced and say responsive. Okay, on the mobile. I want to hide it. So now it won't show up on the phone or we can just say OK, this section is looking good, but there hetero size it is too big, too small. Whatever. We can change it like this. And also the description text. I can just say, for example, responsive and height, or we can just say Okay, let's change the topography on the smartphone and make it smaller. And yes, so we can play around. We can look on Ted bloods as you concede. This is how the website will look on the tablets. So of course we need to There is little buck just need Teoh backgrounds like, uh, and change it. So you kind of this look on the tablet and yet you can do it on every site. So even on your shop page on your block page, you can just play around on our contact page. Yeah, changed the typography at its sections like removed them from the mobile view and so on. So you can make your website really responsive and nice for your customers. I think you can make your website now responsive.