Una section, múltiples posibilidades que ponemos a la disposición desde este 2026 para mercado, en el que se incluyen muchas de las peticiones de edición/presentación de las sections de los últimos años.
Con el objetivo de facilitar la creación de contenidos y campañas dentro de la web, el equipo de Producto Digital ha desarrollado una section custom dentro de nuestro template que permite construir diferentes tipos de bloques sin necesidad de desarrollo adicional. Esta section puede utilizarse como section de texto, texto + imagen, hero, grid en formato carrusel, video + texto, icons + texto, pop up informativo o sección de features de producto. La idea es disponer de una base flexible que permita a los equipos de Marketing y E-commerce construir experiencias visuales adaptadas a cada campaña.
Para utilizar correctamente esta section, es importante seguir las especificaciones definidas en el WYS (What You See) por el departamento de Producto Digital. Desde la configuración general de la section se pueden controlar aspectos clave como la animación de entrada, el color de fondo, la creación de un slug para anclas de navegación o la separación entre cards. También se puede definir un classname CSS específico para personalizaciones puntuales y ajustar la visibilidad por dispositivo, permitiendo mostrar la section solo en móvil, tablet, desktop o en todos los dispositivos.
La section también permite configurar la estructura del layout. Es posible definir el número de columnas en escritorio y la cantidad de columnas en versión móvil, así como el porcentaje de caja visible en carruseles móviles, lo que permite mostrar parcialmente el siguiente slide para mejorar la navegación. Además, se puede activar el modo carrusel no solo en mobile sino también en desktop, junto con elementos de navegación como flechas o dots, incluyendo la posibilidad de personalizar el color de las flechas.
Otro de los elementos importantes de configuración es el control del espaciado y composición visual. Desde el panel de edición se pueden definir los padding de la section, incluyendo ajustes laterales específicos para desktop cuando el diseño lo requiere. Estas opciones permiten adaptar cada bloque a distintos tipos de página, desde una landing de campaña hasta una sección editorial dentro de la home o una página de colección.
A nivel de configuración por columna o bloque, cada card cuenta con controles propios. Se puede añadir un classname CSS específico para el bloque, definir el color del texto y el color de fondo de la card. También es posible activar un ratio específico para el asset, eligiendo entre formatos cuadrado (1:1), retrato (3:4) o vertical (9:16), especialmente útil para vídeos o contenidos diseñados para formatos más narrativos.
En cuanto a los assets multimedia, cada bloque permite integrar diferentes tipos de contenido. Se pueden utilizar vídeos de nuestra biblioteca con poster, con opciones para activar autoplay en loop sin audio dentro de la caja o bien habilitar la reproducción mediante clic con audio. También es posible utilizar imágenes estáticas como elemento visual principal del bloque.
El módulo de texto copy ofrece múltiples posibilidades de composición. Se pueden configurar título línea 1, título línea 2, descripción y texto de disclaimer, así como diferentes opciones de posicionamiento del contenido: texto sobre imagen, centrado horizontalmente o centrado tanto horizontal como verticalmente. También se puede activar un sombreado de texto para mejorar la legibilidad cuando el contenido se superpone sobre imágenes o vídeos.
Finalmente, la section permite integrar botones con enlace o pop ups. En caso de activar el pop up, se podrá seleccionar una página cuyo contenido se mostrará dentro de la ventana emergente. El texto del botón se edita desde la opción “Vincular etiqueta”, que también permite usarlo como botón estándar con enlace. Además, se pueden personalizar elementos como margen del botón, color del texto y color de fondo, permitiendo adaptar cada bloque a las necesidades de la campaña o del contenido editorial.
Algunos ejemplos de grids con esta section en diferentes lugares y presentaciones de nuestra Web:
