Crear bloques para la tienda web

Introducción: ¿Qué son los bloques?

Los bloques son componentes de contenido especiales que creas con anticipación y luego puedes colocar en tu tienda web. Son como bloques de construcción listos para usar para tu tienda web. Hay tres tipos: bloques de artículos (para noticias o información), bloques de surtido (para grupos de productos como ofertas) y bloques de carrusel (para banners rotativos con imágenes).

¿Por qué usar bloques?

Quieres usar bloques porque:

• Puedes reutilizar componentes de contenido complejos en diferentes páginas
• Hace tu tienda web más profesional y dinámica
• Puedes presentar grupos de productos de forma visualmente atractiva
• Puedes mostrar de forma prominente mensajes o promociones importantes
• Puedes cambiar fácilmente lo que aparece en la página principal
• Funciona de forma estructurada y clara
• Los clientes obtienen una mejor experiencia de compra

Atención: ¡Los bloques deben crearse primero antes de poder usarlos en las páginas!

Tres tipos de bloques

Tratamos los tres tipos de bloques:

1. Bloque de artículos: Para noticias, actualizaciones o elementos informativos
2. Bloque de surtido: Para grupos de productos (ofertas, nuevos productos, etc.)
3. Bloque de carrusel: Para banners rotativos con imágenes

---

Bloque 1: Bloque de artículos

Un bloque de artículos es una colección de noticias compactas o artículos informativos. Cada artículo puede enlazar a una página, abrir un popup o redirigir a otro sitio web.

¿Cuándo usar?

• Mostrar noticias en la página principal
• Compartir consejos y trucos con los clientes
• Anunciar promociones o eventos
• Compartir información estacional

Paso 1: Crear bloque de artículos

Al menú bloques de artículos

1. Ve a "Tienda (Nuevo)"
2. Haz clic en "Bloques de artículos"
3. Ves un resumen de los bloques de artículos existentes (puede estar vacío)

Crear nuevo bloque de artículos

1. Haz clic en "Nuevo"
2. Rellena la configuración:

Nombre:

• Dale al bloque un nombre reconocible
• Por ejemplo: "Noticias página principal" o "Consejos y trucos"
• Esto es para uso interno

Número de artículos:

• ¿Cuántos artículos deben ser visibles a la vez en la tienda web?
• Por ejemplo: 3 artículos uno al lado del otro
• El resto los clientes pueden verlos desplazándose

Botón "Más":

• Marca si los clientes pueden ver más artículos a través de un botón "Más"
• Deja vacío si solo estos artículos son visibles

Guardar

1. Haz clic en "Guardar"
2. El bloque de artículos está ahora creado

---

Paso 2: Añadir artículos al bloque

Ahora vas a crear los artículos individuales que van en este bloque.

Abrir menú Elementos

1. Selecciona el bloque de artículos que acabas de crear
2. Haz clic en "Elementos"
3. Ahora ves las opciones para añadir artículos

Tienes tres tipos de artículos para elegir:

---

Opción A: Nueva Página (el artículo enlaza a una página)

Usa esto si el artículo debe enlazar a una página separada con más información.

Crear artículo de página

1. Haz clic en "Más" → "Nueva Página"

Rellenar configuración:

Título:

• El encabezado del artículo (por ejemplo: "¡Tulipanes ahora 20% de descuento!")

Texto:

• Una breve descripción del artículo
• Esto es lo que los clientes ven en el resumen

Imagen en texto (opcional):

• Añade una imagen en el texto si es necesario
• Usa el código: ![](nombreimagen.png)
• Ver la guía anterior sobre "Influir en textos"

Fechas de visibilidad (opcional):

• Desde fecha: ¿Desde cuándo es visible el artículo?
• Hasta fecha: ¿Hasta cuándo es visible el artículo?
• Dejar vacío: El artículo siempre es visible

Ejemplo: Una promoción de San Valentín visible del 1 al 14 de febrero

Imagen miniatura:

• Sube una imagen pequeña que vaya con el artículo
• Esto es lo que los clientes ven en el resumen
• Por ejemplo: una foto de tulipanes con el artículo de tulipanes

Enlace a página:

• Selecciona a qué página va el cliente cuando hace clic en el artículo
• Esta debe ser una página que hayas creado previamente

