Sections, Rows, Elements

Every website and funnel is made up of sections, rows and elements. Learn how to use them to your advantage.

Video

Transcript

00:00 All right. And this video, what we're going to do is we're going to talk about sections, rows, columns, and elements.

00:07 And we're going to build out a basic landing page here, uh, using an example that we see. So as you know, there's, the pages built up of all kinds of different sections and elements and so forth.

00:20 One thing that helps us to find a website that you like and kind of build a structure around that. So here's a funnel that I found online.

00:29 Um, I actually built this for, uh, somebody. And what we're going to do is we're going to replicate this layout.

00:37 So as you can see, we've got a logo up here. We've got a little text box here. We've got a black background.

00:43 We have this section here, we have a headline, we've got an image and a button. And so what I'm going to do is I'm going to show you how we can kind of replicate this on our site.

00:56 Okay? So the first thing let's jump over to our builder here and what we want to do the first step is we want to build this head header section here.

01:09 So it looks like it's got two rows. So we've got an image over here and we've got some text over here.

01:15 So I'm going to copy this text and I'm going to show you how we can quickly replicate this in the builder.

01:21 So the first thing we need a section. So we're going to add in a section, you can do section add section when you do it, a pop this up.

01:29 Now we need to add in a row. So if we look at our sample here, we've got two rows. So we've got a logo over here and text over here.

01:36 So what we need is a row. So we'll do add row two columns. So we've got two sections here, right?

01:45 So now we know that the background was black. So let's edit this to have a black background. So I hit this gear icon when we're hovered over the section and let's change the background color to black.

01:59 So just like the one over here, we've got a black background. So now let's add in a logo. So you click add element and a logo is an image.

02:11 So we're going to drag an image there. So we need a logo here. So here, I've got his logo saved on my computer.

02:20 So what I'm going to do is I'm going to click on image and I'm going to scroll down and I'm going to edit the image.

02:26 So you've got, if you click on the image placeholder and we scroll down, we can see image options over here.

02:34 So I click the image and upload file, and we'll drag our logo in there to upload it there. So as you can see, we'll click on that.

02:47 And now we have a logo. That's put just like this. Now we can see the logo is a lot smaller than we have here.

02:54 So we want to resize that. So what we'll do is we'll jump over to our builder and we select image and we can see here width and height that we have to play with.

03:03 So let's shrink that down and we'll just hit the up arrow and kind of let it grow to about where we want it to be.

03:16 Okay. That looks pretty good like that. So leave it about that size. Dang can see it there. Now it looks like they've got that kind of over on the left-hand side.

03:27 So what we want to do is instead of centering it, see how it says this online panel. When we select it, if we scroll down and we find the aligned, we can see that we have options to move it to the right left center.

03:41 So put that to the left hand side, just like the other one. And then we now have this text here.

03:50 So if we go back to our builder, oops, and we add an element, we need to add some texts. So it looks like that was a sub-headline.

04:02 So we'll add that in and we'll select it. Now, the color was white. So if we select our text and we change that to white, you can now see the text there.

04:14 So we'll just cut and copy the text that we saw. There we go. And now we've got our logo and our special offer over there.

04:22 Now, if you look at the actual page, this was pretty, shrinked up. It wasn't as big as we have here.

04:29 So we want to do is we want to shrink down the spacing between these elements here, right? So the first one is probably this section.

04:38 So we'll click on this section. And as you can see, we've got spacing options and we have a lot of room.

04:43 We've got a lot of padding right here. So let's shrink that down a bit and we'll shrink down the padding up top.

04:49 So we're getting smaller here. And then now we have spacing for all these other elements, like our row and our columns.

04:59 So we'll select the row first and we'll shrink that down a bit. All right. So now that looks about where we want it to be.

05:08 It looks like it's spaced. Pretty good. So if we go back over to our next thing, we've got another section here.

05:14 It looks like another two columns, or we have a headline here. Who've got some texts graphic or some text here and then a graphic and a button over here.

05:23 So let's build that out. So go back to our builder. We want to select our section and go add section.

05:32 We'll do a full width and we want to start adding in our rows. So just like before, if we look at our sample here, we've got two rows.

05:42 So we'll do two columns. And if you look on this looks like we've got a headline here. We have a subhead, and then we've got a paragraph right here.

05:52 So if we were to build that section, what we want to do is add an element. We'll a headline, and we'll hit the plus to add another element.

06:01 We'll add a subhead and we'll hit the plus again and add a paragraph. So if you look at this, it's kind of like, we've got a headline, a subhead, and a paragraph over here, we've got an image and we have a button.

06:16 So if we jump back over to the builder, we scroll over this section. We want to add, we want to add an image and then we want to add a button.

06:27 So just like in the sample here, we've got the basic layout already set up. So let's copy this tags just to save time and we'll go through and add that in.

06:44 And that was bolded. Then we've got the next one here. We'll highlight that text and pop it in. Have you ever seen these things kind of stay on the screen I'm going to do is click back in to it and it should fix it where it's at.

07:08 So we'll jump back in. Let's grab the text. Well, copy that over just to save time. So we're not messing with all of that.

07:20 So it looks pretty close to what we've got here. If we look back, get a free brand new comic, looks like the text was a little bit different.

07:28 So what we can do is we can highlight our text and we can change it to different fonts, different sizes.

07:35 If we just select the text, you can see that we've got some text, uh, options here. If you select it, we can add text shadow.

07:46 If we want, we have a strong shadow. See how it changed the text there. We'll leave that off for now.

