Ir al contenido principal

Acabamos de liberar la versión 1.0.5 del tema con mejoras pensadas para hacer el día a día más cómodo, especialmente cuando estás afinando UI y depurando comportamientos en WooCommerce.

✅ Novedades principales

1) Visor del archivo de debug (con búsqueda)
Ahora puedes visualizar el archivo de debug directamente y además incluye funciones de búsqueda, lo que agiliza muchísimo la localización de errores y trazas sin tener que descargar ni abrir archivos externos.

2) “Tailwind Themes” pasa a llamarse “Tailwind”
Hemos renombrado la sección para reflejar mejor el enfoque actual.
Además, seguimos avanzando con la parte experimental y empezamos a añadir funcionalidades prácticas. La primera en camino: JS adicional para que el plugin “Tailwind Intersect” funcione correctamente con delays.

3) Nuevo widget para WooCommerce
Se añade un widget más y, como mejora importante: los botones de pago rápido ahora son independientes, lo que da más control sobre layout y jerarquía del checkout.

4) Widget de direcciones: labels o placeholders
El widget de direcciones de envío y facturación ahora permite elegir el estilo: labels tradicionales o placeholders, para adaptarlo mejor a cada diseño y sistema visual.

Si estás usando la versión personalizada del tema, actualiza y revisa especialmente el checkout, porque los cambios de widgets te van a dar más margen para ajustar la experiencia final.

¿Quieres que en la próxima versión prioricemos algo concreto en la parte de Tailwind o WooCommerce? 👀

🚀 Flowtitude Theme v1.0.5 ya disponible

Quería compartir por aquí en qué punto está la versión personalizada de WindPress que estoy preparando para la comunidad. La idea es liberarla esta misma semana para los miembros PRO para que podáis probarla en vuestros proyectos y dar feedback real.

Resumo el estado actual 👇

🧱 Versión base y cambios principales

  • He hecho un merge con la última versión del core de WindPress, adaptándola a nuestro flujo de trabajo con Flowtitude.

  • He mantenido la gestión de historial (los cambios que se van guardando). Ahora mismo hay alguna parte que todavía no funciona del todo fina, pero no es prioritaria en este momento.

    • La intención es conservar esta funcionalidad, salvo que veamos que da más problemas que beneficios en proyectos reales.

🧪 Decisiones tomadas: nada de «modo híbrido»

  • No he implementado el método híbrido que se había planteado en algún momento.

  • Principalmente porque:

    • No termino de ver que aporte una ventaja clara en nuestro contexto.
    • Puede añadir complejidad innecesaria al flujo de trabajo.

De momento prefiero que la base sea simple, clara y estable, antes que meter opciones que casi nadie va a usar.

🧙‍♂️ Wizard ya operativo

  • El wizard de configuración ya está implementado y probado.
  • En principio funciona como esperamos: ayuda a dejar Tailwind + Flowtitude listos sin tener que pelearse con demasiados ajustes técnicos.

🔄 Siguiente objetivo: mejorar el «reload canvas»

Antes de lanzar esta versión a los miembros PRO, quiero centrarme en pulir una cosa que creo que nos puede ser muy útil:

  • El reload del canvas, para poder refrescar el Play CDN sin recargar toda la página.
  • Esto debería hacer que la experiencia de prueba y ajuste de clases sea mucho más rápida y fluida, sobre todo cuando estamos iterando diseños en Bricks.

🧱 ¿Qué viene ahora?

  • La idea es publicar esta versión esta semana para los miembros PRO como versión de prueba.

  • Cualquier feedback que podáis dar (errores, ideas, mejoras de flujo) nos va a ayudar a decidir:

    • Qué se mantiene sí o sí.
    • Qué se simplifica.
    • Y qué nuevas opciones merece la pena añadir más adelante.

Cuando la build esté lista en la zona PRO, lo avisaré por aquí con el enlace de descarga. 💬

Ya puedes descargar la versión 1.0.4 del tema hijo / pack de Flowtitude desde la zona de descargas de la comunidad.
Es una versión que consideramos estable y lista para usar en proyectos reales.

Como siempre, esto no significa que esté libre de pequeños errores (es lo normal en cualquier sistema en evolución).
Si encuentras algo raro, te agradeceré muchísimo que lo reportes en la comunidad para poder ir puliéndolo entre todos. 🙌

📚 Próximo paso: librería de bloques
En los próximos días iremos subiendo a la librería de bloques todas las plantillas disponibles para esta versión, para que puedas:

  • Probarlas directamente en tus proyectos
  • Ver ejemplos reales de estructuras con Bricks + Tailwind
  • Reutilizar secciones y layouts como base de tus diseños

Gracias por seguir probando y aportando feedback.
¡A jugar con la 1.0.4! 🧱✨

