Build & Design a Professional WordPress Website - Elementor: Templates & Customizations | Part 6 | Robin & Jesper ✓ | Skillshare

Build & Design a Professional WordPress Website - Elementor: Templates & Customizations | Part 6

Robin & Jesper ✓, Teaches Digital Marketing

Build & Design a Professional WordPress Website - Elementor: Templates & Customizations | Part 6

Robin & Jesper ✓, Teaches Digital Marketing

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
11 Lessons (2h 13m)
    • 1. 92

      18:48
    • 2. 93

      14:54
    • 3. 94

      14:29
    • 4. 95

      13:59
    • 5. 96

      12:33
    • 6. 97

      7:48
    • 7. 98

      12:49
    • 8. 99

      13:38
    • 9. 100

      9:44
    • 10. 101

      6:40
    • 11. 102

      7:48
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

62

Students

--

Projects

About This Class

Welcome to the fifth part of "Build & Design a Professional WordPress Website - Elementor: Templates & Customizations".

In this Part of the course we're going to start working with Elementor to create a beautiful WordPress Website. 

We're going to go step by step and learn....

Design: Start Here Page - Template Editing
Design: Start Here Page - Adding Content
Design: Start Here Page - Templating Your Content
Design: Courses Page Part 1 - ATF
Design: Courses Page Part 2 - 2 Column Design
Design: Courses Page Part 3 - 3 Column Design
Design: About Page
Design: Resources Page
Design: Resources Page (Part 2)
Design: Contact Page
After Designing

and... Remember to sign up for Part 7!

See You Inside the Course.

Love

Robin & Jesper

Meet Your Teacher

Teacher Profile Image

Robin & Jesper ✓

Teaches Digital Marketing

Teacher

We're passionate about teaching! There's no greater joy than watching beautiful testimonials of people achieving their goals and dreams. That's why we STRONGLY believe in full and constant support. With ALL of our courses you can expect:

If you're interested in learning Digital Marketing - Social Media Marketing or Creating a Something Awesome..

We're at your service!

Love

Robin & Jesper

See full profile

Class Ratings

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

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

phone

Transcripts

