Design beautiful landing pages that generate quality leads | Serban Cosmin | Skillshare

Playback Speed

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

Design beautiful landing pages that generate quality leads

teacher avatar Serban Cosmin, Landing Page Designer

Watch this class and thousands more

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

Watch this class and thousands more

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

Lessons in This Class

11 Lessons (1h 41m)
    • 1. Introduction - Designing a landing page in Photoshop

    • 2. Finding inspiration

    • 3. Creating a wireframe

    • 4. Designing the header

    • 5. Designing the first features section

    • 6. Designing the second features section

    • 7. Designing the process breakdown section

    • 8. Designing the testimonial section

    • 9. Designing the final closing argument section

    • 10. Spacing the elements

    • 11. Importing into Instapage

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

Community Generated

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





About This Class

In this course you’re going to learn how to design a landing page in Photoshop that’s optimized for conversions and will help your business generate more leads.

This series of videos will take you over the whole process of designing a lead generation landing page from scratch. We’ll begin by finding inspiration on the web, create wireframes and then build a landing page design inside Photoshop.

Once the page is completed in Photoshop, I’ll use Instapage to build a live version and start getting leads.

Now in addition to 1-2 hours of videos this project is packed with resources, you’ll receive the fully layered Photoshop file of the landing page created and the Instapage document, which you can upload right away and start using it as a template.

This course is aimed at students that have previously used Photoshop and are at an Intermediate level.

By joining this course you can either follow along and create the same page, or start your own project and build the landing page your business or product needs.

Exercise files and layered PSD: Download here


Are you ready? Let’s get started!

Meet Your Teacher

Teacher Profile Image

Serban Cosmin

Landing Page Designer


Been designing landing pages for a couple of years now, created templates that have been used by thousands of clients worldwide.

See full profile

Class Ratings

Expectations Met?
  • 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.

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.


