How to start designing your website using Divi Theme | Partha Gupta | Skillshare

How to start designing your website using Divi Theme

Partha Gupta, Set your goal and work hard for it

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
5 Lessons (28m)
    • 1. Design your website with Divi Theme

      1:05
    • 2. Design your Home/Landing page- Part 1

      6:27
    • 3. Design your Home/Landing page- Part 2

      8:17
    • 4. Design your Home/Landing page- Part 3

      11:25
    • 5. Your Project

      0:56

About This Class

Hello All

First of all welcome to the class on Designing website using Divi Theme from Elegant Theme. With the introduction of visual page builder  by Elegant theme the concept of designing website had changed. Now anybody can design a website without having any knowledge or experience in coding.

There are many coding examples available and you can apply it in your website while designing your website from scratch. I have used one and had shown this in one of my classes,

3be8699e

how to change the look of your website by changing the values of angles or rgba values.

I would also be making more classes in this area in future. Anybody interested to get the codes may contact me.

Hope you will enjoy the class.

See you inside.

Partha

Transcripts

1. Design your website with Divi Theme: Hello and welcome to my class. I am part in this class. I will show you how you can design your website. Oh, are we're using Givi team David 3.0 Using usually What is the advantage is off Visual builder. First it helps you to see what other changes even maybe in the website on metal directly show you and how you gonna unprovable? No, Devi with introduction of visual builder has changed the concept off Designing websites know anybody without having any knowledge of coding can design their websites and give their website said totally indifferent. This is the final outcome. This is the final outcome off the design which we have done and I will show you all the steps involved you know, in building this we're beat are one beach whatever you got so please enroll into my class. See you inside 2. Design your Home/Landing page- Part 1: most of all Thank you very much for enrolling into my class in this class. I assure you how you can believe whom beach are a landing page which you call it in your website. I am already logged into my WordPress website. Back office on my website Name is Lorne 365 Dark matter. This is just a sample website I will be using DVT Give is a DVT off elegant rooms. Now first let me for you that already I have been left some pages. It is very simple. All pages about us. Contact us whom our services taste exit. No. If you visit the site, you will just see this. This is our This is my black site. Whom? About us. Our services. Contractors? Yep, as I have opened my home page, which is my front page. So it is free Luca. So now let me show you first how you can change it. Change any page to our home page or landing page. You can change it about us also as your home peak is when people just industrial site they will visit about the speed. Except so let me first show you let me go to Tim Customizer in the team customizes If you go down in the bottom in C static beach, you click here it will show you which pages you want. Boots set. As you're hoping, I have set my home page as whom I have named it as home. Now you can also select your latest boots, your latest pools as your whole beetle's. So this is why I need you and another area which I want to show you. This is the middle part. The let it up. Yeah, about us. Our services contractors. So I have these have my primary middle. He's at my primary maneuver. So let me know. Change our whom beach structure and give it a professional. So let me go toe the pages All peaches Let me start with our home page. Let me a ditch. No, I'll be using the resulting Don't give it now What does the visual builder you're building helps you to visualize It will show you what are the changes you have made in your home pages? But the pages which you have said us so let me first animal it. It will be a second for animal in depending upon your Internet speed. Yeah, This is your home Peach. I have enabled Israel Wilder No, this is the area where I will do all the changes. So first, let me like this arrow this sign Section city No, here you can do buoys first you can set as a background image are you can use as a transparent background color. It will show you the same color. Or you can use another type of background colors. Let me show you one by one. First, let me see. Sleeping bag. Um, let me to that background. These are the colors. So first, let me throw you with yellow. You have seen this has changing trailer put in the white This there's just changing. As you wish. No, these are these bars. We show you the transparency. So no, these are these bars. If we had just call it transfers. You see? You just change. Sorry. Let me No. I'll show you if we upload any background image here. So let me upload one. No, it definitely goes to the media. I have already uploaded some just in my media library. Let me choose this one. Upload an image this right month will be the safe changes for this in you. So let me. I think this No. You can drag it at the bottom and make it lunch. You see, this is no There are three dogs. If you clean that three dogs until us save option, this will save you. This will save the whole model which we have. Let me just say no. This is the module city. Oh, you can add a new rule or anything you like from to this particular area. Now another thing it has You can visualize this area in two years How it looks in your mobile phone. So this is for the tablet. If you click here for you, see how it is loose in the tablet on this is your more beautiful loose It will swing So let me go back again. So in my next class I'll show you how we can design But over to my next class 3. Design your Home/Landing page- Part 2: Hello and welcome to my second class in this class. In my sorry in my bravest class I have already designed this part and I have toe. Do I go and show you Father? No. In this class I will design my second park. So you have seen this plus saddle here. This this If you click, it will add a new section at the bottom. Let me take it now In this new section you can add irregular section specially dissection and food section. So let me click each one off it on the receipt. These are different types of sections. No, If you go for the specialities section, these are especially the sections. I will also explain these in detail Now this is a full with section I will go with the full it Let me click it. We had them want to No lift me Give it a title. Suppose you were a web designer So let me do we design your website? No, I suppose you want a salivating text just below this Connect we off What dictates? No. You feel background is light. You can put the fix color, Doc, But if you're back home is dark. You can have toe put the text color life not takes them logo on the intention You can put their local so here, that I'll show you No, the text or condition is on the left. You see, these are the left. Let me just, um it is on the left. So let me beat in the center It is coming center Make it a full script Make Let me give it full screen. No, I'm sure you see this is the case. No, let me put some going to un beheading button next and everything on You can also show your school down button. Also you can do it is if you have also we needed I will also add this No, initially what I do, but I don't. You meet you. You can add image what you can and a background color Let me select occur Suppose I select blue In contrast with this was quite a big one. Let me write anything I see Now let me see how it looks. Yeah, just moving a bit You see very loose. No another thing. Let me best ticket for saving on. Let me save the did you save And now it has been safe. No. Similarly I can view it in my tablet and see how it looks. See, this is the portfolio on how it looking my mobile. You can also see So let me go back and no here There is a very interesting part Miss, You can drag these areas open down according to your wish. This is the driving too. Suppose this is moved. The section means the total section will be moved. Let me move it in the top Me give it a top priority. You see, it has been moved. We can just drag it a bit more. And see, you have designed their website on let me know saving another very interesting thing. You can do it that such as suppose you want to at some ceases let me show you first with the leg. No to show you how Lincoln how it looks by uploading a background image. Let me put this image. Let me so I lose. It's this evening Grassy. You see? It looks this If you like it, you can keep it all. You can change it According to let me just cross it. This is the actually picture now you can also uploaded video. Let me go to the C s s part. No, we're not touch with CSS idea and sees this class just in this before section. And so I'll be adding issues is well, give it a new I have already have. I had already have the court. Let me go to the depart selector. Poppy. Huh? Tasty. You see, It has given a total new known Continue how you continue. I'm sure you suppose you go with the CSS one? No, here you have seen that That is one area which they're freeing you. Manners attending. Suppose you put it one degree. It has become a straight life. Are ready to put a 10 degree It goes Are you can also change s problem How you looks 20 dealing Because there again there is some other also functions which you can do it Suppose here the rgb A's 100 wondered 0.585% Suppose I put it to 20. It has changed the color like this You can do various things by changing all these parameters. In fact, I have a class where I have explained what I have introduced you to some websites from where you can get this Abdu be a court and you can use it here according to your liking. Suppose you can also change heroes. And you see these again. This is a little little opposing Been here in change Supposed Okay? No, it is okay. Let me save it. Huh? I saved the total, but thank you. And in my next class I'll be introducing buttons here and I show you how to design your buddies first. Before going to my next class, I show you how it looks in my tablet and mobile in the tablet. No, it is not looking very good in my tablet in mobile Also, that means we have to play with because this area is going out again. We have to play with it and see how it looks in tablet and let me save you and thank you. See you in my next class 4. Design your Home/Landing page- Part 3: first of all, thank you very much for being with me this far In this class I will show you how you can add buttons to your landing page or your front beach. So let us begin first, let me you have you off the page Me to help developed. This is the page. I'll be adding your friend elements here. So let me go with their deep button. I'll be using B 12. Just hold for a second. It we just load? Yeah, No, This this section will change. This whole area on this small section will change this area So let me start. So in my last class I have just into the title and subtitle Color of the take six Dark as the background This light No, Let me introduce a local Let us I show you how you do it. Ah, let me introduce You can also introduced a scroll down button. Let me first introduce one But just suppose you had a website designer So you want to showcase your websites? We too have designed So let me let me but create about more fruitful you. So you're but miss create? No, here you can also give any Well, suppose you are which will be derided which will be directing it. If anybody takes the portfolio button, you will be redirected. Toe that page where we showcase all your different websites which you have prepared in your for your customs. Now here there is an option for introducing two buttons. One is this button and another one. You can also introduce another button four Connect us. Okay. Us? No, here also you can given you wouldn't. But the your customers are your problem. Customers can contact with you. No, let me know. Design anything now You can also introduce your local. I'll just show you upload. No, I do go to your image alive. Really? Oh, sorry. Media library. I've just uploaded on small image. Let me upload it. You see, this is your image. You can have your own law You can do You can give a local your title anything like that. You can also add friend type of media or write things here. So So let me go to the design part. I'll show you in detail. No, in my general part let me show you another thing. Okay in that in my design part with me for you. No, I didn't. Front color You can change the colors yellow if you can't change it Or you can just movie toe and see how it yeah looks or what type of look it gets This is what media next week maximum in all these ideas you can check it You can cross check it by keeping this icon Are we to look in your well by no title for is the default color you can you can change the fixed Suppose Let me do it Jui didn't see this You see It s change Are you can put it board or italics? No title phone size You can change the font size You can just play with it and see how it looks The game I don't take sculler You can do anything similarly suffered phone size You can change the font size Suppose I do it given this is one you can change the font size off You can just increase it or decrease it According me Southern text color You can also change its color Suppose I can make it right You can change as it for white No use custom stands for button one. Let me put it. Yes. No button pick size. You can change the text size. You see, It has been changed after it is up to you. How? Income design. No button takes color. You can change the collector. There are many areas where you can change it. You can use your imagination button background color the background doctor. But supposed lightning is It s a yellow. You see the button? No button. One border with this border will be changing before you. You see, this body is changing. No, you can also. But in one form you can change the phone. Suppose this secret genius? No button one. I can You can change. There are various types of icons supposed long. It has this icon you can change to decide. No button one I can't. Color can change selector. I go home. Who's your season? This has changed. No, you can also do. But no, I can't. Placement it is on the right hand side. You just click here, huh? I can't. Placement is right. Left also could be you Continue. This is up. No. Only show the icon on Hoover for button one Yes, that s keeping It will show you that. No, You can also change the button. One overtakes coming. Suppose you want to change the color. Let me show you getting ready. Let me change the opacity of it. You see, it has changed like this. You can do various We'll see. I have not use the same thing. You would be boring for you. You can also change it According in the contact test, you can also button one who were radius is a very interesting part. Let me show you. You see, it has changed this giving a much more professional. So after doing everything you just saved up, things begin. You save you. Plus you can save the whole month. You right? Looking safe? No. If you want, you can watch it in your movie. See, this is the case. No, As this has gone out Let me change it. Let me go. What? You're sitting Lift me. You won't just use this. Sorry, The CSS is not here but things. It is here? Yeah, let me change total pussies. That means you won't get total ceases. Save it on. No, If I see it looks quite probation. You can also change it, then do all your refinement. Another thing as we have change. Did you can ab one picture toe? Let me show you Background image. Let me a float. This one So it looks quite professional. Uh, you can easily use it. So your visitors will really feel good after. Just visiting your landing page are your homepage. Thank you very much. Or being with me. Um, in my last class, I just talked a bit about my project. 5. Your Project: Hello and welcome to the small class on project. This is the website which we have designed are this is Let me quality. We have not designed the full website. It is just a landing page of the homepage. No, in fact Devi Builder, the visual builder part in TV It has changed the concept of how you were really your website now in my project section I just want to He did the Ural off your blogger website which well see it will give us an inspiration so that you can have a new look Our new ways to design our website or our fresh ribs. Thank you. This Watch this space for other places What I should do yourself Idiots where you can give a totally and love love love Thank you once again have a