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

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

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

teacher avatar Jon Wolfgang Miller, Digital Graphic Designer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      Introduction

      1:54

    • 2.

      Class Project

      2:23

    • 3.

      Elementor & Wordpress Set Up

      7:52

    • 4.

      Elementor 101 - Menus

      4:31

    • 5.

      Opening Hero

      23:00

    • 6.

      Information Section

      13:43

    • 7.

      Elementor Global Settings

      10:25

    • 8.

      Image Slider Gallery

      24:48

    • 9.

      Animated About Section

      22:20

    • 10.

      Creative Animated Text

      24:25

    • 11.

      Customer Testimonials

      4:42

    • 12.

      Website Footer

      7:48

    • 13.

      Website Header

      24:06

    • 14.

      Responsive: Tablet

      17:34

    • 15.

      Responsive: Mobile

      18:56

    • 16.

      Make Your Site Ready to go Live

      1:39

    • 17.

      Domain Name Set Up

      1:46

    • 18.

      Thank You

      1:19

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

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.

5,062

Students

35

Projects

About This Class

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

We must build a website if we run a business or need to show off our creative skills. But where do we start? How can we be super creative and super unique? In this class, I will teach you how to use the Elementor.com page builder in WordPress, and then you can make your excellent one-page site.

As a professional graphic designer, I will explain how to use Elementor. 

Here is what you will learn:

  • WordPress setup
  • How to use the Elementor.com page builder
  • Using the latest setup - Flexbox container and grid
  • Global Settings
  • Text animation
  • Image sliders
  • How to make your own impressive personal one-page website
  • Responsive design to make sure it works on mobile and tablet

This course is perfect for:

  • Beginners - If you have never used WordPress or built a website, this will talk you through the site-building basics and show you how to take those into your beautiful style.
  • Experienced website designers - For those 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.

For free hosting, head to wordify.com and set up Elementor.

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

Hey there, I'm Jon Wolfgang. With 20 years as a professional graphic designer specializing in digital, print, and branding, I've developed a knack for blending creativity with technology. Plus, I've got a serious obsession with the 1980s and all things Super Mario!

I teach WordPress and Squarespace, guiding students to create stunning websites that help you achieve your goals. While WordPress can seem daunting at first, once you grasp its mechanics, you'll discover that the possibilities are endless. Let's find that perfect balance between tech and your creative flair.

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