1. 92: All right, my friends, in this lecture, we're gonna go ahead and start editing and designing our start here page. Now, as we know the start here, page is gonna be really important because gonna be a part of our funnel. In other words, we have our home page. What? We have set up the learn more button. We're just gonna take them over to the start here, page where we are gonna warm them up to who we are, what we do, what we have to offer, etcetera, etcetera. So without further ado, let's get started. So we're going to start at the back end for website, and we're gonna move over two pages and then all pages and then at the very bottom here we have the start here, page. I'm just gonna go ahead and click there, and then I'm gonna go ahead and click on edit with elemental er. So here we are. And here is all of our hard work that we did earlier. Now, this is gonna break my heart, at least, but I'm just going to click that away. Poof! It's gone. Lost forever, for we don't need it. Now. The interesting thing is that when you transform any page to start editing with L. A mentor, they all get put into the same section two also makes it very easy to remove. Now, in this lecture, we're gonna go ahead and start working a bit with templates, right? So I'm gonna show you how we can make a really nice start here page using templates and then adding on some mawr functions and the science from what we have learned earlier. So I'm just gonna go ahead and click on this button right here, and then I'm gonna instantly get to the pages templates. Now, we have different block templates as well. But for now, I'm going to start off with the pages templates. And there is a lot of different templates in here. Now you're gonna notice that some of them has to pro logo up here. Obviously, that means that you need to have the pro version of elementary to use them. But other ones that doesn't we can just go ahead and use them. And there are at sawn off different templates. I mean, there's so many different templates now, I'm just gonna go ahead and use this one it even says home page business page in here, which I think is really nice. We could also search for business if it was like that. So I'm gonna click care and check it out. And I think it looks really nice. I'm gonna click on insert and then yes. So they were going. Now, here we have our new site, or rather, a new start here Page. Now, if we scroll down, we can see that we have gone in a couple of things for free. We have got in this nice design with the two columns. One picture, we have the header. We have some takes. We have a butts on scrolling down. We have these nice affects. We have this part as well. A nice counter here, scrolling down, and then we have some info about our team. Now I'm going to start from the top, and then we're gonna work our way down. Right? So the first thing that I'm gonna do is actually to go ahead and remove this button. I'm gonna right click and click on delete because I don't want to use a button here. We used a button on the home page in order to get people to to start here, page. But we want people to be scrolling down on this page because we're going to be introducing what we do and putting some good content in hand. Then get him into our email list. Okay, So what, we're gonna go ahead and do now is start editing this text right here. For simplicity's sake, I'm going to keep this image because I think it looks really nice. If you don't like it, you can, of course, just go to pick Sabei, fund another picture, click on this one, click here and insert that image that you would like Super easy. Now, I'm not a creative genius. I have done some preparation with a piece of texting here that I'm going to be using different parts off and we'll see how in which parts I'll be using as we go the Sinus decently intuitive. I've done some preparations. It's going to be a lot of intuitive designing as we go. So what I'm gonna go ahead and do is actually copy this text right here, because I'm going to want to use it. They would go copy and I'm going to go back and then I'm gonna change this title here. The header and I'm going to write The future is online, so I'm going to be talking about how the future is going to be about building your business online and doing your marketing online. Even if we're having a local business, you still want to be seen online not only locally, but also globally to build your brand even if it is local. So they're ago. The future is online. I am liking that. I'm gonna change the style a little bit. I'm gonna go in here. First off, I'm gonna be increasing the size a little bit more like that. Actually want to make it a little bit bolder. There we go, liking that big time. Then I'm gonna go in here, remove this text like that, and then I'm gonna paste in what I just copied. Pasting. Okay, so there we go. Think it's looking quite nice, but I also want to increase the size of this. I'm gonna move over to style typography and then start playing around a little bit with this ice. There we go. Something like that. Now, I don't think this is so easy to read. So I'm gonna go ahead and make some different paragraphs and doing paragraphs is very easy . Now I'm gonna do is find where I want the paragraphs. Trading time for money is outdated. Over three billion people are using the Internet and looking for solutions to their problems. Offer the solution and you've got a business. Now, I might want to do something like this, right? Training time from honest, outdated Bubba Blam! Offer the solution and you've got a business. So this could be one paragraph and just gonna jump this part down like that, reach a lot of people, and you get a big business. Whether you're starting from scratch, you're looking to expand. We've got you covered. I'm liking that. I'm gonna put this down now. I might actually even want to do it like this. Put that one down and then I'm going to reconnect these ones there ago. So we have three different paragraphs in here, and I think this looks really nice, actually, and I am going to slightly decrease the size off this image. I'm going to go there and I can play around with the with like this Okay, We have the full having just gonna make it ever so smaller. There we go. Something like that. Now that's micromanagement. But it still please this my eye. So the future is online, and then we have the We have the header here, which I think looks really nice. We have the piece of text going on in here, so let's check out the preview. So this is how it looks like right now, The futures online that we have, the Texan, you can see the above the full section. To me, it's really beautiful. I'm really liking this now as a scroll down noticed that our men, you just pop straight out off into the abyss or something. Outer space. Now, this is just a bug in the preview mode. It's not gonna be like this when we save everything down to a website. So don't worry. So I'm liking this part. I'm really happy with the above the fold section right now. See how easy that was by the way off course is easy because I prepared some text. But thanks to the templates, editing is really quick and nice. Now they have done something really nice and notice We have four different parts going on. And if I hover my mouse over like this, they get this nice hovering blue effect. Now, if you would like to do something like this yourself or add in your own icons all you need to do, let's move over and scroll down to the I come box. If you put your I come box in here, you're gonna be able to choose your own icon in here. So let's use a star. It's an example like that, and all you need to do to get the kind of wonderful hover effect that they have is go to style, go to hover and then choose a color for that. So let's go with some type of blue like they're using snow. If I hover over, we get this same blue that they're also using. So it's a really easy thing to do if you're not happy with the current logos going on in here, and I'm gonna delete that one now, Interestingly, I'm actually really happy about this, so I am going to keep them, and I'm going to add in some more techs that I have, so here we are. We're showing what we're offering with our courses. Right? First off, it's practical courses. Hands on teaching. I'm gonna copy that. And finally, enough. Actually, we have a hand going on here, and then we have these growth. So I think that's just so wonderfully symbolic, don't you think So Some. I'm loving this part. There will go practical course of hands on teaching for real world results. I'm gonna do the same for this one. Gonna cook with this over here, and I'm going to paste it in. So I'm just gonna go ahead and do that for these ones, too. All right, so they will go now. I have copied pasted them all in here we have the practical courses, unlimited premium support, unlimited access to all future updates and 30 day money back guarantee. Now, the important part of the design here is that we're using to rose for the text. So let's go ahead and preview the changes and make sure that is actually looking like this on the screen here as well. So let's scroll down. Now we can see that there is still some. There's only one road off textures that we're gonna have to add in some text in order to keep the design. Otherwise, we see that this one sinks down a little bit. But we wanted up pace. We're getting nice even row going on. So let's go ahead and add in some text here. All right? So I just added in a piece of text in here I just added in this little the long dash and then wrote forever, and as you can see, that puts it in line with the wrist. I'm really digging this and I'm loving. This is the effect that we got with the template as well. So let's move on. Now. We have digital solutions. Boost your success, right? I'm really liking that. But I am going to write something different, and I'm going to go ahead and edit this, which has boost your success. And I'm gonna change that to from beginner to expert like that. And I'm really enjoying the digital solutions that we actually got for free here as well. Now I could be writing digital courses off course, anything. But I really like the digital solutions because what we're offering our solutions to problems, right? Just like we were pointing to in this text. So I'm really digging that that I'm gonna change this text as well. I'm gonna go and steal a piece of the takes that I've been writing here. A little template. Let's add in. This s well, just gonna copy this. And I am going to remove this and pasted in. So not really digging the sights right now. I'm gonna move over to style typography, and I'm gonna increase the size like that. There we go. Now. I'm really digging this, to be honest. So digital solutions from beginner to expert If you're interested in learn digital marketing Amazon, FB or Shopify drop shipping were at your service really, really nice. I'm super happy about that. Now, I am not digging this button. And I'm also not digging the color head because it's really not appropriate with the collar theme that we've been using. It doesn't look too bad. It's actually nice. Grady int If you don't know what a Grady int is, I'm gonna show you that right now. So what we can do in order to change the background? Hayes, go to edit section up here moved to style and then you can see that rather than using the classic, which we have been using throughout pretty much the entire designing, they're using radiant ingredient meaning they're using two colors. They're kind of fading into each other, and I'm kind of digging it, but it doesn't really work with our theme. So what I'm gonna go ahead and do is actually move over up here and moved to the menu default colors and accent and grab this hex code for red that we've been using for quite some time already. And then I'm gonna click here and move back to editing the section. And then let's start playing around a little bit with the colors. So instead of having this pink, I'm going to see how it looks like If I just add in this color, we get this kind of nice reddish color going instead, which, actually, I'm digging this. I think it looks really nice. So I think I'm going to keep this now. We could be playing with the other colors. Well, we have the blue going on here right now. We could be deciding the fate fade. Actually, this is looking quite nice, not so aggressive. They would go. And we can also be deciding the location off the fade. Noticed that there is this line going on here. If I put it to 100 the line is gonna cover everything. If I lower it, I'm I get to decide for how long it goes like that. And also the location Meaning How long is it going to fade? We have the line for how long out will it be? Fading. Okay, I'm just gonna pull it back a little bit, and I'm gonna go from quite far location because I enjoy this sort of look, So I actually really dig this. I think this turned out really nice. So we're gonna go ahead and keep this and check the previews and see what we just got. So let's scroll down. So we have this sort of box going on, and I'm kind of digging this now with a lot of this time, we have actually been going out to the edges, and I really dig that. But I also really like this design, this sort of box design. Now what I'm gonna go ahead and do is change the button because I wanted to go more hand in hand with our red theme, right? So I'm just going to right click here and click on delete. Then I'm gonna move over here to the elements, go and grab the bottom, and I'm going to be placing it down below like this. Let's put it to medium size. I'm gonna center it and then let's read the take. If you're interested in learning to use the market, the Amazon, we're at your service, so it would be appropriate to write. Learn more Here, for example, I'm gonna head over to style, and then I'm gonna head over to typography, and I want to make these into uppercase letters. There we go, and I also want to add some sort of effect on them. So let's go back to style and let's go to hover. And then we're gonna go for hover animation and grow. It's one of my favorite animations just like this. And then let's also add in the satellite change off color when we hover. So I'm gonna go with the background color. I'm going to paste in our red like that and we can see I'm just gonna lighten it up a little bit. there we go. And you can see that it gets it ever so slight. Fate when I hover my mouse over, which I think looks really good. I really enjoyed that. So loving this part. I'm going to keep this. Let's hit the preview and see what it looks like. Scrolling down. Okay, I am really liking this. Think it looks super nice. Learn more usual solutions from beginner to expert a few inches and learned his remarketing ship If I were at your service, This is really good. Okay, so one thing that I noticed a pair The future is online loving this text, but I want to make it into uppercase letters. And I think this is so nice for you to follow along here as well, because when I am designing, I usually like to take a couple of hours on Miss. I'd do something. Then I go back and I do something more than I go back. And it's just the way I designed, at least So I'm going to click on here, and then I'm gonna go to typography, and then I'm gonna move over to transform and go to upper case like that. Now we can see it jumped to Rose. But it doesn't mean that it does actually jump to two rows in the preview. And it's unfortunately does. I'm just gonna minimize this a little bit. I'm gonna move over here and go to topography, and just down size is a little like that. And let's check the preview once again. Okay? So is looking much better. I am digging this and really enjoy the upper case letters scrolling down. We have this part which I'm also really digging, and then we're gonna change these ones now for here. This is a sort of counter, and we can decide both what is going to say and also what is going to count up to. So I'm gonna start with the themes right here now for the themes I might want to write something like courses. Right. And now we have 21 courses currently, so I'm going to increase this to 21 here it says, users, Now we're actually going to change these two students, and then we have the amount of students and I believe that it is 14,301 which is absolutely , insanely incredible. so thank you so much for that. I am so grateful for it. And I promise you, Jesper is just as grateful. So we're gonna keep it like that. And then we also have acted, installs. And for that we could write, for example, reviews. I'm gonna write that reviews and then the ending number we're gonna write. I believe it is 4556 right now, something like that. So many reviews this. I think it's so incredible. So they were going. Now, if I click on the preview changes, let's have a look at how it looks right now. Let's scroll down and then we can see council to 21 courses, 40,301 students and 4556 reviews. Now, that is incredible. These are amazing numbers, and I am loving this and then we have the our team section. Now, I'm not really digging the our team sections. I'm actually going to go ahead and remove this section. And now what we're gonna go ahead and do is just make sure that everything here looks good . I am liking this. I'm liking these ones now. I'm actually gonna change the Grady and a little bit here. Let's just go back a little bit there. So I wanted to be less red. There we go. Something like that. Okay, so I'm liking this much more. It's much less invasive. Ennis is not so powerful because the rest of the design is going to be very powerful. So I am liking this. Okay, So what we have done right now is that we have edited all of the things that came with the template right now, what we're gonna go ahead and doing the next lecture is used to skills that we have learned previously and start adding in extra material in here, such as adding in our own headers, adding in our own content, to be displaying than putting him but sons etcetera. But you're always gonna have to remember when doing the designing or two things. Remember to keep saving now, whether that IHS saving s a draft or updating what you have this one thing super important to remember. The second thing is that when you're putting up things such as buttons like this, remember to click on those buttons, go to content, and actually link them. We can't have buttons that don't do any good. Right? So for me, it would be a perfect thing here to be linking to our courses section. So I would just right click here and then click uncoupling go in here, remove this sign, and I would paste it in. And now it's gonna link to In there. There goes to remember those two things. Keep on saving and always link all of your buttons and material is so guys seeing the next lecture for part two. 2. 93: All right, guys, welcome back. Now let's continue on with the design. So this is what we currently have. We have our headline. We have our text, we have this picture. And then we are having these nice icons with what we're offering what they're getting from the courses. And also we have these these resolutions from beginner to expert, where they can learn more than descent. Two courses and also this part. Now, I am really enjoying this box. D sign. However, for the upcoming customization is what we're gonna go ahead and do is actually changed the entire page to a more full with design. Because I am going to be an offering some content and also writing about summer for courses . The 1st 1 being Shopify. And I'm going to want to Shopify caller front anti your role now. Right now, that is not possible because we're having the default. Look to the fold, WordPress. Look, and I'm gonna need a full with look for that. So what I'm gonna go ahead and do is change to display off this entire page, and all I need to do is move over to set things down here and Then I'm gonna go ahead and click on the page layout and change it to Elemental full with right now. If I want to keep the box content, we can use margins and just put it back. It's super simple to do, but I am going to go with the elemental full with and check out how the content looks. And if I like it, I'm gonna keep it like that. All right, so let's scroll down on. What we can see is that this has gone from my box. Look to a full with look off course, because everything is gonna be affected. Now I am liking this. I think this does have a nice look. And because I love this one much, much more. And I think that having this one box and having this one full with is gonna be a poor designing. We're gonna go with the full with look all the way through. Okay, so we're gonna keep this so we can keep on the signing with the full with now. Should I want to change that and go back to the books? All I would need to do is edit this section, go to advance and then work with the pad ings. And I could work some with the margins as well. So we could actually be boxing it in once again. But we're not going to do that because I am loving this one so much the counter. But I can't have the counter full within this one box, because that's just gonna look terrible. So, guys, this is where we start using our newfound skills, okay? And adding in our own content. So what I'm gonna go ahead and do is go to the elements. I'm gonna choose one of the headings and just pull it down right here, okay? And then I'm gonna go in here, and I am going to ride Master Shopify drop shipping because that is what this is going to be about. I'm gonna make this section here, and I'm going to be offering some content and juice, really attracting them with what we have to offer and showing them what we have to offer. So I'm going to write a master ship if I drop shipping just like that, Okay, I'm gonna center it moved to style and typography, and I'm going to be increasing its size. Okay, I think this one is actually looking quite nice. There we go. Now, the next thing I'm gonna want to do is move over to advanced. I'm gonna put some padding around. We're gonna go with a classic 70 padding thing is very classic. It looks really good. Just like that. Okay. So because we're going to be doing it about a Shopify drop shipping Shopify does have its certain color. So what I'm gonna go ahead and do is actually make the background color into the Shopify color, and that's very easy to do. Now, all I need to do is be at editing the section here, go to style. And now, normal. I'm gonna go to the classic background. Remember, we were working with ingredient before. I'm gonna go with classic and then I'm gonna change the color. So, in order to know about the Shopify color, all we need to do is actually just open a new tab and then we're gonna write in Shopify hex color and this is gonna pop up in the top like this. I'm just gonna go ahead and copy this like that and I close this tab, go back here and I am going to paste it in just like that. I'm gonna need the hashtag s. Well, there we go. So now we're getting this this nice, beautiful green color like that. So it's that simple. Whenever you're looking for a certain hex color because you want to make make some some other company, for example, maybe you're doing your own courses. Or maybe you're offering certain services. Are you being a daughter company? Whatever. You can just google the name and then hex color, and it will most of the time pop up. So there we go. I'm really happy about this one. Now what? I'm gonna go ahead and do it start off by adding some content down here in the first piece of content that I'm gonna want to add is on image. So in order not to confuse the background colors, I'm actually going to go ahead and drag this image and put it down here, right? I'm not putting it down below there. If I waas, I would have dragged it down below here, but I didn't put it in its own section in order to keep this color and then we can keep a white background for the image and I'm gonna show you why just now. So we're gonna do is click here and go to choose image. And also guys, I did some preparation that I've uploaded a couple of images that I know I want to use to save all sometimes otherwise will be it for a long, long, long time. So I'm going to move over to the 1st 1 with his Shopify drop shipping business model. I'm gonna click on insert. So there we go. And you can probably already tell that I am focusing on a color theme right here. Now we're using the Shopify callers here. We're also using a lot of white in the image itself and also black. And this is what we're doing here, too. Now, the previous section was close to white, little grayish that takes his black hair. And then we're using Shopify colors in the background. So this I am digging. I'm digging this big town. Let's check it out in the preview and I'm going to scroll down and then we can see here we have Master Shopify drop shipping and then we get this section popping up so I think this looks really nice and really solid. I am happy about that. Okay, So what I'm gonna continue doing now is add in some more material. Now, in order for this not to look so dollar look so boring. Rather, I'm gonna go ahead and change things up a little bit. I'm gonna click on this button, and I'm going to make two columns because now I'm going to move over to elements and use one heading to the left. And I'm going to be using one image to the right. And basically, what I'm going to be doing is showcasing. Offering some sort of content to the writer and making a description to the left. Very short, Very much to the point, not consuming anyone's time, just showing what we're all about and what we have to offer. Clearly, there's already ah, lot off information flowing to the users here. We can see exactly how the shop, if I drop shipping business model works here. It's a very simple, very effective model. So what? I'm gonna go ahead and do it starts with the image. I'm gonna click in here, and I am going to choose the scale or stop image just like that. There we go. So now I have the scaler stop image looking really nice fitting with the collars and everything. And I'm gonna write in the text writer and I'm going to write Dr Targets. Ah, traffic. Okay. And I also want to add more off a punch to this. I'm gonna move over to style typography and gonna go over to transform and make this into upper case there would go drive targeted traffic. I'm really digging this and I'm going to increase the size something like this. Okay, so let's check this out. Let's preview the changes shall way, and I'm going to scroll down. And here we have Master Shopify drop shipping. I might actually make this a little bit smaller and scrolling down. We have the shop if I drop shipping Business model looking really nice, okay? And then we have Dr targeted traffic and we have this scale or stop going on right here. As we can see, there are a little bit close into each other. But that's okay. We're gonna fix that in a little bit now. Before we do that, I'm actually going to go ahead and click up here. This is interesting. That's going to save us a lot of time, and then I'm gonna click on copy because then I can move down to this empty space and click on paste. Obviously, I'm going to get the exact cookie. And what is so nice about that is that this is gonna have the correct size, is gonna have the uppercase letter. It's gonna have the right call of everything. We're just copping this entire double calling with the content. So all I need to do now is click on this image, delete it, clicker at the next one, they would go insert media, and then I just go ahead and change this ticks. So I'm gonna write something like triple your sales. There we go. Drive targeted traffic, triple your sales, and now this. Preview it. I'm going to scroll down, and we can see that there is actually a lot of good stuff going on right now. I am digging this, so let's make some more space so that this makes more sense right now. It's so crammed up, I'm nothing. That so I'm going to start off by making some space in between here. Okay, So I am going to click on this section and they're gonna go to advance. And now I'm gonna play with the top margin at the top margin on Lee because it's gonna make some space in between here. So let's put 50. For example, we get some nice base going, and then I'm gonna move over to the middle one now. Noticed this one column here writes the big image. There are two column said, but we can count. This is one section here and then we have one section here. Now, what I'm gonna do is choose the middle section, go to advanced, and then I'm going to ride in, Let's say 70 in the top and bots on margin right here. And the reason for that is, then we're going to get some space to this one, and we're going to get some space to this one. So let's go ahead and preview these changes and scrolling down and we can see we have the masters. Shopify drop shipping and we get a big, nice display of to show before drop shipping business model. We have the target, the traffic, which all of this is still way, way too close. So I'm gonna need to exaggerate these a little bit. I'm actually going to go ahead and make this space the margin. I'm gonna put it to 70 and then I'm gonna make the margins for the middle section into something like, Let's go crazy to my Let's go with 150 There we go. So let's preview the changes scrolling down once again. It's a lot of scrolling on. We have a bit more space in here. I'm really liking this. And then we have this drive targeted traffic. Okay, I'm really digging this now. Notice how there's like, you're able to breathe now when you're scrolling down, right? There's just one thing at a time hoping up. I'm digging this way, way, way more. Actually, I'm gonna increase it even more because I'm digging it that much. You're gonna move over and I'm gonna put the margins to 200 then I'm gonna do another preview and scrolling down. Absolutely. Yes. I am loving this to so much more space there so much easier to focus on what's actually here. Definitely digging this now. There is one thing that I am going to want to change about this, though, and that is that I would like to make these images a bit bigger because I don't think they're visible enough. So I'm gonna go back here and I am going to be changing the columns, right. So I'm gonna move this one over to the left and let's see, Let's Let's not be shy. Let's go with 37 I'm gonna try 37 here as well. There we go. OK, and I'm gonna preview it once again. Oh, is looking so much better drive targeted traffic that it jumps down. Absolutely. No problem. I'm loving it. This is much easier to view. They will have the sales funnel, which is much easier to read now. To me, with the design. If there is one road to rope because they are not on the same lying on the same road, that doesn't really matter. So I am absolutely digging this now. There's gonna be one more thing I want to do to this or two more rather that's gonna be decreasing the size off this. I think it's a little bit too big. I think I went a bit too crazy here. I'm gonna start their moved to style typography. And just put this one down. Let's go with you know, 50. Let's go with 50 and uneven, Not his number. There we go. Now I'm gonna want to add a button in here. So now you have got in a taste of what we have to offer. Maybe you know what it is. Maybe you don't, but it definitely is enticing. Right? So we're actually offering content writing. I was showing them the business model. We're even showing them what we're using it to drive traffic, whether you understand it or not is still good content. And then we're showing them the sales funnel. Now, the question in their mind is, of course. Okay, this looks really good, but I want to learn this. Well, this is why we're gonna go to elements were going to go to. But son, and then we're gonna add it in right here, and then go ahead and put it to the center and making learn more button. Now, if we want to make a life even easier for self, we're gonna scroll up. We're gonna click on this button. Coupet scrolled down and we could just go ahead and remove this right click here, paste it in and look at that. Incredible. And I'm also gonna go ahead and make this into a large button because that's gonna fit in more with this this time because this is a quite large design going on right now. So let's preview this, okay? I am loving this right now. We can see we have everything the way I really wanted to be. Dr. Targeted traffic. OK, here comes the next one, and then we have the learn more button. Okay, Now we're gonna want a little bit in space in between there. Nothing crazy. I'm gonna just go down, and then I'm gonna click on this one to edit this section, go to advance, and then put a top margin. Nothing too crazy. Let's go with 30 or something. They were going. Let's sit preview one more time. All right. And here we have it. I think I overdid it. I'm gonna go back, and I'm go ahead and put it to 15. There we go. So, so far, so good. I'm actually loving this design now. This is gonna bid for this lecture. In the next lecture, I'm gonna show you how you can use the same template as to what you have already created to really speed up creating the upcoming sections. OK, so we're going to continue our design in the upcoming lecture. So see you there, guys. 3. 94: Welcome back, guys. Let's continue on with our design. Quick recap. This is what we have created scrolling down. We have made all of this beauty right now, some from a template, some from our own doing like this party's their own doing. We put some nice spaces going on right here. And then we just added the learn more button with a space that I am happy with. What we're gonna go ahead and do right now is actually to create similar sections like this one. Now, this is a section This is a section, etcetera, etcetera. But we could say that this is one big shop ified section right here. Okay, we're just gonna call it like that. It's not like that in elementary, but let's call it like that right now. But we're gonna go ahead and do now is to create another section for digital marketing and then another section for Amazon F B A. But because we've already done out off the hard work, there is quite a shortcut we can be using for our future designing for those courses. And I'm gonna show you how to do that. So let's go back in here Now, the first thing we're gonna want to do is to create another header. Right? But all I need to do is click here, click on copy, go down and then paste it in here. Ok, now, this isn't really what we're looking for when I cannot do another ship if I drop shipping. But we have the padding already. We have started some form of coloring, so we just need to go ahead and edit. It takes, I'm gonna write master digital marketing like that, and then I'm gonna move over to style, and then I'm gonna go over and edit this section up here, move over to style, and I'm gonna change the background color. Now, of course, the question is, what is the color going to be that I will be using? Well, in this case, I'm actually going to be using the callers from WordPress. So I'm gonna search for WordPress hex color like that. And here we're going to get it right away. I'm gonna grab it. And the reason I'm gonna grab it is because one I think it's a lovely color. It fits in with the rest. And also because a big, big part of the digital marketing courses creating your own website using WordPress. So it's also very symbolic. So let's go back here. I'm gonna clear this one, and I'm gonna paste it in. There we go. So I am loving this color, to be honest. So this is already said and done. You see how quick this is? The only thing we really need to do is actually put the margin to that button. Let's put it to 70 or something. So we get some proper spacing. We could probably even do like 100 and 20 maybe 100. Let's not go too crazy. And then I'm going to scroll up, and we know that there is just one big picture going on here, so there's nothing we need to do that's too crazy. We know if we click on the section here that the margin is 70 between these two. So I'm going to scroll down. I'm gonna move over to elements, grab one of those images, put it down there because we don't want to put it inside, remember? And then I'm gonna click on image, and now I will be using an image for digital marketing there's gonna be a little bit different. I'm going to be showcasing just how successful we have been with our digital marketing displaying having millions off views and millions off watch time. And this is also really good for social proof. Clearly, because we're showing really clear results in here. So this is looking great. I'm gonna keep this image. Now I'm going to scroll up and remember their two columns who actually put these 2 37 with Mix them up. So I'm gonna go ahead and click there copy and then go down and I'm going to paste this in and I'm gonna paste another one in just like that. There we go. And now all I need to do is edit them. I'm gonna click on this one, remove this picture and adding a new one is going to be for digital marketing. We're gonna use this one and here I'm going to write monster Facebook ads like that and down here, I'm going to remove this picture. Click on delete, click on this one, and I'm going to add in this image, which I think is absolutely lovely. I love this design and I'm gonna click it change This takes and I'm going to write over 40 hours off Matt cereal, displaying what is included in the course. They don't think that is gonna be on Lee Facebook ads, clearly showing that there is a lot of digital marketing platforms and they're going to see the two because we're off course going to be adding in the learn more. But on Tuesday, I'm gonna copy that. Go down here and I'm going to paste it in just like that. Okay? I am loving this. This is a really nice and lovely design. Now, there's a bit much padding in here. Remember, we're using the middle section. So what? I'm gonna go ahead and do is click on edit in this section, go to advanced and not keep 200 there at the bottom. Let's keep 15 or something like that. I'm going to keep this like that for now. And then we're gonna preview the changes and see what we have created. So I'm going to scroll down Shopify apart. I'm super happy about We have to learn more button. We have the master digital marketing. Okay, we're showcasing this and then we have the master Facebook ads scale it at over 40 hours of material. And then I learned more. But now this is way, way, way too close. I am not digging that. We can see that there's a lot of more space going on in here, so I'm gonna put the to about 50. Let's do a padding in there. So I'm gonna go back. I'm gonna click in here too, Advanced. And then let's do a padding for 50. Say, there we go. And then preview the changes. Scrolling down once again is a lot of scrolling going on. Okay, looking much better. Yes, off course. Because there's so much whiter. There's a different perception off the placement off the button. But there is still a lot of space going on, and I am happy about this. Okay? So that is how quickly that we created the monster digital marketing section because we did it off the hard work earlier, we got the framework to work on it. Now I'm gonna go ahead and do the one of the final sections, which is going to be the Amazon section. So very similarly, I am going to go up here, and I'm going to click on copy. We're gonna scroll all the way down. I'm gonna paste this in going to change these texts, and I'm going to write Master Amazon FB A like that. Gonna move over to the section style, changed the color and once again, gonna using the magical or the magic nets off Google. I'm not going to write and Masson Hicks color like that. And here it is gonna copy this. Gonna go back, clear this one out, paste it in, hits enter and look at that beauty off a color. So I'm really happy about this. I'm gonna keep this, okay? I'm really digging this Now, let's continue on. I'm just gonna go ahead and pull in another image. There we are. Pull it in here and then I'm going to click and choose your image. Now we're gonna have the showcasing off how Amazon FDA works. I'm gonna insert that as media. We're gonna get a complete business model here, which looks super nice. We can see how it melts in with the white background and it's at this sign that I love. It's so clean, So nice. No, I'm gonna do it a little different from last time. Okay, I'm actually going to go and start by coping this one scrolling down and I'm going to paste it in like that, and then I'm going to go up, and I am going to copy the middle one like that and I'm copping the middle one because remember, it already has the margin set. It's just gonna be saving a little bit off time and effort by doing that. So I'm gonna go ahead and click on Paste. There we go. I am definitely digging that. So this is looking nice. Now I'm gonna want some more padding in between here as well. I go to the section, we can see that it's 200. I want some padding in here to we're going to want to use or rather margin. Sorry. 8 200 top margin already used in 200 for the bottom. There's I am going to remove it. Otherwise there will be even 200 here, so it will be 200 plus 200 which is just too much. So there we go. Super easy design. So what, we're gonna go ahead and do now is scroll up right? And I am going to be coping in this one right here. And I'm going to be copying first of all, the middle one because it already has margin for the top. And it also has margin for the bottom, right? I'm going to go down and pasted in, which is perfect. Now, I can also go ahead and cope with the butts and one because it on Lee has the margin here automatically said in a lower margin for the learn more bottom. So it's just clever to do to copying rather than pasting into in a row. But both works off course. This is just gonna be a little bit faster. Based on our design, I'm gonna paste this in as well. And there we go looking beautiful, looking awesome. And let's change things up. So I'm gonna click here. I'm gonna delete this image, click on the plus and I'm going to add the first explanatory image. And then let's change the ticks and I'm gonna write something like build your own brand or let's just right build your brand. There we go. I think is more clean into the point. And there's private labeling how it works. What you do, etcetera, Etcetera. OK, and then we're gonna do the same with this one. I'm going to remove this image, click on the image and put this one in here and then change the text. And I am going to write outsmart competitive source. There we go. And now we're gonna scroll up. I'm going to copy this button. Copy. Scroll down. I'm going to paste it in. OK? And this is looking nice. Let's have a preview and see what we have created. So I'm just gonna scroll all the way down because there's a lot of scrolling to be done. Nice basis going on here. We have the digital marketing section. Okay, Social prove. It's looking good. It's It's looking really good. We have to learn mawr, Amazon. FB A Okay, this is explaining what it is, how it works. Have to build your own brand and how to outsmart competitors. Now, I Honestly, guys, I'm really loving this design. I'm a big fan of this. So what I want to do is again change a little bit off the space in between him because this is quite crammed. While there is a bit more at least perceived space in between is we're gonna go ahead and put a padding around it. Now I believe there's there's quite a bit of space, Yes, the perceived space because of the white. So I'm going to go all the way down over here we are and I'm gonna click on the section, go to advance, and I'm just gonna put Let's go with 15 pattern we're using 70 before let's go with 50. They would go. I can just scroll up and see what pad and we're using. We're using 15 the padding here. So it makes a lot of sounds that we want to use 50 in the padding here. Okay, As perfect. That's all good and getting Now, guys, I'm actually super happy about this design and noticed in what, short off a time if we have created on Amazing the sign. Now, granted, I had prepared some images and I had prepared some text. But really, when it came to the designing, this was really quick and to the point. It's one more thing that I'm gonna want to add. And if you've been following in the course, you're gonna love this because it's like you know, saving the goodie bag. Now, remember, we're talking about the different steps when it comes to start here, you want to warm them up. You want to introduce what you have to offer when I give them your best content, of course. And also, you want to get them too often to your email list. So what I'm gonna go ahead and do here is click on this button. I'm gonna get me to the templates and I'm gonna click on my templates. And you might just remember that we have done an email often template earlier. It's smaller one. So all I'm gonna go ahead and do is click on insert and then yes. And now we are going to be getting these beauty off a designed of we created earlier. Now, for some reason, when you import templates, they often pull the sidebar with them. I don't know why, but it's easy to fix. Just go to set things down here, and then you can see the page layout is going back to default. Just go to elementary full with, and this is gonna change itself and go all the way out to decides. There we go. look at this beauty. I am absolutely adoring this. I'm gonna go ahead and preview the changes. I'm going to scroll all the way down and we can see that. Yes, indeed. This is looking so nice. I am loving how it goes and faiths out from this nice, clean white to the boom. Get the top 10 digital marketing hacks you can sign up, etcetera. Now, this is so cool, because we have really warmed them up with what we have to offer. Ah, lot of social proof. A lot of knowledge. Honestly, a lot of great free content going on right there with the information. Straight to the point. Now, chances start. They've already built a relationship to us. The most likely trust us. And they're probably going to want to get our top 10 digital marketing hacks or whatever else that we have to offer. So chances are really big if we're gonna have someone signed up to our email list. So this was our start here Page. I hope you have taken a lot of inspiration and knowledge from this lecture. Now, remember, with the template are endless decides there are so many things we can do off course if I wanted to. I could use change this image. But I am loving everything about this right now. So what we're gonna go ahead and do is move onto the next lecture. Now, remember, if you need to have your mind refreshed on how to have your mindset for these sort of pages , you can go back to earlier when we were doing the power point presentation to what to think about for the different pages. And here we wanted to really warm the my funnel them in. We wanted to offer our best content and we wanted to get into her email list. Are some awesome guys see you in the next lecture? 4. 95: Hello, my friends. And welcome. Now we're gonna go ahead and design our courses, Page. So by now, we have designed and don are home page, right? So people who visit our site, they know what we're about. We've also done are start here page so that we will have taken visitors to go from a cold audience that called visitor and customer into a warmer customer. Because now they know what we're offering. What we're about, etcetera. Now we're gonna move on to the next step, which is showing them what we actually have to offer. Wanna push them into the final step of actually purchasing something from us. Right, So let's dive right into it and start designing our courses. Page. All right, so we're going to start here at the back end off our website, and we're gonna move down two pages and then click on all pages, and now we're gonna go to courses and just then click on edit, and then we're going to click on edit with Elemental. We've done this before, and then we're going to go down to set things down here, and we're gonna change the page layout from default to L A mentor full with. All right, my friends, let the deciding commence. So what I'm gonna want to do here is because they have gone through so many things already . Home pay. Start here, Page. We want to get kind of straight to the point with Okay, they want to see our courses. Then we're gonna give them our courses. This is not the place to be putting on email open or, you know, some some other offer that doesn't have to do with the courses. They want to see your courses. So we're gonna show them the courses. There's just one more thing that we're gonna want to introduce them further with because of the specific, the sign. And that is me and Jesper personally. So what I want to do here is actually to add in a picture of me and Jesper and then write a little text to the right. That looks like it's a letter from us. Right? Because we want to give them a relationship to us, an emotional attachment, make them feel safe and give them a face for the creators off the course, this might be the final push against him into actually feeling safe enough to buy something from us to really want to make this personal and then head straight to all of her course offers. So in order to do that and make sure they're gonna go ahead and use a 10 place, I'm gonna click care on ad template. And we've already used page templates, right? This is honestly, such an honor to have all these pages and just get to pick one. But we also have different blocks Now, blocks are pretty much different sections that we can add. We can edit them ourselves, etcetera. Now, what I'm gonna look for here is actually a block. That's white, because I'm gonna go with a white theme here, and I want to have one that has a picture on it. Kind of like this, But that's not a testimony. Bigger picture exactly like this, actually, so this is absolutely perfect. We can add in a picture of me and Jesper here, and then we can have the message from me. And just for to the right. Perfect. Perfect. I'm gonna go ahead and click on insert here. There we go. Now. I'm just gonna go ahead and added this a little bit, so I'm gonna click on the picture, and then I'm gonna remove this one and click here. And I've already taken the liberty off uploading a big bunch off images here. Now I've transformed all of the P and G's to J pick, and I've also compressed all of the J picks or they're all very tiny file sizes. Now, we have done basing on earlier lecture, So I strongly recommend that you do this for all of your pages and then just keep making sure that your website is up to speed and everything. Now, I'm gonna go ahead and use this picture of me and Jasper and then I'm gonna click on insert media. There we go. Now it's a little bit big for my likings. I'm gonna move over to style here, and I'm gonna play a little bit with the max whipped, right? So I'm just gonna make it a little smaller. Maybe something like that. Okay, so let's leave it at 85. For now, it looks nice. Also low. How there is probably the first picture ever, Jesper without a beard. So I'm really loving this picture. It's really personal Now we're also gonna add in some text is gonna be from me and just burn. I've done some preparation here already also, and pre written. It takes in order for this to be faster for our lectures and tutorials. Now, for you, you might not have a text. You just write. It asked you go. Or you might actually already have a takes. And that's perfect. Just go ahead and grab it and then add it in. Now, I'm also gonna had and written how I want the sections to look like I'm gonna want the business section. And then I'm gonna add in these courses two and two and they're gonna have the complete digital section. It's gonna have a section of two courses and then we're gonna go 333 and three. Okay, so let's go back. I'm just going to click on this text. I'm going to remove all off this like that. Then I'm going to right click and paste it in. There we go. Now let's hit preview and see what it looks like. All right, so I actually think that it looks really nice. Now there's a couple of things that I want to do. First up, I want to make this a little bit smaller, and I also want to make this slightly more narrow. And if I make this more narrow, it's also gonna look more like a letter. And then, of course, I'm gonna want to change these pieces of text as well. So I'm gonna go ahead and do that. So in order to make it all a bit more narrow, I'm gonna go ahead and click up here to edit this column. Then I'm gonna move over to advanced, and I'm just gonna add in a little bit of padding. Let's link them also, they all get third there would go and like that, and then we get to see how it looks like. So let's click comm preview changes. So this is looking really nice. I really love how we got some more narrowness to the text here. Still gonna make this image smaller. But also, I want to decrease this space in between here. So gonna go ahead and do that right now I'm going to click on this image, gonna move the Maxwell down a little bit to 80 there with percent. Now we can also be playing with this one. Gonna put it to ah, 100 right now So we can play with this one as well. So 80 I think we'll be a little bit better. Maybe even go with 77 now. I also did not like the space in between here so much. I'm gonna go back to this column, right, gonna on link these, and then I'm going to remove this space in between by removing the left padding. So I'm gonna do it like that. Police zero on there. And now let's go ahead and check out the changes preview. All right, So I am liking. This is starting to look really nice. Now, there's a couple of more things I want to do. Now. I want this entire image area to take up a bit more space. You can see that even though we made it more narrow with the padding, it still taking up a lot of space. And I want the image to take up a bit more. So I'm gonna move back here and I'm gonna drag this one and make it. No, Let's try 53 47. Let's try that one out And then let's see preview again. All right, so this is looking really nice. I'm starting to get super happy with this design. Looking super personal. It's like a letter from me and just we're going on here. Really, really awesome. Now, let's start editing these ones as well. Now, our name is not Mike Stewart, especially since it is two people. So we're gonna go ahead and click on here, and then we're gonna right robbing and Jesper, And then we're also gonna edit where it's his head off sales, and we're gonna right, see those at Robin and Jesper. Lt d. Now, as you write, C E O's as in plural CEO, but to CEOs, you actually want to make the CEO big and the small, but because we're using uppercase letter here, we're seeing the s s big, and it really doesn't look that nice. We're going to move over to style typography and then changed uppercase to default. There would go looking much nicer. And then I'm also gonna want to go ahead and click here, and I want to make this italic. There we go. So kind of looks like we have signed it there And now let's go ahead and preview these changes. So I'm really liking this. This is super personal and super nice. I'm a big fan off this, really happy about it. So we're gonna keep it like that now, What I'm gonna want to do also is actually to just put some padding around these ones to compress them further, because now it's a complete above the full, which I am enjoying. But I would also like it to just be a little bit more compressed. Just give it a bit more personal looked and simply taking up all of this space around here . So I'm gonna go back here and I'm gonna click on edit the section, gonna move over to advance, and right now we can see that we have, Ah, padding here going on, we have 100. It's up 100 at the bottom. Now we could also be playing around. Let's say that we put 50 to the right and 50 to the left, and then let's heat preview changes and see what we get. So as you can see, we're getting a slightly more compressed look going on, and I am really digging this To be honest, I think this pretty much exactly looks like a letter. Though I'm not enjoying the big space on the top writers. I'm gonna go to advance and you are gonna change the top two. Let's say 50. So we get some space in the bottom here as well. Maybe even, you know, that's pushing it 40. Let's go with four. Dan, that Leslie Comm preview changes. All right, so this to me is much, much, much better. There's some space going on down here. It looks like or Well, it is a picture of me and Jesper and it is a letter from Austria, right? And it says, Welcome Robin and Jesper here introducing it. Hey, it's from me and just But we're making this personal. We're happy to help you with all of your business and digital marketing needs. With over 2700 reviews rated five stars, it said etcetera. So we're introducing again who we are increasing some social proof and just making this personal like it's written from us. And this is all we're gonna do when it comes to adding extra zing here. We're gonna make it personal, introduce ourselves that Hey, Robin and Jesper here. We're offering some good stuff. A lot of people are liking our stuff. Enjoy. This is gonna be the basic message. And now let's go ahead and had strayed into adding the course is Okay, so to add the course says I'm going to start off with a header. Right? So if we look here, I have, like, I was talking about early. I've done a little bit of an outline. I first want to have a header for business, and I'm gonna add a Shopify an Amazon F B A course. And then I'm gonna do a new header for the complete digital marketing courses and add the Complete Digital Marketing Guide and also our social media marketing masterclass because these air two huge courses So there's gonna be a design off to this is also gonna be at the sign of two, and then we're gonna add in all of our additional digital marketing courses in the signs off three. So let's get started right away. Now let's start with heading. And when I grab this heading and I'm just gonna put it straight in here, There we go. And now I'm gonna put this. Now, let's leave it to the left for now. And I'm going to write business courses. I'm gonna move over to style typography, and I'm gonna transform this to upper case letters. Looking really nice. Also gonna increase the size. Let's not go too wild here. Let's go with 40. Think for they might really nice. There we go. I'm also going to give this some padding right away because I know I'm gonna enjoy that This sign like this, maybe even 70. No, actually, things we're gonna go with 50 50 is looking nice. There we go. And now we're going to give it a background color. So this is where we actually start adding in a bit more off our style. And remember, our style has always been this kind of iconic red that we have in here. Now, I'm also gonna add in some padding here, so I'm gonna move up and edit this section right here. Go to advance, and then I'm gonna add in a padding off 50. Just like that. Looking really nice. Now, I also want to have a background color here, and this is where we start to become a little bit more iconic and adding in our iconic color, this kind of really nice red that we have going on. So I'm going to click on style up here and then background Normal classic. And then we're gonna add in that color And what is the caller? Well, if you don't remember the code like high tend to not do, we're gonna just move that, care to the menu. We're gonna go to default colors, go to the accent color, and then we just copay this code, right? It's that simple. And then we moved back by clicking here, go to edit section. We're gonna go back to the color where it's style normal, classic color. Clear this paste in the code And there we go. This is really nice, actually, but I'm going to want to change this colors. I am gonna change this color by clicking here. I'm gonna go to takes color and I'm gonna make this white perfect. I'm loving that. And I'm also going to decrease the size sexual. Let's move this one down to let's try third, something like that. And now let's just preview the changes and see what we've got and let's scroll down and we can see that we have business courses going on. It would have put it to the left. And now we're gonna go ahead and add in our courses. Really nice guys. I am super happy with this now, in order to start adding in our courses, what we can do is actually use a previous template. Remember, we've been playing around with our courses before. We're gonna go ahead and grab that ass a template and then start eating that and then start adding in our courses. Right. So we're gonna go ahead and start adding in the courses in the next lecture, guys. Okay. So I'll see you in the next lecture. That's gonna be part to see there. 5. 96: Welcome back, guys. Let's go ahead and grab the template for our courses and then start editing it. So what we're gonna do is actually go ahead and we're going to save this draft. There were goes and I would know it saved and safe. Now we're gonna click up here and we're gonna exit to dashboard. We're gonna go to all pages and then move down to home and click on edit with L a mentor. And here we are brings back memories, doesn't it? That we're going to scroll all the way down till we get to this section. Remember? Now we're gonna use this as our basic templates. So what? I'm gonna go ahead and do It's actually right Click up here and I'm gonna click on save asked templates, and I'm going to call this three call call courses. Tim plate, there we go, and I'm gonna click on safe. So here we have it, along with our email opens that we've done earlier. And I'm gonna press this one away, gonna go to the menu and then exit to dashboard, and now we're just gonna head back and we are back. All right, so let's scroll down here and down here, we're going to click on add simply to the right here at the bottom. Now we're gonna go to my templates in the upper, right, And then we have the three column courses. Template. We're just gonna go ahead and click on insert, and then we're gonna click on yes, and asked, you know, for some reason, when we insert, they're gonna want to adding that right sidebar. So we're just gonna go to settings right away here, and then we're gonna go to the page layout and put it to elementary full with All right. So let's start editing this now. The first thing that work and I want to do is to actually remove the background. We're gonna go with a clean and nice white design. So I'm gonna click up here to edit the section I'm gonna go to style, and then I'm just gonna delete this background so we get this nice white defect. Okay? Now, the next thing I'm gonna do is actually remember I wanted this to be a business section for business courses. So and I also only have two business courses here, so I'm gonna go ahead and remove this one. So all I'm gonna do is click up here and then click on delete. So now we only have two courses, and I'm also gonna go ahead and remove this header. Because remember, we set this business courses up here, so I'm going to right click and delete this one. Okay, so this is started to look really nice already. Now, what I'm not actually enjoying is this green effect, because they're so big. I'm not real digging this going on right now. And besides, we kind of have this effect template in the home section. So what? I'm gonna go ahead and do is actually click it and it the column and then move over to style and then hover. And then I'm just gonna remove this green by setting this all the way down. So it has full a pass ity, meaning there will be no effect when I hover over just like this. There we go. And this was still gonna have the popping effect, which looks great. So we're gonna go ahead and keep this one now as to remember, if I want to do the same here, all I need to do is go ahead and right click, click on copy, and then go in here and then paste style. And it's gone. I love that. If anything, it's really great. Okay, so now we're gonna want to style these up a little bit if we go ahead. And we looked at the preview changes right now, just a preview and then scroll down. We can see. Actually, I'm loving this. We can see that we have our two courses going on here. Maybe a bit excessive amount of space here, and we're going to remove this, but this is looking a little bit playing, in my opinion. Well, actually, it's not too bad a little bit plane, so we're gonna go ahead and change this up a little bit. We're gonna go back and start up by removing this bottom because we are at courses, right? There's no all of you all courses to be clicking because they're going to get off the course is here. There we go. And what I am going to want to do is actually to add a shadow effect to these boxes. Because if we look right now, we can see that they're melting in here, which actually looks OK, but I want them to pope more. I want them to stand out and before we have the harbor effect. But now we're gonna add in boxes. So in order to do that, all I need to do is go ahead and click here to end the column. And then I'm gonna go down at style to border, and I'm going to click on box shadowing. You just need to click on this and you're automatically going to get a certain color here. That's gonna be the shadow. And you can see that we're getting this nice effect, which we also have on our sticky bar up here. I love this kind of shadow effect. So this makes the whole thing pope a little bit more. So if I preview these changes, we can see that there's quite a difference between these two, right? Quite a difference. This one stands out much more. And this one not so much. So I'm really enjoying this sort of design, and we're going to stick with it. So I'm gonna go ahead and go back and you know the drill. I'm going to cop it and Then I'm going to paste the style and poof it pops up. I love that effect Now. There's a bit excessive space up here, in my opinion. So we're gonna go ahead to the editor section, move over to advanced, and we can see we have a lot of padding and everything that's all nice. But we're gonna go and remove the top patting just lowered. So let's remove the link values. And let's lower this to say, Let's go with 50. I think 50 is gonna look much nicer. You can see there's a bit less space going on right now and now I'm also going to want to make this a bit more oval because if we go ahead and we look at the preview, they are quite thick boxes, aren't they? I would actually like some less padding on the size and make them a little bit off a longer decided. So that's what we're gonna go ahead and do. So what I'm gonna go ahead and do now is actually to make this a little bit more cell ender because, as we can see, there's still a bit of padding to the size, which I think looks nice, but I'm just gonna change it up a little bit now. I'm gonna go ahead. And could it come end it? Call him up here and then we can see that there is some margins going on, which is really nice, because their space in between here some space to the sites, everything. But we're gonna dealing the values off the padding and we're going to increase the right and left padding is to say, Let's do 70. Let's do it like that. There we go. 70 and I'm gonna do the same. I'm gonna dealing and I go with 70. I'm gonna go with 70 and then let's hit preview changes. So I'm really happy about this now. Clearly, I'm going to want to be adding a bit more takes to make them or even. But for now, I'm actually just gonna go ahead and add in the next section, which is going to be the complete digital marketing courses. So in order to do that, it's actually really simple. Right now, all I need to do is click up here and I'm going to click on copy because we've already done all of the hard work Now I'm gonna go down, and I'm going to paste this in here. We can see we're getting all of these for free because we've been doing this work and then I'm going to write complete digital marketing courses like that, Okay? And then I'm also gonna go ahead and go up here and I'm going to be coping this one. This section copy and I'm going to go down, and I'm going to paste it in. Now we're getting these courses for free, right? But all I need to do right now is actually to change this picture to the digital marketing picture, which, remember, I've already done the preparation work here, and I'm going to let see gonna find it. There it is. And I'm gonna click on insert media. There it is. Okay. And then I'm going to also insert the social media low going here and then click on insert media. And there we go. It's really hand like this, isn't it? And as you can see, this one is having a slightly different this scientific. But that is because this image in itself it actually has a border down at the at the bottom . Here and these image doesn't have that bottom border. Now, for aesthetic reasons, for the design reasons, I'm actually going to go ahead and change this one. Latest would has a border here as well. But for this tutorial, I'm gonna keep this one and show you what this is going to be looking like as we continue designing. Now all I'm gonna need to do is change these upright. So if I go ahead and click here, I'll be writing complete digital market sing. Um, guide. There we go. And here, I'm going to writing social media, Mark getting monster class. There we go. So I think this one is actually looking really nicely, both looking really nice. Now, as I go ahead and preview the changes, I'm going to want to make sure that this one has much takes. This this one we can see right now that it has three rows, this one has to row. So the buttons, Aaron, even And also this image does not have the bottoms border, and this one does. And also it is a bit site in between all of these courses. Right? So what? I'm gonna go ahead and do It's actually increase the margins for the headers right here. Okay, so with the header section, I'm going to get some more margins were going to get more space overall, so I'm just gonna head back right here, and then I'm gonna click here to edit this section, go to advance, and now let's start increasing the margins. Let's go with maybe 50. Or, you know, we could probably go a little bit more crazy. Let's go with 100 just to see what it looks like and scrolling down. We can see that there is a lot more space going on. There's time to breathe. Now this becomes its own section. You can tell that when I moved down, we have business courses in the top, scrolling down and then comes the next section. So this is actually looking really nice now, so I might feel there's a bit excessive amount of a space here, but I do really enjoy the space in between here that leads to a new section. So what I'm gonna go ahead and do is go back here Now we have 100 on both. I'm gonna dealing them and set the boat sums value for 80. Or maybe let's go with 70. And now let's go ahead and preview the changes and scrolling down. We get the business course says and this is looking really nice. Okay, I am appreciating this. I'm just gonna go ahead and do the same for this one. The complete digital marketing. I'm gonna edit this section. I'm gonna go to advance. But I said the margin for 100 dealing, and then the bottom is gonna be 70. And now we're gonna have a similar value here. So next up, I'm just gonna go ahead and make sure that the text is equally long and I'm also going to be replacing this image of one has to border down below her, and I'm gonna show you how this decide will look like Alright, guys. So this is what we created so far, we have this wonderful introduction here in the above the fold section. Right? This picture of me and Jesper, we have these letter from us introducing who we are, What we're about its are just making it more personal. Robin and Jesper CEO said running just frailty scrolling down. We've created our first section here, which is a really nice a color theme and everything included are typical color theme scrolling down. We can see that these air, even these are the 1st 2 courses reintroducing. We have the next section coming here, which will also have made these even writes everything is actually looking really nice so far. Now what? We're gonna go ahead and do it start to prepare for the upcoming courses. Right? So all I'm gonna do here is I'm gonna click here, and I'm going to copy this section scroll all the way down. I'm gonna paste this in here, and I am just going to call this digital mark at seeing courses. Now we're going to be adding in the rest off our courses. But remember, guys, now we're not gonna have all of the complete courses. We're gonna have all of the let's call them axillary courses. Smaller courses coming up and smaller can still be like 10 hours plus, but still smaller than the complete one. So now we're going to go with a design with a three column this science. We're gonna change things up a little bit. So, without further ado, let's move on to part three. We're adding all of the additional courses with the three column design seeing the next lecture guys 6. 97: Hey, guys, Welcome to part three. Let's dive right in. So we've come for in our courses Page already, right? We have done the above the fold section were not created, the business courses and also our complete digital marketing courses. And we have done this in a two column set up right it to calling the sign. Now what we're gonna go ahead and do is adding a couple of extra courses. Now, this is the basic outline that I said in the beginning. And as we can see in the beginning, we were you seeing Dob two columns. Rather. So we're doing two columns for business to for complete. Now we're gonna move over to do three. Okay, so we're gonna have 123 four rows of three columns, and then we're gonna end it all with two rows off two columns again. So 123 and four, Let's go ahead and create those. So this is gonna be surprisingly fast and simple because we have done all off the hard work already. So what, I'm gonna go ahead and do is go ahead and click here to add template. I'm gonna go to my templates and I am going to putting the three column courses template and just inserted. Frankly, yes. And of course, we're just gonna go ahead and go to settings and change the page layout to Elemental full with. All right, so here it is. It's down below here at digital marketing courses. And then we have the good old background here, the oldest sign and everything. But because we have done all the hard work over there, all we need to really do Let's go ahead and right click here, cope it. I'm going to go down to this section and just paste style. There we go. So now we have a white background. Now, I'm gonna do the same for the columns. So I'm just going to right click Coupet and then click here and I'm going to paste style and I'm going to paste style, and then I'm going to paste style. There we go. And then I'm going to remove this button. I'm gonna right click click on delete like that. And I'm also going to remove this header because we already did our own up here. I'm gonna delete that one like that. Okay, so let's just have a look at this design right now and see what we have got scrolling down and we can see that this is actually looking really, really nice. So this would be the first row. Now we're gonna have four rows off these three column set up, right? So we're having the two column set up here, and this is the three column set up super fast and super easy to do. Now it's going to be even easier, because all we need to do is go ahead and click here on Copious. We're gonna cope with these intel, your section go down, pay sitting. So that's two pasted in. That's three pasted in and that is four rights. And then we're also going to go ahead and we're gonna have to rose off two columns, right? So that we're gonna cope in this section now scroll all the way down and we're going to paste it in, and we're going to pay saving. So there we go. So now we have the basic outline off how we wanted to look, We have 1234 and then we have one and two off too. So let's just double check that. 123 and four off the three. Right can see the courses here and then one and two. Perfect. Now all I need to really do is go ahead and change these upright. I just need to go ahead and change the image that I already pre uploaded. I'm gonna change the title, and I am going to be changing the description and off course, also changing the buttons that they actually linked to the course themselves. So I'm gonna go ahead and do this now and then I'm gonna show you the result because we already know how to do this, right? All right, my friends, I just added, in all of the extra information to the courses, meaning I have been changing the pictures, the header and the description, and then spend some time matching the descriptions and matching the headers and everything to make sure that they all look evenly like this. And trust me, this would have been dreadfully boring to watch, but thankfully, you already know how to do this. So now we're gonna look at the results. So here's the digital marketing courses section. Right. So here we have one rope here is the next row now noticed that this takes wants a bit longer. But thankfully, just by adding one extra row in the description they even out perfect this you can get away with that. You just want to make sure that everything is symmetrical like this with the bottoms, right? So everything here is looking really, really nice and clean. So I'm loving this display and as you can notice what I'm scrolling down, there are never three rows shown at once. Either you have one hair and then you have the next row, meaning we have 12 rows being displayed at the same time here. But as you scroll down, this road disappears. And then comes the next one. So we never showed three rows at once. I want to have enough space for that. And then we have the two here and then the two here. So, guys, I am super happy with this aside, it's just one more thing that I am going to go ahead and add. And that is all the way down here at the bottom. I'm gonna go ahead and click on our template once again and I'm going to add in the email often with this smaller section, and I'm gonna click on Yes, and as always, we'd go to settings. We moved to page layout and then l a mentor full with off course. If you use in something like canvas, you're gonna go with cameras, But we're gonna change it back, right? We're not gonna use the sidebar. So perfect. Here we have it. It looks great already, and we know what doesn't. What's so wonderful about this is that we're offering all of the courses here, and then we get to the bottom. With some luck, we're gonna have them sign up to our courses, have them buy something and sign up here. And if they are nervous about buying one of the courses here, they're actually going to be getting one of the courses for free. So that means they get a great introduction that might get a taste for more. It's just a really nice way to build your email list and introduced your visitors tomb or off your products. Right? So I'm really happy about this. All I need to do now, finally, it's just go ahead and make sure that the learn more buttons are linked correctly, right? I want to make sure that they're linked where they're supposed to and off course on the link options. I want to make sure that they open in a new window super important. Otherwise, people are going to be disappearing from your website and from your page, and you want them to go to the core says which in our case is actually on you demand So you wanted to go to uni, but still stay here. Now, if you are selling your products on your own website, you might want to change to learn more to by now, for example. But for us, since we're having our courses and you to me, they actually get to learn by my ending up on the you dummy landing page. So it is a way to learn more, get to the landing page, previews and video, and then perhaps they will buy our material. So, guys, great job as you notice. This was super easy to do except changing the pictures and doing the headers and descriptions that took a while. But this sign was actually super quick and super easy to do, because all we needed to do was used to template and then cope. It pays the style off what we had done before. So now you know how to use the same style across an entire page or across different pages. Super fast, Super quick. Let's move on and start this signing the next page. See you in the next lecture, guys. 7. 98: All right, guys, in this lecture, we're gonna go ahead and start designing our about page. So let's just get started. So we know the drill already with the back end for website, we're gonna go to pages all pages. Then we're gonna find our about page that we have created before then I'm just gonna click on edit and then added with L a mentor. And as always, we're going to go down to settings we're gonna go to There is page layout and then elemental er full with awesome. So let's get started now, guys, in my opinion, because we have done such a good job at our home page and at her start here, patient even been talking about herself and what would you on our courses page? We wouldn't necessarily need an about page at this point because we've been introducing ourselves and what we're about. So Well, however, I'm gonna show you how you can make a quick but still very effective about page. So what I'm gonna go ahead and do is click on the templates here and then at pages I'm going to search for AB about because, of course, is going to be pre made templates for about pages, and then we can just look through, find anyone That looks nice. And I'm drawn to this one because it's it is a very simple this sign, so I'm gonna check it out. So it's a very simple design going on, and we can redirect them to show off for other channels, like a YouTube Twitter. We don't really you step would do use instagram so we could add Instagram here and then Facebook, right? And then there's some additional things in here that we could edit. So let's go ahead and use this. I'm gonna click on insert. All right, so here we are. First of all, let's decide what we actually want to use in here. Now we have the about us. We have a nice background. I'm actually liking this and it kind of placing with our theme already and with our color theme, right. Even though this is likely more orange, I really like it. I'm gonna change this takes. But there's nothing in the design that I want to change here. Then, of course, we're gonna change through that. There isn't he Twitter logo that says Facebook right? we're gonna change it to Instagram. And then we have our story, which I think looks really nice. I'm going to go ahead and actually remove this heart even though we love hearts. That's lovely. Excuse the pun. I I don't think it fits with the design here. At least not the one that I have in mind. So I'm going to remove that one, and I'm going to go down, and I'm actually gonna go ahead and remove the video and this part too. And I'm also going to remove these ones because we're not going to be using in the image carousel. So this is called an image carousel. You can see that they've added in several ones here, there's gonna be a scrolling by if you are actual visiting the page, I'm gonna go ahead and just remove that. I'm gonna go ahead and remove this as well. So right now you're seeing a quite simple in clean this sign, right? So let's start from the top pair. Now we have about us, which I think can be there because that's the way our about page, right? And then we're just gonna go ahead and edit this takes, I'm gonna click care and I'm gonna change. This takes. So this takes right here. I'm going to be editing in a little bit. But I'm going to do however its focus a bit more on the design. Right. So we do have a Facebook, so this is really great, but we do not use or have to Witter. And also it says Facebook down here for some reason. So what? I'm gonna go ahead and do sexually change this to Instagram. If I click on this, we can see that up here. Now, this is say on I come box we used these before. Now what I'm gonna go ahead and do is remove the Twitter one like that and I'm gonna search for Instagram. There we go like that and then down below here, I'm just gonna write instagram. Okay, now, off course I want to change the colors as well because we're using the Facebook blue here, the YouTube red here. But this is some kind of strange bluish color for instagram right now. Instagram It's tricky because they are using Grady and colors meaning a lot of different ones. But the most prominent color for Instagram is the kind of reddish or purplish color that they have. So I'm gonna go ahead and just google it. And in here, I'm just going to search for Instagram Hex Caller Red. There we go. So the first thing, normally you can just go ahead and copy this code, but I know that this is the blue color code. And again, the Instagram logo is a lot of colors are usually there's not gonna be this sort of problem . So we're just gonna go down and check this out. What color is the Instagram logo? Here we go. And then we have the red Violet hex. Okay, This is the code that I am looking for. So I'm gonna go ahead and grab this copy, and then I'm gonna go back. I'm gonna go in, hear clicking here, move over to style, and first change the color off the icon, right? And when I click in here, clear this pasted in and their aid ISS is a really nice and defining color. I am loving that. I'm gonna do this scene with contest. I'm just going to click on content here. We can see it still has this blue color. I'm gonna clear it. Put it in there. And there we go, looking much, much nicer. And then we're gonna add some text in here as well. But I'm going to be doing that often. The design, first of all, I want to nail the design here. And then we have our story right in our story, actually, really like that part now our story is gonna be about how we built this business, why we're doing what we're doing. We want to strengthen the emotional connection. But there's one more thing that I do want to add in here that's super important, and that is some sort of funnel. Now look down here. You can see that there's nothing going on when they come here and they start learning a little bit about those were funneling them toe other websites which we are going to make sure that they will be sent with a in a new window, right, so that we don't lose them as a visitor on our website. But what we also want to do when they come down is give them on incentives to go somewhere else. This is like the architecture offer a website. What happens when they scroll all the way down to the bottom? We still have this menu, but we want to send them somewhere. And what is the best place to send them to? That is going to be the star tear. To start here is all about following them, warming them after who we are, what we're about to then send them to our courses. So simply I'm gonna go here with the elements I'm gonna move over to, but some and I'm going to put it down below There. We're gonna make this really simple. I'm gonna center it. I'm going to write. Start here. Now, this button and the incentive or rather the call to action to click on it is gonna make much more sense when I have read and nail this text, right? But I'm just gonna design everything right now. And I was gonna listen to space between the bottom here and the text as well. So we're gonna keep it small front. Well, let's go with medium. Actually, yeah, that looks nicer. I'm gonna move over to style, and then I'm going to go to the typography because I want to transform it to upper case. I think that looks much better. Great. And then we're gonna go to the hover effect because I love this How perfect We're gonna use grow. So we get this nice effect going, okay? And then we're gonna start editing this section in here. So I'm just gonna click up here, move over to advance that we can see that the bottom there is some padding going on, which makes a lot of sense. That's how we get this nice look. But we want the button to be closer up. So I'm just gonna go ahead and play around with I list to 15. I think 15 looks quite good. At least let's see. Let's preview the changes and see how it looks. So this is what we're having right now. Let's scroll down. We have our story, and then we have this start here, but so this is super clean and super simple. To be honest, all we have done is removed a couple of things. And now we're just gonna edit this takes. I'm gonna set the links in here. We can also see that they have a hover shadow effect. Looking really nice. And then I'm gonna link this starts here to this start here, Page. But first of all, let me right in some description so I can show you what I have read. Um, Why I have written it and I'll show you how it looks like when it's all done and finished is gonna be dreadfully boring to look at. So I'm just going to see you in one second. All right, So this is how it looks and what we've got So far, I have really piece up, period. It says Robin. And just for LTD's a company. This started his journey 2016 with a single question in mind. How do you start making money online from scratch? Now, this is a beautiful of wonderful introduction, especially leaving them with a question. How did it all start? Right. People are here at the about US section to learn about us, so we're giving them the story now in this template, we're following them directly into Facebook. Have also reading that they can visit Facebook to learn about the latest trends in digital marketing Instagram to learn or if they're just interested in our everyday life and then you to to see where it all began. This is what we started. Our journey is if they really want to get to know us who we are, what we're about. We have a lot of tutorials on YouTube and we also have our very beginning on YouTube from when we were doing videos in Swedish and everything and working up the company. Right? So there's a lot of good stuff in here, and there's also a lot of social proof for how much and how big we have grown on this platform. For example, on YouTube, we have ah, believe it is there on 15 million views right now, which is huge. And then I have reading our story and just describe how it all started, right? And then I'm ending the note with this Web site, and business is the result off that, and now we want to share it with you. Start here. So now you might not have read all of this, but I'm basically giving them the story. How it all started, how we learned what worked, and I want to share this that we have learned clearly that works because there's so much social proof on this website already. It's beyond a shadow of a doubt that this system that we have works, they can learn more about it here by just clicking on the start. Here, Page right, So so far so good. Now, the only thing that I really want to change is that I would like to actually change the outlook or that the sign of this part, as you can see, everything is turning or drawing to the right like we have. There's only one road here, and it's put to the right. Makes sense because then you don't need the space in between the columns. But it looks quite terrible. For example, this part, in my opinion. So what I'm gonna go ahead and do is actually go back here. I'm gonna go ahead and cope with this and click care and simply paste style. And then let's go and preview the changes. So it's already looking much better. What I do want, however, is a little bit more space in between these. So I'm gonna go ahead and go back. I'm gonna click on to call him here, move over to advanced, and then I'm going to set some margin to the lift. Let's dealing these and let's set 10 I think will be fine. We can also go ahead and choose to call them here off. This one moved to advance in a D link it. And then we're gonna set 10 to the right here. Okay, so let's go ahead and look and preview the changes and see what we've got scrolling down. Okay, so there's a bit more space in between here, and I'm really liking the look off this. I'm super happy and stoked about this, and it's looking really, really nice. Now you don't need to have an about us page an about me page, but it can be a good idea, especially if you haven't actually included a lot of information about yourself. If you're going for a minimalistic this sign on your website now, we actually have a lot of information who we are, what we're about etcetera in the home page into start here and in the course is page. But we're still doing the about us page in order to learn how quickly and how simply you can create this kind off page. Right? This was done in basically no time at all, and it looks really, really nice. So what? I'm going to go ahead and do now, guys, is that we are going to move over and start this signing. The resource is page. The resource is page is super important. This is where we can have a lot of fun with our affiliate links where we can give and bring a lot of value to our visitors as well, just showing them what we're using, what we recommend and what work. So let's head over to the next lecture and go through and start to signing. A resource is Page. See you there, guys. 8. 99: All right, guys. Welcome back. Let's go ahead and start designing. Our resource is Page. You know the drill. We start at the back and for website pages. All pages we're gonna go to resource is we're going to click on edit and then ended with elements are down. Two settings change the page layout to full with, and there we go. Honestly, it's almost like we have done this before, so let's get started now. In order to start properly here, I actually want to show you something interesting. Now, if you go ahead and you click on templates right here, you'll already know that if you want to use a certain block, we have the block section here. You can just scroll through them, pick a block, start editing it, use it, etcetera. And there are Tom's off blocks for you to use. But there's another thing you can do that Not a lot of people, I think really utilize properly. And that is to go to pages and actually find a page here. That looks really nice. Take that block from the pasted you want to use and then skip the rest. So if we look at this one, for example. We can see that we actually have a pretty nice bloke. A You're not gonna find this in the block section, but this block itself is a part of the page. So what we could do is that we could insert this entire page and then remove all off the risk that is there and just used this block. So we're gonna go ahead and do that right now. We're gonna click on insert, and here we are now scrolling down. We're just going to remove all of these things one by one. There it is. That one is gone. This one has gone. And you know, interestingly, this is actually really nice page if you wanted to use. This is a resource is page you could you conduced riding whatever resource that it is you want to write about here adding a picture off it Here, do the same. Here, Here, This is like this some was made for resource is I can strongly recommend this one, but I want to show you and decided I really like and that you can copy if you want to. You can make your own design, but I want you to know how to do this. So let's continue removing in a couple that we don't want. And there we are. Okay, so let's start doing some editing. First of all, I want to change this and then I'm going to write something like the resource is we use something like that, right, Because we're only gonna recommend things that we use and companies that we actually can't get behind. Now, remember, if you doing a resource is pager your affiliate with some sort of company. If that's a bad company and you are recommending it, it is not gonna look good on you. So what we do is that we only recommend the companies that we used ourselves that we trust and that we enjoy. Of course, if they offer a great service, we're going to recommend them. So I'm gonna write. The resource is we use. And actually, I'm digging this, so I'm gonna leave this for now, and then I'm gonna change this text, and I'm going to write something like here is a collection off. All our most valuable resource is that we see use and warmly rec command. And now I'm gonna do something super important. And we have spoken about this before, right? I'm gonna do this. I'm gonna click here. I'm gonna hit Enter so that we actually, you see, it jumps down like that and I'm going to write disclaimer. Some links will be affiliate links. There we go. And now what you to do depending on who you are, what your relationship is to to your visitors, etcetera. You could actually be writing something extra down below with the corn is something like using affiliate links means or you could even add in an additional run entire page about water affiliate links are and why you use them. Because when people find out that affiliate links is actually when you the owner off the website, get a cut for recommending it and that they usually get a much better deal because of this , then usually visitors are quite happy to be clicking on affiliate link. Otherwise, it just sounds like people, or you are recommending the company for a quick buck. But that's not what it is about. At off you can explain the model off, the company gets a sale, you get a cut and they get a better deal. They'll know that it's a win win win situation. And generally we want to be really open that we use affiliate links and it's really it's a good thing it's a really, really good thing. OK, but for now, we're going to keep this simple. So next up, we're gonna go ahead and start doing a design, and I want to show you what kind of decide if we will be using. I'm gonna click on the plus here, and I'm going to be using it to call them design. So the way that we're going to be doing this is that we are going to move to elements here , and I'm going to be using a there. It is on image to the left. Okay. And I'm going to be using a heading to the right. Okay, so what I'm gonna do is actually put a pretty big padding around this. So what I mean with that is that even though we have layer this across the entire site like this, like the above the fold section, we're gonna make a pretty big padding because we wanna have this sword off box design here , right? So we don't want to use too much takes We don't want to use to big images. So we're gonna make this really narrow. And in this sort of narrow design, we're going to use on image off the company. We're going to describe the company in here, and then we're also going to go ahead and add some text about the company and potentially the deal. So the companies and the resource is that we will be recommended would be blue host. I mean, we love these guys. Elementary, obviously, elementary is great. You don't need to have it, but it is great if you want to go with the full off, fail for creating amazing videos at Instagram Feed back with which is makes life really great when you're doing Amazon FDA off course you to meet and skill share. So these are the tools that we are using and can warmly recommend. Okay, so the 1st 1 is gonna be blue host. So what I'm gonna do here is that I'm going to click on here and I'm going to write blue hosts like that. Okay, now I'm gonna move into elements, and I'm gonna add a text down below Like this. There we go. OK, so we have blue host. I'm gonna click here, and I'm going to be adding the blue host logo. And I've already taken the liberty of going ahead and uploading the images I have turned into J pic. I have compressed them, you know the deal. And if you find your media library looking like this, this is because you're getting a bunch off pictures when you're actually using a template, a page template or even a block template. So don't freak out. If it looks like this, you can just go ahead and click on them. Use more if you will, but click on them and then delete permanently and they're gone. Okay, I'm going to scroll down, and we're going to be using this one. Okay, that is the logo for Blue Host. Gonna click on insert media so you can see that it's really big. You can see that this isn't a good design. If we go ahead and preview changes right now and I scroll down, you can see that I mean, nothing too impressive, right? Not really loving this right now. So what? I mean, when I'm talking about them more boxed in. The sign is that I'm gonna go ahead and click here, right? I'm gonna edit this section. I'm gonna go to Advanced, and then I'm gonna add a big amount of padding looks. Let's start with 200. Let's go crazy. Let's go with 300 like that. Okay. And then I'm gonna dealing this because I don't want so much padding on the top. We could do. Maybe with does not do something to crazy, let's do with two 100 batting on the top for now. And now let's to preview these changes scrolling down here. We can see that there's a lot of space to the life. There's a lot of space to the right, and that is how I want to keep it. For this to sign. I want to showcase the researchers that we have a wannabe straight to the point, and I want to offer them something right. I want to offer them a deal or if there's no deal like you don't have to use affiliate link . If there are no affiliate, for example, you're just offer them the link so they can grab it and start using it. This is all about bringing value to the visitors, right? Never forget that is about bringing value. So what I'm seeing here is this is just way too big way we wait to be and I want more space for the text. So I'm gonna go back, and I'm gonna change the rays show here. So we're gonna do something like, let's move this to 28. 72. Maybe this is pushing it a little bit. Lister 35 65 and I'm gonna preview changes and see what we have. So still too big. In my opinion, I'm gonna move back here and I'm gonna move it down. Let's move it to 28. I'm gonna preview the changes again. All right? So, actually, now we're talking a bit more, right? I'm going to go ahead and increase this padding even more because I really want to talk this one in. So let's go with 400 for now and see what we get. Okay. And then 400 here, and then I'm gonna click. Um, preview changes. Okay, so this is pretty much exactly what I am looking for. I am super happy with this now. There's just one more thing that I want to do with this one, and that is to put it in a literal books, Okay. And the way to do this is super simple. Now what we're gonna go ahead and do is first start off with this column. Now, I'm gonna click here to edit the column. I'm going to move over to style, and then down here, we have Border King. Now all I need to do is set the border type to Saul It I'm going to solve border type, and then we have its upright bottom and lift. If I click on one like this, it actually gets a border. You can see that, right? And then I'm gonna go ahead and I do the same. My click on editing this column and I go to style and I go to border and I just change you too solid, and I click on one. So now this one is getting a border asked. Well, so if I go ahead and I could come preview changes, we can see that these are actually having borders around them right now. And this is looking really nice. It's just one little thing. And that is that this line in between here that actually doesn't look too nice does because this separates them and I want them to be in one big, nice books. So what I'm gonna go ahead and do is I'm gonna go back here and I'm going to start with editing this column. I'm gonna move over here, and then I'm gonna d link these values because we want to remove the right borders. I'm gonna click this 20 gonna move to this column, and then I'm gonna style the border, and then I'm gonna dealing, and I'm going to remove the left one. I'm gonna click this 1 to 0. And now let's just preview these changes scrolling down. And isn't this looking so much nicer already? Big, big fan off. This really happy about this now? What I want to do next up to is actually to adding some padding because I just think it's a bit crammed up in there. It's just too tight. So I'm gonna go ahead and go to editing the column just like that. And now I'm gonna move over to advanced in here, and I'm gonna sit a padding. And let's try something like San. We have to remember that these air quite signing now already. So I'm gonna do the same for this column, right? I'm gonna go with Paddington and then click on previous changes and just see what we're getting. All right. So nothing too crazy. I think we can actually up this quite a bit. So let's push the limit a little bit. We're gonna go with 30 going to do the same thing here. I'm gonna press this one up to 30 and then we're gonna preview the changes again. There's a lot of previewing This is how designing works, you know? So this is starting to look more and more lovely. I am digging this. Okay? Really, really nice. So what I would like to do is actually increase the size a little bit here. I'm gonna go ahead and do this. You can see that it doesn't look too good here. Right? And yet when we go here, it's looking quite nice. So I'm gonna click here, and then I'm just gonna go ahead and increase this to let's go to 29. 30.2. That's gonna be fine. And I'm also gonna go in here and I'm going to add a bottom down below here. And we're going to write something like try now on this bottom just like that. And of course, I'm gonna want to style this. We've done this so many times before, right? I'm gonna transform it into upper case letters like that. I'm gonna keep it small size, most definitely. And then I'm also gonna go ahead and move it into hover and hover animation and then grow like that. So let's preview these changes. So this is looking pretty nice. And next thing I'm going to want to do is actually to remove the space in between here because this is having too much space in between and I want to send to the image. Let's go ahead and do those two things. I'm gonna click on this image. I'm gonna center it just like that And we can also way, way, way down size. This one is go with medium it. You can see when it loses too much quality 9. 100: And then I'm gonna go ahead and click on this column right here. I'm gonna move to advanced, and we have the padding, right? We're gonna dealing the padding and then departing to the lift. We're going to remove that. Just keep it at zero. And now this. Preview the changes again. All right, so this is looking so much nicer with this space going on right here. Now what I'm gonna want to try next. Since we're not seeing too much movement on the image right here, which probably has to do with the image size, I'm going to go ahead and start playing around with the buttons. So let's go back. Let's click on this button and let's try centering it and then click on preview changes. All right, so now we got some results. We can see that this body is right down below here. Now, clearly, this image, in my opinion, is a tad bit too small because even the small button is bigger. So I wanna have this crammed up. Nice looking to sign, but I don't want to have this big buttons. So let's go ahead and make it even smaller and check it out. So this is looking really nice, guys. Okay, so the button is still a bit bigger, but because of the height, I'm actually digging this. This is more straight to the point. So all that I really need to do next is go ahead and click on this section right here, and I'm gonna go ahead and click on copy, and then I'm gonna go down below here and I'm going to paste it in. OK, now, off course, there's a couple of things that we're gonna need to change in this one. We're gonna go to advance, and then we're gonna set the top patting. We want to remove it like that. They would go. And then for this one, this upper one want to go to advance if we want to remove the bottom patting. OK, so now we can see that they are actually connecting. So now if I go out and preview the changes and scroll down, we can see that they are connecting. And that is looking really, really nice. I am digging that now you can see that this line is actually extra strong. And that is because there are two lines that are cutting in and cutting through here. So all we need to really go ahead and do is go back and then click on one of these were going to go with this one for now. And then we're going to click on the right column and we're gonna go to Style Border, and then we're gonna find the top border. We're going to click zero. We're gonna do the same with this one border style border, and then we're gonna could get too serious. So let's go out and preview the changes. Okay, so it's starting to look much nicer already, isn't it? So if we go ahead and look at how many resource is we will be using is going to be 12345 and six Resource is. And right now we have to. So let's just go ahead and prepare that right? So what I'm going to do is prepare this a little bit. I'm gonna click on editing this section and then I'm going to remove the bottom padding just like this. Okay, this is looking really nice. Now, remember, I have already gone ahead and I have removed the top border for these. So now when I go ahead and I could be this entire section, I can just paste it in here and it's gonna work. That's three in total four, five and then six. So let's go ahead and preview these changes so fantastic, we have added in all of these ones. Now all I'm gonna go ahead and do is to start editing them and then add in the information that I want to add in and when I've done when I've added in the images, when I have read in the headers and I've read in the descriptions which you already know how to do right and, of course, linked. But some and everything. Then I'm going to show you the final results. So I'll see you in just about one second. Alright, guys. So here we have the results. I think it looks quite nice already. I've been a very simple but good looking job off writing the the header and the descriptions for all of these courses. Now there are a couple of more things that I want to do in here and the 1st 1 being that I want to increase the size of the header and I also want to increase the size of the description. And then I want to center these section in this column. You can see that the Texas going here, but this one the try now button and the logo is actually a bit far up in this column. So one thing in a time, right? So what we're gonna go ahead and do is I'm going to start by clicking on Blue Host, go to style typography, and I'm going to be playing a little with the site. So let's try something like, you know, to win c five. Let's go with 25 just see how that looks. So it's looking much better, in my opinion. So I am digging 25. I'm just gonna straight on a stick with it. Usually I go back and forth and try different, but I am very happy with this. Then I'm gonna go towards the description here, gonna move to style and then typography, and I'm going to be playing around a little bit with this as well. So let's go ahead and try 70 and see what we get right. And I'm gonna preview these changes all right. So I am digging these big, big times. You can see that there is a lot of more space sort of being created in here as well, which I'm really enjoying now. You might also notice that for some reason, we still have the top layer off the border here. So I'm gonna go ahead and take care of that right now, too. So I'm gonna go back. I'm going to go in here to this column is gonna be style border. And for some reason, the top one is on. I'm just going to remove that just like this. OK, so this one, the size is looking great. Decisive. The description is great. Now I want to send through these two, so I'm gonna go ahead and edit the call them right here. Okay? It is in this column and then here at layout, we have the vertical line. Okay, So vertical align. I'm gonna put to middle just like that. And now I'm gonna go ahead and preview these changes so you can see that this gets put in the middle just like this. And I am digging that big time. I think it's looking really nice I'm super happy with this. Now, one more thing that I actually want to do and that is to increase the padding off this one just to give it a little bit more space all around. Okay, so I'm gonna go ahead and go back, and then I'm gonna go here. We have the padding. I'm gonna increase it to 40 like this. Four day and Ford. And then with goes without saying we need to do the very same thing in this one. Advanced. I'm gonna do Fordice straight on, just like that. Anomalous preview these changes. All right, so this is looking really, really nice. Now, let's just go ahead and copy. Paste this to all of the rest, right? It's super easy to do. All I'm gonna do is I'm gonna start one of the column. Doesn't matter which one. Let's start with the left one. I like a gun Copy, and then I'm going to paste style and I'm going to paste style and pace style. There we are. I'm gonna pay style, and I will pace the style as well. And now let's do the very same thing for this column. Just gonna go ahead and copy paste style paste The style all right to the style has been pasting for everyone. Now we're gonna go ahead and do the same with the hitters. I'm just gonna go ahead and copy the header here, and then I'm gonna move in here and just paste style. And finally, let's do it with the description, okay? Just gonna copy. Go down here and I'm gonna pay style guys. It doesn't get more exciting than this, does it? You're gonna continue pasting this style. And now let's go ahead and check out the previews. This is the previous, and now we're having quite a big change, aren't we? So we have more padding in between these ones, right? And we're also seeing that there is that these air centered The header is bigger. The description is bigger. It's just looks really nice, don't you think? I just think it looks really nice and really clean. Now they they have the ability to go ahead and try it out. We have the description for it and everything. So I'm just really happy with this design. Overall, there's just one more thing that I want to add and that is just a perfectionist in me, and that is that we see that these are thicker. So all I'm gonna go ahead and do is go back. I'm going to be choosing this column. I'm gonna go to style border and then the top when I'm actually gonna make a little bit thicker. And I'm going to do the same here. I'm gonna click here, go to style, click on Border, and then make the top a little bit thicker. Preview these changes and check the top. Now we see that it's just a bit thicker and it fits in with the rest off the design. OK, so this one we got for free this we have created ourselves looks really nice. Now, this is how you go ahead and you create your resource is page. Now, guys, don't forget you have Pretty Ling's. So go and grab your affiliate links were for the ones that you have affiliate links for, and then put affiliate Ling into your pretty links to which is gonna help you with s e O and also give you trackable and nice looking links. Then you put that link into the button right here, right? So they have something to click. And if you manage to connect in a company, if you talk to them and gets a special offer Fantastic. A lot of companies will give you something to your visitor for being an affiliate. So we are gonna move on to the next lecture, and we're gonna start editing and designing our contact page. So see you guys in the next lecture. 10. 101: Alright, guys. So let's move on and start designing our final page. The contact US page. Let's get started. So we know the drill already, right? We're gonna be at the back end of our website. Go the pages, All pages. Then we're gonna find the contact page and then click on edit Colligan aided with Elementary. This is what we did before, remember? And then here we are. So we know already that the previous stuff that we have done is still gonna be in this section right there. Just gonna put everything into one section and we can do what we want with it now. One thing with the contact page, whether it's just contact, contact me, contact us, doesn't matter what we call it. One thing that's really important about this is that when people click on the contact page , they want to contact you, right? I mean, it's obvious makes sense, but my point here is that they want to go directly into the contacting the contact form they want to write to you. This is not the place to be putting a bunch of opt ins. A bunch of extra information, etcetera, etcetera. So I make sure going to keep this super duper simple. Just like this. We've done all the heavy lifting already. We have everything nice and tidy, but I'm gonna show you how you can add a nice background picture to just, you know, living it up a little bit and give it a slightly nicer design. But I want to keep this super simplistic this sign just straight to the point. With the contact form itself, I think it's perfect. So what we're gonna do is move over to settings and then change the page layout. Now you'll notice that there's no sidebar. However, the section itself is affected by this default layer. You can see that the section does not go all the way to the sides. Right? But if I change it from default to full with now, we can see that the section actually moves all the way to the site. And don't worry about this. This code still works. If I click here, you can see that the in the visual form is just a piece of code. But if I click on the text is gonna transfer just like this. So don't worry. If you get this kind of short code notices, it's still going to work in the final version. Okay, Now what I'm gonna do is just add a nice background picture to this. That's really all I'm gonna do. And I've already taken the liberty of finding a background picture on picks a day that I enjoy. We know how to do this already, and then I have compressed it. So it has a nice size and already so all I'm gonna do it's actually click up here, Ted. It the section I'm gonna go to style and then background and then classic and add. Now, I'm just gonna go ahead and choose this bird and click on insert media, OK, And next up on just going to see how it looks like, you know, with the default settings, I'm going to click on preview changes. Okay, so not the most impressive thing in the world, right? They're a couple of things I want to change, and that is to actually make this one fit a little bit better. This is quite soon in already. And then I want to play a little bit with the colors. Okay, so let's go ahead and do that right now. I'm gonna go in here. I'm gonna be its style. And then we're gonna move down to size. I'm gonna change it to cover. There we go. And now I'm just gonna could come preview changes to see what we're getting. Okay, so I already think this looks much nicer, actually. Like how it kind of goes into both the picture of me and Jesper and into this form right here. Now, what I am not liking about this, though, is the very strong colors going on in here, so I'm not a big fan of that. So what I'm gonna do is actually just melted in a little bit, right? A lot of the field has been off course. Besides, are nice red color that we've been using also White. We've been using a lot of white, and this is kind of breaking up the white a little bit because of the quite strong gray, blue ish theme going on. So what I'm gonna do is go back. They're gonna be its style, and then I'm gonna go to background overlay. Okay? So I'm gonna go to background overlay, gonna be at normal, and then I'm gonna click on classic here and add a color, right? I'm gonna add a color overly off white just so it melts in a little bit more with all of the rest of the white. For example, the white in the forms, the white in our menu, even a little bit of widening a picture. It's a black and white picture. So I'm gonna change the colder here. I'm going to click on White just like that, and you can already see how it melts in. Right? So this is how it was before. Look how it's just stands out pops a lot, which could be nice, but not for this design. And the more a pass ity that I give it, the more just fades into the background. So I'm really digging this. So let's preview these changes, and there we go. Now I am loving that. So that literally makes it a background picture, which is exactly what I'm aiming for. It's just a background picture. Students stand out in any way. The important part is the form. Right. Okay, so that's it. Guys, this is the design. Super quick, Super easy. I mean, it's all we need all the deed. Waas went over to pick Sabei, grabbing nice background picture and then put a white overlay to to make it more into the background. And that's it. So you'll notice that you can make a design from scratch like we have done for the home page for the start here page, etcetera. You can also use templates, and it's changed them, as you wish were just used to template straight on. And you can do something as simple as just put a background picture even when you have been using the Gutenberg editor. Okay, so there's a lot of good stuff in here, a lot of ways to do it. But name point is, now you know how to design and how to design. Really, really? Well, okay, so that's it for the designing off. The pages were not going to go through the blog's because a block it's gonna be a blood. We're gonna be focusing on the content there, so we're not going to be going through to design so guys, by now you should have a really nice grasp on the designing itself, right? And if you've got any questions, will, of course, be in the Q and A. Just remember to be creative, used the templates and use what you have learned and then make your own decisions and have a lot of fun. This signing is fun, guys. Now, before we move on to the next section, we're gonna move on to the next lecture. We're gonna talk about what to think about now, when we have designed these pages. And there are a couple of things that I think you should really know about that super important to know now that we have designed these and what to think about for the future, when you've done the design itself and how you move on from here. So see in the next lecture, guys. 11. 102: All right, guys. So you have done the designing off your pages. First off, all great job, amazing job making it this far and creating your own design. Now the question, of course, is what do I do next? Well, there's more content coming up, but I did want to talk about a couple of things with you that's going to be super important . And the first thing that I want to talk about is to continue optimizing. Now, guys, the first thing that we did in the optimization section waas to optimize our home page. Right? So the https Roman and jesper dot com that is our home page. It is optimized, but what we also need to do is go ahead and run the Ping dum, too. The up time, whatever it is that you choose to use to speed, test your website and run that optimization test on the start here page on the other pages such as the courses paid and of course, the rest of the patients as well they about the resource is to contact it said etcetera. Now all of these are individual pages, so we're gonna need to do the speed test on them to make sure that there's nothing in there that's too big. This taking up too much space, for example, when you use a certain template within L. A mentor, sometimes those images can be really, really large. So you might want to go ahead and compress those images to make sure that your website is loading faster. But still, we want to make sure that we continue optimizing every page that we are doing. And whenever you're doing any updates, make sure that everything is looking good right now. Next up is also the same about all of the pages that we created to make sure that we're adapting it for mobile and tablet user experience and user interface. Now we did this for Robin and just a dot com. That is our home page. But we have not done this with start ear courses about Resource is contact those pages, so we want to go ahead and do that. Ask well, right. Just make sure that everything is looking good, that it is sensible where the things are placed. Remember the thumb zone and everything, so make sure that whenever you're doing in a page, make sure that it's always tablet and mobile adapted. Give it a nice UX and you I experience because this makes a huge difference. Now remember the way our website looked in the beginning was looking something like this. And then we spoke about the user experience, and we designed it differently in order to make it nicer for the mobile and look at the difference. I mean, it is like night and day. We changed up the thing, first of all with the menu. So it's has a much higher user experience because it's not covering such a big part of the screen for no reason. And then we took care of the design where the words were just coming together and being too crammed up, right. So make sure that we're always focusing on user experience and user interface for the mobile and tablet one we're done designing for the desktop. Now, the next thing I want to talk about is to search engine optimized your website. And don't panic because you actually haven't gone through that section yet. Unless you've been skipping section, which is OK, but we don't expect you to know about this yet. Now, in an upcoming section we're going to be talking about S E right search engine optimization . So what you'll be learning in there about keywords, keyword research and how to properly utilized them in headers entitles in your post in a different parts of your pages, etcetera. Take that information. Take all those things you will learn in there and apply it to the pages that we just created. Right? Do you want to go ahead and search engine optimized the pages that we just created and designed Now the next thing I want you to keep an eye on is the bounce rates. Right now, the bounce rate is basically when someone goes to your website and then exits the website just about as quickly asked, they entreated. Now that's known as a bounds. And usually this scene us that there's something wrong. Maybe they didn't get what they were looking for. Maybe something is broken on the website, but you want to keep on eye on this, and if you go to the back end off your website down, it incites because you've been following since the plug in section. You'll know that we have installed monster insight. We've installed Google analytics and everything. So it's all set up and we go to reports down here, you're going to see something that's known, asked the bounce rate right. And a average bounce rate is gonna be for about 40 to 55%. This is general known as an average bounce rate. Anything lower than that is gonna be really, really good. But depending on what kind of website you're running, you could have it slightly higher as well. But what? You're mainly looking for our changes. So, for example, if you notice that a certain page has a super high bounce rate and it doesn't make sense why you might want to check that out. So, for example, if you have a certain product page, you know, it's what this is a really high bounce rate. You want to go in and see if there's something here that's not working. Is this something here that's broken? That's often my turning them off. Somehow. It's just a big warning signal, and it's just gonna hint you towards improvement. Now, if you scroll down here, you're going to get something that says here ago. View full posts and pages report now if I click here is gonna take us directly to our Google analytics. And the great thing with this is that we can see exactly what kind of bounce rate we have at which pages. So if we scroll down, we could see that the 1st 1 is just has the forward slash share. This is our home page, right? Because this is just Robin and desperate that come with nothing extra tude. We can go to the right than we can see. Our bounce rate for this page is $79.84 percent for this date, which is huge. And it also makes sense because we've been building the site, but it's still been alive. We're gonna expect this to be better in the upcoming time. Now, if we scroll down, we can see the bounce rate for the courses page for the start Here, page about page blood, etcetera, etcetera. And you want to keep on eye on this overtime to make sure that hey, used to some special patient as a high bounce rate than any other, for example and some pages Oh, just gonna make more sense to have high your bounce rates on right. So, for example, if you have some certain download page, they just go in, they grab the download and they leave is gonna make sense that the bouncer it will be sky high. So just keep that in mind that the percent adjusted 40% to 55% which is generally quite average and and, ah, good bounce rate. That doesn't apply for every page. Just try to make sense of what kind of page am I having and doesn't make sense that people leave this quickly. For example, it products page, you don't want to have a high bounce rate on at all. Okay, and then, finally, I just want to say guys update freely. Whenever you're adding in, for example, in new product or a new update or just some use in your company, don't be afraid to go in and actually put that in the front of your website because elementary is a drag and drop to its super fast. It's super easy. You get to see the preview when you're editing, so don't don't be afraid to do updates and change your design over time, because this is a lot of fun right now, you can make a design kind of said it. Then forget and move on with your life. You know, if you want to just focus on the business but don't be afraid to keep the signing because it is so simple. Takes no time. And it can have a huge impact on your visitors on your customers, etcetera, etcetera. So I just want to say, Amazing job making it this far. Let's move on into the next section and start learning about woo comers. Okay, seeing the next lecture, guys.