[NEW] Kadence Conversions Tutorial - How to Create Exit Intent Popups, Slide-ins and Banners

hey what's up everybody clifton here with clifton wp welcome back to the channel in this tutorial we're going to be talking about a new feature that's coming to cadence it's in beta right now called cadence conversion and what this tool does is it allows you to create pop-ups or slide slide-in banners or even fixed banners to your website now i know it sounds very similar to what the cadence elements and the modal block can do in cadence blocks pro but this is actually a little bit different because in the elements version of this or if you're using the modal there isn't a way to set up a exit intent like you would do with a typical pop-up and there's actually no real way or built-in way for you to track the actual conversions with the conv with the cadence conversions tool you can now track the conversions and you can also set up an exit intent pop-up and do some all the other cool things that pop-ups do with some of the other dedicated plugins that are created strictly for pop-ups so cadence has added this to their arsenal it isn't beta right now so it isn't something that you want to use on a live site but it's built up enough to where we can actually test this out and put it through the paces and see all the great things that we can do with it so if you are ready for this tutorial and you want to learn about cadence conversions and creating great pop-ups for your website then let's go ahead and jump into the tutorial okay so to get started let's talk about the setup that we have here so i'm using a theme from the cadence starter templates this is their events theme and what i've done here is i've created a conversion pop-up from cadence that's this one right here so this shows up on load it has a countdown timer a button and some text and when somebody clicks through to this it will take them to the registration page where they can come here and see the cost of access to the events and let's say they decide that they don't want to to purchase this at this time and they go to move away it creates and what's called an exit intent pop-up and that exit intent offers new pricing at a 10 discount uh from the pricing that they saw on the previous page and then now they can go ahead and purchase at the discount or they can click away from it and continue to browse the website i'm also going to be showing you a different type of pop-up which is more of a banner pop-up that slides in at the top of the website at a specified time that will be shown later on as we're going through this tutorial if you like to have the same exact setup in terms of a theme as i do here's all you need to do just go ahead and install a fresh version of wordpress go to appearance go to themes click on add new do a search for the cadence theme this is a free theme and it's one of the most feature rich themes in the wordpress repository go ahead and install that and then the next thing that you'll need to do is you can go into your plugins and in the under your install plugins click on add new do a search for cadence blocks this will give you the cadence gutenberg blocks so that you can build out your pages this is the one you want right here now everything else after this install is gonna be a pro access or pro bundle access only so you will need the pro version of cadence blocks pro and the pro version of the cadence theme or the cadence theme pro add-on to be able to follow along with this tutorial so if you don't have that go ahead and go to the cadence website and here indicators website you can see the bundles that they offer i have a link in the description below that is an affiliate link or you can go to the website directly and pick one of these up i highly recommend if you're going to get started with cadence at a minimum get the full bundle because the full bundle not only gives you access to cadence blocks pro cadence theme pro and the pro starter templates but you get access to all of their plugins and there are a host of awesome plugins that are contained in the cadence pro bundle now the thing to keep in mind here is that the cadence conversions is was just added at least was added just a few days ago and it's still in beta but you get a chance to be able to test out these beta plug-ins before they go live so we are going to be testing out right now and putting it through the paces and it's going to be awesome i can tell you i've already gone through it a few times and it's it's going to be a really great ad for cadence so once you get that go ahead and upload that into your plugin stack here and you will then have everything that you need to be able to follow along and create these awesome pop-ups that we're going to be creating right now so with that let's go ahead and jump right into cadence conversions and talk about all the pop-ups and slides that this contains and see what the difference is between the cadence conversions and cadence elements which is another pro feature of the cadence pro theme add-on okay so the first thing we're going to need to do is we need to grab a copy of cadence conversion so just go to your the cadence website click on your account and click on download files and under the download files you'll see cadence conversions and you go ahead and click here to download the plugin and then you'll come to your uh install click on upload plugin choose file and then go ahead and grab the cadence conversion install it and then go ahead and activate so i've already activated it myself and then the other thing that i want you to do is go to appearance click on starter templates again if you don't have starter templates already installed it is free so just go to the plugins page click on add new and if you do a search for cadence starter you will see the cadence starter templates right here so i already have that installed so you're going to go there and then just go to under appearance cadence starter templates you're going to find any one of these will do i'm using this specific one here this events one is the one that we are using so that's why we ended up with this right here and this is an example of a conversion pop-up that we're going to be building so let's go ahead and go back here and when you install cadence conversions you'll have a new menu item here in your wordpress dashboard called conversions now what does this actually do and how is this different from our modal pop-up capability that we have in cadence blocks pro well the difference is that this is actually built specifically for conversions and while this is in beta i know they're probably going to be adding a few more features to this but if you go to the dashboard for this you will see right here that there is a dashboard that's measuring the performance of the uh pop-ups that we have on the site right so it's it's checking to see how many views do we get right that's the blue line and then the green line is how many people converted and i'll explain more about this later because essentially what this is tracking is how many people actually took the action that you're asking them to take on the pop-up that you've created okay over here are the settings and here it's already enabled for local analytics which is what we just saw but you can also integrate this with your google analytics event tracking there's a getting started tab which is where they're still preparing a video for this but we're kind of jumping the gun ahead and i'm bringing this to you already so remember this is in beta it isn't live yet but we're going to go ahead and explore it because it's actually built enough for us to explore and then you have the change log where they'll be tracking all the differences and you can see right here that it is a beta release okay great so let's go ahead and take a look at some of these conversion items okay so i'm gonna go here to all items and i've already been playing around with this i'm going to go ahead and just disable all these and we're going to start from the very beginning and build out our own conversion items so i'm going to go here and click on add new and when you do that you're going to be presented with a choice of conversion types the first one is a pop-up second one is a slide in right so we're familiar with pop-ups which overlaid a site a slide-in comes in from a corner of the website and then the banner can come in from the bottom or it can come in from the top so these are the options that you are presented with now whichever option you choose initially so let's say i chose pop-up it they already have some templates that have been created for you that you can use as a starting point or you can just choose one that is completely blank so you can see a lot of these are kind of like opt-ins or sale offerings and things like that but we want to create one that's blank because the reality of it is in this with this tool you can add anything that you want and that's where the versatility comes from you can add any block that you want and have that show up as a pop-up and that's what we're going to be demonstrating here okay so i'm going to click on start with the blank one here this is the pop-up version and those of you who've played around with the modal block and cadence blocks pro probably recognize this layout but we're going to walk through everything that has to do with this conversion item okay so when you first come up with it it just has nothing and it's ready for you to start populating with items so let's just call this we'll call this our 50 off 50 off offer okay and over here on the right you'll have the conversion item and you'll have the block itself okay now it looks like there isn't anything there but there is what you want to do is open up this link tree so we can see what we're looking at and right here click on the conversion item once you click on that you will now see all the items and all the settings that apply to this entire item and the entire item is everything that you see here in gray including this that you see here in the white so let's go ahead and close that out so let's just go ahead and walk through every one of the tabs so we become familiar with them the first thing that you see here are the launch triggers now with the launch triggers this is basically asking you how do you want this pop-up to launch the options are time delay exit intent scroll distance end of content on load and using a custom link so quite a bit of options here time delay just means that you're going to set up a time where you want this to when you want it to show up so by default here this is set at 5 seconds or 5 000 milliseconds okay but you can change the amount that here that you want you can make it three seconds if you want okay the other option is exit intent and if you're familiar with this this is where when you visit a website and you go to exit the website or you go to close the tab a pop-up shows up and makes you an offer so now you'll be able to do that here with the cadence conversion tool second one is the scroll distance and what this means is when you start scrolling up and down on the website how far down do you want this to scroll before the pop-up shows up then we have end of contents which is where you're taking this and you're putting it at the end of the content of the page or on load which means as soon as the page loads then you want to be able to see the pop-up right so this is something uh like this here as soon as the page loaded the pop-up is now showing up uh so once you select onload that's exactly what's going to happen and then custom link means if you're gonna add this link if you want this to be linked to a button or a link on the page then you would need to include this in the html of that link and i'll show you how to be able to do that so that you can create a trigger where you can click on it and have the pop-up show up okay next is conversion settings so with the conversion settings we did that initially right we chose the pop-up option but if you wanted to change if you change your mind and you want it to be a slide-in instead or a banner then you can go ahead and select any one of these and it becomes a slide in or a banner which kind of looks like that right and depending on which one you choose you do have different options right so if i chose a pop-up then there are options for the pop-up for instance to push it the position settings will be different if i choose a slide in then there are some other uh settings here that may be different right so right now it's on the center but i might want this to be on the left and i might want it to be on the bottom like that so it's sliding in okay and let's put this back to where it was and then if i chose a banner for instance i might want the banner to be at the top of the page or i might want it to be at the bottom of the page or i may choose to just have it in the middle okay it's entirely up to you for this example we're going to show a pop-up we'll go through all these other ones a little bit later all right next we have the repeat control so here you're you're telling it whether or not you want this to continue to repeat every time someone comes to the site so that may be annoying to some people so what you can what you can do is you can set up a cookie and just say just have the cookie expire in 30 days and what that means is when somebody visits the site it places a cookie on their browser so that it can kind of track that this person has already seen this offer and it won't show it to them again for another 30 days you can also add a campaign id to define the cookie that's being used for repeat control all right next are position settings which i demonstrated a little bit earlier so you can you can place this anywhere regardless of whether you're using a pop-up a slide-in or a banner you can place this anywhere and have it be in any part of the page that you want size settings has to do with the size of the model right so the height is set to auto but i could decide that i wanted this to be a little thinner i could make it just 300 in case i'm doing something like a very small opt-in or i could have it be full width where it goes all the way across the page for now we're just going to leave that at 700. the container styling has to do with this entire container right here right so we're saying how do we want to style excuse me how do we want to style this container okay not this container but this container how do you want to style this 700 pixel container and you can do a number of things you can increase the padding so that everything is there's more space if you want to you can add a background or you can change the color of it right so let's say i want the color to be that's the border color excuse me i want the color to be a dark color like that so you can choose to do that if you want okay we're going to leave that as what it was all right then you can set up a margin there's the box shadow which you can see there's a little bit of a shadow here and then there's the overlay settings right which is right now set to a black with a 50 opacity but i could change this if i wanted i could make it white or maybe this color or this color you have full flexibility there or you can make it a background image if you want to then target pages where do you want this to show up so by default this is always going to be set up to the entire site but you can choose anywhere on the page any page that you want blog pages search pages four or four pages singular pages whatever page that you want you can choose that here there are also exclusive settings you can target the different visitors so i might want to have this have go to all users logged out users administrators editors whatever users i want them i want to see this pop-up those are the ones that will see it and then of course everybody's favorite being able to target which devices this comes on right so right now set up to all but you can choose to have it only on desktop or only on mobile so scheduling basically allows you to schedule when this pop-up will show up right so you can schedule it so it happens within a range or if you choose you can have it be recurring scheduling where you have a start time and a stop time and on what days this will show up right so this would be great for a restaurant that has offers or a business that offers offers on specific days then you could you could leverage this to have the pop-up or the banner or the slide-in show up on those days then there are animation settings basically how it comes in and how it eases out and then the close button settings are actually pretty cool as well so you can choose to have this outside the box or inside of the box right like that and then there is also you can choose it to be an icon or you can make it text so if it's text then you can choose whatever text you know you want this to be it can be close or end or whatever it is that you want it to say you get to be able to choose so there's a lot of very granular customizations you can make to the to the pop-up now okay so this is really really nice and then last but not least the colors and of course the ever popular css class and that covers all of the settings that you will have for your pop-up next we're going to go ahead and build out one of these and configure it and set it up on our page and we'll test out all these at different settings to see how they all work on the website okay so to begin let's go ahead and create a pop-up so uh which one do we want to create we want to create this so this is a pop-up that i created earlier and the way this works is once the page loads then this shows up provides an offer and then a button that will take you to where you can take advantage of the offer and this pop-up has some heading and text in there and then also has a countdown timer and then a button and that is it and then there's a close button here to go ahead and close the pop-up once you're done all right so we're going to replicate the same exact pop-up right now to be able to see how the cadence conversions actually works so i'm going to go ahead and go back to our conversion item that we're going to create and we are going to well you know what you know what i want to do because i want everybody to really be able to follow along so i'm going to actually go back out let's leave this and we'll start from the beginning so what happens here is you're going to come to your dashboard and we're going to go to conversions and click on all conversion items so anything that's a conversion item will be created here and then let's go ahead and trash this and i'm going to click on add new when you do that you're going to be offered a conversion type the first one we're going to be working on is this pop-up type so i'm going to select this one i don't want to use any of the templates in here i just want to start with a blank template because one of the things you'll notice is a lot of these are opt-ins right but the reality of it is you can create anything as a pop-up so we're going to take advantage of that so i'm going to click on start with a blank template and we're going to call this one our 50 percent offer okay so this is our 50 offer and what we want to start doing is we want to start styling this fully so what i'm going to do is i'm going to come over here to this side and if you if you're if you're not seeing this just go ahead and click in this gray area and this will pop up for you so once we're here we're going to start with the launch trigger so i'm just going to go from the top to the bottom on each setting and make my changes that way so for the launch trigger what i want on this one is i want this one to show up on load okay so the minute the page loads i want this to show up okay so i'm done with that conversion settings this is going to be a pop-up we're going to leave it just like that but the conversion goal is not going to be to submit a form the conversion goal is going to be to click a button so i'm going to click on click button and then in here i'm going to give it a class that i need to give that button okay so let's call this class get registered so that's our class and we're going to assign that to the button so that when you click the button it records it as that conversion then i'm going to go ahead and close this the next one is the repeat control now for the purposes of this tutorial i'm going to go ahead and turn this off that way we can repeatedly see this in action but typically you would want to turn this on and you want to set a cookie expiration which means when somebody sees it the first time how long before it shows it to them again if they close it right so they close out of it how long do you want them to wait before they're able to see that again and so that's when you set this in this case i'm just going to turn it off but normally you would have this on next i'm going to go to the position settings it's center and top right now so this is perfectly fine for what i want to do because i want it to show up in the middle of the page and then the size settings is already set to 700 which looks fine but i think i want this to be a little bit smaller so let's just make this 550 so it's a little more narrow and then the container styling this is the container and how do i want this to be styled i don't want there to be a border but i do want a border radius and so i'm going to put a border radius of 12 all around okay so now we have this nice border radius going on and then the padding is already set to 20 and uh i'm going to actually set this to zero because i'm going to use some rows in there and the row target pages we want this on the front page and we're not going to exclude any we don't need to exclude anything because we've already selected where it's going to be included on target visitors i'm going to leave alone target devices i'm going to leave that alone we're not going to schedule anything but the animation i do want the animation to be kind of cool so we'll do a zoom in and on close we'll do a zoom out and then the close button i want that close button to be inside of the box and we'll just put it inside for now we'll do some more customization later and all this looks good so we are done setting up our initial settings now we're gonna go ahead and build the actual pop-up meaning adding the content to it and adding the button and then launching it to the site so let's go ahead and do that right now the first thing we're going to do is we're going to now add our blocks so i'm going to click right in here i'm going to do a forward slash and i want the row layout i'm going to pick a one column row and then within this one column row i'm going to also add a second in a row and that is also going to be one column and then within that we're going to add our text which is going to be the advanced heading and that text will say get early bird pricing okay and we want this to be centered right in there in the middle and then right below this we're going to add another heading okay so click here advanced heading and we want this one to say 50 off i'm going to push that to the center as well and we want the 50 off to be slightly larger so i'm going to come here to the text settings and i will set this to be 45 pixels actually let's make it 55 so it's really big there we go all right and then we can also make this bold okay so get early bird pricing 50 off now we're going to put the uh the coupon code below this so uh go ahead and add another block forward slash i can select the advanced heading and here we're going to say use code half oops let's make it half off now okay and we'll make this a little bit smaller so i'm going to select this go to the text settings by clicking this right here typography settings and we'll make this smaller let's make this 36 pixels we'll also center it okay that looks pretty good then the uh the next thing that we need is we need a button here and we also need our countdown timer so let's go ahead and add the countdown timer first and so just click on the plus sign search for countdown okay now you must have cadence blocks pro to use this uh so we're going to come here center the text and we'll style this a little bit later and then next we're going to add a button so let's get the advanced button right there and we'll say get registered okay so now we have the sort of framework for our our pop-up now we need to style this and make it look nice okay so the first thing that we want to do is we want to style the background and to help out with this we can open up our link our list tree here so we can see everything that's happening we can see all our items in a nice tree so i'm going to go to the outermost row here and on the outermost row i'm going to change the color so we're going to go click on that row over here on the right select the background settings click on the background color and go ahead and select this color right here or maybe we want it a little bit darker so this is good so we'll take the strongest text color here okay then uh the next thing that we need to do is now we can no longer see our text so let's make our text visible so we're gonna come here and you're gonna look for the first heading which is this one right here advanced heading and over here with the heading color this is going to be white color so the hex code for that is just six f's and we want to do the same thing for each one excellent so we also want to do a couple of things here i want the use code to be a different color so i'm going to go ahead and highlight that okay with my mouse and then over here with the where they have a small arrow there are additional options here we're going to select highlight now and now this this is now highlighted now i do i don't want the color to be orange i want the color to be our brand colors right so i'm going to come over here to the right and we're going to look for highlight settings which is right over here open it up and select that color and we want this bright color right here okay so this is really good because you can actually draw attention to a certain area just by using that okay the next thing that we're going to style is our countdown timer so i'm going to go ahead and select the countdown timer or you can just click on it right here and then over here to the right we'll leave the this as a fictional time and date for everything so this is totally fine and we're going to go to the countdown layout and we want it centered which it is we want it to be in the block format which means it looks like this and everything is kind of on top of each other which is great and then we're going to go down to count item settings and here we want to give it a background and the background that we want to give it is this yellow color so that we can see the text and we want to give it a border color and let's give it the same border color just make it a little bit thicker and slightly lighter just like that and then the border width will be two pixels okay and then the border radius for this is going to be 12 pixels all right and we're going to give it a padding of 20 pixels all right so it's nice and big and we can see it maybe 20 pixels is too big let's go with 16 pixels there we go all right and then the number settings so number settings we want a very dark color so that you can see it very well and then the other thing that we also want is we want this to be bolded so we're going to come here to the font family and let's just make this monsterat okay and the font weight here is going to be bold just like that excellent all right and everything looks good uh so far so i next thing we need to do here and need to style here excuse me is i want to put some spacing between these numbers because they look really really close together a really good way to be able to do that is i believe up here you can enable a divider between these two okay so we're going to enable the divider and we're going to enable a 0 0 number format good and now we have this really nice spacing and the format looks really really good so next thing that we're going to do now is we're going to go ahead and add settings for our button so i'm going to select the button i'm going to go over here to the right open up button 1 settings and what i want to do here is i want the get register to be a little bit larger so let's make that 24 pixels there we go and then the color settings the color for the button is going to be white text so six f's for white text and then the background is going to be our brand color here so that's going to be your background the border color will also match that background and then for hover the text color is going to remain white and the background color though will be this color so it will be the second color in our brand here and then the uh hover border color will match okay so when we hover over this this is what we're going to see looks really good button margin we can get we're going to give it some room here so 20 pixels so that we have some nice spacing and you can see now our um our pop-up is coming together really nice okay now the next thing that i want to do here is i want this to be a rounded corner and because we rounded the container but we added a row here we need to add roundings to the row so i'm going to select this outermost row again we're going to go over here to the right and under border settings you will see the border radius just go ahead and type in 12 to go ahead and match the container and now we have this setting right here i know you're seeing this right here but this is just gutenberg there's just an extra spacing here when we look at it on the front end it's not going to look like that okay the next thing we want to do is i kind of want my button to match my my countdown timer here so what i'm going to do i'm going to select the button i want the border radius to match so i'm going to come here select the button we're going to open up button 1 settings and we're going to look for the border radius setting which is right here and we're going to set that to 12. okay so now this looks pretty good now the next thing we need to do is we need to go ahead and check to see if this will work for us on the front end so i'm going to go ahead and save my work okay so now that that is saved there is one thing that i need to do uh because we already have one that's showing up right so we have this one that's showing up and i tell it i intentionally made the other one a little bit different so we can see the two to two differently so let's go ahead and refresh this here so i have this one already showing up what i'm going to do is i'm going to turn this one off and turn our new one on okay before i do that though let's go ahead and style our close button so that it's a little bit more visible so come here to the close button and i want to give it a closed color i want that to be a little lighter like that and we'll match the hover for the same and then i want the background to be just a subtle rounding a little more subtle it's too subtle there we go that looks pretty good excellent and uh and that looks good so and then i want the size to be a little bit smaller it's kind of a big icon there so let's just make this 18 pixels all right excellent okay so now we're we're ready i'm gonna go ahead and update this and then i'm going to exit out of it whoops make sure we update okay exit out of it and we're going to go this is the one we just created this is the one that's showing up right now i'm going to go ahead and edit this one and i'm going to remove i'm gonna remove its launch trigger so i'm gonna say none on this one update okay and we're gonna go back to our other one this 50 offer click on edit and i want to add one more piece of text so right here just click right here hit the enter key and type in expires actually let's use an advanced heading for this we'll make it a paragraph and we'll say expires in [Music] we'll go ahead and center this we'll change the color to white so we can see it and we'll make the size a little bit bigger let's go with 20. all right that looks great so let's go ahead and update this and now when we visit our site close this one out and we refresh our new pop-up shows up and that looks really good okay now one of the things we could do we could actually create more of an overlay on the background so that this pops more and we can add a border so that we can see it some more so let's go ahead and do that so i'm going to go here back to the back to the pop-up we're going to select the outermost container or if you want open up the link tree here select the row layout over here on the right go to border settings click on border color and for the border i want it a little bit lighter and we'll give it a 2 pixel border just like that and then this overlay right here i want this to be a little bit darker so i'm going to select this and we're going to go to overlay settings and this is at 0.5 so let's use one of our brand colors which is a little bit more purple and we're going to increase this to about 75 maybe 80. there we go we'll update this and now when we go back to our page close this out let's refresh and here we go there it is okay so it's a little bit darker oops refresh it again oh you know what we didn't do i don't think we updated this so let's update all right now it's updated let's go back refresh there we go okay so now we can see it a little bit better and now people can click through and once you click through it will take you to the next page so that works out very well now one thing i do want to want everybody to keep in mind when it comes to this as of now this is in beta right so this probably still has quite quite a few bugs and they're probably ironing things out but i'm just giving you a preview of what's coming so you know when you go to conversions over here the idea is that when i click that button the idea is that when you come over here to the dashboard you'll be able to see some data and some metrics as to what happened you know how many conversions happened how many people click the button and so on so i know they're still probably working on all this because this isn't very much data but you can see you can get data on all your different pop-ups that you have right so you can see what has happened you know in the last seven days 30 days or 90 days so just keep that in mind that if you're testing this out this is still in beta and they're going to be some things that are not probably going to work the way that you're that you're thinking for instance i can tell you right now this close button right when i'm clicking on it it's not closing right when i click off it does but it's not closing and that's because i built this using a row and i know this close button is behind that row so we're not able to get to it so we'll probably need some kind of z index on this close button so that it's on top of everything else but i'm sure they'll get to that and they'll they'll fix it so this isn't beta so just if you're testing this out and things are not quite working the way you're wanting them to work don't worry about it uh these guys will take care of it this cadence always produces a good product okay with that being said we're gonna create one more pop-up and this is the exit intent pop-up actually we're to create two more to happen really quickly we'll create create two more the exit intent and the slide in banner i think those are worth taking a look at and seeing what's possible and then we'll wrap up this video and we'll look forward to what else cadence comes out with next so let's go ahead and go back to the dashboard and let's look at creating the exit intent pop-up so an exit intent pop-up is a pop-up that comes up on your site when someone is attempting to leave the page so say for instance we went to this site and then we click on get registered and here we are at the registration and let's say this is where you would basically buy a ticket but let's say i change my mind and decide to move on or close out the page so as soon as my mouse moves up to the tab to close up the page then another pop-up shows up and this time it's telling me it has an offer for me right so this is a discounted offer and the pricing has changed right so now it's offering me 10 an additional 10 off so so this is a way to be able to pull people back sometimes people put an opt-in in here or some kind of special offer so we're going to recreate this exact popup right here so this is one that i created before just to demonstrate it but now we're going to get rid of this and we're now going to recreate this entire thing and i'll show you exactly how i did it okay so we're going to do to create that exit intent pop-up is going to gather our materials so i'm going to go to the site here and we're going to click on the registration page and what i want to do is i want to grab i want to grab this pricing table because in the exit intent pop-up i want to show another pricing table that has discounted prices by 10 so to do that just click on edit page if you're in this template and we're going to scroll down to the pricing table section right here and i just want the pricing table so i'm going to select this row that has a pricing table click on the options icon here and we're going to click on copy and that will copy it to the clipboard then we're going to go back to the dashboard we're going to go to conversions all conversions and click on add new alright so here we are and we're going to select pop-up again that's the one we want to use and we want to start with a blank one let's close this out and we're going to call this new discount offer and just like last time we're going to go ahead and set up all our settings first so i'm going to go to the launch triggers here i want this to be an exit intent conversion settings uh here we're going to make this a click button and for this one we're going to say we're going to call this discounts register let's call it that and then for the this is just for the button so we can count the conversion for the repeat control for the purpose of this tutorial i'm just going to turn that off positioning settings i want this to actually be yeah the center is fine and the vertical line top is fine we'll set this up later now size settings because i want this to take up most of the page what we're going to do here is we're going to set this to a maximum width actually sorry we're going to set this up to about 1200 let's make this 1200 pixels in size and here in the position settings center is fine vertical align yeah we definitely want this at the top and the height we'll leave that at auto container styling the container styling we're going to uh make the container one of our colors here so let's make it dark like that it looks good maybe a little darker there we go dark like so and everything else we're gonna leave the same so all this looks fine the target page that we want this time is we want it to be on a single page and the page we're looking for is an individual page and it allows us to select what page is going to go on so it's going to go on the registration page select and now that that's done we are all set with that next we need to just basically build out our pop-ups i'm going to come here and i'm going to do a forward slash and i want an advanced heading and we're going to change the color of this heading to white and we're going to say wait one time only discount offer okay and then i want to highlight the weight so i'm going to highlight that and click on the more options here select highlight and then we're going to come here to the highlight settings and we're going to change that color to our brown color and then i also want to highlight discount offer as well so just go ahead and highlight it with your mouse and select highlight then the other thing we want to do is want to center this and that looks great then what i'm going to do here is i'm going to duplicate this and we're going to basically present the offer so take 10 percent off event ticket pricing and uh on this one it looks like the entire thing is highlighted so what's happening here yes so let's remove that highlight and let's only highlight the 10 off there we go then the next thing we're going to do here is we're going to tell them that this is only available one time only so let's duplicate that and we'll change this to a paragraph and we'll say this offer is only available one time only once you leave this page you will not see it again okay so creating some scar city there all right excellent so now and now if you really actually wanted to enforce that where it only shows up one time if you select the uh the conversion item here so highlight anywhere in the gray area and you click on conversion settings uh excuse me no repeat control so this is where enabling a repeat control becomes critical for you right so on close you could say the cookie will expire and just make this a really long time uh maybe past the date of the event okay but that's just a little extra tip there okay so the next thing we need to do now is we need to add our pricing table with the 10 off so remember we already copied it to the clipboard so i'm going to come here i'm just going to click right below the last text that we put in here and i'm just gonna press command v or control v for those of you who may be using a pc okay so here's our pricing table right and all we need to do now is we just need to change the pricing you can do this any number of ways i just like to put it below so i'll just come here to this pricing here take 10 off and we're just going to duplicate that and then on the one that we do on the one that we duplicated we're going to highlight this and we're going to put a strike through right through it so this price is no longer valid and then you can also change the color slightly to just maybe differentiate it from the one on top and then here we're going to change this to 89 and we're just going to repeat that for all the other ones so okay so uh actually ten percent off but 25 oops there we go okay so now we've put that on there and then you can add some additional text so let's just grab this text we're going to duplicate it and we're going to say was and move that down and we'll do the same thing here duplicate was move that down and come here select it duplicate change the text was move that down so we're saying now the standard pass is 89 was 99 okay and we're pretty much done with our our pop-up now okay so this looks really good so just open this back up and now all we really need to do is publish this and then let's check it out so go back to our event registration page here's our early bird pricing pop-up click on get registered it takes you to the page and as you scroll down and if the person decides not to take action now and they move towards the exit or try to close the page then our pop-up shows up and that's what's an exit intense so my intent was to exit and as i was exiting i was presented with a new offer and then the idea is hopefully the person goes ahead and purchases the ticket at the new discounted rate okay and that is how you do an exit intent and for our last one we're just going to do a simple banner this will be the fastest one we ever create and then we'll wrap up our tutorial okay so let's go ahead and create the last type of pop-up that the cadence conversion offers which is the banner slide in so we're going to come here back to the dashboard go to conversions and then click on all conversion items and click on add new and then from here we're going to select banner and these are the options that we can select you can start a blank one or you can create one of your own i'm sorry or you can select one of the templates so let's go ahead and select one of the templates to make this easier and quicker we're going to select this one right here and this one we're going to call this top banner offer and this one has a countdown timer some text and a buy now button so let's just make this more relevant to our website which is an event page so what i'm going to do here is i'm going to select the the actual container itself here so which is a row and now that i've selected that i'm going to come over here to the background overlay settings and i'm going to change this color so i want this to be our darker color here and the second color we're going to have that be one of our brand colors so and we're going to keep it just like that we're going to configure the buy now to go to the registration page so just select it and then the button link we're going to search for our page which is this one right here i'm going to select that and now that that's all set up and then the only thing left to do is to configure the countdown timer so that it it counts down correctly so this is set to a pass date let's make it a current date so we'll make this uh there we go make this the seventh so now it's 22 hours 43 minutes to get the and we'll change this text to say early bird tickets so this is actually the so if you select this on the countdown timer we come down here countdown layout right here is where you can change that content so time is running out to get the early bird tickets awesome and that is really all there is to it this is probably the easiest one to to create so the only thing left to do now is the launch trigger okay so we want to make this a time delay so we're gonna say show this in about two seconds after the page has loaded uh conversion settings again so right here we have a conversion button right so this is actually defining what is going to count as a conversion and this button if you select this button here we scroll down go to advanced this is where you will put the conversion button all right awesome and then the next thing that we need to do here is we need to tell it what pages to show up so i'm going to have this show up on every page so we're going to leave this as an entire site okay and now we're going to publish this and then let's check it out on the front end so let me go to the website and we'll wait two seconds there it is and about two seconds it comes in one of the things you'll notice is that it pushes the website down for about the height of the actual slide in and there's our call to action right there so i can now go ahead and click this and it'll take me to the registration page and there it is showing up again so only one of the things i could do is i could exclude it from the registration page so let's let me show you how to do that so and there's our exit intent so let's go to the dashboard it's going to be a highly converting events page go to the dashboard and we're going to go to conversions and the one we're looking for is the top banner offer click on edit and click on the conversion item so you can just click anywhere here to show it to a lot of conversion item to show up or if it's just showing this just click on the block and it'll show everything then we come here and uh where it says target pages there's an exclude settings option i'm going to click on that and we're going to say hide on and we want to find that particular page so it's a page so we look for single pages and we want individually select items and we want to exclude this registration page click update and now when we visit the site so here we are on the home page two seconds this shows up click on buy now takes you to the registration page and then you don't see that anymore right so it's not going to come in on this page because this page is excluded and now if i try to leave the page my exit intent pop-up will show up to help me convert that visitor and that is how the slide in banner for the conversions work all right and then the other thing is when you come to conversions here and you click on the dashboard this is where you'll see all the conversions that are happening with everything that you're doing so you can see over here we have it counting converted four times one time this is how many times the blue represent how many times has been viewed for each one and then you can select it by actual offer so on each offer so the top banner offer we can see here converted four times was viewed three times and so on so this is actually going to be a really cool tool for cadence because this is specifically focused on conversions and pop-ups whereas before if we wanted a pop-up we had to do that through cadence elements and if you want to see how we've done that i do have videos i will link a video where i go over elements and creating pop-ups with modals and elements and cadence okay and with that i am going to end it here i hope that you enjoyed this tutorial hey if you are new to the channel and you have not subscribed please go ahead and subscribe to the channel and if you enjoyed this tutorial please give this tutorial a like so it will help us with the youtube algorithm so more people can see this tutorial and for those of you who have subscribed thank you so much i appreciate you and of course i welcome any comments or any questions i will respond to any comments that are posted on these videos or any other videos or any questions that to the best of my ability and with that i'm going to sign off and i will see you in the next video

Channel: CliftonWP

Views: 607

Keywords: wordpress popup plugin, wordpress popup maker, kadence pro theme tutorial, kadence pop up, exit intent popup wordpress, kadence blocks pro, kadence conversion, kadence tutorial, kadence blocks tutorial, gutenberg popup block, gutenberg blocks tutorial, wordpress block tutorial, wordpress popup tutorial, kadence theme tutorial, kadence blocks pro tutorial, wordpress tutorial for beginners, wordpress gutenberg tutorial 2021, gutenberg kadence tutorial

Id: dlaYjy0or5Y

Length: 56min 8sec (3368 seconds)

Published: Sun Nov 07 2021