In this tutorial, we will show you how to add a popup to related posts that triggers on a certain point on your page. The popup can be used on any pages and posts in WordPress, even ones written without Elementor.
You will also learn how to add CSS filters to images, all using Elementor’s Popup Builder.
hey everyone had us form elemental here
today we’ll create a pop-up to chose
related articles in order to do this we
will need to think outside the box for a
sec let’s say that the user is reading
an article on your blog and then when
reaching the end of the article a pop-up
is shown but instead of seeing an ad the
user exposed to other features posts and
articles this way we encourage our users
engagement while delivering a better
user experience let’s see how we do it
in elementors pop-up builder in finder
search for pop-up and then you pop up
and give it a name this time I’m going
to use a blank pop-up in the pop-up
setting change the width to 100 viewport
width the VW and the position to center
and bottom next I will open a new
section with 4 columns the left will be
the left I will add a heading widget
with some text and on the right I will
add an image widget so now that the
structure is ready let’s add a hover
effect and links to the posts that I
want to show starting with the links go
to the link drop down menu and choose
custom URL paste your link here
okay now let’s add some effects here I
want the pictures to be black and white
in their normal state and when hovering
over them I want them to fill with color
so under style go to CSS filters and
change the saturation to zero then under
the hover tab click on the CSS filter
and make sure that the saturation still
is set to 100 now when we hover over the
image we can already see the effect cool
let’s apply the same effect on the other
images by copy pasting the style with
the right click alright the only thing
that is missing is the interest effect
go to the pop-up setting and in the
entrance animation drop down menu choose
slide in up let’s also remove the
overlay background that appears when the
pop-up is displayed go to overlay and
switch the trigger to hide so now that
my design is ready
let’s click publish and set the
conditions triggers and advanced rules
click on add condition singular all
pages and choose the name of the page
where you want the pop-up to pop click
Next
I want the pop-up to show when the user
reaches a certain point of my article so
let’s switch the unscored to element
trigger – yes and in the selector field
type the class I’ll call it dot puppet
next for this example we’re not going to
set any advanced rules so click on save
and close now let’s add that class to
the element on our page where we want
the pop-up to appear for this example
are we set it to show when the user
reaches the share button section in the
section setup under the Advanced tab go
to CSS classes and type the same class
we said before now click update ok we’re
done let’s see how it looks like
nice so next time you have a pop up in
mind trying to think of it as an
additional section that appears on the
screen and not so much as an ad I hope
you enjoyed this tutorial don’t forget
to subscribe to our YouTube channel to
get all the latest updates and tutorials
see you later
