How to Build a Scrolling Popup on Your Divi Website

Jun 16, 2022 | WordPress Wednesday


When you’re ready to WOW your website visitors with something different – try this expanding CTA feature from Divi Pixel. Kori will show you step-by-step how to build out this cool feature on your WordPress website.

Affiliate Link for Divi Pixel – https://www.divi-pixel.com/?dp=86 (thank you!)

Facebook Divi Group https://www.facebook.com/groups/DiviThemeUsers/?ref=share

Get a WordPress Website for $1/Day https://presshappi.com

VIDEO TRANSCRIPT

Get ready in this very quick tutorial, I’ll show you how to build out this really cool expanding CTA block inside of your Divi WordPress website.

Hey, y’all, my name is Kori Ashton, and welcome to another “WordPress Wednesday.” I am so excited to share with you a really cool Divi feature. Now this is gonna be a Pro add on that you’ll be able to purchase, right, you’ll have a license that you’ll be able to purchase to get this really cool rollover popup feature to happen on your Divi website.

Again, if you’re running on WordPress and you’ve used the Divi theme, you have the opportunity to go over to this website and purchase Divi Pixel. This is so cool that you can go in here, and you’ve got all these different options.

So I’m gonna show you right now how to build out this version of this really cool art gallery website that I found yesterday on our Divi Facebook group. If you’re not familiar with that group, please be sure to check that out. I’ll put the link in the description box below so you can come join us in that Divi conversation over there in that free Facebook group. But this was posted by a guy by the name of Humberto who built this site, and let me just show you the feature that I fell in love with. I mean, watch what happens at this certain point when I’m scrolling here. Look at this go full screen and really literally pop out at you. And it’s not in an aggressive tone. It’s really just done really nicely based on where your user is scrolling. So you see how that just kind of expands up, almost it does a magnifying type of user experience. And then if they decide to scroll on, that’s exactly what they can do, without it being intrusive or frustrating. But it really does catch our eye and has a stop. So I’m gonna show you how to do that.

So the specific feature that we’re looking at inside of Divi Pixel (affiliate link) is called Expanding CTA for Divi. And it’s just so cool, y’all. You’re gonna see really cool examples here of that same user experience. As you scroll either up or down, you’re gonna have that expanding moment that it goes just full screen, beautiful, really stops the user and gets them excited to focus on something. But yet, it’s not intrusive, so they can really just stay excited and engaged and impressed. One of the best things about this, once you buy a license, you have the ability to download this example. Each demo here, check this out, y’all, each demo has a little button that you can just download this JSON file, upload it into your Divi site, and you are running. It is so cool. So grab a license. They’ve got a couple of different price points to grabbing licenses based on how many websites you want to use this on. Of course, I being a developer and having many clients, I really enjoy investing in the Ultimate package so I can put it on unlimited websites. Of course, that’s gonna be an annual price tag to keep the support and the updates coming. But, oh my goodness, with all these different options, it’s so worth it.

So once you’ve got that, you’ll be able to download the plugin, and you’ll go into your dashboard and install the plugin. Installing plugins is just going into your dashboard.

Again, Plugins, Add New up at the top, and this is where you’re going to upload the plugin, right? You’ll upload a zipped format file which is exactly what they give you. You’ll choose that file, install it. I’ve already done that step so that we can kind of move along a little bit more quickly here. So you can see Divi Pixel activated now inside of my dashboard.

Once the lives there, there’s so many cool things already happening. So now, under my Divi tab here on the left side, we now have Divi Pixel. So you can go into there for the settings. And, again, this might feel like option overload, but for this example, I don’t even need to address any of this. This is all just extra fun stuff that you can spend time learning about and kind of customizing your site. But for today, we don’t need to even look at this stuff. We are moving on.

All right, so what we’re gonna do. This is the example I’m gonna show you I’m gonna make. So I am working on this website, and I want to make this example right here. See that big full image come into play? As I scroll down, there’s no full image back here at all, nice and clean looking, and then it just really opens up. So this is the little example I’m gonna show you how to make, which is very comparable to our art gallery site that I was looking at.

So I actually already have a full section here that I’ve built out on one of my layouts. This is what I want to use, and I want to put it in that really cool full-width experience. So I am just gonna go into this and save this into my library. So I’m gonna add this full section to my library. You can do this with anything though. If you had a sign up section, anything that you’ve already built, you can grab and add and do this so easily and so quickly. So you’re gonna save this to your section, give it a name that you can recognize. I’ll name this one FindYourAgent_layout and Save to your library. Once you’ve done that, you can go into your library now. I just wanna show you how cool and easy this is. It’s so incredible. You’re gonna go into your Layouts, into your Divi Library, okay, so back in your dashboard, go into your Divi Library. And now that that lives here as a section, check this out. Over on this right side, there’s a Shortcode that you can grab. Literally any of your Divi library layouts are going to have now your own Divi Pixel Shortcode right there. So I’m gonna copy that onto my clipboard.

Now that I have that, you can go inject this layout anywhere you want, any post, any page, any theme builder layout. And that’s what I’m wanna do. I wanna go into my blog post and add it in there. So I’m actually gonna jump into my Theme Builder area. And when you’re in Divi Theme Builder and you can go into any of your Theme Builder templates, I’m going into my All Posts. Let’s edit this. We’re gonna add a section wherever we want on this page. We’re gonna add a row, and we’re gonna drop this in, and, oh my goodness, watch how easy this is. Here we are into my All Posts layout into the Theme Builder. I’m gonna go all the way down. And remember, I want it to live below the end of my article. And so right now, I’m just going to add a row, and then I’m going to add a module. And now that I have Divi Pixel installed, you’re gonna see all these darker modules here. And we are looking for Pixel Expanding CTA. Drop that in.

Now you got a lot of options and you can have fun and get really creative, but for now, we’re just going to paste in that shortcode that we grabbed onto our clipboard. Now that we’ve got that, we’re gonna do a couple of extra settings to give it that really cool background image and some other cool layout options. So let’s open this up. We’re gonna go in here and add a background image. If you remember, I had all those houses in there. I thought that looked really cool. So you want a nice large image to sit back there. You can add a background gradient over that image if you need a little bit of a muting on it so that maybe it doesn’t compete with whatever is on top of it. Remember, when you go down, you wanna be sure to place that gradient above the background image, right, and click your checkmark. Now you might be saying, I can’t see any of it. Well, get excited, y’all, ’cause this looks so cool. Let’s save. Oh my goodness, there’s no other code, nothing else that you have to set. Now you can get creative and tinker around with it more if you wanted to, but I’m gonna check, check, and we’re gonna go back to the front side of the website. We’re gonna click refresh on our blog post. We’re gonna scroll down, all the way down to that one section, right down here. Check that out, and there it is, y’all. Look at that open and close, open and close. It is that simple. Any layout, you can set in there. There’s that beautiful background picture with that gradient on it, and I’m just scrolling and enjoying, and it moves away from me. I’m gonna go back, and it just expands out. Isn’t that so cool?

All right, y’all, I hope you enjoyed putting that feature on your WordPress website. If you get a second, be sure to use my affiliate link down below. I would appreciate that. It doesn’t cost you anything extra, and I get to celebrate with you the use of this on your website, so super excited. If you do use it, will you consider putting a link to your website project in the thread below so that I’m able to go check out how you used this popup? I’m so excited to see all your different creative ideas. Also, be sure to click like and subscribe, hang out with me every single week. I have an entire playlist dedicated to Divi. I’d love to see you next time.

Bye, everyone.