Elementor Popups are way more than just popups and in this episode, I’m going to show you how to create a mobile quick links navigation with dynamic links that can add great value to your mobile website. So grab and a cup of coffee and let’s get started!
hello, I’m your host Kaycinho, I’m a digital alchemist, and today I’m going to show you how to create a mobile quick links navigation with the help of Elementor Popups.
Now, we could also achieve that by simply creating an Elementor Pro footer, but I want to show you how to achieve that with Elementor Popups.
Because there might be some cases when you need some of the options that come with Elementor Popups, such as giving the user the ability to close the quick navigation bar.
So, enough talking, let’s dive in!
Elementor Popups mobile navbar: step 1
- First of all, in the WordPress admin, create a popup by going to Templates > Popups > Add new
- Give it a name, like for example Contact Form Popup
- Design your popup or use a template
- Publish your popup (conditions = include on whole site, no triggers, no advanced settings
Elementor Popups mobile navbar: step 2
- In the WordPress admin, create a popup by going to Templates > Popups > Add new
- Give it a name, like for example Mobile Navbar Popup
- Once in Elementor, design your popup by adding 4 sections with one icon / image in each section (for example Phone / Whatsapp / Contact / Waze)
- Click the settings gear icon (bottom left corner of the window) and make sure you align the section to the bottom of the screen as well as disable the overlay
- Tweak the rest of the popup settings to your liking
- Back to styling the section and icons / images, for each icon, in the field link, select Dynamic > Contact URL and select the appropriate option from the dropdown (Skype, Whatsapp, etc.)
- When it comes to the “Contact” icon, in the link field, select Dynamic > Popup, and in the search bar type the Contact Form Popup created in step 1, and select it
- Publish your popup (conditions = include on whole site, trigger On load after 1 second, and in the Advanced settings > Devices, show only mobile
Elementor Popups mobile navbar: variation
With this variation, you can show only one icon that will always be floating.
The perfect use case for this is when you want to show a phone icon so that your website’s mobile visitors can call you in a couple of taps.
Check the video tutorial for the complete step-by-step.
Elementor Popups mobile navbar: what’s next?
If you are interested in purchasing Elementor Pro, click below:
To be crystal clear, this is an affiliate link, which means that I do get a commission if you purchase a licence after clicking on my link.
But:
1) I only recommend Elementor Pro because I love the product
2) commissions help me support this channel and create free content.
So, I hope that this video showed you the power of Elementor Popups, and that you will create a beautiful user interface with smart and handy dynamic links, with the help of Elementor Popups!
If there are other Elementor Popups tutorials you’d like me to cover, let me know in the comments .
If you watched the companion video and if you like it, please give it a thumbs up, as it really helps growing the channel and if you know someone that could benefit from it, I’m going to ask you if you’d like to share it now?
Because let’s face it, there are so many things to do in a day that if you don’t do it now you’ll probably forget.
If you want to brand, market and grow your business it in the Digital Age make sure you subscribe to my email newsletter so that you never miss your share of digital alchemy and tips, tools, services and case studies that can help you grow your business online.
So, that’s it for this episode, I hope to see you around here or on the Youtube channel, and in the meantime, don’t forget to invest in YOUR success!
| 
