Tabla de contenidos
Un mega menú de restaurante es un amplio panel desplegable que coloca todo el menú de comida, información dietética, horarios de apertura y un botón de reserva en un solo lugar en lugar de enterrarlos con varios clics. Los comensales llegan queriendo ver comida, precios, horarios y una forma de reservar. Generalmente por teléfono. A menudo mientras decide entre usted y otro lugar.
Esta guía construye uno con Elementor y gratis Mega menú de complementos maestros. No se necesita Elementor Pro. Aquí está el resultado final. Hovering “Dishes” abre el menú completo del restaurante con categorías, precios, etiquetas dietéticas, especial de esta noche y un botón Reservar una mesa:
Si te gusta el estilo del mega menú del restaurante, puedes descargarlo e importarlo en el creador de widgets de complementos maestros. Luego podrá personalizar fácilmente el color del texto, la imagen, la URL, etc. según sus necesidades y usarlo en su mega menú en el sitio web de su restaurante.
Descarga el mega Menú del Restaurante
Qué debe contener un mega menú de restaurante
Antes de construir algo, decide qué te gana un lugar en el panel. El diseño que construimos en esta guía tiene cuatro zonas y cubren casi todos los restaurantes:
| Zona | Contenidos | Por qué está ahí |
|---|---|---|
| Barra lateral de categoría | Entrantes, Pasta y Risotto, Pizza al horno de leña, Red eléctrica y parrilla, Postres, Vino y bebidas | Dejemos que los comensales salten directamente a la sección que les importa |
| Rejilla para platos | Nombres de platos, descripciones breves, precios, etiquetas como Vegetariano, Picante, Chef's Pick | El contenido más buscado en cualquier sitio de restaurante « con información dietética integrada en las etiquetas |
| Tarjeta destacada | Especial de esta noche con foto, descripción y precio | Le da a la cocina un lugar para vender su mejor plato |
| Pie de página de acción | Reserva un botón de tabla, horario de apertura, dirección, menú completo enlace PDF | Convierte la visita en lugar de simplemente informarla |
Qué dejar de lado: su historia completa, menciones en la prensa y feeds sociales. Esos pertenecen el pie de página. Un panel de navegación sirve para llevar a la gente a alguna parte, no para contar la historia completa.
¿necesitas Elementor Pro para esto?
El widget de mega menú de No. Elementor se encuentra dentro de Elementor Pro, pero la ruta gratuita a continuación crea el mismo panel sin suscripción.
| Ruta | Costo | Compensación |
|---|---|---|
| Widget Elementor Pro Mega Menú | Licencia anual pagada | Requiere Pro en cada sitio que cree, además de habilitar funciones experimentales |
| Css personalizado/desplegable codificado a mano | Gratis | Frágil, difícil de editar entre cambios de menú, sin edición visual |
| Mega menú de complementos maestros | Gratis | Agrega un complemento; el panel está diseñado visualmente en Elementor como cualquier otra página |
Para que un restaurante de una sola ubicación actualice su menú varias veces al año, la extensión gratuita es suficiente. Un grupo más grande de múltiples ubicaciones que haga malabarismos con varios editores aún podría obtener valor del conjunto de herramientas más amplio de Pro, pero esa es una decisión sobre todo el sitio, no sobre el mega menú específicamente. Elementor documenta su flujo de trabajo del mega menú Pro aquí si quieres compararlo directamente.
Lo que necesitas
- Elementor (la versión gratuita está bien)
- Complementos maestros para Elementor, instalado y activo
- Páginas ya creadas para las secciones de su menú (por ahora pueden ser marcadores de posición)
Paso 1: habilite la extensión del mega menú
Los complementos maestros mantienen todos los widgets y extensiones detrás de un interruptor para que los no utilizados nunca se carguen. Ir a Complementos maestros → Configuración, abre el Extensiones pestaña y buscar Megamenú en el grupo de visualización. Active su palanca y haga clic Guardar cambios. Si no ve el interruptor, probablemente esté en una versión anterior del complemento, así que actualice primero.
Paso 2: Estructura el menú de WordPress y activa el mega menú
Ir a Apariencia → Menús y construye el esqueleto antes de tocar cualquier diseño. En esta compilación, el menú se llama Menú principal con cinco elementos: Inicio, Platos, Quiénes somos, Blog, Cuenta. “Plato” es el elemento que recibe el mega panel.
Primero acerte con la estructura. El mega panel está adjunto a un elemento del menú, por lo que reorganizarlo después significa rehacer el trabajo de diseño.
Con la extensión activa, a Mega menú de complementos maestros el cuadro aparece en la columna izquierda de la pantalla Menús. Cambia su Habilitar megamenú seguir alternando. En el momento en que lo hagas, un morado Maestro Mega la insignia aparece junto a cada elemento del menú. Esa insignia es donde viven las mega opciones del menú de cada elemento.
Paso 3: active el mega menú para el artículo de sus platos
Haga clic en el Maestro Mega insignia en el elemento “Plato”. Se abre una ventana emergente de configuración con cuatro pestañas: Contenido, Configuración, Icono e Insignia.
- En el Contenido pestaña, voltea el Megamenú habilitado cambie a SÍ. El botón Editar contenido de Megamenu se ilumina.
- En el Ajustes tab, establece el tamaño y el comportamiento del panel. Usamos Ancho personalizado a 1000px, lo suficientemente ancho como para una rejilla para platos más una tarjeta destacada. El ancho completo también está ahí si su diseño necesita toda la pantalla.
- Conjunto Menú móvil al contenido del constructor, Efecto disparador flotar y Transición desvanecerse. Las pestañas Icono e Insignia son extras opcionales (una insignia “Nueva” en un menú de temporada, por ejemplo).
- Hacer clic Guardar.
Usted configura el mega ancho del menú desde la pestaña Configuración: Ancho completo, Predeterminado o Ancho personalizado como nuestro 1000px. La misma pestaña contiene la fuente del menú móvil, el efecto activador (pasar el cursor o hacer clic), la animación de transición y alterna la etiqueta y descripción del menú:
Paso 4: Diseñe el panel en Elementor
Vuelva a la pestaña Contenido, haga clic Editar contenido de Megamenu. El panel se abre en el editor Elementor normal, por lo que lo diseñas como cualquier otra página. Construya las cuatro zonas de la tabla anterior:
- Strip de captaj: nombre del restaurante más una breve nota de cocina (“Cocina abierta hasta las 23:00 horas · Horno de leña cocido diariamente a las 4”). La nota responde en voz baja al “¿están abiertos?” pregunta sin que nadie cace durante horas.
- Bară laterală de categorie: Entrantes, Pasta y Risotto, Pizza al horno de leña, Red eléctrica y parrilla, Postres, Vino y Bebidas, cada uno con un recuento de platos.
- Cuadrícula para platos: nombre, descripción de una línea, precio y etiquetas como Vegetarian, Spicy o Chef's Pick. Las etiquetas manejan el filtrado dietético sin una columna separada.
- Carta destacada y pie de página de acción: especial de esta noche con foto y precio, a Reserva un botón de mesa, horario y dirección de apertura, y un enlace “Descargar menú completo (PDF)”. Si prefieres mostrar horarios de apertura estructurados, el Widget de horario comercial los mantiene editables en un solo lugar.
El nombre, el precio y la etiqueta de cada plato se pueden editar desde el panel Elementor a la izquierda. Actualizar el menú más adelante es una edición de contenido, no un trabajo de diseño. Publique la plantilla cuando haya terminado y cierre el editor.
Paso 5: coloque el menú en su encabezado
El mega menú necesita un encabezado para vivir. Si el encabezado de su tema ya muestra el menú principal, puede omitir este paso, pero crear el encabezado con complementos maestros mantiene todo en un solo editor. El Theme Builder es gratuito, a diferencia de Elementor Pro.
- Ir a Complementos maestros → Creador de temas y haga clic Agregar nueva plantilla.
- Establezca el tipo de plantilla en Encabezado, cambia Activación on y bajo las condiciones eligen Incluir → Sitio completo.
- Hacer clic Editar con Elementor.
Dentro de la plantilla de encabezado, arrastre el Menú de navegación widget y elige Menú principal en Seleccionar menú. Establezca el diseño en Horizontal y alinéelo como lo requiera el diseño de su encabezado. El elemento “Peces” lleva consigo su mega panel automáticamente.
Paso 6: Pase el cursor y verifique el resultado
Publica el encabezado y abre tu sitio. Pase el cursor “Peces” y el menú completo del restaurante se muestra en la página: categorías a la izquierda, platos con precios en el medio, especial de esta noche y el botón Reservar una mesa a la derecha.
Haga clic en cada categoría para asegurarse de que el plato cuente y los enlaces se comporten, luego revise el panel con la página detrás. Un panel oscuro sobre un héroe oscuro necesita un borde o sombra para que sus bordes permanezcan visibles.
Paso 7: Mantenlo rápido
Las imágenes del menú se cargan en cada página de su sitio, por lo que un mega menú descuidado ralentiza todo el sitio web del restaurante. Los sitios de restaurantes lentos pierden comensales que comparan opciones sobre datos móviles.
- Utilice una foto en el panel (el especial destacado), no una galería.
- Comprimirlo y servir WebP; dimensionarlo según el espacio que realmente ocupa.
- Escribe texto alternativo real (“pizza margarita a leña”). Ayuda a la accesibilidad y la búsqueda de imágenes.
- Consulta tu general Velocidad de página del elementor después de agregar el menú, no antes.
Paso 8: haz que funcione en teléfonos
La mayor parte del tráfico de restaurantes es móvil, frecuentemente porque las personas que están afuera deciden si entran. Por eso nos ponemos Menú móvil para crear contenido nuevamente en el Paso 3. El mismo panel que diseñó sirve para el diseño del teléfono en lugar de una lista de enlaces simple. Un panel ancho todavía tiene que colapsar con gracia:
- Oculte la foto del especial en el móvil, mantenga el botón Reservar una tabla. Los controles de visibilidad responsivos de Elementor manejan esto por elemento.
- Coloque los enlaces de categoría primero en el orden de apilamiento; eso es lo que buscaban los visitantes telefónicos.
- Mantenga accesible el botón “Reservar una tabla” sin desplazarse mucho.
- Prueba en un teléfono real. La vista previa del editor se aproxima al comportamiento táctil; no lo reproduce.
Si el punto de interrupción predeterminado de la tableta corta su panel de manera incómoda, configure el suyo propio con el archivo gratuito Extensión de puntos de interrupción personalizados.
Opcional: muestra artículos de temporada automáticamente
Los restaurantes ofrecen ofertas con plazos determinados constantemente: almuerzos especiales, menús festivos, happy hour. Con el gratis Extensión de condiciones de visualización puede establecer un rango de fechas o una regla del día de la semana en un elemento del panel para que el enlace del menú navideño aparezca en diciembre y se elimine en enero, sin que nadie edite el sitio a medianoche.
Preguntas frecuentes
¿cómo creo un mega menú de restaurante en Elementor?
Habilite la extensión gratuita Master Addons Mega Menu, cree su menú en Apariencia > Menús, active Habilitar Mega Menu, luego haga clic en la insignia Master Mega en el elemento Platos y configure Megamenu habilitado en sí. Haga clic en Editar contenido de Megamenu y diseñe el panel en Elementor: categorías de menú, platos con precios y etiquetas dietéticas, un especial destacado y un botón Reservar una tabla. Finalmente, muestra el menú con el widget Menú de navegación en tu encabezado.
¿necesito Elementor Pro para un mega menú de restaurante?
El widget de mega menú de No. Elementor es una función Pro, pero la extensión gratuita Master Addons Mega Menu agrega la misma capacidad para liberar Elementor y diseñas el panel desplegable en el editor Elementor normal.
¿Qué debe incluir el menú del sitio web de un restaurante?
Categorías del menú de comida como entrantes, platos principales, postres y bebidas; precios de platos con etiquetas dietéticas como vegetariano, vegano y picante; horario y dirección de apertura; y una acción clara de reserva o pedido en línea. Deje su historia Acerca de, menciones de prensa y feeds sociales para el pie de página.
¿un mega menú ralentizará el sitio web de mi restaurante?
Puede hacerlo, porque las imágenes del menú se cargan en cada página. Utilice una única foto WebP comprimida dimensionada para su espacio de visualización en lugar de una galería, escriba texto alternativo real y vuelva a verificar la velocidad de su página después de agregar el menú. Hecho con cuidado, el impacto es insignificante.
¿cómo hago que un mega menú de restaurante funcione en el móvil?
Configure la opción Menú móvil en Contenido del generador para que los teléfonos obtengan el panel diseñado, oculten la foto del plato en el móvil mientras mantienen el botón de reserva, apilen primero los enlaces de categorías y mantengan el botón Reservar una tabla accesible sin un desplazamiento prolongado. Pruebe siempre en un teléfono real en lugar de en la vista previa del editor.
¿Puedo mostrar elementos del menú de temporada solo durante determinadas fechas?
Sí. La extensión gratuita Condiciones de visualización le permite establecer un rango de fechas o una regla del día de la semana en cualquier elemento dentro del panel del mega menú, por lo que aparece un enlace de menú festivo y desaparece según lo previsto sin que nadie edite el sitio.
¿max Mega Menu es gratuito y es una buena opción para un restaurante?
Max Mega Menu tiene una versión gratuita en el repositorio de WordPress más un complemento Pro pago. Es un complemento de menú independiente, no creado específicamente para Elementor, por lo que los paneles se editan en su propia interfaz en lugar del editor Elementor que ya utiliza para las páginas. Para una construcción de restaurante totalmente de Elementor, Master Addons Mega Menu mantiene todo el panel en un solo editor.
Lectura relacionada
