September 19, 2019
How to Make A WordPress Website With Elementor

How to Make A WordPress Website With Elementor


– [Instructor] 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.

77 thoughts on “How to Make A WordPress Website With Elementor

  1. Nice to see it in action…

    … as one can see there should be a third option to the templates. It would be great to allow certain attributes to be overwritten when using a template and others to be inherited from the template (maybe a switch on every settings on a template widget attribute).

    Also great would be to be the possibility to import export sets of templates so one can reuse, sell and buy template snippets to quickly build pages.

  2. wow. another great tutorial and features from Elementor. how we can make a website which has a desktop version and a smartphone version in Elementor? I mean a light version of the website for mobile devices?

  3. I'm facing some problem with the font styling. I diagnose that it might be the base theme. Any idea how to turn off the theme's text styling?

  4. Nice tutorial, is there a link to a live example of this site? I was hoping you'd show how this all behaved responsively.

  5. I love this tutorial and after some adjustments got it looking good on tablets but cannot get the right look on a mobile device. (Using Elementor mobile view in app). What am I missing?

  6. I support @Karan's Shukla, could you consider doing design tutorials with Elementor… Once again, thank you for the amazing design and tutorials

  7. Could you please provide a link with clear description difference between pro version and free version? Couldn't find through googling.

  8. I just picked up Elementor Pro cuz every slider plugin i would try gave me grief. So now I'm not sure why the margin adjustment to give negative padding to the right and left side of the slider photo is darkened out and I can't select it to make changes. Is there an option I need to select or unselect to undo this limitation?

  9. However, hope there will be a module to create beautiful (modern) designed menu's. Most themes don't provide a great looking menu out of the box. Especially the menu for mobile devices is always a bit poorly (UI) designed. Please make a great UI Menu module…

  10. Thank you for your excellent video as I could develop the index page. However, I want to know how to insert logo, edit footer and have a left sidebar on the blog page. Kindly let me know. Thank you once again.

  11. Hi is it possible to edit and develop websites with elementor other WordPress themes such as Interface, Vantage ?

  12. How do I make beautiful professional looking pages with elementor everything I make with elementor looks like Microsoft paint while my old website which I made using sydney theme and site origin page builder looked 3d and had parallax effects and was really beautiful. How do I make parallax effects using Elementor? Also how do I make websites that really pop using elementor I'm new to this. How do I stop my websites with elementor from looking flat and bland and boring

  13. Thanks for this great tutorial! 🙂
    But you should change info. It says that all you need is a free theme and a free page builder. But in video you work with pro elements like slides and that is not free…

  14. Hi, please, can you tell me how can i insert or create main header with elementor. i've chosen canvas an option

  15. Hi!!
    Lovely video which you have make. This is very simplistic webpage but very attractive. But just one thing i want to say that when you make this type of video you just just slow to talk…just for user friendly.
    I want to know that which font you use in this video.
    Otherwise great video…

  16. Hi, great tutorial and plugin! Thank you. Could you please advise me how to edit footer (Proudly powered by WordPress) in Base Theme?

  17. Well, almost 100% free, since the first element that you had (this is just where I am right now) uses a slide, which is an Elementor Pro feature… Fortunately, I have it, but for those who don't, they won't be able to do that part (and maybe others)…
    That being said, it seems like a great tutorial, but would it be possible to provide the images so that we can follow along and do it ourselves (and, if it's live, provide a URL so we can compare with our own)?
    Thank you.

  18. My god! It's such a powerful tool!! May I ask how can I copy sections from one page into another page please? I'm thinking of custom building my footer and just copying it around rather than use the standard plugins that are given. It's like the perfect builder! If only I can build my menus with this too hahaha!

  19. Great tutoral! However I'm stuck when it comes to publishing what I did using Elementor. It only shows the page I did using wp webdesign using rows and elements. Elementor did save the changes because when I click edit this page using elementor, it takes me back to what I did the complete page but it's not publishing it (page viewed in another browser). Help.

  20. Thanks for the great video – I have a newbie question, though, regarding the main menu. I see from a previous answer you have said you have used the Base Theme menu, however, I cannot get the font colour of the menu to change in the way you have. I have tried under Appearance > Customise but nothing happened – how do you do that?

  21. Thank you for the tutorial. I would like to build a site like http://themecanon.net/themes/hairdo-barber/. May I ask a few questions?
    (i) Would it be possible to emulate this site using the free version of Elementor;
    (ii) Would I need to purchase the Pro version;
    (iii) Would I need to purchase the template itself and edit with either version of Elementor;
    (iv) Would it be necessary to purchase Astra, Generate Press, etc in order to emulate my chosen layout?
    Many thanks in advance.

  22. why cannot connect the elementor pages with the site? this is the biggest problem and all the videos Ive watched nobody mention it…Where do I go after a build a page or a header.. customise? where in customise? Im so frustrated

  23. It was great but remember when you are doing the tutorial please make it slow. For a newbie like me, I was struggling hard to cope up with your speed. To understand your first 5 minutes I spend like 30 minutes all over like where you clicked or where you put this and that. Now I quit. Its kinda impossible for a complete newbie to match with your speed.

  24. Hi guys! Please help! How can i get created web site from elemenor? Everytime i copy link it opens in WP, though i only use this: domenName.com (my own name ofc) without any word press suffixes… What am i dowing wrong? How to change page <title> with Elementor too?

Leave a Reply

Your email address will not be published. Required fields are marked *