Estoy repasando todos los detalles para asegurarme de que todo quede bien pulido antes de liberar la versión 1.0.4.
En la parte del checkout he aprovechado para añadir algunas mejoras que creo que nos van a venir muy bien:

✅ Ahora puedes añadir un mensaje personalizado sobre los impuestos, configurable directamente desde el propio widget del checkout.
✅ El espaciado (gap) entre los campos del formulario también es configurable, para que puedas ajustar la estructura visual a tu gusto.
✅ He sustituido los checkbox por unos switches más claros y modernos, tal como se ve en la imagen que acompaña este post.

Voy a seguir afinando algunos detalles más antes de marcar esta versión como estable. Como siempre, cualquier comentario o sugerencia es más que bienvenido. 🙌

🛠️ Últimos retoques antes de la versión 1.0.4 del tema hijo

Ya tienes disponibles en la comunidad nuestros bloques gratuitos junto con la configuración lite de Flowtitude, para que puedas:

  • Probar Tailwind en tu flujo de trabajo con WordPress y Bricks.
  • Trabajar con una versión ligera de nuestro sistema de diseño, con clases y estructura coherentes.
  • Usar ambos recursos en proyectos reales, sin limitaciones artificiales.

Tanto los bloques como la configuración lite son totalmente funcionales y utilizables para trabajar. Son una forma segura de probar nuestro enfoque y nuestro contenido sin riesgos, antes de dar el salto a la versión PRO.

📺 Próximamente
En los próximos días iremos publicando vídeos explicativos en el canal, y los compartiremos también aquí en la comunidad para que puedas ver, paso a paso, cómo:

  • Importar y configurar la versión lite.
  • Usar los bloques en tus páginas y plantillas.
  • Adaptarlos a tu propio diseño.

Si te apetece, cuéntame en los comentarios qué tipo de bloque o estructura te gustaría ver primero 👇

🧩 Bloques gratuitos + configuración lite de Flowtitude ya disponibles

Después de muchas horas de pruebas, ajustes y vueltas con WooCommerce, ya tenemos el tema hijo de Flowtitude listo para que lo podáis descargar los miembros Pro de la comunidad.

Ahora mismo está en una fase de release candidate:
👉 Puede quedar algún pequeño detalle por pulir, pero funciona perfectamente, sobre todo si quieres crear una mejor experiencia de compra con WooCommerce.

¿Qué incluye este tema hijo?

  • ✅ Integración muy cuidada con WooCommerce.
  • 🧩 Un buen número de widgets específicos para tienda online.
  • 🏷️ Etiquetas dinámicas pensadas para proyectos reales.
  • 🧠 Snippets reutilizables para acelerar tu flujo de trabajo.

En los próximos días iré subiendo vídeos donde explico:

  • Cómo está organizado el tema hijo.
  • Cómo usar los widgets, etiquetas dinámicas y snippets.
  • Cómo sacarle el máximo partido en proyectos con WooCommerce.

🔐 Disponibilidad
El tema hijo está disponible solo para miembros Pro desde la zona de descargas de la comunidad.

Si estás en la comunidad con un plan gratuito y quieres usarlo en tus proyectos, puedes dar el salto a Pro y aprovechar también el resto de recursos y bloques avanzados de Flowtitude. 🙌

Tema hijo de Flowtitude listo para descargar (solo miembros Pro) 🚀

Estos días estamos trabajando a tope con las plantillas de WooCommerce para dejarlas listas esta misma semana. La idea es que tengas una base sólida y consistente para montar tiendas sin pelearte con el diseño en cada proyecto.

Como parte de este trabajo, en el tema hijo hemos añadido un nuevo elemento para los loops de productos:
👉 Botón «Add to cart» específico para loops

  • Está más simplificado y ligero que la versión de bricks.
  • Está pensado para integrarse mejor con el resto del sistema.
  • Y lo mejor de todo: puedes aplicar tus propias clases de Tailwind para personalizarlo como quieras (colores, tamaños, estados hover, etc.).

En cuanto tengamos el primer bloque de plantillas estable, lo compartiré con todos los miembros PRO para que podáis empezar a probarlo en vuestros proyectos.

Si tienes alguna idea concreta para los loops de productos o el botón de añadir al carrito (estados, variantes, iconos, etc.), déjala en los comentarios y la tendremos en cuenta en esta primera versión 💬

📦 Novedades WooCommerce + tema hijo

He preparado una nueva versión de la sección de galería con dos sliders sincronizados (principal + miniaturas) pensada para usarla con Bricks y Tailwind.