Posición:

• Determina el orden (1 = primero, 2 = segundo, etc.)

Guardar

1. Haz clic en "Guardar"
2. El artículo de página está añadido

---

Opción B: Nuevo Popup (el artículo abre un popup)

Usa esto si el artículo debe abrir un popup con más información, sin ir a una nueva página.

Crear artículo popup

1. Haz clic en "Más" → "Nuevo Popup"

Rellenar configuración:

Título, Texto, Imagen, Fechas, Miniatura:

• Rellénalos como con "Nueva Página" arriba

Texto popup:

• Este es el texto que aparece EN el popup
• Puede ser más extenso que la breve descripción
• Por ejemplo: explicación completa de la promoción con condiciones

Imágenes de apoyo:

• Sube imágenes adicionales para el popup
• Estas aparecen cuando se abre el popup
• Opcional

Posición:

• Determina el orden en el bloque

Guardar

1. Haz clic en "Guardar"
2. El artículo popup está añadido

¿Qué sucede? Cuando un cliente hace clic en el artículo, se abre una ventana popup con la información adicional.

---

Opción C: Nueva Redirección (el artículo redirige a sitio externo)

Usa esto si el artículo debe enlazar a otro sitio web (por ejemplo, tu Instagram o un proveedor).

Crear artículo de redirección

1. Haz clic en "Más" → "Nueva Redirección"

Rellenar configuración:

Título, Texto, Imagen, Fechas, Miniatura:

• Rellénalos como con las opciones anteriores

Enlace:

• Introduce la URL completa a donde debe ir el cliente
• Por ejemplo: https://www.instagram.com/tunegocio
• O: https://www.proveedor.es/promocion

Posición:

• Determina el orden en el bloque

Guardar

1. Haz clic en "Guardar"
2. El artículo de redirección está añadido

¿Qué sucede? Cuando un cliente hace clic en el artículo, es redirigido al sitio web externo.

---

Paso 3: Añadir múltiples artículos

Repite el paso 2 para cada artículo que quieras tener en el bloque. Puedes mezclar diferentes tipos:

• Artículo 1: Página (a más información)
• Artículo 2: Popup (consejo rápido)
• Artículo 3: Redirección (a Instagram)

¡Listo! Tu bloque de artículos está ahora lleno y listo para usar.

---

Bloque 2: Bloque de surtido

Un bloque de surtido muestra un grupo de productos en tu tienda web. Perfecto para ofertas, nuevos productos o artículos estacionales.

¿Cuándo usar?

• Mostrar ofertas de forma prominente
• Destacar nuevos productos
• Promover productos estacionales
• Mostrar best-sellers

Paso 1: Crear bloque de surtido

Al menú bloques de surtido

1. Ve a "Tienda (Nuevo)"
2. Haz clic en "Bloques de surtido"
3. Ves un resumen de los bloques de surtido existentes

Crear nuevo bloque de surtido

1. Haz clic en "+ Nuevo"

Rellenar configuración:

Nombre:

• Nombre reconocible para uso interno
• Por ejemplo: "Ofertas página principal" o "Nuevas rosas"

Título:

• Este texto se muestra en la tienda web sobre el bloque
• Por ejemplo: "¡Ofertas especiales esta semana!"
• Esto es lo que los clientes ven

Ordenación:

• Elige cómo se ordenan los productos
• Opciones: por precio, por nombre, por fecha, más reciente primero, etc.

Número de productos en página principal:

• ¿Cuántos productos deben ser visibles?
• Por ejemplo: 8 productos
• El resto los clientes pueden verlos vía botón "Más"

Ocultar botón más:

• Sin marcar: Los clientes ven un botón "Más" para ver todos los productos
• Marcado: Sin botón "Más", solo estos productos visibles

Usar días de pedido:

• Activado: La tienda web solo muestra productos que pueden ser entregados en el día de pedido elegido
• Desactivado: La tienda web muestra todos los productos independientemente de si pueden ser comprados

Grupos de lista (opcional):

• Selecciona de qué grupos de lista deben venir los productos
• Por ejemplo: solo de "Flores cortadas" u "Ofertas"
• Puedes elegir múltiples grupos de lista
• Dejar vacío = de todos los grupos de lista

