Traffic Secrets Funnel Hack - Part 1

And we're going to do some funnel hacking. So we're going to jump in and go through and funnel hack the Traffic Secrets funnel. Obviously you've all been through the Traffic Secrets funnel. We did some cool new things inside that funnel and we got a lot of those things built out as new add ons inside of the new CF Pro Tools software. And I want to show you kind of how we've gone through and build out those new features inside of Traffic Secrets and basically replicate that order form and go through all that. So, so hopefully it will be useful for everybody. You'll be able to see kind of how these things work. Some of the cool things you can actually do with clickfunnels. Some of the stuff was just native click funnels. Some of the stuff is a little bit of custom css, some of the stuff is custom code and add ons. But we want to make sure all those add ons are available to you so that you can do these same things in your funnels. So I appreciate everybody jumping on. We've got quite a few people in here this morning, so that's awesome. Just if somebody could drop in the chat real quick, just let me know everybody can hear me. Okay. That would be fantastic. This is just a basic zoom meeting, so everybody has the option to unmute themselves and turn their video on and all that stuff. I would just say if you would hold off on unmute yourself. If you have questions, throw them out in the, in the chat and I'll try and get to those. And then at some point I may open up for questions and make sure everybody's, you know, covered everything and all that. But I want to try and blast through this because these things can go on for hours. I've been known to spend hours and hours running through this stuff. So if we just kind of let it run wild, it'll probably take a little bit longer than everybody wants to spend spend on a Saturday morning. So I'm gonna try and keep this to just a couple hours, but we want to make sure we cover everything. So worst case scenario, we'll spend a couple hours today and if we don't get through everything that I want to get through, there's still stuff to go through, still features that aren't that we haven't covered. Then we may schedule another one. So we'll kind of see how we feel at the end of this and I'll kind of get everybody's feedback. So. So it looks like through sounds coming through and Dirk says perfect. It's a Saturday. Oh, Saturday evening for Dirk. Yeah, yeah, I guess a Saturday morning for us here in sunny, beautiful Eagle, Idaho. So. But we got people looks like logging in from all over the place, so that's awesome. Okay, great. Well, I am going to go ahead and make sure I've got everything set up that I need here real quick. And I think we're ready to jump in and get started. We'll grab some links so we can do our funnel hacking. I've got my CF Pro Tools up account up and running. I've actually pushed out a bunch of new add ons already this morning. They're currently locked down so that we can do this testing and kind of walk through how to set them up. And then I'll be unlocking those for those people that have gone in and bought Traffic Secrets through the affiliate link so that you'll have access to those later on today. We'll get some instructional videos recorded and pushed up so that everybody knows how to use them. But if you've been through this training, then you'll know how to use them because we're going through. So we still got people coming in. So jumping in, trying to. I'm gonna try and do my best here to keep an eye on everybody that's coming in as we go. And so let's take a look. I'm actually going to pull up a. Share my screen here and pull up a doc. Okay, let's see if we can. I'm gonna share the screen we're on here. Oh, there it goes. Okay, now let me drag a few things over here. So we're gonna start with this. We're gonna walk through and just take a look at the different pages within the Traffic Secrets funnel and some of the cool things. So let's see if I can get a little grid view here. See if I can drag your brace. There we go. Try and drag everything around so zoom's not too much in the way. Okay, so let's start by going and taking a look at the actual book funnel itself. Now obviously you've all been through this. Through this funnel. I want to. There we go. I'm gonna open this. So we're gonna take a look, a quick look at this funnel. Obviously we've all been through this funnel. There's a few cool things going on here. First off is the video. Once the page loads. This is quite, quite a big page. As you know, Russell likes to build out very long sales pages. So it takes a little second to load. But once it loads, we get this nice Little overlay with the click to turn on sound. That's one that a lot of people have asked for. And that one actually released into CFO Tools here not too long ago. And everybody really loves that one. And it's actually been you. I've had quite a few people reach out to me and say, hey, how the heck do I get that and how do I turn it on for my site? And it's actually, yeah, it's a cool thing. And you know, we've used it pretty much on all of Russell's funnels now. We switched over. The reason I built this, I actually built this initially, this add on for YouTube, the ability to. The key factor in this is the actual. The ability to let the motion play in the background so that it looks like it's auto playing to capture people's attention. What I really recommend on these is you actually have captions on the videos as well, actually embedded into the video itself. Closed captions, but actual captions on the video themselves. That way people can see the words. Because we all know that a lot of people, especially nowadays, unfortunately, we just. Well, fortunately, unfortunately, whatever it is, most people will watch your videos with no sound on. A lot of people are, you know, using their phones when they're in the stall in the bathroom and we're in a public place at the office, wherever they are, and they'll have that sound turned off. And so if you've got captions on there, then hopefully you can catch them with your hook in your captions. And if they're in a place where they can turn on the sound, then all they do is they click on this and it actually restarts the video back at the beginning. And that's kind of the cool feature because then they don't miss any of your hook. We all know that, you know, we want to hook somebody in the video in the first, you know, five to 10 seconds. And if they just were to click in the way most autoplays work now, if you just click it to turn on the sound, you're clicking to turn on the sound wherever it's at in the current video. So that could be, you know, 30 seconds in. It could be a minute in, could be 10 minutes into the video. And they've already missed the sound for that first batch of, you know, for that first batch of time. So this add on I built initially for YouTube to allow that to click and return back to the beginning. And then YouTube came along and said, hey, we hate marketers, and disabled a bunch of things and made it so related videos always show up and it always has the ability to go to go to YouTube and watch the video and much other things. So we stopped using YouTube at that point and switched over to using Wistia. So I built the same thing for Wistia and then Wistia came along and actually built this feature into their add on themselves. Now their overlay is not quite as pretty, but the ability to restart back at the beginning to kind of autoplay without sound and then restart the video back at the beginning when you click on it was one of the features that they added and it was actually pretty cool. So we started using Wistia instead of at that point and then we realized that you know what, with enough traffic Wistia gets really, really, really expensive. And so we started. So I built this for Vimeo. In fact I built it initially for all three of them at the same time because the features are pretty similar. It's just they have different APIs. So we built out this feature for YouTube, Wistia and Vimeo and now we use it on Vimeo and that's what I would Recommend for marketing. YouTube videos are great. If you're going to put them in a members area or something like that where you're not overly worried about people jumping. Sorry, if you're not worried about people that are, you know, maybe jump off to YouTube if it's a member's area, they've already paid for the content. That's great, you can use YouTube for that. It definitely keeps your hosting costs down low. But if you're using marketing videos, if these are on sales pages, OTO pages, thank you pages, you don't want that burden of YouTube on there. So we've moved over to Vimeo and we use Vimeo for all of our marketing videos. In fact we use Vimeo. If you ever take a look at the Funnel Flicks software, the training that's included inside of Funnelflix with clickfunnels then Funnelflix is all hosted on Vimeo. So I would highly recommend Vimeo for that. And that's how this add on works. So we've got, we've got a Vimeo account and we've got all of our videos hosted on Vimeo. And so we can, you know, we've got this add on basically that if we now this video has been playing for a while. If I click play now then it will kick me back to the beginning of the video and so, and then it starts it again. So again people hear your hook. So that's One of the first keys, that's one of the first things that we build out. And I want to show you real quick, you know, there's an add on inside of CA Pro Tools that allows for that. I'm just gonna run through the features real quick and then we'll actually start building this funnel out. So that's one of the keys is that overlay, that video overlay. The next is, you know, we've got a ton of content here. So this is all just basic click models. This is all Jake Leslie designed for the sales page. Jake is one of the best designers that I've ever, ever worked with in any capacity. Sales pages, funnel building, print design, just all around. Awesome, awesome designer. So he's designed this all out. It's an awesome looking funnel. But you'll notice throughout that wherever you click on the yes, reserve my copy button, on the call to action button, it actually opens a pop up. But before we open that, I want to show you something. If we go to exit out of this, we, we'll see. We get an exit pop. And that exit pop is hey wait, you know, before you go, do you want to go buy, do you want to go buy this book at one of these physical resellers or an electronic book? Do you want to get the physical book or an ebook somewhere else? So we want to try and capture those people that might be leaving. And so this allows us to do that. But you'll notice as well that's just a basic clickfunnels exit pop. If you go to exit, it pops up with that content. But if we click this button then we also get a pop up and it's just a basic click. Funnels pop up. And this is built into the basic, you know, built into the existing pop up container. And so we've got the an add on that I built called cf multiple popups. So this allows you to actually have different content in your pop up based on a link or button click. And so that allowed us to use the pop up on an exit to promote like, hey, do you want to go buy this book somewhere else? But then also use the same popup to do the order form within that popup. So we've got that going. And then on this pop up for the order form, one of the other things we have going here is that we've got this toggle up at the top for step one, step two. A lot of people have noticed that hey, this looks really a lot better than the basic two step order form that we see all over the place. How did you make that work? And if we go and we, you know, we actually go and go to step two, then we can see. And I'm actually just gonna. So I don't opt myself into another list, we'll do this. And now we can see we're on step two. And so this switches step one, step two. How do we make that happen? So we'll run through how to do that. It's actually pretty simple, but once you see it it's like, oh well that totally makes sense. But we got a little custom code that helps with that. So we'll run through how to get that installed, how to get that used. And then inside of the inside of here we got a couple other things going on. And one of those is that we can actually pop. And I'm going to pop this in. So if somebody actually enters a credit card number, a valid format credit card number, we don't necessarily know it's a valid card yet, but we know this validly formatted credit card number. We expanded out this little section down below. We want to highlight these are the bumps. So. So first off, this is the first funnel that we've used with Russell where we have multiple bumps on this. The multiple bumps add on has existed for quite some time, but finally convinced Russell that hey, we really should offer more than one bump. This funnel is pretty cool. We got some awesome products at this point in time to give away. So it'd be really cool to without extending the funnel, without adding another OTO page and making the funnel longer. Let's just add another offer but add it on the order form itself. So we've actually got the audiobook which is always performed as a fantastic bump and is always one that I recommend highly if you're selling a book is that you sell the audiobook version. It gives people immediate access to it. So super high converting bump offer. But then there's also the recordings. The live Russell tends to like to do this. This is actually how I met Russell the first time was doing one of these live events where he taught the Expert Secrets content for the first time to a audience. And he taught that, invited me out to the event for that. And so I came out, flew out here to Boise and watched and went through that was a three day event recorded and then you can get the recordings for that. But this one is for the Traffic Secrets event. He did that same thing down in Phoenix with a closed Mastermind group for that. And so we've got the recordings there. So we're offering Those up for a $97 bump as well. So we got two different bumps here. And so we've used this. When somebody enters a credit card, we want to give them some additional detail about this second or about this first bump. So we expand that out. We don't want to take up the space, we don't want to overwhelm people with it until they've entered their credit card and they're pretty confident that they want to buy this core offer. So that's one piece and we'll kind of walk through that. There's some custom code that helps with that. And then the other thing that a lot of people have been wanting to do is figure out, okay, how do we do this bump? It's completely, you know, completely out of the norm for our normal, our normal order form bumps. And so this works by clicking an add button. So click add to add this bump and then when it's been added, you get an added button. You see that it's been added to your order. We see that it shows up in the order summary down below. And if you hover back over then the change the icon. So we get a little sad, teardrop, teardrop face. And then we get a remove button and so we can actually remove that bump and then it removes it from the order and also switches our button back to just a plain old add button. So now we have the ability to click a button to add a product and click a button to add multiple products. And so that's one of the features that a lot of people have been looking for. They can hit up left and right for this. So, yeah, lots of people excited about that. So we're gonna walk through today how this is set up and how we make this functionality work. And then also how we got layout, this bump layout of we get an image, we've got the content and then we've got the button. This is kind of a three column layout. We've got, you know, a nice little border around here, makes it look nice and kind of get our little image that peeks out from the top a little bit. So we're gonna walk through and take a look how we can funnel hack that, how we can make that same layout and how we can make that work as well as obviously we have some things that have existed for a while with CFRO tools and with clickfunnels, but we'll walk through and make sure everybody understands how they're set up, how to set up the products. So they work like this, where we have a free Book. This is a free plus shipping offer which converts really well because you can tell people, hey, I want to give you my book. I just asking you to cover the cost of shipping. So it's a great way to get people hooked in. A lot of people want something for free, so they want the free product, they want the free book. Hey, this book's worth, you know, if you were to go buy it, it's going to cost you 26 bucks. But I want to give it to you today for free if you just help me cover the cost of shipping. Shipping, it's a reasonable offer and everybody kind of gets that. So it converts really well. So we can do a free plus shipping offer here, but we can have a line item for the free item and then an item now for domestic versus international shipping. So if we were to go back to step one and change our country here to United Kingdom and go to step two now, we'll see that we've got our Traffic Secrets books. Oh, and I actually just noticed a little bug. If we go back and do that, we'll have to add that back. There we go. Oh, one, two, click. There we go. So we can see now that we've got our Traffic Secrets book and we've got our international shipping attached here. So we went from a995 to a 1995. So this is our CF international shipping add on at work on that one. And so allows you to have one product that's set up at one price or a free product. And generally what we do is we set up a. The free product is actually a lot of times a dollar, or in this case it's $2.50. So that when somebody buys the book through the ClickFunnels affiliate program, they get a 40% commission, which gives them a $1 commission. So it's a way for us to run an affiliate program as well. And then the remainder of the cost actually goes into the shipping product minus whatever you charge for the book. So it ends up being the same price. You know, if you want to charge overall $19.95, then your book is 250 and your shipping is 1745. And that ends up with giving us the 1995. And then we use some custom code to override what displays here. So we display it as free and we display it as 1995, even though behind the scenes the actual charges for the products are different, but they add up to the total of $19.95. And then we've got our bumps that get added Here. So, yeah, so we got a lot going on on this order form. The other thing that we have going on that you don't see behind the scenes is that we're actually tracking what's purchased on this order form. So as somebody adds this audiobook, there's a different offer on the next OTO page. We wanted to change up and be able to say, hey, if somebody buys the audiobook on the front end, we want to offer them the box set is. The OTO is the next oto. So if we go and open up this OTO page, Then this kind of has a lot of the same thing. It's got the video up top, so we've got that plane. And then if we scroll down here once, it's kind of loaded, you know, again, beautiful design. Just basic click funnels out of the box here. But we'll notice now we've got this box up top saying, hey, this product already added. You know, this is. If you want to, you have to buy this. Basically, you've got to get the box set. If you click the yes, you're going to get the box set. But you have these additional offers. And so these additional offers, there's actually a third one in here that you don't see. And it's dependent upon what you buy on the front end. If you buy the audiobook on the front end. If we were to go through this and actually buy the audiobook, then you'd see an offer here to buy the other two audiobooks for a $37 edition. So you're basically buying. You know, you buy, buy one, get one free. It's offering you the Expert Secrets and the dot com Secrets audiobooks in addition to the one you already bought. But if you don't, in this case, we haven't been through this order form yet, so we haven't bought the Secrets trilogy. We haven't bought the original Traffic Secrets audiobook yet. So it's offering us all three. Hey, do you want to get all three audiobooks for just $74? So if somebody skips the bump offer on the front end, we just make it basically make them an offer again that goes ahead and includes that product. So we have that dependent bump. We change the offer based on what they've already purchased, which is kind of cool. And then obviously we've got one funnel away challenge in here. And these also, this is the first time that we've actually done a bump offer on an OTO page. So this gives people the ability, hey, they have to buy the box Set that's already been added. They can't remove. Nothing to do here. But we can add this additional bump and same thing. We can remove it. We can flag it as added. We can remove it so it's not been added. We can pick either one of these things or both of these things if we want to. And it will add them to this order. So. And then when they click the button, it will actually buy all three of those products. And then obviously they have the no thanks link works just like normal. So basic click funnels. There's. And again, the layout and the way that this works, you know, with the image looks very similar to what we saw in the bumps on the front end. So we'll walk through how to set that up and how we did that and so you'll see how that all functions. And then we can see the funnel analytics page. This one actually there's not too much special going on on this page. This is just a, you know, really, really good design. And we are using the video overlay here as well. So we've got that going on. But then from there it's just basic design and runs through. There's nothing too special here. You basically have a couple of options to buy. You can actually, I take that back. We do have the ability here to do the same thing. This one's already been added. You have the option to go ahead and upgrade. So you're bumping your oto. Actually kind of forgot that we did that on this page. So again, we've got that same logic here. We can add a second offer. So in this case it actually changes the offer. So initially you've got just this product added, but if you click this, it actually swaps out which product is actually being sold when they click the yes button. So that's all custom code at this point. That one may or may not be moved into an actual add on. It just may not be all that useful, everybody. But I haven't moved that into an add on yet. So we'll work on getting that one added into CF Pro Tools as an add on and make that a little more generic. But this one is completely custom coded at this point to say, hey, you know, when they land on this page, here's the offer that's attached to the yes link. And then basically if they click this button to add this product, it changes the offer attached to this yes link button so that the product purchased is actually different because these are just two basic products on, on this order page. And then again, no thanks link and Then we go through and we've got our, we've got our thank you page. And so on this one, pretty basic thank you page we've got again, we've got our video overlay and then we've got, you know, access. We haven't bought anything, so it's not going to show this, but we got our basic order summary, a link to the members area. We've got an additional video that helps, that drives people over to check out click funnels if they haven't already got it. And then, you know, we've got this, you know, text secrets to 78789 so that you can jump into a text marketing list. So pretty basic on the, on the thank you page. So the keys here are the order form. That's where the most of the magic happens. The OTO page does have some pretty cool stuff in it in that it's got this awesome layout and the ability to bump on an OTO page. And then it's also got, you know, kind of the same layout going on with the three columns and the image kind of peeking out and our buttons and all that. And then same thing on our second OTO page and then our video overlay pretty much on the thank you page. So that's what we've got going on there. So that kind of runs through just real quickly. You know, pretty much all the things that we've done that are pretty special about this funnel and that you may not have seen before. It probably haven't seen before. I certainly haven't. And so that's why we built them into this. So I'm just going to run through real quick and just see what we've got going on in our chat and then we'll kind of dig into this and start rebuilding this. And so one says it's awesome clients challenges at all be and help them with the code rather just not do the maintenance. Yep. And yeah, so we're going to build all this stuff into CFO Tools add on so that hopefully there's no maintenance. That's kind of the goal here is to make it so that you don't have to worry about knowing how to write the code. You just know that hey, this is the add on lets me do the thing and I can go in and do the configuration and go from there. So that's definitely the goal. That's why we've kind of moved to the new Save Pro Tools software platform. It definitely makes it easier so that you don't have to know the code, you don't have to know that if you put an extra code in it's going to break something or anything like that. We take care of all that stuff on the back end so that you. All you have to do is know how to grab my product IDs and how I want things to work and then the add ons help you take care of all that. So let's see here. We've got, we've got 20 people on already. So that's pretty awesome. I appreciate you all jumping in on Saturday morning. And we do have the recording going. So just so you know, we'll get this recording out as soon as we can after things are over and let's just dive in and get going here. So I'm going to. We're gonna jump back in. We kind of walk through this. We got multiple pop ups going. We got multiple bumps going. We've got bumps as buttons going. We've got International Shipp going on this one and we've got that accordion content open on the. When they enter their credit card. We can kind of walk through that. We'll probably save that until the end. Something's kind of cool, but it's really just kind of a cool thing. It's not really doing a ton for the, for the customer. So if you didn't have that, you probably wouldn't even notice it. And then the next thing on the OTO and I'm going to put in, I'm going to modify this a little bit so we don't lose it. We want OTO one page features. We have the dependent OTO option that's only on one. We don't have that on Oto 2. So let's then throw in Oto 2 page features and we're going to do the OTO bump. That's not what I wanted. I want that OTO bumps and the bump says buttons. Just want to make sure we don't miss these things as we go through. So we kind of highlight what all we're doing and make sure that we build those things out. So yeah, so this is kind of what we got going on. So we're going to build out these order forms, the order form OTO 1, OTO 2 and a thank you page. And I'm just going to do this inside. I've got a funnel started here. Let me see if I can get my funnel pulled over. Swap out. I'm going to drag this page onto my other screen. And so we're inside of an order form here now. Order form, funnel. So this is my new TS demo build Funnel for Traffic Secrets. And so, yeah, so let's just jump through here and I'm gonna build this out. So what I like to do when I'm just doing this is we're just gonna kind of go through, we're gonna step through page by page. And if you've ever listened to Katherine Jones, you probably know this already. If you were at Funnel Hacking live, you saw her presentation about design hacking. And part of that is, part of that process is that we're just gonna go through and we're gonna look at the structure of the page, how the page is built, what the structures are. We're gonna build that out first. We're gonna start with a blank slate. We're gonna build out the structure and then we're gonna build out the chunks of content we want and then we're gonna connect those things up. We're not necessarily gonna worry about making this super beautiful today because it takes a lot of time sometimes to make things super beautiful, but we just wanna make it basically structured the same way. And then we're gonna to make sure that the functionality works and we're gonna work through that together and hopefully at the end we'll have a pretty good result. So let's start with building out the structure of the funnel itself. So we've got an order form, we've got an order confirmation page. We know we need that order confirmation. So let's go ahead and pick a template for that one. And I'm just. Generally I just pick a blank template because we're going to rebuild it anyways. Order forms don't have a blank template yet. I need to create one for myself just so I can use that one. But we'll start with creating. Just grabbing a blank template. I think I like to grab actually just the. It's being a little bit slow as I load Zoom as well. So let's go down and get. Still loading here. There we go. Oh, there we go. Go down. I like to grab just this original, very basic order form or order confirmation page template. And then we need to build in an OTO page because we have an OT one and an OTO two on this. So we're just gonna say OTO one and we're gonna show it in Funnel. We're gonna create that step. And we'll get that built in. And then we're also gonna add in an OTO2. We didn't give it enough time, so it freaked out. Right, There we go. Oto 2. We'll create that funnel step. Okay, we'll let these things load a little bit. I'm gonna go ahead and delete this. Excuse me, this extra blank. Thank you. Page out there. We're gonna get new ones created for each product as we create them anyways. And then let's go ahead and drag our OTO one into the right spot. There we go. Drag Oto 2 in there. So now we've got the structure of our funnel laid out. So let's go ahead and grab a template for our OTO1 and OTO2 page. So we've at least got functional pages up there, And we want these to be OTO pages. And again, I'm. I'm old school. I've been around clickfunnels a long time. So I'm gonna go back and grab one of these original funnels, original templates here. We'll do the same thing for Oto2, And we'll do our one click upsell here, Scroll down, and we'll select this template. Okay, great. So now we've got our structure, So let's bounce back into our order form. The first thing I'm going to do is delete everything. And we're going to start by mapping out the structure. So we're going to go in here, And I'm just gonna go through and delete every section. Because we're gonna start fresh. We're gonna lay out our sections the way we want them. I'm also gonna go in. I don't like it when we set the background color here. By default, this template sets a background color on it. So we're just gonna set that to white instead of that kind of muted gray. And then let's jump in and take a look at our. Move my zoom bar down here a little bit. Let's take a look at our order form page. We'll pull this over and we're gonna take kind of a. Kind of a look at how this page is structured. So you can see we've kind of got up top, we've got. We've got our header bar here, the logo on the left, We've got a navigation on the right. We've got another bar down below here that's got a different color on it. So we know when these stretch the full width of the page that these are sections. So we've got one, two sections here laid out. Then we've got a third section here with, you know, our headline. And this is actually probably laid out in multiple rows because we can see we've got Different. We've got kind of a background behind this headline. We've got different font sizes here on this one. We've got different font size here. So we kind of tell from the layout of this that these are actually different rows or at least different elements with any row. So this is probably one row. And if we want to really dig in, and this might be a little too techy for some people, but we'll run through it just in case. Cause I know there's lots on here that love to dig into this stuff a little bit deeper if I really want to know. Hey, how was this really structured? I can actually inspect the page. If I right click and do inspect on the page, then I can look at any element on the page and kind of see how it's structured. We can see we've got here, we've got this element. So we popped in. I right clicked on this headline element. So I've got that highlighted here. And as I hover over in the code, this headline element, it highlights on the page. So we can see here, okay, this is a headline element. And so we've got that headline. We've got another headline element here. So that's one row or one element. That's another element. So we can kind of scroll through all of these things and see how they're structured. Are they different elements? And then if we kind of scroll up, we can see, okay, how are these things laid out? We can see, okay, we've got a column here, okay. And so this is in a row. Okay, so we've got a row. So that's one row. So all that thing is one row within a section. And then we can kind of keep going up. And we can see we've got another row here that looks like it's maybe not displayed. Yep. Nope, it's not displayed at all. I've got another row that's not displayed. We've got a section here. So now if we click on this section, we can kind of see what all is in what all is in this section as we scroll down. So we've got quite a bit inside this section. So we've got this whole top piece in that one big section. And then we can see that blue wrapper there. So we've got quite a bit going on there. So let's go ahead and start with building that out. The other thing we can do is use our little icon here. And now as we hover over things, it should highlight those in the actual code. So this is kind of helpful too, if you're ever looking to inspect things, see where things are at, see padding, margins, all that stuff. As you hover over, you'll see those things and they'll highlight them in the code. And you can kind of dig in a little bit deeper from there. And so you can see, okay, now we've got an headline element. Now if we go out, okay, now we've got a row or a column here. Go out a little bit further, we've got our whole row. And so you can kind of hover over and see, okay, now we've got our column. If we go just outside that, we should see our row. Now we've got our whole container, so it gets a little finicky. But some of these tools. So that's this little icon here. And so we can kind of see that. But otherwise you can just kind of run through your inspector and kind of just step up and up and up and see how things are structured in the page if you really want to dig in. But just from a visual perspective, we can kind of see pretty quickly how these things are structured. You know, we know if they're full width, if there's a color stretching all the way to the sides of the page, that means it's a section. The way Click Funnels works is rows are never going to be the full width of the page unless you really customize it. So we know we've got color stretching all the way to the edges that I need to create a new section for those. So we've got 1 section, 2 section, 3 section to build out this top piece. And then we've got another section down below for everything else. And then all this stuff is actually could be in one section, might be in multiples, but it could be in one section. So let's go ahead and build that out in our new form. So let's go ahead and add a section and we want it to be a full width section that's gonna be up at the top. And then we're gonna have. We need to have a two column row at least in this. But we could probably do a left sidebar column where we have our logo on the left and then our nav is on the right. So we've got that. So now we've got that section. Now let's go ahead and have another section. That is our little green bar down below. So we've got our logo and our nav, that first section. And then we'll build this second one. So let's do that. And that's just A one, one column row. We just got our headline in here, little element in there. So we've got that. So now let's throw in a logo. So we're gonna throw an image in here. So we'll throw that image in and then we've got a navigation element. So let's scroll down and do we want to do navigation? And we've got this. And we want this navigation to be on the right. So if we do align, which I think is in our advanced, we can align it to the right. So now we've kind of got our logo and our nav. And then we've got a headline in here. And I'm actually gonna make this a sub headline because clickfunnels now has their handy little. Actually, you know what, I'm gonna even make this different. I'm going to make this a paragraph because I really don't need this called out for SEO purposes. I just wanna be able to change the font size. So we can do this. Get rid of our little padding. By default, it comes with some padding at the top. We don't really need that. So we've got this in there and let's see what we had. I'm just gonna copy this whole content here and we'll just paste that in. So we've got that going. So we got a logo image. We've got that. Now we've got some colors. We wanna make these. This color here. So if we go in and start up our little color picker. So this one looks like black, that's easy enough. But pick color from page. Taking a little second start up here. So that's two five, two five. Oh, goodness gracious. This is really fighting me today. My color picker. No, that's not what I want. Pick color from page. There we go. So that's 25, 25. So let's bounce back. We'll set the background color on this whole section, that 25, 25. And we've got white for our font color for this element. Oh, I think I accidentally clicked the clone button. Get rid of that one. We want this. We want to change our link color to white. There we go. Let's go ahead and change our font size while we're in here. There we go. And now let's change our background color on this one. So let's grab that color. That one is this color. So now we can go in and we can change this background color. Oh, it did not copy my color. Oh, goodness. We're not. We're not even Gonna use this anymore. Let's do this a different way. So if we right click on this background and go to inspect. Oh, somebody waiting to get in. And Yazak asked the question. So if you use paragraph instead of sub headline or headline, it does not show an SEO. No, that's not exactly right if you use headline elements. So in order to be a little more ADA compliant, the clickfunnels editor now behind the scenes will set the H1, H2, H3 for different headline elements. And so for if you use a headline then it tries to set an H1 type on that. And if you use a sub headline it sets an H2. And then for paragraphs it doesn't. It just sets it as a paragraph element. So it just helps to really don't want to have multiple H1s on your page for search engine optimization kind of standards. So I'm just trying to set these more as just a plain paragraph. That way it's not set as like the topic of the page because we don't want the topic of the page from a search engine perspective to be pre order. This book starts shipping on May 5th. We'd rather it to be Traffic Secrets if we were going to use it as a headline. So if you're worried about search engine optimization, which I'm often not because we're generally drive traffic via other mechanisms, but if you're worried about SEO, then you might want to pay a little more attention to which type of the headline element you actually insert for your content versus just using headline for everything. So if we jump in now we want to grab this color, so we'll do inspect and so we can see here that this top item we have, we have got that container which is our section and then it tells us we've got our background color of RGB018957. So now I can just copy that. So I'm just going to go back now and I'm going to paste that in. And now we've got our green and that color was white as well. So let's go ahead and change that background color to white or the text color to white. Now we've got that. Okay, so we've got those set up and now we want a third section. And I believe this section is also a full width section. So we're gonna inspect that section and we're gonna see how it highlights. Yep, we can see the blue wraps all the way to the edges. So that means it's a full width section. So we're gonna go ahead and bounce back in here we're gonna add another full width section. And then inside that we're gonna add a new row, a new one column row. And then we'll drill down to the new rows and elements we need to add in there as we go. So we know we need to start with elements for each of these headlines. So we got 1, 2, 3, 4 elements there. So we'll go ahead and add these in and I'm gonna go ahead and add these just as headlines, just cause it's quick. And then I'm just gonna clone these out. So we've got four headline elements there and then we've got an image element here. And actually I'm gonna go ahead and put that. I think that's probably in its own row. Let's take a look and see. Actually, no, we actually have that. That actually is a headline and it's got a. It's just that actually is not even an image. I thought we had made that an image, but it's not. That is another headline element. And so it is not in its own row. Okay, so we'll make another headline element here. And that will be our headline above the video. And then we've got a video element and we'll throw a video element in here. We're gonna go ahead and set this video element to Vimeo. Since we know it's gonna be a Vimeo video. We're gonna set it to autoplay. We'll leave it as block pause set to no and unmute set to no. Because we know that's what we want it to be here when we get the code installed. And then let's see what else we got. And then we've got. We've got a little, a little magic going on with this one. I believe that we've got a little two column row here and then a two column row here. This image is kind of sucked up if we were to kill off the style. So let's inspect this a little bit and see how we actually made this work. So if we inspect this and see how this works, we've got a column here and we've got a row. Yeah, so you can see if I hover over this row, the row is actually just a small little sliver below it. And so if we look at that and we can see padding, top padding, got all that stuff. But then the image itself is peeking out above the row. And so what we have. And if we look at this, we can see if we highlight on this, we've Got for this margin top, we've got a negative 270 pixels. So if we turn that feature off, we'll see that what's actually happening here is that image is down below. And now we've got this section where we've got a two column row with the content on the right with a little background image. And then we've got a second row below it that's a two column with the image in it. And then we've just sucked that into the second row so it kind of overlays. So that's how we get that kind of effect going on there. So let's build that out. And so we've got. We wanna put in a two column row here. So we're gonna add another row and we're gonna do. We're just gonna do a left sidebar row here again. And then we're gonna. Let's go ahead and clone that. Cause we need that same thing. And so now we've got two, two, two column rows. And let's go ahead and apply just. We're not gonna do the image. This one actually has an image background on it. You can kind of see there's a little image back there. We're not gonna do that. We'll just do a. We'll just do a color behind that background. So we're gonna do a background behind this row and we'll just do a little gray and then we'll do some rounded borders on it to kind of give it that similar effect. And then we're gonna put our content in here. And so we've got a headline. We've got another headline. So let's do a headline. And then let's go ahead and do another headline. And then we've got a button. So let's go ahead and put a button in here. So now we've got our call to action button. Okay, great. And now here we've got just nothing behind it, no background or anything like that. We've got an image over on the left. So now let's go ahead and do that. We're gonna go ahead and create this image. We'll create an image element. Okay, so we've got an image in there. And now basically we want this, this row to suck up into this one, to put this, lay this image over the top or that image to basically overlay the top. So we'll make that happen with some custom css. Show you how that works. So now we've pretty much got this structure. So we've started with the Basic structure here. If we turn this back on, we'll see what we've got. So we've got this basic structure at the top. The rest of this page is fairly straightforward as far as building out with just basic clickfunnels. So we may not go through all of that, but we at least want to get this. How do we structure this all at the top? So we've got kind of basic structure there. We'll do some customization to get this all working. Obviously it looks very ugly right now, but we'll tweak down and get things copied, modified. And then the next big thing we want to make sure that we cover on this one is the actual pop up. So we've got a couple pop ups here. If I refresh this page, If I refresh this now we'll let this load for a second, make sure our exit pop is going to work. Now if we scroll out of our, out of this window now our exit pop. There we go, we got our exit pop. So now we've got content here on our exit pop. So this one we can see we kind of want to duplicate as well. So we've got, you know, a row here because it's got a different background color, it's got a little border down below it. So we got a row with a headline in it and we've got another headline. So we've got another row here for these headlines and then we've got a three column row for this. So let's kind of build out that structure. So we've got one, two, three rows in our. There we go. So we want to go into our pop up. We're going to show the pop up and then we want to add a new row. We've got one column row at the top. We're going to do another one column row and then we're going to do a three column row. And then that's gonna. And then we're gonna put a headline in here. And let's look at our. Oh, looks like our pop up went away. Refresh it one. Okay, now we go. So we got one, two headlines there. Just clone that one. And then this one we had an image. And then we've got a little. We've got it headline element here. And then we got a few images down below. So we have a couple of headlines and then some images. So we'll do headline. Drag, just drag these over and then we've got. I'm just going to clone this image and drag it over. So we got some of Those. Let's drag these and then we'll. I think we had three of these over here. So we got Amazon books, a million. So, yeah, so we can kind of see that same structure in action here. So obviously looks pretty ugly, but we've got the base, same basic thing going on. So one thing we can see is we've got, you know, a bunch of extra padding and stuff at the top on this. At the top and the bottom on this. We've got some left and right that we don't necessarily want to have here. So we can see that this row up the top. There's no extra padding that's bumping that row down. On the actual popup itself, you see this pop up might actually be a little bit wider. So let's see if we can change the size of the popup. Modal width is medium. Let's do large. Yeah, so that looks a little bit more like what we see. Okay, so we can see. Yep, we've got a large. So that matches in size. So we're kind of playing through, playing through, getting all this stuff working. We've got a background on this top row. So we'll go ahead and we'll just use some colors that are built in here. Nope, I'm not sure why that picked that color. There we go. And then we have a little border at the bottom. So we'll do a little border bottom, only do two pixels. And then we'll pick a little darker gray. There we go. Something like that. And then. Oop. Go. And this is all bold. Now, we don't want that. We just want this to be bold. And we're gonna set a different bold color. I think we had a red there. So if we wanna grab the color of that red, we can right click and do inspect. Since our color picker wasn't really working very well for us with zoom going and everybody on here. So we'll just do it the old fashioned way. We'll use the CSS inspector. So now we can see we've got our color for that headline element, that the piece that I've got copied there, I can actually just grab that color and copy it and then go back and say, I want that to be my bold color. Just paste that in there. So now we've got that. If we go back and look again, we can probably take a little bit more look and see. Okay, what sizes do we have on that? So we've got a font size of 48 on that. So if I go in and I change the settings on this, you jump up to 48. And I won't run through all of this stuff, but just wanted to give you kind of the basic ideas of, like, how I would hack through and figure out, like, the style, the structure, do do a lot of the design hacking that we would normally go through and figure out. So these are just a few ways to use the inspector to get things looking similar. So if you're ever going through a page like this and you're wondering, like, oh, man, what font is that? What style is that? How big is it? What color is it? This is how you can kind of use something Inspector. This is sometimes. This is a little new for some people, so I want to make sure and share a bunch of that. The other thing we look at is fonts. We can see, well, what font is that? There are ways that you can use font inspectors, there's some extensions, but if you're using just the basic Chrome, it comes with developer tools, you can actually go in and look at computed and it will show you the font family. And so we can see that font family is Montserrat. And so if we go in, and we can actually go in, a lot of people don't know this feature even exists. And go into the page itself and go to typography, then we can actually set a base content and a base headline font for our entire page. And generally we try and do that throughout all of our funnels. We set one or two base fonts and we use those throughout. So we're just gonna go in and we're gonna find Montserrat and we're gonna set that as our headline font, and we're also gonna set that as our content font. And now we'll see. Shouldn't see that change. So now if we go in, And now we've got our font set as Montserrat, and the other thing that a lot of people don't realize exists, for headline elements, you can actually choose which font do you want to use. And this is something I actually built into the editor is pick your typography type. Should it be the content font or the headline font? So you can actually swap that out. Now, in this scenario, they're both the same. But if you had two different fonts, say you wanted to have one, your content, to be a different font type than your headline, you can pick a different one. So we want the content to be. Maybe Roboto, you can see that's the default for all your headlines, is to use the content font. But if we want this One to be different. We can say, okay, I want this font to be. Use the headline font, typography. And now it's now Montserrat and all the rest of them are Roboto. So that's kind of something to be aware of. It's a great way to get started and kind of say, okay, here's the. Here's a couple of fonts that I'm going to use throughout my page. Set them on the page at that level and then don't go into every element and set a font on the element, because then if you change your mind later and want to change fonts, you got to go back to every element and change it on every element on the page. And so instead just set it at the page level, at the typography, and then let that automatically apply the font to all of the elements below it. And then when you change it there, it affects everything on the the page. So saves you a little time there as you're moving forward. So we're gonna go ahead and change this back now. We can see that in action here. If we change this to Montserrat, For some reason, it did not change it. We need to change up. There we go. Let's change it now back to Montserrat. There we go. And now we can see now it looks like it's actually applied our font style all the way across. And so that actually looks much better. Okay, so we've got the basics laid out here for our basic pop up so we can see what that looks like. So we can show that we've got that going. Let's make sure that we've got. Actually, I think we need to set our borders on our row to be the same 10 pixels. We want our square. There we go. No, that's not quite right. We'll leave it like that and we'll see what it looks like. So we've got that going. We're gonna go ahead and save this structure for now. Call this Tsunnel demo. Okay, so we've got our basic structure build out. We've got our pop up. Our BASIC pop up build out. Right, so we've got this pop up going. But we know that on the order form that if we click one of the buttons, it opens a pop up and we've got an order form in it. So. And then how do we make that happen? And so what we've got going there is actually that order form is in a new section that's hidden at the bottom of the page. And then we have some magic that when somebody clicks the call to action button, it actually swaps out the content of the pop up window and shows that one instead. And then if they close the pop up it defaults back to the basic on exit pop up. Which let's go ahead and set our pop up settings to pop on exit. And so if we go to show when user exits here, it's going to show this content. And so we can see that now if we save our page and then if we do a preview. We can go in now and once this page loads then we can when we go to exit now we see our pop up come up. So what we want to do is we want to build the content for our alternative pop up which is our order form. So what we're gonna do is we're actually gonna build out a whole new section down here and we're gonna add in that new section is gonna be our actual and we're just gonna make this one a. Let's make this one a medium section because it's gonna contain our pop up content. And so we're gonna go ahead and add a new row here. We'll just add a one column row and we're gonna add our two step order form element in here and we'll start with that. And now we've got a two step order form element inside of that hidden hidden section. And we're give this a special name and we're gonna grab the code here in a second that will actually make this work for us. So we're give this a special name and we're gonna call this. And I'm actually gonna go back and reference my drag some stuff around here so I can see my editor window. I'm going to actually go down and grab my code. So I'm referencing giving you the right name here. I want to pull up my multiple pop ups code. And we're gonna call this CF Multi popup one. Okay, there we go. So now we've got that section. We're gonna call that give that a special name. And now let's go ahead and go in and grab our code to make this work. So let's grab our. Let me actually. Where did my doc go? Well, let me first off let me get rid of my doc into the right spot. Once in a while it freaks out and shows up on the wrong window. Okay. And now I'm gonna jump into. This is my CF Pro Tools demo account. And on this one I've got an add on a new add on called multiple pop up. I'VE already created this one. But when you get in here, you'll be able to. Once I unlock this one, it's not unlocked yet, so it's only available in my account. But we'll get this one unlocked hopefully later today. Definitely over the weekend once I get instruction videos in there specific to this one. So I'm gonna go ahead and we can click Create new and then you'll just be able to search, go in and do multiple and it'll pull up in this. This multiple pop ups. You click that, it'll create you a new version of it. I'm gonna go ahead and use the one I've already got built. There's no configuration to it. If we go in and we open this up, it's gonna let me copy the code and then if I edit, we'll see here we'll have instructions at the top. There's no configuration or anything for this. You just have to know how to actually configure your page to use it. So we're gonna go ahead and click update. We'll grab our code. I'm gonna copy this code. Copy that. We're gonna go back into our page here and I'm gonna go to settings and tracking code and footer code. I'm gonna paste that in and we're gonna cross our fingers that I did set it all up right and everything is working. And we're gonna go ahead and hide this section on the page. So it's not there by default. So it's hidden by default. We're gonna go ahead and set our button here. We're going to set our button action to work with this as well. And the button action is just going to be open popup. And just so you know, that's how you can open the popup. The basic pop up is with the hashtag Open popup. So if we were to change to click to this open the pop up. That's actually what it's doing. It's setting the URL action for that button to open popup. So you can also use that in a link, a regular text link hashtag Open popup. And a clickfunnels page will open the pop up when somebody clicks on that link. We're gonna extend that a little bit. We're gonna say Open popup one so that it knows that we want to open the pop up with the content of CF multi popup 1. So you just match that last in that one on both of those and it will open that. Right, that same one. So we're set that button to that action and we're going to go ahead and click save on this and let's cross our fingers that I've got all my code pushed up properly and we'll make this work. Because I honestly have not tested it since I pushed this this morning. I was prepping for this call and I think we should be good to go. But let's test it out. And now we see we've got the pop up, is the content here exit out of this exit up. Now we've got the content that is my exit pop content. So now we've got the multi pop up content working. I can close this out now. It won't pop up my exit again. But if I go back and I click on my button here, it will now open back up and I've got my content for my two step order form in there so I can walk through and place the order. So that's, that's how we've got that multiple pop ups working. We basically just have inside of the editor we've got a hidden section and inside of that whatever we put inside of this section will show up on that pop up. When whenever we have a button that gets clicked, a link that gets clicked, that has that hashtag open popup1, it will open with the content of that. The beauty of this is if you wanted to have a second or a third or a fourth pop up based on different products, different, you know, if you're, you're doing a sales page where you want to show different features of different things, you could actually attach them with different buttons and have open pop up one, open pop up two, open pop up three and they'll all open in that pop up. And so it's pretty cool for that. So it's whatever content you have in that section, so if you wanted to make a second pop up, you would just clone that section and we could, you know, put in different content here. Let's take this out, get rid of that and let's put in, we'll just put in an image element here, let's just put in an image here just so we know that we've got different content. And let's call this one, we're gonna get CSS info and we're gonna call this popup 2. We're gonna update and now let's go ahead and clone our button here just so we can show the difference. And we're going to set this one to open popup two and we're going to go ahead and Save and then we'll preview our page again. And so now once our page loads up, now if we click pop up one, we get our order form. Now if we click our second button, we get our second pop up. So now we have the ability to have the base pop up that works on exit and then button and link actions that use the other pop up contents. And they're just sections that we just label a certain way and then that content will show up. So our exit still works and all that. So work. So that's kind of the magic of how we had this working on. To be able to use an order form in a pop up but still have another pop up. That was that exiting call to action. That was not necessarily, hey, place your order. It was like, hey, are you, you know, you afraid to order it from this funnel? Do you want to go buy it from Amazon? Which we know that a lot of people come in, they're like, they feel more comfortable buying books off of Amazon. So we didn't want to lose those people by saying, hey, you have to order it here. When I say, hey, if you want to order the book, that's great. Just maybe, maybe you feel more comfortable buying it off of Amazon. So here's a way to go do that. If they're exiting the page. So we've got that piece working. And then one of the other things that we wanted to do is that we showed is that that header bar above the actual two step is quite a bit different than the norm. And so we can see. So if we open this one, we can see we've got a nice looking graphic here with one step, two step. But if we go and look at ours, we've just, yeah, it's not quite the same. It's similar, but it's not quite the same. And it's a little hard. If we toggle, we can see. Well, my toggle's not gonna actually switch these things. Let's do testing. We go to step two, then we can see, we toggle. So not bad, but it could be better. And so we wanted it to be better. We wanted to be more like this. We wanted to kind of call out, have the colors be the same, get rid of little arrow things, highlight, have shadows grayed out, do lots of other stuff. This is actually just an image. It's actually two images. One for step one, one for step two. And we're just showing that above the element. And then we've got some custom CSS that hides the normal, hides this whole block. So this whole Thing is all text, you know, we can highlight this stuff. It's all text in here. What we've got here is not text. There's none of this. This is all one image. So if we right click on it, we can even say open image in new tab. So we can see this is actually an image, it's just a PNG file. And so we can actually. And there's actually a step two as well. So if we go to step two, we can see, oh, gotta select a country. If we go to step two on this, you can see that step two is a different image. So what we needed was a way to flip. Okay, well I just want to toggle something's visibility based on which step of the order form are they on? Are they on step one or they on step two? So we actually create a little add on for that as well for toggle on step. And this would be great if you're using images on the page. Sometimes we're doing a two column approach where we got a two step order form on the right side and maybe an image of the product image of the book or a video or something on the left hand side. Maybe you want to swap out what's visible on that left column. If they're on step two, we've run into that before. We're like, hey, we only want this extra little piece of content to be visible when they actually go to step two. So we create an add on for that. And so that's kind of how that works. So what we want to do, let's just grab this URL and we'll just. Obviously you want to create your own images, but all we really want to do here is above our two step order form is we want to insert another element. And we're going to insert. Actually let's do it this way. We're going to do elements, we're going to add elements and we're going to drag an image, see if we can get it to go in just above. Nope, it's going to go in. So we're going to drag this up above our two step and then we're just going to set that URL. We'll just use that one from here. And then we want a little custom CSS to hide this thing. Right? So let's go in and see what our CSS is for that wrapper. So if we wanted to hide that entire top section, let's inspect and see what we've got there. And I actually didn't grab this out before, but it should Be just. Yeah, it's just this order two step header. So I'm gonna double click and I'm gonna highlight that so I can copy it. And then if I were to put into a little custom class and I just want to say order two step header. And then we're going to give that a display of none. And you can see now it's entirely hidden and so we can set that display as none. And so we just need to throw that into our custom css. So I'm going to copy that from right here. We're going to go back into our setting and custom CSS and we're gonna put that in there. And now we've got that hidden and now we've got that set up. So we're gonna hit that. Now we want to step two as well. So we've got. We know we have two different images. So I'm gonna grab the URL of this, I'm copy that and then I'm gonna go back into my editor. I'm just gonna clone this image right here and I'm just gonna give it that other URL that I just copied. Now we have step one and step two. Now on this one I can actually set it to hidden. But what I want to do is I want to make sure that one of these shows on step one, one of them shows on step two. So we've got some custom code for that and we just have to configure our our elements to use that. So we're gonna set our CSS title on this element a certain way and then that way the add on knows what to do with it. So we're going to call this CF show on step one. Click update. And this one we're going to set SCF show on step two, we're going to click update and we're gonna go ahead and hide this one. Now everyone save this. And now I just need to grab my code that actually lets that work. So I'm gonna go back to my add ons inside CF Pro Tools and I'm gonna go in and we've got one that is called toggle on steps. So I've got one already created here. You'll have a new one. So when you create new, you'll be able to search and we're gonna just do toggle and then it's called toggle on steps. So you can. We've had toggle on product before. So you can swap out images, you know, of the image of your product based on which product they select. In the product selector. Now we've got one toggle on step like which step of the order form are they on? Let's show them. It only obviously only works with two step order forms, but just click that and it'll let you create a new version of that. We're gonna go ahead and grab the one we already have. There's no configuration for these, so you can just use it once on as many pages you want. Just build one and it can work on all the different. You don't have to configure it for different pages, different funnels, all that fun stuff. So we've got that there. No configuration. We're just going to click update add ons. We can grab our code. So I'm going to just click copy code. And now we're going to go back into our editor. I'm going to go back to tracking code, back to footer code and we're going to go ahead and paste that in. And now let's go ahead and hit save. And now let's go ahead and update our page here. We're going to close this out. And again we'll keep our fingers crossed that I did the magic right here. So we'll click sign up. Okay, so now we've got our step one image up above. We've got all this filled out. So let's go ahead and click go to step two. And now we've got our step two image. So basically just swap the visibility of step one, Step two images. The add on did all the work. You just had to make sure and label them the right way inside. So that's how we made that work. So a lot of people are like, well how did you make that look so cool? We just built images that look the way that we want them to look and then just insert those images on the page, hide the normal bar up at the top and make it go from there. So. So that's how we got that going. I'm gonna drag some of this stuff back up so I can make sure got everybody still covered. Okay, I'm just going to run back through the chat here real quick, so I'll go on. Juan wants to know, could you see that achieve the same with a Click Pop page? Yeah, you sure can. One with multiple clicks, multiple pop ups with Click Pops. They're a little hard to make a click pop work on a clickfunnels page, unfortunately. I mean you can definitely do it. The other thing that I don't like about Click Pops is with Click Pops, this actual the little X here is way up in the corner here and it's totally disconnected from the pop up. So that's why I went this route of being able to have multiple pop ups, being able to control the content all in one page instead of having multiple pages that are keeping track of the content. And then also because we wanted the products being sold to actually be part of this pop up. This is our order form. If we put, wanted to put a two step order form in a Click Pop page, that click pop would have to be our order form and then that disconnects from the actual page itself. So yeah, so that's kind of why I built this out to be actually use multiple pop ups. My biggest grief is that with Click Pops the X is way up in the corner. It just doesn't, it's like it doesn't associate with the actual pop up content. Makes sense. Yeah. Yeah. So, okay, so we got some, we got some stuff going. The big one. Let's go ahead and, let's go ahead and handle our video because that's quick and easy. And if you've been in Safe Pro Tools at all, this one is live. This one does have some video instructions already in it. And that is to do our little Vimeo video overlay. And so let's go ahead and find that one actually. Vimeo. So we've got our Vimeo. We got a couple of these. So we got Vimeo Autoplay Unmute Restart. I've got a new one out here as well called Vimeo Autoplay Unmute Restart with tracking. This was one that my good buddy Frank Kern had asked for something, some way that we would be able to track view percentages of a Vimeo video or any video really. But he wanted to be able to do it like how can I do this with Click Funnel? So I said, you know what, we can do this. Vimeo already have the API for it. But be able to track, you know, when somebody's watched 10%, 25, 50, 75, 95% of a video and then actually track that inside a clickfunnel so you can see that and then be able to follow up with those people. You know, if somebody's watched fifth 50% of a video, then maybe you want to send them a special autoresponder sequence to say, hey, you know, thanks so much for watching the video. You know, you, you know, you should go and check out this other page, you should go back to the order form, you should do whatever and then also be able to track individual things that happen at specific seconds within the video. So if somebody saw an offer, you'd be able to send them an email that says, hey, it looks like you looks like you saw the offer about that I made about xyz. Here's a link to the order form just in case you missed it or haven't had a chance to buy it yet. So send them back for that based on actual video view time, not time on the page. So clickfunnels out of the box will support some of those saw offer with like an auto webinar page, stuff like that. But it's based on somebody sitting on the page for a period of time. So somebody could, you know, open up a page, walk away, come back an hour later, and it's gonna fire that they saw the offer. They may have never started the video to begin with. And so we kind of want it to be tied to when they actually watch the video. And like if they click pause, if they were on the page for an hour with the video at the paused at 10 seconds, it still fire that because they were on the page for that period of time. So with this, it actually doesn't fire until they reach that point in the video itself. And so we've got a couple of versions of this going and they both do the overlay, they both do some of the magic to restart at the beginning, to autoplay the motion without the sound and all that. We've got one with tracking. I believe there are videos already in for this one. Let me actually click in and see. Yeah, so I've got the videos already up, the demonstration of how it works and how to configure and install it for the with tracking. So if you're interested, jump in and check that one out. And then the other one that we have is without that and we'll just do Vimeo. And then we have one that's just doesn't do all the tracking stuff, but it does does let you go in and do the autoplay and the restart and all that. Dara wants to know, does it still work if they're using the video speed controller? Yes, it does. It actually tracks Vimeo fires every time somebody is playing the video. For every 250 milliseconds they track what point are they in the video? And it fires a call in the API. So this is what's this is using the actual Vimeo API to see what current second are they watching in the video. And it fires it based on that. So if they speed up the video, then it'll still be you know, instead of being they've got it at 2x speed, you know, they might have watched 30 seconds, but they're actually 60 seconds into the video. So it'll fire if you say at 60 seconds in the video, then show them this, you know, then fire this event, then it will work for that. So it's actually tracking based on the second they are in the video, even if they've watched it at double speed. Yeah. So we just need to grab the code for this because there's no again, there's no configuration on this, on this particular version where you just want to do the restart. So we just need to grab the code. So we've got the code. We want to go back into our editor page and set our video up to use that so that we get our nice little overlay action. So we're going to go to tracking code and I'm going to go ahead and paste in our code for that. And then it's pretty simple to set up with the video. You just have a Vimeo video and if we don't put a URL in here, Click Funnels provides us that default Vimeo video that's about Click Funnels. So we're just gonna leave it blank. But we want the autoplay set on block pause set to no and unmute labels set to no. And then all we need to do is actually set this to CF Vimeo Video and we'll go ahead and click update. And now we'll save that page and then we'll go in and we'll refresh it. We'll try it again because it didn't quite do the deal. Okay. Did I save my page? Make sure I've got my restart. Make sure I've got installed. Yep, it's coming from the server. Okay. And let me double check and make sure I hit update on this. Yep. Vimeo Video. CF Vimeo Video update. Okay, we're gonna try this one more time and if it doesn't work, then we're gonna inspect. You guys get to dig in with me a little bit while I figure out why this is not working. Let's do an inspect and see. Is it throwing a JavaScript error or something? Page key is not defined. That's not causing our problem with that. Add on is disabled. Ah, that's why. So inside of CF Pro Tools there is the ability to disable your add ons. So if we go into add ons and go into search for ARD Vimeo I must have. Yes. So notice this little toggle here. Says it's disabled. That means it's not going to work. So I need to enable it. Now if I go back and refresh this page. Now we get a nice little overlay. Perfect. And now we can let that play. We click play restart back in the beginning. So now our video is working the way we want it to. And now our headline here is. Let's take a look at. See what we had on our headline here. We had something like make sure your sound is turned on. So we can just put that in here. Get rid of our. Don't need it quite that big. 16, maybe 18. Get rid of our margin top. We've got. I think we set a background color. We'll just set it to this green. And we can set some line height on this, make that a little bit taller, make our text color white. And I think we had an icon. Go to icon. We can do icon picker, do volume, Set that up on all this to be bold. I just want this first part to be bold. Okay. So that kind of gives you an idea of what we've got going there. And so we've got that set up. Obviously we won't play around with the headlines too much. You guys can figure most of that out. We can actually set margin on this one. So we get a little divider there. So you can kind of see how that works. That's one thing that, you know, some people ask about is like, okay, how did this work now? I think there's some custom CSS on this one that actually is setting that top corners to be rounded so it looks like it's part of the video. It's a little more attached that way. So we can actually find that if we right click and inspect on that element, we'll let that pop up. We can look at our headline wrapper is the element that actually wraps that. And let's see, we've got margin, top five pixels. We should have. Oh, we want this. There we go. Margin, outline, border radius of 5 pixels. Okay, so maybe we didn't need to set it just on the top. So we can go in here, set border radius. Border radius, 5 pixels radius. Edges, top only edges. There we go. So easy enough. So we got that set up. So that's kind of how that is set up. You know, it's kind of a nice touch. It gives. Gives people, you know, a little message, kind of calls out the video a little bit. So that's what we got going on there. One of the next things we want to do is figure out, okay, how do we get this image pulled up into this section? So that one's actually really easy, and we saw that before, it just has a negative top margin. So let's just actually obviously, your own funnel, you're gonna want to grab your own images, but we're gonna just use this URL here, just for example purposes. So let's go ahead and go into our image. We're gonna replace that with this one. And now just on this image, we can do margin top. And so top margin is zero, but you can actually type in negative numbers here. And so if we type in a negative margin, it sucks it up into that element up above it. And so we can see that that's what's happened here. So now we can play with that. Obviously, let's give this row here its own margin to get some room away from the video. So let's. So let's give that like a. Let's give that like a 50 top margin. And then we've got an extra button in here. We don't need this anymore. That was just to show our extra pop up. So now we kind of see, we get our overlay similar to what we had here, where it's kind of overlaying this image. And so we've kind of got that same thing going on. Now if we wanted to make the width of this image that one. So we can kind of see that if we look here that the books are going kind of out the side of this a little bit. So we can kind of see we've got that same thing going on. Now, obviously the height of this is going to change a little bit. So, yes, send me your address. So we got a couple, a couple of headlines in there. It's taking up a little extra space. Yes. Oh, just send me your address. Send me your address. And we can actually just copy this content for now. And again, if we wanted to kind of figure out like, what size is that, what font size is that? We can actually inspect and say, oh, that's font size 24 pixels. So we kind of read that over here. So we'll set this to 24. And this one we're gonna inspect and see what size that is. That one's 44. And then we've got our button in there, obviously. And it looks like that button is set to fill width. And what's it say? Yes, reserve my free copy now. Okay. And we probably got bigger font size on that one. Let's go with 24. We can right click again. We can see even font sizes. On these buttons we do an inspect. You can see here we've got a font size of 22 pixels. And then probably don't need 22, it's probably 16 down below. And we'll give this one. Let's right click. We want just this copy here. So now we'll give this some subtext so we can get a similar size in there. Okay, so now these should be similarly sized. So it looks like we might need to suck this up a little bit more in our version. So we'll just kind of play around with that. 290 might be 300. So there we go. So now we've got that kind of sucked up and that's how that effect works. So let's go ahead and save and do a little preview. So we'll reload this. And now let's scroll down. So now we've got that same effect going on. So obviously you could play with the size of your image, you can play with the, you know, the width of your rows. You could do all kinds of stuff to make this work. But that's how we achieve that look of that book kind of popping out from the borders of that row. It's just two rows stacked on top of each other and one column in one row and one column in the other row and they kind of gives that overlay. So that's what you got going on there. So that's kind of how we built that out. And so we've kind of walked through all these things. You know, we've got the basic layout here. Obviously it looks quite a bit uglier than the real thing. But now you kind of at least have a pretty good idea of how we structured the page, how we put elements onto the page to achieve some of this design effect as well as some of the custom code that goes into making some of these features work. Like having the order form actually in a pop up and how we do the replay back to the beginning and you know how we do this kind of cool little bar up there at the top and yeah, so how we change the bar for the two step order form element. So let's see the next things we want to do. We want to go through and we kind of go through. Let me actually throw this question out there and if you would just shout out in the chat, how many of you would like to see me go through the setup of the international shipping add on and how that works, how we structure the products, actually create the products and show you how that works. We've got instructions inside the CFO tools. Add on, obviously on how that works, but I do get questions on that from people, you know, fairly often of like, how should I create my products? Like, what should the price be on our products? All that. So if it's useful, we'll run through that. Okay, so we're already getting a yes and a yes and yes. So let me run through and show you how we set that up and it will make a lot more sense. And yeah, I done one of these trainings in the past, and I actually use that to reference quite a bit. If somebody's a little confused on how to set up the products, it helps quite a bit. So let's go ahead and run through and do that. Next we'll actually set up our products. So if we go back to our funnel, we're go to our view form, we're going to go into products. And we're gonna, we're gonna lay out. So let's look at, see what we have. First off, so if we look at this order here, if we go in and we'll look and we look at our order form, you can see on this one, we're on step two still. So we got the book, and then we've got a shipping product, but we know that that shipping is actually domestic or international. So we've got three products. Three, not three, three. So we've got three products there, plus this is a fourth product, plus this is a fifth product. So we know we need to set up five products and we know that we want the Traffic Secrets book to be listed as free, but we can't have a free product in clickfunnels. Now, there's a way to hack around that and do like a subscription product that's with a free trial that you only charge one payment for, and it essentially never charges somebody for it. But. But it's really kind of a hack way to do it. And so, but in this scenario, really, we know we're always going to have associated with this free product. We're going to have a paid product. So all we need to do is shift the pricing a little bit. So we're actually creating a $1 product, or in this case, a $2.50 product. We're just going to have it labeled as free, and then we subtract that price from our actual paid product and then we change the label on that one. So the math comes out the same. The math works out to it's free plus shipping. But in reality, on the back end, we're charging for Both we're just charging one at a low price and one at a lower price than what we would normally charge it for what we advertise it at. So let's go ahead and set that up to start with. So we're gonna create a book, and so we'll go in. We're gonna go ahead and set this up in my CF Pro Tools Stripe account. We're not gonna worry about commission or anything like that on this one. We're just gonna save and next. And then we're just gonna call this my awesome book. And we're gonna set this at a price of a dollar, Just something that clickfunnels will let us create the product. And then we're gonna go and save and close. Don't need to set anything else up. And then we'll go back to our products tab. And now we want to set up our domestic shipping products. And so our domestic shipping we want to set as $9.95 is what we now offer the free plus shipping. The shipping is $9.95. The product is free, but we set the product up to be a dollar. So now we need to set our shipping up to be $8.95 as the actual charged price. So we'll just call this domestic shipping, and we'll set this one to be $8.95 for the actual product price. This is the price that's actually going to be charged for this. But we're going to do is for the price display override, we're going to say $995. So that's what's going to display as the price, but we're only going to charge 895. But we know if we sell this product, it's always going to have the $1 product associated with with it. So we're actually going to end up charging 9.95. So we can feel comfortable displaying this as the price, because that's what's actually going to get charged when we add it with the other product we just created. So we've got that. So we're going to close that out. And now we're going to go back to our products again. And now we need to create our international version of this. And our international, I believe, is 1495. Let's check this and see. Go to this and go back then. Yes. Oh, 1995. Okay. So we need to set up an 1895 product. Oh, I didn't mean to do that. I need to save it first. So we'll do save and Next. And then we'll call this International Shipping. And I misspelled it because I'm trying to type and everything's lagging. So $18.95 because we want again we want to charge $19.95 shipping. We've already added a dollar for the book so we need to take that dollar away here and but here we want to say 1995 is the actual price it's going to be charged and then we'll do save and close. And so now we've got our three core products built. So we've got our book plus our two shipping charges. And so let's go ahead and start from here and get our international shipping add on installed. That way we can see that work and then we'll work forward with the bumps and add those as well. So we can see here we've got these products added and now we just need to grab our international Shipping add on from CFOTools. So let's go ahead and jump into our CF Pro Tools account, go to Add ons. And this one does have configuration so I'm going to need to create a new version of it for this page specifically. So I'm just going to search for international and I want to grab my international shipping add on. So I'm gonna go ahead and click that one and then there's instructions that cover all of this. How to set this all up inside of this add on already. So I'm gonna go ahead and actually. Nope, I take that back. This one is not quite updated yet. I think I've had these recorded. I just need to import the new ones. But we'll get this one updated hopefully over this weekend. So you can see all the videos are how to grab your product id. That's not what we want. So we'll get the instructions installed for this one but. But we'll walk through how to, how to set this up. It's pretty easy. So I'm just going to call this TS Demo or TS Funnel Hack International Shipping just so I can identify it later. When I'm looking at my list of add ons, I know this is the one that we used for that. So this is my international shipping add on for the TS funnel hack. The other thing that you can do that you can do for this is say okay, this is my international shipping add on and I want to grab it for this funnel. It's specific to this funnel for the order form in this funnel. So I'm just going to grab my funnel id. So if I look at My URL and go to funnels slash. The number that comes after the funnels slash is the is my funnel id. So I can just copy that number and then I can go back in here and I can say international shipping dash that and that'll give me my funnel id. So you can do it by name if that's easier. If you want to be, you know, not have it be quite so long, you can just do it by funnel ID and then we can do it that way as well. So the next thing we need to do is say, okay, what are our domestic countries? Well, in this case it's just United States. So I'm gonna pick United States. If you had multiple, if you wanted to do United States and Canada, you can just add another domestic country and pick Canada. So that's one option you have with the international shipping add on, but we just said it as United States. Everything else is international. So we're gonna remove that. And then the next thing we need to do is say okay, what's my core product id and then what's the shipping product ID that goes along with that? So let's go back and grab a product id. So my core product ID is this one here. Now I've got a little extension that lets me grab the product ID right off here. But what you want to do is right click and copy link address and you can go in and you can paste either just the product ID or you can actually paste the entire URL and it will automatically convert it to just the the product id. So I actually copied the URL. So if I right click on this and do domestic shipping and copy link address. If I go and open a new tab and paste that in, you'll see what I pasted in is the entire URL for that product. But what I'm gonna actually end up with when I go into Save Pro Tools is I paste that in, it will automob. I don't know what how it grabbed that. Right click copy link address. Now if I paste that in, I am not quite even sure what it's doing here. Okay, need to take a look at that. It's doing something weird. That's what it should be doing. Okay, looks like I've got some fix to make on that. Okay, so we're gonna grab just that product ID for that one. So I'll get that fixed up. I'm glad we test these stuff. So we're gonna copy link address. I'm gonna do it the old fashioned way. I'm gonna paste this in And I'm gonna grab, I want to grab after the slash products. That ID is our actual product id. So now I'm just gonna paste that number in. There we go. And then for the international product, I'm gonna do the same thing. I'm gonna grab the international shipping. I want to grab my core, which is right here. I'm gonna paste that in and then I'm just gonna double click and grab this product id. Eventually I will make this add on available or this extension, this Chrome extension available for everybody. So you'll have some of these kind of shortcuts, but it's not quite ready yet. I don't want to clog up somebody's computer with something that I might need to change in the future. So, so right now we've got this add on configured. United States is our domestic country. Everything else is international. We've got our domestic product group is our book plus this shipping product, our international product group is the book plus this shipping product. And so you could have multiple other product groups. If you need to, you can click and it's again, it's a core product ID and the shipping products associated with it. And you can do the same for domestic and for international. But that's all we need for this configuration right now. So we're going to click Create add on and now we're good for that. So I'm going to copy code and that's gonna copy that code. I'm gonna go over back to my funnel here. I'm gonna go ahead and go to settings and tracking code. I'm gonna put this one up at the top. I kind of like to have my CF order summary and my international products set up at the towards the top of the codes. Just makes it a little easier. So I've got that one in there. So we're gonna go ahead and save that. And then in order to make this work, we need to have this order summary update, right? So that takes another add on called the CF order summary add on. So let's go ahead and grab that as well while we're here. So we're go to order summary. So we want to install that one as well. And that one takes some configuration as well because we have a specific product that we want to show is free. So we want order summary. So let's go ahead and walk through and configure this one. And this one as well. I'll have videos updated for hopefully over the weekend. But we're gonna do the same thing. We're gonna say order summary. And we're gonna grab that pro, that funnel ID and we're gonna put that in so I know which funnel this is associated with. We'll put that in there. And then what do I want to show for my free price display? If I configure my product price as 0, what do I want to show there instead? So I want that to be free. And what do I want my order total label to say? I want my order total label. Say order total. And then the next thing is override prices. So if your prices are complex, if you're something like, hey, it's three payments of $37, then if you don't put in a price override, then the, the add on is just going to guess on the price and it's going to come up with a guess of $337. Because it's, that's all that's left once you take everything out with the numbers is 337. And so it says, okay, so it must be $337. So but that's not really the price. All you're collecting is $37 on the front end. So you have to set a price override. In this case we don't need to set anything. But I'm going to go ahead and set up just so I know that my product price is not a dollar for my book, it's actually free. So I'm going to go ahead and grab the product ID of my book, grab that, and I'm going to set product id and then my price is zero. So that way the add on knows that, hey, the actual price for this product is actually $0. So don't use the price from the normal order summary, set it as zero. And because up above we've said, well, what do we want it to say for products that are free or zero dollars? We're going to show it as free in the order summary and that's all we need to do with that. And so we'll create that add on and then we're going to scroll down, we're going to copy code and I'm going to go back over into my funnel and into my page settings tracking code footer codes. I'm actually going to put this one at the very top. And we're going to do save and we're gonna do fingers crossed that everything works the way that it's supposed to. And now we should have everything up and working. So we'll do a yes, I wanna grab my copy. It's gonna pop in our order form here. So we'll run through this. We've got an email address. We've got an address. We're gonna do United States to start with and we're gonna go ahead and click go to step two. And now we can see that we oh, for some reason it's showing international shipping. But at least we have our order summary up and working. We've got our. And it's got our an add on there. It's showing it as free from my awesome book. We need to override the price here. So that's one step we missed. So let's go back and fix that up because we want to override this price. We want to instead of automatically. If we don't put a price display override, it will always just show whatever the actual charged price is. So we actually want that to say here in the price display override free plus share. And now we'll save and close on that. So now if we click our. Click our pop up here. Okay, awesome. So now we've got. Okay, so now we've got to show on free plus shipping here and then it shows us free here and it's showing still international. Not quite sure where that is. I'm not going to worry about troubleshooting that. Now it should show our domestic and then if we changed it to something outside of what our domestic countries are, I might have misconfigured it here. But if not, that might be a little bug that I need to fix and that'll be fixed as soon as we're done here. So we need that to work. Right. I guess this is not passing over us in the right format. Domestic countries us. Yeah. Probably have a little, little bug there I need to fix up. So we'll get that sorted out. But that's how we set up the international shipping add on to connect our books. That's how our products get set up again. We've got our products are just the book and then our domestic shipping charge and our international shipping charge and then we can figure an add on to connect the two between. And for our product price, we just. You could charge whatever you want on the book. You could set it up as a dollar if you were doing affiliate commissions. You set it up so that you can calculate an actual affiliate Commission. That's what ClickFunnels does, is actually charges $2.50 for the book but pays 40% commission. So everybody when you buy a book, you get a dollar even though it's free book. And that's why you can say as the affiliate program is like, hey, we're gonna pay you a dollar for every free book you give away. Obviously you can't afford to pay commissions on shipping charges so. So that's how that all works. So we've got that going. We are getting darn close to two hours here and we've only gotten through the order form. Let's take a look at our list here and see did we hit. We hit. Still haven't. We still got some things to hit on so the bumps as buttons. So let's go ahead and work on that and see how far we can get. And then we'll do a check in and probably another 20 minutes or so and see how everybody's feeling. And then if we need to have a follow up session we definitely will because we have a lot more to go through. Probably at least a couple more hours of stuff to go through. So I'm happy to keep going but we've got, we've got lots of stuff to go through so I want to make sure it works well for everybody. I don't want to suck up your entire Saturday. It's getting a little warm in here, so let me take off my jacket. Dara says most engaging two hour training ever. Thank you. Thank you very much. I appreciate that. Joseph wants to know when Is the app cfpro tools.com available for VIP members? It is. Will be available for VIP members. I'm finished up the videos now. I don't want people that haven't been through some of the intro to jump in there and be confused by the fact that some of the videos aren't up to date yet. So I'm working on recording all those videos. But as you can imagine, having to record new videos for 60 plus add ons is a little, a little tedious and it's taken me dramatically longer than what I had hoped for. But I'm working through that. We got quite a few of them already updated. I actually hired somebody to help me do all the rendering and updates for all those videos. So I'm going through those now. I hope to have it released to the general public and to the existing VIP club members first and that will be hopefully released in the next week or two. Hopefully sooner than that. What I may actually do is go in for those videos or for those add ons that don't have the videos recorded yet is actually disable them temporarily so that you can use them from the old members area and then as I get the videos done released and that will allow me to release it to VIP club members sooner rather than later. So hopefully in the next week or so you'll see that come and get released for existing VIP club members. And then eventually when somebody else comes in new and they buy into the subscription, then they'll get access to the new system and eventually the old system will go away. But for now we will have them both available. So if you need to get something out of the old members area, you can. If you need to go back and watch some of the training videos there, you can. And then once we get everything fully up to speed in the new system, then we'll shut that one down. So that's kind of the plan there. So let's jump in and take a look at how we did this kind of multiple bumps as well as the ability to do this add and remove. So like we have here we have an add and remove and the structure of these. Everybody kind of likes this. In fact, if you know Frank Kern, he's quite a humorous character and he sent me an email and he said, man, looking at them and I'm gonna try and do my best Frank Kern voice impersonation that I got through email. Man, looking at them new, looking at them new bumps, man, them some bitches are sexy. So that's what Frank Kearns says. A lot of people like the new bumps. I like them as well. And so let's walk through and let's show you how we got those set up. And then we'll insert the add on that lets us actually create those products. And these work a little bit differently than traditional bumps. Obviously this still has a bump turned on. That's one thing that we need to start out. So let's go ahead and get rid of that. Now if we go into our two step order form element, we don't want that bump because we don't want to use actual bumps there. So we're go to the advanced tab and we're going to toggle the order bump to hide order bump. We don't want to show the order bump. We don't want somebody to be able to use the order bump. So we'll get rid of that. And then the other thing we want to do is now we've got our section still showing here. So this is our section that goes into our pop up. So we want to put our, our bump products we're just going to put in below that. So what we're gonna do is actually we want to, as you might be able to tell from this, if we were to look at those. We can tell. Okay, well, we got three kind of distinct sections here. So this is probably a three column row and that would be exactly right. So we're gonna go ahead and create a new row if I can find the right selector here. And it's just a three column row. So we're gonna give that three column row there. We had two of them. So let's go ahead and clone that one. Actually, you know what, we're not even gonna do that. Let's style up one of them first and then we'll clone that one. And let's go ahead and what we can see here is we've got quite a bit of content in the middle and then the buttons kind of sucked over to the right and then the images sucked over to the left. So let's go ahead and set that up. So we wanna drag this one over and drag this one over so that we got more room in the middle for our content. And we're gonna go ahead and insert an image. This is gonna be our image of our product. We're gonna insert an image there and then we're gonna go ahead and put. We're gonna go ahead and put a button in place. And this is gonna be our added button. So we're gonna go ahead and change this up and we're just gonna put add. And I think that's what it says by default. Yep, add. And let's go ahead and put our icon in front of that one. We want to do. Where's our icon? Here we go. We want our icon picker. We're just gonna do plus and we're gonna. We wanna do the circle plus add on. So there we go. We've got that. Now we've got a little add button. And so we've got that going. And now let's put our. We've got a couple of elements actually here. So we've got a headline, we've got another headline and we've got another headlines. So let's go ahead and put some headlines in there. So we're gonna add a headline elements. And then let's just clone that a couple times. And then let's change this. And we're gonna special one time offer. Right. That one is about as good as you can get. Special one time offer. And put a little colon after the end there. We wanna align that to the left and we want to definitely shrink down the font size on that one quite a bit. And so we'll do 20 on that one. Let's take a look and see what this is. That's probably about 20. So let's take a quick look and see. We got font size is 18 on that. So we'll do 18. So we get that going and then we've got another headline here. And let's just bounce, bounce back to our audiobook plus four more exclusive products. So we're just gonna take that copy for now. Audiobooks. Audiobook plus. Oh, wow. Having trouble spelling this morning. Plus four more exclusive. I think exclusive is one of the most powerful words you can use. I love it. I always recommend using it if you can. People want to be exclusive. They want access to something exclusive. So just a little copywriting tip there. Exclusive is a powerful word. And then the other thing we have here, this one I actually didn't, didn't even mention. And we've got the ability here to toggle. We've got these little more links and so I have to make sure. We'll make sure and cover that on the next one. I'm gonna go ahead and put that on a drive list doc here, bumps as buttons. More links, more links. Okay, so we'll make sure and cover that. We've got those here as well. So we'll make sure and cover that. There's an add on for that. I just need to get it added in to the system. More links and same thing here. More links. Okay, cool. Wanna make sure we don't lose the fact that we've got that one. So yeah, so we've got that going. And this one is probably also. I think it's a little bit bigger. Let's call this one 20 and set the text color on this one to green. It's not the same green, but it's green enough. And then let's go ahead and grab our content again. Where'd our order form go? There we go. And we're gonna say click to add. We're just gonna grab this for now, Go left, paste our content in. We're gonna unbold it and we're gonna set that to probably 16. There we go. And then just so we can see how it works, we've got a little space there and we've got more. How we looked here. Yep. And then so we're gonna go ahead and set this as a link and let's see what our actual I'm gonna copy link address. And this one is gonna be a little bit different, but this is gonna be. The add on version of this will work slightly differently. But that's gonna be our custom code piece to actually show to expand our content. So we have it in there. Show bump content 1. We can also have show bump content too. It's not necessarily the add on I have is not going to be specific to bump content. In this case, we did a custom one for bump content. But we're going to be something to basically be able to click a link and expand. Expand an element to show an element that was currently or was previously hidden. So we're going to change that. So we'll go and set that in there for now. And let's give that a nice green color as well. So we've got that going. So we can kind of get our structure here. So we can kind of see that we've got our structure. Our demo image. Let's go and grab the copy of this image over here just so we can get a feel for this. We'll open that in a new tab. We'll grab our link here. Back to our editor and we'll change this out, paste that in. And I think we've got a specific size set on this image inside of this funnel. So if we were to right click on this and take a look at this image, I want to look at that image. And we can see that it's got the height set at 120. So if we go in here now and set our height to 120, then it's going to change our size of our image. So that's looking pretty good. And then our button size. Let's go and take a look at that and see what we've got. Font size and spect. And so we've got that set at font size of 16. So we want 16 on that. And I'm gonna go ahead and make that all uppercase because I like the way that looks better. And we'll go ahead and set this background color as our green color. Actually, we want it to be our gray color that kind of matches. We want. Let's pick our background color for this. Background color is just transparent. So we can actually just do this. And then our white is hard to see there. We don't want our text to be white. We want that. And what we want to do is actually set a background color and a border on our row. So if we set the background color here, let's actually grab our background color for this row. So if we grab this. Go and take a look at this row. Let's see if we can find the row here. If we scroll up just a little bit, we've got our columns. We're looking for the class of row. So we can see we've got our. This div class equals row. That means we've got our whole row selected. And we can see it's highlighting up above our row that we're looking for. So if we take a Look at that one, we can see that our background color is 242242 all the way across. So we can just grab that and copy that and go over. And we're gonna set that same thing here. We're just gonna go in and paste that in. Now we've got our background color set, and we can also take a look at what we've got for some of our padding. We've got the way this padding works. Just a quick CSS tip. Padding is read as goes clockwise. So padding starts at the top. So this means that if the first number is 20, then the top padding is 20. The next number is the right. So if the right next number is zero, then that means that the right padding is zero. If there are no other numbers, then that means the bottom matches the top. So that's bottom padding of 20. And then the left number matches the right, which means the left padding is zero. So that's a quick way to say that. So we can. We know from this that our top padding and bottom padding are 20 on this row and that our left and right padding are zero. So we can go in and set those. So top and bottom are 20 and left and right is 0. And so we've got that going on. And then what else do we have? We've got a margin, top margin up 30. We've got an outline, none back. Background color, border color. So we do have a border on this. So let's go ahead and set our border color. So if we go into our row and we set border, we want a full border. We're gonna go ahead and paste this in. So now we've got a border. Oh, that's not at all what I want. Copy that. There we go. So now we've got a border set. And we can see that our border radius is rounded. We can see that this got a rounded effect to it. We don't see the border radius here, but we can set that here pretty easily. Say it's a five pixel border radius. So we've got that going. That's nice. Our border is not 3 pixels wide. On the other, it's probably 2. That looks a little nicer. And we've got the full Border. So we got that going. What else we got? We're looking good here. Okay. And then so the next thing we want is we want this image to one. We want the image to be aligned a little bit differently. We're still not looking quite right. So let's see if we can squeeze this over even more. Okay, that's looking a little better. See if we can squeeze this over even more. That messes up our button. So we'll squeeze that just like that. Like that. That's looking good. Now we want our image to actually peek out. So again, if we go to our image and put a negative margin on it, if we were to inspect this image, we can take a look and see what we have got on our image wrapper. And we can see we've got a margin top of minus 35. So if we go in and do that same thing here, negative 35. Now we can see that we get that image peeking out from the top. And let's go ahead and on our row, we want that row to give us a little bit more room. So let's add a top margin there. So bump our row down a little bit so that's not sucked up too close. So now we've got this going on. So now we're looking good. We've got kind of our layout, right? That looks pretty. Pretty darn close to what we have over here without getting crazy with a bunch of other custom CSS and stuff like that. That's pretty, Pretty darn close. So we're going to go ahead and save our page now. Juan says, just checking out the chat here real quick. Juan says, gotta jump on a different call. Okay, awesome, Juan. And Latasha says, as a super extra bonus, could we get this funnel at the end as a shared funnel? So we kind of, like, have a lazy head start. You know what? I will be happy to do that. So, yeah, I'll build this out and what I'll probably do is strip out some of these images. Obviously, I don't want to be sharing some of these copyrighted images as well, but we'll. I'll try and clean this up, make it look a little prettier. We'll get rid of some of these copyrighted images and get some. Get some placeholders in there, and then, yeah, we can do that. So that'd be awesome. Okay, so we've got our bump going here. We've got our row here. We've got this setup. The next thing is for our buttons, we had an add button and of remove button. On if we, if we look at this. So if we click add here, we can see that it swaps out. And now it goes to remove. And then we've got added. So we can actually. So we've got two buttons here. You know, we could change out the text and all that fun stuff. But what we actually have is two different buttons because they actually do two different things. So let's go ahead and clone our button. So we're gonna clone our button. We're put up on another button in here and we're gonna have this button say added. And this is our state where this has actually been added. And let's see. And this has got the plus sign in it. It's got a little bit. It's got a different background color. So let's go ahead and set the background color on this one differently. There we go. So background color, let's call this our, let's put this, make this our green. Oh, I don't like that green at all. Don't like that at all. Let's make it this green. But let's drag down the opacity. There we go. And then let's change that text color. Change that to white. There we go. Okay, so now we've got that. So again, not exactly the same, but close enough to make it look good. And then the next thing we need to do is we need to tell these buttons like, what is this actually supposed to do? And so there's a new add on that I created that is to be able to allow you to add a product or remove a product based on a button click. And so that's how we're gonna make this work. So we need to name these buttons a certain way so that we can make them work. And I'm gonna go and grab the special, special way to name these here. Bear with me while I look at my add on. I don't wanna quote you wrong here. So we're pull this in and we're gonna just call this first button. We are gonna give this a name of CF dash. CF dash add dash product dash. Okay. And then the next thing we need to do is actually grab the product ID of the product we wanna add. Well, we don't have a product yet, so let's go ahead and create our product. So we wanna create our audiobook products of the one we want to to add with this when somebody clicks on this button. So we're gonna go ahead and create a new product and attach it to stripe. We're gonna save it next and we want to call this my awesome audio. We'll call this my awesome book Audio book. Then we're gonna give this a price of $37. We don't have to worry about the price display override because we do want that to just display as dol in the order summary. So we're gonna click Save and close. And while we're in here, let's go ahead. And this is one of the things I wish. When you click Save and close on products tab, it would actually go back to the products tab instead of going back to the order form. But we'll work with it. And then this one, we have one more product and this one was our live training. So we, you know, this is our recordings. So my awesome workshop. Recordings. And this is a $97 product. So we'll put in 97. And again, we'll save and close. And go back to our products tab so we can grab our product IDs. And. Okay, so we need to grab our product ID for our first one because we've got that bump ready and we just needed to grab the product id. So let's go back into our editor and we just need to paste in that product ID right there and click Update. And so now that this button, when somebody clicks on it, it's going to add that product to the order form once we get our code installed. So we want to set our buttons up. So those are good. And we can just leave the URL action of this. When we set URL action, you can just be left as hashtag. That's totally fine. Then the next one we want to do is we want this, this added button. We're going to change. When somebody hovers over this, we're going to change its state to that remove. But we want to have the action of this. If somebody will click this button, we want this one to be named differently. We want that to actually remove that product. So we want to do CF dash, remove product and then our product id and we're gonna click update there. And then this button we can actually hide. So we're gonna set to this one and we're gonna hide it. So now we have that one. And so now let's go in and grab. Go into CF Pro Tools and see if we can make this add on work. This is a new one. I've not tested it yet. I just pushed it up this morning. So let's see if we can get it working. And in there we've got this. It's called Add Remove Products. So we've got that. Let's go ahead and copy that code. And now let's go into our tracking code and go to our footer code and we're gonna go ahead and paste this in and we're gonna click save. And if I've set this all properly, let's do a little refresh. We'll see how we're looking. This one's making me nervous. Are you guys nervous? For me, whether this is gonna work or not, we might have to go back and tweak it. Okay, so we're looking good. I really like this. This turned out good for pretty quick. We've got our order form here. Oh, you know what I think we have. This needs to go into the actual order form, so missed a piece. Yes. So this needs to go in before. So we've got these added a little bit differently. So I've got some other code for that. So we'll have to. We'll circle back to that to the next time because we need to use the. See if multiple bumps, a little bit of a modified version to suck this in. We've got some custom code that actually sucks these things into the second step, the order form. And I don't have the coast the add on built for that one just yet. We'll have that probably later this evening. So I'll get that one done. But for now, let's go ahead and go to step two and then we can at least test this because if we go to step two and we say United States and we do a go to step two now if we click this button now, we can see that our audiobook was added to our order and we get the added button, when we hover over it says remove. So that's there. I do need to add a little custom css. You know what? I think I have to look at this. We want that. That color to change. We want that to be red. But if we click remove, then it removes that product. So we can add it, we can remove it. And there we go. It's got a few tweaks to make to make this a little bit friendlier so that it's super easy to use. But that's basically what we have going here, is we've got the structure here. We've got two buttons, one that adds, one that removes, and we just change this. The visibility of the buttons based on if the product is on the order or not. So if we go back and look again, we've got these added. So we've got another little add on we need that's gonna suck this right in here below our credit card form, in between the order summary. So we'll get that added. And then now we can actually go in and clone this order or clone this element. So we're gonna go ahead and clone this whole row. We're give it a little more margin there to give it some space. Let's go ahead and give that one like 50, give it a little space. We're going to give this one a different image. Let's grab this image here. So we're going to copy image address, swap this one out, paste that in. There we go. That's looking good. We already got that sucked up. And everything else we're going to say when we say access to traffic secrets live for just 97 bucks. There we go. And then we won't worry about this copy. You can change that. The next thing we need to do is we need to modify these buttons that we have to put the right product IDs in there. So let's go back. We're gonna grab this product id. I'm just gonna use my little shortcut here so we can save some time. And so we just need to go back now. And we need to modify our button. And now we just need to change the product ID here. Paste that in the new one, click Update and then we need to get our other button, it's hidden. So let's go to Elements and Manage and then scroll down. And then this is our hidden button. Let's see if remove product, we can see our other one here. We just need to click on this one. If you click on this one here, I'll actually open up the settings for that. We don't even need to unhide it, we just need to change the settings for it. And so we'll go ahead and double click this to get rid of it. And then we'll paste in that product id. So now it's CF Remove product and our product id we want to remove. And we click update and then we'll click save. And I'm actually gonna, we're gonna get rid of this section because this was our just little demo of multiple pop ups. We'll get rid of that. Go ahead and click save again. And now let's reload this. Yes, it works like magic. Yes, works like magic. Let's let this load for a second here. Still spinning. There we go. Let's try it out. Okay, now we've got our two rows. Let's go ahead and go to step two. This, this is Another add ons coming. For some reason there was a change recently at Click Funnels where it doesn't store the country anymore. It doesn't pre populate the country based on what you had previously selected. I really don't like that. It's unnerving. So I'm gonna get an add on created for that to fix that issue up. But now if we go to step two just so we can see step two, then we can add this one and now we should be able to add this one and now they're both in there. So we got 3797 total of 153.95. We can remove this one now. That one gets removed. We can remove this one, that one gets removed. So now we've got this all up and working. We've got our step two header. Oh, you know what? We forgot one thing. These are not set as bumps. So I'm glad I looked up. So the other thing we need to do is make sure and set these products as bump products. So we're gonna click this because if they are set as bump products then they won't show in the product selector. So we want to set them as bumps. Save and close. There has been a change. If you've ever used the CF multiple bumps add on before, there was a change to that one recently and then they changed it back. I actually worked with the team, they changed it. Let's see. We had to make some changes to it several months ago because they had. There was a change in the back end of clickfunnels that said, hey, we can't have more than one bump product on the same purchase. It was rejecting all of those purchases. So to go in and make an update and make everybody reinstall a new version was another huge benefit of the new version of Seer Pro Tools is not having to do that, but basically had to go in and make sure that all your products were set as regular products and then change the add on to define which products do you want to hide and do a faux bump. So they were real products, not bump products, but you could add multiples of them. That's actually been reversed because it was causing some problems. So I worked with the team to get that fixed up and now you can actually use bump multiple bump products on the same same purchase and it'll work just fine. So we want to set both of these to bump products. That way they're hidden from the selector and they're actually labeled as bump products inside of clickfunnels which is Kind of nice to have as well. So we're going to go to product details and we'll go ahead and set this one as a bump as well. Bump product and we'll do a save and close. And then let's go ahead and now take a look at this. Refresh our page here. And we'll let this load up. Sorry, it's taking a, taking a little bit to load. We've got zoom going. We've got a bunch of stuff going. My computer screaming, the fans are blowing. You might even hear that in the background. I'll move my microphone away from a little bit. It's trying to keep up. So now we've got our two step order form. We'll go ahead and set our country again as United States go to step two. And now we'll see that all we see is the book product which is great. And then if we do an ad that adds that product and we do another ad we can add that product and we can remove and remove and we are good to go there. And so yeah, so we get the add ons installed to get at this actually move into, get moved into the just below the credit card form. So I'll get that created as an add on. That'll be another one to kind of suck that content into the two step. So that'll be another piece that we'll need to cover. But otherwise I think our order form is in pretty good shape. So let's take a look at our list and see what we covered and see what's left. Get back to our document here. So we've got the more links. So we set up the multiple pop ups, went through multiple bumps and how to add those bumps as buttons. We've got that set up. We've got the international setup. We didn't cover the accordion content open when somebody enters their credit card and so we can go through that. We've got the more links. I'll get an add on created and put in for that. So that one's a lot easier to go through. But otherwise we've got our order form looking pretty good. Now the next things are our OTO 1 OTO 22 pages. So we'll, we'll get some add ons created for those. We'll run through those as well. I feel like how's everybody else feeling? It's. We've spent two and a half hours with me on a Saturday. Hopefully it's been good. Hopefully we enjoyed it. But I, you know, I know it's sunny here. I'm sure everybody, hopefully it's sunny in other parts of the world and I'm sure people would love to get out and enjoy that a little bit. So I'm wondering if we should go ahead and book another session and bust out the rest of this stuff. The OTO pages are gonna go quite a bit faster the next time around. And because the magic for doing some of this stuff like we see here, this three column, we're just gonna clone those, those whole rows, the layout, the setup for those, the design, hacking, all that stuff, we've already kind of been through that piece so we don't have to cover quite a so much of that. So we will go through and we'll reuse some of the stuff that we've already done and we'll walk through how to make actually have bumps on an OTO page and how to go through and do some of these other things. We'll make sure the more links we cover that and we'll make sure we just a little piece of expanding that content when somebody enters our credit card. That was kind of a cool thing. That really was just a mind puzzle for me how to figure out could we do that with, with the Stripe integration. So it only works with Stripe right now. So if you're using, not using Stripe then then it won't quite work that way. But it was kind of a cool thing. And so we'll go through and we'll do that and we'll cover the OTOs and next session. I think the plan would be that we'll probably at the same time next Saturday and I will get some details on that for sure. We'll get that posted up but it seems like, yeah, let's see. Sherry says awesome content. Another session. My head is full. Joseph said, looking forward to a follow up session. Jackson says, this has been awesome to see. Jamie, thanks so much. Awesome. Let's do it next Saturday. Okay. Okay, cool. So I think everybody's kind of in agreement that this has probably been a lot. We've gone through a lot. I know I've tossed a ton at you. I always think of that picture. Russell shares in pretty much all of his presentations with the little girl, you know, trying to drink from the sprinkler head. You know, I know it's a lot. I've probably been drinking, drinking from the fire hose a lot. So I'll get the recordings pulled down from Zoom. I'll get this put into somewhere. Whether that's in CF Pro Tools members area or I put them into a Facebook group or whatever so that you can go back and watch those. We'll get those loaded up so you have access to those. We'll do this one. I'll get this one up as soon as I can and then we'll do another session. We'll get the recording for that one, we have the jam them together and hopefully you'll have add ons to do all of this stuff released here very, very soon. Videos with instructions on how to do it step by step for each of those things. But at least this is giving you a good run through of how to get some of those things installed and how to do some of these cool things that we did with Traffic Secrets so you can start using them on yours and see how it goes. So hopefully everybody's enjoyed it. Dirk says thanks from Germany. Was a long and value session. It's getting dark already. Yeah. So we better, we better let you go. So. Okay, great. Everybody, thanks so much for jumping on. I'm gonna go ahead and end this call for now. We will definitely get this funnel. Once we get it built out, we'll get it shared out as a share funnel as well for everybody. So they'll have access to that. It's kind of like Leticia said, the lazy way of getting started. Have some of this stuff build out and hopefully you guys all get a ton of value out of that. And I appreciate you jumping on and we'll talk to you very soon. Look for some more details on when exactly we're going to do the next session, but most likely it'll be this coming Saturday about the same time, about 10:00am Mountain time, which is noon Eastern time. But I'll send out some details and let everybody know. And thanks so much for jumping on. I really appreciate it. We'll see you all soon.