In this tutorial, we will explain and show you how to create a custom & responsive menu that pops up when the visitor clicks on a button in your website header.
Learn how to create functional yet beautiful menu popups to improve the user experience.
You can download this template from the Elementor template library
hey everyone it’s Cassie from Elementor
in this tutorial we’ll learn how to
create a menu that triggers pop-ups see
how a beautiful nearly full screen
pop-up appears on the screen once you
click a button in this case a menu
button alright let’s see how the magic
is done in the dashboard click on
templates add new and choose popup name
it and click create template then you’ll
get the library with more than a hundred
pop-ups to choose from but we’ll close
it so we can create it from scratch in
the pop-up settings change the width of
the popup switch overlay to hide in
under entrance animation choose fade in
and set its duration to two seconds
under style you can design the Buc
shadow settings under close button set
the vertical position and change the
color and size in the Advanced tab
prevent closing on overlay this sets
where you can close the pop-up either on
any part of the screen or only on the X
or the button so let’s get into
designing your pop-up add a section with
two columns and here choose no gap
inside the left column drag in an
intersection widget and add some padding
drop in a title widget and adjust your
typography in size this time I’m going
to start off with mobile so that later I
can duplicate it and it will already be
all set
duplicate the title note that here we’re
not using nav menu just the title to
create the menu add a button widget edit
your buttons text and style color border
etc let’s add a margin on the top also
in mobile tweak the text size bottom
padding etc now add another intersection
add some padding
then inside the intersection ad and
design the share buttons alignment size
and custom color
now let’s designed the other side in the
right column the color is changed but it
is only visible once content is added
add an intersection adjust the padding
and margin drag in a title and design it
now add a form for users to sign up for
the newsletter we just need their email
so let’s delete all the other fields and
fine-tune the size icon color etc to
display 3 products let’s add another
intersection add padding but here let’s
slide hide for mobile to make it visible
only on desktop and tablet here a minus
margin will shift your column to the
left making it stand out more copy the
title and paste it change the column
color to white border radius and box
shadow also on hover drag in an image
and go to town now go back to the text
and change its weight margin and
duplicate it edit the text now duplicate
the column three times and change each
individual margin to create a space
between them add an image by the way
notice here that these are gifts so you
can use video gifts or regular images
polish your text and set the margins in
preview get an idea how it looks
now design all your items for mobile
adjust the padding increase the VH size
to 100 so that the pop-up fits the
entire screen and have some more design
fun
click publish and the conditions window
will open and no changes are needed to
the conditions triggers and advanced
rules
what crazy this only applies to pop-ups
that are triggered by buttons save and
close now let’s define how you open your
pop-up by going to your site’s header
here’s a header that was already created
press the button menu and in content
link dynamic choose pop-up click again
on pop up and under action choose toggle
pop-up because you want the button to
both open and close the pop-up and pop
up choose your popup and save on your
live page you can test it by clicking on
the button to open and close the pop-up
that’s basically it want to learn
another cool trick
add some entrance animation to add a
real Wow to your pop-ups back to editing
the pop-up enchants your users even more
by adding entrance animation to each
part copy these settings to paste the
style for each one back to the live page
click the button menu whoa trippy what a
difference a bit of animation makes and
what about on mobile click the menu
button looks great too
you can open pop-ups from any kind of
button on your page give it a spin today
using pop-ups in your own creative way
