Bloques de contenido

Los bloques son los elementos que componen tus páginas. Puedes combinar distintos tipos de bloques para crear diseños personalizados sin necesidad de código.

Gestionar bloques

Agregar un bloque

Desde el editor de página, en la barra lateral oprime Agregar nuevo bloque
Selecciona el tipo de bloque (texto, imagen, colección, video, etc.)
Configura las opciones del bloque
Oprime Guardar

Editar un bloque

En la barra lateral, selecciona el bloque que deseas editar. Se mostrarán sus campos de configuración. Realiza los cambios y oprime Guardar.

Reordenar bloques

Arrastra el ícono de manija junto al nombre del bloque para cambiar su posición en la página.

Ocultar o mostrar un bloque

Oprime el ícono de ojo junto al bloque para ocultarlo o mostrarlo. Los bloques ocultos no son visibles para tus clientes pero se mantienen guardados. Útil para desactivar temporalmente un elemento sin eliminarlo.

Eliminar un bloque

Selecciona el bloque en la barra lateral y oprime Eliminar dentro de su configuración.

Advertencia: Esta acción es irreversible. Si no estás seguro, considera ocultar el bloque en lugar de eliminarlo.

Tipos de bloque disponibles

Colección destacada: Muestra una colección específica de productos que quieras resaltar, facilitando que tus clientes la encuentren rápidamente.
Categoría destacada: Muestra una categoría específica de productos que quieras resaltar.
Banner de imagen: Agrega un banner visual atractivo para destacar promociones, eventos o mensajes clave.
Producto destacado: Resalta un producto individual para atraer la atención de tus visitantes.
Listado de colecciones: Muestra varias colecciones de productos en un solo lugar. Cada colección debe tener una imagen asignada. Consulta Agregar imagen a colección.
Listado de categorías: Muestra varias categorías en un solo lugar. Cada categoría debe tener una imagen asignada. Consulta Agregar imagen a categoría o subcategoría.
Texto: Añade texto informativo o persuasivo para comunicar mensajes importantes.
Imagen y texto: Combina una imagen con texto para crear una presentación visualmente atractiva.
Carrusel: Muestra varias diapositivas, ideal para resaltar contenido, ofertas, categorías o colecciones.
Video: Integra videos para presentar productos, tutoriales o testimonios.
Código HTML: Personaliza tu contenido utilizando código HTML para añadir funcionalidades o diseño específico.
Newsletter: Añade un formulario para que los clientes se suscriban a tu boletín informativo.
Blog: Muestra tus artículos más recientes por categoría y dirige a los visitantes a tu blog.
Botón: Agrega botones que dirijan a los clientes a acciones específicas, como "Comprar ahora" o "Ver más".

Configuración de cada bloque

Cada bloque tiene opciones de configuración específicas. A continuación se detallan las opciones de cada uno:

Colección destacada

Título de colección: Agrega un encabezado para la colección a mostrar
Descripción: Contenido adicional referente a la colección
Seleccionar colección: Elige la colección que deseas destacar
Número de productos: Define cuántos productos mostrar
Habilitar carrusel: Muestra los productos en carrusel en vez de cuadrícula
Relleno superior/inferior: Ajusta el espacio por encima y debajo
Color de fondo: Selecciona el color de fondo para el bloque

Categoría destacada

Título de categoría: Agrega un encabezado para la categoría a mostrar
Descripción: Contenido adicional referente a la categoría
Seleccionar categoría: Elige la categoría que deseas destacar
Número de productos: Define cuántos productos mostrar
Habilitar carrusel: Muestra los productos en carrusel en vez de cuadrícula
Relleno superior/inferior: Ajusta el espacio por encima y debajo
Color de fondo: Selecciona el color de fondo para el bloque

Banner de imagen

Seleccionar imagen: Sube una imagen en versión de escritorio y móvil que funcionará como fondo
Texto en el banner: Agrega un mensaje que se superponga a la imagen
Cuerpo de banner: Texto adicional que quieras incluir
Posición de contenido: Selecciona en qué posición del banner se muestra el contenido
Color del texto: Selecciona un color que contraste bien con la imagen
Botón de acción: Incluye un botón con texto y un enlace
Mostrar contenedor: Permite que el botón se incluya dentro de un contenedor con características específicas
Relleno superior/inferior: Configura el espacio vacío encima y debajo del banner
Color de fondo: Selecciona el color de fondo para el bloque