Tags (opcional):

• Selecciona qué tag debe tener un producto para ser mostrado
• Por ejemplo: solo productos con tag "Nuevo" u "Oferta"
• Puedes elegir múltiples tags

Guardar

1. Haz clic en "Guardar"
2. El bloque de surtido está creado

¡Listo! El bloque ahora muestra automáticamente productos basándose en tu configuración.

---

Bloque 3: Bloque de carrusel

Un bloque de carrusel es un banner rotativo con imágenes. A menudo usado en la página principal para llamar la atención sobre promociones o temporadas.

¿Cuándo usar?

• Banner grande en la página principal
• Mostrar fotos estacionales
• Banners de promoción rotativos
• Imágenes ambientales de tus productos

Paso 1: Crear bloque de carrusel

Al menú bloques de carrusel

1. Ve a "Tienda (Nuevo)"
2. Haz clic en "Bloques de carrusel"
3. Ves un resumen de los bloques de carrusel existentes

Crear nuevo bloque de carrusel

1. Haz clic en "+ Nuevo"

Rellenar configuración:

Nombre:

• Nombre reconocible para uso interno
• Por ejemplo: "Banner página principal" o "Carrusel temporada"

Auto-desplazamiento:

• Marcado: Las imágenes cambian automáticamente
• Sin marcar: Los clientes deben hacer clic ellos mismos para cambiar

Velocidad:

• Si auto-desplazamiento está activado: ¿qué tan rápido cambian las imágenes?
• Por ejemplo: cada 5 segundos
• En milisegundos (5000 = 5 segundos)

Guardar

1. Haz clic en "Guardar"
2. El bloque de carrusel está creado

---

Paso 2: Añadir imágenes al carrusel

Ahora vas a añadir las imágenes que deben rotar en el carrusel.

Abrir menú Elementos

1. Selecciona el bloque de carrusel que acabas de crear
2. Haz clic en "Elementos"

Añadir nueva imagen

1. Haz clic en "+ Add Image" (o "+ Añadir imagen")

Rellenar configuración:

Título:

• Texto mostrado sobre la imagen
• Por ejemplo: "¡Tulipanes ahora 20% de descuento!"
• Opcional, puede dejarse vacío

Fechas de visibilidad (opcional):

• Desde fecha: ¿Desde cuándo debe estar esta imagen en el carrusel?
• Hasta fecha: ¿Hasta cuándo debe ser visible esta imagen?
• Dejar vacío: La imagen siempre es visible

Ejemplo: Banner de Navidad solo visible en diciembre

Subir foto:

1. Haz clic en "Elegir archivo" o el icono de subida
2. Selecciona tu imagen
3. Sube

⚠️ IMPORTANTE sobre dimensiones:

¡El ancho y alto del carrusel se determina por la primera imagen que subas!

Consejos para imágenes:

• Usa el mismo formato para todas las imágenes
• Por ejemplo: todas las imágenes 1200x400 píxeles
• De lo contrario algunas imágenes se estirarán o cortarán
• Recorta imágenes en un programa como Paint.NET (gratis) o Photoshop
• No en Paint normal, que tiene muy pocas posibilidades

Ejemplo buenas dimensiones:

• Banner desktop: 1200x400 píxeles
• Banner móvil: 800x600 píxeles
• Cuadrado: 800x800 píxeles

Posición:

• Determina el orden (1 = primera imagen, 2 = segunda, etc.)
• Este es el orden en que se muestran las imágenes

Guardar

1. Haz clic en "Guardar"
2. La imagen está añadida al carrusel

---

Paso 3: Añadir más imágenes

Repite el paso 2 para cada imagen que deba estar en el carrusel.

Ejemplo carrusel con 3 imágenes:

1. Imagen 1: "Colección primavera" (marzo-mayo)
2. Imagen 2: "Promoción Día de la Madre" (mayo)
3. Imagen 3: "Banner general" (siempre visible)

¡Listo! Tu bloque de carrusel está lleno de imágenes.

---

Colocar bloques en páginas

Ahora que has creado bloques, necesitas colocarlos en las páginas de tu tienda web.

Paso 1: A las páginas

Abrir página

