Elementor Mega Menu Tutorial | Without Plugin 👉 Just Elementor PRO

Подписаться 1,9 тыс.

Просмотров 2 тыс.

50% 1

How to create a mega menu with Elementor PRO full tutorial (without plugin).
Subscribe to WP Roads newsletter 👉 wproads.com
Get Elementor PRO 👉 wproads.com/elepro
Check my full Elementor PRO tutorial
👉 wproads.com/eletutorial
My Other Elementor Tutorials
1. How to create a Slide In Mobile Menu 📲 using Elementor Popup Builder
👉 • Off-Canvas Mobile Menu...
2. How to create a 404 page 🧐 with Elementor PRO
👉 • Elementor 404 Page Tut...
3. How to create custom Headers 🚀 using Elementor PRO
👉 • Elementor Header Tutor...
Timestamps
00:00 Let's create a Mega Menu with Elementor PRO
00:17 Pascal creator of WP Roads (SUBSCRIBE!)
00:34 Quick preview of the mega menu we are going to create
00:57 Experimental features needed (menu and nested elements)
02:04 Creating a basic header for our example
If you need a full Elementor header tutorial you find it here
👉 • Elementor Header Tutor...
02:38 Follow my full Elementor PRO header tutorial
02:50 Quick styling of our header
05:04 Setting the Elementor Menu widget
05:41 Activating Elementor dropdown option in the Menu widget
06:12 Adding the content to the dropdown mega menu
07:03 Styling the mega menu width
08:20 Distance from the header
08:55 Setting the padding pf the main mega menu container
09:13 Adding a grid container
11:04 Creating a CTA inside the grid container
13:00 Make sure to see correctly the dropdown icon
13:37 Align content inside the grid container
13:55 Styling the main container (border and shadows)
14:44 Adding border shadow to the main header
15:10 Adding an icon to link the mega menu to the header
17:23 Styling the list item at the top of the mega menu
18:08 Check out my ultimate Elementor PRO tutorial
18:36 Quick styling of the list icon element
18:43 Replace the content inside the grid container
19:24 Change the dropdown indicator icon
20:03 Responsive optimisation of the mega menu
20:18 Assign a different menu in mobile with Elementor Popup builder
Watch my full tutorial on how to create a slide-in mobile menu using Elementor PRO popup builder
• Off-Canvas Mobile Menu...
20:42 Basic responsive optimisation of the dropdown mega menu
22:21 Change the grid container items on tablet and mobile
23:20 Open the dropdown menu on hover or on mouse click
25:33 Optimisation for mobile replacing the menu toggle position
26:48 Share your feedback in the comments!
27:01 Check out my Ultimate Elementor PRO tutorial
And remember to subscribe to my Newsletter! ❤️
👉 wproads.com
#elementor #elementortutorial #megamenu #wordpress #wproads

Хобби

Опубликовано:

25 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 24

@wproads 2 месяца назад

Check my full Elementor PRO tutorial 👉 wproads.com/eletutorial

@usmangeni3229 Месяц назад

How size your screen on pc mode? because mine showing the hamburger menu when i used PC mode, but normally on laptop mode.. please?

@RetoB1976 2 месяца назад

Will watch it later. QUestion, if you have Blocksy Pro and Elementor Pro in your toolbox. Which one is easier to use to create a mega menu?

@wproads 2 месяца назад

Hi, they both have pros and cons, in general I like the fact that in Elementor PRO you can actually see how the menu will look like while in Blocksy PRO a lot of the costumisation options are in the backend so it is a little bit less intuitive and straightforward. On the Blocksy side I love the fact that the look and feel is more polished with slight animations and more icons and badges options.

@RetoB1976 2 месяца назад

@@wproads great, thank you 🙏

@Claymore300 13 дней назад

Hello , I have done a lot of testing and when I create a simple mega menu with Elementor Pro, it significantly increases the page load times... Do you also experience this issue with Elementor Pro mega menus?

@wproads 11 дней назад

Hi, I’ve never tested the speed before and after, I suggest you to report this to the support team, or to try lazy loading the Mega Menu.

@ChidiebubeUzodinma-sl1bs 2 месяца назад

The Best To ever do it

@user-iy1ch3lv3h 2 месяца назад

Pls tutorial about buddypress

@wproads 2 месяца назад

I don’t use BuddyPress, would you be interested in BuddyBoss too?

@cinemainfo2433 2 месяца назад

Sir please upload video about how to create news letter subscribe options in Elementor pro

@wproads 2 месяца назад

Hi, you mean using the integration with an external service like Mailchimp, Brevo or MailerLite ?

@cinemainfo2433 2 месяца назад

@@wproads yes sir using MailChimp

@wproads 2 месяца назад

Ok, I’ll keep this in mind, can’t promise anything dough 👍

@Bedstesovn 2 месяца назад

Hi, mine is not looking like yours. First of all, yours are called "menu", mine is called "mega menu" (i don't have a "menu"). Second when I add the mega menu I don't see the option with adding "items". Can see your video is all new. Did elementor update it the last days?

@Bedstesovn 2 месяца назад

also, I have elementor PRO if that makes a different

@wproads 2 месяца назад

Hi, thanks for the feedback, I’ll check it out as soon as possible and will let you know 👍

@Bedstesovn 2 месяца назад

@@wproads I can see it now. Think I needed to refresh it before I could see it. The next problem, even after trying to refresh, is that when I put on the "dropdown" I see the arrow on the right of the word, but it doesnt dropdown when I click on it. Have you tried that before, and know how to fix it?

@vincepaul2721 2 месяца назад

can you help me because nothing is showing up when i click the dropdown

@wproads 2 месяца назад

I’ve tested the process again after the Elementor 3.21 update and it still works perfectly. I would suggest you to disable any other plugin and try again following all the steps 👍

@vincepaul2721 2 месяца назад

@@wproads i cant disable any plugins unfortunately. i checked the overflow to see if its hidden and its not. i did all the steps but its not working

@vincepaul2721 2 месяца назад

i cant click the dropdown on elementor its not showing me to add a container, can you help me?

@wproads 2 месяца назад

Hi, make sure to activate the Experiments as I show at the beginning of the video, did you follow all the steps?

@vincepaul2721 2 месяца назад

Yes i did. Menu flexbox containers and nested features