How to Use Elementor: Build an Awesome Wordpress Website, With No Code | Jon Wolfgang Miller | Skillshare

How to Use Elementor: Build an Awesome Wordpress Website, With No Code

Jon Wolfgang Miller, Digital Graphic Designer

How to Use Elementor: Build an Awesome Wordpress Website, With No Code

Jon Wolfgang Miller, Digital Graphic Designer

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

      1:54
    • 2. Class Project

      1:33
    • 3. Elementor & Wordpress Set Up

      2:59
    • 4. Elementor 101 - Menus

      4:59
    • 5. Opening Hero

      11:51
    • 6. Information Section

      7:19
    • 7. Elementor Global Settings

      4:28
    • 8. Image Slider Gallery

      12:36
    • 9. Animated About Section

      13:38
    • 10. Creative Animated Text

      16:59
    • 11. Customer Testimonials

      4:08
    • 12. Website Footer

      4:57
    • 13. Website Header

      16:57
    • 14. Responsive: Tablet

      13:18
    • 15. Responsive: Mobile

      15:12
    • 16. Make Your Site Live

      3:17
    • 17. Domain Name Set Up

      5:23
    • 18. Thank You

      0:58
110 students are watching this class
  • --
  • 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.

234

Students

--

Projects

About This Class

b4080f82.jpg

The internet is a huge part of our lives, we cannot go through a whole day without using our mobile phones, or looking at websites on our laptops.

If we are running a business, or if we need to show off our creative skills, we all need to build our own website. But where do we start? How can we be super creative and super unique? In this class I will teach you how tp use the  Elementor.com page builder in wordpress, and then you can make your own awesome site.

Here is what you will learn:

  • Wordpress set-up
  • How to use the Elementor.com page builder
  • Global Settings
  • How to make your own impressive personal website
  • How to make sure they work on mobile and tablet

This course is perfect for:

  • Beginners - If you have never used Wordpress and you have never built a website this will talk you through the basics of , and show you how to take those into your own beautiful style
  • Experienced Website designers - For those of you comfortable with Wordpress this will show you the best page builder for being super creative, so you can impress anyone who visits

When your website is complete and live post it here in the projects section and I’ll give you my full feedback.

You can see the example website here:

jonwdesign.com/wolfgang-music

Credits

Meet Your Teacher

Teacher Profile Image

Jon Wolfgang Miller

Digital Graphic Designer

Teacher

Hello, I'm Jon Wolfgang. I have been a professional designer for 20 years, I focus on digital, print and branding. Also I'm obsessed with the 80s and Super Mario!

I build websites for clients and help them figure out all their SEO. Here I teach Wordpress, and make it simple to use, which is perfect for all us creatives. Wordpress can get a little confusing and a little complex, but when you understand how it all works you realise that anything is possible. Find that perfect balance between technology and all your creative bursts. 

Can you check out all my latest work on instagram on Dribbble and Behance.  

And I live over here at jonwolfgangdesign.com

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
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.

phone

Transcripts

