Conoce más sobre nosotros
C/ Benasque, Nº2, 3º Barbastro (España)
clientes@itechnova.es
Ph: +34 611 37 31 94
Back

Editar el menú principal de tu tienda

Es fácil editar o crear un menú desde nuestra tienda. Los menús pueden ser una excelente manera de mostrar categorías anidadas y productos destacados en tiendas más grandes.

Utiliza la funcionalidad integrada para crear tu menú

Esta plataforma tiene herramientas integradas para ayudarte a crear un menú. Una pantalla dedicada dentro de la administración solo tienes que dirigirte a la sección Apariencia > Menús  que se encuentra en el menú izquierdo.

Esta pantalla se divide en varias secciones diferentes. En la parte superior, encontrarás la opción de seleccionar un menú actual o crear uno nuevo: Si decides crear un nuevo menú, solo dale un nombre y asígnalo a una sección de la página en Ajustes del menú. Una vez que estés listo, haz clic en el botón Crear menú. La pantalla se actualizará y mostrará que estás en tu nuevo menú. A continuación, echa un vistazo a la parte izquierda de la pantalla.

Esta pantalla enumera todas las entradas, páginas, taxonomías y otros activos enlazables de tu sitio. Construye tu menú marcando las casillas de la izquierda y haciendo clic en el botón Añadir al menú. Eso los moverá a la sección central de la pantalla de Menús y podras arrastrar y soltar los elementos del menú en el orden que desees.

Anide las subcategorías debajo de ella, como en la captura de pantalla anterior. Si desea convertirlo en un mega down, solo agregue la clase de ancho completo: full-width; al campo Clases de CSS. En este caso, lo estamos agregando a la categoría Hombres (Men) y cada enlace de nivel superior estará en su propia columna.


Agregue productos al menú

También podemos agregar productos destacados al menú desplegable: esta es una buena manera de mostrar ciertos artículos dentro de una categoría de nivel superior.

Esto se hace agregando primero un enlace personalizado al menú.

Una vez que el elemento se encuentre dentro de su menú, reemplace el texto del enlace con el con el número identificador del producto (ID) y el campo Clases CSS con: menu-item-product.

Puede dejar la URL con el símbolo #; se verá así:

El número identificación del producto es única para cada producto. Para averiguar qué identificación debe tener su producto destacado, vaya a la sección Productos y desplace el mouse sobre un artículo, y se revelará la identificación. Use esta identificación en la etiqueta de su menú y el elemento debería aparecer dentro del menú desplegable.


Agregue imágenes al menú

Ahora, agregue un enlace personalizado al menú. Puede llamarlo Image Feature para que sepa qué es, pero no importa, este texto no se mostrara en la web.

Cuando edita este elemento del menú, debe hacer dos cosas:

Cambie el campo Clases de CSS a menu-item-image

Y agregue este código de HTML en el campo Descripción.

<img src="https://store.itechnova.us/wp-content/uploads/2022/08/menu_returns01-1.png" alt="" />

Simplemente reemplace la URL de la imagen con la Url de la imagen que desea mostrar y ya está todo listo.

Si desea mostrar algún texto debajo, simplemente inclúyalo después.

<img src="https://store.itechnova.us/wp-content/uploads/2022/08/menu_returns01-1.png" alt="" /> Algún texto aquí 

Información extra del menú móvil

Hay un menú adicional que puedes mostrar solo en la versión móvil debajo del menú principal. Esto es en realidad un widget al que puedes llegar en la sección del menú izquierdo. Apariencia > Widgets > Mobile Extra  

Está hecho de esa manera para tener un poco más de flexibilidad. Algunas personas quieren mostrar texto adicional, tener enlaces de números de teléfono, etc. Un widget permite esto.

Entonces, para editarlo, simplemente agregue un widget de texto al área de widgets de Mobile Extra si aún no hay uno. Los encabezados son <h4> y luego los enlaces están dentro de una lista desordenada.


Otras clases

  • Dentro del menú desplegable, para agregar una línea divisoria, use la clase divider
  • Para resaltar un enlace dentro del menú desplegable la clase highlight
  • Dentro del menú desplegable, para crear un encabezado dentro de una columna existente, use la clase heading
  • Para crear una pequeña burbuja de texto, envuélvela en etiquetas strong, así. <strong>Nuevo</strong>
  • Si desea expandir inicialmente un área de menú móvil, agregue esta clase adicionaldropdown-open
  • Para agregar un botón a la barra de menú principal, similar a la demostración del tema, agregue esta clase al enlace: botón-menú
itechnova
itechnova
https://ofertas.itechnova.es

Dejar un comentario

GDPR Cookie Consent with Real Cookie Banner