Level: All Levels

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

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.

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. It's 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, and 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 elemental though, you get to be super creative. You get to build whatever you want to build. It's a fantastic program. And in this class I always 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. So 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 parts in element, or all using different widgets and different tools. The lessons will start with your opening hero section, 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 site with a footer and a header install elementor. And follow along with each lesson and recreate 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. You will have learned a lot more about elementor, so you can take your website design the skills much further. For this class and all of my classes, I will be talking through a lot of different things. There's a lot to cover in all of these classes. I highly recommend as you go through to play and to pause. If I say something big in one, go pause it and give that a try yourself. If you need to do it again, just run it back, 15 seconds rewind, 15 seconds rewind, and then you can watch that whole part again. That will help you understand what I've said and try it out. If you are having any problems with the quality of the video you are watching, come over here to quality levels and change the settings in here. If it is set to auto, you may not see it as sharp as you need, so change it to either 720 or 1080 pixels. 3. Elementor & Wordpress Set Up: Here we are at elementor.com This is the first place you would normally come to if you're trying to set up the Elementor Page Builder. You may already have this set up. If you do feel free to move forward to the next lesson or just stick around for a couple of minutes, make sure you have it all set up correctly. Now we just want to use the free version of Elementor for this class. However, the problem is with any website, you always have to pay for hosting. Hosting is the company that stores your website for you. Elementor do all this themselves, but there is a fee. However, as we just want to use the free version of Elementor, I will show you a way right now to set up a free hosting option. Here we are at Word. Wordefi, offer a free version of Wordpress hosting. If you come up here and you go to compare products, you will see that they have paid versions and they also have a free version. This is for a free dev site. That's a free development site. Meaning if you just want to play around with elementor to get used to the program, choose this. There is a link for word down here in the about section of this class. When you come here, click learn more then go sign up. It's free. Enter your first name, last name, email, password, et cetera, in here, and then click Sign up. First thing you need to do, just verify your E mail address. Then come in here and click Create New Site. Start with the site name Gang Music Location. I am based here in Australia, Temporary URL. Well, this is just for a temporary reason anyway, so you can call it what you want, but let's just put Ing. Music Then select the type of site again, just choose the depth version and go at site. You'll get a little spinning wheel for a minute or so while it sets it all up. When that's done, just come over here and click on the W, the word press logo. It'll give you a pop up showing you what the user for Wordpress and the password. Just click on this little icon here and that will copy the password for you. And then continue to WP admin enter in word fire and password, click to remember the password and then click Log In. Here we are now in the Wordpress dashboard. We can now start building everything from here. If you've never used Wordpress before. Well, I'll just quickly show you the menu for everything is over here on the left element. The Page Builder is a plug in, first of all, we need to install that. Come over here to plug ins and click Add New Search Plug ins. Here you are. Element or website builder install now, then click Activate, not bring you through to this page. This is where you do need to set up an elemental account. But again, we're just going to do it with the free version. Create my account, then enter in your e mail and your password. Then it will say, let's connect your site. You are now an elemental customer. To get started with any Wordpress site, you always need to start off with a theme. This is the back end of your whole website. Creation elementor has its own main theme, which is called Hello. Click on here and continue with the Hello theme. Now let's give your site a name. We already have that because we set it up earlier. Have a logo look, we can do that, but let's just skip that one. For now, that's a wrap. Now skip this. We'll come back into the element or editor. Before we start building our website, we just need to check a few settings inside the dashboard. We need to exit this page. First of all, to set this up, let's go over to the hamburger menu over here on the left, and choose User Preferences. Down here it says Exit two, and you have a few options here. The one we want is this one. P Dashboard, select that. Then come back up to your hamburger menu and choose Exit. Then it says Leave Site. Just click Leave. Or if you do already have the latest version of Elementor installed, this is where you find those options. Just go up here to the Elementor logo and click on this. Then choose User Preferences here, make sure WP dashboard is chosen. Click back on the Elementor logo and then click it to Wordpress. That will bring you back here into your dashboard. Now we need to just check a few settings inside the Elementor. Plug in, come over here on the left to Elementor, hover, and choose Settings. The first one we want to select is about the default colors and default fonts. The way Elementor is set up is that it will use the colors and fonts already set up in the Hello Elementor theme. Because we want to be super creative, we want to disable this simply, just check this box and check this box and click Save. Now come up here to features. If you have the latest version of elementor, you probably don't need to change anything in here. But if you have an older version or you just want to check the correct elements are active, come in here to features. First of all, scroll down to grid container, it says Default. Just change that to active and click Activate Next editor, top bar. This is the latest editor version of elementor. If you're using the latest version, this probably is already set up. But come in here anyway and choose Active. Then scroll down in this section, stable features. Scroll down to this one that says flex box container and just make sure that is active. When you have those three elements active, scroll down to the very bottom and click Save Changes. Now everything is set up and we are ready to start building your website. 4. Elementor 101 - Menus: Now that is set up, 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 quick edit, you have a few options here, but the one we're looking at is status. As you can see, it is published. You can change that to a draft. Now we're going to create our own live page. That's very simple. Click, Add New. You will come through to the regular Wordpress editor. Scroll up here to add title and put in the title of your website. Mine will be Wolf Gang. Music Then come over here to summary. On the right hand side, click the drop down menu over here where it says template. Click on Default Template. Then from this drop down menu, choose element or canvas. That's what we need to do to have a clear page with nothing else on it that we can work. Then go up here to save Draft. When that is saved, come over here to edit with Elementor. Welcome back to the Elementor editor. As you can see we're using the latest menu version. It's always good to just come in here and have a play around with all of the settings in here just so you know where everything is. Before you get started, I'll quickly run through each part of the menu bar at the top here. First of all, this Elementor logo, that's a drop down menu. In here we have the theme builder. Don't worry about just a pro element we are not using today history. Well, obviously that if you make an error you can go back to previous versions and keyboard shortcuts. That's just telling you all of the shortcuts to speed up the whole process. I guess. Then the plus icon add element, this is where you'll see the elements, all of the widgets that we'll be using on this website, this dropdown menu that's set up into different subsections, layout, container, and grid. That's what we used to start building all of the elements, each section of our website. You've got your basics, you've also got your pro section. Obviously you can see a little padlock element on top of all of these, but don't worry about that. We can't use any of these, but none of that is needed for anything we're going to build to date. We're just completely using the free version. We can close that part. And then you get all the general settings, everything you're going to need in here, Image carousels, testimonials, et cetera, that's the elements. Then we have site settings, this is where you can change settings that will work across the entire website. If you're building a website with multiple different pages, any setting in here will be relevant. Every single page that you build. Then if we close this one and then click on this one that says Structure, you get this little pop up window. This used to be called the Navigator. If you're familiar with older versions of element, it was called Navigator. It's now called Structure, but it does the exact same thing. I'll talk through that as we start building your website. Then next, this is the responsive section. This is very, very important and we'll come onto this later on in the class. This is where we can select different devices, desktop, tablet and mobile. This one here, Preview Changes. This is great because as you are working on the website, you can click Preview Changes. And then you can see how it would look for everybody else looking at your website when it goes live. That's everything. Now we can start building your website. 5. Opening Hero: Okay, let's start building your website. We are starting with a very blank page. We need to start adding our first few elements. This is the section we're going to look at. There are two options here. First of all, we have this one add template. Click on that and you'll see what this means. This is where you can bring in pre made pages, different blocks, elements that element of themselves have created. However, you can always see the little pro icon on top of all of these. These are only available in the pro version. However, this isn't relevant to what we're trying to do here anyway. We are trying to build our own unique website. We don't want to use anything that was already pre made by someone else. Just close this one. The one that we're going to use is the plus icon. Click on that. Which layout would you like to use? These are the two options that we have for element. I'll just show you the difference of those first grid. As you can see in here, these are different structures. However, each structure has a set width for each element inside it. This one's 50, 50 left to right, 50 50 top to bottom, and this is an equal split of three thirds. Each section inside the grid is always the exact same width and height. If we close this, we click on Flex box, that's where we have a few more different creative options. As you can see here, this has five different sections, but they're not all the same width and height. They are different width and different heights. As you can see here, same width. However, the height here is double the height of these two elements. Here in today's cluster, we'll be using both of these different elements. We'll be using containers, the flex box and the grid. But for this section, the hero section, we're going to use a flex box container. We just want one that is a single container. Hover up here to the first one with the arrow pointing down. And click that. That will drop in your first container, which is in this pink section at the top. I'll just show you a few more of the elements. You can see here at the top we have another plus symbol, a container that just means you can do the same thing, but either above or below. Let's close that. Then we have the x, that is to delete the container. If you make an error or you didn't mean to drop in another container, you can just delete that one. Then we have the little dots up here where it says Edit Container. If you click on that, you'll see the options that come up automatically on the left hand side here. We'll take a look at that in a few minutes. Also, this allows you to drag the container up and down. When we have multiple different containers here on the page, you may want to move one above the other one or below the other, Drag them around like that. The other option we have now that we have a container set up, is the right click. If I was to write click down here, these are the options that I get. But we want to write click on the container itself and we have all of these options. It's quite clear in here what each one of these does. If you've made a certain container and you want to repeat the action, you can just duplicate it and it will do the exact same thing again. Then you have the options of copy and paste again. If you want to copy something you've done elsewhere, you can paste it somewhere else on the site. Or you can even style, let's just say you've got some text set up a certain way and you want the next bit of text to work the exact same way. Copy the text and paste the style. It won't change the wording in the text, but it'll change the size of it. The main one I want to look at here is structure. Let's click on that. This is a very good tool because what it does is it splits up your site and each page into different sections, different containers. Then you have a drop down menu, so you can see what is inside each container. We'll see how this works when we keep building multiple different elements on the page and drop different widgets inside container. Now we're going to build the hero section of our website. We call this section the Hero because it's the most important part of every page. Why? Because it's the opening section. It's the first thing people see when they visit your website and it's your first chance to impress them. What we are going to build here is a full page opening section that has a background image with the company logo sat on top. This image will give a good impression of what the site is about. Then the company logo also has the company name inside so people will know where they have. When they turn up at the site. Let's have a play around with this container. Now come over here to your menu on the left hand side. And you will see three subsections. There is layout style and advanced. I will talk through different parts of this throughout the entire class just to give you a good overall idea of how it all works and what is possible inside the element or page builder. Let's start by looking at layout. This is where we decide on the width and the height of the entire container, the entire hero section. The width is already set to a default size 1,140 pixels wide. Your other option here is to go full width. If you have a look at this section at the top, you will see the difference. If I choose full width, it is covering the entire page. This works for some containers on your site, but not for others. For instance, if you have one with text in it, you don't want that to be right over on the edge of the page because the flow of the website doesn't really work. You always need a little bit of empty space, a little bit of white space around text. Let's turn this back to boxed, and we'll leave it at the default. You can change this to any size that you want, but I highly recommend sticking with the default width. Now we want to take a look at height. As you can see at the moment, the container only has a very small height, It only comes down to here, or you can see the edge of the pink box. What we want to do is tell this container to fill the entire page. Let's go over to Minimum height. If you click on the drop down menu, you will see different options here. The one we're looking for is VH, That stands for vertical height as you can see here. To achieve full height container, use 100 H. Let's choose H and let's type in 100. This is a percentage. If you want it to only fill half the page, obviously 50% but we want this to fill the entire page. Let's choose 100. We now have a blank empty container set up. What we want to do is set up our background image, hover up here to style. In here you will see background options. You have many different types. You can drop in here classic gradient or a gradient color. You can drop in a video or you can drop in a slide show. For what we want, we just want a classic style click on the brush here. First of all, you could just pick a single color. If you click on this empty box over here, this is where you can choose any color you would want the background to be. We don't want it to be a color, we want it to be an image. What I'm going to do is click the clear button at the top here. Then to use a background image, hover over this box and click Choose Image. 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, we'll go to my profile on skill share 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, we'll click on here and select Files. What is Wolfgang? Music Well, I'm obviously making up a name for a music store, but it's going to be a more old fashioned style music store the way they were 20 or 30 years ago. So 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 sell a lot of instruments and 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 kind of 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. So I'm going to pick this image here as my background image. Okay, and this is how the hero looks with this image as the background. It looks like it's the perfect for this background. However, if I scroll down, you will see there's a tiny little problem down here. What's happening is it doesn't fit the exact ratio of the background, and therefore it is repeating the image below. We need to change that. Come over here to the menu on the left. This is where you can make some changes. Let's go over here to position. As you can see by this icon that is set to how it will display on desktop. We'll look at this later on in the class, but this is where you can change the settings to see how it would look on tablet or on mobile. Right now we're just looking at desktop though. Keep it selected to Desktop. Over here it says position is default. Let's change that to Center Center, because I want it to sit in the center of this container. It is still repeating the image below. Let's go over here to repeat and then say no repeat. That makes the second version of it disappear. However, as you can see, it doesn't still quite fill the container. And we have a tiny little white space at the bottom here, in between the image and the edge of the container. The pink line to change that, Come over here to display size and choose cover. There we go. It's now stretching out slightly so that it fills that exact section. So think about this. When you are choosing your hero background image, you obviously want something that has a landscape ratio. You may want to choose a square or one by one ratio image. But you've got to remember that that will stretch it out so what's at the top, at the bottom may not display correctly. This all looks good inside the editor. However, a cool way to check how it's going to look when people view it without using the preview changes button is to click on this little arrow over here. This little arrow is saying it will hide the panel. This is the whole panel over here on the left. And obviously anybody who visits the live site will not see that. Click on the little arrow to hide the panel. It will also hide the Structure menu over here on the right. Now what you see, which is just a plain image, is exactly what people will see when they visit the live site. That will help you make sure you get the ratios correct. Your background is working perfectly. Anything sat on top of it is also working perfectly. We need to go back to the editor. Click on the arrow again. Okay, If we scroll down a little bit, well, we just see the empty white space, but this is where the next element will appear. However, I want to make one change to the hero section. As I scroll up and down like this, you'll see the image moves with the scrolling. But what I actually want to do here is to make the background image static that stays in the same place. However, any elements on top of it such as the company logo, that is what moves to do that. It's another setting over here on the left hand side, and it's this one that says attachment. It's set to default and you have two options, One is scroll and one is fixed. The default one is scroll. As I scroll, it moves. But I just want that to be fixed. Let's change that to fixed then. As I scroll up and down, you'll see that that stays static. It doesn't move. The elements on top will move. And then we get to the next container that will just scroll above it. Now we need to drop in the company logo on top of this image. Let's scroll up so we can see the full background. Let's go back over here to the plus symbol add element. What we want to do here is drop in image, an image widget on top of the background of the container. However, the settings that we have for the background container will be different to the settings we want for the image. Therefore, what we need to do is drop a container inside a container. Come over here and drag a container and literally just drop it on top of the background. What you'll see over here in the structure section is a main container and then a sub container that is inside this container. What we want to do is drop in our logo inside this container. Come back over here to add element. Choose the image, widget and drop it inside the sub container. The first thing that you always see here is just a gray box. That's because no image has been chosen and this is like a placement image for that. However, we want to change that. Come over here to choose Image, Click on this, then I want to choose the white version of my logo. I have a couple of different versions of my logo up here, but I want the one where the icon is above the text, and I want the white version. I will click on this one. The main problem here though, as you can see, the image is stupidly large and you can't even view what it says unless you scroll down. We just need to make it a lot smaller to do that, come over here to the left hand side and click on Style Here. You can play around with the percentages of the image, the percentage of the width, or the percentage of the height. Let's just play around with the width. If I click on this little draggable element here, I can just play around with it until I get it to the size that I want. I'd say maybe 15% That's good. I now want the logo to sit in the center of the hero section. If I click on the arrow here, this is how it would look to visitors. I don't want it to be at the top. I want it to be in the center. Let's just edit the layout of the container. Come over here to your structure section and click on the sub container that has the image inside. The Part we're looking at here is to justify the content. This is where we can say that any content inside a container can sit at the start, in the center, or at the end. What we're looking for here is center. I'm going to click that one. That didn't make any change. Why? Because the image is already in the center of this sub container. It sat in the middle. But what I need to tell elemental to do is for this sub container to also sit in the central part of this container, go back to your main hero container and then back over here to justify content. And then click Center. There we go. The logo now sits in the center of the page. As I scroll up and down over here, the hero section now works the way I wanted in. The background image stays static, but the logo moves down as a user scrolls. Now the only problem I can see here is sometimes as a user scrolls up and down, you can't really read the logo on top of the background image where it says Wolfgang Music As I scroll up and that text is sat on top of a lighter vinyl record, it's not as readable as I would like it to be. What I'm actually going to do here is add an overlay to the background image. I'm going to add a color overlay that sits on top of the image, and therefore makes the whole background a little bit darker and therefore makes text easier to read on top. To do that, make sure your main container is selected over here in the structure section. And then come over here to the left and click on Style. As you can see, the background is set up how we set it up before with the image, but we are looking at the background overlay. Click on that again, you have different options here. You can choose the classic or you can choose the gradient. Play around with it, see what works for you. But I just want the classic color, one solid color. I'm going to click on Classic, then you can run an image on top of it, but that won't work. That will just be a mess to top of each other. So I'm going to choose a color. I'm going to click over here. You can play around with color choices down here at the bottom if you're looking for a red, orange or a green. But I like what it opened with, with the red. I think a dark red. I think that sums up roughly who we are. I think it gives it a nice retro style grab this.in the middle and then just spin it around and play around with it until you find one that you like. I'm looking for like a darkish red. I think that gives it a retro style. I'm going somewhere in between black and red, Quite like that. It's a little bit bright. This just go a little bit darker. Yeah, that looks great. When you choose that, you can see what appears here is the hex code. That is the exact code for this exact color. If you want to use that exact color elsewhere on the website, just make a note of this hex code. However, later in the class, I will show you how to set up primary colors. This basically makes a record of every color you've used elsewhere. And you can just select it from a drop down menu, but for now, I'm happy with that color. Let's click back here, The Opacity, where you can play around with that too. It's automatically set to 50% If I want it full red, I can choose one, or hardly anything, I can drop it down to 0.05 then I still can't read the logo. I'm actually going to take a back to where it was, which was 50% drag it up to 0.5 I think that's perfect. You have another option here, Blend Mode. If you use a photo editing tool such as Photoshop, you'll be familiar with all of these options here. If you hover over them, you can see what these options are. Multiply, screen overlay. It just means that the back overlay color sits differently on top of the image. So have a play around with these and find one you feel works for you that works best on top of your background image. However, I think just a normal one was good. I think that's what I'm looking for. If I scroll over here, yes, this looks perfect. I'll click on the arrow here and yes, that looks perfect. That is what I'm looking for. I can read that logo. I really like that background, and I think the color of this expresses who we are as a retro music store. Let's just go back and also as I scroll up and down, you'll see how that now works. And yes, that's all readable now everyone can read that at Wolfgang. Music Now our hero is set up and we are ready to move on to the next section. However, a little recommendation for you over here. You have the option to publish the page. We don't want to do that yet because it's not ready to go live. If you click on this, it'll drop down menu. You can see you have save options. Click on that, just click Save Draft. That just means the draft has been saved. It just means that if your computer crashes or something, you have the most recent version of it. I'd recommend just clicking on that every 5 minutes or every time you do something new, you'd have to go back and repeat it. 6. Information Section: Now your hero is set up. That's enough to get everybody's attention when they see that they want to scroll down and find out more. That's what we're going to do now. Next you need to add an introduction section. That's a brief text section that has some important information about who you are and what you can do for all customers visiting your website. Let's scroll down to the next section below the hero, then let's click on the Plus. We're going to add another flex box container. Inside this container, I want you to add two different sections, one of which will be text and the other of which will be image. You'll be adding the text on the left and the image on the right. You need something with two different columns. This one is 50, 50 even. Split this one here where you have a smaller one on the left and a bigger one on the right. Choose that one. Now you have a container with two subcontainers containers inside the container. Again, come over here to the structure section, you'll see what I mean. Click on the drop down menu and you have a container with the first smaller container inside and then the second larger container inside. Now what we want to do is drop an image in here and text in there. Let's go over to the plus and add an element. First of all, let's just get the image widget and drag that in to the larger container on the right hand side. Obviously, it's just given as the standard gray box. Again, we'll come back to that one shortly. On the left hand side, this is where we want to, we're going to add two different types of text over here. Come back to your click Add Element. First of all, we're going to start off with a heading. We'll drop that one in first. As you can see here, it's gone with the standard default settings for typography and for colors. In the next part of this class, we'll take a look at global colors and global fonts. And you'll see how to change this one and therefore, change it across the whole site. But that's okay for now. Below that, we're going to add a regular text box. Come back up here to the click Add element. Then from this section here, choose Text Editor. And again drag it in below the heading. Next I want you to look at spacing and alignment. As you can see, this new section sits directly below the hero section. There's a tiny little white space in between the two things. If I click on the arrow, you'll see what I mean. That's not enough space. An important thing to remember in web design is breathing space. This is the space around each element. The rule here is quite simple. If you have too much going on at once, it's too busy. If it's too busy, users don't really know where to look and where to start reading. You need a simple A to B set up to make that clear and easy to read. You need empty white space, breathing space around each section. What I'm going to do here is change the margins on the main container. Let's go over here and click on that main container over here on the left. This is when I need you to click on the advanced section. In terms of the layout, you have two options you can play around with. Here you have the margin and you have the padding. The easiest way to look at that is the margin is the space outside. The padding is the space on the inside. We don't need any space on the inside of this container, we just need space above and below. Let's take a look at the margin. I'm going to click on here to top. I'm going to add in a pixel amount that will sit above and below this container. Let's maybe try 100 pixels. As you can see, when I did this, it changed every single section here to 100 pixels. Now there is a margin of 100 at the top and the bottom, but also on the right and the left. I don't want them to be there. On Elementor automatically has this setting here where it links values together. What you need to do is turn that off. Simply click on it, then go back to the two that you wanted to go back to zero and right in zero, left and right. Now I have a margin of 100 pixels above this container and a margin of 100 pixels below this container. That means that when they start on the next section, there will be an even space between each section, 100 pixels up here and 100 pixels below. Next up, we should take a look at alignment. Side of design when you need to make a decision of where everything sits in relation to everything else. The moment the text is sat at the top of the container. That's the default setting from elementor. However, I don't think that looks that neat. I feel it would be a better set up if the text was in the middle of the image on the right. We now need to select this sub container, the first one that has the text in it. And you can either click on this little gray icon in the corner or you can use your structure navigation. Obviously, we were inside the main container and we just want to edit one of these sub containers. Choose the one that the text inside it. Then the set up here is very similar to what we did previously. We just need to go over here to justify content and tell it to be in the center. There we go. In terms of breathing space as well, what you want to avoid is things that are too close together. For instance, here we have text. There's not a big space in between the text and the image. They're too close to each other, which does make it more difficult to read. What we want is a little bit of white space over here on the right hand side of this container. Again, let's make sure we're inside this container and let's go to Advanced. This is where we're going to use padding rather than the margin, because I want space inside the container. On the right hand side, come down here to this icon and turn off link values together that changes everything to zero. Then what we want to say is a space on the right. I don't want this space to be anywhere else. I don't need padding at the top of the bottom or the left. Looking at that, I think maybe 50 pixels should be okay there. As you can see, that's moved all of this text over to the left and it's got a much better space in between there. Maybe it just needs a little bit more space. So this headline, one is further away. Let's round it up to 75. There we go. That's perfect. Now let's take a look at the heading that we have here. Again, to edit this, click on the heading itself, or over here in your structure section. Choose heading first up. Well, I want a different title to be in here here. I'm just going to write in the name of the company that works very well, but I need to play around the typography and the colors used here. First of all, however, look at this one down here that says HTML tag. And click on the drop down menu. Here you have multiple different options for a tag that goes behind the text. I'll explain a little more about that in the next part of the class. However, I'm going to change this one to H one. That means heading one. The reason I've chosen H one is because you should always have one H one on your page. That's the introduction to your page and that helps people find your website inside Google. A general rule to play is make sure you never have more than one H one for the next heading, make that H two. Now to change the look of this, let's go up to style. First of all, text color, it's automatically dropped in this blue. But I don't really like that. I don't really think it suits me as a company. I really like the dark red that we've got going on up here for this one, I want another color that sits well. With that, I'm thinking maybe like a gold, dark bold, gold. What we're going to do is click on this blue over here. Then I'm going to drag this one to the left. We go into the more yellow, goldy, orangey section. I think around there looks good. Then drag this one around. Just play around with this until you find a color that you think works perfect. I got to remember, this is colored text on top of a white background. So you don't want something too light because no one can read it. If you just want straight black, you can choose that. But again, I want this gold color for mine. Pick the color that you think works best for you and the product you're trying to promote. Let's scroll up. I like this one. I think that's dark enough and bold enough. Bright enough. I go a little bit bolder. There we go. I think that works better on the white background. Again, they'll give you the hex color here, say that one. Make a note of that for later on. Now, typography, it's automatically picked this font family to be used for all headings. That's a nice font. I think it's good for the body copy, but it's not what I want for the heading. I want a bigger bolder Shouter font in here. Click on you drop down menu. What shows up is a list of all the typography you can use across the whole website. There are hundreds on here. You can just go through each one and just try them one by one, but that would take a very long time. I would recommend finding typography that you like that you've used elsewhere and that you feel works best with the service you're trying to promote here. I have, and I'm going to just type that in and make sure that it is one of the options here. I really like this one that's called to. There we go, it's showing up. I will select that. Yes, there we go. As you can see, that's a lot bolder. And Shoelier just represents what we're trying to do with this service here. Further options you can make here, or you can play around with the size of this. Again, this is set to pixels. Keep it at pixels, Then just drag it back and forward just so you can see what's going to work for you. I want it to be big and quite bold, but not sit on two lines. Let's maybe go at 40 pixels, then the weight. As you can see here, there are a lot of different options in sizes. Obviously, the bigger the number, the bolder the font you choose, 100, that's the thinnest one. But I like what we just had there with the semibold one. Think bold and black is too bold, so let's go semi bold. Then you have a few more options. You can choose upper case or lower case. I really want upper case here. I think that's even bolder. And sheli, there we go, style. You can have it normal or italic, But I don't like that in that represents me. But that does look cool. It's got a bit of a retro 80 Sl style, but I just going to keep it as normal decoration under line over line. I don't need any of that, so I'm just going to leave that as default, which is the non version. That's almost perfect. I just feel like it needs a little bit of space in between each letter. What I'm going to do is go over here to letter spacing and play around with this. If I just drag it from left to right, you can see it makes that space a lot bigger and a lot smaller. I want it to just be a bit bigger, so it's readable maybe two pixels or 2.5 pixels, I think 2.5 I think that's enough space in between each one. But when a user sees that, they can see, it says Wolfgang. Music That looks great. I'm going to click on my arrow and just see how that looks. Yes, I think that's a nice flow from the top to this section here. Obviously we need a little bit more information and image drop in here. I want to talk you through how to set up global type and global colors across the entire website so that if we were to use this heading again, it would appear in the exact same color, in the exact same font. 7. Elementor Global Settings: Next I want to take a look at Global Colors and Typography that is used across the entire website. To view that, come up here to the menu and click on this icon here, Site Settings. First one we're going to take a look at is global colors. This is the page that you'll see when you open global colors. This is showing us a preview. This means that if you make any changes here, they will display over here. The other option is off, meaning that if you make a change in here, you will then see the changes inside your live website. I would recommend using that for this stage. From the design point of view, it's very clear. Over here we have a primary color and a secondary color. And the main text color. The accent color, well, that's like the extra color. If you don't want to use the primary or secondary, you can use the accent color. We're probably not going to need that in this website, but in a bigger website, you may want a third extra color that is used a very small amount. Now, for the primary and the secondary colors, I want to use the two colors that we have used the site so far. The primary I want to be this dark red, and the secondary this gold. If you remember, when we set up these sections, we had a hex code. If you've made a record of those brilliant. If not, come back into the editor to do that, just click on the X up here and it's saying, would you like to save the changes you've made? We haven't made any changes yet. Just put this card now. Let's find those colors that we set up earlier. The first one was in the main Hero container. Click on that in the structure, go to Style, go to Background overlay, and here it is. Click on the Color up here, and you'll see the hex code below Highlights, and copy that. Now let's go back into Site Settings Global Colors, and go to Primary and paste it in there. There as you can see, the primary color has now changed to this dark red. Click Save changes, close this window again. Now let's go to the headline here. Click on the color. Copy the hex code back to Site Settings Global Colors. Let's make that one the secondary color. Now you can see how the two colors sit together and you can see that it is a good contrast between the two. The next one I want to change is the color of text. That's a little bit gray as I have live text on the page. Let's turn this preview off again. As you can see, there is text down here that is using that exact color, 777. It's a little bit too light, I want to make it a little bit darker. Click on the color, then play around with this color picker over here. If you want to go full black, drag it all the way down to the far corner and you'll get the hex code of 0000. However I feel that's a little bit too dark and a little bit too bold. So I'm just going to move it up a bit so it's a little bit lighter. So you go from one extreme to the other. I think around there, that looks great. Now, the accent color, again, I don't think I'm going to use that one, but maybe if I wanted a third color in there, well, I guess I have to pick one that would work well with the red and the gold. I don't know. Maybe like a dark blue or something. Let's have a look. Purple, I think. Just like a dark blue. I'm probably not going to use this, but that's quite a neutral color. That does work well with everything. I'm just going to leave it. If you need further colors beyond your primary or secondary text in your accent, you can add another one here. Call it whatever you want and then choose your color. But I don't want any more. I'm happy with the four I have. I've pressed to delete it because I'm not using it. I'm going to choose delete. Now that I have all my global colors set up, I will save these changes. Now I'll just show you how these global colors work to ensure consistency across your whole site. Now that we've saved, let's click on the X. Let's just choose any Element Insight. Here I'll text. And then let's click on the little pencil here to edit the heading. Now we have an extra option. We can choose in here where it says Text Color. Anytime you need to choose a color, click on this little globe icon where it says Custom. That will show you the primary, secondary, the text and the accent colors. Let's just say, actually I wish that was in the primary color. I click on that and it changes to that. It just means that if I go through the entire website and I want to change the text everywhere, I'm always changing it to the right color, to the primary or secondary. I don't have to do it manually. It's automatically. For that. Now let's take a look at typography. Come back up here to the site settings and go to the typography section. This is where we're choosing the typography and the fonts to be used in all parts of the website. Again, it just ensures consistency, saying if this is the size and the weight of our H one heading, it will always be the same whenever that is used. First up, let's take a look at the body copy. This is just the main text. Whenever you do large blocks of text, let's click on the pencil. It's just set it to a default setting. If you wanted to change that to something else, click on here. Maybe you're like aerial as a font, or maybe you want a Sera font to go in there. Again, take a look through other fonts. Check out Google fonts, places like that to see if you can find one that you think works for you and the service you are trying to provide. I'm going to choose one more Google font that I have used elsewhere that is called Roboto. Roboto. Roboto. Now let's take a look at H one. That's the heading that we already set up over here. Let's just copy what we did for that one, because I know that works there. And it just means I can use that across the entire website. Again, click on the pencil icon. Then rather than default, let's choose to then try to remember what you did before. Obviously, you can just go back and then check out the heading that you put in here. But if my memory serves me correctly, I think I set that to 45 pixels. Then the weight was semi bold transforms upper case. And then the other one I changed was the letter space in which I set 22.5 pixels. That's my one. Now you can play around with this and you can set up 234. If you have a very text based website, you do want multiple different headings because then it's a heading with a subheading and then sub subheading. However, for this site, I think I'm just going to look at the H one and the H two. I know what I've set up for the H one, and I'm going to do the H two the same. However, I'm just going to make it slightly smaller. Again, come into H two, click on your little pencil, choose the family and size. Well, the last one, what do we have? We had 45. Let's just put this one at, maybe at 30. But the weight, same transform, uppercase letter spacing, 2.5 Play around with this, see what works for you, and you'll find this out later on. When you're playing around with H one and H two, if you feel it's not quite the right size, you need it a little bit bigger or a little bit smaller. You can come in here and change it. When you change it once here, it will change across the entire website. So have a good play around with this. Get your colors and your typography working the way you want it to work for your website. And then click Save Changes. One last thing to check is your global fonts as well. Yes, we have set up the body text, and we've set up the H one and H two. But just make sure that your theme is aware of which fonts, which typography you are using here. Let's go back into the Site Settings and go to Global Fonts. It's just this section down here that we need to make sure is set up to work the same way as the text we've set up in the typography section. Click on one of these or in your menu over here, just click on the pencil. Just make sure they are set up to the typography and the fonts that we are using elsewhere across the site. In this one, let's just choose Anton for primary, On for secondary then text. Well, that's already set up to Roboto as is Axon. It just means that the theme is aware of the fact we are using these fonts across the whole site. Let's save those changes then head back to the editor. 8. Image Slider Gallery: Now that typography and global colors are all set up, let's go and finish this introduction section. First of all, obviously we have a title here, but our body copyable, it's just laurum ipsum. We need to add our own body copy in here. Hover over the text, click on that, click on the icon, or use your structure over here. You know how to manage all of this now. Then in the pop up over here on the left, we are editing the content. Now the text that has gone in here has automatically gone in as paragraph text. You can change that if you wanted to use different elements. So we could choose heading one, then it changes it to heading one that we set up in typography section earlier on or heading two. That's what we set up there as well. However, we just want paragraph, because we just want regular body copy to be used in here. We've chosen the typography to use for that and we've chosen the color for that. Just come in here, delete the text that is there already, and then just start writing in your text. It is best to write it straight in because then there'll be no other problems with texts that may have been copied from elsewhere. But I'll show you what I mean by that. Rather than writing it out, I've written all the text already and I'm going to copy and paste it into this box that has actually come out. Okay, looking at it, however, if you've written this inside a Word document or you've taken it for an e mail, it may have actually picked up extra HTML code that is not needed here. It could automatically change it to different typography or put in different spaces where they're not needed. If you do have that problem or if you have any text and you want to clear it so it's safe to use in here. Well, just Google, a site like this, anything that is an HTML stripper, obviously there's loads of ads on here. Close those. If you just paste in a copy that you want to use on this website on the left hand side, click strip HTML, you'll find out that the output on the right hand side has cleared any unneeded HTML code in there. I said this one was already fine anyway, But just in case I'm going to copy the output and go back to my site and paste that in. That all looks great. I'm really happy with this set up so far. Is going to click on my arrow. I think that does look great, but maybe I actually want the image on the right hand side to be a little bit bigger. To do that, I'm just going to need to change the size of the two containers that I have inside here. You remember when we set this up before we made the decision of a slightly smaller one on the left and a slightly bigger one on the right. If you click on each of these containers, you choose layout, you can see the exact size of these. The smaller one is 33.3 then the bigger one is 66.6 it's a third and 23. If I would like to make the image container a little bit bigger, just click on that container in structure, come over to width and type in a different number. Let's say 70, maybe even bigger than that, maybe 75. I know it's not a big difference, but I think that works out a lot better. I like the way Wolfgang and Music are now sat on two lines. Text is a tiny bit too small though. Just click on the icon over here. Go on a typography, Click on your pencil. That's why I actually set that one as 40, and then in my typography settings, I said it as 45. I think in my head it should have been 45, so I'm just going to change that one to 45. There we go. I think that works really, really well. I think that's making better use of the space when you start creating your own site, just have a play around with that. It will all come down to how much text you have here, the length of your heading, the type of image that you want to use, space. Let's go back to the editor then let's choose the image that we want to use. Over here on the right, again, just click on the image over here on the left. Go to Edit Image and then go to Media Library. I'm looking for something quirky to go in here that works with my little introduction. I like this one with the little LED light. You are what you listen to. Let's try that one. Yes, I think that looks great. Let's hide the panel. I think that's a nice flow from the top section to this section because it's representing the black and the red that we are using up here. One other thing to check when you drop in image is over here on the left where it says Edit Image is the image resolution. Click on this drop down menu and you'll see lots of different options. The reason you want to play around with this is you want to get it to the right sides not too big and not too small. If it's too big, it will slow down the loading of your website. If it's too small, well, it will just look bad. Let me just show you. If I choose thumbnail, it's gone tiny. That's way for this website. Then if I go to this one, the resolution is over 2000 pixels by 2000 pixels, it views absolutely fine. However, it's just too big for this section, because as you can remember, the width of our website was 1,140 pixels. It doesn't need to be that big. In fact, the default setting that it had on was large 1024 by 1024. Just select that if you're happy with that section. Always good to come up here and let's save the draft. I think this works very well as an introduction. However, I think it needs a little bit more. I think it needs an extra layer. I just don't think that one image is enough because we do lots of different things at the music store. I want to show off a little bit more. There are a few options here. One is to just include multiple images, one on top of the other, completely stacked. However I like the space that is being filled by this. Now I don't want it to take up any more room than the single image is. What we're going to do is change this single image to an image carousel. That will be multiple different images slide from one to the next. To do that, come up here to your plus add element. Scroll down to the general section and choose this one that is image carousel. Then drag that over to that container. Now when you drag all these things over, you'll see these little lines that come up mean you can put it above or below something in between something. Well, this one is to replace the image that's there. Just make sure you see your pink line above or below. Let's choose above. Want this carousel to sit here? I don't actually want this image to be there anymore. A quick, fast way of deleting this right click, choose Delete. We can do that up here in the structure. Right click, delete. Now let's edit this carousel. Click on the carousel, or choose it over here in your structure. That will bring up the content menu over here on the left. First of all, well, we need to select some images, don't we? Click on Add Images, It will show you the media library again, the image that we had there. I did still love that image and I want that to be my first image. I'm going to select that one. Then I want to include a couple of images that show the two main things that we do in this music store. First of all, instruments, we sell guitars. The third one, I'm going to choose this vinyl image because we sell music in the store as well. I think three is a good number for this. Play around with this yourself. See how many you want to include in there. You don't want too much. You don't want 100 images. You want to keep it short and brief. Click over here, create a new gallery, and then click Insert Gallery. As you can see, the three images of the carousel have appeared over here. Let's just scroll down a little bit so we get a better view of this. Or if your structure is getting in the way, you can move it up. Or if you want to get rid of it, you can close it over here, but maybe just move it over to a side where it's not getting in the way. Maybe over on this side, but I think it's actually okay there. I think I've got enough room. First up the image size, again, too small for what we've got here. Thumbnail, Too small. Let's change that to what we had before. The large version, 1024 by 104, they've all gone bigger. However, I don't want all three images to show up at once, I just want one to show. And then I want it to automatically slide to the next one over here, where it says slides to show. Make sure we're on desktop. Then instead of default, let's choose one. I just want it to show one single image at a time. As you can see here, it's automatically sliding from one to the next. I think that's actually perfect in terms of the speed and everything. Also as you can see, there are little arrows here. That means that when a user comes to the page, they can scroll through it at their own speed. It gives them both options automatically showing them there is something else and allowing them to scroll through. In terms of these arrows and these little dots at the bottom. Well, have a play around with navigation over here. It's set automatically to arrows and dots. If you just want the arrows, choose that one. And obviously the same with the dots, or you can have nothing. But I like the arrows and dots. Let's just click on this arrow. Hide the panel. I think that looks great. I think as I scroll down from up here, I then see this animated carousel showing me multiple different things that I can expect if I headed to Wolfgang. Music I think I just want to add one extra element in here. I just want to show you how to do another cool little thing to split up text basically as we have here. We have the header and then we have the body copy. I just want to put a line in between the two. I'm going to put in what's called a divider. This is another element here. And element then choose from the basic section divider and then just drag it over. And again, remember the pink lines will show you where it's going to drop. And I want it in between the two bits of text. Drop it there, That's how that looks. It just means there's an extra split between the two sections of text. But I don't know, I'm not that happy with the size and the space. I just have a little play around with that again, just click on your divider, Click on your pencil icon. Then the first thing you can play around with here is the style element or has multiple different styles, some of which are a little bit crazier than others, that you can have a curly line, you can have curved, or you can go quite crazy and have fir trees. I don't know what else, Zigzags, There's loads of different options there. Pick one that you feel is best to represent your service and your product that you're selling. However, I think just right here, I just want the regular one. Just a solid one is good width, I think it's just a bit too big. I don't want it to go all the way to the edge of the body copy. So it's going to change it to 50% That's better. A little bit smaller then style. Let's go up here. First of all, it's a bit thin. I'm just going to up that it's on a single line At the moment, I could just play around with this and put it up to something crazy, or the biggest is ten. But I think maybe three is good there. 3.5 Now three, I like three. My first choice then I just think there's just a little bit too much space in between the two bits of text and the line. I'm going to change the gap. That's just the space around the line. Let's just change that to five. There we go. I like that. That looks a lot stronger now. Maybe it's just a little bit too dark black. I want it to a little bit lighter, not stronger than the text. Again, you can choose a custom color. Choose your primary color if you want. However, I do still want a black. So I'm just going to click on the color picker and just pull it over here to this. Yeah, I think that was great. Love it. I think what we need now though is some more information below this initial introduction, further information about what we do in the store. Let's go back to the editor. What I'm going to show you guys how to do here is how grid. Remember in this upper section we used a container and we had two containers inside that main container. What it allowed was for different inconsistent widths between the two containers. We started off with a three and then 23, and then I was able to go in and edit the width of this one, which automatically edited the width of this 12. However, for this next section, I want three columns that are the exact same width. Therefore, rather than choosing a container, we would choose a grid. Click on the plus and choose grid. Now you have different structure options here. The one I'm looking for is three columns set up this way. However, if what you want can't be seen here, don't worry, you can just throw in whichever size and then go and edit it yourself. Later on, I'm just going to choose three columns. There we go. Now what we have here is a grid. Inside the grid are three separate columns. What we want to do is add the same thing into three of these. What I want it to be is an image with text below. Let's go over to Add Elements. Again, let's start off with an now below that I would like some text. Let's go to Add element. And then take your regular text editor and drop that below the image. Now I want it to go below, but as you can see right now, it's not giving me that option. If I look at where the pink lines are, it's only on the left and right. If I drop it anywhere, it will actually go into the next column. That's because you can only have one element inside each section of the grid. How do we have two things? Well, that's quite simple. Quite easy. First of all, let's just delete those two elements. What we need, similar to what we had before, is basically a container Inside each one of these columns, I've dropped a container. Because it is a container, it means I can drop multiple different elements inside that container. This might seem a little bit confusing, but let's just try that again, what we tried to do before, first of all, I clicked on add element. Then I dropped in an image. What I'm doing here, as you can see over here on the structure, is I have dropped an image inside a container that is inside a single column of the grid. Now below that image, I just want the text editor again. Click on a element, then drop in Text Editor. There you go. Now you can see that has worked. What we're going to do now is basically copy what we've got in here. What I'm going to do is just click on the container. I want this exact container to appear three times because even though they'll have different images and text, the set up of this is identical. Hover ovie you. Container right click. Just choose duplicate. What it's done is it's dropped that container in the next column of the grid. Duplicate again, and there you go. Now all we need to do is just select image you want to go on each one and update our text. Let's start off with images again, these are individual image boxes. Just click on your image and then go over here on the left to edit image. Again, my image choice here is just to show the variety of services that we offer at the music store. I'll try and get a different variety to what we had before. This one is very good because this is more technical side of music equipment. Let's select that one for the first column, then for the next one. Let's see what else we can choose that's a little bit different. I think this one over here looks great. That's some headphones. That's another service that we offer in the store. Let's select that then. For the last column, I think maybe this one, which is a live band image, we don't sell live bands in there. But I think it's just a good representation of what we can offer to customers to help them out with their live shows. Let's select that one. There we go. All three images are the exact same ratio, where they are three by two. So that's working perfectly. All I need to do now is just add my text again. Click on Text, click on the pencil icon, or come over here to your structure. As you can see, we have a grid with three individual containers inside it. If you want to the text inside one of them, drop down that container and choose text editor. But I just think just clicking on it on the page is probably the easiest way. I've already written my text, and I have stripped any HTML code from, it's going to paste each bit of text into here. In this section, alignment is very important. While we have the same ratio on all three images, the text length is about the same for each one. You don't want one, that's just a couple of words. And the next one being 100 words. Try and keep them roughly around the same length and then it'll be nicely lined up at the bottom of the text. Okay, let's take a look at this one. Hide the panel. I think that looks great. I think that's perfect that we're going from this first opening hero section into the slider image down here with the initial introduction. Then we go into the grid. Only one tiny little thing that I can see here, this would be a designer's eye that's picking up on this one if you spot it. Well done. Just the space, the alignment of this image here and the alignment of that text. There's an extra little space there. I'm going to go through and edit that. Let's go back to the editor. As you can see, when I hover over the container, there is an extra little space around here. That is a default setting inside Elementor. It will always set it up so that there is a small pixel gap around everything. A small padding, if you will. What we're going to do is edit this container. Just going to click on the container, then go to Advanced. All I want to do is make sure that the padding section is all set to zero. There you go. I can go into each one and manually set it up so it's the same space around each one. Or a fast way to do it, hover over the container that you know is correct. Right click copy. Then goes the container you want to change. Right click there and choose Paste Style. You can see that automatically changed it because the style for this container was to have a panning of zero. It has read that inside this container, because I've copied styles, pasted the styles in here, it automatically changes to the exact same thing. Play around with that. Sometimes that will work for you, sometimes it won't just see what you can get working. I'm just going to move this structure thing over here as well. I remembered that I didn't do that in this upper section. While this one is a lining up here on the left hand side, this one has the space. So let's just go to edit container or paste the style again. And there you go. It's just taken out that little gap around there. And now you can see that perfectly lines up there, that perfectly lines up there. Awesome. Let's move the structure back over here and save the draft. 9. Animated About Section: Okay, your website is already looking cool. And that was a very good introduction section. Now I think we need to go into more detail about your company and your service. I'm going to start creating a section that I'm going to call the About section. What we'll do here, we will start adding a new container, Click the sign and choose flex box. I'm going to two columns here for this. Now the one thing we're going to do slightly differently here is the width of the container, the main holding container. Again, just click on your little dots in the middle there to edit container. Then come over here to the menu on the left. Make sure you have layouts selected. The one part that we're going to change here is this part where it says content width. It normally comes up automatically as boxed and boxed at 1,140 pixels as that's the default setting. What we're going to do with this one, however, is full width. As you can see down here, these internal columns have stretched to the edge before they were ending here. Now they go to the very edge of the page. That's what we want to do with the width. We want it to fill the full page. Let's also just play around with the height. Let's just try and make it fill the entire page with height as well. The best way to do that is come into the drop down menu over here at the minimum height and choose VH vertical height. Type in one as that will be 100% The plan I have for this about section is to have another strong image on the right hand side and then text on the left hand side. What we're going to do here is change the background to both internal columns. Let's bring back the structure window. There we go. This is our main container and then the two smaller internal containers. Let's choose the container on the right first, click on that, or click on the container itself, or the gray box left. Then over here on the left hand side, choose style in background. Again, click on the classic one and choose an image. The image that I want to use here, well, I want this to be about the customer. I want to show one of our customers inside the store playing the guitar. Let's drop that one in. There we go. Let's just move the structure over there. Same issue that we had previously with how it is filling the box. Again, these are the default settings. Come over here to the left to edit container style. Again, let's just change the settings in here position, let's say center, center, repeat, no repeat, and then display size cover. There we go. It's now filling the entire box. It is quite a strange crop on that though. I'm now thinking, I don't need the height to be 100% That's probably too big for the amount of text that I want to run on the left hand side, let's click on the Dots up here to Edit Container, make sure layout is selected. And then maybe let's change the vertical height to 75% There we go. I think that's a much better display of the image I've chosen to use here. Now let's move Structure back over this side. Then let's choose this container again. Choose it in your Structure menu, or just click on the container over here on the left hand side, choose Style Classic. Now what I want in here is a colored background because again, that will help the split between the section at the top which will have a white background and the section below which will also have a white background order. With that selected, come over here and click on this globe icon default. And choose the primary color. Choose whichever color you want here, but I'm going to choose the primary color. As I think that's a nice split from the white above to a colored section. Now as you can see from the top, we scroll down from this colored background to a white section to this bold section with a colored background and a full bleed image. Few things I do need to change here though is the space between the section above and this section. And also these weird looking borders that are around here. If I click on the arrow, let's see how it would look in a live version of the page. Yes, as you can see, there are still white borders around each section here. Let's see if we can take those out. Let's have a look at the main container. A highlight the main container and choose your dots at the top, or choose it in the Structure menu. Then over here on the left, let's choose Advanced. Let's just set the margin and the padding all to zero. It must have been the padding. The padding was automatically set to maybe ten pixels. Now that I've set that to zero, let's hide the panel. There we go. It's now going to the edge. We've not got a white space on the edge. If you ever see that in any of your set up, just play around with margin and padding in the container or in the internal containers. What I need is space above this section, and I'll also need space below the section. Let's go over here to margin Again, I'm editing the main container. Let's link the values then let's 100 at top and 100 at bottom. Let's see how that looks now. Yeah, that's a much better space between this white section at the top. It's also consistent in terms of the spacing here, spacing here, and spacing here, that again runs at the bottom. My only concern about this is that using our very bold primary color in there, it does work and it does look cool. But I think I want it to be a little bit lighter. I still want to split between this section and the white sections above and below, but I'm just going to play around with the opacity color, primary color that I've added in here. Again, let's edit this container. Click over here on Structure. Click on the container itself. Let's go to Style. This is what we set up with the classic background type with this primary color. Click on the color itself over here, the red color. Then this little bar down here that will play around with your opacity that is viewable. You can just drag it from left to right. For that, you can just play around up here with the color picker and choose a slightly different color, but that's going off brand. We're changing the opacity of this color. That's still the primary color that we have set up. It's still the same hex code. It's just the numbers that are changing next to it, They're essentially referencing a percentage. Let's just keep dragging it down. I think I'm looking around the 20% Maybe this 121, 21% Let me see how that looks now. I think that's a nice flow from the top down to this section, into the white section and then into this one. It's enough of a split between the two colors there, like a separate section, but it's not too intense, not too full on. Let's go back. What I would like to drop in here is two separate text columns. The column on the left, I'm going to have a number 01 in the next section, below this, we'll have number two. Number three. Number four, We'll come on to that later. In here, I want two text columns. One that has a big very bold 01, then another column next to that that has the word guitars, and then some brief information about the guitar service. We're now going to go up to an extra level of containers here. We have two containers inside one container. I now want to put another two containers inside this container on the left. Let's go back to our plus up here and add an element. Let's drop in a container inside this first red container that's sat in at the top there. Let's add another container below that here, we now have two containers inside this container. This would work if you to set up your text this way, the way it is stacked, the way we have 01 at the top and then guitars and the information below. But I don't want it like that. I would like them to be aligned side by side. I'd like one column on the left and one column on the right. What we need to do here is edit the container that these two containers are in. Again, let's go over to our Structure menu over here. This is the main container then. This, as you can see, by the way, it is highlighted is the text container. This is the one that I want to edit, I'm clicking on here. It will then go over to layout. I'm looking at this section here, direction. This is saying that anything that is inside that container either runs horizontally or vertically, as they are stacked one on top of the other. At the moment that is vertical, I'm going to change that horizontal. There we go. You can see the change that has happened there. The two columns are now sat left and right of each other. Now, I will add 01 to this column on the left, and then Guitars and the information to this column on the right. Now we're going to start adding text to the two columns that we have here. Let's start with the column on the right. That's the easiest one. We want to start off with a heading of Guitars. I'll drop that in here. It's automatically set it to H two, and that is what we're looking for. Let's just write in the word guitars in terms of the color there. Quite like the red, but I think I just want it to be the regular text color. I'm going to go to Style and then click on this Primary button and then choose Text. I like that. Now let's go to Add Element again at the top here. And just drop in a regular text editor. Again, that's just dropped in the standard lurum ipsen text. However, I have a copy of all of the text I want to use here. The HML has been stripped from this one, of course, I'm going to paste that in here. Now what I want is the number one or 01 on the left hand side. We'll add that in as another heading. Let's go up to add element at the top here. And drop in another heading over here in the left hand side. Co again it is dropped in a H two, which is fine. And I'm going to change that to 01. In terms of the display I want here, I want it to be sat closer to the text on the right hand side. At the moment it automatically went in as left align text. But I can change that. I can make this text, the 01, align to the other side of this container. To do that, I'm going to scroll down here to where it says alignment and choose the right hand side for this perfect. Now in style here, I do want to edit this. I'm going to go up to style. First of all, the text color, I don't want that to be solid red either. I'm going to click on the color over here, choose the color picker. And I'm going to actually select pure white there at that size. It's not particularly readable. Let's go to typography. Click on the pencil icon here. I'm happy with an, I'm happy with the weight here. It's just the size. This needs to be a lot bigger. So I'm just going to drag this one way up. I'm going to get pretty big on this, maybe even 200, it seems like 200 is the maximum it will let you go to. It is in terms of using this drag in bar. If you want to go much bigger, you can just highlight the text in here and write in a number. Let's write in 800. It will go 800, we don't actually want it that size. 200 was fine, but that is how you can change the size of text to anything you want. Let's change that back to 200. That looks great. I think it just needs a little bit more of space in between the zero and the one. Let's play around with letter spacing again here. Drag it out a little bit. I think I'll go to the end of the bar here as well. Ten? Yes, I think that looks great. Let's hide the panel. I really like that. I like the way we've got 01 sat here, and then that rolls into guitars and then we see the image. However, the alignment and the spacing on this isn't quite right. Let's go back to the editor. First of all, I don't want the text to sit at the very of this container. I want it to sit in the center. Again, a very quick way to sort this one out is to say that the whole red container should be centralized, or all the content inside that container should be centralized. Again, we can just click on the red container, click on the gray box top left, or choose it over here in Structure. Then quite simply, I want to go to this section over here when we're in Edit Container layout and say, Align items to the center. Simple as that. Let's have a look at this. Yeah, I love how that sits in the center of this box. The only issue we have is just with how close the text is here to the image on the right. Let's change the padding. Let's change the padding inside this internal container. Again, I can go over to this section, click on the gray box, or choose over here in Structure. Then over here on the left edit container, go to Advanced. Let's link all of these sections. Then on the right, let's say we want maybe 50 pixels, maybe a little bit more, maybe 100. Let's have a look at that. I think that's a good space in between the text and the image, and this all sits really nicely together. I think that's a great flow from up here where we have stacked images with text below, over to this one where we have the number on the left, guitars introduction text image on the right. That looks great. Just two more things I want to do on this section. One of these is again, just a bit of verse of designer headache thing. I just feel like there's too much space in between the title guitars. And then the text below Open up this container and we go to layout. That is because as a default, elementor adds a 20 pixel gap in between each column and row. Obviously these are in rows, you can see the space between the two elements here is 20 pixels. I think that's a little bit too much. I would prefer it to be ten pixels. Let's type in ten. There we go. Doesn't look like a big change, but from a designer point of view, these are the things that bother us. Now the only other thing I want to do with this is to animate the text that we can see here, the 01 and the guitars information. As people scroll down the page, I want each element to appear in a different way as we're on the main text container here. Let's edit that one first. Let's go up here to Advanced, then let's go to motion effects. This is where you get to choose what the entrance animation is for this container entrance animation, meaning when people first get to that part of the page, this is how it appears. It's set to default at the moment, which is basically nothing in this dropdown menu. Well, you've got a lot of different options here, some of them are a little bit crazy. If we go down into this one, attention seekers banks, that's not too crazy. Flash, but then you get things like head shake, Jello, that is crazy. All I want for this one is a simple fade in. Let's scroll up to the top and say fade in. And that's all it will do is someone scrolls down the page, the text isn't there, and then it fades in. You can play around with the speed at which this happens. In this section here, animation duration. It's automatically set to normal, but I felt that was a little bit too fast. If I choose fast, well that's super fast. I want it to be set to slow. I like that. I think it just takes an extra second just to appear. That's the animation I would like for that section, but I want something slightly different for the 01. Let's select that container over here in Structure again. Go up here to Advanced on the left hand side and go to Motion Effects. I want for this one is I want it to appear from the side of the page. As this one fades in from a static point of view, I want it to slide in and appear. Let's go to this drop down menu. Here we go. We have other fade in options. We can say fade in down. Where it drops down like that. Left, right up. I think as this element is on the left hand side of the main text, I want it to fade in from the left. Yes, I like that. Again, a little bit too fast. Let's change it to slow. Now we have different fade ins for each of these. Let's save this draft, then let's preview the changes just to see how that would look for visitors. This is our main opening page. As a user scrolls down, they get to this section and there we go. Let's just reload that one. Like that, guitars and the text below appears. And then the 01 fades in. It's subtle, but it's another way to get attention from your visitors to your website. Really draw their attention to what you do as a service. 10. Creative Animated Text: If you have followed all of the lessons so far, you already have a very cool looking website. We have this cool hero, then this great little introduction section with the sliding images. Then the start of our About section with 01 guitars. What I would like to do now is set up 0,203.04 I'm going to do it in a slightly different way to what we have here. I'm going to show you a cool text animation tool that you may not have seen used elsewhere, but will look really cool on your website. Let's go back to the editor. Scroll down here. Let's add a new flex box container. Let's choose the 50, 50. Again, 50, 50 is great because it lines up with the split here between text and image. However, for this one, I don't want to make it full width, I want it to be boxed. We'll keep it over here in the layout section as boxed. And 1,140 pixels. What we have inside this main container is two subcontainers. For each of these, I'm going to set up a minimum height in pixels. I would like it to be a minimum of 500 pixels time. I'd like that to be on both containers. I'll just right click and copy this container. Go over to my other container, select the gray box, and right click paste style. That just means the minimum height is automatically change, 500 pixels. Now what I want here for section two, section three and section four is similar to what we have here, where we have an introduction image, a number, a title, and some text running below. Now to split up the display here on this one, we have text on the left, image on the right. I want to do the opposite here. Let's start off with the image on the left. Let's click to Edit Container again. Click on the container or choose it over here in your structure. And then go over style back. We're going to use a background image here, you'll see why in a bit when I start adding the numbers. Let's choose classic, choose image. I'm going to go for three different sections. In this second about section, I'm going to talk about the records that we sell, all the vinyls. I'm going to talk about live shows and then I'm just going to talk about our overall old school vibe that you get by coming to our store. The first one I want to look at is vinyl records. I'm going to add this image of the girl searching through some vinyl records. Let's select that again, the usual settings over here in style. On the left position, center, center, repeat, repeat, and display size cover. Again, that just automatically fits the image to the container regardless of whatever the ratio is. If it's a square image, if it's three by 24 by three, it will still fit in here and it is all centralized, which is great for this image as the girl is in the center of the shot. For the column on the right, I'm going to add a background color again. Choose a container over here to style classic. And then I'm going to go color, I'm going to use our secondary color, the gold. But I want to do similar to what I did up here with the red and do it at a lower opacity. Click on the color itself over here, come to the color picker, then drag this one down to a level that you're happy with. I think quite light, it's gone to one. I like that. I think that looks cool. Now what I want to do is put the text over here on the right. And to ensure consistency, I'm going to go up here and I'm going to copy what we have. I'll copy the title Guitars and I'll paste that in here that ensures it is the exact same size and it's H two again, I'm going to call this one records. Then I'll do another copy of the text here and paste that below the Word Records. Once again, I have copied the text that I have stripped the HML from, so I'll paste that in. Now, the display of this. Quite right, the way it's all set up here in the corner. I want it to be centralized. Again, I'm going to centralize the content of the container. Click on your container, possibly over here in structure. Go to Layout, and then let's center the content that way. And center the content that way. That has pushed everything to the center of the container. The only thing I need to still centralize is this text in here. I'm going to click on the Text Edit Text Editor, go to Style, and then the alignment of this text. I want that to be centralized. That looks great. The only thing is, again, the text is a little bit close to the edge here. I'm going to change the padding on this container. Click on your container, choose Advanced. Go to your padding. I think maybe a 50 pixel edge to everything should be fine. These have all been linked, so let's put that in at the top and the bottom as well. That's fine because we have enough space here. It just means if someone is viewing the screen bigger, there will still be an even space of top, bottom, left, and right for the number however. Well again, I'm going to go up here and copy this one. What I want to do is paste it on top of the image you can see here. That's why I've chosen a background image for this one. Again, I'm just going to click on the container or click on the gray box up here. Then paste inside here that is dropped in the number 01. Let's change that to 02, then let's just make sure the text is centralized. Then inside the container, again, I want that to all be centralized. Let's go layout, send to the content, to the, everything is centered. Now, however, this text, well, two things I want to change here. First of all, I can't really see the girl behind it. Let's edit the text box. Click on your pencil icon here. Let's go to Style. Let's go to text Color. Click on the color icon to the right. Again, let's just change the opacity of this. I'm going to drop it down now. That looks really cool because we're seeing a number, but we're seeing it on top of the image. Something like that works really well for a number. Number is very clear, you wouldn't want to do a long part of text like that because it might not be viewable. But for something like a number, that's just an indication of what is coming next. I've dropped that down to 73 there. I think that's fine. The only other thing I want is I want it to fill more space. Let's go to typography. Click on your pencil icon here that's currently set to 200. As I said earlier, that is the highest you can go with the slider here. But let's put it up to maybe 400 pixels. Yes, that looks great. I absolutely love that. I think that is a very bold statement. It tells visitors they are intersection two of the about section, but I can still see the girl below and see what she is doing. Now the only thing I want to add here is animation for the title where it says Records Again, let's just click on the heading. Choose it over here in Structure, or click on the pink icon. Then let's go to Advanced, go to Motion Effects, then let's just do a fade in. Let's do a fade in down. I really like that. However, this is where I want to show you something slightly different. There's a very cool, quirky way of making a title animate in. As users scroll down to that part of the page, what I want to do is separate the title into separate letters. The letter, the letter and the letter C, and make each one of them animate in a different way. Let's edit this title and change it just to R. I have chosen the heading, and I will go over here to Content and change that to R. Then what I want to do is duplicate that one. I will write the click and I will duplicate. And I want that to be an, the only issue we have here is inside this container. If I go to layout, you will see that direction is a column that is vertical. But I need the letters are to sit next to each other to run horizontal. If I was to change the direction of this container to horizontal, well, they do sit next to each other, but now they sat to the left of the text, and I want them to be on top of. Let's change it back to vertical. And what we're going to do here is add another subcontainer inside this container. Click up here on a element, then drop it in here. When you see the pink line, drop it in above the regular text. What I want for this container is the direction to be horizontal. Then I've already created these letters. Let's just drag them into this container. Click on the icon and drag down in here till you see the pink line. And then do the same with the E. Or another faster way to do this is to use the Structure menu over here. Because I know that I want to take this heading into this container, so you can drag it down there, then it's done it in the wrong order. Let's move that one below this one. It sits like that. That looks great. However, I still want it to be centralized. And also I need to play around with the space that's in between each element. Here, let's go the container. This subcontainer, again, make sure that everything is centralized. Also. Let's just play around with the gaps here. Again, the default is to set them to 20. We changed it to ten earlier, didn't we? I still think that's too big a space. Let's just change it to zero. There we go. Now let's just make sure we have the whole word records. Another fast way to do this, come over here to your structure. Choose your last letter and then duplicate that. Then over here, write in the letter you want it to be. Do that enough times until we have spelled out the whole, that's the wrong letter. Now that all says records. Now the reason I chose to make this into separate letters is because I want slightly different animation on each letter, or at least on each other letter. If we have a look at what we've got on the R, click on your R, Go to Advanced. The motion effects. There was fading down. Now let's go to the second letter, and then let's change that to fade up. Then fading down, D, fading up, down. D, up. Now let's save this draft and then take a look at the preview again to see how, how that works. As we scroll down, we see the animation there, and then this is the animation there. Let me just reload that one for you and you'll see the way the word records appears like that. I think that looks really cool. Now let's just go back to the editor. Play around with the size of everything here. Now that we have this whole 02 section set up, we can duplicate that and do the exact same thing for section three and section four. Now just a few designer edits. This is again the way my designer brain works in terms of spacing and sizes. The first thing I want to change is just the space in between the title records and the text below. Let's go to the main container that this sits in, this one here. Then let's just change the gaps in here again to ten. There we go. Now the only other thing I'd like to do here is just make the word record a little bit bigger and a little bit bolder. I'm going to change the size of the typography. Let's just start with the letter R, then let's go to style and typography. The size again, it's automatically picked up whatever we set for the H two, but we can manually change that in here. Let's maybe say 45. Yes, I think that's a much better size. Now, the simple way to change all of the letters here to the same size would be to write, click, and to copy and to paste the style. However we want to avoid doing that on all the letters, because if we do that, it will also past the style of the entrance animation. As we have some that are fading up and some that are fading down, we just need to do it on every other one. Let's go from R to pay style, then from C to pay style, and from R to pay style. That actually looks quite cool, to be honest, if you like that. From a design point of view, keep it that way. But I just want consistency here and make the word records a little bit easier to read. Let's click on the E. And then go up here to style typography. Make sure that is 45 pixels as well. Copy that one and paste that to the O and the D. There we go. Now I'm very happy with this section. I think this works great and works really well. Coming down 01-02 it's doing the same thing. It's listing all the things we do in the company, but it's done in a slightly different, quirky, cool way. By doing that, we will keep everybody's attention further down the page. But I feel we duplicate this exact style for number three and number four. That's very easy and very fast to do. If we just duplicate the main holding container, there we go. I duplicated that down there. What I will do is make this one number three and then change the title and change the text below. Just one thing that's bothering me here is let's hide. The panel is just this little space in between each one as we're inside the same section. I want no space. I want them to be touching each other. That's again the default settings that element or has in terms of padding a margin. Let's edit this container at top, click on your dots at the top. Come over here to Advanced and change both to zero. Yes, there we go. That's perfect. Now, there is no space in between the two. The only thing I do want to do here though, is play around with the style here. The problem is because these are both using the same gold color, they merge into one that you don't get the same separation as you would get if there was a gap. What I'm going to do here, it's another cool design thing. I'm going to switch the two containers around. Let's go to this container and as you can see, inside the main holding container, two subcontainers, I'm going to grab the second one and move it up to be the first one. There we go. Now how this works is I go 02-03 and then 04 will follow the same way as the one at the top. That would just be a real nice split of image text, image text, image text. Let's update first 03. This one is going to be about live shows. Choose your container and then change your image for live shows. I guess this photo of the dude with his guitar. Select that because we've already set up the position, the repeat, and the display size for the one before. We don't need to do that again, that looks really cool. First of all, let's just add in my copy text in here. It's about live performances. Then I need to change this to say live shows. That all has to be done manually. So let's go in here and write out the word live shows. Now a couple of problems here. First of all, there's not enough letters. Let's duplicate a few letters here. I need two more. Let's duplicate these two, change them to W. And by duplicating that letter, it just meant that the animation is now wrong on the W. Let's just edit that heading. Come up here to Advanced, and change it to the opposite. That should be fade up. Now they all line up correctly. I guess the other thing is well, live shows could be a single word, but I'm treating it here as two separate words. I need a little space in between the E and the S. Very simple to do that, let's select the Go to a. Unlink the values together, and then put a little bit of padding on the right hand side of this letter, maybe ten pixels. There we go. That works perfectly. Now let's just duplicate the very top container. Right click duplicate. Obviously, that's dropped it in above number three, but I'm going to select the dots here and drag it down to go below it. There we go. You'll now see how the sections flow from one to the next. By splitting them up like this, you're getting people's attention a lot better. Let's edit this last one down here. Let's make that 04 then. This is going to be the old school section. Let's container go to style choose image. I want this image of cassette tapes. That's very old school. That looks great with a 04 on top. I've copied my text. Let me paste that into the text editor. Then I need to change this one to say old school, same as we did above. Manually change. Then again, let's just duplicate this last letter and make that an L. And make sure we change the animation to be the opposite direction. Fading down. Change that to fade in up again. Old school. That could be a single word, I'm not sure, but I want it to be two separate words. Let's select the D again. Go to Advanced. Unlink the values, and put in another ten pixels. Now that looks brilliant. Let's save the draft, and then let's preview the page. Let's scroll down. We go into the slider section, Then we have the animation of 01 guitars, and then as we slide down here, two records, 03 live shows, 04 Old School. That looks really cool. The best thing about it is the animation doesn't start until a user scrolls down into that section. Rather than records, live shows, and old school all animating at once. They animate when a visitor gets to that part of the page. This is looking really good. Now if you have followed all of these lessons, you now have your hero, your introduction, and your full about section saying, we sell guitars, we sell records. We're great for live shows and we're very old school. 11. Customer Testimonials: I'm just going to show you now how to add three more parts. First of all, the last section of the page will be some customer testimonials. Then we're going to take a look at the footer and the header, both of which are important for every website. Let's just start off with the testimonials. That's very easy to thanks to an element or widget. Let's set up a new section as a grid. And I'd like that to be three columns. Then let's just make sure we have a margin around this one up here. Edit grid, Advanced. Unlink the values, and let's just say 100 at top, 100 at bottom. Again, just same space that we have between the sections elsewhere. Then let's go up to add element type in testimonials and then drag that in to the first column. This is all very easy to set up. I'll just show you the first one, and then what we can just do is duplicate that for the other two. Let's just start off with the first one. Let's start with the image first, I have images of the three musicians who have rated our store very highly. Let's start off with this guy, his name is Jimmy. I've copied his comment. Let's just past that one in here. The experience is always great. The sales team is always very helpful and always answering any requests. Thank you Jimmy. Now we just need to add his name in and maybe just change the style of what we have around here. First of all, let's go down to name. The text color here is red, but I think I just want that to be the regular text color then title where it says at the moment, designer, again, I just like that to be black. I think that just looks nice and clean. If you want to play around with this yourself, try some different colors there. Try your primary secondary colors. Feel free. Let's just go back to content. Let's add in his name, Jimmy Hendricks title. Well, here's a guitar player. Isn't as simple as that really. Let's just duplicate this one twice. That already looks really cool, but obviously we need testimony from two different people. Let me just go to the second one, edit that, Change the image. This guy here he is called will drop him in. Copy his comment in change it to guns and roses. Thank you. And then for the last 11 of my favorite musicians, this guy Wolfgang. Wolfgang Amadeus Mozart. What is Wolfgang said about? Let's paste that one in. Wolfgang has said we are an excellent store with fast delivery and very good service and attention to customers. Thank you Wolf. Let's just put in Wolfgang here and he is under his title, a classic musician. I think it just needs a little bit more space in between each one. Let's just go and edit the grid again. Let's go to layout again. The gaps have been set to an automatic amount of 20 pixels. Let's change that to 40. That's just added a little bit of extra space. Maybe 50. There we go. I think that's just better space in between each one. Now they all line up perfectly at the bottom. Yeah. As simple as that. It's that easy to add in testimonials. I think that's a great way to run through your page that you get into the about section. This is what we do and these are customers who loved us. 12. Website Footer: Now the main section of the website is complete. We're going to look at two last parts, and that is the footer and the header. Now the way this would normally work inside elementor is we would go up here to the icon and we would choose the theme builder. This means that we can go in here and we can make a header and a foot. That means that that will appear on every single page within our website and it will be identical. However, we only have a single one page website Anyway, the other problem is this is a pro feature, so it can't be done in the free version. Let's just close this one and go back to the editor. Now we're just going to create a foot the same way that we create everything else on this page. Click the plus icon. Let's choose flex box, and I think double column. What I want here is a map of the location of the store on the left hand side, and then just more information, contact details, phone number, e mail address, that thing as this is the end of the page, I want to finish it off in a very bold way. I'm just going to make the entire container, the background of the entire container, a solid black edit container style background type. Then in terms of our colors, let's choose color. There you go. That's filled the entire background of that. If I go back, you can see it sits down there. Obviously, there's nothing in there now. But it's just a quite nice way to finish off the page. First thing I want to do is drop it in a map. In this section, let's go up to add element. Again, type in map. Google Maps is what we're going to use here. And just literally drag that into your first box. It is automatically set up to show this location. It's the London Eye, which in London. However, we need to change that, because our music store is here in Sydney, and it is on one of the main streets in the center of Sydney that's called George Street, and it is number 100. I'm just going to delete that. And then I will type in 100 George Street, Sydney. And let's see what happens. Help to I spell Sydney. Right there we are. Now it's showing the map to 100 George Street. Users can come here and click directions if they want to know how to get here. However, it's quite far out. The good thing about this is you can play around with the zoom just to get an idea of where it is. As you can see here, we are very close to the water and very close to the Museum of Contemporary Art. You can also play around with the height here, if you want 400 pixels, I think that is great. Perfect. Now over here on the right hand side, let's drop in the text. Let's start off with a header. Come up here to add element heading. What I want to say here, check us out. I think that should be white. Let's go to style color, drag the color picker into white. That's great. Then let's go to add element and then add the text editor below that. Again, I've just copied all of my text to go in here that's displaying the usual way, but most of the text is in black. So let's go to style and use the color picture to change that to white. Also because it is white text on a black background. I think the topography just needs to be a little bit older. It's picking up the standard setting that we have set here which is just the normal weight. Let's change it maybe to semibold. Yes, that's much better. As you can see, the E mail address that I put in here appears in red. That's because it is a link that may happen automatically when you write in your e mail address. But if not, come back to content highlights the text that you want to turn into a link. Let's just say I wanted to do this address as a link, I highlight the text and then I click Insert. Link. In here I could put in any website address, Facebook.com and then apply. It just means that when people click here, it will take them through to Facebook.com But I do not want that undo. This is the one that we're really looking at, This e mail address. As you can see, it has gone in automatically with the e mail address. Before that it has the words mail to colon, and then the e mail address. This is what you need so that when users look at this and they click on that, it will open up their e mail app. That all looks great. Just one slight change you want to make to this, which again is the designer thing. I'm going to go into style, go into typography. I think there's too much space in between each line. Let's just drop the line height to 16. That's better. Then just one last thing here, or two last things. This container, I want to be centralized. I also need a bit of space, a little bit of padding to the left of this one. I will come in here to turn off link values together, and then I'll add an extra 50 pixels to that side. That looks great. The only thing the whole container needs is a little bit of space at the top and the bottom. Let's click on here on the main container. Let's go to Advanced, Then let's go to padding and unlink the values. And then say at the top 100 and the bottom of 100. That's just added some extra black padding around everything there. Let's just see how this looks. This is all looking perfect so far. Scroll from the hero into the introduction, into the multiple about sections, testimonials and then the foot. That's great. Everyone has read through the page. They're impressed by what we're offering. They're loving all the testimonials and now they know where we are located so they can head over. 13. Website Header: Okay, now let's add the header to our website. Header may be one of those sections that you want to start off with. It may be one of the first things that you do. I personally prefer to leave this one til the end because then I've already decided on the style and the structure of everything else on the site. I know exactly what typography I'm using and which colors I'm using. To add this in, what we need to do is add another section above the hero. Let's go up here, Click on this, then let's add in a flex box container. What I want for this header is a pretty standard set up the way I have the logo sat on the left hand side and then the nav bar, all of the links and maybe my social media buttons to the right. I'm going to choose one that is one small column on the left and a bigger one on the right. First up, what I want to do with this whole container is choose a minimum height. I'm going to go over here to Edit Container, Make sure I'm in layout, and I'm going to add a minimum height in pixels of 100 pixels. Also, I want to go to Advanced. I just want to change all of these to zero. There's no empty space around anything there. The height of that is good, but as you can see, it's in a white box that just sits above the hero. I don't want that. What I want to do is use a white logo and white text to sit on top of the hero. How do I do that? Well, as you can see, we have set up this container with a height of 100 pixels. What I have to do is choose the container below the hero container and change the margin on that. Let's go over here to Advanced. Let's turn off the linked values. Now normally what we would do in this section, if we wanted to add 100 pixels above it, is right 100. That's what would happen. You'd have an empty space of 100 above it. But I want to do the opposite of that. I want -100 You're going to write that in. Put a minus sign next to it. And there you go. Now the container above it sits on top of it. Yes, you can see a little bit of a white space, but let's just click on this one. You'll see that disappears. That's just for our editing purpose. You can't see anything yet. But now the extra container that we've added in sits on top of the container below. First thing I want to do is work on the first container inside the header container. Let's come over here to structure. Choose your upper container, choose subcontainern. First thing again, let's just go to Advanced and change all of this to zero. There's no empty space around it. What I want to do is drop the logo in here. I all come up here to add element, drop in an image. At first we get the gray box. Let's choose image. What I want to do in here is add my logo again. Now we've already used this one, which is the more vertical style. I want the horizontal style the way I have the icon to the left and then Wolfgang Music text to the right. Let's choose that. That has dropped in. However, where did it go? Why can't I see it? The reason you can't see it is because the container below the hero container is actually sat on top of the header container. All we need to do is tell elementor that the header one should sit above it. Come over here to Structure. So container, come over here to Edit, Container, click Advanced. The section we are looking at here is called Z index. What we can do in here is put in different numbers, meaning that the higher the number, the higher up it will be in the layering system, as we haven't numbered any of the other containers below, A simple one will be enough in here that has brought all of this to the front. Let's go back to this section. My logo, well, it's too big. I think the container that it's in is taking up too much. I think I need a little bit more space for the container on the right, over here in structure. Go to your second container, then come over here to width, then let's make it a little bit bigger. Maybe 75% as you can see, that's made the logo a little bit smaller. In fact, that's still too big. Let's go to 80. What we're doing here is we're just allowing a lot more space for a lot more content in that section. However, I still feel the logo is a little bit too big. What I'm going to do is select the image either here in structure or by clicking on it. Then I'm going to go to Style over here. And then I'm going to change the width of the logo. As you can see, I'm changing the percentage sides of it. I think 50% is enough. The only issue is it's just sat in the middle of this container, Now I want it to sit to the left so everything aligns. Let's go back to content and then just align that to the left. Also, I want it to sit more centralized to this 100 pixel height container. Let's just go to the Subcontainer it is in. Click on that, go to Lay Out, and then center the content. Now if I press the arrow, there you go. You can see how that is sitting. Now at the top of the page, This is all perfect. No empty white spaces. A perfect size logo just sat there on the left hand side. Now all I need to do is put my links and my social media buttons on the right hand side. Let's choose the container over here on the right. Choose that in structure again, let's just in here. We don't always need to do that, but as you can see, when I did that, it got rid of the white space at the top. It just ensures that in the back end there is no extra spacing that you didn't know that was there. That may mess up the view for your users. Next up, I want to add a nav bar, that's a navigational bar to the right hand side column. Now the way these things normally work on websites when there are multiple pages is it will send you to another page. But as we have a single page, the way these buttons will work is they will take you down to that part of the. You will have seen this elsewhere on single page websites. What we need to do is add buttons for each section of the website that we want users to visit. We're going to choose guitars, records, live shows, and old school. This is very simple to do. Let's go over here to the plus add element. And we want a button. Let's just drop our first button in here. It's come up as a little blue box. Click here on it. Well, first of all, we want this one to say guitars. Then what I want is basically no blue box or space around the word guitars. Let's go to style, then let's go in here to normal and hover, obviously for buttons, you always have a normal version as people see it. Then when you hover over, it can often change the color that you see at the top. What I want to do with the normal version is take out that blue color. I'm going to click on the color, basically drag this one down to 0% Now it just says guitars on its own. Then the other thing is just the space that was around, which is what you need with a solid colored button below was going to change that padding to zero. There we go. The only thing I do want though, which I think works very well on websites, is I want something different to happen when a user hovers over it. At the moment it's in white text. I'm going to say when a user hovers over the text, it will change the text color. Let's choose one of our global colors. Let's choose secondary. They go, as you can see now just below the gray box, and I hover over the word Guitars, it goes gold. What I want to do is just duplicate this button three times for records live shows old school. So let's go over here to the structure. Right click on the button, Duplicate, Duplicate, Duplicate. Now obviously as you can see, they're all sat on top of each other. Again, that's not working perfectly. Let's go to contain the subcontainer they are in. Go to layout and change the direction to row horizontal. Now they all do say guitars. The other issues you can see is they're all sat there at the top of the box. What I want to do is go down here to align items and make sure they are aligned to the center. Then the other thing is they sat in the middle of the page. But to get balance, I want the logo to be on the far left. I want these buttons to be on the far right. Let's go to justify content between start, center and end. Let's choose. And you can see if I move this down, they are all now sat there. And that looks perfect. That's your standard display for a nav bar. Okay, now let's go back. Let's change the name of each one of these buttons. The first one, the second one should be records. Third one live shows the last one should be odom. Only last thought there is, I think each button is a little close to the next one. Let's go to the container again. Gaps and columns is automatically set to 20. If I want to put that zero, the be right next to each other, I'm thinking maybe 30. 30 looks good. I think that just gives a bit more breathing space in between each one. Now what I need to do is say where each button goes on the page. If I click on the button and go to content, as you can see at the moment, the link is just a hash tag. What we need to do on this page is set up an anchor link. The way that works, one clicks on this button, it will take them down to a certain part of the page to add an anchor link. Come up here to add element, type in anchor. Then let's scroll down to the section where you would like this anchor link to sit, so that when someone clicks on guitars, it takes them to this section. What we will do is pick this up and drag it so it sits above the word Guitars that has dropped in this little gray box. But don't worry about the way that looks because that's not actually there. That's hidden code so that on the arrow you'll see it disappears. Users will not see that. What we need to do is give this an ID. That means that we can tell the button at the top to take users to this ID. Let's just write in the word guitars. Simple as that. Then let's scroll back up to the top. Choose the guitars button, leave the hash tag there, Write in or paste your word Guitars. Now let's save this, preview the page, and you'll see how it works. When a user comes to our page, they hover over these, they go gold. If they click on the one they want to view, if that is guitars, it will do that. It takes them down to the guitar section. The only issue I see here though is it's literally taking them to that word, guitars. The problem there is because that text is centralized with here. When it took users down there, it cuts off this image and you can't see the girl's face. So what I actually want to do is say, can you take users to just above this box so they can see everything in one go. Let's go back to the editor. Let's move the anchor. What I actually want is for it to sit above this box. If I try and drag it up there, problem doesn't actually have anywhere to go. Let's leave it there for a second. What I'm going to do is create another empty space above this container. So I'm going to click Add Container. Click the plus O box and just choose the single. Do your standard thing inside this container. Go to Advanced, put zero in here and zero in here. Then drag this anchor that you've already set up into this section. Now you can see where that is sitting is above this section. If I'm to save this preview, the page, you'll see what the difference is. I click on guitars, it takes me there. It takes me to the little bit of space above this section, so I can see the whole section in one go. Perfect. Now let's do the same for the three other sections. Let's go back to the editor. As that anchor is working perfectly, we can just come up here and do a copy of this container. Then let's scroll down to this point here. Click the plus and then paste this container in. That has dropped in the exact same container that we had for guitars with no empty space around it. Then let's go into the menu Anchor and change that one to Records. I want to sit above Records, want to sit above live shows, and want to sit above Old School. Let's just duplicate the one we have here twice. And then drag them down so they sit above each one of these sections. Again, because we have set up 0% margins and padding, so there will be no empty space in between each container. We had records. Let's go and edit this one here. Live shows and make sure this is all one word, spell it correctly. Same with the old school one here. Let's go into this one and change that to old school, all one word. Then we're going to go back up to the top of the page, to the now far and make sure all of these buttons are set up the same way. In the first one we want it to say hashtag old school. This one Hashtag live shows this one hashtag records and therefore that one is Hashtag Guitars. Let's save the draft, preview the changes now you'll see when I click on any of these guitars, takes you there, Records, takes you there live shows, takes you there an old school takes you there. That is perfect. And as you can see here, these two things, there is no empty space, Not a single pixel, not a single line of white space in between each one. We have the logo set up, we have the nav bar set up. Now we just need to add the social media icons. So let's go back to the editor. Okay, to add social media buttons after than a bar. Let's go up here to the plus to add element, type in social icons. That's what we want and we want it to live after old school. Let's move structure down a little bit. By default it drops in these three icons. Facebook, Twitter, Youtube. They've come in in this exact style. That's not how I want it to look because I don't feel that represents our website. I just want them to be white logos. Also, I don't have a Twitter page or Youtube page. I just have Facebook and I just have Instagram first up. Let's delete the Twitter one by pressing the X. Same with Youtube. Then add item, comes up with a word press logo, I don't want that hover over the icon. Click on that, then it shows you the icon library. And these are the many different options you can have for this one I just on Instagram and there it is, that click Insert. Now we just have buttons for Facebook and Instagram. First up the shape around what it says. Rounded, if you can see that there. But it's like a rounded square. I just want it to be a straight circle. Let's go shape and choose circle much better. My only other issue here is that they're too big basically. Let's go to style, then let's go size and play around with the drag bar here. I think 18. I think that's big enough to be honest. The padding, that's just the padding around the outside of the icon. Now let's go back to content, then let's click on Facebook. In terms of the color, well, I don't want it to be the official color. I want it to be a custom color. Therefore, I can choose the primary color and the secondary color. Primary color. Well, let's make sure that that is white then. My secondary color, I want it to be our text black. It looks like that. Very same for Instagram. Click on Instagram color, custom primary color white. Secondary color black. Now we need to do is just type in the link for Instagram. I'll just paste in my URL. The other thing we want to do, click on Link Options and then make sure opening new window is chosen because that will open up a separate window for this one. Meaning people don't really leave your website, they're looking at two separate pages. Both are related to your company. Then Facebook that in here ensure that it is opening in a new window and that's it. Now, save the draft and preview. Here we are. The header is working perfectly. We have the company logo, we have the Navvar with all the anchor links, and we have links to our two social media pages. The desktop version of your website is now fully complete. You have your header. You have your hero. You have your introduction section with the sliding images. Then you have the two different versions of the about section with two different versions of animated text records, live shows, Old school. You have your three testimonials from the three biggest musicians in the world. And then you have your footer with the map and the information for people to find you or get in touch with you. This all now looks perfect. The desktop version of your website is complete and it's looking great. Now we just need to make it work on tablet and mobile. 14. Responsive: Tablet: You now have a website that looks perfect and works perfectly on Desktop. However, we need to look at how it's going to display on both tablet and mobile devices. This is very easy to edit Elementor come up here to the top bar. And you can choose between Desktop, tablet, or mobile editors. It's very important to do it in this order. Start with desktop, then go on to tablet, and then onto mobile. Mobile inherits the changes made in tablet, and tablet inherits the ones made on desktop. You should always do it in that order, otherwise it will break your website. Now we have it perfect on desktop. Let's take a look at tablet. When we come to the Table Editor, you'll see that everything is still there in the same position, but everything doesn't quite line up correctly. If we scroll through, this hero looks good. It's just this navbar, the icons here and the logo there are too close to the edge. Then as we scroll down to this section, again, not enough padding around the edges of this section, so it's a bit of a weird display with the text running this far down and the image being set in there. This one does look pretty good. Again, just needs a little bit more padding. Obviously these things that you can see, the anchors, they're not really there. This one doesn't quite work. Again, with the alignment, it may be better if the number was on top of the word guitars in this display. The well, they're actually very close. I think just the numbers are too big there. That's probably the only change we need on this one. But I think that works well as double columns. Testimonials works as three columns because it's a short amount of text. Just need to work on the padding. And same here, the padding. There's not a lot of big changes to make, but I'll just show you a good way to do this, a very fast way to do this. Let's to the top. The main problem we have here is just the padding either side of this container, the nav bar, the header. Let's click on the dots here and edit the container. All I want to look at here is padding. Let's go to Advanced, and we go into padding. Padding here is set up at zero for top, right, bottom, and left. What I want is an equal amount of padding on the left and the right. The pixel size I choose here should be used on every section below just to ensure consistency. First of all, let's unlink the values. I'm going to choose 30 pixels to the left and right. You can see when I click the arrow, that's enough space between the two. Just gives it a bit more breathing space then this section over here, this does look good. I think the logo is just a little bit too small. Let's click on the logo. Come over here to Edit Image, go to style. Let's just increase the size of it. The percentage, let's put it up to maybe 75% See how that looks? Maybe a little bit too big, maybe. I think that's a good balance between logo navbar and social media buttons. Cool, that hero section that's working for me now. It still fills the entire page as we selected the main hero container to be at a 100% vertical height. So as you can see, it goes directly from top to bottom this section. Okay, we have a bit of an issue here in terms of alignment. The text goes all the way down here, and then there's a big empty space at the bottom. First up, let's just take a look at the padding. Let's click on the dots here again for edit container. Go to Advanced, unlink the values, and let's go 30, right, 30 left. Again, that looks good. However, none of this is lining up quite right, the wolf gang, that isn't really fitting, it's going over the image and obviously we've got this big padding space on the edge here. What I want to play around with here is changing the size of each of the internal columns the way we had it set up before. It works well as maybe a 20% on the left and 80% on the right. Let's try a 50, 50. Let's choose our first internal container. Click on Edit Container, or you can choose this in your structure. Then let's go over here to where it says width. It's currently set at pixels, change that to percentage, then drag this over to 100% even though I only want it to fill 50% of the space, we still just need the width on tablet to be 100% Then come over to the other container and do the same thing there, 100% Now that's a lining up perfectly. There is just a little bit of extra empty space at the bottom here. That's just because of the padding that I have on the first column. Let's go back to the first container. Go to Advanced, take off this 75. There we go. Now that looks almost perfect, however, it's still too close to the image on the side. Let's maybe add in 25 pixels that added it everywhere. Let me just delete that, unlink your values, and change that to 25 pixels. That almost looks perfect. I think there is just one issue still. I don't think that little line needs to be there on tablet. I think it would look better if the text was a little bit higher up. Let's go back to the editor then. I'm going to select the divider. Select it here in Structure, or click on it. Go to Advanced, then scroll down to the word responsive. What we're doing is we're hiding it on tablet. If I click that one, you can see it disappeared. We have the light lines there. But if I now go to hide, the panel disappeared. That looks perfect. Okay, let's move on to the section below. Let's edit the container. Let's unlink the values and put 30 to the right. 30 to the left. That does look great. I just think there's maybe a bit too much space in between this top section and the section below. I think it's fine at the bottom here, just about. But I think these sections should be a little bit closer. Maybe that's because on the upper container, yes, I have a margin of 100 at the top and 100 at the bottom. Let's unlink that now let's just change it to zero. Let's just go back to 100 at the top, and then I think maybe 50 at the bottom. Perfect. There we go. That's a much better display. Now this all fits inside a single page and everything lines up perfectly. Excellent. Okay, let's move on to the guitars section. This looks great. I think to keep it in two columns, it's just the text one over here that isn't quite working. I think that's because we have it set up in a horizontal direction. I want to change that to a vertical direction inside this internal container. Let's highlight this container. Clicking on it. Then let's go over here to direction. As you can see, this icon is changed to tablet. If you want to edit any particular version, you can click on there without having to click up here at the top. But we're working on tablets, so let's leave it that way. As you can see, the direction is horizontal. I want to change it to vertical. Let's just click this. There we go. That actually now fits in a lot better. A few other issues just in terms of the spacing, the alignment. First of all, let's go up to this column and add in some padding here. What I want here is the same padding that I have on the left of all of the upper elements, 30 pixels. I would do it on this internal one, because if I do it on the main container, it adds a white space. I don't want to do it there, I want to do it here. But it's still a consistent depth with all the sections above the. Let's go inside this container, the one that has the 01. Let's just take off any padding that's there, then click on the text, the heading, and change the alignment to the left. That is looking great. Think we need to change the size of this. I think it needs to take up a little bit less space. First up, let's get this container. Go to Layout. Let's choose the main overall container, and then go to Layout. This is what we have. This was it, we set a minimum height of 75% there, let's change that to 50. There we go. That's a much better display. That's almost fitting perfectly. I think maybe a little bit bigger, 60% yes. Now let's go back to this container and ensure that everything is centralized. That looks great. Not a big change there. It just means that we can still see the full image of the girl playing the guitar. All of the text is in. I'd maybe even just take out a bit of the padding next to the text here. Let's go to this internal container, go to Advanced. As you can see, we set that up as 100 pixels link, change it to maybe 50. There we go. I think that's just given us a little bit more space. Above, below, and to the right of the text. That looks great. Okay, that will bring us down to this section. As I said before, I just think big, the number text on top of the images. Let's just go edit heading to style, go to typography. Oh yeah, we said it to 400. Let's maybe change that to half the size, 200. A bit too small, 300. That looks great. I just want to copy that style and paste it to the remaining numbers. Right click. Copy style 03. Pay style 04. Now let's just have a look at how it's all looking. This is looking great. I think that works really well. We still have this section in the white bordered section, this one with the red background. And then we go further down into records, live shows Old school. That looks great. Just a very fast one on this section here. Let's go to Edit container. This one, remember, is a grid. We set up the gaps in between each one to 50 pixels previously. However, I think that's probably too big for what we've got on tablets. Let's change that to 30. Just gives us a little bit more space between each one. Then obviously go to Advanced up here. Unlink your values, 30% 30 pixels to the right, 30 pixels to the left. That looks great. And there's still 100 above and 100 below. Then down here, let's just click on the container again, Just needs padding on the overall container, another 30 pixels. All I've done there is I've just unlinked the values which put it down to zero. To be honest, that actually looks quite nice I think to have the map all the way up to the edge, but let's just give it a little bit of a border around it, maybe 30 pixels all around. Let's link that. Yeah, I think that just gives it a bit more breathing space around the map and around the text. There we go. That was very fast and very easy. What we've done here is we've taken the desktop version of the website and we've edited it so it views perfectly on tablet. But there is one other cool way to check this. Let's just close this. Let's save our draft, then let's preview the changes. What I recommend doing here is if you're using Google Chrome, go into the extension section of the Chrome web store and find this one. The mobile simulator. Just type that in. It should be the first one that comes up. It's a responsive testing tool. Find that. And then the button here will say install into. It just means that at the top here in this is where you have your extensions. When you are viewing the page as it will be viewed by your users, you can click on this one, then it will show you how it looks on many different devices. This is another tool that does have a Pro version that you need to pay for. However, if you just want to use the free version, it's great for that because it covers a whole bunch of mobiles, at least four or five tablets, and then a couple of extra ones there as well. Even an Apple watch series six. The one we're looking at here is the mobile one. We haven't edited that yet. Let's go over to the tablet section and see how it looks on ipad Mini. Well, that looks perfect. Yeah, love it. Perfect. That's still sliding in. The animation is working. Oh yeah, that looks great. That looks absolutely perfect. On tablet, that was great. Ipad Mini four. Ipad four also perfect. Same thing. Ipad Pro 11 also perfect. Same thing. Then a Galaxy, Tab seven. So that's an Android version, also looks perfect on that. It's great if you just go into the editor, get it looking perfect there, but then play around with this extension just to see it is working perfectly on a number of different devices. If you look at something like this, okay, I don't think I'm seeing enough of the girl here on that device. You may just want to go in and play around with the spacing here, because it looks different here as it does on that device. Just use the extension to have a little play around and make sure it works perfectly on all devices that you can view inside here. 15. Responsive: Mobile: Now let's go back into the editor and take a look at the mobile version. Click up here. Now this nav bar, this one looks a little bit more difficult to play with. Let's go to the container. Let's first of all play around with the spacing. Now the padding there is still set to 30 on the left and 30 on the right. That's also good for mobile. Let's keep that the way it is. The main issue we have is just the alignment of it will no longer fit in a straight line. I think we need to stack it. Let's just say we have the logo at the top, then the navbar below that, then the social media buttons below that. This is what I'm going to do. First of all, I'm going to take this container that has both navbar and social media buttons in it, and I'm going to duplicate it. Then I'm going to go into the second version and I'm going to delete all of the buttons that we put in here because they already exist above. Then I will go into this container and I would like the content to be centered. We have two, lots of social media buttons. This first one is only going to appear on mobile. Again, let's click Edit Container, Go to Advanced, go to Responsive, turn it off. Hide it on both desktop and tablet. That just means when I go here, it's not there. And if I click on this arrow, it goes back to how it was previously same on tablet. See it there in the editor, but it's not really there. And you'll see that when you preview the page. Also these social media buttons should no longer appear on mobile. Click on the social media buttons, go to Advanced and hide on mobile. Now all we have is the text in there. Obviously, it's difficult to see where everything is at the moment. But let's just go in to edit this container. Then we have a gap of 30 pixels in between each of the buttons. Let's just quickly change that to zero. Now you go. Now we can see everything together at the same time. Obviously each of those is too close to each other. Let's just say five pixels, maybe ten pixels. I think that's enough space in between each one. And again, just play around with this when you look at it on different devices. You may want to make the text a little bit smaller. Let's just go into typography. Maybe set it to 14 pixels, that's a bit smaller. Do the same on all of this, will come down to whatever content you have on your website. Just have a little play around with that. And if you have a problem getting everything to fit, just send me a message and I'll let you know how to stack it on two different levels. What I also want is all of this text in here to be justified. Basically, I want the content to stretch out to the edge. As you can see, old school, that goes to the edge of the box here, but Guitars does not. I can't left align it or right align it. What I'm going to do is go over to this section. I'm editing the container. Then in justify content, click this one that says space between. Then it spreads it all out. Looks great. Now this is almost looking perfect, that we have the text here and then we have the two social media buttons below. It's just that logo that's just a bit too big. Quite big. In fact, let's click on the image either in structure or clicking on the image. Let's just change the size of much smaller, maybe like 35% maybe a little big 40% then well, it should be centralized. So if I go to Content Alignment Center, now if I click on the arrow, in terms of stacking, that all works really, really well. I have the logo, then I have the navbar, and then I have the icons. The only thing I think I want to do here is make these social media icons a little bit smaller. Maybe space them out a little bit, then I just need to play around with the space around everything here. Obviously, the logo is too close to the top. There's not enough space in between logo navbar. Social media icons. Let's go back into the editor. First of all, let's take a look at these social icons. Let's go to style then. The size is 18, let's just change that to 14 then All I want to play around with is the spacing between each one. Probably this one spacing, yeah. I'll just drag it out a little bit. I'll set that to also to 14. Let's see how that is looking. Yes, that's much better because they're separate buttons, You need to press them separately. Let's the container again. Let's go to Advanced. Let's just change all of the padding to zero. Now what I want to do is add extra padding on top. Maybe 30 all around, to be honest. Let's say if that is at the top, on the right and on the left, let's see how that is looking. That's working a lot better in terms of space. However, there is a white space at the top, we can work on that. Let's also take a look at the overall holding container and change these gaps that is now set to zero. Let's put ten and see how that looks. Yes, that's perfect. We now have ten pixels in between the logo and the nav bar, and in between the social media buttons below, It's just this white space at the top. Why is that happening? It's happening because we've told the minimum height of this section to be 100 pixels. However, it's bigger than that. Now because we are stacking everything, let's click on the main container. Go to Edit Container, go to Layout, change it to 150 pixels. Then let container below the hero container. This one here. Let's change that in Advanced, 2,100.50 Make sure they're not all linked. 150 and then let's -150 and see if that works. That does work. There we go. Now that is perfect, isn't it? We now have a nice empty space. At the top we see the logo, we see all of these Nav bars and we see the social media icon. That looks great. Just two other things that I have noticed here. In this mobile view, isn't the problem in the tablet view or in the desktop view is the position of these two customers and the position and size of the logo. When I go to the mobile one logo is too small and you can't really see the people. Let's just play around with those two things. That is, again, in the main container for the hero, we are on the container, Let's go to style, let's go to background, and we are looking at the image here. Now what we need to do is position. We have the choice of center, center, which is what we had. We can choose center left too far to left, center right way too far. Or the best one we can choose here is custom. Because with that we can play around with the X position and the Y position. Let's play around with this X position and move it a little bit. Obviously, I don't want to move it too far to that side, I just need it to be over here. Let's just say even if it's -200 minus 150. Sorry, 250. There we go. I think that's great. So you can see there's two people looking there and they are looking at the records. So let's now make the logo a little bit bigger. So click on the icon, click style, and here we go. Width, We have it set to 15% maybe go up to 25, 30. Let's see how that looks. That looks great. Now we can see that there are people looking at the items in the store. Our navbar, our header works perfectly. Everything's lined up, and we can see the main company icon. Awesome, let's save this draft, then I've come into the extension, and here I am looking at Apple smartphones. So this is the iphone 13 Pro. Max looks great there. Regular Pro also looks good. Everything's lining up. I can read everything, I can navigate everything. And it's filling the full page for each one that looks perfectly. Any little changes like that that make sure you come into the extension and check it in there first. Okay, back to the editor. The top section is working. Let's see what we've got here now. Okay, what's happened with this section is it has changed it from the horizontal direction to a vertical one that is perfect. I think that works absolutely perfect there. Rather than trying to squeeze in both things next to each other. The title Wolfgang Music and the text sits above the sliding image. Only thing I think I want to change is just a little space on this side of the box, just so the text runs all the way to the edge. Let's click on this container over here on Edit container. Go to Advanced, take off that 25 pixel space. There we go. Not a big change, just means that the text are lined up with the image below. That works perfectly. These ones below, actually, they're already perfect. It's done them automatically stacked anyway. Element or can read what you might want to do on mobile and make that happen automatically. That's great. No work needs to be done there. Now this one. Okay, that's nearly there, but not quite. Stacking it again, as we've done above, that's perfect. I think that works really well. However, the spacing isn't quite right. I can't really see the image below. We need to fix that. Let's go in here. Let's click on the container. Go to Advanced. What we have here is padding of 30 to the left. Let's link them all and make them all 30 there. We just get a little bit more space above the 01 and a little bit of space below the text. Then the only thing I want to do is on this subcontainer, take off the spacing over here on the right. Click on this box Advanced, take off that 50 pixel too easy. That works great. The only thing that isn't working obviously, is I can't see that image. It is there and it is the background of the container. The reason it works before was because we had two columns that were laid out horizontally. Therefore, the height of one of the columns was also represented with the height of the next column. That's not happening now because they are stacked. Let's just change the minimum height of this container. Click Edit container, come over here to lay out minimum height. And let's just play around the pixels here. Maybe 400 pixels, maybe 500, maybe somewhere in the middle, 450. There we go. I'm happy with that. It just means that people, when they come to the guitar section, they'll scroll down, they'll read about that, and then they'll see the girl playing the guitar. Perfect. Now these ones, 02 records live shows 0304. Look, I think in terms of the spacing of all of those, they're actually working perfectly. There's just one obvious problem in here because now that the, I want it to run from 02 into records, then I want to see the 03 image in here. It's very easy to fix. What we have here is the overall main container that has the text for live shows and the image with the 03, they are organized in the regular way. This is saying row horizontal and it's saying from left to right. All I'm going to do is go over to this arrow on the side that says column reversed. And just click that. Then there we go. Too easy. The 03 has jumped to the top. However, the anchor that's still above it, that hasn't moved because we didn't put that above the text. If someone clicks on the anchor when they're on mobile, it will still go to this 03. Let's just see how that section is looking yet. That flows nicely from 02 into records. 03 live shows perfect. As I was saying, that only changed the display or the layout of that container on mobile. If I go to tablets, still the same way it was before. Opposite, opposite. Desktop, same way it was before. Opposite, opposite. You'll notice as I go back to check these ones, there have been no changes at all. As I said, they are inherent in this order. What's done on desktop is taken into table. What is done on table is taken into mobile. No changes that I make on mobile should have any effect on anything on table or desktop. Make sure you do check them because something may approach you. Let's go back to mobile. Nearly done here. Let's see what we've got. Let me be honest, the testimonials, perfect. I don't even want to play around with that. And then this section at the bottom, that's almost perfect, just of the black space around. That is literally just the spacing, the padding over this side and the spacing above checks out. Let's go to that container, click Edit Container, go to Advance. You know how to do all of this now take off the left padding, and then at the top, let's just say 50 there. That was 65 and they're all linked. Did a few things wrong there. Let's unlink those and let's just say at the top was 50. There we go. If you look at that, that's working perfectly. And that was quite easy to fix because we'd set it up a good way in desktop that was easy to edit and then we were able to edit that on tablet nice and fast. Then make the changes that we made, our tablet also appear the same way on mobile. Again, just save it, then let's preview the changes. Let's just see how that is looking. We're already in a mobile version here. Top section, perfect. Scroll it down, Wolfgang. Music Even because this is a thicker phone, it actually spread it out. The words Wolfgang. And Music That looks great. Perfect. Perfect. Perfect. 01 guitars image viewing perfectly. I can see her, I can see the guitar 02 records. Still got the animation on here as well. That has followed over from desktop two tablet to mobile live shows, old school testimonials and then the footer. You now have a complete website. Something that has each section put together and something that works perfectly on desktop, tablet and mobile. Let's make it live. 16. Make Your Site Ready to go Live: Okay, so now we are ready to make your website live. As you can see at the top here, it still says that it is a draft to change that. Just come over here to the right and click Publish. When that has finished, come over here to the left, click on the E and choose Exit to Wordpress. Nothing you need to look at on this page, just click on the Wordpress logo. That will take you back to the pages set up. The page that we're using, Wolfgang Music you now will see is live. It does not have draft at the end of it anymore. One little change we need to make though. This is going to be the home page. 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. We just want to call it home. Let's go update. Then we need to say that this is going to be the home page. Click over here on appearance and customize. Then choose Homepage Settings. You have the choice here of your latest posts or a static page. We want a static page which is going to be Wolfgang Music. That will automatically change. This is all now set up and this is your home page 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: So the test version of your website is all set up. Now if you would like to make it live, I'll show you how to do that in Word of phi and how you can change the domain name. So come back into Word of phi, make sure you're on sites. And then click on the little pencil. I click here to upgrade. As you just have a single site, make sure you choose this option. As we made it very small website, you'll need the small option here. Choose monthly, yearly, whatever you'd like to do. And then choose to update. Then when you have added the credit card details, That's it. Your website is now live. And it's using the URL that was set up when we set up our worried if I can't make you happy with that, leave it that way. However, if you would like to change it, come to hosting and domains. And in here you can add a new domain, but this has to be purchased elsewhere. And it can get a little bit complex, a little bit confusing to set that up. However word, if I have great support. So click on this icon. They may have information on what you need right here. If not, just send them a message and they will talk you through it. Either way, if you want to use this URL or your own personal domain name, that's it. You now have a live website. So click on this one. You will see your full website fully live and you can show everyone around the world. 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 and you know what, I want to see this website, you can load it up here in the project section below. If you pop it in there, I will 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. When you have finished the class, it would be great if you could leave me a review. Come in here to the review section and click Review. This is great. As you can tell me what you really liked about the class, but also what can be improved. And that will help me edit any part of the class I think will be better for my next customers. And make sure you click on my name below to see my full skill share profile. In 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 and 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.