Hello people my name is Ferdy and in this
video, I will show you how you can create beautiful pop-ups in your WordPress and Elementor
website using the plugin called jet pop up from Croco block. Let me show you what we will cover in this
tutorial. First, we will install jet pop up from Croco
block, you can buy it as a standalone plugin or in a set, then we will import a premade
pop up and we can choose between 120 premade pop-ups in different categories like contact
forms, Cookie policies, discounts, email list signup forms, content lockers and more. After we'll import the preset, we will talk
about changing the way the popup should be displayed at left, right top center under
as a lower third full screen, we'll talk about how it should be triggered at once after a
click, or when the viewer scrolls down a percentage of the page. Or when the viewer wants to exit the page. We'll talk about where it should be triggered
on the homepage or a specific page or in a certain category or a certain blog post, wherever
in the website you want and how long the popup should be hidden after if you were so close,
it shouldn't be hidden for an hour, a day a week. And then we will adjust the pop-up to our
wishes and test it we will also create a pop-up from scratch, link it with an email signup
form with MailChimp or ConvertKit. So you can add people to your email list and
then send emails to your list at once. That's a great way to grow your business. In the description of this video, I have timestamps
so if you want to go to a certain part of the tutorial, you can do it that way. If you like what you're seeing so far, and
I would like to ask you to like this video and feel free to subscribe for more upcoming
WordPress-related tutorials. Okay, let's get started. So this is example absent I will use jet pop
up that CB example does come and if you want to get the plugin, you can go to 30 corp.com
it enters. Then go to tutorials Croco block, and then
you see an overview of all the tutorials I have about Croco block products. So in this case, you are watching the pop
tutorial. And if you want to watch more, you can go
to this page and watch all those videos, they fail to get jet pop up, if you don't have
it, you can click over here, you go directly to the page that shows what it is capable
off. You can watch this movie I like the way they
display things over here you see, can I have popups full page. And you can include it on different pages
excluded on other pages. There are a lot of templates that you can
choose and just import in a few clicks and adjust to your wishes. And you can buy this for $22 as a standalone
product, it will be $22 per year, I think that's a really great price. But you can also get it in a set. So you can click over here. Get it for $22 per year for a single site
or for unlimited websites for $44 per year, or you can get it in a set for $80 per year. Or if you go to pricing. You can get the whole bundle for unlimited
websites for unlimited clients for a one-time payment of $750. But as I said before I make tutorials about
all those plugins. And there are tutorials if you learn how to
work with those tools, like creating a booking website, or an appointment website, or hotel
booking website or a rental website, you can ask 1000s of dollars for that to make it for
clients. So I think it's a really good deal. It's up to you what you want to choose, you
can go for the single product project pop up in this case. And if you want to think and click on Buy
Now, leave your details and you will have access and when you get access, you can go
to this area sign in, and then you see all the plugins we have access to. So in this case, jet pop up, I click on downloads. Now it goes and then I want to go over here. Grab my licence key, close this page. I want to go to the backend of the website. Plugins Add New. I want to drag this chat pop up by clicking
here. And then I drag it over here choose a foul
and click on instal now I want to activate the plugin. I want to update it because there's an update. And then there's a new area over here two
areas. First one Croco block and the second one just
pop up. First I go to Croco block licence, I want
to leave my licence key over here. So I'll add a new licence key. Base it I click on Activate. And what it does is what I really liked about
Croco block now it shows an overview of all the plugins I have access to and I can instal
them from this area so I don't have to go back to critical block and instal them all
one by one. I can do that over here. So if I want to have jet elements, I can click
on instal and then activate it. So that's really nice. So I want to show you a lot of things I want
to make the store in depth so you know everything about to after you watch this tutorial so
I'll To start with the library of pre made popups. If you go over here to Jett pop up, you can
go to the preset library. If you click on it, you see around me see
123456 times 21. That's around one on 26 premade pop ups that
you can use, and you can select them or filter them based on the category, or by date. Which one are popular? For instance? Yes or no? Can we see that you like us, okay, or a discount
one. And you see with some popups, you need to
jet elements or something else. For instance, if you click on Contact Form,
you need to instal Contact Form seven, which is a free tool. And with Croco block, you can sell that or
widget pop up. So that's really nice. You can search over here, see what you like,
you can have privacy policy areas really important in Europe, it's mandatory that I say okay,
and then you're doing the right thing. Or subscribe. You can also select multiple areas. So subscribe, get 10% Discount After subscribing,
or something low over here. So what I want to do I want to go for discount,
like discount. And I can choose this one or I can go to the
second page. And that looks nice. I need jet elements for this. So let me search live with further. Cyber Monday. 80%. off that looks nice. It says we don't need anything for it. So I click on instal. Are you sure? Yes, I'm sure. And then we open this website and Elementor. Of course, if I've not mentioned this before,
you need to have Elementor. For this. There are two things that did not go that
well. 80% areas gone. So I can this duplicate this area. If this hot offer doesn't happen, you can
click over here, go to the user preferences can make the interface life or dark akin at
the editing handles. And then we'll have this slider over here. So I drag this area over here, I hover over
here over the column closes. And I click here and I say 80% discount. So I can go to the Stell we're going to create
a pop up from scratch later. But right now I want to create this, then
I go to Advanced that the top margin, I increase it to 15, maybe a little bit more 30. And then I go to the button, I also say 30. I think there's a little bit more space over
here than here. So I can increase it a bit. Okay, here we can change the date to whatever
well Cyber Monday is often the 28th of November. So it's for this year. I'm really early with my preparations. So it looks really nice. So what else can we do, we're going to create
this from scratch later, something like this, I click on publish. That means I'm saving it. And then I can go over here to the settings. I can change the title. So I can call this one cyber on the 2021. I don't need this this from a different plugin,
I go to the settings. This is important the animation, how should
it slide or zoom or fade. So if you click on something, you see an example. So we can go through all of them move up a
horizontal flip. Or what I like I like to slide it in from
the light right? Like that. Okay, I can disable the base crawling that
when this is opened in your scroll, the background stays static, it doesn't scroll, I can show
the ones every 10 minutes. That means or let's say let's say a day, when
somebody closes this, they will not see it for another 24 hours and after 24 hours, they
will see it again. And that can be if if you if you have none. And you show this on every page on your website
and they navigate through your website, they see it at every page. They don't want that. So I right now I will leave this off. Because I want to show it over and over again
what the results will be. After we adjusted the few things loading counted
with IX yet that's okay. And then there's really important display
conditions. We're all still here at settings. Click on the manager, we can display where
we want to display this pop up. So if I click on add conditions, I can say
included on the entire site. If I save this, I click outside of this area. I click on Update. Before I check it I need to do something really
important. Open event, if I say nothing is will not appear. So right now, preview changes, okay, and I
go to the homepage. If you want to go to the homepage from this
area, say Command or Ctrl E, or type in the homepage and then over here hold Command or
Ctrl E go there and then go to the homepage, I said it should be shown on every page. But it is not appearing. Why not. Because right now, it is not being triggered
open events, what should happen on page load, I can say after three seconds, it should appear. So if I update it and I refresh the page,
we need to wait for three seconds 123 There it goes. Best day of the year Cyber Monday at pilaf
only, or one day with this date, we saw it slide in slogan slide and slide it in from
the right. And then it goes that way again. But if I go to the About page, we wait for
three seconds 123 It appears again. And if I go to the blog page, I don't have
any block right yet. For a different tutorial, it appears again. So that's not what we want. So how can we configure this even further? Well, first, I want to show it after one second. And then I want to go to the manager, we can
do we can change over here. But what we also can do, I can say I want
to show this everywhere except so I add a new condition included in the entire site. But exclude it on a single page, for instance,
called the about page safety conditions, then update it. Now if I would go to the contact page, it
will appear after one second. But if I go to the About page, it will not
appear. And that's what you can do with a manager
realise if I can see myself excluded, so I want to show this only on the homepage. So I go to the singular, then I can select
the front page or page and then select the front page. But I not immediately do the front page. But you can also show that on a certain posts
type. So for instance, a post or every page or all
the portfolio items. So if I select portfolio items, and I save
it and probably it's already saved, that's amazing. I don't save it twice. If I go to the blog page, you don't see it. But if I go to a portfolio item here, you
probably also do not see it because there's a page. But if I click on this portfolio item, then
it's up here after one second, yes, it works. So we can decide in our website where we want
to display this. So maybe I have one blog post about a certain
subject. And then based on that blog post, you can
decided only there a certain pop up will appear. Wow, that gives you so much freedom to to
get more leads, more sales more promotion. And you can do it all here at the pop up area
in Elementor at the settings and then the settings and then manager. So I want to display right now I want to display
it on the similar page, the front page. I don't have to save it again. So at the about page it will not be shown. And over here. It will be shown after one second. And if I decide that it can be only shown
once every hour. That means that if I click on update, and
I refresh the page, it will display be displayed one more time. But now if I refresh the page, it will not
be displayed. Because it will only be displayed one time
in one hour. So I turned it off. But I definitely suggest you do this with
like a day, at least. Otherwise people can get frustrated because
they see it all the time. And they like okay, I don't want this anymore. Okay, be nice. So let's go to the styling. Then there's the general styles, the Z index,
well just say if you don't see this pop up appearing, then you could say 100 because
Z index is like a layers above each other. So if you have a header that has a Z index
of one that means it will be in front of everything else. So now right now this is z one probably because
it needs to be in front of the content. So if I would open a pop up over here, and
this is the index zero it will be behind this area. So if you wanted to be in front of it They
need to say, Z to at least. So that's how it works. But if you say 100, you should be fine. The popup container here, you can change the
width in percentage. And if you do percentage, it's based on the
width of the screen of the viewer. So I rather stick with pixels. Now, like I say, how big I want it to be. So I can say 700. And I can make everything bigger if you want
to. So you can also use the arrows. I 5450. Okay, I can change the height to custom height. But, uh, this level width, you can also click
on the, I think you see the result, though, look like this, and then you can scroll? Well, I don't like to use the hide only when
I say it should be a maximum of 100%. So if I do that, then it's slowly from the
top to the bottom, then I can say, okay, that's what I like, then, how should it appear? Right now it appears in the middle, you see
the centre and the centre in the middle, like also can be displayed over there. And if I click on the AI, that means that
every after every update, it changes over here. So if I bring it to the left, I click on update
is what automatically be renewed. So I can update something and check it out
over here. So this one we can do. vertical position, if you have a smaller one. Like that you can bring it low or high. Sorry, over here, the vertical position, the
content position, where should it be? Well, I'll leave it in the middle. So right now it will appear here right below. Now it's the backgrounds, we can change it
to a gradient. And we can add an image like that, and of
course, we can change the size to cover. Focus on the centre left, centre, right. So that's how we can do that. And you can even have a container. So let me bring the deck to the gradients,
I like the gradients. Change the location of the gradients, we can
make it really harsh. So if I like that the world, there's so much
you can do, you can change the colours, of course, change the angle of the gradients. The container overlay that means a second
background. So you can also mix two backgrounds. So if I grab this image, I can make it blend
with the background. Change the size, how to be displayed. See this filter, I can make a blurry background,
there's quite a lot you can do. It's it has a nice ring, but it's maybe a
little bit too light, well then over here it sees as filters, I can make it darker. The more you do over here, the slower it loads,
but I think we're we're doing fine, we can change the padding. So that is the space between the contents
and the border. So if you want to do something with that,
you can do that. And you can change the margin leave it as it is, we can have a border radius. So we can have those corners rounded. I think it's a really big border and also
make it smaller or have no border at all, see none. I like the border not that big. Change the colour of the border from box shadow. The Close button right now we see it over
here. You can play around with it, you can change
the clothes. So if I say clothes on I can make it like
this. And then I can display where I want to show
this. I think this is fine. I can have the colours the styling over here. So I can change the colour of that x is the
background all that stuff. Pop up overlay that is this area over here. I like to make it black and then transparent
so you can see through it. But you also you're gonna have an image in
the background. So how does it look now? You see the look a few solely different now. So that's what you can do. You can go to files, but it's just for custom
JavaScript. I don't know how JavaScript works, but I'm
happy with the result. So that's what you can do. Ladies thing I want to do, I want to bring
this to the contact page, how can I do that you should know by now go to the settings,
manager, display this on a page, register, Contact page, save conditions. And then if I go to the contact page, it should
appear. But it doesn't. Why because it's still calculating this cookie. Because earlier I said it should not be shown
on our so I have to wait in order for it to work again. But we can create a new one and make it work
wherever we want. So I'll go and create from one from scratch,
I exit to the dashboard. And I go to jet pop up, create a new pop up
or go to all pop ups. And I can create a new pop up over here or
I can import one. It's also something you can do this over. So over here, I can export this pop up and
import it on a different website. So if you have a lot of pop ups, you create
websites for clients, they won't have the similar similar kind of pop up, you can import
it, save yourself a lot of time and do something that you'd like to do, because you have more
free time out. Okay, create a new pop up. If you do it over here, that's what I want
to show you that you can see a few preset settings, if so I can say I want it to be
in the centre at the left or a bar at the top. So you can see something over here or over
here. Start totally from scratch. So our goal is one sign up email list MailChimp
or I remove MailChimp. I'll show you more ways publish edit with
Elementor and then we can start from scratch so there will be a little bit of overlap because
I've shown you a few things already but this time I will go through it faster unless I
show something new. So what I want to do I don't want to dive
too deep into this I've different tutorial for that but I want to integrate this with
MailChimp I want this to be a sign up form pop up. So I searched for MailChimp that comes with
the jet will pop up plugin this element when an element or drag it over here. And then I need to synchronise my email account
or my MailChimp account with a cyclical update. I go to the website to the back end. So just the front end, I click over here and
I scroll down and I go to jet pop up settings. And then I can integrate it with MailChimp. At this moment, the only way to integrate
it like this is with MailChimp. But I will show you also a different way how
we can embed different forms from different providers like overt get into your WordPress
website using jet pop up. So I want to go to MailChimp. If you want to know from scratch how to work
with MailChimp I've tutorial about it on YouTube. I will make a new one. But right now we have 30 We're on 30 MailChimp
that it's from 2020. But it's time for a new one every year, almost
every year I make one. And that's just the way it is. So I will make a new one soon. But first Croco block tutorials. So I am already logged in, then I go to my
accounts over here or I go to the dashboard, it doesn't matter. If you go to your dashboard, then you can
go over here to account go to the same place. Then go to extras API keys, as I said, but
yeah, I've completed all about it as I said before, because I already created a form or
a list. And now I can create a key that will connect
it with Elementor and jet pop up. So the keys already set up. So I duplicate this code. I go to Elementor over here and I base it
so I think it's now this linked to my Elementor newsletter list with one number. So if I refresh this command Ctrl R or f5
nipc There it is, well, let's style it a little bit because I don't like it that much. I click over here and then we have the elemental
list. Do we want to use a redirect URL so when people
subscribe, what should happen while they can go to a thank you page. So we can say forward slash thank you thank
you need to have the thank you page of course otherwise signals to a page that does not
exist, or it can send them to the homepage, close the pop up after success, yes, then
we have the fields, email, what I like I like, I like things to look clean. So if I remove this, it will be gone. And then here at the placeholder can say,
enter your email, address my emails, enough email size is area 100%, I can also say 50. So if I have a bigger form, I can decide per
field, how big it should be. I say 100. And if I would add over here in my fields
to have a name, phone number, that will automatically be added over here, I can add additional fields
over here, if I want to bother, I'm okay. And the submit button, I can say subscribe. Also the width 100%, I can make it like that. I like it. And then at the style I can make look better. Here, nothing happens, it's from the left
to the right. Things can change because we only have one
area, we don't have two things next to each other. So the column gap has no influence on the
display. This has so we can increase the space, I think
that is okay. We can increase the padding if you want to
go have a border radius for this for general, but I don't want that I want to have a border
radius for to the field. And I'll talk about it later. So if I go through the fields, right now I'll
talk about it the label colour. But what I often do, I just chose choose a
colour and see what happens. So nothing happens. I'm bringing back the typography, you can
make it really big, see what happens, nothing happens. Okay, label gap, nothing happens. It's bringing back to five I think, then they're
seeing boots, look at this. Fine, increase it something happens. So I say 15 Then there's the border radius,
if I increase it, you see increases until I think as a nice off circle like that. Then the typography Do you want to make the
text bigger or smaller I can also bring it back over here. But you can do this I want to change the colour
a bit because I think it's a little bit light. So the text colour, I can say that so you
see it better. And then we can have the same thing for the
Florida border if we want to. And when we when we focus on this area what
should happen? Well, we want to use a little bit of the style
of the website so when I click over here, then the settings will apply so I can make
the background pink. So when I click over here and becomes pink
and then the text colour comes white I use a global colours can say choose those over
here at the site settings global colours but I have them already. Now see when I select this it has those colours. So I go back to the cell. That's where I was fields focus. And I make it white like that. That's something you can do if you want to. Then there's the submit button we can I can
do it. Change it I can and you can change the border
again. So I also want to increase that radius colour
this one text colour white I want to hover over it becomes a purple one like that. Okay, so far so good. Then I want to have a text above its heading
and drag it over here. So now I can just can use Elementor so that's
nice too to learn more about WordPress slip scribe below okay, what I want to do I want
to go to the settings of the theme of the popup go to sell background type I want to use this I want
to use it like this or like that. Is location a bit. Okay, then I want to click over here on to
make the sell of that. Under the colour of the text white make it upper cases let's see if we
can increase it the bit that I want to bring the text to the centre make sure it is in two sentences, not three
like that want to learn more about WordPress subscribe ship scribe biller they can go to
Advanced of this heading I can go to the backgrounds I can make it black if I want to and decrease or increase
transparency allowed to go to Advanced still in a having an F betting I increase it a bit and then I go through the style and make the
text a little bit smaller okay and I don't know if I have an image of myself
but if you want to you can place an image but what I rather will
do I have a small text saying we will not send you spam emails or I will know you when
I have a new tutorial so they can expect they know what they can expect so I go to the style
bring to the centre make the text white make it a bit smaller then I can go to Advanced
uncheck the margin I'm getting quicker again to an end this year stick I should slow down
a little bit updates Okay then I go to the settings again if you wanted to change the
colours over here go through this. Let me see still close button that I can STELs
background colour MB primary one when I hover over it it can be the purple one. But then I also want the let me see the hover
font colour I want it to be what let me see what happens. Hover. Yeah, the background colour should be purple. Okay, on to learn more about WordPress Subscribe,
subscribe below. Update. And as I said before we can do we can trigger
it here. So let's say beige crawl after 50 50%. So 50% Scroll 50% to page then this whole
pair with AI X and display conditions. I only want to show this on the singular front
page. Update. I go to the website and it doesn't appear
does not appear yet. Even if I wait nothing. But if I scroll look at here, this area if
I scroll about 50% of the page. Wow there are the pair's want to learn more
about WordPress Subscribe below pretty Corp at Gmail. And I see this this shadow. I don't like it. So I can remove it. Subscribe. And then I go back to the homepage. And then if I refresh this over here, let
me see. They changed it all the time. So that's that's why this time for a new new
tutorial. Audience to contact
you contact and this one is from today, so it works through the API key. So that's amazing. That's how it works and they grow email lists
and automated emails. That's what I do. It works really well. If I sell something through my email list,
I get a lot of sales depending on what I promote, and what I prefer. When you have when you build an email list
about a certain subject, send them emails about that subject So if you have an email
list about making money online, don't send them an email as like, hey, buy a horse, because
that's not something that is similar. Okay, I think you know what I mean. So here you can decide, oh, yeah, this was
a nice try to exit. So when I go over here, then it appears on
a date. So showed on a few dates, so I can, with the
Cyber Monday, I can display it only on that Monday. And I can automate it already. So I don't have to do anything. Or after inactivity, or our customers select
Custom, custom selector click. So yeah, they can use CSS to trigger that. But let me show you how that can be done. I can also say, select nothing. So it will not appear. It still is only applied to the homepage. So if I go to the homepage, Command E homepage. And then I can edit it with Elementor. Then I can click over here, and I can say subscribe. Then over here at the link, I say hashtag
so links to nothing, but then it's bounced. Since we installed jet pop, we have this area
over here. I can select the popup I say sign up this one click on the widget. So now if I take a look at the website, nothing happens when I scroll down when I
click here, wow. Wow, I like it. I like it a lot. Okay, what else can I do if I go to Ferdy
Corp COMM And I click on templates. And I see this area, I can also add this in
a pop up. So I go to the dashboard, I go to get pop
up, create a new pop up. I call this one over it's gets publish and
it would Elementor and then through ConvertKit I can get a code. So it's just a text editor. Add code over here. And then it will be displayed like this okay,
and then go to the settings I can decide how I want it to be shown. I select nothing here because I wanted to
be done by clicking on a button. And at the settings, general pop up change
the width let's say 800 updates. Where do I want to display this? Well, actually on the whole website, just
depending on where I Can I think I can leave this all empty. So what I want to do now, I want to go back
to the homepage and it's the homepage with Elementor close all this stuff click over
here go to advanced jet pop up, and then select over get an update. Let's take a look. I click over here and then it appears. Now of course I can remove all the padding
so it will be just like this I can bring this area outside of what flows over here. And then I can leave my details here. And that's how it is done. Thank you for watching this video. As I told you I have more tutorials about
Croco block if you go to 30 corp.com tutorials Croco block there you can find more tutorials
about Croco block. So that's it. Have a great day feel free to subscribe, like
this video, and then you'll see me in the next video. Bye