1. Ve a "(General) Página" o "Páginas"
2. Ves una lista de páginas

Elegir o crear página

• Haz clic en una página existente (por ejemplo, tu página principal)
• O crea una nueva página con "Nuevo"

Consejo: Da nombres claros a las páginas para que sepas más tarde qué página es qué.

---

Paso 2: Añadir bloque a página

Abrir menú Elementos

1. Haz clic en la página
2. Ve a "Elementos"
3. Ahora ves lo que ya está en la página

Añadir bloque

1. Haz clic en "Más"
2. Selecciona el tipo de bloque que quieres añadir:
   • Bloque de artículos: Elige qué bloque de artículos
   • Bloque de surtido: Elige qué bloque de surtido
   • Bloque de carrusel: Elige qué bloque de carrusel
3. Haz clic en el bloque específico que quieres añadir

Guardar

1. ¡No olvides hacer clic en "Guardar"!
2. De lo contrario tu trabajo desaparece
3. El bloque ahora es visible en la página

---

Paso 3: Establecer como página de inicio (opcional)

Si quieres usar esta página como página principal de tu tienda web:

Establecer página de inicio

1. Ve a "(General) Configuraciones"
2. Selecciona tu configuración de tienda web
3. Encuentra el campo "Página de inicio"
4. Selecciona la página que acabas de crear
5. Haz clic en "Guardar"

Resultado: Esta página con tus bloques es ahora la página principal de tu tienda web.

---

Ejemplos prácticos

Ejemplo 1: Página principal con carrusel y ofertas

• Paso 1: Crea bloque de carrusel con 3 fotos estacionales
• Paso 2: Crea bloque de surtido "Ofertas" con 8 productos
• Paso 3: Crea bloque de artículos "Noticias" con 3 mensajes
• Paso 4: Añade todo a la página principal: primero carrusel, luego ofertas, luego noticias
• Resultado: Página principal profesional con contenido visual

Ejemplo 2: Sección de noticias con diferentes artículos

• Artículo 1 (Página): "Nuevo vivero" → enlaza a página con información detallada
• Artículo 2 (Popup): "Consejos cuidado tulipanes" → abre popup con consejos breves
• Artículo 3 (Redirección): "Síguenos en Instagram" → redirige a Instagram
• Resultado: Diversas noticias con diferentes acciones

Ejemplo 3: Surtido estacional

• Bloque: "Flores de primavera"
• Grupo de lista: Selecciona "Flores cortadas"
• Tag: Selecciona "Primavera"
• Visibilidad: Solo marzo-mayo
• Resultado: Automáticamente los productos correctos en la temporada correcta

Ejemplo 4: Dimensiones de carrusel incorrectas

• Problema: Primera imagen es 1200x400, segunda es 800x600
• Resultado: La segunda imagen se estira y se ve fea
• Solución: Recorta la segunda imagen a 1200x400 en Paint.NET
• Resultado: Ambas imágenes se ven bien

---

Consejos importantes

Consejo 1: Planifica tus bloques con anticipación

• Piensa primero qué bloques necesitas
• Haz una lista: "Carrusel página principal", "Ofertas", "Noticias"
• Créalos todos antes de colocarlos en páginas

Consejo 2: Dimensiones consistentes del carrusel

• Mide las dimensiones de tu primera imagen de carrusel
• Recorta todas las demás imágenes a exactamente las mismas dimensiones
• Esto previene fotos estiradas o cortadas

Consejo 3: Usa nombres claros

• "Carrusel página principal 2025" es mejor que "Carrusel1"
• Más tarde sabrás qué era
• Especialmente útil si tienes muchos bloques

Consejo 4: Prueba bloques de surtido

• Verifica si se muestran los productos correctos
• Ajusta filtros si no es correcto
• Prueba con diferentes grupos de lista y tags

Consejo 5: Usa fechas para contenido estacional

• Establece fechas activar/desactivar para artículos estacionales
• Banner de Navidad automáticamente eliminado después de Navidad
• Ahorra trabajo manual

Consejo 6: No olvides guardar

• Siempre haz clic en "Guardar" después de cambios
• De lo contrario tu trabajo se va
• Verifica dos veces antes de cerrar la pantalla

Preguntas frecuentes

