Bloques Modulares — Construye Páginas como Bloques de Lego
La página de inicio de Loomix se basa íntegramente en las Zonas Dinámicas (Dynamic Zones) de Strapi 5; permitiendo a los editores reorganizar secciones o agregar nuevos bloques sin escribir código.
¿Qué es un Bloque Modular?
Es un componente de UI autónomo respaldado por una estructura de datos específica en Strapi. Puede reutilizarse y reordenarse libremente en cualquier página.
- 1. Los editores componen páginas mediante bloques modulares arrastrables.
- 2. Strapi CMS almacena las zonas dinámicas en PostgreSQL.
- 3. Los cambios activan webhooks de revalidación hacia Next.js.
- 4. Next.js 16 BlockRenderer procesa los componentes React correspondientes.
- 5. Los clientes disfrutan de páginas ultrarrápidas con SEO de 100/100.
Ciclo de Vida del Bloque desde Strapi al Frontend
Seleccionar Variantes de Estilo en Strapi
Para alternar la apariencia de cualquier bloque, utiliza el selector de estilos en Storefront Management.
- 1. 1. El editor agrega un nuevo bloque (ej. Productos Destacados) en Strapi.
- 2. 2. Strapi dispara un webhook de revalidación instantánea (On-Demand Revalidation) a Next.js.
- 3. 3. El BlockRenderer de Next.js 16 renderiza el nuevo componente de inmediato para los visitantes.
Catálogo de Bloques Nativos
Explora todos los bloques listos para producción con sus opciones de estilo y previsualización gráfica.
Banner Principal de Bienvenida (Hero Banner)
La primera impresión de tu tienda: titulares contundentes, imágenes en alta resolución y botones de acción rápida.
- Escribe el título principal y la llamada de atención.
- Configura los enlaces de los botones primario y secundario.
Vitrina Destacada de Producto (Product Showcase)
Escaparate interactivo para resaltar un producto estrella con especificaciones técnicas y galería de fotos.
- Elige la variante de diseño (carrusel, cuadrícula o tarjeta 3D).
- Indica el identificador del producto en Medusa.
Consejo para Editores:
Estilo Visual (Style):
Carrusel Horizontal de Productos (Scroll Products)
Banda deslizante con desplazamiento continuo ideal para ofertas flash o novedades de temporada.
- Determina la velocidad y orientación del desplazamiento.
- Filtra la categoría de productos a mostrar.
Estilo Visual (Style):
Ventajas y Diferenciales de Marca (Features)
Destaca sellos de garantía como 'Envío Gratuito' o 'Pago Seguro' con iconos modernos.
- Selecciona entre 3 estilos de tarjeta visual.
- Personaliza icono, título y texto explicativo para cada ventaja.
- Aplica colores de fondo y bordes a juego con tu marca.
Estilo Visual (Style):
Cuadrícula de Navegación por Categorías (Categories Grid)
Muestra las principales secciones de la tienda mediante tarjetas limpias o imágenes circulares.
- Selecciona las categorías principales a destacar en la página de inicio.
Estilo Visual (Style):
Artículos Recientes del Blog (Recent Blog Posts)
Presenta las publicaciones más recientes para potenciar el posicionamiento SEO y la interacción del usuario.
- Escoge el número de entradas a mostrar (3 o 4 artículos).
Estilo Visual (Style):
Siguiente Paso: Configuración Global
Aprende a gestionar la paleta de colores, el logotipo y la identidad de marca desde Strapi.