Fullscreen menu with image exchanger with Elementor

Creating the menu structure:

-Create a new menu and add all the desired links. -Activate CSS classes for menu links and associate them with the background images that will be displayed.

Creating the custom header:

-Use Elementor to create a new custom header. -Add a container with horizontal orientation, a logo and a hamburger icon. -Align the elements inside the container.

Creation of the fullscreen popup:

-Use Elementor to create a new popup message. -Set the width and height to 100% so that it fills the entire screen. -Design the structure of the popup with containers and align them as necessary. -Insert a WordPress menu widget and customize its appearance. -Add a gradient to the container for a more stylized look.

Image exchanger implementation:

-Insert an HTML widget inside the popup and paste the necessary JavaScript code. -Modify the HTML code to associate each menu link with the corresponding image. -Paste custom CSS code to stylize the popup and adjust the size of the images.

Publication and final adjustments:

-Refresh the page to apply the changes. -Publish the popup without adding additional conditions. -Adjust details as needed, such as mobile version and menu visual appearance.

Conclusion:

I hope this tutorial has been useful to you and you have managed to create your own fullscreen menu with an image exchanger. Remember to leave any questions or doubts in the comments. See you later!
Share in your social networks

Leave a Comment