Website & Funnel Builder
Website & Funnel Builder Overview
Our platforms website and funnel builder is quite robust. Learn the basics.
Video
Transcript
00:00 Now, once you set up either a funnel or a website, the actual builder is the same for both of them.
00:07 So instead of having multiple videos on this platform, it all works the same way. So I'm just going to have a one section of videos that show you how to edit websites and funnels on this platform here.
00:19 Now, the first up, I want to take you through the menus and kind of explain some of those out. Uh, before we get started building our funnel.
00:27 I know it looks a little intimidating here. You're like, what do I do? How do I work this out? So let me show you the navigation, kind of explain each thing why it's important and that way it'll kind of help out with, uh, before you get started, actually creating content and building a page on here.
00:43 Now, first up, we have a back button. This is going to take you back out of the funnel builder. Uh, so if you click that, that's going to just, you know, not save your work.
00:52 So don't click that unless you're already saved on the platform. Next up we have a computer screen and we have a mobile screen.
01:01 So what this does this toggles between a, what people are going to see when they go to your site on a computer and also what they're going to see if they go to your site on a phone.
01:12 So I strongly recommend as you're building sites to toggle between the two, and what that's going to do is change what the view is to show you what it could look like on either device, you know, on mobile phones, websites, don't always show up exactly the same.
01:26 And so it's important that when you're building funnels and websites, that you really dive in deep on that, uh, to be able to see the right things and make sure that they show up well for your customers.
01:37 Um, don't just build it in the computer version and then hope it looks good on mobile because mobile is, what's actually used more than computers.
01:44 And so you want to make sure it looks great on both, right? Uh, next up we have a settings tab.
01:50 And if you click that and there's a little dropdown box, there's an SEO settings. There's tracking code, there's custom CSS.
01:57 We've got backgrounds and type biography. You don't really need to know all this stuff yet. I've got other videos that explain each individual thing and depth.
02:05 I just want to kind of pointed out. This is where you, you get access to this information, a SEO metadata, that's where you edit like the titles of the page.
02:13 So if you were to share that on social media, what would show up as the link? That's where that is a tracking code.
02:21 This could be for adding in a pixel or adding in Google analytics to your page. You can add that under tracking code.
02:28 If you know CSS, you can add it there. Um, we've got background and typography. If you want to edit those, you can go ahead and edit that right then and there, next up we've got the pop-up now on a lot of funnels.
02:42 What a lot of people do is they have a pop-up that generates on the page as they scroll off the page or click back.
02:49 So if you want to see what is shown on the pop-up and you have that enabled. If you click the pop-up button, it shows you what shows there.
02:57 Next step, we have an undo button. This is where, you know, if you're creating and all of a sudden you make a mistake, maybe delete something you don't want to delete, or just the change you made, looks terrible or something you want to go back, just click the undo button.
03:10 It's going to take you back to the last step you created. And then we also have a redo button. So, you know, maybe you liked it better the other way.
03:18 So you could do a redo and have it generate back. We have a preview, custom HTML and JavaScript. So you can preview that there with that button.
03:27 Then over here, we have sections, rows, columns, and elements. These are all the things that make up your page sections.
03:36 Those are like sections on the page. Rows are going to be like the amount of, uh, rows you have, uh, columns.
03:44 Those are the individual columns inside the rows. And then you have elements which are things like, uh, titles, like, uh, text and images and forms and videos and all of that.
03:55 I'm going to show you how to use all these to build a really cool looking page, uh, in this video here, I just want to get through the navigation first.
04:04 Thanks step. You have a preview button. So as you're building, um, what shows up here and what shows up online are two different things sometimes.
04:11 And so this preview button is really helpful. Once you save the page, you can click preview and be able to see what it looks like online.
04:19 I hit this button all the time to go check out and see what my page looks like. Uh, so this is a really handy thing there.
04:26 And then of course you have the grid over here where you can see all the pages in the site. All right.
04:33 Um, so that's the navigation. Now it's time to actually start building something. So let's start adding some content into the page and let's start with a header.
04:43 You know, usually when you go to websites, there's a logo at the top. There's some kind of header there, maybe a headline or something like that.
04:50 So let's start there. So let's add in a section. So what you're gonna do is scroll over section, go to add section, and it's going to have some options for you here.
05:00 I like to select full width, cause I like to go all the way across the page. So no matter what size it is, it's uh, showing up for the whole page there.
05:08 And then we have rows. So you can add a row and with this rows are going to be how the layout shows up.
05:17 You know, do you want to have one column for the whole section? Maybe you're doing a headline there. Maybe you want to have multiple columns to display information.
05:25 Like, uh, you see a lot of times people have three columns for like products or featured products. So you've got that there.
05:32 So you can kind of select which one is most relevant to you in our case, let's just like one column for now.
05:38 Cause we're only going to have either a headline and logo in this section. And so that's all we all we need.
05:44 And then next up, we want to add an element. Now, an element is the actual content on your page. This is going to be your headlines, your subheads, uh, any graphics, text, uh, buttons, videos.
05:58 You can basically scroll through here and see all the elements you have at your disposal to add to the page.
06:04 Okay? So let's add a headline. So we'll just click headline. And as you can see, it pops it up onto the page.
06:13 Now, what you can do is you can add in your own headline, as you can change the text here is my really cool headline just by selecting the text and editing it.
06:28 Now, one thing I want to point out as you hover over all these different sections, notice that this menu over here changes based on what is clicked.
06:38 So I clicked on my headline and notice how now I've got a different menu and these are all the options that I have to change the text on here.
06:49 If I select on my row, it changes to that. And so you can play with all these different settings to really start customizing what shows up on the page.
07:00 So let's start out by adding a background. Maybe we want this section to be a different color and we want to have a different color headline here.
07:09 So let's add an, a black background. So if I hover over my section and I click that gear, it's going to pull up a menu that I can change and edit.
07:18 If I scroll down on this, I can see a section here. Cause it says background color. So let's change this to black.
07:26 Now we did that. Our headline disappeared cause our text was in black. So we want to do is to change our text to be white.
07:33 So notice if you take your mouse and highlight the text. Now the menu changes over here, right? So what we want to do is to scroll and find our color options.
07:43 So this text is bold. So we want to change the bold text color. So we'll click that and let's just change it to white.
07:49 So now you can see that I've got a black background and a headline on there. Pretty cool. Right? So now let's add in a logo.
07:58 So we'll click. Um, if you hover over the element, you can click plus and we can add an image. So once your placeholder is put in here, you can select it and then scroll down the menu to where we see image options.
08:14 So on here we can upload a logo or something like that. So let's select our pick image button and we have an option to upload the file.
08:25 So we'll jump into, uh, one of my businesses and we'll pop in a logo file. So we'll upload that here it is, and we'll click it and it should pop our logo and to the page.
08:42 So as you can see here it is, and that looks a little big, right? So maybe we want to resize it.
08:49 So if you just click on the image and we look over here, notice we have some options. So what it really want you to get is that if you're trying to do something, if you just selected on the page and then look at the menu options, you can usually find what you're looking for.
09:06 If you just scroll through these sections over time, you're really going to learn this menu very easily. I know it looks very intimidating right now, but over time, you're really going to get a feel for it and be able to really fly through this stuff.
09:19 Okay. So the first thing let's shrink our logo down, we're going to click on the logo there and we'll scroll down to image options and we see width so we can change the width of it.
09:31 So we'll just kind of change that and we'll have a build up bigger until we get to something that we really, really like.
09:44 Awesome. Okay. So now we have a background, we have a logo, we have a cool headline in there. You know, maybe this looks a little fat, right?
09:54 Uh, so what you want to do is to select the sections and play with the margins, the spacing, right? And each one of these, if you'll notice has its own spacings, if you kind of scroll down, you could see like the spacings options of the elements.
10:08 You can see the spacing options of your images. Here it is. And you've got spacing options for your rows and you have spacing options for your actual sections.
10:21 All right. So if things look a little out of place, what you can do is play with these. So we have some padding.
10:27 Maybe we shrink that up a little bit. Looks printing. Yeah. Let's me take away off the top a little bit.
10:36 Okay. So that listen. Good. So now we've got a background here. We've got a logo. You've got a cool headline.
10:42 Now we need some content. So let's say we want to have a, um, some kind of opt-in or something down here where they can opt in for a free book.
10:55 So I want to do is to create a new section. So we click on our section, add section full width, and that's going to add another section down here.
11:07 So this time we add a one column up here, let's add a two column and let's split it into two sections.
11:14 So now I can have elements on both sides and you can actually do this with multiple Tori. You have four sections.
11:25 So you can kind of build out the layout of how you want things to look by what you create. The one thing I want to point out here is notice how, when you hover over something, you have these little icons that show up here and you have them that also show up here.
11:44 So for every element that you hover over every row, every section you have these menus that pop up. And I want to point those because they all do different things.
11:55 So, you know, here we have an up down so I can move my logo up and down. We have a gear icon.
12:07 That's just going to open up the menu for whatever thing is selected. We have a move icon. So if I want to move it somewhere on the page, I can do that.
12:18 We also have a duplicate option. If we want to duplicate a section and we have a trash option, if we want to delete something.
12:26 So notice how those are true for all of these different sections here. So as you can see, we've got a lot of different options.
12:38 So let's add in some more text, let's add this time a subhead in, get a free $10 gift card, sign up for our newsletter.
13:03 All right. So let's do an opt in where they can get a free $10 gift card when they sign up for the newsletter.
13:11 So we've got our headline over here. Then we could maybe add an image of the gift card. If we wanted to, over here, we could add in a form for them to fill out which I'll show you how to do it in another video.
13:30 And then now we're starting to get the outline of our page here. So as you can see, you can add different sections.
13:39 You can add different images, you can add videos if you want, and you can add all kinds of different content.
13:48 You can add buttons and every time you select them, the menu over here changes with options for each. And so you can really play with these and create really, really cool outlines and really cool funnels and websites as you go, the more you do, the more you play with it, the more you learn these menus, the cooler your stuff is going to get.