Multicolumna

Crea cuadrículas flexibles de contenido mixto que pueden convertirse en una presentación de diapositivas deslizable en dispositivos móviles.

Todas las secciones Documentación de referencia

Enlaces destacados

Videos útiles

Vídeo de Shopify Academy: personalización de tu tienda

Usa Multicolumna para crear diseños flexibles de contenido mixto en una sola sección. Puedes combinar texto, contenido multimedia, contenido promocional, tarjetas y bloques de utilidad; después, controla cuántas columnas aparecen en cada dispositivo y si los visitantes en dispositivos móviles ven una presentación de diapositivas deslizable en lugar de una cuadrícula estándar. Para obtener una visión más amplia de cómo funcionan las secciones y los bloques en el editor de temas, consulta la documentación de Shopify sobre secciones y bloques

Ajustes principales

Estos ajustes definen el diseño general antes de que perfecciones cada bloque. Empieza aquí para decidir si la sección debe sentirse más densa, espaciosa o interactiva.

Diseño y alineación

Usa la alineación del contenido para controlar cómo se colocan los bloques dentro de cada fila cuando tienen distintas alturas. Esto es especialmente importante cuando combinas bloques de texto breves con banners, imágenes o vídeos más altos.

El número de columnas para ordenadores, tabletas y dispositivos móviles define la cuadrícula para cada tamaño de pantalla. La tableta puede heredar el valor del ordenador cuando se deja en 0, lo que resulta útil si quieres reducir los ajustes específicos para cada dispositivo.

Comportamiento de la presentación de diapositivas móvil

Activa Show as slideshow on mobile cuando la sección parezca demasiado alta o abigarrada en pantallas pequeñas. Esto cambia la experiencia móvil de una cuadrícula que se recorre visualmente a una secuencia deslizable.

Si activas la presentación de diapositivas móvil, revisa cuidadosamente el orden de los bloques. Los visitantes experimentarán la sección de una diapositiva a la vez, en lugar de ver todo el diseño de una sola vez.

Filas de igual altura

Usa Stretch content vertically cuando quieras una cuadrícula más limpia y uniforme. Los bloques se expandirán para coincidir con el bloque más alto de la misma fila, lo que funciona especialmente bien para tarjetas, testimonios y banners.

Déjalo desactivado si quieres que cada bloque conserve su altura natural.

Ajustes de la presentación de diapositivas

Cuando el comportamiento de presentación de diapositivas está activo, estos ajustes controlan cómo los visitantes recorren el contenido. Para obtener más información, consulta la referencia de controles de la presentación de diapositivas.

El estilo de animación tiene el mayor impacto visual. El estilo predeterminado mantiene un diseño más parecido a un carrusel, mientras que Fade crea una presentación de una diapositiva a la vez.

La reproducción automática, el retraso, el bucle y la pausa al pasar el cursor te ayudan a decidir si la sección debe parecerse más a un deslizador promocional pasivo o a una galería de contenido manual. La pausa al pasar el cursor solo se aplica en ordenadores, por lo que la reproducción automática debe seguir siendo cómoda en dispositivos táctiles.

La posición de navegación, los controles de navegación y los ajustes de paginación ayudan a los visitantes a entender que hay más contenido disponible. La vista previa de las siguientes diapositivas resulta útil cuando quieres indicar que hay contenido adicional, pero es menos adecuada para diseños más compactos o centrados.

Ajustes de color

Este grupo te permite sustituir los colores del texto y los iconos de la sección sin cambiar el estilo general del tema. Es especialmente útil cuando el fondo de la sección o la combinación de bloques necesita un contraste diferente para mantener la legibilidad.

Si los bloques individuales también usan sus propios ajustes de color, intenta establecer una jerarquía clara. Los colores de nivel de sección funcionan mejor cuando toda la sección debe compartir un tono coherente.

Tipos de bloque admitidos

Banner
Blog post
Breadcrumbs
Contact form
Heading
Image
Product
Rich text
Testimonial
Video

Usa los bloques Banner para promociones, mensajes destacados o llamadas a la acción visuales. Admiten su propio contenido multimedia de fondo, contenido en primer plano, una imagen opcional en primer plano y extensiones de columna personalizadas.

Consulta el bloque Banner para obtener más información sobre los bloques.

Usa extensiones más amplias cuando el banner incluya contenido multimedia y texto.
Las relaciones de aspecto fijas ayudan a crear una cuadrícula más ordenada.
Los estilos de enlace de bloque completo funcionan mejor cuando todo el banner debe actuar como un único objetivo de clic.

Blog post y Product

Estos bloques añaden tarjetas seleccionadas de artículos y productos al diseño. Ambos admiten extensiones personalizadas y estilos de tarjeta a nivel de bloque, por lo que funcionan bien cuando quieres una sección editorial y de merchandising combinada.

Consulta el bloque Blog post y el bloque Product para obtener información de configuración.

Mantén la coherencia de los estilos de las tarjetas cuando quieras que la sección se perciba como una sola colección.
Usa extensiones más grandes de forma selectiva para destacar un único elemento.
En el modo de presentación de diapositivas móvil, el orden de los bloques importa más que su anchura.

Image y Video