La idea es muy sencilla:

  • Un slider principal para la imagen grande.
  • Un slider de miniaturas sincronizado con el principal.
  • Flechas de navegación (prev/next) que puedes colocar donde quieras en la sección.
  • Todo el estilo está resuelto solo con clases de Tailwind, sin CSS extra.

¿Qué aporta esta nueva versión?

  • El JS está muy simplificado:
    solo hace tres cosas → inicializa los sliders, sincroniza main + thumbs y conecta las flechas de navegación.
  • El archivo incluye código comentado que puedes eliminar si no lo necesitas (por ejemplo, la parte de la barra de progreso).

Copias la estructura HTML de la sección (main + thumbs).

  • Mantienes los atributos clave:

    • bt-data-slider para identificar cada slider.
    • bt-data-sync para vincular el slider principal con el de miniaturas.
  • Añades las flechas donde quieras en el layout y les dejas:

    • class="bt-slidernav-prev ..."
    • class="bt-slidernav-next ..."
    • El mismo bt-data-slider que use tu slider.
  • Ajustas las clases de Tailwind al diseño de tu proyecto (colores, tamaños, espaciados, etc.).

Sección con doble slider sincronizado (100% Tailwind)

Quería compartir por aquí en qué estoy trabajando estos días, porque empieza a ponerse interesante 🙂

En breve pondré a disposición de todos los miembros PRO el tema hijo de Flowtitude. Ahora mismo estoy terminando de pulir varias cosas específicas para WooCommerce:

  • ✅ Etiquetas dinámicas para las páginas de «Mi cuenta»

  • ✅ Primera versión de todas las plantillas de la zona de cuenta de usuario, con cambios estéticos en casi todas ellas

  • ✅ Ajustes visuales y de estructura en:

    • Página de checkout
    • Mini carrito
    • Página de carrito

👉 ¿Qué significa esto para ti?
Que te será mucho más fácil montar tiendas online coherentes y bien diseñadas desde el primer momento, sin tener que pelearte con cada plantilla por separado. A partir de ahí podremos ir creando distintos diseños y variaciones para adaptarlos a más casos.

Si tienes alguna idea concreta para «Mi cuenta», carrito o checkout que te gustaría ver en el tema hijo, déjala en los comentarios y la tendré muy en cuenta para las siguientes versiones. 💬

Más control, más expresividad y un diseño mucho más contextual

Esta semana hemos ampliado y mejorado la configuración de Tailwind dentro del ecosistema Flowtitude añadiendo un conjunto de variantes personalizadas que permiten escribir estilos mucho más precisos y estructurados, especialmente útiles en Bricks, Gutenberg y cualquier flujo de trabajo avanzado con WordPress.

Estas variantes no sustituyen nada de lo existente: lo complementan y te permiten controlar mejor las relaciones entre elementos, sin hacks ni selectores complejos.

A continuación te explico qué hace cada una y en qué casos resulta realmente útil.


parent:

Te permite algo tan sencillo y útil como aplicar estilos al padre desde el propio hijo. No depende de estados ni de lógica: simplemente selecciona al contenedor directamente desde dentro, algo tremendamente práctico cuando trabajas con tarjetas, formularios o wrappers que dependen de lo que contienen.

child:

Te da el control sobre los hijos directos de un elemento, sin afectar a su contenido interno. Esto marca una diferencia importante respecto al selector universal *:: mientras *: alcanza a todos los descendientes, child: solo actúa en el primer nivel. Es una herramienta mucho más limpia para listas, grids, colecciones de bloques o cualquier estructura donde no quieras “contaminar” elementos internos.

next: y siblings:

Permiten dirigirte a los elementos que vienen después. El primero se centra en el hermano inmediato; el segundo en todos los siguientes. Son increíblemente útiles en interfaces secuenciales, pasos de formularios o cualquier diseño donde un elemento influye visualmente en los que le siguen.

prev: y prev-siblings:

Hacen exactamente lo contrario: permiten actuar sobre los elementos que vienen antes. Algo tan simple como marcar los pasos ya completados en un proceso, o destacar los elementos previos en un timeline, se vuelve instantáneo y sin necesidad de añadir clases adicionales.

Variantes ARIA

Hemos añadido variantes para estados accesibles como:

  • aria-expanded
  • aria-pressed
  • aria-selected
  • aria-current

Con estas variantes se pueden crear componentes más accesibles y expresivos sin añadir lógica ni estructuras extra. Son especialmente útiles en acordeones, menús, pestañas, toggles y navegación.


✨ ¿Qué significa todo esto para ti?

Estas variantes hacen que Tailwind sea:

  • más predecible
  • más expresivo
  • más accesible
  • más semántico
  • más potente en Bricks y Gutenberg

Podrás construir componentes complejos sin recurrir a hacks, sin sobrescribir clases y con un control mucho más granular del árbol DOM.