07:55 We can change the alignment. We can have a box shadow. We can change the size. All right, well, you can also change the font.

08:10 So if we want to do a headline or a custom font, we can select our fonts here. Let's do lotto.

08:18 That looks pretty good. And here we have an extra space. We'll clean that up. All right. So you've got this section done.

08:29 So now we want to put in our image. So what we're going to do, I've got this saved on my computer here.

08:36 So what I'm going to do is I'm going to select the image. And as you notice, this section over here changed.

08:41 So I'm going to scroll down and go to image options, click on image. And I'm going to upload that file.

08:51 So here we go. It'll upload the file. I'll double select. Now we've got a graphic there, right? So what's next.

09:02 Now we have a button to get my free comic. So now we've got this button here that we added and it says, click the sign up.

09:09 And when it changed that we want to change that to red, we want to make it wiggle. And we want to change what it says on the text.

09:17 So it says, get my free comic. So if you select the button and you scroll down, you can see text options here, click to sign up the same text.

09:25 That's on the button here. So we can change that to get my free comic. And then if we scroll up, you can see here's button and the background color here.

09:40 You can change that to red. Here we go. So now, if we look back at our page, I made starting to look pretty close to what they've got here.

09:49 So now the next section we've got, we've got this gray section here, or we've got some icons. We've got some text up here.

09:58 And so let's add those in. So if we click on our section and go section, add section full width. Now, if we look at this section, it looks like we've got multiple rows here.

10:16 Cause this one is centered. It's a one row. And then we have three rows. So let's add in two sections on this or two rows.

10:26 The first one is going to be a one, cause that's going to be our headline. And then we're also going to do is we're going to add another row down below.

10:33 See how I just hovered over that and click the plus icon. And for this one, we're going to add three rows.

10:40 So if you look at the basic layout of this one here, we've got one row and then three rows, right?

10:49 So the first thing is, is they've got a headline in here. It says it's really simple. We'll copy that. Jump over here to our builder.

10:58 And in our first row, we want to add a headline. That's really simple. All right, then next up, we've got three icons.

11:13 We've got an iron man skull or a helmet. I've got the Batman, I've got a spider. So let's add those in.

11:23 So if we scroll to our next element here, we've got three rows for this section. We're going to add in an image.

11:32 And if you look at the breakdown, it goes image, subhead and paragraph. So you've got a subhead here and a paragraph here.

11:44 So if we scroll down right below the image, they had a subhead. And then if we scroll down again, there's another plus we can add element.

11:54 They had a paragraph there. So first thing we had the, uh, iron man helmet. So we'll select our image and it brings up our image, editing options.

12:04 So we'll scroll down and find those image options we're looking for. And we will upload our iron man helmet. And just so you know, you can actually upload multiple.

12:18 I have all three of those images there. So I'm going to select them and upload them. And it'll just upload them all three at once.

12:25 So we'll select our first one there and it shows up really big. So let's shrink this down a bit. Okay.

12:34 We'll change the width to make it look kind of like an icon. All right. So now it's looking pretty good here.

12:41 We've got our sizing looking good. Now we need to add in the text. So sign up for a free zone newsletter.

12:50 We'll copy that. Go over to our builder, highlight our text and just cut and copy. There we go. Then we've got our tech section.

13:02 Well, copy that. Go back over to our builder and paste. So as you can see now we've got the first section built, just like they do.

13:17 And this one now one thing we have here, the background is a gray color. You know, we want to change the background here and we've got two more to do.

13:28 So if we go back over to our funnel builder, one of the cool things that you can do, if you have elements that look the same, like they're the same size and you don't want to build them from scratch.

13:38 What you can also do is hover over the column like this. And you can duplicate that section. So see how I hit that duplicate button while I got these extra sections over here so we can delete those out.

13:55 And now we've got our formatting setup pretty close, right? So we can just go through select the next one, image options, Batman.

14:08 I can select this one. We can change it to the spider boom. So now we've got our icons all in there.

14:17 Now in this section, we had a gray. So what we're going to do is hover over this section. We want to change the background color to be like a gray color.

14:26 Now, if you don't find the color in this color panel, you can actually add additional color. So see where it says, didn't find your color.

14:33 You can add a custom one. So click that and you can click this little box here and you can actually customize it to be kind of whatever color you want.

14:43 So we're just looking for like kind of a light gray. That looks pretty good. Once you select the color, you want click add color, and now it's there for you to choose in your selector.

14:53 So there we go. So if we keep going now, one thing that I saw earlier as we had this background image that we didn't do, we didn't use this image here.

15:07 So what you can do is add in an image in the background, oops, went to the wrong page here. So let's select the gear icon and notice how we have this background image down here.

15:21 So we can change our background to have an image. So what I'm gonna do is I'm actually gonna show you a little something about, you can upload a photo for this, but you also have other options like backgrounds.

15:31 You can use Unsplash photos. So we'll click backgrounds. Let's just add a dark background to this. So see how you can add in the background and you can go through and change the text color.

15:49 And this was bold. So let's change the bold text color. If it doesn't right away, change to the color you want.

15:56 It's most likely because it has either an Italian or a bold built in and you just want to change it there so we can go through and select it.

16:05 This one's not bold. So we'll go just the color. We'll select the paragraph that one's not bold. So we're good there.

16:14 So now we've got a background in there. So as you can see, you can really build out things and make them look like other pages.

16:23 You just sorta have to break them down to sections, rows and elements, even though you're just putting in blocks and kind of resizing things and playing with them, as you can see, you can really play with these elements on a page to build out what you're looking for.