1. Introduction - Designing a landing page in Photoshop: Hey, guys, in this class, you're going to learn how to design a landing page in follow shop from scratch. We'll begin by finding inspiration on the world. Create wire frames on the build a landing page design inside for the shop. Once the pages completed in photo shop all years instapage to build a live version, start getting leads. By joining this course, you can either follow along and create the same page, or start your own project to build a landing page or business or product. Now, in addition, with 1.5 hours of video, you'll receive the fully layer for so far off the landing page created in this course. And they instapage document, which you can upload right away and start using it as a template. Now keep in mind that this course is in the students that have previously used for the shop . So if you're ready, let's get started 2. Finding inspiration: Hey, guys, notice time to find some inspiration for our Bitcoin landing page. This is the first website I'm going to visit. It's love, but that ninja, all of these links will be provided in the course description, so make sure to check that out. Ah, these are the most popular ones and the ones I use to find inspiration and find layouts that could fit with what I need to build, which is Ah, Bitcoin oriented regeneration landing page. So Levada Ninja is the 1st 1 They provide inspiration for landing pages. I start by searching for different keywords related to my my needs. And I looked for special layouts and different element groups that get my attention. And I simply take screenshots off each individual section that gets my attention. So if I like a specific one, I just hold down command shift for, uh, that's on the Mac, and I just take screenshots as many as I can. Now, this is also a great exercise to see what other people are doing in the same industry. So if you would be looking for real estate, he would be searching for real estate landing pages, and that would help you see what others are doing in the industry were kind of specific. Elements were kind of specific section days use, so that helps make a better idea. And yet the next one is going to be dribble dribble dot com is really, really well known for the quality off the work, even though most of these landing pages are just work in progress. They're not finished concepts. They're not actual designs. They're really good to get a glimpse on current modern trends and maybe see what can work for you. Now we dribble. I tend to open up each design in its own new tab and then just go through them on same as always. Just take multiple screenshots from the designs that life. Now the next one is cold landing folio that come Sometimes some pages might catch my attention and I will stay for longer than five seconds the foreman opinion. But most of the time this is what I do. I simply take screenshots and then I'm going to use those screen shots too. Create ah layout. But I'm going to show you that later. Let's move onto the next one. I guess you heard about my interest before. This is a great place to create mood boards and Teoh see inspiration. So I usually just go ahead and look for specific cured elements like landing page design, landing pages on inspiration, design process and then include specifically words like Bitcoin currency banks, financial stuff like that. So I can see again what people in the industry are doing. Uh, the same things that apply just takes creation. It's OK, I promise. This is not a swarming because it looks like it's pretty interesting once you get into it. But I'll show you why this is important. So I d end off this video. I'm going to work in Milan out milano dot com that allows you to create boards. Mood boards. Ah, let me not go over this one. Beyonce is usually the less place I looked for inspiration. I don't think the quality is up to par with things I can get on dribble, but these are more functional designs. I mean, these are actually designs that have been implemented every life comfort with the designs from dribble her, which are only limited by the imagination of the designer s O. This is the last place I look for and then I go to mill a note and bring everything together. This is ah, no taking up. I create a canvas and then upload all the images I saved up on the desktop by taking Screenshots. Let me just remove the settlement and I'll go ahead the inside the finder and select all of them, and you can just drag and drop them. Mila note allows you to have free campus with 300 elements. I guess so you can have multiple boards on the same campus without having to pay to pay anything. I just then a line everything up. Let me speed this up. Well, as you can see are moving everything, one underneath each other. On this way, I can look at all of them and right at the top. I see something like that, that particular layout I can hold down the the old key, and I can just duplicated or simply move it. And I'd like to move it on the right side and create kind of a mock up off things I like. This actually starts to begin looking like a landing page just because it has kind of the same ratio. And I just play around with stuff and that should give me a direction for when I'm going to go inside the wire framing part and start actually building the layout I want to design. So this is really useful toe simply imagine how it could look like, for example, I really like this header and the way it goes with Grady int and are probably gonna use that. But right now I'm just trying to figure out things I like and things I don't like things I want to see on the landing page. Things I think are going to fit with my specific needs of building a Bitcoin or inter landing page that is a regeneration and the wage Indian and working on the message flow. The message floor I'm going to use for this particular process is gonna be what? Why, how who and cold to action Now, what is going to be the header area? And that's the place where the client is gonna know what he's going to get. What are you going to get if you're going to sign up, you're going to get the free account you're going to trade Bitcoin stuff like that, then followed by the future sections. Which are Why why is going to cover all of the benefits are going to get by signing upto this particular service? So this do the following two sections are going to focus on that selling benefits, followed by how how is going to break down the process in steps. And it's going to help the clients get a better understanding on what steps they need to take in order to take advantage of the offer or how to use the platform how to get the most out of it Now, At the end of the page, I'm going to have testimonials. I'm going to have social proof that this service works and the service helps people, then followed by a closing argument with the call to action, which is usually a button or again a four, depending on the landing page, are going to build. Hopefully, that makes sense because it's really important to have an idea off what you would like to build beforehand before even going in tow wire framing before even going into sketching ideas out. So, uh, this step is one of the most important ones off the process. Now, in the next video, we're going to start building at the wire frame, and we're going to sketch out our ideas and start building our landing page. 3. Creating a wireframe: Hey, guys. So now I'm ready to start wire framing and building the foundation for our design. I've chosen to go along with cuckoo. This is a Web app that allows you to quickly put out ideas and you can even export them and have up to six canvases for free. So you don't have to pay anything Teoh to use it. It has a pretty simple interface which are like so you just strike and drop elements onto the campus and start visualizing your landing page layout, as you can see now have duplicated it and started Teoh define each individual section so I can start putting in multiple elements on each one. I'm going to simply right on the right hand side the message flow for each individual section. As you might remember, we talked about the message flow in the previous lesson, so be sure to check it out. If you have any questions, the first section is gonna be what, as we discussed where we were gonna make sure the visitor knows what they're getting. If they sign up, followed by why we're gonna least a couple of features and benefits on why they should sign up, then how? Which is gonna fitter each testimonial in the closing argument. This final section usually contains the bottom. Now I'm gonna sign a separate rectangle for each individual section so we can start blocking in every single element we're gonna have. Whether that's a headline paragraph for additional graphical elements, I'm going to try to select every single section and adjusted to to have a better, better look on the whole layout. Now, I know that most people prefer sketching out on sketchbooks, but I find this this is way easier to create multiple variations and create different layers for each individual section. So you have more freedom to experiment. But of course, this works for me. It doesn't matter that it will work for you. Just try it out. Try sketching, try doing it in a Web app is I'm doing and see what works best for you. Now let's start blocking in the different elements. The top on is gonna be the logo followed by the main headline and a small paragraph underneath. The most important element is gonna be the form or the, but depending on the goal. So in this example, I'm just gonna have a small button and I'm going to make it orange just to stand up. That's placed them in the middle, and we can carry on with the why. But first, let's make enough space for it, because I want to have to two separate sections where I can present benefits for this force one. I'm thinking about going with a standard three column layout, as this is pretty common traveled landing page designs. Once I'm happy with it, I'm going to try and create the second section. But first, let's let's give it another color just toe just to make it different from the header. The most important thing I found when doing wire framing is to not get stuck on one idea. You just have to keep on experimenting until you find something you're really satisfied with. Now it's time to create the second Y section, and this one is gonna have a different layout. Of course, I'm thinking of maybe having a new image on the left and then some graphics on the right, or maybe a header at the top and then two columns. I think that going from center to tree columns to two columns looks pretty, pretty great. But again, you shouldn't be locked in with this idea. I'll just keep on experimenting. Let's get to the how. For starters, I'm gonna go with something really simple, like just having a play button in the middle of the section. That's a pretty common team. So I'm not doing anything crazy just trying to build a basic layout and then start doing variations and see what works and what doesn't. The way I'm picturing this play button work is that if you click on it, a pop up will appear with a video with a video presentation off all the steps you need to take in order to take advantage of the offer. Now let's move along to who? I'm going to duplicate this shapes and use them as the base. I'm thinking about maybe having just, ah, big testimonial right in the middle, and then I can see if I can have another idea or differently off for testing moments. Let's move around to the final closing argument. Usually what I have there is variation off the header. So whether that's just the headline in the bottom or just the paragraph for the bottle That's what I usually go with. Okay, so the first design is pretty much done now. All I have to do is duplicate this one while holding the option key in selecting everything or by copy pasting it. Now I can start experimenting with different layouts, for example, the first section pretty much like and I'm happy with it. So even though I said I don't think the first idea that comes to your mind and use it, I'm probably going to stick with it. So let's just experiment with the third section that features a couple of benefits. I think that having two lines off content next to an image could work great here. So let's put the image on the right side only I know that's an image, but for now it's just a rectangle. And on the right side, I'll have maybe two features for the House section. I'm going to probably leave it as it is, Andi, for who I'm thinking about maybe going with the two columns layout, maybe have two testimonials in the same section. There's not a lot that can do with the final section, but maybe just have ah paragraph on the bottom. So the paragraph I'm gonna use in the heather probably does the same one I'm gonna use at the bottom s. Well, let's just stay on the space not live yet and move everything around so we can fit one more . Mr. Variation is going to probably give me everything I need to create one final design. So let's duplicate the 2nd 1 and move right into doing a couple of variations. I start with the header and I'm gonna go for ah left the line style, which means that I'm gonna try and align everything to the left so I can see how that would look like Let's make 11 big content block there instead of having tree. And for the second, very for the second feature section, I'm going to duplicate this one and have four rows off, uh, benefits. Let's move this play button to left as well. And that may be a content block. Messed it. So where I can actually have the steps written down in case the visitor doesn't want to see the video. Not sure what that can do for the testimonials, but for the closing section, I'm gonna probably add the logo there. So these are my tree options. Now it's time to decide what sections I'm gonna keep And what sections are not gonna work with what I have in mind. So let's just move everything to the right to have enough space for our final layer. I'll just applicator the last variation. And But now that I think about it, I'm just gonna select each individual section that I like. So the 1st 1 is gonna probably this bay, this one as I already can picture the design, Then I'm pretty. I'm pretty happy with the tree layout column I've done in the first place. Followed by this four rows or features No on the how part. I enjoyed this particular section. Even though it might not work, I'm willing to put in the time to see if it does. Afterwards, I wanted this layout with two separate testimonials, as I think that maybe having to testimonials my might look better. And for the final section, I'm probably going to go with the third their design where I have a logo, a closing argument and the bottom. I'm pretty happy with the result, and you're going to see throughout the whole process. How important it is to already have ah, layout in mind and not do a lot off thinking on each individual section. Now I kind of know what I want in each individual section and what I don't like. I already visualized my Atlantic page, so I'm ready to get started in Photoshopped. 4. Designing the header: Now I'm ready to start building my landing page one sub down the wire for Let's go Ahead and create a new document which is 1200 pixels wide so I can place my guiding marks at the center and on its size. Then go and adjust campus just a campus to 1920. The reason why I do this is because I want tohave every piece of content like, ah, text and images and icons inside this 1200 layout. So right now I'm trying to do the color scheme. I simply have a couple off rectangles which I applied the color scheme I was given in the brief. You received this brief. Ah, inside the course. Just check out the comments or the course description and he should find it there. So if you want, you can go along with it. So let's group this to every name, the color scheme and are served by embedding Ah, the wire frame. This world frame will be placed on top on top of all the other elements, so I can make sure that I can toggle between it and make sure I'm on the right way when I'm building the landing page. So let's rename it to wire frame to rename a layer. I simply double click on its name. Now let's make the background white and start developing our sections. I'll go ahead and create a rectangle said It's wit Teoh. 109 120 with the height depending on the high to want to have on your specific section for this one, I'm gonna go with 800 pixels. Once I'm done with that, I'm gonna added the rest of the elements the rest of the shapes I made for Dodgers sections , so I'll have to adjust them to make sure they fit with my needs. I'm probably going to go with 500 pixels for each one, but let's see how this goes. I usually use guidelines. Two separate each individual section. That way, I'm making sure that whenever I start building Atlantic Page, I already have a view over how the other sections are gonna look compared. Toa that one now create the first group where I'm going to place the first rectangle. The rectangle dead represents the hair. Let's rename it and now I can move the rank turning on the inside. Let's create ah, layer above it and right click and create layer mask. That means that everything that's gonna be placed in that in that layer it's gonna be contained inside the shape element. For example, I want to go with Grady in similar to what I've seen when I was looking for inspiration to access the Grady in tow, just press G and then at the top on the left side, on off the screen, you're gonna be able to control the radio. Let's take the logo and place it where we wanted to, where we wanted it to be. Holcomb, NT or Control T. If you're on a PC so you can transform that specific element, I've chosen to go with a diagonal radiant just because I think it looks way more interesting and more dynamic than just ah, regular horizontal or vertical Grady int. I'm trying to use the colors. They gave me the colors off their brand. But of course, some some changes might appear once I start using images. But let's go ahead and create the headline. I'll make it white and the front is railway to have more control over your text element. Please hit committee or control T and the character panel is going to open up. So now you have more control over your type. I'll just go with 50 50 pixels for this one. Usually I stay around 40 to 50 for the headline. Once I have that, I'm gonna move to the second headline, the secondary one. Just create the new tax box. Let's base it in and I'm going to use 24 pixels for this one. Let's move it a bet. And I really think it looks pretty good so far. At this stage of the process, you should be afraid to try out new positions for each element and try out new layouts. You would be less likely to do so at the end of the project. So this is a time to experiment. As you can see, I've just created a shape elemental rectangle, and this one is gonna be my foreign field. Now, keep in mind, this might be the most important element on your landing page, so you need to make sure its placement is perfect. So right now we're gonna add the bottle next to it. I simply hold the old key or option key and drag it to the far right to duplicate that element. That shape element. Now that's gonna become my my bottom. I'll double click inside it so I can modify its color, and I'm gonna sample directly from the color shape that I've previously created. Let's duplicate this as well, select everything and make it 15 because right now I want to play something right beneath the four. That's Ah, regarding the terms of service. So I'm including this line because usually you have to agree on something when you submit the form or when you create an account is good from time to time to simply take a step back and look at the layout you've just created that will help you build better layout and make sure the spacing is right. For example, the logo seems a bit toe bake for me, but I'm not gonna just it just yet. Let me let me clear some of this layers first. Now I know the way I handle their season, probably the best way of doing, but usually at the end of the project, I go to the document and make sure every single layer is named and placed correctly. I think the form looks good, but I want to have a form label for its field. I'm still experimented with the with the secondary color, something that's neutral, something that works well with this current layer. Let's duplicate that and create the call to action. We're gonna have start trading. So that's the only element. The only text element and I'm gonna bold up to make sure we stand stands out more. I'm really starting to like how this Heather looks. I can already imagine it how a picture would affect it. So I like to have a picture that doesn't go over over our text, something that goes well on the sides. So that's the does the next trick. So I'll have to goto on Splash because this is one of the best, ah, the best places to get free royalty free images that are pretty high quality. So I started looking for something that has a computer in. It's something that has a user using a notebook or a computer, but I have to find one that has the layout, the words with my need, something that like this example with that guy from the back? But I need something, something better. I'll just keep looking. Maybe have notebook inside it, or let's see this one. It was downloaded it real quick and check it out. I'll just save it on my desktop. Okay, then go. Go ahead and place it. Place it on your heather. As you can see, it was placed right at the top off the group. But I'm going to place it underneath my Grady int and degraded. I'm gonna select multiply from the blending options. And as you already say, this looks pretty great from the start. Just some small placement adjustments and I'm pretty much sold on it. Now the only thing I don't like is that the old colors weren't really preserved. So I'm gonna simple them again and create the Grady int that face toe a transparent, transparent background. So I just switched them up using X and go with dark blue on the left and this orange on the right. Try to see how it will look with different different layer styles in different capacities. See if it improves the design or not. I'm just gonna go with normal and lower the opacity of it. What I usually do at this step of the process is create shapes that have specific heights, so I can make sure that the spacing between elements is pretty equal. But this will not be the final, the final spacing between elements. I will make a special video at the end where I go more in depth on present, this whole process of spacing out elements correctly. I think this looks pretty good so far, but have a couple of changes I want to make real quick. First of all, I would like to change the second headline. It's fun sized Teoh, 21. Drop it a bit, so it's not as powerful as the as the main headline and make the med main headline Make it all caps. I think this this looks way better than before, but of course this is only my opinion. It's gonna be all upto the client if he decides to go with it or if he wants any changes before Now, this is this is what I'm going to go along with for the rest of the course. Now I just want to show you a quick ah, split difference between the wire frame and the result we got just before we're ready to go to the next section. So you know how important the wire frame is in making sure that the design is gonna be consistent. 5. Designing the first features section: Now that we've recently completed headline Now it's time to move to the second section and present our features. In the previous lesson, we've went over the whole process off designing the main header section. Now we're going to move to the next one and we're gonna build. The first section represents our features the first section where we're going to present the benefits offer by the landing page. Now let's go ahead and create the new layer. And as in the previous video, I'm going to create a layer mask even though I'm not sure I needed this time as the background, it's gonna be completely white. So I have this idea of placing those three columns in Inside the rectangle. The rectangle is gonna be all white. And let's first adjusted to this weight off the guidelines, which is 1200 pixels and apply Your color is gonna be white, and I'm going to define it by adding a drop shadow. And then I'm gonna go for a outer globe. So for this shadow, I'll just go with multiply and for the outer glow Ah, just a normal shading, but with really low opacity I'm pretty happy with it. Let's see how it looks. If I go a bit over the help, Heather, I know that I've placed the rectangle on top of the header section. I will have to readjust, but not right now. But each and every element is gonna have to be readjusted. But for now, let's start adding content to it. I'm gonna go with small headline and let's this like the old caps. Move it down a bit. Of course, I want to make the phone size smaller. Maybe 24. Now I'm looking for the content I'm gonna place there. We're going to start with this one with this slime peer to peer Bitcoin marketplace. This is gonna be our headline for this Section 24 7 looks about right now I have to look for the content and what I'm going to place right underneath It will be a paragraph. That's the that's the candidates selected his duplicate this element so I can work work on it. But I first have to define it where I would have initially placed it. Here it is control a Teoh, select everything, make it dark. And now let's move it in the right folder, so it's visible. So it's on top of the rectangle. Let's replace this line up Tex with just 17 we're gonna your 17 from are now on paragraphs . Let's find the color that could work well with this one. I'm thinking about the light. Ah, light grey. Combined with some blues, it's not as visible as I would like it to be. So let's go ahead and change it a bit. Slightly darker, slightly darker. Yeah, I think this is This is where better? I'm gonna copy that And at that color to the color scheme. So I'm gonna replicate 11 shape element and I'm gonna apply discolored double, double click based it, then this is it. Now I'm gonna use that color throughout the page for some, for some elements. Let's face everything out a bit and I'm going to start working on the 33 column layout. Initially I had in the wire frame. Now let's move this up a bit, and I'm gonna create 33 separate shapes just so you can see where I'm about to place the content, maybe have a car design for each one, even though they're kind of small for it, but I'm probably just gonna go with standard. I can headline and and description right under in it. So let's start with the 1st 1 It's a pretty small amount of text. Solis, just replicate this one. Make it smaller adjusted, and I'm selected and paste my content here. So I'm not sure if I'm gonna have a Nikon there or what's gonna help or what's gonna happen . But I'll figure that out. Ah, during the process. So let's have ah, the last party moved. And let's use that Ah, similar to a headline, but something that stands out more than a basic headline Gonna make it bigger. Place your right above it. I'm not sure about the color yet. Maybe I have something like the red I've used inside the butter. I think that looks way better than than before and slightly adjusted 30 for now that I look , I look at it from above. It needs to stand on more. So 40 40 looks about right. I'll adjusted using my arrows. And let's group this this these elements and duplicate them by holding out old Oh, I I rather the wrong elements in the group. Let me find it. Each one is this one. Okay, My butt. Okay, select them both. Command G, then renamed by double clicking on the folder name? No, I just doublet Kate Itron by holding the old the bulky and moving the whole group. So this is the layout. This is how it's gonna look. Now I only have to change the text. I still like the second line. If you are a buyer, Yeah, based that in. And I'll have to adjust the top headline. I'll just go with 100% something that's relevant to that specific paragraph. No, for the last one. Opium. Paste it and replace this. We're number one. That looks pretty pretty simple on I'm pretty happy with it. Even though I haven't spent a lot of time on this one. I'm pretty happy with it. And how it goes with the page. There's just collapsed this once and group done together. But now that I think about it, I'm guessing I'm gonna experiment the bed and see how it would look like with icons instead of this headlines. So let me just remove them real quick. This is my way of selecting. I know There's a better way. This is what I'm used to. Soho, please don't Judge, Please don't judge me. Okay? Now I'm using. Right. Fund. Right front is an app that has all the material icons, the ones provided by Google. I can quickly search to them. And quickly, Dragon, drop inside the Photoshopped document. Please keep your mind that all of this I consulted free and available on Google site. I'm going to include the link in the description off the course. So you will have access to all of these icons is not something you have to pay for it. I just like using this This. So as you can see, I've placed a child Icahn for the 1st 1 because he's relates to support than for security and protection. I'm gonna use the lock. Does that make sense? Right. And for the 3rd 1 I'm probably gonna have something. Ah, security shield. Okay, now let's adjust. This one's a bit. Uh, I like it the way they look, but there are big too toe big right now, so let's make them smaller first. So, like the 1st 1 now on, make it smaller that me quickly align all of these and I lose the color from the color scheme. It is the first threat and see how how that looks. I'll copy all copied the layer style and pays them on top of these two elements. No, I'm not sure if this looks OK, I'm feeling like it attract way too much attention. So I'll try something more. Sado, maybe a Grady Int. Even though these ingredient, if I'm using the dark blue and the orange to burnt orange, it's is probably too hard to one. It's even worse than before, So I'm not sure Maybe maybe I'll just go with that light gray, you said. I mean, let me see quickly limit toggle between the before and after I'm a bit conflicted. Let me see. Yeah, I will be conflicted because I really enjoy the headlines, the simple typography. But I like the cycles as well, because I think they they had a benefit to did the benefit. Uh, let me let me just change it to the life Ray and see how that looks. Maybe it's a bit more Salo. Yeah, I think I like it better than red, but that's just the preference. So for now this is hung gonna I'm going to continue with the design with this icons on. Likely with that said, I think we're ready to go to the next section seeing the next video. 6. Designing the second features section: So in this lesson, we're gonna create the second feature section, which is actually the third section off our design. Here is the wire frame. And as you can see, we have four rows off different benefits so we can start building that right away. What I'm gonna do, I'm gonna deprecate that particular headline. There's just move it inside the appropriate group and one paragraph line. So I'm gonna have ah headline than a paragraph line. And next to it, I'm gonna place a Nikon pretty straightforward layout. Just a line. These Ah, let's do left the line for this paragraph. A movie. Try next. It That should be. Okay, let's get the content now for this one. I'm gonna go with the ones below. Users can easily exchange Bitcoin etcetera. Let's paste that inside. Now, I don't have any content for the headlines, but I'm gonna make something up. Um, exchange should be good. Something really simple on Let's left the line this as well. So it's easier. Teoh edit one side applicators group that's group them together and named this particular Group One exchange. Okay, now I'm ready to duplicate it by holding are the old key or the option key. Let's let's change the visibility on the rectangle, because I'm probably just gonna go with a straight white background. Okay, Once I have the stew, I can select both and with the option key, drag it to the right. And now I have my layout, and I'm ready to input my content. Let's go. Let's go and find the content for each each individual line. So I'm gonna use the Discover one for the 2nd 1 I'm not sure about the the headline just yet, but I'm gonna first replace all of these and then think about the headlines now, usually what I would do, I would simply as the client what they wander. But for this exercise, I'm just going to make it up. That should be good. Now let's go ahead and change the headlines. The 1st 1 is about discovering more, so I'm gonna have ah, order types. Ah, the 3rd 1 is about funding. So let's see. Margin marching funding. And for the last one year less machines this one first. Okay. And for the less one, it's about custom custom work, workspaces So religious have works right there on now I'm pretty happy with what I got. Knowledge is find icons for each individual group. Let me rename the first, so I know exactly I don't make the mistake I did before. Now let's go into right Phoned and Allegis Look for something that could fit with this this for So First let's go. Which exchange change? Yeah, let's place this one. Maybe have it at 45 degrees control come committee to rotate it and let's place it on the left. Double click on the layout to enter a silent and go to color overlay or no, let me just go ahead and have a stroke for it. I was simple. This light gray and two pixels looks good and just, uh, take the field to 0%. That should be that should be enough. I'll try and move these to the right a bit just to have enough space Enough margin between the graphical element and the paragraphs. No, I'm still not sure about the positioning if I'm gonna go just vertical or have it sideways . But for now, I'm gonna leave it like that and hopefully hopefully it's gonna work out. Well, depending on how the other icons are looking because I want to have a consistent look for each and for each individual's group. Now I need to look for another icon. Let's go for order types with the shopping cart. Maybe this one looks pretty pretty decent. I'm going to apply the exact same styling it like I did on the previous on the previous icon. So just right click and copy styled and place it on top of it. Maybe have have it outside, so it doesn't look so crowded. That should be okay. Let me just move it. The bed. No, I'm still trying to figure out how I can make everything look proportionate, but that should. That should be fine. By so far. Let's go to outline, Okay? And I think it's time for the next icon for margin funding. I'm not sure what can work. A mistrial chart, maybe. Ah, pie chart alighted there. And the same thing I did with the other icons just just double just placed the style on top of it. Let's start looking for, ah, new icon for the workspace. I'm not sure whether I can have maybe something stacked on each other or edit. I would not see it. I wonder how it but I probably just have the cycle. So something that shows you how you can add it stuff. So I have pressed it based on the style on top of it, and do small adjustments with with the arrow keys. No, let's align them. Nine does, too, and the 1st 2 center aligned them. I know this might not be the best time for tutorial, but I usually like to stay some doubts so I can see how dollar elements stack up against the new layer. If you stayed too much time zoomed in, you're not going to see how it looks compared with the other ones. So picture to zoom in enough from time time. I know that I think about it. I think I'm going to go with the first idea I had, even though I said, Don't get locked on the first idea, I'm going to go in the previous section and just and just enabled the 1st 1 with the headlines. Not with Dikkers. I think having to too many icons can be detrimental and no. Right now, the second feature section looks more interesting, not having to compare yourself with the one above it, as it had a really similar layout. Just before I wrap this section up, I'm gonna change the positioning of the outline for each individual element I'm gonna go with inside because, as a zay said on the margin funding, uh, those strokes are way too close to each other, so I'll just go with the center positioning for every single icon in this section. And now I think we're ready to move on to the testimonial section. 7. Designing the process breakdown section: OK, guys, Now that we've finished the to feature sections is time to move to the how part where we gonna put ah, play button and some content on the right that's going to break down the whole process. Let's start by, I think direct ago which is going to define this section. Let's change the size 21 1920 by 500. I've went ahead with 500 for most of these sections as I feel they need to be balanced out . Ah, With this one, I'm gonna add the background image, so I'm gonna have to do a clipping mask. Let me group them first. Every name, this process. Okay, so this is the Forge section. I'm going to go right ahead and create a clipping mask, as I have said and now it's time to find a new image for it. I'll go into Chrome and let me first figure out how the computer works. Okay, Now I mean to Crumb, let me just go to us. Precious dot com This is my favorite place for royalty free images. Ah, I need to find an image that is not complex, something that shows the the user engaging with the content but doesn't overlap over all of my element. So I'm gonna just look for Mobile and I'll browse through them until I find something I think could work with my current layout. All of these images are pretty great. So beyond on Splash, recommend axles that come. That's also a great a great place for royalty free images. But this is my favorite. So I found an image. Let's downloaded. I'll just save to the desktop and go back into photo shop and plays that image. Okay, now I can adjust its position and let's flip it because I want to have the content, the paragraphs on the right and the headline and I wanted to be as clean as possible and not interfere were with it. So let's move it down, Okay? This already blends really well with the background, and now I cannot radiant I'm gonna go with might the colors the same way I had it on the header. I'll try from left to right diagonal receive if I can find the blending mode that works, maybe color. No, there is a lot of contrast in this image, so I'm not sure what's gonna work for it. Ah, let's see one of these. I still don't think they're good enough for the header of image. Multiply worked out perfectly. I didn't even had to add it Anything. But with this on, I'm guessing it's gonna be a bit harder. So let's lower the capacity a bit and now create Ah, layer on top off that and using the Grady Intell on going to the one that goes from a color to a transparency. And first with the dark blue, I'm gonna drag it a couple of times. Now I'm going to switch toe orange and live it to normal. I think this looks pretty good so far, and it's pretty, pretty distant start. Now that I've duplicated those layers, I'm trying to get something more contrast. Is something more vibrant? I'm not sure. Hamas success. I'm getting out of it, but I think I'm going to stick with this. This look is it's pretty good, and I can already picture how I'm gonna place their paragraphs on the right hand side and the button on the left. So let's slightly adjust the rectangle because it was offset by a couple of pixels and group everything so I can make sure the background is separated from the other element. And let's start by duplicating one of these groups, I'll select the headline in the paragraph and just moved them in the right in the right group in the right section, just above the background. So to keep things consistent, I'm going to use the same phone size for the headline and the paragraph when whenever I can , whenever I'm not limited by the elements. So right now I'm starting to add it. The headline I'm just gonna go with How do I get started? It's a pretty basic phrase. All of this can be adjusted in the revision stage, so I'm not too worried about what I'm gonna place there and let's let's have this line here . I mean, I'm gonna make it white because it's going to stand out way better than that, right? Okay, let's adjust the container. No, let me just drugged this over and duplicated so I can include the steps necessary for the person who visits the site to take advantage of our offer, which is a free trial. So let me go with the first step and that's create your wallet. The second step, it's gonna be connect your credit card and the 3rd 1 is probably just something simple, like buying any Cryptocurrency. So this looks, this looks OK. Let me just adjust spacing between each each line. So I'll hit comment T. And from here I'm gonna just the line spacing. I'm pretty happy with that. But let's let's move all of these elements a bit because right now they're not centered in this section. This looks a bit bear. I'm gonna adjust this paragraph and only have it two lines and somehow separate that part with the headline and the paragraph and the steps on those those parts separated. And let me just use Diarra's toe freedom where I need them to be. And now I can move on to the play button selectable lips, ellipse toe. Andi, let me just drag it here. It's going to probably fit somewhere in the middle off in the middle of the left hand part of the section. Uh, let's try it. No, this is way too small. I first tried Teoh make it a small, as is the icons above, but that's way too small. So I'm gonna replicate it on place it behind. And I'm just going to use that selection to create a Grady int. I'll create a new layer and with the great dental are just just drug it a bit. So while create ISS fading effect for the button, it somehow asado. But you can still see it. And I probably just place the 1st 1st 1 the first smaller one on top just to make sure it's really visible. Let me look for and I can now play. Aiken, I need something relating similar to the icons above from the second feature section. This should be okay. I'm in. Drag it in. Okay, I've placed it, and I'm gonna apply a white white color tid. So color overlay white. Okay. Might be a bit to sado. I know I said that like the way looked this way, but I'm probably just gonna do the first idea and place the first the lips on top of the defeated circle. So let me re size that element. Ah, committee. And I think that this looks better with that fading effect. I think it makes it pop up more makes you stand out more on gives it some dimension. I'll play with some blending modes here to see if anything looks good. This looks pretty good, even though it's kind of similar to just having get normal and with the Lord capacity, which for now this should be okay. Now I'm thinking about a way on how I can improve this specific part of the steps. Eso Let's just remove the numbering system and move everything to the right a bit and let's try. And that's a Michael's that might might go well with the Slayer. So are going to write fund and you look for some icons for this one. The 1st 1 is gonna be a wallet. Obviously, let me see if I liked any of these Dragon Drop and let's adjust it by holding down shift and place it where that line would go. And, of course, I'm gonna double click and apply a color overlay off white. But let's first find Nikon for each one. A credit card for the 2nd 1 makes sense, right? And for the 3rd 1 maybe a maybe at what? No, not the wallet, because I already did that. A shop a shopping bag. Let's see, Maybe that one Yeah, even though it kind of looks different from the other Americans, maybe because it has kind of, Ah, squarish looked at and it doesn't fit with regard directions. So let me try this one and see how that would look. I mean, I know it's not the best way off just placing Ikenson top of each other, but I'm just trying to figure out if the layout would look great. Let's try this shopping cart. I need to place it first. Now I really gentle if it's gonna work or not. So let me delete the first ones. I think it's pretty decent. I'll just have to increase it a bit. And let's rename them CART Card and World and now double quick, uh, color overlay and the default white one. And not just copy and paste the dealer style. I have to do a couple of small adjustments, so let's just move everything to the left a bit. I mean the text content and the mere justice container, and I think this is pretty much done. I don't see any changes I would like to do just now. I feel like This is a good a good layout. And I'm think I'm ready to get to the next section right before I line everything. Okay, let me just remind them. And now I can move to the testimonial section. See you in the next video. 8. Designing the testimonial section: Okay, guys. So now we can start working on our testimonial section. As you might remember, from the wire frame, we had two column layout so we can get started with that. First off, let me select the rectangle to and create our section. So let's GIs click once said it a weight off 1920 by 500 pixels. Let's place it right underneath the process and select a guiding ruler just toe the limit. That space. I don't plan to have any background image in it, so I don't need I donated. I only needed to define the section. Okay, let's re name this folder and we can start building our the same Ono's. So first off, let me let me draw the first rectangle. Okay, let's place it here and adjusted just enough So you have enough space for two of them. So as you can see, I didn't go right straight to the middle middle ruler. I just went slightly to the left, so I have enough space for two. I'll copy the layer style from the rectangle from the second section because I want a similar look to discard this well So I just pasted that in and the mutism in a bit to see how it looks. It has a pretty subtle drop shadow, which are like, Now, keep your mind that I'm going to use placeholder text for this one as I don't have the testimonials they want toe have in the final design. So I'm gonna have to look for that. First, I'll paste it here on, but no, I have to make a container first. Ah, this is it. Let me work a bit on the phone size. I'm gonna choose 17 for this one, but probably I'm gonna have to go bigger with it. Or just make the rectangles more. Let's move it in the center. In the central Landis on. I'm not sure it fits. Aligned Well, yeah, this is This is OK. And on top of that, I'm going to have the name, the name of the person that's giving out the testimonial. Let me just put something random in it. I'm sure it's gonna be changed later on the process. Let's apply a different color. T'd. Ah, black shirt should be okay just to make a send off from the testimonial. Even though the testimonial usually needs to stand out more than the name. But in this case, I'm taking this. This might be a good choice. So let's let's adjust the positioning off every element and then create an ellipse where the avatar off the person who left the testimonial is gonna be placed. Now, I want something similar to the wrecked ago. Really subtle shade. Let me just move everything up. Okay? So I want the really subtle shape shading and based it in Ah, yeah, it's really subtle. A zig n c. But let's increase the drop shadow size a bit on its capacity. It should be This should be better now. Now I have to find an image. They could go there as a placeholder until I until we get the real cunt. But first, I would like to replicate everything. So let's group everything first, uh, this whole, this this testimonial, I'll group it and then holding the old key. I just read it to the right so I can see if the this layout is what I'm looking for before I invest any more time in it. Let me change the name Real Kurt, just for the purpose of having something different on the right side and that have something exactly the same. But this looks OK now. Amount to finding images for it. As usual, I'm going to go into on splash and find Just look for people. But for some reason, all I'm getting is is woman eso I I'll just take a couple of quick screen shots off the one , citing that could fit with what I need. For example, that one. Let me go ahead and place that inside final place embedded. I'll select the head shot I just took and let's try and place it above the Circle A Z can see. I can just place it above and then just hit click and while holding command on that specific shape and it's going to create a selection off that shape so I can see exactly where that shape is placed underneath the image. But I need to select it first and just move the off the shape of it. I'm gonna lower its capacity. Maybe I can see exactly where I can place it to fit correctly inside. Let's zoom in a bit and dragged these around, Okay, Now I can make that selection. So holding down command, click on the shape player. It's creating. Ah, selection the right click and copy in front. So this is the day Madrigal let me just a justice and make it smaller so I can see that. Ah, rectangle behind. And it looks just like another line with a drop shadow. So this is the look. I'm going for leads at the Nikon. Maybe a cold, Uh, and I'm thinking about placing it at the bottom of the rectangle. Let's see how it looks on the on the side. Now, I don't think that I'm going to kill this, but just to see how it would look like let's color apply and select that dark gray I've previously used on other elements. Maybe the red No, this is it, Okay? And it looks OK, but I have a feeling that centering get might look even better. So less than like this element on aligned amusing Caroline Mental. I think this is better than before, and the design is not as blend as it was before. So let's just replicate everything and move it to the right. Make sure make sure it has the correct spacing. And now all I want to do is change the name just for the sake of it. Once I've done that, I can go and group everything together and defined these two groups. So I know which one is which. Let's do some small adjustments, some positioning issues because I'm thinking about the white space I want to have their. So this is the wire frame, how it looked like and how the design looks now. But I'm thinking that something is missing. So maybe have, ah, clients a client section, a small section where I feature the most important clients that are using this platform. So let's have ah headline. And then that's more paragraph right underneath. I'll have their our partners. It should be OK. And I'm thinking I already have a line for for that particular section. Let me just look. Yeah, use the last one. It is the last one here that's adjusted of it. Just so it looks better proportionate and center line. It would Thea others the other headline. Now I'm ready. Teoh, move in And at the images off the partners. I already have that saved up. So let me group this first, and now I can go ahead and place the the partner. Slow goes, I'll make them smaller bit and place them right under net. I mean, make them a little bit bigger just so they can stand up more. And they are lined with a two column testimonials above. Let me just create a rectangle real quick just to define this section group group this inside here. Let's just move it right underneath so I can see the logos and adjust the positioning of it . Okay, this should be good. Now, let's drag ruler there to define it. And I can remove that. That one. I think there is enough space now for us to build our final section, which is gonna be the closing argument. So see you in the next video. 9. Designing the final closing argument section: Okay, guys know where you're about to design the last section. So let's take a look on what we've done so far and see how that section should look like Now that we're ready, I'll just replicate the first the first section, the heather section. And just by holding down the old key on moving down now in the wire frame. I just had the logo, uh, headline or a paragraph depending on what I'm gonna go with. And the button underneath that bottom is going to be linked to the first section, and it's gonna drive. The visitor received a click right to the first section where they can sign up for the for the free account. So let's start editing this. I'm going to make the logo bit bigger since it's ah, vector. That shouldn't be a problem now. Just elected the brush button and clicked once so I can edit this particular layer. I'm selecting just the Eiken as that's the only element from the Logan going to use. So let's rename it and color overlay white. I'm going to place this right above the headline right about there. I'm gonna just it a bit after I'm done with this. So let's remove the headline. And I'm just gonna be left with this paragraph and I want to have a bottle under it. So let's move everything up, Teoh. See how that would look like I'm guessing I'm gonna have to make that paragraph for a little bit bigger. So I'm going to use ah, maybe 24. Yeah, 24 Looks better. Let me just apply that. I still feel like we're missing something. So I'm just going to duplicate that paragraph. Let me just hold down out and drag it up. And I did it, and I'm gonna have a cold traction there, so I'm gonna have something that represents what it's about. Two happened if you click on the button below. So sign up for a free account today. I'm going with 30. What I've used throughout this page for headlines, Okay? And let's just move that underneath and we can deal with the for now. I'll have to remove the four field and the form label filled. Ah, this all red. And I'm just gonna be left with this button. This water is gonna go right underneath the paragraph. Let me crew those together now I can move both of them. Ah, let me select them first. Okay, Now let's drag it into the center and line it with everything else. And I'm pretty happy with what we got so far and museum in so I can check the marches now, making the small adjustments just by been looking at it and seeing if it looks right, I'm gonna make sure and I have every single margin equal once I finished the design. So I don't worry about that at this stage. So let's drag the clipping mask and and make this section a little bit smaller. Okay, lets like this elements and just do small adjustments just to make sure everything looks proportionate. And there's enough space at the top, not the bottom. Teoh. Make sure these elements are the main focus off that section. So let's crop everything, and I live a small space at the bottom off the page just so I can have the copy right there . I'm going to look for a background image. I'll goto and splash again and look for an image that could work for the bottom section. And this is really important because that final section needs to feel part of the whole layout. So I've just found one, and let's place it inside, See how how this looks. Okay, I'll have to go up. And then you, sir, clipping mask. Okay. And then we just remove the 1st 1 As you can see, for this one, the great aunt overly is way too powerful. So I have to make some small adjustments with this. With this lab, I really want to make the guy that sits on the computer, the guy that uses the computer to be visible right now. It wasn't so. I'll just try and have the computer as well as his silhouette in the background and maybe just move it to the right of it. Just so it doesn't interfere with the content. As always. How do small adjustments here and there until I'm happy with what I've come up with? So let me just play around with the blending modes on the radiant overlay on top off this image and place a couple of new once by hitting G and accessing the greedy intell switching between the two primary colors. I only want to have the silhouette of the guy visible and not show a lot of details. I can compare it now with the process section real quick, just to make sure it's similar. Visually, it's really important to have a consistent look. As I've just said now, just replicate one of these text elements to have the copyright content as a previously mentioned, This is just the beater. I'm not sure if the client is going to use it or not, but, yeah, it's pretty. It's pretty normal to have it. Let me make it smaller so it doesn't stand out as much as it does now, and that should be okay. Let me place it outside of this group. Nothing. The design is pretty much finished now. Only have to make small adjustments and make sure the margins are equal and make sure the spacing and everything flows well together. So that's what we're going to cover in the next lesson. 10. Spacing the elements: So I've started the process off, making sure that every single element has the correct spacing by creating shape elements and then re sizing them to specifics heights like they do in this example with 100 pixels and I do a couple of variations and then see what works. Usually the shapes I end up using in the header are the ones I'm gonna use throughout the landing page. So this is very important. This is probably the hardest part getting the header, right. Once I figure out all the spacing between the elements and something that looks good something that the looks descent, I just move everything in place. And then I move on section by section and applied those margins. Doing it now at the end of look process lets me a focus more on the layout and lets me focus more on the way each element looks without having to worry. If the spacing is correct, I could have done this the first time. But now that I have the whole design, I have a better idea on what it looks good and what doesn't another reason? I like adjusting the spacing at the end of the process is because I'm going over every single individual section and this is the perfect time to catch small spawn problems I have with the design and being able to adjust them on the spot. This is like having a second look on your design, but from the outside, without getting stuck on the graphical part. And you guys don't don't forget you can always reach out and ask me if you have any questions. Is our love to see what are the issues you had with the design, how you solved that and how you went about creating this landing page? I'm curious to see what you guys came up with so I can review them and give you pointers on how to improve in the future. Seeing the next video. 11. Importing into Instapage: Hey, what is up, guys? So in this lesson, we're gonna transfer this landing page design from further shop toe alive. A life page. A patient has a form that actually works. So I'm going to use instapage for this one, in case you don't know. Instead, bitches landing page builder and it allows you to create landing pages by dragon dropping elements onto your page. And that's exactly what I'm going to do now. I usually start the process by overlaying a wide shape on top of the whole design and sitting It's a pass iti to somewhere around 80 80% then going inside the builder, uploading that image and setting it as a background image. So going to settings, background, image. And I said I said it here. That way I can see the whole layout. Let me just work a bit on this one. Don't don't forget settings, background image on This is it. Now you can see the whole the whole template. Then I started in new sections at section, and at this point I'm only defining each section, each individual section. So I'm just going one by one, adding a new section and then dragon. The guidelines were east section ends or begins. Now that this is over, I'll go inside photo shop. Ah, just the visibility on the specific layer and going to the first section. Now I'm going to export each element Ege graphical element that I need by going inside the layer panel right, clicking on the specific layer I want to export and then going Quick Export s PNG. I'm sitting up on your folder now, and this allows me to make sure that every single element that I export is in its specific location and I can find it easily when I can upload them inside Instapage. So right now, I just want to add new image. And I'm looking for my first image, which is logo. So once that is a bloated, I just go with insert and I place it on top of the element from the background image. So right now I know exactly where each element is going to go. So I just have to create those elements though specific elements, for example, for this headline, I just went at new headline based on then, but as you can see didn't pick up the old cap style, so I have to rewrite it again. But that's OK. I think it's going to only apply for this specific element. So as you can see, you have control on the alignment of text, the phone size, every every single thing. But first, let's go and select our funds. Ah, I've used the railway for this project, so I'm going to settings funds, looking for that specific fund, adding it and let me select it from the headline as well. Okay, this should be okay, Normal and let me just adjust the size. It's pretty cool that you can actually check the fun size from Father Shop and applied the exact same one here. As you can see, I've placed it where it should be. Just adjust the line height, and it's a perfect fit now. Not every single element is gonna be exactly the way it was designed, because there are some small imitations with the instapage pillar. For example, the with where the country goes can only be 960 pixels. You can usually work around that by just having images, but I'd like just trying to adapt the design, making sure it works as intended with just a couple of small, small detail changes. Let me adjust this paragraph. And now let's add new a form. Now the form is the most important element on our page. So let me just delete that for field at our label, the label we had inside the Photoshopped document. It's safe and let me just place place it over there. First. I need to move it, and I can adjust the for field and Aiken, move the button around to make sure it looks exactly like the design from photo Shop. Now I need to customize it a bit to make sure it fits. I'll double click, and this allows me to access the settings. Let me just sample that color. Okay, copy and paste it. Then when I go inside, I'll go to button style and just place the color called. There. You can adjust the radius. You can adjust the phone, you can adjust the phone size, the call to action, and you can even have certain effects. But for this particular examples, we don't need to go into all of that. As you can see, you can also customize the for field now mean the settings, and I'm gonna use this slight. Great. Let me copy that. And we're going to use this color on certain elements as well. And it's pretty great that once you added a new color, it stays there. You will have, ah, color palette available and saved, so you can use it whenever you need. Um, again, let me just grab that one real quick copy and pasted in. Adjust the phone size and just move it in place. Now views black just to see where I'm positioning it. But I need to change the color image of every single moment. Now you can align elements. Okay, This looks great. And I have toe export the background image. I'm going to group everything together and duplicate that specific group Margit and then quickly exported. Now, of course, you can optimize it better than I just did. But for the sake of this, uh, course, I'm just going to save it and uploaded instead. So I know where it is. Let me just add it in. And now I have to change the color. You can play around with the positioning and you even have the option to add the color overlay on top of it. But at this point, I don't need that. So I just like the text and make it white. And here is our first section. Now we're ready to move to the 2nd 1 I'm going to speed the process a bit because there's nothing really interesting happening. I just go about and export every single element. For example, distract angle is going to be above the above the first section. First self. I need to I need to recreate all of these elements first and then add, because once I had that rectangle, I won't be able to see where each element is position as you might have seen, that rectangle is larger than 960 pixels. So I need to find a way to adjust all of the elements to work with that, as you can see, for example, for this tree, I just select those two elements. I group them together, and then I duplicate them. So now I need to have enough space for the rectangle. Let me just add it in and move it back. And as you can see you, you can multiple select and then adjust, Ah, multiple elements to make sure they fit in. Now, this is not the perfect way of doing it. I could have just created the background images, custom background image that include that that rectangle as well, and I didn't have to worry about it. But I think this is where better? Because you can make make changes on the fly if you need to. If you committed that design and you created a special background image for it and you need to adjust things slightly, then you'll have to redo the whole process again. So now we've reached the second feature section again. I'm just re creating this, uh, this layout. And once I have a couple of elements done, I just copy and paste them and move them, move them around. As you can see, I'm still doing small changes and I'm still aligning stuff as I didn't know how. This will work inside the 960 picks off guide. But so far, so good. These are only small, small changes. If I were to hand cold this page, it would have probably taken me days. But this is so much easier and just the fact that you can add the form and you can connect it to your Mel chip list or other CRM. That is the most powerful thing about now. As you can see, I have reached the process section. So for this one, I'm gonna slow things a bit. Because as you can see, the paragraph underneath, the first headline is going out of bounds. So I need to adjust that I still wanted to to line to line layout for that specific paragraph. So I'm going to slightly adjust it and modify it until I that fits. Let me just like this one as well and align them, Okay. And now I can start working on the details. I will just have to deprecate this paragraph. I must have done that. I can go ahead and copy and paste this street lines as you can see it. Sometimes it doesn't pick the exact styling, but those are just more changes you can make on the fly similar toe the previous sections. I'm just going to export those Aikens one by one and then Adam inside the builder. I just said them one by one. Move it, Move them in place aligned them and just the small adjustments. Still, I'm happy with everything. Now I'm going to export the play button, and I'm gonna place it a bit more to the right, because the left is more constrained. And once you added the background image, As you can see, you have the option to have parallax. But for this section, I'm not going to use that now. Now I'm ready to pick up where I have left and go for the testimonial section. Let me just save that first and I'm ready. This design doesn't have any crazy graphics in it or any crazy background animations built in mind for it, so it's fairly easy to recreate it. As you can see, I'm just heading the elements on top off where the elements should be. And then I'm exporting the graphical elements, which are quite a few. For example, this this testimonial box it only has tree graphical elements and two paragraphs. So that's not that's not that hard for the image for where the avatar goes. I'm going to use the shape element, and inside that circle shaped element, I can add an image so there would be that make it weighs here for the client to switch the avatar. So once I've done that, I just duplicated arrange, arranged it a bit and make sure it fits well with the layer Now, as you can see, it's not a perfect fit, but it's going Teoh work for me. I'm going to use at the client to client logos, and now we're ready to start working on the last section, which again has very few graphical elements. Just the logo, the logo icon and the background image. That's the only things I need to export. I just said that the logo and I need to add the bottom buttons are really similar to the buttons from the forms, so you can you have basically the same amount of control over the way they look. And now let's have the battleground image and the copyright Dag, and this is valid. The design is now. The design is now completed not only have to make sure that this facing is right, as I've done a couple of changes like that box from the second section, that's way smaller than it was before, so I still need to do a couple of changes I've also added Parallax for this stop top background image, as you can see here. And I just need to figure out spacing. Once I'm down with that, I'm going to publish this page toe alive to a live Uriel Nikkan, take a look even even after you watch this video, you can take a look and see how it looks live on the server. The me just link that button to the top section. So once you click on that specific button at the end, you're gonna be taken back to this first section and you can actually complete action. We want the gold, the goal, which is to get somebody to sign up for a free trial. Ah, you can Center in line Self. For example. I've selected multiple items that need to be centered a line. And once you select amusing holding down shift, you can just center lined, um, and make sure that everything's in the right place and we just slightly justice section. Now. I'm just tired bowling stuff, even though that design which I created for the shop can be taken by a developer and those marching should stay the way they are for this specific example on gonna eyeball it a bit just to show you how ready, how easy it is to create a page a life page in just a matter of minutes. So I've hit preview. And as you can see, Instapage has a collaboration features feature, which means that you can add comments. You can send ideas or notes. Or you can ask for feedback from clients or from your team members on specific elements, and you can preview the page. If you want to see how it will look in riel in real life, just toggle that comment Bold on This is the page. Every single element is you can select it that text element, but and now I'm going to use the same technique I've used in photo shop to make sure the margins are correct. And the spacing between elements is consistent, and I'm just going to create shape elements now. I don't know if a couple of years ago you could have done this in such a short time, but the ability toe have that inside Instapage is is pretty. It's pretty incredible. So let me just published this page. I'm going to You can publish it. A custom domain, But I'm just going to publish it. Toe Demo page. You can write whatever you want here. Once you're happy, you can just hit Publish. I wasn't happy, So ah, editor that so publish. And once that is published, you're being redirected to your, um, to your dashboard and you can just go inside. And this is the landing page. It's functional landing page. Let me put on a test email and start to dry up. Okay? Says thank you. And now, if I go back to instapage on, let me refresh this. You can see that that that lead came in and you can You can do whatever you want with it. You can export it, you can copy it, you can get in contact. And the crazy thing about it is that you can even integrate. As I said with your preferred Ah crm Or you can go with weapon X. They have a direct integration with Web oaks, which allows you to directly sent those details inside their system and that will create the new user. As you can see here, I have a couple of tests set up, but you can you can go with the wider way off off options here. I forgot one thing to add the video to the play button, so I'm just going to select that image and link it to a pop up and have a video there. It defaults toe YouTube video, but you can know always edit it, and you can always replace that video with something you've created. So let's say that up and the page is finished. You will receive this template as well with the layer PSD file. Just check out the common mode, or just check out the course description, and you should find a link there to download all of this for free. They come included with the course, and you can use this layout as a template for your own goal. It's pretty easy to just customize it to make it work for your own goal, whether we're talking about the PSD file or whether we're talking about the instapage file . So this is it. Guys, if you have any questions, don't hesitate to let me know, and I love to see your projects and see what you have come up with. So don't hesitate to contact bye guys