Elementos
Todos los elementos personalizados de Bricks Builder incluidos en FlowKit: elementos generales, WooCommerce completo y snippets activables individualmente.
Elementos Generales
Elementos de Bricks Builder que no dependen de WooCommerce. Disponibles en la categoría "Flowtitude" del editor.
Marquee Slider Carousel
flowtitude-marquee-slider — Carrusel de desplazamiento infinito tipo marquesina. Ideal para mostrar logotipos de clientes, testimonios, galerías de productos o cualquier contenido que necesite movimiento continuo sin interacción del usuario.
Cada item puede contener una imagen, texto o un enlace. El elemento clona automáticamente los items necesarios para crear un bucle visual sin huecos.
Casos de uso
- Barra de logotipos de clientes o partners
- Carrusel de testimonios o quotes
- Galería de productos destacados
- Ticker de noticias o anuncios
Opciones de configuración
| Propiedad | Descripción |
|---|---|
| Dirección | Izquierda, derecha, arriba o abajo |
| Velocidad | Duración de la animación configurable (en segundos) |
| Gap | Espacio entre items (cualquier unidad CSS válida) |
| Pausa al hover | Detiene la animación al pasar el ratón por encima |
| Efecto fade en bordes | Máscara CSS para difuminar los extremos, creando una transición suave |
| Efectos de imagen | Escala de grises a color al hacer hover, fade-in al entrar en el viewport |
| Tipografía | Control completo de texto y ancho máximo por item |
| Accesibilidad | Respeta prefers-reduced-motion del sistema operativo |
Rendimiento
Usa CSS animations puras + ResizeObserver + IntersectionObserver. No hay JavaScript de scroll involucrado, lo que garantiza 60fps constantes incluso con muchos items.
Parallax Section Legacy
flowtitude-parallax — Sección con fondo parallax anidable dentro de otros contenedores. Permite crear efectos de profundidad visual donde el fondo se mueve a velocidad diferente que el contenido.
Elemento legacy
Bricks Builder incluye parallax nativo desde la versión 1.9. Este elemento se mantiene por compatibilidad con proyectos existentes, pero para nuevos diseños se recomienda usar el parallax nativo de Bricks. FlowKit Parallax ofrece opciones adicionales (múltiples modos, dirección dual, stagger) que el nativo no tiene.
Casos de uso
- Secciones hero con fondo de vídeo o imagen a pantalla completa
- Separadores visuales entre secciones de contenido
- Fondos animados con efecto de profundidad
Opciones de configuración
| Propiedad | Descripción |
|---|---|
| Tipo de fondo | Imagen, vídeo local, YouTube, Vimeo o color sólido |
| Modos parallax | Fixed (CSS puro, mejor rendimiento), Transform (scroll con JS, más suave) o Scale (efecto zoom) |
| Velocidad | Rango 0-2 para controlar la intensidad del efecto parallax |
| Dirección | Vertical, horizontal o ambas simultáneamente |
| Desactivar en móvil | Opción para deshabilitar parallax en dispositivos táctiles (recomendado para rendimiento) |
| Animaciones de fondo | fade-in, slide-up, slide-down, slide-left, slide-right, scale-in |
| Animaciones de contenido | Independientes del fondo, mismas opciones disponibles |
| Timing | Duración, delay y efecto stagger configurables por separado |
Elementos inactivos
Estos elementos están incluidos pero desactivados por defecto. Se pueden habilitar desde el panel de administración.
| Elemento | Descripción | Estado |
|---|---|---|
| Animated Heading | Titular con subrayado animado SVG y texto antes/después configurable | Inactivo |
| Animated VFX Text | Texto con efectos visuales WebGL via VFX.js: glitch, RGB shift, rainbow, wave y más | Inactivo |
WooCommerce: Carrito
Elementos para construir una página de carrito completamente personalizada con AJAX.
| Elemento | Descripción |
|---|---|
| Cart Subtotal | Muestra el subtotal del carrito |
| Cart Order Total | Total del pedido con desglose completo |
| Cart Shipping Totals | Totales de envío desglosados por método |
| Cart Shipping Calculator | Calculadora de envío interactiva integrada |
| Cart Coupons | Lista de cupones aplicados al carrito |
| Cart AJAX Coupon | Formulario de cupón con aplicación AJAX sin recarga de página |
| Cart Proceed to Checkout | Botón para proceder al checkout |
WooCommerce: Checkout
Elementos para construir un flujo de pago completo y personalizable elemento a elemento.
| Elemento | Descripción |
|---|---|
| Checkout Billing Details | Campos de facturación del cliente |
| Checkout Shipping Details | Campos de dirección de envío |
| Checkout Shipping Methods | Selector de métodos de envío disponibles |
| Checkout Coupon Form | Formulario de cupónes en el checkout |
| Checkout Create Account | Opción de crear cuenta durante el checkout |
| Checkout Payment Methods | Métodos de pago disponibles (tarjeta, transferencia, etc.) |
| Checkout Submit Button | Botón de envío/confirmación del pedido |
| Express Payment | Pagos express: Stripe, Google Pay, Apple Pay |
| Checkout Terms & Conditions | Checkbox de aceptación de términos y condiciones |
| Checkout Order Details | Resumen del pedido con productos y totales |
| Checkout Order Note | Campo de texto para nota del pedido |
WooCommerce: Pedidos
Elementos para mostrar información detallada de pedidos en páginas de confirmación y Mi Cuenta.
| Elemento | Descripción |
|---|---|
| Order Header | Cabecera con número de pedido, fecha y estado |
| Order Summary | Resumen con subtotal, impuestos, envío, descuentos y total. Cada línea es activable/desactivable |
| Order Items Loop | Contenedor wrapper para query loop de items del pedido |
| Order Product Thumbnails | Miniaturas de productos con cantidad máxima, dimensiones y clases Tailwind configurables |
| Order Addresses | Direcciones de facturación y envío del pedido con opciones de formato |
WooCommerce: Mi Cuenta
Elementos para personalizar la sección de cuenta del usuario.
| Elemento | Descripción |
|---|---|
| Account Addresses | Gestión de direcciones de cuenta (facturación y envío) con enlaces de edición |
WooCommerce: Productos
Elementos para usar en loops de productos.
| Elemento | Descripción |
|---|---|
| Simple Add to Cart | Botón de añadir al carrito optimizado para loops de productos, con clases CSS configurables en el botón |
WooCommerce Snippets
35+ snippets PHP activables individualmente desde el panel de administración. Cada snippet añade una funcionalidad concreta sin necesidad de código personalizado.
Etiquetas dinámicas
Varios snippets registran etiquetas dinámicas WooCommerce (precios de producto, cantidad en carrito, datos de pedido, datos de reseñas). La documentación completa de todas las etiquetas dinámicas
{ft_*} está en la sección Etiquetas Dinámicas.
Carrito y Checkout
| Snippet | Función |
|---|---|
| Auto-update cart | Actualiza el carrito automáticamente al cambiar la cantidad, sin botón de actualizar |
| Free shipping remaining | Calcula y muestra cuánto falta para envío gratuito |
| Cart item count | Cuenta de items en carrito (configurable: unidades totales o productos únicos) |
| Shipping method display | Muestra el método de envío seleccionado en carrito y checkout |
| Cart remove URL | Genera URL para eliminar un producto del carrito |
| Custom thank-you redirect | Redirige a una página personalizada tras completar el pedido |
Productos
| Snippet | Función |
|---|---|
| "New" badge | Muestra etiqueta "Nuevo" en productos recientes (días configurables) |
| Check if Simple product | Condicional para verificar si el producto es de tipo Simple |
| Check subcategories | Condicional para verificar subcategorías dentro de loops |
| Gallery image IDs | Acceso a los IDs de imágenes de la galería del producto |
| First gallery image | Obtiene la primera imagen de la galería del producto |
Pedidos y Cuenta
| Snippet | Función |
|---|---|
| Customer data in My Account | Acceso a datos del cliente en la sección Mi Cuenta |
| Order status checker | Condicional para verificar el estado de un pedido |
| Custom order status display | Personaliza cómo se muestra el estado del pedido |
| Product images in order details | Muestra imágenes de producto en los detalles del pedido |
| Product images in orders table | Muestra imágenes de producto en la tabla de pedidos |
| Total customer orders | Cuenta total de pedidos del cliente |
| Customer total spent | Total gastado por el cliente |
| Discount amount | Muestra la cantidad de descuento aplicada |
| Last order in dashboard | Muestra el último pedido en el dashboard de Mi Cuenta |
| Wishlist endpoint | Añade un endpoint de lista de deseos en Mi Cuenta |
| My Account endpoint title | Título del endpoint actual de Mi Cuenta |
Bricks Builder
| Snippet | Función |
|---|---|
| Custom HTML tags | Etiquetas HTML personalizadas utilizables en elementos de Bricks |
| Whitelist PHP functions | Habilita funciones PHP adicionales para uso en echo tags de Bricks |
Uso
Los elementos generales aparecen en Bricks Builder bajo la categoría "Flowtitude". Los elementos WooCommerce aparecen bajo "WooCommerce".
Requisitos
Los elementos WooCommerce requieren WooCommerce instalado y activo. Los snippets se activan individualmente desde
FlowKit > Snippets en el panel de WordPress.