– Hi guys, this is Yuri for Elementor, and today I want to show you how to design a complete website with Elementor. In this quick course, I’ll guide you step by step from scratch to a complete beautiful website. In this tutorial, I’m using the base theme by SitePoint. This is the starter theme, but with Elementor you can create any website that you want. So first, let’s take a look what you’re going to design. We have the Home page. Services page. Portfolio page. About page. Contact page. And there is a bonus, Landing page. Let’s start it by moving to the WordPress Dashboard. Pages, a New Page, Home. Set a Template as Page Builder Full-Width, Save. And Edit with Elementor. First take a look, this is the Home page that we are going to design. We have here four different sections. The Intro section, the Services section, Testimonial section and Blog section. Our first step is to create this Intro section.
Actually is a two column section. So, I’ll open Elementor. Add new section, two columns. To the left, I’ll drag a Slides. Just click the simple text. Instead I’ll upload a background image. And I’ll duplicate a slide. To the second slide I’ll choose a different image. To the right column, I will drag a heading. Below it I’ll drag a divider. Adjust the color. Reduce it. Below it we have a paragraph. To reach this complex design, I made a few tweaks to the margin of the Padding to the section, the column and the widget itself. So, the first step is go to Section, with the Full Width, Column, Gap, No Gap. Contact Position, Middle. And I’ll add Padding both above and below this section. To the right column, I will add a spacing, a Padding to the right and to the left.
I’m using percentage. Now I’ll go to Column, add Background, gold. And I’ll add the Padding to get the right result. Now all we have is to put the slides outside from the column. So we made a negative margin. I’ll add a Box Shadow, And this is it. Below it, we are going to add this slogan. So I’ll open a new section. Full-width section. No Gap. Inside, I’ll drag a heading. Change the typography. Now the next step is to add the Services section. So we’ll Add New Section. I’ll set the background as white, because we have a light shade of blue from the theme. Inside I’ll draw the heading. What We Do. Change it to H3, under the Style, I color it in gold. Change the typography, reduce it to less spacing. Now I want to separate the column into three different columns to put the services. So we’ll drag a Columns widget. We need one more. And I changed all the gap of the section to No Gap.
And inside I’ll drag an Icon Box. We don’t need a description. I’ll pick an icon. I change the icon color to light shade, and I’ll add over of gold with Float Animation. And to the Content, I’ll reduce the title to 90 pixels. Now I want to get this effect. So I’ll use the Padding option. And I’ll add a border, one pixel border. With light Box Shadow. Looks great, I’ll duplicate it. Now to reach this space between each column, I can use the gap of the section, but it will add me spacing on the left and the right. So I do I do manual margin to get this effect. Please note that if you are using manual margin don’t forget to change it for mobile devices. Now we’ll duplicate the whole columns, and we’ll add spacing. So a pixel above and below. And for this section also.
Now I change the text and the icons, so I’ll do it on speed. Now I need to add this section that will be under the text. I should have more padding here and a bit margin to reach it. So we’ll add here more space. And I’ll use this margin to put minus margin. Right. Now it will be under this text. Below it I will add the testimonial section. So actually it’s same thing we did here on the first section, and do it quickly. Add New Section, two columns, to the right I’ll add a Testimonial widget. Pick an image, change the position of the text to the bottom, to the top. I’ll increase it a bit. Change the title to Uppercase with more spacing, and the Job also change the line height. Now I’ll go to Advanced tab. I’ll add padding and white background, because we are going to colorize the entire column with Box Shadow to get the impact.
Right. Now I changed the section to Full-Width with No Gap. Content Position, Middle. And to the column itself, we’ll set a gold background with Padding as we did before. To the top and the bottom, I will adjust, I’ll head for the right, and instead to the left. And to this Testimonial widget I’ll set a negative margin. Change a bit the size of the columns. Now it looks similar. In same way, I can change the background, instead choose the color, I can put an image.
Image. I’ll add Background Overlay. And below it, our final section on this page. The post. The post from this magazine. So I’ll duplicate this Heading. Just change the text. Below it, I’ll drag Posts widget. In default it comes with three columns so it’s fair enough, I just change the ratio of the images. We don’t need Read More. And I’ll change the color of the title to blue. And I’ll set Spacing between the title and the Meta, and the Meta and Excerpt. And for the Excerpt itself, I’ll change the Line Height. Now we’ll set the white color for the section with Padding above and below. Put Padding under the title, and this is it, it’s the same page we designed before. Actually I’ll add more space between the columns. Seems like 40 pixels. Great. Now that I’ve finished the design of the Home page, we are moving on to the Services page. In the Services page, you can see that they’ve used again the same models like this Logo section and the Services section, but this time with description. Even the Testimonial section is the same but with different backgrounds. So if you like to work twice, it’s your fault, but I want to show you a quick tip how to do it with half the time.
So I’ll go to the Home page and save this element, the Heading element, as a global widget. You can see here a save button, and I’ll call it Slogan interior. And this section itself, I will save as Section to the Library. Slogan section. In this way I will save the Services section. And also I’ll save the Testimonial Section. Now I’ll click here and go to Dashboard. Open a New Page. Services, set a template as Page Builder Full-Width, you can save it, you can publish it, whatever. Click on Edit with Elementor. And we have a new page. So the first section, it is actually image box. So I open new section with two columns.
To the left, I will drag an Image Box. I’ll pick an image. Set the image as left. Change the text. And the description. I’ll add spacing, something like 50 pixels, and the size of the image increase. I’ll align the center to Middle, the Content, and I’ll drag the column to reach 75%. Now I’ll go to Section setting again, set as Full Width, No Gap, Content Position Middle, in the column itself we set a background, gold color with Padding. Into the widget itself, I will set a white background. With Box Shadow. And negative margin right. Now I want to set the spacing between the Heading and the description itself. So I’ll go to Style and the Content. I’ll add space Title Spacing and I’ll increase a bit the font size, with less space between the letters.
In the description, I’ll change the Line Height. For the final, I will just add 50 pixels on the right. And now it looks similar. Below it, we have the Slogan section. So now look how cool it is. Instead to add empty section, and have two sections, so I’ll click on Add Template. And I’ll pick the template that I set before, the Slogan section. Pick insert, and ta-dum this is here, just see that I didn’t set Padding to the sections. So to the first section, so I’ll add Padding here. And as I promised before, you can see here the entire design, the heading, it’s a locked widget, because it’s a global widget. What does it mean? It means that if I change here the text instead design to home, for example, and I save it, so in the Home page you also, we see the change in the text. And in our change here to Design again, save, refresh the page, and it changed also.
So it’s very good, because every place in the website, that needs to use this section, I can change it from one place to all of the places that they placed on the website. Below it, on the Services page, we have the services. It’s the same section we did in the Home page, but we use a description. So I saved it also to the library, so I’ll click on Add Template, Services section, Insert. Right, it’s on the place, just add to the description field, the text, and I see that I need change a bit, the typography. So I do it quickly. And I do it fast to all of the rest. Okay, now as I finish to change the parameters, we can continue to the next section. The next section is a testimonial, so here again, I’ll Add New Section, but not add empty section, just Template Section.
Testimonial section, Insert. But this time, I’ll change the background. So instead this image, I will delete it, and I’ll pick a gold color. And to the left column, I will pick an image. You should know that I don’t see the background of the column, because it’s an empty column. So I can place area inside divider, or spacer, or something empty, just to show the background that’s hiding behind. Okay this is it. We finished this page, and we are moving to the next page. The next page is the Portfolio page.
Here I used the same language of the design, but in a different way. So we’ll open a new page, back to the Dashboard, New Page, Portfolio. Set as Page Builder, Full Width. Save Draft, Edit with Elementor. I’ll add new section with two columns, and I’ll place inside Portfolio. The Portfolio widget allow you to display any custom beside the post or if you have another galleries post type, you can show it in there in this way. I changed two counts to nine. I changed the size of the images Changed the gap. I don’t want this gap. And I changed the ratio to one. So it will be squared. Just changed the size of the column. I’ll set the section as Full Width, with No Gap. And I’ll add background color to the column. Plus Padding, and for the Portfolio, I’ll add minus margin. With Padding inside, no, without Padding. With Padding, why not. White background. And Box Shadow. Now I’ll change the color of the hover on the Portfolio.
Under Style, Item Overlay, change it to black, but it’s too heavy, so I changed opacity, the transparency. And above the Portfolio widget, I’ll drag a heading. Change to Portfolio. Change the color to white. And I’ll add a bit Padding below it. Under this section, we’ll have, again, the Slogan section. So I’ll Add Template. Slogan section. And just add, Padding above and below this section. And it was very quickly and easy, and we did this page also. Our next page is the About page. In the About page, we have again, the intro, but this time with video instead of slides. Below it we have the slogan section, the team section, and animated number section, with a strip of clients.
So click on Go to Dashboard, Add New Page, About, set as a template, Full Width, and click on Edit with Elementor. Because it’s the About page, we do it more quickly. So we’ll Add Template, I said before, the Intro section. But this time I will delete the slides instead of that, I will drag a video, set minus margin to the right with Box Shadow.
Less opacity. Go to YouTube, get the URL of this video, and under Content, I change the URL, Hide the Title and the Player. And we get it. Instead of Welcome, Who We Are. Okay, the middle of this section, And again, Add Template, Slogan section, and below the Slogan section, I will add the Services section. But I don’t need the services, so I delete them. And instead of that, Our Team. I drag inside an image, and I’ll pick this guy, change it to Full and under Style, size 40, this Border Reduce of 100%, it will be rounded.
Under the image, I will drag a heading, the name of the guy. Just copy it. Align the center, change the typography, nine pixels. Below it I will drag another heading. This time for his title. I’ll change the typography to script font, Weight Normal, color, and I’ll edit with 10 pixel up. Below it I’ll drag Social icons. Pick a circle, change it to Custom color, the primary will be maybe lighter, and the secondary will be white. Now I’ll decrease the font size of the icons, and I’ll add Padding and Spacing right. Go to column setting, Border Solid, one pixel, gold, with Box Shadow. And of course the Padding. Okay. I just duplicate it three times. And in this way, I just change the image of the team members.
And their names, so and so. Okay. Below it we have the animated number section. So I’ll Add New Section with two columns. To the left, I’ll place an Image. Let’s pick this image. The whole section I will give Full Width with No Gap Content Position Middle. To the left column, I will choose light shade of blue with Padding, as we did before. Into the image itself, I will add negative margin with Shadow. To the right column, I will drag the animated number, but I will separate the column itself to three different columns by using the columns widget. So I drag it inside. Reduce it. And I’ll add Padding to this section. And I’ll add more column here. And inside, I will drag the counter. Duplicate it. One more time. Duplicate the whole widget itself, and I see that they have set too much space. So I can reduce it, many I want. That changed the numbers. You can set your own numbers. It doesn’t matter what you placed. Below it, I will add one more section, the final section in the page.
So I’ll place here a heading, Our Happy Customers, change it to H3, change the color to gold and change the background of the section to white, and I’ll add a Padding above and and below this section. Below the heading, I will drag an image and Image Carousel. Add Images, and here, the logos of my happy customers. Change it to six Slides to Show, and the Full, because I prepared the size of the images before.
I’ll add more space between the images, so I’ll go to Image, Spacing, and set us more space between them. Maybe I will add a bit Padding below the heading. Okay. Our final page in this tutorial is the Contact page. In the Contact page, instead of the slides or the video, I’m using the forms and the maps. So let’s design it. Save this page, go to Dashboard. Again, open New Page, Contact, Full Width, Save and Edit with Elementor.
Add Template, I use the Intro. Change the title to Contact Us instead of paragraph. Place an Icon List. Change the parameters to the phone. I have here tons of icons from (mumbles) Same to the mobile phone. And to the FAX. Now we’ll go to Style. Under Style, change the color to gray. And the text itself, also the gray. And I’ll add Indent to the text between them, and on the typography, I’ll change the Line Height to get space between the lines. Great. Now I’ll delete these slides, and there instead I will drag a Form. So Forms, it’s a very cool widget, actually. Just give them the design for so you will see, the magic, on your eyes. Big Shadow. With minus margin. Okay, the forms, if you didn’t play with it, it’s very cool. We’ll hide the labels, and it will change the size, the width of the columns to 33% and I’ll add New Item, Telephone. It’s very important to fill the label and the Placeholder. Actually the Placeholder is on there, you don’t have to, but the label is very, very important because this is the name of the label that you get in your mail.
I’ll change it to 33 pixels. And the message, I will expand to six rows. Now under Style, I will change the Fields to background color, very, very, very light shade. Without Borders, Without Radius. I see as they want more space around the Fields. And for the button itself, maybe I’ll change the size of the button to bigger button. And I’ll change the color to blue. And I’ll reduce the Border Radius to none. And now the typography changes to upper case. Maybe on hover, we’ll change the background to gold again. That’s good. And on this, we have this Slogan section again, so I’ll go to Add Template, Slogan section. Under Slogan section, we have again the Services section. This time I’m using this icon box to create three different options to contact with us. So I’ll place here the Skype icon with our nickname. To the middle, I’ll put our mail address.
And for the third, I’ll place a pin for the map. Good, okay the title I don’t need. So maybe should add more, no it’s enough. For the final, the final, the final section on this page I do the same tweak here again, just duplicate it. Put it below. Change it to Follow Us. Change this to social icons, such as Facebook, and Twitter and YouTube. But this time, we will just remove it, and change the way of the columns. And this time I will drag inside a map. And to the map itself, I will change the margin to a minus margin to the left. To the column itself I have to change the directions to add the Padding on the right. Adjust add Border Radius to the map, no Border Radius, Box Shadow. And maybe I’ll expand it a bit, and I’ll change the background to the image. Let’s remove the background. I’ll add white background without. This image, we used it before if you remember, Background Overlay, to color it, to red, white. I see that I have here space, so I go to this section again add Padding, bottom Padding, to reach this design.
For the final, I promised you a surprise, so I want to design this Landing page. I go to Dashboard, Add New Page. Landing Page. And here under Template, you can choose Page Builder Blank. The Blank means that you have a blank page without header and footer. So it’s very, very suitable for Landing pages. So to do this Landing page, actually I have one section full screen with two columns. So I’ll Add New Section, two columns. I set a section as Full Width, Height, Fit to Screen, and I set the Background as solid background, right.
So to the left, on the left section, I have this Form. So I’ll drag a Form inside. I’ll hide the Labels, and tweak a bit, the Field. I’ll hide the Border and I’ll color the background the light shade of blue. To get this effect, again I’ll go to Advanced, Add Padding, Background white, and Box Shadow. And to the left column, I will add the Image Background, and Image Background.
You can see now that the background appear only behind the widget. So I’ll go to Section. Under Column Position, I’ll set as Stretch. And right now, all the content will be up here in this section and adjust the Layout Content Position to Middle. In the right column, I will drag a heading. Winter Collection, and below it, I duplicate it to Coming Soon. Below it, I will drag a divider. Three pixels, color gold, Reduce the Width. Change the color of the Winter Collection to gold.
Also and I’ll change the Weight to light. And I increase the font size. Below it, I’ll add a paragraph. Now I’ll add Padding to the column. I use percentages. And I’ll go to the Form. We need minus margin. To this column, Padding to the left. Okay, I’ll change the size of the button to Medium. And under Style, Button, I change it to Uppercase. Adjust resize the columns. Maybe I’ll add to the Form more depth to the rows. Right. Here I placed three Portfolios. So I’ll go to Portfolio, place it, and because it’s a small Portfolio, I don’t want to show the title, so I’ll switch it to Off. And change the color Overlay to blue. It’s opacity. And be finished. Thank you for watching this video. If you survived this video this long, I guess it means you are a serious user, so I would like you to give some feedback. Subscribe this channel to get notified when we release the next video. See you next time. .
As found on Youtube