✅ Crear MEGA MENÚ con Elementor Pro (3.12) | Sin plugins extra
Summary
TLDREste video tutorial muestra cómo crear mega menús con Elementor Pro para sitios web con muchas categorías y productos, o para blogs con múltiples secciones. Se explica cómo activar los widgets necesarios, crear un nuevo encabezado y configurar el menú desplegable. Además, se detalla cómo personalizar los contenedores, ajustar la orientación y el ancho, y adaptar el diseño para dispositivos móviles y tabletas. Finalmente, se ofrecen consejos para mejorar la apariencia en diferentes tamaños de pantalla y se invita a los espectadores a suscribirse para más contenido útil.
Takeaways
- 🛠️ Elementor Pro es útil para sitios web con muchas categorías y productos, como comercios electrónicos y blogs.
- 📋 Mega menús son una solución para incluir múltiples elementos en el menú sin hacer scroll.
- 🎨 Para crear un mega menú, se deben activar ciertos widgets en Elementor, incluyendo Mega menú, Sanidades y Contenedor Flashbox.
- 📝 Se puede comenzar a crear un nuevo mega menú desde cero o copiar elementos de otros mega menús existentes.
- 🔄 Es importante marcar la opción 'Drop-down' y no asignar un enlace al menú principal para que funcione como mega menú.
- 📐 Se pueden añadir contenedores adicionales dentro de los elementos del menú para organizar el contenido del mega menú.
- 🖌️ Se pueden personalizar los colores, estilos y posiciones de los contenedores dentro del mega menú.
- 📊 Se debe ajustar la orientación y el ancho de los contenedores para adaptar el diseño del mega menú a diferentes dispositivos.
- 📱 Es crucial adaptar el diseño del mega menú para que se muestre correctamente en tabletas y móviles, cambiando la dirección a vertical si es necesario.
- 🎥 El tutorial ofrece ejemplos de cómo crear y personalizar mega menús con Elementor Pro, incluyendo la duplicación de contenedores y la asignación de estilos.
- 👍 El video finaliza con recomendaciones para seguir el tutorial y adaptar el mega menú a las necesidades específicas del sitio web.
Q & A
¿Qué es Elementor Pro y para qué sirve?
-Elementor Pro es una herramienta de diseño de sitios web que permite crear páginas web de manera visual y personalizada. Es útil para sitios con muchas categorías y productos, como comercios en línea, o para blogs que necesitan una estructura de menú más avanzada.
¿Qué problemas resuelve el uso de Mega Menús con Elementor Pro?
-Los Mega Menús resuelven el problema de tener demasiados elementos en el menú principal, lo que puede hacer que sea necesario desplazarse para ver todos los ítems. Permiten organizar la información de manera más cómoda y visualmente atractiva.
¿Cómo se activa el Mega Menú en Elementor Pro?
-Para activar el Mega Menú, se deben activar tres opciones en los ajustes de Elementor: el widget de Mega Menú, el elemento de sanitarios y el contenedor Flashbox.
¿Cómo se crea un nuevo Mega Menú en Elementor Pro?
-Para crear un nuevo Mega Menú, se debe ir a las plantillas de temas y crear una nueva cabecera con el Mega Menú. Luego, se añade el widget del menú y se configura el Mega Menú en la sección de ajustes.
¿Cómo se pueden personalizar los contenedores dentro de un Mega Menú?
-Los contenedores dentro de un Mega Menú se pueden personalizar cambiando su orientación, ancho, estilo, colores, y agregando elementos adicionales como encabezados y listas.
¿Cómo se adaptan los Mega Menús a dispositivos móviles y tabletas?
-Los Mega Menús se pueden ajustar para dispositivos móviles y tabletas cambiando la dirección a vertical y modificando los espacios entre elementos para que se muestren adecuadamente en una columna.
¿Qué elementos se pueden añadir dentro de un Mega Menú?
-Dentro de un Mega Menú se pueden añadir elementos como encabezados, listas, imágenes, widgets de llamada a la acción, y otros widgets según las necesidades del sitio web.
¿Cómo se pueden cambiar los estilos y colores de un Mega Menú?
-Los estilos y colores de un Mega Menú se pueden cambiar en la sección de ajustes de estilo, donde se pueden seleccionar colores de fondo, aplicar sombras de caja, y ajustar el relleno y las distancias entre elementos.
¿Qué es importante tener en cuenta al configurar el Mega Menú?
-Es importante asegurarse de que el Mega Menú no tapeze otros elementos como la cabecera o el logotipo, y que se ajuste adecuadamente en dispositivos móviles y tabletas para una experiencia de usuario óptima.
¿Cómo se pueden duplicar y replicar elementos en un Mega Menú?
-Los elementos en un Mega Menú se pueden duplicar y replicar para crear una estructura similar en otros contenedores. Esto se hace copiando y pegando el estilo y la estructura de los elementos existentes.
Outlines
📚 Introducción a los Mega Menús con Elementor Pro
El primer párrafo explica la utilidad de los Mega Menús en sitios web con muchas categorías y productos, como comercios en línea o blogs de viajes. Se menciona cómo los menús tradicionales pueden ser insuficientes y cómo los Mega Menús pueden ser una solución más cómoda y personalizable. Se ofrece un ejemplo de Mega Menú creado con Elementor y se procede a explicar cómo crear uno desde cero, incluyendo la activación de widgets y la configuración de menús y contenedores.
🛠️ Creación y Personalización de Mega Menús
Este párrafo entra en detalles sobre cómo crear y personalizar Mega Menús en Elementor Pro. Se describen los pasos para crear un nuevo menú, agregar elementos y configurar la estructura del Mega Menú. También se abordan las opciones de diseño, como cambiar la orientación, ajustar el espacio entre elementos, y personalizar el estilo con colores y sombras. Se menciona la importancia de utilizar el navegador para una mejor visualización y se da un ejemplo de cómo duplicar y ajustar contenedores para lograr un diseño más complejo.
📱 Adaptación de Mega Menús para Dispositivos Móviles
El último párrafo se centra en la adaptación de Mega Menús para dispositivos móviles y tabletas. Se sugiere cómo modificar la estructura para que se muestre adecuadamente en diferentes tamaños de pantalla, como cambiar la dirección a vertical para una mejor visualización en móviles. Se mencionan las opciones de estilo y efectos para adaptar el menú a diferentes dispositivos y se ofrece un breve resumen de los ajustes disponibles en Elementor Pro. El tutorial termina con una invitación a dar like, suscribirse y ver el próximo video.
Mindmap
Keywords
💡Elementor Pro
💡Mega menús
💡Widgets
💡Menús desplegable
💡Contenedores
💡Diseño personalizado
💡Adaptabilidad a dispositivos
💡Efectos y estilos
💡Tutorial
💡Optimización de contenido
Highlights
Elementor Pro es útil para sitios con muchas categorías y productos, como comercios en línea.
Los sitios de blog también pueden beneficiarse de los mega menús para manejar una gran cantidad de contenido.
Los mega menús se ven más cómodos y permiten una mayor creatividad en la presentación de elementos.
Para crear un mega menú con Elementor Pro, primero se debe activar el widget de Mega menú y otros elementos en la configuración de Elementor.
Se puede crear una nueva cabecera con el mega menú utilizando las plantillas de temas.
Es importante marcar la opción 'Drop-down' al configurar el menú para que se muestre como un mega menú.
Los elementos del menú se configuran con títulos y enlaces, y se pueden personalizar a gusto del usuario.
El contenido del mega menú se puede editar y organizar utilizando contenedores y widgets adicionales.
Los contenedores dentro del mega menú pueden ser duplicados y modificados para una estructura más compleja.
La orientación de los contenedores puede ser cambiada a horizontal o vertical según las necesidades del diseño.
El ancho del mega menú puede ser ajustado para ocupar todo el ancho de la página o se puede mantener en porcentajes para una adaptación flexible.
Los estilos de los contenedores, como relleno, color de fondo y sombra de caja, pueden ser personalizados para mejorar la apariencia del mega menú.
El mega menú debe ser adaptado para dispositivos móviles y tabletas, ajustando la dirección y los espacios según sea necesario.
Elementor Pro ofrece una gran cantidad de opciones para ajustar la apariencia y la funcionalidad del mega menú.
Los efectos y la posición del menú también pueden ser personalizados para una experiencia de usuario más atractiva.
El tutorial proporciona un paso a paso detallado para crear y personalizar mega menús con Elementor Pro.
Los usuarios pueden copiar y pegar elementos y estilos de otros mega menús para acelerar el proceso de creación.
Transcripts
con elementor pro es algo que es
bastante Útil para cierto tipo de webs
como puede ser Commerce que tienen ahí
pues muchas categorías muchos productos
etcétera entonces no suele caber todo en
el menú normal Por así decirlo y también
para webs de tipo blog por ejemplo aquí
tenemos un blog de viaje que a los
vuelos de viaje le suele pasar este
problema y es que bueno empiezan aquí
Añadir elementos al menú de países y
demás y Bueno pues pasa esto no que
incluso hay que hacer scroll para ver
todos los elementos que hay entonces
Bueno una forma de solventar esto es con
mega menús aquí por ejemplo este otro
blog pues lo tiene así con mega menú Y
bueno pues se ve de una forma pues mucho
más cómoda
Te voy a enseñar aquí el ejemplo de lo
que tengo creado de Los Mega menús
Entonces tienes aquí uno que es bueno
pues así como lo que tienen ellos aquí
algo así y después tienes otro que es
así más creativo un poquito y de
imágenes y demás bueno esto ya es
cuestión de gustos aquí ya realmente tú
puedes ponerte creativo y hacerlo de una
manera diferente todo esto está hecho
con elementor así que bueno pues esto no
pasa nada Pues modificar y darlo a tu
gusto Bueno pues vamos a ver cómo crear
un megamino con elementor Pro para eso
lo primero que tienes que hacer es
activar el widget de Mega menú que está
en ajustes aquí de elementor
características y es este elemento de
aquí vale el menú lo tienes que activar
pero también tienes que activar este de
aquí el elemento sanidades y también
contenedor flashbox tienes que activar
esas tres opciones para que te funcione
el Mega menú una vez que tengas esto
activo Pues bueno lo que ya habría que
hacer es crear mega menú para eso lo que
tenéis que hacer Bueno pues ir aquí a
las plantillas más que todo de temas y
crear una nueva cabecera con tu mega
menú vamos a crear aquí un nuevo header
aquí cabecera vamos a ir a una nueva
cabecera
esta parte me la voy a saltar vamos a
quitar estas plantillas vamos a empezar
desde cero lo que voy a hacer es copiar
lo que tengo ya hecho aquí
esta parte de arriba por lo menos y ya
después el megamino lo creamos desde
cero de nuevo Entonces vamos a volver
aquí pegar
Bueno ya lo tendría hecho no pero
realmente Esa no es la idea entonces lo
que voy a hacer es Borrar el Mega menú
que he creado antes y lo que hay que
hacer ahora es Añadir este widget que es
el del menú Entonces lo añadimos aquí y
Bueno pues vamos a enviarlo aquí al
final y después aquí Bueno pues ya irían
lo que son los elementos del propio menú
vale esto simplemente es cuestión de
poner aquí el título vamos a poner por
ejemplo inicio después Aquí iría Pues el
enlace Vamos a ponerle pues da igual le
voy a poner simplemente una almohadilla
no van a hacer ningún sitio Pero bueno
aquí ya le pones tú el enlace a tu
portada lo que sea
vamos a crear aquí ya lo que es el Mega
menú
vamos a llevar mega menú y aquí
importante marcar esta opción de Drop
down marcamos esta opción no le ponemos
ningún enlace Aunque realmente si
quieres también le puedes poner un
enlace y el menú bueno ítem 3 Vamos a
ponerle aquí simplemente contacto
por rellenar más que nada
Ahí está Y bueno pues ya tenemos aquí
nuestros tres elementos del menú bien
Ahora lo que hay que hacer es pinchar
aquí en el Mega menú y como este se te
va a abrir aquí Bueno pues un contenedor
que igual no se aprecia del todo pero si
te vas aquí al navegador
vas a ver que tienes aquí el menú tienes
aquí los ítems vale Y bueno pues aquí
está todo vacío Entonces vamos a Añadir
aquí algo un nuevo contenedor
vamos a poner pues este mismo
como ves ya aquí aparece un nuevo
contenedor Dentro de este ítem 2 que
está dentro del menú Es importante que
utilices el navegador porque te va a ser
mucho más cómodo de orientarte porque
esto es un poquito confuso la verdad
Entonces Bueno pues te recomiendo que lo
utilices otra cosa que puedes hacer es
aquí una vez que ya estés editando el
menú bueno es tu mega menú pues lo que
puedes hacer es cambiar los colores aquí
de los
colores de fondo de los contenedores
para aclararte
vale
Vamos a ponerle aquí otro color
Vale entonces Bueno aquí como ella
tienes dos contenedores Bueno aquí ya
dentro pues simplemente Sería cuestión
de Añadir Pues todos los elementos que
quieras Yo aquí por ejemplo Pues he
puesto Pues bueno un encabezado y un
elemento de lista para ir un poquito más
rápido lo que voy a hacer es copiar los
elementos que ya tengo en otro mega menú
vamos a copiar aquí este encabezado
y la lista Bueno vamos a pegar aquí y lo
que vamos a hacer también es copiar el
estilo copiar estilo de esta columna le
pegamos el estilo pegar estilo y ya
tendríamos hecho ahora que hay que hacer
es quitarle el fondo este lo vamos a
dejar transparente
rebajamos aquí la opacidad al máximo y
lo que voy a hacer es simplemente pues
duplicar estas columnas Bueno este
contenedor vamos a duplicarlo
aquí cuatro veces este se ha quedado un
poquito raro vamos a hacer aquí otra
copia Ahí está Vale ahora está perfecto
lo que hay que hacer ahora es aquí en
estos ajustes de este bueno el ajustes
de este contenedor
pues cambiar aquí la orientación vamos a
ponerla horizontal todo Y bueno pues ya
tendríamos hecho lo que hay que hacer
ahora es quitar el espacio que hay entre
los elementos como ves aquí pues se
puede ajustar eso lo dejamos a cero Y
bueno pues ya no aparece ese espacio
pues ya tendríamos hecho ahora lo que
hay que hacer es
aquí
modificar la posición del Mega menú
porque como es aquí está tapando un poco
luego la cabecera y demás para eso lo
que hay que hacer es ir a que los
ajustes del Mega menú y aquí en estilo
distancia desde el contenido
aquí
lo voy a dejar en 30 píxeles que yo creo
que así está bien
Ahí está ya no tapa luego ni el Mega
menú bueno el megamino la cabecera ni el
logo Así que perfecto vamos a ver ahora
Cómo crear el otro mega menú que es un
poquito más complejo porque aquí ya Hay
que crear pues varios contenedores y
demás Y bueno pues es un poquito más
confuso Pero bueno vamos a ello tengo
que enseñar ahora cómo crear este otro
mega menú que tiene una estructura un
poquito diferente pues más compleja y
también como ves no ocupa todo el ancho
del contenedor entonces Bueno vamos a
ver cómo se podría hacer eso lo primero
que hay que hacer es crear aquí un nuevo
ítem que se va a llamar también Mega
menú ahora que le voy a cambiar el
nombre mega menú 2 Ahí está Y es que
vamos a la opción de Drop Down
y lo voy a mover aquí
así bien Ahora lo que hay que hacer es
Añadir aquí
un nuevo elemento vamos a Añadir aquí
Bueno pues un nuevo contenedor
Ahí está perfecto y vamos a meter otro
contenedor más
Ahí está ya tenemos la estructura hecha
ahora lo que hay que hacer es copiar
aquí este widget de llamada a la acción
y lo pegamos aquí dentro y lo vamos a
pegar de nuevo hay dos veces y ahora qué
vamos a hacer es copiar este contenedor
Bueno más bien duplicar lo duplicamos
así
Un par de veces duplicar duplicar y ya
lo tenemos replicado vale básicamente
metemos la misma bueno el mismo
contenido y estructura Solo que hace
falta cambiar lo que es el ancho para
eso lo que hay que hacer es ir aquí
a los ajustes de este contenedor y aquí
lo cambiamos a ancho completo después
aquí en porcentaje Pues en vez de
porcentaje utilizamos píxeles Aunque sí
que esto Me puedes utilizar porcentaje
ya como tú ves Vamos a ponerle 800 y
después si nos vamos aquí a este
contenedor el de ítem 4 que por cierto
le puedes cambiar el nombre
vamos a cambiar esto aquí y alineamos a
la derecha y Bueno pues ya esto ya Lo
tendríamos hecho ahora lo que hay que
hacer es darle un poquito de estilo
aquí
avanzado de relleno 20 píxeles
imagen o sea color de fondo este mismo
también le puedes Añadir aquí un borde
sombra de caja Bueno ya lo que tú veas
aquí continuó borde abajo más de tres
píxeles Bueno ya es cuestión de que
juegos aquí con lo que es el diseño vale
Bueno pues ya lo tendríamos hecho
básicamente una cosa que también podéis
hacer es que todo esto bueno os ocupe el
ancho completo de la página lo que es el
Mega menú para eso lo que tienes que
hacer es cambiar Aquí esta opción en vez
de caja a ancho completo Ahí está y aquí
este contenedor que le hemos puesto 800
píxeles lo cambiamos a porcentaje y le
ponemos 100% Ahí está y bueno como ves
Ya ahora ocupa Pues todo el ancho de la
página también lo puedes hacer así Si
quieres vale
Bueno pues de esta manera es como se
pueden crear mega menús con elementor
obviamente después lo que tendrías que
hacer es adaptarlo Pues también a lo que
es Tablet y móvil que bueno pues también
tiene sus ajustes sin estilo Bueno pues
tenéis aquí todas las típicas opciones
de los efectos
de alterar el menú la posición
Ahora aquí en estilo Pues también tiene
un montón de opciones para Bueno pues
ajustar la distancia en fin todas estas
cosillas que bueno pues para que la
puedas ajustar vale
colores al tener menú Bueno de hecho yo
ya aquí ya lo he ajustado un poco tengo
señal aquí como quedaría
ahí minimizar esto para poder hacer así
aquí es bueno como ves se ve bastante
bien en tablet esta parte de las
imágenes después Tenemos aquí este otro
que aquí quizás que me habría que
modificar esto un poco para que no esté
esto tan apretado vale
y móvil Pues si se ve bien porque está
todo a una columna quizás habría que
cambiar un poquito aquí los espacios
este contenedor si se ve un poquito
regular pero bueno Esto se puede
corregir fácil Simplemente hay que
cambiar aquí la dirección vamos a
cambiar la dirección a vertical y lo
tenemos así en una columna mucho mejor
vale como ves hay bastantes opciones
aquí para adaptar esto a todos los
dispositivos y que se vea bien Así que
no habría problema en ese aspecto y
Bueno hasta aquí el tutorial Espero que
te haya sido útil Dale me gusta
suscríbete y nos vemos en el próximo
vídeo adiós
[Música]
浏览更多相关视频
▶️ #14 QUE ES MEDIA QUERY??? 💻 Curso CSS
Curso de HTML y CSS | Clase 5 — Flexbox
Cómo Crear una PÁGINA WEB con Google Sites GRATIS (2024) Guía Completa
Curso Inkscape 2022 -Trabajar con nodos y curvas
Cómo crear una diapositiva sencilla | Presentaciones básicas en PowerPoint, Google, Keynote
Bloques de comando en Minecraft - conceptos básicos
5.0 / 5 (0 votes)