Background

Documentación Woocommerce

Crear mega menú (Woodmart Theme)

VOLVER

Todos los menús aplicados en el sitio se crean en el Panel de control -> Apariencia -> Menú. Manual de WordPress: https://codex.wordpress.org/WordPress_Menu_User_Guide proporciona instrucciones detalladas sobre cómo crear / editar / guardar menús. El theme WoodMart proporciona dos ubicaciones de menú: Menú principal y Menú móvil. Uno y el mismo menú pueden ser ambos: Principal y Móvil. Además, el tema WoodMart ofrece varias opciones para mostrar el menú en cualquier lugar del sitio.

WoodMart Theme ofrece las opciones que amplían las funciones predeterminadas del menú de WordPress, lo que hace que el menú sea más flexible y potente mediante bloques de megamenú. Los bloques Megamenu son plantillas que se crean con el editor WP Bakery, que contienen elementos de menú adicionales para hacer que el submenú esté mejor organizado y se vea mejor. Además de los elementos de menú adicionales, los bloques de megamenú pueden contener imágenes, texto y otros elementos gráficos del generador de páginas WP Bakery.

Para crear un megamenú es necesario crear un bloque HTML por separado para cada elemento del menú. Panel de control -> Bloques HTML / HTML blocks -> Agregar nuevo.

Tan pronto como los bloques del mega menú estén listos, se pueden agregar a los elementos del menú en Apariencia -> Menú -> Seleccionar menú -> ingresar elemento del menú -> Menú desplegable Bloque HTML en los campos personalizados [para el tema] que aparecen solo después de que el menú ha sido guardado. En primer lugar, es necesario establecer "Ancho completo" o "Tamaño de conjunto" en la opción Diseño para que esté disponible el menú desplegable Bloque HTML.

Campos personalizados [para el tema] en el elemento del menú:

Diseño

Esta opción determinaría el ancho del bloque de mega menú: Predeterminado, Ancho completo y Tamaño de conjunto;
Predeterminado: el menú desplegable tendrá el ancho predeterminado y no aparecerá ninguna opción de megabloque;
Ancho completo: el bloque tendrá el ancho completo del contenedor del menú alineado en el centro y la opción de elegir un bloque HTML como un mega bloque de menú.
Set-size: permite configurar el tamaño personalizado del bloque y la opción de elegir el bloque HTML como un megabloque de menú.

Bloque HTML para el menú desplegable

Este menú desplegable aparece, siempre que se elija "Ancho completo" o "Establecer tamaño" en el menú desplegable Diseño y presente todos los bloques HTML existentes para seleccionar como un bloque de megamenú

Cargar menú desplegable HTML con AJAX.
Opción para cargar bloques HTML con AJAX,

Nombre del icono: Este archivo solo admite iconos de la fuente proporcionada de la fuente FontAwesome; el campo requiere insertar la palabra clave desde el icono FontAwesome. Por ejemplo, el código del icono de inicio se ve así:



es necesario extraer la parte que identifica el ícono, que es fas fa-home, e insertarla en el campo.

Evento de abrir con el mouse: permite establecer un evento de desplazamiento o clic en el elemento del menú, en consecuencia, el bloque de menú Mega aparecerá al pasar el mouse o al hacer clic;

Texto de etiqueta: opción para agregar información sobre herramientas personalizada al elemento del menú;

Menú desplegable de color de la etiqueta: la opción para establecer el color de la información sobre herramientas en el elemento del menú;

Esquema de color del texto desplegable: oscuro o blanco. El esquema de color oscuro garantiza el texto negro y el fondo claro. El esquema de color claro garantiza un texto blanco y un fondo oscuro del bloque de mega menús;

Ancla de una página: se puede utilizar el menú de navegación de una página. Si está habilitado, es necesario establecer el enlace para que este elemento sea así: http://su_site.cl/home/#anchor_id donde anchor_id será la ID de la FILA en su página de inicio;

Botón "Llamado a la acción": permite presentar el elemento del menú como un botón;

Se proporciona la opción Abrir enlace en nueva pestaña;

Relación de enlaces XFN: https://codex.wordpress.org/Defining_Relationships_with_XFN

Las clases CSS (opcional) permiten insertar una clase y asignar CSS personalizado, además de insertar la clase woodmart-open-newsletter asignaría un elemento de menú al tema Promo Popup