1. Introduction: Websites are super important. We use them for everything, don't we? We use them for news or for music, or to show off our creative skills in our portfolios. If you want to build a website tomorrow, well, where do you start? Which program do you use? In this class, I'm going to show you how to build a website using the Elementor page builder, is a fantastic program that is super easy and allows you to be super creative. Hello, I'm John Wolfgang Miller. I've been a professional designer now for 20 years. I've worked for some big clients such as Fox TV here in Australia. Now, if you want to use WordPress it can get quite complex. Yes, you can just buy in a theme or something and use that, but then you're going to end up with a website that looks exactly the same as everyone else's. If you use Elementor though, you get to be super creative. You get to build whatever you want to build. It's a fantastic program. In this class, I will show you just how to use the free version of the program so you can just use it to build up all of your skills. In this class, I will guide you through the whole process. I will show you how to set it up, and then we will build an entire website. We'll start off with an impressive hero section and then we'll move down into some animation parts that will really impress the visitors to your website. This class is perfect for you if you're a beginner or even if you have a lot of experience, what you will learn here will massively improve all of your website design skills. You will have a beautiful looking website at the end of it, and if you're looking to take your career further into website design this is what you need to know. Let's go build a website. Let's get started. 2. Class Project: The main project here is to create a full single-page website. Each lesson will show you how to set up different website part in Elementor or using different widgets and different tools. The lessons will start with your opening here or section, and then you will make an information section with an image slider. After this, you will make two different About sections that both work in very cool animated ways. Then you will finish off the side with a footer and the header. Install Elementor and follow along with each lesson and recreates what you have learned at the end of each one. You can either use the exact same images I have and create the exact same site, or you can use your own images and give it your own little style. If you want to use the exact same images, they are kept here in the Resources section. Download this and add it all to your media library. At the end of the class, you will have a fully working website and you will have learned a lot more about Elementor, so you can take your website designer skills much further. 3. Elementor & Wordpress Set Up: Here we are right now at Elementor.com. We will get started having some fun with design very, very shortly. But let's just get started first. This will take you through to a few pages of questions and you can answer these if you want. If you don't want to, just click the "Skip" button at the top here. Then you get asked to choose a hosting provider for your site. Your hosting provider is basically the company that stores the website for you. Now there's normally a fee involved with this storage. However, as you can see, sometimes free trials are offered, and if you can see this one here on the left, FLYWHEEL, they are offering a 30-day free trial. If you're a beginner and you're trying to set this all up just to have a play around with Elementor, choose this one. When you filled in all of the details and you have verified your account, then you're going to have to fill in a few details here about the site you're going to set up. For the site name, the one I'm going to build is going to be a music store, and it's called Wolfgang Music. So I'll just type that in. Your temporary domain is basically the domain name of your website, your URL, your website address. If you do need to change it to another domain name, one that you have bought elsewhere, well, don't worry about that for now. I'll talk you through all of that at the very, very end of this class. So datacenter, I live in Australia. Then create your WordPress user. This is basically your login username and password for WordPress. Then you'll come through to this page. Just one more thing to look at here. You can see at the bottom it says privacy mode and I switched on, and that's because we're using the free trial, so therefore, the website is private. If you scroll down, it will already have a username or password set up for you. I would just recommend changing that to the exact same password that you set up for WordPress login. When that's done, just click up here on "WP ADMIN" and then enter that password and username a couple of times and you will go straight through to your WordPress backend. This is the WordPress backend. The menu is over here on the left, and as you can see, Elementor is already installed. Using a different host, where you've set this up a different way, and Elementor is not there, very simple to get it in, just click over here on plugins and go to "Add New". Simply type elementor up here, and in the pop up, this one's already installed, but it will say "Install Now", click that and then click "Activate", and then you will be ready to use Elementor, and then we're all ready to start building our website. 4. Elementor 101 - Menus: Here we are back again in the WordPress dashboard. One thing we need before we get started on the design of the site is a theme. This is a WordPress theme. You need to have one of those setup before you can start playing around with the design. If you hover over here on appearance, you will see the word, Themes. The one at the start here is called Hello Elementor. This is the one that you're going to need. If I click on theme details, you'll see it looks like this. If you also look over here, it says, it's a plain vanilla and lightweight theme for Elementor page builder. What they're trying to say there is, this is empty. This is what you need, but there's not a lot of designing code already in there that's going to mess up the design of your site or slow it down. It's actually an empty theme. You'll see that when we start building. Now when I signed up through Flywheel, that automatically went in. When you come on this page if Hello Elementor is not there, you just need to add it. That's very simple. Just click up here, type in Hello Elementor, and then it will pop up, and then you just click on here and you just add it and make it active. One more small thing that we need to set up. If you hover over here, you will see the Elementor drop-down menu. Let's click on Settings. The only thing we need to select in here is in the first pop-up window, General. You can see here we have disabled default colors and disabled default fonts. But if we take both of these boxes, we now have the option to play around with the setup of colors and fonts inside our website. Now that is setup, come over here to Pages and select All Pages. As you can see here, a couple of pages come automatically with the theme. We do not need either of these pages, but that one is live that has been published, as you can see over here. Let's just turn that off because it's just an empty page that doesn't need to exist. If we hover over here on the quick edit, you have a few options here, but the one we're looking at is status. As you can see, it is published, and you can change that to a draft. But now we're going to create our own live page. That's very simple. Click Add New. At the top, simply add the title of your page, and then over on the right-hand side there's a drop-down called Page Attributes. In template, choose Elementor Canvas, that is what we need for the type of website we are building. Then click, Edit with Elementor. Before we get started with Elementor, it's good to just have a little look around all of this menu over here on the left. We have a few different menu options. There's one on the left, the hamburger. That has some general settings for the overall site. The one over here, this is all of your widgets. These are all the elements that you're going to use to build your website. These are split up into different subsections. You see at the top here, these are the basic ones. The one below, you've got the word Pro next to them. That's if you have the Pro version of Elementor. You may wish to install that, but just remember that what we're going to build today does not need any of that. We use these general ones below. Then a few more options down at the bottom. Navigator, we'll come on to that shortly. History, well, that's if you've made an error and you just need to take it back a few steps, you can always click on that. Then responsive mode. As you can see here, desktop, tablet mobile, again, we'll look at that later. The last one here, preview changes. Anytime you build the site, you can open up pretend live page, so you can see what it looks like when anyone else is looking at the site. Well, let's just have a look at these two icons here. First one on the right, let's just click that. As you can see, it says, add template. Now, this is what you would use if you want to use one of the pre-made templates provided by Elementor. Now a few of these come with the free version, and then a lot of them have the little Pro icon above, so you need Pro Elementor to use those. These are a very useful and can build you a very nice site. But if you use one of those, well, you're going to end up with a website that may look like thousands of other people's websites, which is why we're building our own. Let's close this page. 5. Opening Hero: Now we're back in here. Hover of the over the plus icon and you will see that allows us to add a new section. Sections are basically the breakdown of our website. One section sits on top of the next section, and that's the order of which our page runs. Let's click on that. Select your structure. Now, these are columns. You see this first one here that says single column, two columns, three columns, etc., that just means if you need to build multiple things within the same section. For the hero, we're just going to use a single column one. Let's just dropped in this little blue section at the top. You see we have a few more options here. Plus allows us to add a new section and delete the section if we decide we don't need that or we've made an error. Over here, edit the section. This is what we need to do. This is where we can drop things in, change the size of everything. So let's click on that one and see in terms of what pops up. It says "Meet Right Click". Choose this if you want. It's just another way of going through it. It says "Got it". If I'm hovering over here and I right-click, that brings up this little drop-down menu. We can delete things, we can save it as a template, or we can bring up this navigator. Navigator is the section that we're looking at down here. This is just again, another little drop-down menu of everything that is on your website. At the moment, we just have a single section with a single column. But as we start building up, you will see multiple different things in here. It's just a good navigation tool for getting around the website and changing certain things to certain sections. But again, let's just go back and edit the section. The hero is the opening section of your website, and it is the hero because it's the most important part of it. What I want to do here is have a main opening image, and on top of that, I want to have the company logo that also has the company name in it. In terms of what you want to do, how to think about it and have a look around and see which websites you like, and see what you think works as a hero section for the type of website that you will be able to. Over here on the left, in the menu section, well, as you can see, there's a lot more options now, and as the lesson continues, I will talk through as many of these as possible. Let's start over here on Layout. What I want to do is play around with the size of this section. As you can see at the moment, it's tiny. It's not taking up a big space because there's nothing in there. What I wanted to do is take up the full page. I'm going to hover it here on height and then say what the minimum height is. As you can see up here, we have a few different options. This is on pixels at the moment and it's set to 400 pixels. Want to make it bigger. What I'm going to do is click on VH and that will change the height of the whole thing in more of a percentage, it's a value. Let's get it at 100 percent. As you can see now, the blue line goes all the way to the very, very bottom. The whole page is filled. Now, what I want to do is drop in my background image. To do that, let's click on "Style". As you can see, we have the option here of background. Click on this brush icon over here, classic. That's giving me a few other the options. If I want to, I can just make it a certain color. [inaudible] red, but I don't want that. Remove that. Then let's click on image, I want a background image in here. When I open up the Media Library, I can see every single image that I have uploaded. If you want to know a little bit more about uploading images, go to my profile on Skillshare and look for this video, that will quickly talk you through what should be done. When we upload images to WordPress, what matters is the ratio of this image, the file size, and the file name. Watch this short video, you'll understand a little bit more. When you have all of your images ready to upload, click on here and click "Select Files". What is Wolfgang music? Well, I'm obviously making up a name for a music sore, but it's going to be a more old-fashioned style music store, the way they were 20 or 30 years ago. What we're going to sell here is a lot of vinyl records, more retro things like cassette tapes, but we're also going to sound a lot of instruments, a musical gear for people to use when they're recording music or playing live. My main selling point though, is going to be the vinyl records because I think that's the thing that's going to get customers in. We all like to walk around those stores and have a look at what music is available. I'm going to pick this image here as my background image. Let's see at the bottom though, it's that twice, this some weird setup here. We're going to see a better version of this, I'm just going to close and navigator window and I can see it in full. Let's have a look at the image options over here on the left. I'll just talk you through how all of this works. The moment they're all set to default, that's because it's taking the default settings from the theme, and you can play around with all of that now. Position, what do we want? Here's all your options. I want it to be right in the middle so "Center Center". Now it's moved to the middle, but now we still have it repeating at the top and the bottom. Let's go to Repeat, "No-repeat". That's what I want there. So that's disappeared. But I still have a white banner at the top and the bottom, I want to get rid of that so let's go to Size and let's go to "Cover". There we are, it covers the whole page. Now, that's perfect. As I'm looking at this though, well, I can see this side of my website on the right and then still the menu on the left. That's not how everybody is going to view it when they visit your website. What you should do is click on this little arrow over here. As you can see, that hides the panel, it hides your menu. If you click on that, that's what people will see when they come to your website. Let's just close that so we can get our options back. Now if I scroll down on here, well, you can see what's going to come next. There's nothing there yet, it's empty white space. You can see what happens to the image above that. I actually want my image to stay in the same place when I scroll down. What I'm going to have moving is the logo on top of it. Again, that's one more setting in here. Over here, you can see it says attachment, and I'm going to change that to "Fixed". Now if I scroll down, you will see what happens. Everything moves in front of the background image, that stays static, and then the next section will hover over the top of that. That's perfect. Now, I'm going to throw in my logo on top of this. Let's go back to our widgets and let's go to "Image". I'm going to drag the image box just on top of this central element here. As you can see, it's just dropped in this standard gray box, that obviously looks terrible. If we click on this over here on the left, we can choose the image. I'm going to choose my logo that I've made, which has the icon of vinyl records, and it has the name of the music store. I'm going to choose the white one for this so it sits better on top of what's a fairly dock image. Here we are. Now we have this single column that is centralized, well I want to do is make it much smaller. Again, I'm going to click on "Edit Column". Over in your options over here again, you have Layout, Style, and Advances. What we want to do is go to Advanced. What we need is a margin either side of this column. You have four options here, top, right, bottom, and left. Now, if you want them to all be the same, type the number into the first one and you will see it has made them all the same. But in terms of position, maybe you want it closer to the left or closer to the right. We'll hover over here, we will see it links values together. That's why they've all been the same, because they are linked. If I click on this, they are unlinked. Let's just say on the left, I want a much bigger margin, change that to 300, there you are, it's slightly moved to that. But that's not what I want, I want all of the margins to be the same. Let's put that back to 100 and then let's go link values together so they're all going to be the same. There we go. Now we have 500 pixels above the image, below the image, to the left, and to the right. They're tiny little bit too small though and a little bit bigger so maybe let's got to 450, shall we? Yeah, there we go, perfect. I love that size. Now I have my background image with the logo on top of it. It's working for a hero because it has that blink moment. It says we are a music store, and you can come in here and check out all our vinyls. We click on the little arrow, gives you a better view of how that looks. You can see where the icon sits next to the image. You don't really want it to sit on top of the people, there to the left of that, so that works. But the icon is getting a little bit lost. It's not that readable because it's on top of a busy image. What I'm going to do here is put an overlay on top of the image. We can go back over here and click "Edit Section", or at any point, we can just right-click and bring the navigator back. Now the navigator again is showing me how the section, with a column, with the image inside of that. But we want to work on the section so again, right-click on that and go "Edit section". Now we're still in the style option here, so we've chosen what the background is, background overlay. That's what we want to work on next. Let's click on the classic icon again. Then if I click on this little icon here, that will allow me to choose the color that I want. What I'm going for here, well, this still has a retro fees. I want to go in this sort. Actually, this is a darker red. Yeah, that's really nice, a little bit brighter. Maybe too bright. A little bit darker maybe. Yeah, I think that's perfect. There. As you can see down here, [inaudible] you the hex code for that color. You may want to write that down, you may want to remember it, but I'm going to show you shortly how to set up primary colors that are global across your entire website. But for now, let's just go back to this one. Another thing we can play around here, opacity, obviously 100 percent, too much. Way down, not enough. You can't really see the icons. I'm just going to leave that at 50 percent. A few other options down here, blend mode, you'll recognize all of these options from Photoshop or whatever you use for your photos. You can play around with that. Pick the one that works best for you. I'm just going to stick with normal. There we go, we now have the hero section looking exactly how I want it to look. It's showing users who visit the website, who we are, what we do, and shows them our name. Now that I am happy with that whole section, I'm going to move on to the next section. But before I do that, just to be safe, we'll hover down here. You have the option of publishing the page. That will make it live, we don't want that. But what I'm actually going to do is click "Save Options" and just save the draft. If my computer crashes or something, it's all there, it's all saved in the backend of your WordPress site, so now I feel a lot more safe. 6. Information Section: Now you have built the hero section of your website. You've built that part that's going to impress any visitor. If we just scroll over here, scroll up and down, hey, you can see now how that's working, where the image is fixed and the icon is moving above it. I love that. That works really well. But now, you need to go into a little bit more detail about what you do, what this website is, and what you're trying to sell. Let's scroll down here and then hover over the plus. Let's drop in another single column. Actually, no, let's get a double-column. Because what I want to do in here is a bit of introduction text and then some images next to it, so let's go double. Background-wise, I just want to leave this as white. You can see when we scroll up and down, it's going to sit on top of the image there. I think that works well with the difference between light and dark here. I do not need to make any changes to the background. What I'm going to do is add some text here and an image here. Let's go with the widgets and then, let's start with a heading. We'll drop that in first. Let me set the default heading there already, and your heading texts here, and the colors and the font used. We'll come back to that in a second. Then we go, "Text Editor" and that allows us to write some regular text below it. Then on the right-hand side, "Image". This is quite good because, even though we don't want to use this, we don't want that blue text, and we don't want a gray box on the right there, but we can see how it's all set up. If we scroll up, we can see how it's all sitting next to each other. We need to make a couple of changes here. First of all, while there's no space in between this text and the image and the section above, so let's add some margin into this. Let's "Edit Section", go to "Advanced" and the options here are top and bottom. Let's add some pixels into here maybe 100. Yeah, I think that's a good space. What that's done is it's automatically added that same margin at the top and the bottom here. Anything that goes below, there's enough space as well. Let's call this breathing space or safe space, or sometimes whitespace because it is white. Well, that's allowing is space for every element within this section to breathe. There's a lot of empty space around it, so your eyes are drawn to what is in the middle, which is the information. The text, well I'll go in and edit that soon. But first of all, I don't really want it sitting at the top there, I want it to be centralized to the image on the right. Let's go over to the column and edit that. Now, as you can see over here, or we can play around with the column width. At the moment both of these are 50/50. If I wanted to make that bigger, well, this is in percentages, as you can see, so I'll make that 75 percent. What it's done is made the one on the right, 25 percent, but let's take that back to how it was. Let's put it back to 50. What I want to do here is play around with the alignment of the text. Both columns, as you see, are the exact same height from each other, because it's taking the height of the image that we've dropped in here for this one. But I want it to be centralized. What I'm going to do, is say that the vertical alignment is in the middle. There you are, it has dropped it into the center there. Let's just click on our little arrow over here and see how that looks. Yes, spacing around all of that looks percent. Now let's go back. We'll come onto the image in a minute, but let's have a look at the heading and the main text first. To that over here, click on the "Heading" or click on the little blue icon over here. This is where you can edit it. What we're going to do is write in our title. I just want this to be the name of the store. I'm going to write that in. Then I have a few options down here that you need to look at. If I hover over this, you will see there are options. This is H1, H2, H3; headline 1 headline 2, headline 3. You may know a little bit about all of this already, but if not, this is the order in which we set up our page. We start with H1, and then we move into H2 and H3, if you need to go further. Now, as this is the title of the page and of the website, I want to make this one H1. Now with H1, you only ever need one of those on a page and this is the main headline that Google looks at when they're searching for your website. This is the name of the website, so therefore it's the most important. For all of the farther ones that we put in, we're going to use H2, but for here, let's stick to H1. Now at the moment, well, I don't like that color and I don't like that font. Now, this is just picked up the standard default ones, so let's go in and change that. If we click on him to Style, so Text Color. I click on that, it's come up as blue. What I'm looking for here is another color, a secondary color that represents Wolfgang music. I'm going for a gold. Let's just play around with the colors, see what I can find. Get fairly bright gold. See what we got over here. Yeah, like that. Again, you will see the hex color at the bottom. Now let's change the typography used here. The family type, the font that has been chosen is Roboto. That is actually a very good font that I think I will use for the body copy on this website. But for the title, I still want something san serif, but I want it to be a little bit more fancy. I'll click on the drop-down menu here, and you will say there are hundreds of different fonts in here. Take too long to go through all of them, so what I'm going to do is type in a font that I know I like the use of, and that's called anton. I like it because it's bold and busy and best represents who we are as a company. Now there's lots more you can play around with hair as well, the size of it. That's a little bit small, so let's make it a little bit bigger, shall way? This is set in pixels again. Let's put up to maybe 50 pixels, I think. You can type that in. Then the weight. Well, there's multiple options here, obviously 100 is the lightest version of it. Actually, I think 600 was a bit more bold. I think I like that. Transform. If I click on that uppercase, that's what I want here. Yes, I really like that. All the letters are a little bit close to each other though, and that I can change around as well. Down here, letter spacing, let's just see. Drag that out a little bit. Less, maybe 2.5. Yeah, there we go. That's great. I actually really like everything that's happened there. This is the style that I want to use for H1s across my whole website. I really like this gold color and I like the color that we previously used as the background overlay on the hero image. For consistency reasons, well it's hard to remember all those things you'll have to go through manually and set them all up at one time. I'm just going to very quickly show you the global color settings and font settings for Elementor. 7. Elementor Global Settings: What we're going to do is go to the hamburger menu up here. Then we're going to go to Site Settings. Now when we come in here, you can see a few options. Everything you change in here will change across the entire website. We have two main options up here that are Global Colors and Global Fonts. Let's go Global Colors. This is already setup and we have it setup with the default settings, a primary color, a secondary color, a text color, an accent color. From a design point of view, self-explanatorily, Primary is the one that you use the most secondary. Secondary and then Accent is one that really use a tiny little bit as a tiny little highlight color. Let's have a look at Primary. Why will not to be is the red to be we used on the hero section. I need to go back to that to get that hex code. Let's close this and go back to this section. If we go to Background Overlay, there's the color there, what I'm going to do is just copy that one. I'll go back to Site Settings. Global colors, Primary. There we go. That is now my primary color. Then close that one. Find my code. I'll set that as my secondary one. Click Updates. Text color or as you can see, that's the main color being used for the text. I'll let that a little bit darker actually. We'll just go with a hex code that I know that's a little bit lighter than a full black, which is 121212. Let's delete that one that's coming afterwards. There we go. That's a little bit to follow on. I can just drag that on the side, actually and that a little bit different. There we go. I think I'll add that same color. I'm not really going to use that at any point anyway, but if you do want to set that up, then just click on it, change that to something you like. What would go well with that? Let's just see, a certain dark blue or something. I don't think I'm going to use that though. Again, I'll click Update. Now the way you will see this works is when I come in here and I go to Edit the Text Color, or I can click on this little icon here and that will show me my primary, secondary texts and accent colors. That way, I know that whenever I use a color, it will be the primary, the secondary or the accent. That's much better. Now quickly back to the hamburger. Let's have a look at typography here. The first option there is the body, which is the text that we have down here below Wolfgang music. There we go. Now I'm happy with that one, and I'm happy with the size of the font for everything there. You can go in and you can play around with all of this if you want to, but I'm happy with the way that looks. The main ones that I want to set up to ensure consistency again is going to be H1 and H2. Let's start with H1. Click on this icon. Let's change that to Anton. Size, we had 50 pixels, weights, we chose 600, Transform is uppercase. Still we have letter spacing that's 2.5. Now let's have a look at H2. Same font, size slightly smaller, 35 I think should be good, 600, uppercase. That's the spacing 2.5. Then let's click Update. What you've done here is you have set up all of the global settings so they are consistent across the whole website. As you build the site, you may decide halfway through you want to change them, or maybe at the very end of it, you may want to change them, if you change it in this section, it will change it across the entire website. It's a very useful, consistent tool. Now let's close that. Let's go back to our text section. 8. Image Slider Gallery: We have the headline sorted, we want to change the text inside here. If we click on that box, it'll bring up a regular text editor box. At the moment this is set to paragraph. That is set to our regular body copy text. We wanted to change that to something, well, I can choose Heading 1, Heading 2, exactly what we just set up but we just want it to be paragraph, we want it to be the normal text. You can start writing in this section or if you have it copied, you can paste it in. But be careful when you're doing that. Let's just say you've written all of this text in a Word doc or taken it from an email or something and you paste it in here, it may actually pick up some unneeded HTML coding. That will change the display of the text in there. Now, one quick way of fixing that is if you go to this website or one of these websites, Strip HTML. This will strip the HTML, and format your whole text. Copy your text into here, click "STRIP HTML" and there you go. Use this text. It's unlikely there will be any errors but if you do it this way, there definitely won't be. Let's go back to Elementor, and then paste it all in there. There we are, perfect. The spacing and layout of these two columns, I'm not very happy with that really. I want the image to be a little bit bigger and I want a little bit more space in between the text and the image here. Let's start with the spacing, then let's go to advanced. What we want to play around here with is padding. We used margin before. That was the space outside of the column but padding is obviously the space inside the column. If I was to type a number into here, let's say 50 pixels. Whereas you can see these are all linked, so let's put 50 pixels there, there, there and there. I don't want that, so let's delete that, unlink them, and then let's just say on the right, maybe a little bit more, let's get a 75. Yes, I'm happy with that amount of space between the text and the image now. However, I'm not happy with the setup and the display of image size and text size. While we're in this column, let's just change the size of that, shall we? It's at 50 percent of the moment. Let's drop it down to maybe 25. Yes, that looks much better. It's a little bit too small. Yes, that looks very cool. I click on the arrow. Yeah, I'm happy with that display. I think that's a nice even space around the text and the image will jump out at visitors. Now, one more way you can do this is if you hover it here and you want to change the size of the columns between the two, this is quite cool option, get this little arrow up and then you can just drag them left and right. So yeah, if you want it bigger or smaller, you can just see what works best, use your eyes. Let's change that to 35, I was happy with that. I have my text sorted. Let's drop in an image here, shall we? I'm going to click on the image, choose image, which one do I want from my selection here? I like this one here. You are what you listen to. That's perfect, a little neon light. Yeah, I really like that, by the color of the red there with the hero section at the top, and then just the balance between that and the gold, very cool. Let's have a look at that one again. Coming in from the top from the hero section into here, I know what the name of the story is, a little bit more about it, and then an image that explains a bit more. I feel like I need to explain a little bit more than I have done in a single image though. I want multiple images there that show what we do as a company. Rather than stacking loads of images on top of each other there, let's put in a little image slider. Let's go to the widgets and let's go down to this general section down here. You'll see this one image, Carousel. You see this blue line coming up over here, that means you can drop something at the top or below but it will stay within inside that column. I'm just going to drop this one at the top and you'll see a gray box here but I want to get rid of this one anyway. I didn't want it above or below, I just want to in place of it. I was going to right-click on here and go to delete. We have an empty gray carousel box at the moment. Let's go over here and let's add some images. I really like that image. I do want to keep that one in. I do want a couple more images that sum up what it is that we do. We have this one up here that has some guitars in because that's what we sell and then another one that shows records because we sell a lot of Vinyl records. I know we've already said that in here but that's a big selling point for visitors to the website. With three, I think three is a good number, let's drop that in. Insert gallery, so there we are. It has dropped in all three images. But they're small and square so let's just have a little play around with that, shall we? Over here, image size, as you can see, that it's set to thumbnail, 150 by 150 pixels, which is why it's small and square. I want to just stick with a normal three by two ratio, so let's change it to this one, medium large, let's see what that looks like. Yes, image width, that's perfect, three by two. But I don't want three at once, I want one at once. I want it to scroll from a single image to the next image, so let's see slides to show. I was on default, let's change that to one. Perfect. There we go. That looks amazing. If we hover over here, you will see it's got these little dots below that will show users there are three images. It's also set to an automatic display. You can play around with that if you want to go faster or slower. But I think the speed here is actually pretty good. It will start sliding automatically for visitors or if they want to have another little look themselves, get in a little bit deeper, they just click on these arrows. I think that's perfect, and that just shows exactly what we do in one go. This is the first opening image, so when they scroll down to this, they'll see that one which I liked the most. There we go. That's actually looking pretty good. Let's scroll back, see what we've got, hero, information, with the scrolling, love it. I just want one more little thing to go on over here though, just an extra element I can add in. Over here, we have the header and the body copy. Let us drop in a divider, shall we? Let's go a widgets, Divider. Grab that one, again, hover over here, do you want it, above the title, below the title? I want it below, so it sits somewhere between the two. We have a few others options over here for this divider. style have it set it a solid at the moment, which I think works pretty well. You have a lot of other options here, like you've got rectangles, fir tree, lots of crazy things in there. Play around with that, you'll find what looks best for your website. I'm just going to go with the standard, solid one. I just want a solid line. Width wise, well, at the moment the width is 100 percent, so it's going as wide as the title and the text below it. But I want it a little bit smaller, let's see what we are. Seems I love 35 percent, so let's do it at 35 percent. That looks cool. I'm pretty happy with that but I want it a little bit bigger actually. Let's go to Style over here. Here we go, wait. I can play around with that. I can go absolutely huge if I want to that's too big. Yeah, I'm happy with that. It is a little bit dark though, so let's just go up to color and have a little play around with that. It's a full black at the moment. Let's get that a little bit lighter, shall we? Play around and get it more like a gray or something. Too light. Yeah, I'm happy with that. Let's have a look at this now. Perfect, there we go. I love the display of this. A little bit of introduction texts and an introduction image slider. That's awesome. Now what I want to do is add some more information below this. We've already got the users interested, we've sold them with the hero, and now we have some direct information about who we are. I want to go into a little bit more detail. Now I love this setup here of the two columns but what I want below, I want three columns. What we're going to do is head to the plus section over here and add a new section, and we're going to make it three columns naturally. This one is dropped in, and the same space that was here before, which was 100 pixels, that's absolutely fine. I don't think I need any extra margin at the top of this one. But I do want is three images and three boxes of text below it. Let's go over here and let's just drop it in image three times or we can just duplicate them, that's a faster way of doing it. Hover over what you want to duplicate, click "Duplicate" and then you can just drag it into each column. Then let's get a standard textbox, drop that in below this one here. There we go, this is working perfectly. Duplicate that, drop them in under here. Let's just take a little look at how that looks. You click the arrow, yes, that's perfect. I like that. I like the space in between all of this, so we go from this main opener into these little three sections, at the bottom, we do need a bit margin space at the bottom of this section, don't we? Let's unlink them, [inaudible] at the top, because it's already space there, so let's go 100 at the bottom of that. Let's see what that looks like. Yes, love that. Let's have a little play around with this. Let's just drop in three new images. In this section, I just want to go into a little bit more detail about some of the gear that we sell, some of the musical equipment, so let's drop in a few more images that represent that. This one is a DJ set up, I think works and some headphones, and this one, this old school band playing. Let's start with the DJ equipment, drop that one in there, then move onto headphones. Yeah, and then embrace the retro looking band. Yeah, that's very cool, isn't it? Yeah, that looks cool. I like that. I'm just going to get rid of the navigator. Yeah, that's a nice flow from Image 1 to Image 3. Now we just want to drop in a little bit more text. I've already styled that up. I've striped the HTML. Let's just drop in each line of that. There we go. Now, let's have a little look at that. That does look beautiful, doesn't it? Only thing here though is when I'm all about alignment, being a graphic designer, I want these three bits of texts to also lineup. Let's cut one back and add a few more words to the last two. Let's see. On this one, let's see what we want to take out. We don't really sell electronic drums, do we? That's made up. Let's get rid of that. There we are. It's dropped down to three lines now. Then this one, "If you're serious about your music and getting the best value money, we will not be beaten. Come check us out." Yeah. This one, "Retro songs can make you relive a moment, a day and evening, a summer or even a lifetime. So check out our full record selection." Perfect. Now they are all lining up. I love it. I'm just going to save this one. Now you have all of that setup. Let's take a look at how the website is looking so far. Let's click on the arrow. Now you will see that you have an opening hero image that is fixed and the icon moves up and down in front of it, love that. Then we get the next section with the white background that has the title, introduction text and the slider, and then three more informational boxes below it. That is looking great. 9. Animated About Section: So far, your site is already looking awesome, but I think it's time to add some more content. We already have a little introduction section. Let's go into a bit more detail now with what I'm going to call the About sections. First of all, let's create the first About section. Let's hold that over here. Let's add in another section, I think two columns. Yes, two columns is what we're going to need here. Size-wise, let's see. Let's just try this one again at 100 percent height. We'll go value height, VH, put that to 100. That's going to fill up an entire page. It might be a bit bigger than what we need, but let's have a little play around with it, shall we? The next thing we need to do is to make this full width. At the moment, this is a boxed section. As you can see here, we have the two columns in the middle there, but the space to the side, to the left and the right. But what I want to do here is to fill the entire section with two full-width columns. Here's what we're going to do. Up here on the left, it says Edit section, and it says that the Content Width is boxed. We're going to say Full Width. There we are. As I've changed that, you can see over those now fill the entire page. What I want to do here is create one box on the left that's going to have a colored background with text, and then one box on the right it's going to be a full bleed image. What I want to do next is dropping an image on this right-hand side. Rather than dropping in an image widget because I wanted to fill the entire section, I'm just going to drop it into the background of this column. Let's go to Edit Column, then in Background, choose "Image". That's the section is going to be about playing guitars and the guitars that we sell at the store, you're going to use this image. It's very cool image. Drop that in. But as you can see, it doesn't fill up the entire section at all. Far from it. That's just because of the settings within the section about what it would do with columns when they are in. If we go back to Edit section, as you can see, column position here is automatically set to middle, which means that when a column gets dropped in, it does go into the center of that section, which is perfect for some section. But here, we need to fill the entire space. Let's change that to Stretch. There we go. You can see that is filling the entire space, but obviously, the image is just repeating there. Let's go back to the Column, play around with that again. What we did earlier on, basically, center, center, then size cover. Yes, there we go. That looks cool. I like that it fills the entire section now, but to be honest, that is too big for a section. I think it's just cropping the image too much. Let's go back to the section, set 100. Let's go. Maybe 70 percent. Yes, that's much better. It's a much better display of the image and that just allows a bit of space to the side of the girl where the text going to be on the left-hand side. Let's go to that column. What I want here is a colored section. I'm going to drop in text out over a colored background because, so I think that's a nice flow from the opening here from the hero into the information section into this section here. I think that'd be a great balance of color and it will just separate all the sections. Let's go to this column and background, and let's drop in a color. I'm going to use a primary color here. We have all that sets up in our global colors now, which is cool. That looks cool. You can see, on the left-hand side, we have the red box and the image on the right, you will see a border around each section there which may be what you want, but that's not what I want here, but it is set up the correct way. What I want is these two sections touching. If I hide the panel, as you can see, that's actually how it will look to users. This is just a back-end showing me where the different sections are. I like that being in the primary red on the left, but it's too intense. I think that's just too strong a red. I don't think it represents the rest of what we're doing style-wise on the rest of the site. Let's change that. Over here, let's click on "Color". I want to keep it the same primary color, but I just want to change the opacity. Let's drop that down in there. Yes, there we go. Let's drop it down quite a bit further actually. That's much cooler. I click on this one and scroll down from the top. Yes, that's a much nicer flow from this opening image with the darker red overlay into the gold and then into this lighter version of the primary red. Awesome. Now that you have that setup, let's decide what you want to put on the left-hand side, I don't even get a text here. What I want to do, it's slightly different to what we've done in the opening parts of the website. What I want over here is two columns with inside sight column. What I want is the title, guitars, and then below that, some texts talking about all the guitars that we sell at the store. In this About section, well, I want to cover a few of the things that we do at the store. Maybe three or four of them, so I'm going to number these. It's more of a designed decision, a display thing really. But I want a big zero, one next to this one. The next one, I will have 0, 2, 0, 3, that sort of thing. I'll show you how this is done, how I'm going to put two columns within a single column. I go over here to the widgets. We're going to have an inner section. That's exactly what it says, it is a section within a section. I'm going to drop that in the center here. This is now dropped two columns inside a single column. Columns within columns. Might sound a little bit complex, but the other thing we need to look at here is that it's dropped from the very, very top of the box, and we don't want that. We want them to be in the center of that. This comes down to our section setting. Let's go back to Edit section. We've already selected that the column position is stretched so that this image fills the entire box. But below that, Vertical Align, let's just make sure that is set to Middle. There we go. What I want to do here is add two parts of text to each of these columns. On the left-hand side here, I'm going to have number 0, 1. Then over here, on the right, I'm going to have the title of this section, guitars. Then a section of text below just talking about all of the guitars that we sell at the store. Let's have a little play around with that. Let's start off with the text on the right first, that's going to be the easier one. Let's go heading and drop that one into the second column. That's ultimately dropped in as an H2, which is perfect. That's exactly what we need here, and it's picked up our global settings for H2. It happen every time we drop in an H2. I simply want this one to say guitars. You don't need to type it in capital. It would just ultimately go in because that is the setting. Let's go to widgets and dropping text below that. There we go. Let's drop in a little bit of Lorem ipsum for now, we'll update that shortly with our own text. Over here, I want 01. What's the best way to add that in? Well, it starts off with another heading because I think that's the font that we're going to want to use here. These are all the elements that I want to gather in this section. But wow, they're not looking how I want them look. First up, this text. Well, it's miles away from the word guitars. I want it to be lining up to it. Let's align that to the right. Size-wise, that's the main issue here. I need that to be big. Let's go to Typography and then play around with that. I don't want it to be huge, we'd like 200 pixels. Let's put it to 200 pixels. I'm happy with that being black, but let's just play around with some of the colors. What if it was solid white? Yes, I think that I like. Slight issue him in all the design thing. I just think that the zero and the one with a little bit more space. Let's just play around with letter spacing. Drag that out a little bit. Quite big actually. Let's go to 10. That's cool. I'm really happy with that. I'm just going to paste in my text I've written for guitars. Let's click on the text box and then come up here, and I'll paste all my text in. Obviously, I have cleared all HTML from this. That looks cool. A couple of things here. I'm just noticing first step, obviously, the space in between the text and the image. The other thing is now that I'm seeing more of the page, I'm seeing all the body copy on it, I think it's a little bit too heavy, to be honest. I want to go back into my global settings and change that quickly. Let's just click on the "Hamburger", "Site Settings". It's just this body copy. I go into Typography. When I see body up here, so I'm going to of the default weight at the moment. I want that to be a little bit lighter. Let's see, 100. No, that's too light, 300, yes. I much prefer that. What I'm going to do here now is update that. That's just looks a little bit cleaner, and a little bit neater, and a little bit lighter. That better suits the type of images and type of colors that we've used across the whole website. Let's get Back To Editor, as it says here. Let's take a look at the space around this inner column. As you can see when we stretch the page out, it's fine on the left there because we've right-aligned the text, but it's that text on the right that's just far too close to the image there. Let's edit in a section, and then up, here you can see the Content Width. We set to Boxed at the moment, so it's not Full Width because that's the option as well. But obviously, it's taken up a default setting which is the width of the column basically. Let's leave it on Boxed, and then there's just play around with this little space over here. What if I set that to 500, actually? I think that's a nice space there and a nice space there. Let's just see what that looks like if I drag it out. This section is looking very, very cool. I like that. As we scroll down from the opener, we have some introduction text here using our font, using our colors. Then we scroll down, and then we hear about guitars. But I want one more fancy little thing to happen in this one. This intersection here, I want it to slide in from the side. That's quite a easy thing to do within inside element. Now that we're on the intersection, let's go to Advanced. What we're going to get to here is motion effects. Here's a drop-down menu. As you can see in here, there are loads of different options. You can do weird things, wobble or let it swing. It's quite cool actually. But yeah, I know, a bit too cheesy. I literally just wanted to come in from the side, so it's going to fade in from the left. Let's see what that looks like. Well, there we are. That's just perfect. Let me just try that one again so you can switch between them. Down, I don't really like that. Right, no no, no. I've got coming from the left, doesn't it? I do like that. It's a little bit fast though. They do have this section here, animation duration, normal, it's on at the moment. Fast, let's see what that's like. Ridiculous. Slow. Oh, yeah. That's perfect. I like the way it blends in like that. If I click on the arrow, we'll see this whole page now. If we scroll down from the top, scroll down to the bottom. It doesn't actually show us the fade in here. This is where we need to use the previous section. Let's close this one. Click "Preview Changes" here. I'll open up another page which will do everything that we've set up. Let's scroll down. We have to fix the image at the back still, the slider obviously, and then when we scroll down to this part, there you are. Oh, that's a nice little touch. That really leads us into that section there. Let's get back to our main page. Then only one tiny little thing. It's just the space in between all the text here and everything that's going on. I just want a little bit more space above the word guitar. The g lines up with the top of the one there. Let's see what we got here. Another design alignment issue. If I click on the heading and then go to Advanced. Let's just do a little bit of padding on the top of that. We don't want them linked together, so maybe 10 pixels. There we go. That's perfect. Yes, that's much better lining up now. I love it. 10. Creative Animated Text: If you have been working through each class as we go along, then you already have a very cool-looking website. You have this hero section, you have your information section with the slider and then you have your about section below that. Hey, that may be enough for what you're trying to do with this website. But now, if you watch this class, I'm going to show you how to do something else, super creative, something you may not have seen on a website before, and something that will really impress all visiting your website. Let's go back to this section, and then let's put in a new section. Again, I'm going to do this one as two columns. I want it to have the same 50/ 50 split that we've got above here. What we're going to do in this section is section 2, section 3, probably section 4. But I'm going to do it in a slightly different style to what we've got here. First up, let's play around with our section. We need some margin on top of this one. Let's go advanced. Turn off the links together, and let's just go margin 100 again. It matches the margin that we've done earlier in the page. Then I want to play around with the size of this box. Let's go to layout and let's go to height, minimum height, let's go to VH. Let's maybe do this one at 50. Let me see what that looks like. I think that's going to be a good size actually. Then we need the same settings that we had up on the section before. What we need is column position to be stretched. Then we need vertical alignment to be middle. As you can see that's already changed the column so they all sat in the right space right now. To get a bit of balance in the one above where we had the image on the right, let's do the image on the left. Do that the same way in the column. Let's do it as a background and then drop in an image there. Now, this section is going to be more about the records that we sell at the store because that's our main selling point, the one that gets all the customers in, here is a very cool shot of someone inside the store looking at all the records. That has been dropped in. The position of that isn't quite right, let's go position Center. Yeah, that's much better. Then the box on the right, let's drop another color in here. I'll go to style, go background type, classic, and color, let's go with the secondary color here. Yes, that looks very cool, but you know, what, I think it's too bright. Again, I think it works fine as text on a white background, but not as a full square background. Let's change the opacity there as well. Yeah, I think that's good. I think that's going to stand out enough from the white background, but also look good with black text on top. Let's click on our arrow and see what that looks like. Yes. That sits nicely underneath that one. You can see the lines still goes down the middle there. What I want to do next is a copy and paste of all the text above and everything we've done here and drop it into this box. Let's go guitars, right-click "Copy", and then come over here and then select "Paste". What that has done has dropped a textbox into the center of that box. I'm going for a slightly different style here so let's centralize that text. Yes, that's perfect, and then let's get a copy of the text box below that. You can do it this way or you can just go back to your widgets over here and drop it all in. It's just a different way of doing it, and it ensures consistency. Copy, and then underneath that, go to paste, paste it in. Again, I want this text to be centralized. Let's just have a little look. I go to style, alignment: center. There we go. Yes, that looks cool. But as you can see, again, the text has just come out too far to the edges here. A couple of ways to do that: we can get a column; we can add in Padding, and we can just ensure that that is consistent around the whole box side of 35 top, let's link them together. There we go. A little bit more space, so 50. That's it, there we go. Now what I want to do in here is paste in the text I've used. Let's go to content. I like that one and paste in the text I need for records. There we go. Still, my header still says guitars, let's change that to records. Love it. I also want this number to be here but I'll change it to zero too. Let's just do a little copy of that, and get in the same style. Then let's paste that in below the text. Now that's quite cool, let's centralize it. I don't think that works there, what if I move it to the top? Try to, but I'll drop it in there and then move records below that. There we go. That's actually quite nice actually, I do like that. But I'm going to play around with another style here. Over here on the left-hand side, we just used an image as the background so we can still drop a widget into that. Why don't we try dropping the 01 into there? Okay, that looks cool. Two things here though. First of all, let's make it 02. Maybe three things. Second thing, let's go to style, and then let's make it a lot bigger. Maybe like 400 pixels. Yeah. Okay. But that's sat on top of the girl's face so let's bring the opacity right down. There we go. I like that. It's number 2, but it's just a sort hint that we've gone from 01 to 02. It's done in a very cool creative way. If you want to do that, just have a little play-around with that. You might decide to make the text a little bit smaller than that. Maybe 400 was a bit crazy. Let's go 350 or maybe even bigger, 450. I like it that size actually. That's cool. What I want to do now is just do number 3 and number 4 below the same way. Also want to do one more fairly crazy thing. So this word records over here. First up, it's a bit small, so make it a little bit bigger. Still our H2 settings, so Google will still read it as an H2, and we set that to 35 pixels before. Let's go 45. Well, maybe it just go to 50. Now what I want to do is to get that text to fade in, similar to what we had at the top with this entire box, just for this text. In the Heading, if I go to Advanced and go to Motion Effects, I want it to fade in from the top, so I will fade in down. It's quite nice, a bit slow. I like that. What if it was fading up? I like that display as well. I want to do both. How am I going to do that? Well, how many letters are in this word? Seven. So let's split them all up into individual letters and play around with it. Let's go here to records and let's just delete all letters apart from the R, and then let's duplicate that letter. Let's drop it below. Unless you have the settings on this one, just going to turn those off for now. What's going on? Just so we can play around with this number. Then that would be an E obviously so they're records. But what I want is those two to sit next to each other. They have too much empty space either side of them, so let's go on the first one, R. Then in "Advanced" again, what we want to do is go to "Positioning". Here we have width, which is set to default which is just the entire box, basically. What I'm going to do here is change it to "Inline". Now, let's do the same with the E. "Positioning", "Width", "Inline". There we go. Now it's all lining up. Only issue here is that it's all gone to the left as well, so what we want to do is in the column, go "Edit Column", get to "Layout". Our vertical alignment, well, that would be "Middle". It's already automatically set to that. The horizontal alignment "Center". There we go. That's now move to the middle. What I want to do here is have a little bit of fun. First of all, I think I need a little bit of space, for this fade in and fade out to work. So let's just go on the regular text below and let's add a little bit of padding to the top of that, maybe 25 pixels. Looks a bit more space. We'll see if that works. Then for this one, for the R, what I want to do, is go to "Motion Effects", and for my "Entrance Animation", let's say that that "Fades in Down". Still want to set to "Slow", so that looks cool. Let's see with the E. Let's go "Fading Up". Yes, now that I really like. One fades down, and one fades up, and I want to do that with each letter. Take a few seconds to set up, but let's just duplicate the R, so that's dropping down. I'm going to move that, so it's after the E. Change that to a C. Then I'll copy the E after the C, and then drag that one down to below the C, and that one will be an O. Put that in as an O. Now I'll just keep doing this with every letter and always using the one before it, so we're getting the opposite animation effects. Let's have a look. There we have the full word in. Again, if we switch to this one, we're not going to see the full animation, so let's go for another preview. See what that looks like. Here we are on the preview page, let's scroll down, and we'll see the animations. Slider obviously, 01 Guitars. Now let's see what records looks like. Oh, that's very cool. Let's just reload that one and see it happen again. There we go, all that is cool. I really like that and I reckon that's going to catch the attention of anybody visiting my site. Let's get back to the page builder. Now what I want to do is duplicate this two times below. I'm going to do a 03 and a 04. 03 is going to be Live Music, and then 04 will be Old Skoool. I want to talk about all the old school stuff we've got in the store like cassette tapes and all of that. Because we've already created this one, but let's just duplicate the entire section. There we go, that is dropped in below. Terms of the spacing on this one, well, we had a margin of 100 pixels above this one. Let's give it a little bit of breathing space there, but I want these to actually touch. I want it to be a joined up grid. If I go to here, "Edit Section" there we go, now they're all sitting next to each other. Let's duplicate this one again so that we have three of them. That looks very cool. I like the way it flows from 01, to 02, 03. Again, another design thing, I'm going to swap these two around, so it goes 2, 3, 4 that way. If I literally just pick up the column and drag it to the left, it'll allow me to drop it that size, and all it's done is just switch the two things around. There we go. That's a much cooler display. Let's look at this one. Come down from here, get that grid section, Guitars, Records, Live Music, Old Skoool. That's going to look very cool. Let's set all those other sections up. We'll start off with this one, 03, the image in the background. Let's make that a live music one. That's very cool. Yeah, that looks absolutely brilliant. I love that with the 03 on top of it. Then let's go over here and then just paste our regular text into this one, and then I need to change this one to Live Shows. Hover over each letter and write this in. Now we're going to have a couple of issues here. First one being it's a lot longer than the word "Records". So I'm going to need to add in an extra two letters at the end there. The other issue is, to be honest, Liveshow could be a single word, but I want as two words, Live Shows. I'm going to need a little bit of spacing, a little bit of padding to the side of the E and the S, so let's go to the E, go to "Advanced", "Padding" on the right of that. Let's just say five pixels and then go to the S "Padding" on that, on the left also five pixels. Let's see what that looks like. check it out. Yeah, that's much better. I just need two more letters in here. Let's drop that on there. That's perfect. I love that. Now that display coming from 01 to 02 to 03. Let's just finish up 04. Let's make this one Old Skoool. I'm dropping this cassette tapes image there from the '80s, then paste in my text here. There we go, and then change this one to Old Skoool. I'm spelling school this way. I just need one more letter on the end of that. The L just moving that way. The right side pixels and before the S, five pixels. I love that. Let's preview the changes here. We start off at the top again, fixed image. Scroll down to that. Now you'll see your introduction section with your slider, three boxes below. Then we'll scroll down to your first "About" section fading in from the left, love it. Then, yes, we'll look at this second "About" section. Look at that. Look at how they drop in like that. That looks amazing. Apart from the fact I spelled Skoool with three Os, I don't know, I'm going to stick with that. That's quite cool. Old Skoool. But yes, you now have that setup in your own website. The way you can teach anybody a lot more about what you do. It starts off with one style and then go into a second more creative style. That's really going to catch their eye. They're going to love your website. 11. Customer Testimonials: Your whole website is already looking awesome. Let's just add a few more elements. I'll show you three more things here. Number 1, testimonials, very simple, number 2, a footer, and number 3, a header. Let's start off with the testimonials. This is very easy to do in Elementor. Let's just click on the Plus and what add in three columns, I think, that'll be enough testimonials Leave a little bit of space at the top of this one. Let's just go, Margin, and let's just do 100 at the top and 100 of the bottom because then that gives a little bit more space before we throw in the photo. Let's go to the widgets, and find Find one called Testimonials. Here it is. Let's drop that in. There we go. That's dropped it all in, and what it's done is it's taken a main sort text that we dropped in here, so she's in the same fonts. I'm just keeping the black and the same that she looks pretty cool. But as you can see at the moment, it's just got a gray image and John Doe, Designer. I want to put in these quotes to come from important people within the music industry, so I'll pick three people who have been into my store. So that's going to choose Image. First up, this guy, Jimi Hendrix, possibly heard of him. Now, I'll just drop him in there and a little image. This is all automatically set up, and then just put first name, Jimi. Title, say, Guitar Player, and then we just need to paste in his quote up here, his testimonial saying why Wolfgang music is amazing. There we go with, "The experience is always great, the sales team is very helpful and always answering any requests." Yes, we are Jimi, we're very good at that. So that was cool, to be honest, I already like that. I think that flows nicely from this about section into the testimonials at the bottom, so let's just make two more of them. Fastest way to that, you can drop in another one if you want, or we can just duplicate, twice, then let's go through start with the second one. Well, this is a guitar player who Slash. Title, well, let's just put Guns n Roses; that's where it comes from and then let's paste in his testimonial," Very reactive shop with a large choice of equipment at really interesting prices." Then for our third one, another musician that I know, and I love. His name is Wolfgang Amadeus Mozart. Let's drop him in. Let's just call him Wolfgang, and we'll put Classical Musician, and then let's paste in his testimonial, "Excellent store, fast delivery, very good service, and attention for the customers; Will buy again, no doubt." Thanks, Wolfgang. They all look cool. I just think that Jimi one's is probably a little bit too long. I think in terms of text alignment, let's just take off that last comment that he's made there, "Keep up the good work." We will, Jimi, I promise. There we go. Now, they will line up in terms of the text and the images at the bottom. Let's have a look at your whole website now. You start off again with the hero, then the information section. Then you animated about section. The first one, the second one, looks very cool, Live shows, Old school. Then your Testimonials at the end. Yeah, that looks great. Now, we're just going to add two more sections, the footer to the end of the page and the header, at the very, very top of the page. 12. Website Footer: We're going to create the footer now for our website. The way a footer and a header normally work is you create them in the back-end and then they appear at the top and the bottom of every single page. That can be done in Elementor, but it doesn't need the pro version to do that. As we're just creating a single-page website here, that's just fine to just create a unique version of it at the bottom of this page and a unique header at the very top of the page. Let's do this the original old-fashioned way, the same way we've created all sections throughout the site. Let's click on the "Plus". Then in terms of columns, I think two should be enough here. For the background, let's make that slightly different to the rest of it. Let's go to our global colors, and let's make it the text color. It's going to be nice to end on a black and that wraps the whole thing up. Then we have two columns, and in one of them I'm going to do some information about the store, give its address, its opening times, and some contact details. I also want to map so people can see where the store is. Let's go over here. Google Maps, that's in the basic section, you don't need that in the pro, and we drop that in. It has randomly picked the London Eye in London, but our music store is here in Sydney. It exists on the main streets in the city of Sydney, which is called George Street and it's at building 100. Let's pop that in as our address, 100 George Street, Sydney. There we go, it drops that in. Now if you want to go in a little bit closer to that, play around with this Zoom. There we go. Now we can see where that is in relation to other things in the city. We just need a little bit of extra space either side of this, let's get a little bit of padding. That's going to advanced, and I don't want them linked together. I just want a bit at the top and a bit at the bottom. Let's see if 100 is too much there. Now I think that's fine. Yeah, we need a little bit of space either side of them. Let's go back in here and then let's draw a heading in on this side we'll start with that, and I'll just want to call this Check Us Out. Obviously, that's going to need to be white. Perfect. Then let's get a little bit more text below that, and I'll paste in here some of our contact details, the email address, phone number, address, opening times, etc. But that needs to be white too because there's white text on a dark background. Let's just make it a little bit heavier. Let's get away up to 600. Perfect. I'm just going to play around with the setup of this, make that a bit neater. Monday to Saturday, 9-6. I want a little bit less space in between the lines there, so I go to Line Height, play around with that. Yeah, that must be nicer. Now what I want is just the two things to line up perfectly. Let's just make sure that the content is aligned to the middle. There we go. Let's have a look at that. I love it. Just a little bit extra space, I think a little bit more padding. Let's just say on the left-hand side, 50 maybe. Yeah, that's perfect. Now with an email address, let's see if we can edit that one in here. You can see this is set up as a link, you need another link within your website to somewhere else in the world, hover over the text, and then click on the link part here and then you type in the URL. If it's an e-mail address, do a similar way, but instead of just typing in the e-mail address, make sure you have mail then your e-mail address at the end. That means it will come through. Let's take a look at this one now then preview the changes. Fixed hero information about a section A, about a section B, testimonials and a photo. That looks awesome. I hope your site is equally as awesome right now. 13. Website Header: Now that you have your entire website set up, we can have a look at the header. But you can't start with the header but I think it's better to just design your whole website so you get an idea of fonts and layout and colors before you start with the header, because then you can add it to everything and make sure it follows the rules. Let's scroll up to the very, very top of the page here. If you hover over, the section here is going to add another section, and it will add it in above. Let's choose a double column here. In terms of the height for this one, well, you might need to have a little bit of a play around with that one. But let's just do a minimum height again. Let's look at this one in pixels, maybe 100. I think that's enough space to add in a logo, maybe some social media icons, maybe some links to other elements on your page. I would really like the header to sit on top of the hero image. How do we make that happen? Well, we've given it an actual height of a 100 pixels. What we need to do is go down to the hero and add a margin to this one. Now, normally the way we would do this, we'd unlink them and we'd put a 100 pixels there, that's going to drop it down further. What we need to do is make it minus 100 pixels. There you go. Now you can see this is sitting on top of the hero. In terms of what you want in your header, well, that's completely up to you. Have a look around other websites that you like and see the way that they're doing it. I like a very traditional style header really. I like the logo on the left and then links to other pages in the web site or pages on this single page on the right-hand side. I'm going to start with that. First of all, I'm going to drop in an image over here, which will be the logo. I come in here and we've already used the vertical logo, but I have a more horizontal version of my logo here which I have in white. I'm going to drop that in. Now you can't see that right now because of the size of it. What I'm going to do is just drag this column over that side so it's much smaller. Now, again, we can't see that. Why is that? Because the header is currently sitting behind the hero. Because the hero was created first, it's considered the more important element. What we need to do is bring the header forward. I want to go to the heading section. I'm going to open up my Navigator again to make sure I can access that one. It's hard to access different sections when they've sat on top of each other. That's this one here because it's the first one. Now, what we need to do when we're in this section is to go to Advanced. In the first page that pops up, you'll see this thing here that says Z-index. Let's put a 1 in there. There you are, it appears. We haven't used the number on any of the section of the page, so therefore this is number 1. It's the most important and it sits on top of everything else. I still think the logo is a little bit too big here, so let's make that smaller. There we go. That's much better. Because it's smaller, it's now filling that space a lot better. We chose a 100 pixels here, so that's why we don't have any white background now. That happens. You do still have white background behind it, we just have to change the size of it. Go to your section, change the minimum height here, and then change the margin minus amount on the hero below. But I really loved that, in fact, even a little bit smaller. There we go. Now what I want to do is have a nav bar over here on this side. Normally the way a nav bar works is it's going to take you through to other pages on the website. As we have a single-page website, what we do is we use anchor links. We have set up multiple different sections in this page. We have guitars, we have records, we have live shows, and we have old school, so why don't we drop in a nav bar for all of those so when a user visits and they know they definitely want to read about guitars, they can click on that and it'll take them down to that part of the page. Let's set that one up. Well, what it's going to do is drop in a button. Let's go over here and drag in a button. That's come up in the standard button style. What we've got is we've got some white text, but we've got it behind a little gray box. What we want to do is get rid of that box. What I'm going to do is go to Style. First of all, I'm going to call this one guitars because that's the section that we want to go to. Then I'm going to go up here to Style. You can see there are two options here, normal and hover. That means it can change to a different color as a user hovers over it. The main thing we want to do here is get rid of the background. On this one, let's go to Background Color. I'm going to pull it down to zero percent opacity. Now it just says guitars, and I'm going to make that text a little bit heavier. Let's make that 600. That's much better, much more viewable. Text color, that's actually set to nothing but default setting is white there, but let's just make sure that it's set to white. Then Hover. Once we have for that, let's try the secondary color showing. Yes, if I hover over that, it changes to that color so then the user knows that that is a link. This fits in a full-width box again. Let's go to Advanced, and then let's go to Positioning and make it Inline again. There we go. Now I just need this all to align to the right. That's going to be on this column. Then we go Horizontal Align, End. There we go, switches over to that side now. I want one of these for each of the sections that's in our website so let's just duplicate it three times. The first one, keep that as guitars. Second one, let's change that to records. Do it in the order that it is on the page. Then the third one, let's make that live shows. The fourth one, old school. Let's see how that looks. Yeah, that looks perfect. I like that. When you hover over these, we can see that that's a link. Now what I need to do though is, when I click on it, which I'm doing right now, it's not taking me anywhere. We need to set up anchor links for this. That's how this is done. Go to your widgets, type in Anchor, and there you are, Menu Anchor. So what we're doing is, we're dropping this into the page that we want each of these tabs to take us to. Let's start off with guitars. Let's scroll down to the Guitars section. That's right here. I'm going to drop in this menu anchor above that. Just above there is fine. Now I've dropped in a sort of empty gray box and it also knocked the text down a little bit. Don't worry, none of that's there. If I click on this one, you'll see that disappears. Now what I'm doing up here is adding ID, that's a title for this. So the link knows where to go and I'm going to call that Guitars. Then what I need to do is go back up to the header and tell this button here to link to that. Now over here, we have it set up already. Do you see that hashtag? Just type in the name that you've just given the anchor below. So I'm going to call this #guitars. Now, let's just preview the page for this to work properly and then when I click on Guitars, just see what happens. It takes me down to that section. I can set that up so that Records goes to this section down here, Live Shows goes to this, etc. Any problem with that though? Let's just try that again. I click on Guitars. It's gone to where I told it to go, so just above the text there but then we're like cutting off the face of this image here, so I'm actually going to make it higher up. It goes to a higher part of the page, but we still see that it goes to the Guitars section. Let's get back to the page builder and let's scroll down to where our anchor is. Can you see it's right there? What I wanted to do is, take users to the top of this section. What I want to do is, drag it and drop it on top of this one. Unfortunately, there's no empty space for it to go into there. It's just going to go into these columns. So what I'm actually going to have to do is create a new section. I'll click on the plus, add it above, and then I'll just add that as a single column. Then I'm going to drag it into there. Now again, that looks like it's taken up extra space, but it's not. It's another invisible box that's there. Then when we go to Preview, you'll see where that goes. There we are, much better. I can now see that entire section and I can see the picture of the girl. That's perfect. Let's go back and set that up for Records, Live Shows, and Old Skoool. For Records, again, we need a little empty section here. Just add the section, put a single column in, let's go to Anchor again, drop that in. It sat above this section because we do actually have a margin on the top of this, but that's fine since it's going to take users to this section and they'll be able to see everything in one go. Let's call this one Records and make our button, link to records, #records. Now again, we're going to have to drop in some empty sections here, so let's add that section. Single column, Anchor, liveshows. I'll just do it as one word in this one. One above here, single column, oldskoool, single word. Set these ones up, livesshows, and the final one, oldskoool. Let's preview that. I'm going to scroll down to the bottom. You will see that there is a small space in-between these two things, so we need to go back and fix that up. It's because as you can see, there is a little bit of padding around the outside of this box, so let's edit that and make sure all of these are just set to 0. There you are, you'll see that little border disappears. That means there is no extra space on either side of this anchor, and preview that. There you go. Now, perfect. Let's just make sure each button works. Guitars, yep. Records, yep, Live Shows, yep, Old Skoool, perfect. Now, one last thing we can do, if we go back to the page builder, we can chuck in a couple of social media buttons. You may need this. You may want to take people through to your Facebook page or Instagram page, so let's add that in. Right click social media, Social Icons. I'm going to drag it and put it after Old Skoool. Now it's done it on the next line obviously. Let's go to Advanced, make the positioning of that in-line and then it drops in after Old Skoool. So what we have in here now is, Facebook, Twitter, and YouTube. What I want is Facebook and Instagram. So I've deleted Twitter and YouTube, and then I go Add Item. It's come up as WordPress, click on the icon, and this will give you a big option of icons that you can use here. If I type in Instagram, there it is. Then you just need to put your links to your Facebook page and your Instagram in here. I don't have one of those yet from the store, but when I do set them up, I'll paste them in. In terms of the style of them though, well, they're big and a bit chunky and I don't really like the color, so let's change that up a bit. Shape, they are rounded. I'd like them to be circle, I think. Yeah, that's much better. In terms of the size though, way too big, so let's go to Shape, Size. Yeah, okay, 18. Color is Official Color. No, it's not the official color for Instagram. Definitely not. But I don't want it to be any of the official colors of Facebook or Instagram. Anyway, I'm just going to change it to Custom and here I can choose a Primary Color and a Secondary Color. Primary color, as you can see, let's set that white as the background of it. That is cool because the rest of the things in this header are white as well, and then secondary color, we'll want that to be black. I'll tell you what, let's go with our usual black. Perfect, there we go. Let's see how that looks. Love it. You can click on these and that will take users through to your social media. Let's just do one more funny little thing with this, shall we? First of all, I need a little bit extra space in between. I think, they are a little bit too close, let's change that to 10 pixels. Then I will click on Icon Hover and this is basically an animation that can happen when I hover over it. I want something to happen. The other ones change color, so I can make it do that or let's do something even fancier, shall we? Let's have a look. So Hover Animation, we have a few options here, I mean, these are all a bit crazy, Bounce In. Hover over that, actually that's quite nice. It just kind of grows a little bit or I can make it float, hover over that. There is quite a few different ones here, just have a little play around with the Wobble Top. Oh no, I definitely don't want that. I want a pretty simple one really. Maybe just let's say Grow, I think or maybe Shrink. Yeah, I like that. That's just a bit more subtle. Now let's have a look at the preview and see how it all looks together. Here we go, you now have a fully working website. You have a header at the top and each of these links up here in the nav bar will take you down to other parts of the page, to the right of that, a couple of social media icons. Then we come down to the Hero. This is all the same with the header sitting on top of that and if we scroll here, well, the header moves up. But that's because the background is fixed and everything on top of it moves. Let me scroll down to your information section about Wolfgang Music with the slider. Then more information about some of the services that we offer at the store there. Then we scroll down to our first About section, that fades in from the left. That looks very cool, tells us a little bit about guitars, and then our more fancy animation below that, Records 02, Live Shows 03, Old Skoool 04, and three of our best testimonials from Jimi, Slash, and Wolfgang. Then the footer, which will tell people where we are. If they want to get in touch with us, they know how to do it. So there you go, you now have a full website that's all complete. You have everything you need there on a single page and it looks awesome. 14. Responsive: Tablet: Your website is now complete and is working perfectly on desktop. But what about other devices? Yes, this will look cooler in everyone's laptop, but what it's going to look like on their tablet, or their mobile phone? That's very simple. What we do is we hover over here, and you can see this is Responsive Mode. I click on that. It's giving me the three options. We started off with desktop. That's the best place to start, get it all looking right on there. Then we can move on to tablet and mobile. You should do it in that order, because tablet inherits all of the styles that come from desktop. Then if there are any changes, mobile will inherit those changes from tablets, so do it in that order. Even if you think tablet isn't as important as mobile, start with tablet. Let's click on that. What we have here is a display of how the whole website looks. As you can see, there's a few issues. At the top here with the header, it's stretching it a bit too further, and the icon, where did that go? That disappeared. As we scroll down, that looks nice but need some space either side. This section, to be honest, that looks all right, but maybe a little bit too much space at the top and the bottom. The About section, actually, that's almost there. We can see this little white border. Well, that would have disappeared. Maybe it'd be better if there was just a bit more space around the text, and maybe the image could move to the right a little bit. These sections, again, ignore the anchors below there. You know what? They're almost there. It's cool that they're going out to full width now because we have a little bit of a smaller space. We need to just play around with the tech space on there because that's going to look too big going too far out to the edges. Testimonials, they're looking all good, not quite lining up again, but it might be difficult to get them all lining up on desktop, and tablet, and mobile, but we can come back to that. Then the photo, that's always there, to be honest. Probably just need a little bit of space to the side of the map. Let's go in and edit all of that. Let's start at the top. Well, first of all, let's just start off with our header. All we want here is a little bit more padding. What you can see here, it's next to margin and next to padding, there are three options. We have the Desktop option, we have the Tablet option, and we have the Mobile option. Because we're viewing this in tablet right now, it's automatically gone to the tablet version. by I switch to desktop, it's switching me back to that. Because we have this icon next to the word, that means that whatever you change here will not change on the other ones. If you do not see the icon next to it, that means that a single change on any device will actually change across the entire website on all devices. Just be aware of that. Let's just see what we've got here for Margin and Padding. At the moment, nothing. Let's go Tablet. Let's just start off with, well, let's unlink. I just want a little bit of padding on the right and on the left, maybe 25. This is set to pixels again. That's pretty nice. But you know what? I think the logo is actually a little bit too small there. Let's just play around with the size of these column, shall we? I've got a little bit of extra space next guitars there, so let's just drag out Wolfgang music. The logo, made that a little bit bigger. What I'm going to do is just push it up like one to two. I've made that bigger, but it pushed everything to one of the side. I want it about that size. What else can I do here to make that fit? Well, let's set to 22. Why has that dropped down? Because that's still set to whatever it was before, which is why it's come up blank so that was 22, this one is 78. There we go. Now it's all fitting next to each other. That looks cool. Let's go back in here. The main issue here is that the logo was disappeared. The reason that has happened is because we put quite a big margin on the image being dropped in when it was on desktop. That was inside the column. Let's bring up on Navigator and select that column. Here's the Section, Column, Image, so let's click "Column". As you can see, this is set to nothing at the moment. I was actually to put zero in here, there you are. It comes back. It's because it picked up the 450 pixels from desktop and that was way way too much for tablet, so that's why it's disappeared. We still wanted that, but let's just play around. This might be 250. Actually, that might be small and maybe a little bit more, 275. I think that looks cool. I like that. It's still full page as well, that one. This section here, this is always working. I'm just going to play a little bit around with the spacing of the columns. What I do on here in terms of the column size, this is just the tablet. I think maybe let's see if that's a 40 percent, and that ones at 60 percent. That's much better. Then all I need is a little bit of space either side of the section. Let's go in there, and then let's add some padding to this, so maybe 25. Yeah, I think that's good. We've set up this extra bit of space in the column, so it's a bit further away from the image. But now, it's probably a bit too much. We can change that in here, only change on tablet. Let's set the padding to zero there. Let's put it all back. Then let's just say on the right side, I need a little bit, but let's keep it small so it fits better. Let's have a look at that. I think that all fit in. In fact, what I may even do is take out this little line there. I think it's going to look better on tablet if it's just got the title and the text. That's just going to line up better with the slide next to it. How do I take that out? Here's a little trick for you. Choose the "Divider", then go to Advanced, and then go to Responsive. What we're doing is we're choosing where we want it to display, and where we want it hidden. We want it hidden on tablet, so I click on that, and then move out. There we go. That's much cleaner. Then the section below, if we all set up here, maybe a little bit extra padding on this one. It has a little bit there so let's add in 15 on either side. See if that lines up a little better. It's actually quite good. Well, that doesn't matter here because we've got a margin space on the section above. That's just come up as nothing, picking up the settings from desktop, let's just set that to zero. At the top, let's go 75 pixels. I think that's a nice space, and then below, not a lot. I want those three sections to be a bit closer, 25 maybe. Let's have a look at that. There we go. That's a much better display. I think maybe a little bit more margin at the top, to be honest, more breathing space. Let's change that back to 100. There we go. Then below this one, let's have a look. Nothing at the top. Make sure that's 100 there. Let's just see how that looks. Let's add it 100 at the top. I think that's a nice bit of breathing space in between all of those sections. Guitars, what should we do here? Now the image that's centralized in there, I want it to go a little bit more to the right. Let's click on the "Column", and then go to Style. When we go to Background, it's not showing anything there, but it's just picking up the default setting from desktop. Now Position, Center Center, that's where it is already, center it to the left, that's too far that way, center to the right, too far that way. What we can do is we can go Custom. Again, this is just set for tablet. The X position, let's just play around with that. I think that's pretty good. It's a better cropping. Let's have a look at that one. Much better. This is a bit of been issue over here and that, I think I want the one to sit above guitars. I know it looks better having it in next to it on desktop, but the spacing doesn't really work here. How did we do that? What we're going to need to do is duplicate the entire section and then join those two columns together. First up, we want this section to remain on desktop but not be on tablet. Let's go to the Section settings, Advanced, Responsive, Hide On Tablet. Let's duplicate this. For the second one, which is also not viewable. Let's go to Responsive. Put it back on for Tablet and Hide On Desktop. That's stretched everything out a little bit, but don't worry about that. If I click on this, you'll see just a single one comes back. Go back to desktop, the same thing. What I really want to do is put this one above guitars. Then I want to delete this. I'm going to right-click on here and delete. Then that's aligned to the right, so let's align it to the left. That looks perfect. I like the layout of this. Some weird drop-down, letters going on in here, and let's just see what's happened there. Join that up. But yes, now I just want to play around with the space of this really. This column, let's just go in here and then add in some padding, shall we? Let's just do it all around, 25, not on that. Let's go to 50. We'll see how that looks. That looks like a nice section that flows a lot better and that sits a lot better in tablet. Just one tiny little thing. It's too much space there. Just take that our if we can. Let's see. Margin set to nothing for the bottom, and that's be a minus amount, let's say 50. Then I'll put minus 50, not too much. Let's try 25. That's much prettier. Cool. The only thing I need to change in here really is the size of the text here. Let's click on that box. Let's go to Typography. It just picks up the size that we used before, but let's make it much smaller, shall we? Let's see it with 50 pixels. No, that's ridiculously small, 300? That's pretty nice actually. Then just looking at the settings of this, that's centralized in there. Actually, that's pretty good. Let's just see what that looks like when we drag it out. I like that. It's going to do that on the 03 and 04. We go to Style, Typography, 300, 04, also 300. Just the testimonials. Hello, there. I think this need a little bit more space, either side of that. Let's put some padding in. What we're doing earlier, 25 either side. That looks cool. I think that's enough space above and below. Then for the photo, quite simple. I just want a little bit more space either side of that. Again, padding. Let's change that all zero, but let's just say padding on the top, maybe 50. Have a look. That looks very cool for tablet. We have the header, we have the hero, we have the main introduction section, the first about Guitars, Records, Live Shows, Old Skool, Testimonials, Photo. Very cool. Unfortunately, if you use the preview here, it doesn't show it in the mobile version. Just showed this a desktop version. If your site is live, just open up a new tablet, check out on an iPad or on a Samsung, Android tablet and just see if it's working. Then go back and make some edits if it's not. But that is tablet and desktop all sorted. Let's move on to mobile. 15. Responsive: Mobile: Let's go to responsive mode, let's go to mobile. Let's see how much we were looking there. Some parts of it, they're almost there, almost looking perfect to be honest, this section looks really good. The spacing on that looks fine. Let's just see what it looks like below that. We probably need to play around with a section. It's actually picked up both of those because we didn't say to hide on mobile yet. We'll have a play around with that also the image, well that's completely disappeared. But then this one I like that, that looks cool. Then that's really nice, the one below, but the spacing of it's gone a bit weird now because we wanted that image on the left and text on the right. That looks good on desktop, but when you have them stacked like this, why isn't really working? What I want to do is move this 03 up above and I'll show you how to do that. Then just couple of little things here. That old school, while it needs a little bit of extra space either side of that to make it fit, or we can make the text smaller if that's what's going to work. Testimonials, I think they look perfect. The photo, wow, just lining out some things a little bit better, but yeah, we nearly there. Let's start with the header. That's the one that's gone a little bit crazy. Let's go back into the page builder. Now, the issue with this on mobile is, this is too much in one space because it's a portrait mode. It's not going to work the same way. We're going to have to create a different header, for mobile. Let's do that the same way as we did before. Let's duplicate this one. Then let's take the first one and hide that on mobile. That's the one that we're now seeing on tablet and desktop. It's still there, that hasn't changed, but we created a brand new one on mobile. I just click on the arrow here. You'll see that the first one isn't there, that's gone. Now this one, we only want on mobile. Let's Edit Section, Advanced, Responsive. Then let's hide it on desktop and tablet. It's not there. Now what I want to do here is basically have the logo sat on top of the nav bar. Let's just have a look at this one. I want this to sit in the middle at the top. Let's click on the Column and let's make that 100 percent width. Then for the one below, also 100 percent width. We now have the full nav bar items in here. They're not really displaying right. What I would like is all of them to sit on the same line and it's to do with the padding around the buttons. Let's click on each one. If we go to Edit button style, padding is nothing at the moment. If I reset that to 0, then you can see it's opened up a lot more space around inside the text, probably too much space. Let's set them as five. You've set to link. Let's do that on all of them. It does look cool. They're not quite lining up yet are they? Let's go to Edit Column. What I want is all of this to be centralized. Still not quite lining up. Let's play around the spacing. You see there's quite a wide space either side of the section here. That set to default settings again, because we've copied it from the desktop and tablet version. There we go, Perfect. Now they're all sitting on the same line. Social media buttons below. That's not too bad actually. Now that's quite cool there. Let's just make them a little bit smaller, well quite a lot smaller, actually. They're centralized. Yeah, that's cool. Now you can see the logo at the top. Let's just make that centralized first. Then let's just play around with the size of this. Let's go to Style, Image, Width. Play around with that. Yes, let's try with that. Now we want to get rid of this white space behind it. What we need to do is set the exact minimum height of this section and then change the margin on the section below it. Let's start with this one. Minimum height set to nothing at the moment, I see pixels. Let's try a 150, I think that's a bit too much. Maybe 130. That looks good. Then let's go to the section below the here section. Again, hasn't set any margin settings for that one yet. Let's just set that to zero. That's what a is it at zero sitting below it. But I want it to be 130 and I want it to be minus what's on the bottom. Let's turn off the linking. 130 minus. There we go. That's all lining up, but what we do need is a bit more space above the logo. Let's go back to our column here. If I go into Advanced, we're going to put pixels at the top of it. How many do you think we need? Maybe let's unlink it, 30. Yeah, that should work. Which means that the size of the section it's now gone up to 160. Then the section below this is getting complex. Let's set that to minus 160. There we go. Well that's perfect. That looks amazing. Now the section below, couple of issues with that. First of all, the position of the image isn't quite right, is it? Let's go into this section again. Background and then Position. Let's try Center Center. That was how it was before. Let's go Center Left. It works, too far off really. Let's just go to Custom again. Again, this is just going to change the position on mobile and also on desktop or anything, and then just get it sitting about that. I think that works very well. Now the Column, again, let's just take out the padding sections and then play around with that. Maybe 150 either side, too much, 100, see how that turns. But yes, this just looks too messy. There's too much going on at once and I don't think we need the logo twice. I don't really think it's working with the logo sat in the middle. Let's just play around with that a little bit and just move things around. First of all, I'm just going to delete this logo. Then I'm going to move this nav bar below the logo, so to the button. That's much better. All right, I really like that. I think I just want this logo to sit further up on the page. This box at the top, well, we've got rid of that now, so let's just delete it, but hang on. That's moved everything around a bit; hasn't it? Because we've got the minus margin at the top there. Let's take that out and delete. There we go, that's disappeared. Now what I want to this image is a bit less space at the top. Let's unlink them. Change that to 25. It's almost perfect. I just want to move it up a little bit, make it a little bit smaller. Let's just put extra 10 pixels on the side of that, and then 10 less there. Maybe at the bottom, let's just move it up a little bit, maybe 20 to maybe 30. Let's push it up a little bit because it's all centralized. Let's see how that looks. That is perfect. I love the way that the page now opens with this view. A logo at the top, links at the bottom, social media at the bottom. Then a lot more if we scroll down. Spots on. Let's have a look at some other sections. This part is almost perfect, the shaping and the display of everything here. With a spot on almost I think adjust this slider to zero. That part's great. This is the next part that needs a little bit of work. First up, let's hide that section from desktop onto mobile as well. If I click on that, I go to "Advanced", to "Responsive", "Hide On Mobile". Yeah, the position of that is perfect. Just one thing missing, that image, let's have a look at that one. The issue is that that section has been set up to work properly on desktop and tablet. The way is two columns next to each other. That is not going to work on mobile. Let's just hide that column on mobile. That's not there anymore. Then what I want to do is this whole section, that's the one that is viewable on mobile and tablet. I'm coming to drop the image into the top there to be honest, let's just say if that work. There's a gray box, let's add the image. Yeah, that looks great. I really like that. I think maybe the 01 needs to be a bit smaller so let's change the size of that. Again, we're just changing the size on mobile. Yeah, I love that. That looks really cool and all fits within side a single page, the image, the title. That's going to work fine on mobile, the only problem is, we have a tablet. What's going to happen there? Is dropped that one into tablet, hasn't it? What I want to do is hide that on tablet. I click on just the image, not the column or the section, just the image. Let's go "Responsive", "Hide On Tablet". Let's go hide on desktop as well. You definitely want it there. I'll click on here now. Well, that's just as perfect as it was before. Let's try desktop. Also as perfect as it was before and, of course, mobile. Perfect and sweet. Love it. On the section below, really love how this is looking already on mobile. The only issue is here, really where we have live shows, then we have the image below it. Let's see if we can switch those around. That's actually quite easy to do. There's a setting in Elementor for that. Let's open up the section and go to "Advanced" and then go to "Responsive" again. We don't want to hide it, all we want to do is reverse the columns. I click on that, and there we go. Now we have it that it runs from image to text, image to text, image to text. That looks great. Just one problem down here at the bottom with Old Skool, it's the spacing around it. Let's click on the "Column", go to "Advanced." Let's change the padding on the right to 25 and on the left to 25. Let's go 50. Yeah, old-school still stays together. In fact, that's absolutely fine with that text there. Let's just do 50 around, see how that looks. That looks perfect. The space there, it's hard to tell exactly. Rise a little bit more space but tell you what? That's changeable. Let's make sure that they're all 50 padding and then it will be consistent. Perfect. There we go. Records, Live Shows, Old Skool. Then testimonials, as I said earlier, that's fine, looks perfect. It's just this one. Let's just play around with the spacing here. I have rule for the section. Well, let's change all the padding to zero again on that one. Then let's just say, close on link on the top 50 and on the bottom 50. Yeah, that's pretty nice. Then left and right, let's just go 25 again on those. That's pretty good. We want to say a bit more than that. Then lets you just the spacing on this one. Let's take that out. Nothing there again. Let's just change to mobile. It's just little bit hail. See that's not quite lining up with the edge of the map. Let's get the padding of that to zero and then take off the links. Take a little bit off for the bottom just to this space between. There we go. Well, there we have a mobile that is looking perfect. Also, we have the logo at the top, we have the nav bar down here and some social media buttons and then we scroll down Wolfgang Music perfectly lined up now. Then each section below that image and text, image and texts, all lined up nicely. Then this guitar section looking great. Then Records, Live Shows, Old Skool, testimonials and footer. Perfect. If we go through each one, so have a look at them all right now. Make sure there's been no major changes. Desktop. You can see that this has dropped in, you know why? Because I didn't hide it on desktop. This is the extra nav bar. Let's just take that one out. Let's make it "Responsive". Let's hide that on desktop and on tablet. Now let's see what that looks like. That looks perfect. Then scroll down here, perfect. Perfect. That one looks a bit weird there now, but let's just switch back to this one. Perfect there as well. Then each of these sections, with the exception of the anchors, gaps there, that's all still working perfectly. Testimonials, perfect, photo perfect, tablet. Yeah, that's where I can find now. I've hidden that extra little nav bar at the bottom. This one looks perfect at the top. Scroll down, love it. Switch back to the page builder. Perfect. Perfect. Check that one again. Love it. Perfect, perfect, perfect, perfect. Yeah, it looks gorgeous. Then mobile, spot on. There we go. We now have a perfect looking website that is perfect across all devices. It looks great on laptops. If they're MacBooks, if they're PCs, it looks good on all tablets, and it will look good on all mobile phones. Now, it's time to make it live. 16. Make Your Site Live: A few very small things you need to do just before your site goes live to make sure it's all working correctly. Let's just go back to the menu and scroll down here and click on Settings. First of all, you will see the status here is still set to Draft. Now we want to make the page live, so let's change that to Published. Then you will see Featured Image below. What you should do in here is add the main image for your site because this may show up in Google searches and it also may show up when the site is shared on social media. We'll pick the main opening image that we've got in our hero and then click Update. Finally, let's just go back to the hamburger menu and go to Site Settings and then Site Identity. Few more things here, this is a little bit more detail about your website which again will help for Google searches and social media shares. We have the site name, that's already been written in. Below, Site description, well it's just taken a default one there. Let's change that to the explanation of Wolfgang Music. There we go. Site Logo. Let's add in the logo we've been using, the black one. Below that we have the Site Fav Icon. This is the very small icon that appears next to the tabs when you're looking at multiple pages in Google Chrome for instance. In there let's just pick this one that I've made, which is just the logo but without a name below it because it's going to be very small that's all people need to see. You just want this in so it replaces the standard WordPress one that's in there for thousands of websites. Then update this. Then we'll close this little menu. Then go back to the hamburger and exit to Dashboard. Nothing you need to look at on this page so just click on the WordPress logo and that'll take you back to the pages setup. Page that we're using, Wolfgang Music, you now we'll say is live, it does not have draft at the end of it anymore. One little change we need to make now, this is going to be the homepage. Just click on Quick Edit. The slug. That's the name that comes after the URL. When you have multiple pages on your site, it would be a URL/contact/blog. This is the home, so we just want to call it Home. Let's go update. Now we need to say that this is going to be the homepage. Click over here on Appearance and Customize and then choose Homepage Settings. You have the choice here of your latest posts or static page. We want a static page, which is going to be Wolfgang Music and that will automatically change. This is all now setup and this is your homepage that everyone will visit when they come to your site. Once that's all done, click Publish and you're ready to go. 17. Domain Name Set Up: Your site is all set up and ready to go, but if you want everyone to view it, there's a couple of things you still need to do here. First of all, as you can see, I still need to set up billing. This is to make my flywheel account active, which means I can turn off the privacy mode down here. So if you set up billing, it can be seen anywhere in the world. One last thing I want to show you is how to set up a new domain name. This is currently your domain name. This is the one that we looked at when we set up the account, it still has flywheel sites at the end of it. We want to add our own private domain name that we have bought elsewhere. So I'll quickly talk you through how that is done. First of all, let's click, "Add another domain". In this pop-up window, type in the domain name that you want to use here. I'm going to use one of my regular ones I have set up and then choose to make it primary. Click," Add domain" so that is added. If you hover over here and you go check DNS status, you'll see this red mark, therefore, it has not been set up correctly with the company that owns your domain name. When you own it, but you have to set this up through another web service. I use GoDaddy for mine. We're going to go to GoDaddy and set that up. But before we do that, you're going to need some help with this. If you do need some help, click here on DNS help, and that will talk you through how it is all done, for different domain name companies. Click on that. This will talk you through how to set up the DNS on GoDaddy, Namecheap, Google Domains, etc. Click on the one that is relevant to yourself. I'm going to go with GoDaddy. It's very easy to set up in GoDaddy and hopefully, it will be for whichever service you're using. I'll just show you GoDaddy. Here I am in my GoDaddy account. I'm just going to scroll down to the domain name that I want to set up. This one here, jonwolfgangmiller.com. Then click the button that says DNS. In this page that pops up, we just need to change one line of this. This is one at the top that says A. Now when you come in here, there may be a line for that already. If there is, I'll just click on the edit icon. If not, we'll go to add, but we do have one here, so I'm just going to edit that. In this part that pops up, we just need to do a couple of different things. First of all, over here, it says host. There's a q letter at the moment, but I need that to be the @ sign. This is all going to get a little bit complex, be a little bit weird, but just follow these rules and you'll get there. The next thing is, I need to say what it's pointing at. This is an IP address, so we need it to point at the flywheel IP address. So to find that, I'll go back to my flywheel account and down below here, that's it. Is the one that's next to the flag of the country that I've used to host my website. I've chosen Australia. I'm just going to copy that one. Paste that one into here. Don't worry about this one that says TTL, just leave that one hour or whatever is that and click save. As you can see, this line has now been updated. We have the @ sign in there and then we have the IP address. Now, one last thing to add over here click, "Add". Type, Let's go see in host, put www, points to @, click save. What this is doing is ensuring that both versions of the domain name, the one that has www at the start, and the one that doesn't will both work. Now that that's all set up, well, we need to give it a little bit of time for it to all go through the back-end system, give it an hour or so, and then go back to your flywheel account. When you're over here, let's check DNS status again. Now what we're looking for here is a lot of green text. That means it's all been set up correctly. Yes, there we go, green text. Now, one last thing that we need to do, as you can see up here, it says the site is not secure. Now obviously we do want to secure site. Now some host charge you for this, in flywheel, it's free. Now accessing of this, this SSL. Click on that, enable. Check in the DNS. Yeah, both versions of the website are cool so let's complete SSL setup. Your domain name is set up, it is now secure. If you want to get back into your website to make more changes to it, why you can click up here on WP admin or you can go to the new URL, which is your domain name/WP admin. That gets you back into your WordPress back end. Now you're all good to go. 18. Thank You: Thank you for taking the time to watch this whole class. If you followed every lesson, you now have an amazing looking website. You know what? I want to see this website, you can load up here in the project section below, and if you pop in there, I'll give you my full feedback as soon as possible. If you have any questions about anything in any of these lessons, post them in the discussion section also below here. Make sure you click on my name below to see my full Skillshare profile. Here you will see all of the other website classes that I am running; we have one on building a portfolio, also using Elementor and another one on what to do with images, how to upload them and get the most out of your website. You can go watch all of those and make sure you follow me, so you can see as soon as I am uploading any new lessons and you can learn a little bit more. Awesome. Have a great day.