Usa bloques multimedia para añadir puntos de anclaje visuales entre contenido con mucho texto o muchas tarjetas. Ambos admiten relaciones de aspecto, subtítulos, superposiciones, controles de alineación y extensiones personalizadas.

Consulta el bloque Image y el bloque Video para conocer las opciones específicas de contenido multimedia.

Haz coincidir las relaciones de aspecto de los bloques multimedia cercanos para conseguir un diseño más limpio.
Usa superposiciones solo cuando mejoren la legibilidad o la coherencia.
Añade una imagen de póster cuando un vídeo alojado necesite un primer fotograma más impactante.

Rich text y Heading

Estos bloques ayudan a estructurar diseños más largos e introducir grupos de contenido. Úsalos para dividir cuadrículas densas, añadir contenido editorial breve o colocar llamadas a la acción específicas dentro de la sección.

Consulta el bloque Rich text para conocer las opciones de formato del contenido.

Usa bloques Heading para crear una estructura interna en secciones más largas.
Usa los botones de forma selectiva para que las acciones no compitan entre sí.
Evita usar varios encabezados H1 en la misma página.

Testimonial

Los bloques Testimonial combinan contenido de citas con contexto opcional del producto y contenido multimedia de apoyo opcional. Funcionan bien cuando quieres incluir pruebas sociales en un diseño promocional mixto.

Consulta el bloque Testimonial para conocer los ajustes de citas y contenido multimedia.

Mantén las citas breves para que el bloque conserve el equilibrio.
Enlaza un producto relacionado cuando el testimonio respalde un artículo específico.
Si añades un vídeo, mantén los bloques cercanos visualmente más sencillos.

Contact form y Breadcrumbs

Estos bloques de utilidad permiten que Multicolumna gestione algo más que contenido promocional. Usa Contact form para crear diseños flexibles de páginas de destino y Breadcrumbs cuando necesites contexto de navegación dentro de una composición personalizada.

Consulta el bloque Contact form y el bloque Breadcrumbs para conocer las opciones de los bloques de utilidad.

Da a los bloques funcionales suficiente anchura para que sean fáciles de usar.
Coloca las migas de pan cerca del inicio del flujo de contenido.
Evita mezclar demasiados bloques de utilidad en una sección pequeña.

Ajustes estándar de sección

Ajustes de encabezado

Usa los Ajustes de encabezado compartidos para introducir la sección con un encabezado, un subtítulo, texto de apoyo, un icono y un botón opcional. En Multicolumna, esto resulta especialmente útil cuando el diseño combina varios tipos de contenido y necesita una introducción o acción clara.

Ajustes de espaciado

Usa los Ajustes de espaciado compartidos para controlar el espacio por encima y por debajo de la sección. Aumenta el espaciado cuando el diseño necesite más aire y redúcelo cuando la página deba sentirse más densa.

Ajustes de fondo de sección

Usa los Ajustes de fondo de sección compartidos para añadir color, degradado, imagen o vídeo detrás de toda la sección. Los fondos intensos pueden cambiar el contraste y el espaciado percibido, así que revísalos junto con los colores del texto y de los bloques. Si necesitas orientación de configuración en el editor de temas, consulta la documentación de Shopify sobre la personalización de secciones

Ajustes de separador

Usa los Ajustes de separador compartidos para añadir una línea encima o debajo de la sección. Esto resulta útil cuando Multicolumna se encuentra entre secciones visualmente similares y necesita un límite más claro.

Ajustes de visibilidad

Usa los Ajustes de visibilidad compartidos para mostrar u ocultar la sección según el dispositivo. Esto resulta útil cuando quieres un diseño para pantallas grandes y una configuración de sección diferente para dispositivos móviles.

Ajustes de ancho

Usa los Ajustes de ancho compartidos para controlar tanto el ancho del contenido como el ancho exterior de la sección. En Multicolumna, los ajustes de ancho afectan considerablemente a la densidad de la cuadrícula, especialmente cuando usas muchas columnas o añades un fondo de sección.

Notas de uso

Revisa la sección después de añadir bloques. Los bloques nuevos pueden cambiar el equilibrio y la apariencia de todo el diseño, así que vuelve a comprobar la composición después de cada cambio importante de contenido.
Prueba las experiencias en ambos dispositivos. Los controles para ordenadores y dispositivos móviles pueden cambiar el diseño, la alineación y la navegación, por lo que debes revisar la sección en ambos tamaños antes de publicar.
Usa las anulaciones de forma intencionada. Los valores en blanco o con el estilo predeterminado suelen conservar el estilo alternativo del tema, mientras que los colores, degradados o contenidos multimedia independientes hacen que la sección sea más autónoma.
Comprueba la legibilidad del contenido multimedia en cada dispositivo. Cuando el contenido multimedia para ordenadores y dispositivos móviles se configura por separado, el recorte y las superposiciones pueden cambiar, así que confirma que los subtítulos, los puntos focales y el texto sigan siendo claros.
Mantén los formularios fáciles de leer. Si usas un bloque de formulario de contacto, asegúrate de que los mensajes de éxito y error sigan siendo legibles sobre el contenido circundante.
Considera el modo de presentación de diapositivas móvil como una secuencia. Organiza los bloques en el orden en que los visitantes deban deslizarse por ellos, ya que el diseño dejará de experimentarse como una cuadrícula completa.

Align v2.0