In this tutorial, we will show you how to create a cookie consent popup using Elementor’s Popup Builder.
You will also learn the difference between the different popup types, and more.
hey y’all Cassie from Elementor here in
this video we’ll create a cookie consent
pop-up it’s pretty self-explanatory so
let’s get to it
use command + E to open the finder and
give your pop-up a name I want to go
over some options in the library click
the category drop-down and let’s briefly
go over the options here the categories
represent the different types of pop-ups
let’s start with classic this is the
most popular use of a pop-up
traditionally it appears as an opt-in
form in the middle of the screen with an
overlay that obscures the background
next up we have flyin flyin pop-ups are
effective because they draw the users
attention as the name suggests these
pop-ups look like they’re flying in to
the screen full screen pop-ups are great
for directing your users attention to
one specific call to action or promotion
then there’s the ever-popular
hello bar pop-up use these primarily for
sales promotions and announcements onto
the slide in pop up sliding pop-ups can
be used for any purpose and as you can
see they take up the entire height of
the screen now we’ll check out the
bottom bar pop up bottom bars can be
used for a variety of reasons including
announcements or as a cookie consent
which will show you how to set up come
on let’s edit it change the button text
in content slide on don’t show again
this makes it disappear after the user
accepts the cookie and make the button
larger in style choose a color from the
palette or type in a hex code remove the
padding from the template duplicate the
bottom on right click edit the text link
it and increase the size also in style
use the settings to make the second
button stand out less change its colors
and add a line underneath to finish it
off let’s design the overall bar align
the text to the left and align the
button to justified stretch the button
in text across the bar
making it more proportional
click the COG to enter the pop up
settings and turn off the overlay in
style adjust the color shade in advanced
slide the first to prevent closing on
overlay and escape to yes publish and
let’s set the conditions and triggers
let’s add the condition include to
include the pop-up across the entire
site choose exclude so it appears across
the site except for in the Terms of Use
page
in the triggers tab page load slide to
yes next save and close let’s see how it
looks and try out both options except
and decline
so have fun exploring the pop-up
template library to get you started
designing your own cookie consent forms
and don’t forget subscribe to our
YouTube channel catch you later