Pregunta: ¿Cuántos bloques puedo crear?

• Ilimitado
• Crea tantos como necesites
• Pero mantenlo claro

Pregunta: ¿Puedo usar el mismo bloque en múltiples páginas?

• ¡Sí, absolutamente!
• Esa es exactamente la ventaja de los bloques
• Crea una vez, usa en todas partes

Pregunta: ¿Puedo ajustar un bloque más tarde?

• Sí, siempre
• Los cambios son inmediatamente visibles en todas las páginas donde está el bloque
• Esto es útil para actualizaciones

Pregunta: ¿Por qué no veo productos en mi bloque de surtido?

• Verifica si has establecido grupos de lista o tags
• Posiblemente no hay productos que cumplan los criterios
• Ajusta filtros o déjalos vacíos

Pregunta: Mis imágenes de carrusel están estiradas, ¿qué hago?

• Todas las imágenes deben tener las mismas dimensiones
• Recórtalas en Paint.NET u otro programa
• Usa exactamente los mismos píxeles (ancho x alto)

Pregunta: ¿Cómo elimino un bloque de una página?

• Ve a la página → Elementos
• Selecciona el bloque
• Haz clic en eliminar
• El bloque en sí permanece, solo el enlace a la página se va

¿Qué hacer ante problemas?

Problema: Bloque no visible en tienda web

• Verifica si has añadido el bloque a la página
• Verifica si hiciste clic en "Guardar"
• Actualiza la caché de la tienda web
• Verifica si la página está establecida como página de inicio

Problema: Las imágenes del carrusel se ven raras

• Verifica si todas las imágenes tienen las mismas dimensiones
• Recórtalas a exactamente los mismos píxeles
• Súbelas de nuevo

Problema: Bloque de surtido está vacío

• Verifica tus filtros (grupos de lista, tags)
• Posiblemente no hay productos que cumplan los criterios
• Quita filtros para mostrar más productos
• Verifica si "Usar días de pedido" causa problemas

Problema: Artículo no visible en bloque de artículos

• Verifica las fechas de visibilidad
• Posiblemente la fecha ya expiró
• Ajusta fechas o deja vacío para siempre visible

Problema: No puedo encontrar bloque para añadir a la página

• Verifica si guardaste el bloque después de crear
• Actualiza la página
• Posiblemente está en otra categoría (artículo/surtido/carrusel)

Resumen

Crear bloques para tu tienda web se hace creando primero los bloques y luego colocándolos en páginas:

Tres tipos de bloques:

1. Bloque de artículos (noticias/info):

   • Crear bloque: Bloques de artículos → Nuevo → nombre, número de artículos, botón "Más" → Guardar
   • Añadir elementos: Selecciona bloque → Elementos → elige tipo: Nueva Página (enlaza a página), Nuevo Popup (abre popup), o Nueva Redirección (redirige a sitio)
   • Rellena por elemento: título, texto, imagen miniatura, fechas (opcional), enlace/popup/redirección, posición → Guardar

2. Bloque de surtido (grupos de productos):

   • Crear bloque: Bloques de surtido → Nuevo → nombre, título (visible en tienda), ordenación, número de productos, botón "Más", días de pedido (activar/desactivar)
   • Filtros: grupos de lista (opcional) y tags (opcional) determinan qué productos se muestran
   • Guardar → productos aparecen automáticamente basándose en filtros

3. Bloque de carrusel (banner rotativo):

   • Crear bloque: Bloques de carrusel → Nuevo → nombre, auto-desplazamiento (activar/desactivar), velocidad → Guardar
   • Añadir imágenes: Selecciona bloque → Elementos → + Add Image → título (opcional), fechas (opcional), subir foto
   • Importante: Usa para TODAS las imágenes exactamente las mismas dimensiones (píxeles) para prevenir estiramiento, recorta en Paint.NET
   • Repite para cada imagen

Colocar bloques en páginas:

• Ve a Páginas → selecciona página → Elementos → Más → elige tipo de bloque → selecciona bloque específico → Guardar
• Opcional: Establece página como página de inicio vía Configuraciones → Página de inicio

Atención: ¡Nunca olvides hacer clic en "Guardar", de lo contrario tu trabajo se va!