Producto destacado

Seleccionar producto: Elige un producto específico para destacar
Foto: Selecciona el tamaño de la imagen del producto y la posición
Relleno superior/inferior: Ajusta el espacio por encima y debajo
Color de fondo: Selecciona el color de fondo para el bloque

Listado de colecciones

Colecciones a mostrar: Selecciona las colecciones que deseas incluir (deben tener imagen asignada)
Título de sección: Introduce un título para el listado
Número de columnas: Define cuántas columnas mostrar
Habilitar carrusel: Muestra en carrusel en vez de cuadrícula
Relleno superior/inferior: Configura el espacio por encima y debajo
Color de fondo: Selecciona el color de fondo para el bloque

Listado de categorías

Categorías a mostrar: Selecciona las categorías que deseas incluir (deben tener imagen asignada)
Título de sección: Introduce un título para el listado
Número de columnas: Define cuántas columnas mostrar
Habilitar carrusel: Muestra en carrusel en vez de cuadrícula
Relleno superior/inferior: Configura el espacio por encima y debajo
Color de fondo: Selecciona el color de fondo para el bloque

Texto

Título: Añade un título a la sección de texto
Descripción: Escribe el contenido que deseas mostrar
Botón de acción: Incluye un botón con texto y un enlace
Relleno superior/inferior: Ajusta el espacio vacío por encima y debajo
Color de fondo: Selecciona el color de fondo para el bloque

Imagen y texto

Imagen: Carga una imagen que acompañará el texto
Texto: Escribe el contenido que deseas mostrar al lado de la imagen
Alineación de imagen: Decide la posición de la imagen (izquierda o derecha)
Alineación de contenido: Decide cómo presentar el contenido
Botón de acción: Incluye un botón con texto y un enlace
Relleno superior/inferior: Ajusta el espacio por encima y debajo
Color de fondo: Selecciona el color de fondo para el bloque

Carrusel

Agregar diapositivas: Agrega las diapositivas necesarias y configura cada una
Número de columnas: Configura las columnas de visualización de las diapositivas
Configuraciones de velocidad: Define la velocidad a la que cambiarán las diapositivas
Relleno superior/inferior: Ajusta el espacio vacío por encima y debajo
Color de fondo: Selecciona el color de fondo para el bloque

Video

Título: Agrega un título para tu video
Reproducir en bucle: Habilita para que el video se reproduzca repetidamente
URL del video: Introduce la URL del video que deseas mostrar
Relleno superior/inferior: Define el espacio por encima y debajo
Color de fondo: Selecciona el color de fondo para el bloque

Código HTML

Código HTML: Inserta tu propio código HTML para personalizar el contenido
Relleno superior/inferior: Configura el espacio vacío encima y debajo

Título: Promociona la suscripción con un título atractivo
Descripción: Explica brevemente los beneficios de unirse a tu lista de correo
Botón de envío: Escribe lo que debería decir el botón (Ej. "Suscribirse")
Imagen de fondo: Carga una imagen para mostrar como fondo
Relleno superior/inferior: Ajusta el espacio por encima y debajo
Color de fondo: Selecciona el color de fondo para el bloque

Blog

Título: Agrega un título para la sección del blog
Seleccionar categorías de Blog: Elige las categorías de blog que deseas mostrar
Número de columnas: Define cuántas columnas deseas mostrar
Relleno superior/inferior: Configura el espacio por encima y debajo
Color de fondo: Selecciona el color de fondo para el bloque

Botón

Título: Añade un título a la sección
Descripción: Escribe el contenido que deseas mostrar
Texto del botón: Escribe lo que deseas que diga tu botón (Ej. "Ver más")
Enlace del botón: Introduce la URL a la que debe llevar el botón
Relleno superior/inferior: Ajusta el espacio por encima y debajo
Color de fondo: Selecciona el color de fondo para el bloque