In this Advanced Tips & tricks tutorial we’ll learn how to create a popup text path menu with an awesome animated hover effect on the image to really level up our navigation designs.
The tutorial will cover:
✔︎ Creating a popup menu
✔︎ Using the Text Path Widget with a custom SVG
✔︎ Hiding and rotating image using custom CSS
✔︎ Connecting the popup menu to the icon in header section
✔︎ And much more!
Links:
Text Path Widget Tutorial https://youtu.be/aeqpeYkE_yE
How to create a custom SVG https://elementor.com/help/how-to-cre…
CSS Snippets:
.menuImg{
opacity:0;
transition: all 0.8s ease-in-out;
transform: rotate(25deg);
}
.menuTitle:hover + .menuImg{
opacity:1;
transform: rotate(15deg);
}
Hey there, it’s Ash from Elementor.
In this advanced tips and tricks tutorial I’m going to show you how to create this amazing popup menu which uses the image and text path widgets.
When a user hovers over a menu item, we can see that it beautifully animates and provides a great user experience for our website visitors.
To achieve this functionality we’re going to undertake the following:
We’ll first create and configure a popup
Then we’ll build the basic structure of our menu using the text path widget
Next, we’ll our images to each menu item
And finally we’ll add some custom CSS to both hide and show our new images depending on the users interaction
This advanced tutorial does require some knowledge on how to use the Text Path widget. If you need to familiarise yourself with this feature, you’ll find a link in the description below to our dedicated tutorial.
We are going to create this from scratch, so go ahead and open up your editor to be able to follow along with your own design preferences and images.
To get started, let’s first create and configure our popup.
Head to the WordPress dashboard and then navigate your way to ‘Templates > Popups’.
Add a new popup…give it a name…and then select ‘Create Template’.
Once the Elementor Editor has loaded, dismiss the library first of all, and then select the gear icon, located in the bottom left corner.
Here we are going to set our popup settings and look.
Set the width to 100 VW…change the height to ‘fit to screen’…and ensure the content is positioned in the center.
Now add in a new one column section.
Change it to ‘Full Width’…then switch over to the advanced tab…unlink the margin…and add 15% to the top.
Now, select the column and set the padding to 0 on all sides.
Next, we’ll build the basic structure of our menu by using the text path widget.
Open up the widget menu and search for the ‘Text Path Widget’. Drop this into the empty column, and then update the text.
Choose custom from the ‘Path Type Dropdown’ and then add your own custom SVG.
If you would like to learn how to create a custom text path, you can follow this link.
Now in the link field, we’ll search for and select the page which we’d like to connect to.
And the final option in the ‘Content Tab’ we’ll configure, is to enable ‘Show Path’. As you can see, we’re now able to see the entire SVG path.
Switch over to the style tab now…change the size to percentage first of all, and then add your value.
In the typography area…set your font styles.
Amend the starting point…and then set your ‘Normal Color…and Hover Color’…as well as the transition duration.
Next, open up the ‘Path Tab’.
Here we’ll set the ‘Stroke Color’ using our global styles…then in the hover tab we’ll set the stroke color….width…and transition.
Finally, switch the advanced tab…and add a class. This will allow us to target this particular element with CSS shortly.
Now that we’ve configured our first menu item, let’s now duplicate it.
Change the text…
The link…
And in the style tab, the starting point.
Repeat these steps for as many menu items as you wish.
Right click and select duplicate…
Update the text…and link and starting point.
Then one last time…
Duplicate…update the text…link and starting point.
OK, great!
We’ve now finished creating our text path navigation.
Now let’s make it even more interesting.
Let’s add our images for each menu title.
Open the widgets menu…and drop in an ‘Image Widget’. Now in the navigator, drag and drop this underneath our first ‘Text Path Widget’.
Change the default image…and amend the image size.
3) Now, switch to the style tab and in this design, we would like a specific image size, so we are going to set these values in pixels.
Object fit, we’ll set to cover.
Border to solid, with a 1px width and a border radius of 50 percent.
Let’s now position our image.
Switch to the advanced tab…then under positioning…set the width to inline…the position to absolute…and then amend the horizontal and vertical orientations using the viewport width and height.
The last thing left to do here is add a class name to our image. Just like we did with our text-path widget, this will help us add additional customisations with CSS.
Let’s now duplicate the image and move it underneath our second text path widget. We can’t see our two images because they are positioned in exactly the same location, so let’s fix this.
Update the image first, and then in the advanced tab, amend it’s position.
We’ll now repeat these steps for our third image.
Duplicate the image…move it…then update it.
In the advanced tab…amend the position.
And one last time for our fourth image.
Duplicate…move…update…and reposition.
Now everything is set up, the only thing left to do is to add some CSS magic which will show or hide the images depending on the users action.
Select the gear icon to enter the popup settings. Then in the advanced tab, choose ‘Custom CSS’.
Here we’re going to target the class names that we’ve applied to our widgets, to trigger an animation when the cursor hovers over the links.
Type a dot, which is used to identify a class name in CSS, followed by the name given to the text path widget.
Open the curly brackets.
We’re going to target every element with this class name and make them disappear. We’ll do this by typing “opacity, colon, zero, semi-colon”, then close the curly brackets.
As you can see all of the images have now disappeared.
Now we are going to add the code that triggers the images to reappear.
Start a new line, and type dot followed by the class name which we assigned to our text path widgets.
We’ll now add a hover state to our class which will allow something to happen when a user moves over the element with their cursor. Type “colon, hover”.
Now type a space followed by the + icon which is used to select the next widget, which in our case is the class name of our image.
Now open and close the curly brackets.
And inside here we are going to set the opacity to one.
OK, that works pretty well, but let’s add a transition to ease the effect.
Start a new line underneath our existing property in the image class, and type the following…
Now if we hover over our items, you can see this is more visually pleasing.
Let’s continue and add some more great effects.
Again, start a new line in the image class and this time we’ll add the transform value.
We’ll then add the transform value to our hover state as well.
If we now hover the items, you’ll see a subtle rotation effect.
Awesome!
And with this step we have finished creating our menu.
Click publish and don’t forget to add the condition to display on the entire site!
Lastly we are going to connect our popup menu to the hamburger icon in the header, so that it opens whenever the icon is selected.
Use the keyboard shortcut CMD/CTRL + E to open the finder and type header… and select the header template to open it.
Choose the hamburger icon and in the editor and under the content tab go to Link and click the dynamic tags icon. Under actions select popup.
Next click on the wrench icon on the left.
Select the default action which is open Popup. Under popup click the dropdown and type in the popup templates name. Select your template and then update.
As you can see Elementor gives you the capabilities to bring your designs to life, and with a little CSS, you can really take your creations to another level.
Try these techniques with your own designs, and be sure to share them with us in the comments below.
Thank you for watching. Subscribe to our channel for more amazing tutorials.
