Ir al contenido
GloboGlobo Docs
Instalar la app
Español

Diseño Masonry y Menú especial

Apila ordenadamente en columnas bloques de distintas alturas, o muestra una lista de categorías con un panel para cada una.

Guía práctica Pro Navigation 3 min de lectura

En un mega menú normal, cada bloque tiene su propia columna, así que una lista de enlaces corta deja un hueco debajo. Masonry agrupa varios bloques en una columna para que se apilen; por ejemplo, dos listas cortas de marcas que comparten la primera columna.

Plantillas

Ambas están en el grupo Menú especial de Seleccionar plantilla.

Diseño en mosaico
Cuatro columnas (bloques Grupo de elementos (diseño Masonry)) con listas de enlaces apiladas dentro de cada columna.
Menú especial
Una lista de categorías a la izquierda; cada categoría tiene su propio panel de listas de enlaces e imágenes a la derecha, como en los grandes menús de marketplaces.

Empezar con la plantilla Diseño en mosaico

  1. Agrega la plantilla

    En el árbol Elementos del editor, haz clic en Agregar submenú bajo un elemento de primer nivel. Apunta a Menú especial (1) y haz clic en Seleccionar en Diseño en mosaico (2).

    (1) Apunta al grupo Menú especial, (2) elige Diseño en mosaico

  2. Edita el contenido de ejemplo

    La plantilla agrega 4 bloques Grupo de elementos (diseño Masonry) con un ancho del 25%, con listas de enlaces dentro. Pasa el cursor sobre cada encabezado o enlace, haz clic en Editar elemento y cambia su Título y su Enlace.

  3. Agrega o quita bloques en una columna

    Dentro de un grupo, haz clic en Agregar bloque para apilar otro bloque, como una lista de enlaces o una imagen. Para quitar uno, pasa el cursor sobre él y haz clic en Eliminar elemento.

  4. Guarda y publica

    Haz clic en Guardar y luego en Publicar.

Crear Masonry desde un mega menú en blanco

  1. Agrega un mega menú en blanco

    Haz clic en Agregar submenú, apunta a Mega menú y haz clic en Seleccionar en Blanco. También sirve un mega menú existente.

  2. Agrega un Grupo de elementos por columna

    Haz clic en Agregar bloque, elige Multibloque y selecciona Grupo de elementos (diseño Masonry); cada grupo es una columna. En el árbol Elementos aparece como Grupo de elementos (diseño de cuadrícula tipo masonry).

    (1) Elige una pestaña, (2) pasa el cursor sobre un diseño y haz clic en Seleccionar.

  3. Define el ancho de los grupos

    Un grupo nuevo tiene un ancho del 50%. Define el Ancho de cada grupo para que las columnas quepan en una fila; por ejemplo, 25% para 4 columnas o 33.33% para 3.

  4. Rellena cada grupo

    Dentro de cada grupo, haz clic en Agregar bloque y agrega los bloques de esa columna. Define el Ancho de cada bloque interior en 100% para que se apilen en lugar de colocarse uno al lado del otro.

  5. Guarda y publica

    Haz clic en Guardar y luego en Publicar.

Usar la plantilla Menú especial

  1. Agrega la plantilla

    Haz clic en Agregar submenú, apunta a Menú especial y haz clic en Seleccionar en la plantilla Menú especial.

    (1) Apunta al grupo Menú especial, (2) elige Diseño en mosaico

  2. Edita las categorías y los paneles

    Cada categoría de la izquierda es una pestaña: renómbrala y rellena su panel con Agregar bloque. Consulta Menú con pestañas.

  3. Guarda y publica

    Haz clic en Guardar y luego en Publicar.

Ambas plantillas se abren en un panel de mega menú, así que la sección Submenú del elemento principal define el ancho, la alineación y el fondo del panel. Consulta Diseño del panel del mega menú.

Solución de problemas

Los bloques se colocan uno al lado del otro en lugar de apilarse

Comprueba en el árbol Elementos que los bloques interiores estén dentro de un Grupo de elementos (diseño Masonry) y que su Ancho sea 100%.

Los grupos pasan a una segunda fila

Los anchos de los grupos suman más del 100%. Redúcelos para que quepan en una fila.

¿Te ha sido útil?

Informar de un problema