FrontBlocks for Gutenberg/GeneratePress

Descripción

Alineación de bordes del contenedor
Añade controles personalizados a los bloques Container de GenerateBlocks y a los bloques nativos de WordPress Group/Container para eliminar el relleno del lado izquierdo o derecho, creando diseños de borde a borde. Esta característica solo aparece en contenedores que usan los ajustes de ancho máximo global de GeneratePress, ideal para crear disposiciones asimétricas en las que el contenido se extiende hasta un borde del navegador mientras se mantiene el espaciado adecuado en el otro lado.

Carrusel / control deslizante para la cuadrícula de GenerateBlocks y el bucle de consulta
Hemos añadido opciones a los bloques de Gutenberg que te permiten crear un carrusel o un control deslizante usando los bloques que prefieras. Los bloques compatibles incluyen GenerateBlocks Grid, GenerateBlocks Element, core/grupo y el bucle nativo de consulta de WordPress (core/query).

Para empezar a usar el carrusel, ve al bloque de cuadrícula o al bucle de consulta y selecciona la opción «Carrusel» o «Control deslizante» en la sección «Opción de cuadrícula de FrontBlocks».

Atributos del carrusel/control deslizante:
– Autoplay: cambia automáticamente las diapositivas después de un tiempo concreto (en segundos).
– Elementos a mostrar: configura el número de elementos para distintos tamaños de pantalla:
* Escritorio (>1200px): número de elementos que se muestran en pantallas de escritorio.
* Portátil (992px-1199px): número de elementos que se muestran en pantallas de portátil.
* Tablet (768px-991px): número de elementos que se muestran en pantallas de tablet.
* Móvil (<768px): número de elementos que se muestran en dispositivos móviles. - Botones: el tipo de botones a mostrar en el carrusel/control deslizante (puntos, flechas o ninguno). - Color del botón: color de los botones. - Color de fondo del botón: color de fondo de los botones (puede ser transparente).

Patrón de carrusel:
Te ofrecemos un patrón de carrusel para Sección destacada listo para usar, hecho con bloques nativos de WordPress Cover. Este patrón se registra automáticamente en la pestaña «Patrones» del editor de WordPress, dentro de la categoría «FrontBlocks». Solo tienes que hacer clic en el botón + del editor, ir a Patrones y buscar «Hero Carousel» o explorar la categoría de FrontBlocks. El patrón crea carruseles tipo Sección destacada de ancho completo con transiciones suaves, ideal para páginas de destino y contenido promocional. Incluye tres diapositivas personalizables con degradados, colores, encabezados, texto y botones de llamada a la acción. Mira la documentación para ver los detalles completos de implementación y las opciones de personalización.

Galería nativa de WordPress mejorada
Hemos añadido opciones a la galería nativa de WordPress que te permiten crear una disposición diferente, como cuadrícula o mosaico, y también activar un carrusel con imágenes en las que se puede hacer clic.

Animaciones para bloques
Puedes añadir animaciones a los bloques que quieras. Para hacer esto, ve a los ajustes del bloque y selecciona la sección «Opción de animación FrontBlocks». Allí encontrarás una lista de animaciones que puedes aplicar al bloque.

Las animaciones se basan en Animate.css: Buscadores de atención, Entradas traseras, Salidas traseras, Entradas rebotantes, Salidas rebotantes, Entradas desvanecidas, Salidas desvanecidas, Volteadores, Entradas rotativas, Salidas rotativas, Especiales, Entradas al ampliar, Salidas al ampliar, y Entradas deslizantes.

Efectos de contenedor
Aplica efectos de glassmorphism a cualquier bloque con una intensidad de desenfoque personalizable. En los ajustes del bloque, abre el panel “Efectos de contenedor” para activar el efecto de vidrio y ajusta el nivel de desenfoque (0-50 px) para conseguir un aspecto moderno de cristal esmerilado. El efecto incluye un fondo semitransparente, un borde sutil y una sombra suave, creando un diseño en capas precioso. Perfecto para Sección destacada, tarjetas y superposiciones.

Efectos al pasar el cursor
Añade efectos de ampliación suave a las imágenes de fondo cuando los usuarios pasan el cursor por encima de los elementos. Perfecto para cuadrículas de entradas, galerías y tarjetas. En los ajustes del bloque, abre el panel de «FrontBlocks Hover Effects» para activar el escalado del fondo. Características:
– Compatible con GenerateBlocks Query Loop (–inline-bg-image)
– Funciona con background-image estándar de CSS
– Cantidad de escala configurable de 1.0 a 2.0 (por defecto: 1.1 para un zoom del 110%)
– Transición suave de 0.4s con aceleración por GPU
– El contenido se mantiene legible y bien posicionado por encima de la imagen escalada
– La protección de overflow evita que las imágenes se salgan del contenedor

Columnas fijas:
La opción fija te permite hacer que una columna se quede adherida a la parte superior del área visible al desplazarte. Funciona tanto con bloques de GenerateBlocks Grid como con bloques nativos de WordPress. Activa la opción «Fijo» en los ajustes del bloque y la columna permanecerá fijada en la parte superior del área visible mientras el resto de la página se desplaza.

Insertar bloque de entrada:
Muestra contenido de otras entradas, páginas o tipos de contenido personalizados. Busca y selecciona cualquier contenido publicado para mostrar su título como H2 y el contenido completo. Perfecto para crear secciones de contenido dinámico sin duplicar contenido.

Decoración para el bloque de titular:
Añadir una línea decorativa al bloque de titular. Puedes elegir entre una línea vertical a la derecha o una línea horizontal a la derecha.

Titular Efecto Marquee:
Añadir un efecto marquee de desplazamiento infinito a los bloques de Titular/Texto. Funciona tanto con los bloques de Titular de GenerateBlocks como con los bloques nativos de WordPress de Encabezado/Párrafo. El texto se desplaza continuamente de derecha a izquierda, adaptándose automáticamente al ancho del contenedor. El texto corto se repite más veces y el texto largo menos. Características:
– Conmutador para activar o desactivar el efecto marquee
– Control de velocidad con tres preajustes: Rápido (10 s), Medio (20 s), Lento (40 s)
– Bucle infinito sin interrupciones, sin saltos
– Rellena automáticamente el ancho del contenedor con repeticiones de texto adecuadas
– Animación suave y fluida, optimizada para el rendimiento

Bloque de categorías de productos:
Muestra las categorías de productos de WooCommerce. Puedes elegir el número de categorías a mostrar, el orden y la forma de ordenar. También puedes optar por ocultar las categorías vacías. Además, puedes elegir cuántas columnas usar para mostrar las categorías. También puedes seleccionar el color de fondo, el color del borde, el grosor del borde, el radio del borde, el color del texto, el color de fondo al pasar el cursor, el color del borde al pasar el cursor y el color del texto al pasar el cursor.

Bloque de contador:
Muestra un contador con un valor inicial, un valor final y una duración. El contador aumentará desde el valor inicial hasta el valor final dentro del marco de tiempo especificado. Compatible con los bloques de texto de GenerateBlocks y los bloques de titulares, así como con los bloques nativos de WordPress núcleo/encabezado y núcleo/párrafo.

Testimonios:
Muestra testimonios de otras entradas, páginas o tipos de contenido personalizados. Busca y selecciona cualquier contenido publicado para mostrar su título como H2 y el contenido completo. Perfecto para crear secciones de contenido dinámico sin duplicar contenido.

Shortcode: [frontblocks_testimonials_carousel]

Bloque de tiempo de lectura:
Muestra el tiempo de lectura de una entrada. Puedes elegir el número de palabras por minuto para calcular el tiempo de lectura.
Shortcode: [frontblocks_reading_time]

Barra de progreso de lectura:
Muestra una barra de progreso vertical en el lado derecho de las entradas que se rellena a medida que los usuarios se desplazan por el contenido. La barra de progreso utiliza el color principal de tu sitio web y proporciona un indicador visual del progreso de lectura. Esta característica se puede activar o desactivar desde la página de ajustes de FrontBlocks en el administrador de WordPress.

Botón Atrás:
Muestra un botón flotante de volver en la esquina inferior izquierda que permita a los usuarios navegar a la página anterior. Actívalo desde la página de ajustes de FrontBlocks.

Tipografía fluida:
Convierte automáticamente los ajustes tipográficos estáticos de tu tema en una tipografía fluida moderna mediante CSS clamp(). En lugar de cambios bruscos del tamaño de fuente en los puntos de ruptura, esto crea una escalada suave y gradual desde móvil (320 px) hasta escritorio (1440 px). Compatible con todos los temas de WordPress.

Compatible con todos los elementos tipográficos configurados en GeneratePress:
– Body y párrafos (incluyendo los elementos de titular de GenerateBlocks)
– Todos los encabezados (H1-H6)
– Cada elemento mantiene sus propios valores responsivos
– Cero configuración – lee automáticamente del CSS dinámico de GeneratePress
– Transiciones suaves en todos los tamaños viewport sin saltos

Simplemente activa «Tipografía Fluida» en las opciones de FrontBlocks, ¡y toda tu tipografía adaptable se escalará sin problemas entre dispositivos!

Animaciones SVG personalizadas:
Añadir gráficos animados a los bloques Shape de GenerateBlocks y a los bloques nativos de iconos de WordPress importando archivos JSON. Admite dos formatos que se detectan automáticamente: Lottie/Bodymovin (importar JSON desde After Effects o LottieFiles.com) y CSS personalizado (SVG + @keyframes).

Bloque de animación de texto:
Añade efectos dinámicos de texto animado a cualquier página o entrada. Inserta el bloque desde el inserter de Gutenberg dentro de la categoría FrontBlocks y elige entre más de 30 tipos de animación para que tus encabezados y tu texto destaquen.

Tipos de animación disponibles:
– Efectos de entrada: desvanecer, desenfocar, escalar, rebotar, caer, rodar, girar, voltear, rotar, resplandecer, deslizar arriba, deslizar abajo, deslizar izquierda, deslizar derecha
– Revelados de texto: máquina de escribir, revelar en bloques, expandir con seguimiento, escribir en terminal, revelar aleatorio, barajar texto
– Efectos de atención: pulso, destello, goma elástica, onda, balanceo, estiramiento, compresión
– Efectos creativos: glitch, glitch-rgb, parpadeo, gota de agua, salto de sombra, contorno sólido

Características:
– Vista previa animada en tiempo real directamente en el editor Gutenberg.
– Controles tipográficos completos: etiquetas de encabezado (H1–H6, p, span), familia de fuentes, tamaño, grosor, estilo y color.
– Controles de color de fondo y relleno/márgenes.
– Opciones de ancho máximo y alineación del texto.
– Control de velocidad para cada animación.

Bloque de comparación antes/después:
Muestra un control deslizante de comparación de imágenes interactivo que deja a los visitantes arrastrar un asa para revelar la diferencia entre dos imágenes. Perfecto para enseñar cambios de look, resultados de retoque, trabajos de renovación o cualquier transformación visual. Añade el bloque desde el insertador de Gutenberg, dentro de la categoría FrontBlocks.

Características:
– Sube imágenes independientes de «Antes» y «Después» desde la biblioteca de medios de WordPress.
– Tirador arrastrable con flechas izquierda/derecha, también controlable con teclado para mejorar la accesibilidad.
– Etiquetas personalizables sobre cada imagen. Por defecto: «Antes» / «Después».
– Control de la posición inicial del deslizador (0–100%) para elegir cuánto se muestra de cada imagen al cargar.
– Modo de altura fija con valor configurable en píxeles, para mantener el bloque compacto independientemente de las proporciones de las imágenes.

Subidas de SVG:
Sube archivos SVG directamente a la biblioteca de medios de WordPress. Solo los administradores pueden subir archivos SVG. Todos los archivos se desinfectan automáticamente en la subida: se eliminan elementos peligrosos (<script>, <iframe>, <object>, <embed>) y atributos de manejadores de eventos (on*) antes de guardarlos, protegiendo contra ataques XSS.

Bloque de acceso:
Añade un bloque nativo de formulario de acceso de Gutenberg en cualquier página o entrada. Inserta el bloque desde el inserter de Gutenberg dentro de la categoría FrontBlocks. Incluye una conmutador para alternar entre las vistas de formulario de acceso y formulario de registro, con etiquetas y estilos totalmente personalizables. Ideal para sitios de membresía o páginas que requieran una experiencia de acceso limpia e integrada sin un shortcode.

Post Meta (Nativo) — FrontBlocks PRO:
Muestra valores de campos personalizados desde el meta de la entrada dentro de bloques nativos de WordPress directamente en el editor. Elige cualquier clave de meta registrada y muestra su valor integrado dentro de encabezados, párrafos u otros bloques de texto, sin shortcodes ni código PHP personalizado necesario. Útil para mostrar datos dinámicos como precios, fechas o cualquier campo personalizado guardado en el meta de la entrada. Disponible en FrontBlocks PRO.

Schema de FAQ (JSON-LD):
Genera automáticamente datos estructurados de FAQPage para los motores de búsqueda. Activa el conmutador «Schema de FAQ» en cualquier bloque tipo acordeón (núcleo/detalles) para marcarlo como un elemento de FAQ. FrontBlocks recopila todos los elementos activados en la página y genera un script JSON-LD válido de FAQPage en el pie de página, mejorando tus posibilidades de aparecer como resultado enriquecido en Google Search.

Estructura / disposición / diseño / plantilla integrada de Gravity Forms:
Muestra Gravity Forms con campos y botones en la misma línea. Perfecto para formularios de suscripción al boletín (correo electrónico + botón de suscribirse) o formularios de búsqueda (entrada + botón de buscar).

Para usar esta característica:
1. Selecciona un formulario en el bloque de Gravity Forms.
2. Busca el panel «FrontBlocks Gravity Form Options» en los ajustes del bloque, donde podrás:
– Activar la estructura/disposición/diseño/plantilla integrada con un simple conmutador
– Ajustar el espacio entre elementos (0-50 px)
– Diseño adaptable: se apilan automáticamente en dispositivos móviles.

Esta característica elimina la necesidad de CSS personalizado para conseguir formularios con diseños integrados.

Bloque de imágenes apiladas:
Muestra un conjunto de imágenes con un efecto de apilamiento animado. Las imágenes aparecen superpuestas entre sí y se animan desde una dirección configurable (arriba, abajo, izquierda o derecha). Inserta el bloque desde el inserter de Gutenberg dentro de la categoría FrontBlocks y sube varias imágenes. Características:
– Duración de la animación configurable y retraso entre cada imagen.
– Control de la altura del contenedor para adaptarse a cualquier estructura.
– Animaciones de entrada fluidas impulsadas por CSS/JS sin dependencias.

Eventos:
Registra y gestiona eventos directamente desde WordPress. Activa la característica de Eventos desde la página de ajustes de FrontBlocks y elige entre dos modos: un tipo de contenido personalizado (con su propio menú y taxonomía de categoría) o guardar los eventos como entradas normales. Cada evento incluye campos meta para:
– Conmutador de todo el día
– Fecha y hora de inicio y fin
– Coste
– URL del sitio web del evento

Banner de recomendación de idioma:
Muestra un banner inteligente que detecta el idioma del navegador del visitante y sugiere cambiar a la versión del sitio que coincida. Activa el banner desde la página de ajustes de FrontBlocks. El banner solo aparece cuando el sitio tiene una versión traducida que coincide con el idioma del navegador del usuario y respeta la acción de descartar del usuario mediante una cookie.

Características de WooCommerce:
Características incluidas para WooCommerce FrontBlocks PRO.

FrontBlocks PRO:
FrontBlocks PRO es un plugin premium que amplía la funcionalidad de FrontBlocks. Incluye características adicionales y mejoras sobre la versión gratuita.

**Características:**
– Activar Gutenberg en el editor de producto.
– Activar precios simples para productos variables.
– Bloque añadido después del botón.
– Comportamiento de la descripción del producto.
– Desactivar el zoom en la imagen del producto.
– Botones de compartir.
– **Maquetador de Tipos de Contenido Personalizados:** Crear y gestionar tipos de contenido personalizados con opciones de configuración avanzadas:
– Crear tipos de contenido personalizados con una interfaz sencilla desde la página de ajustes de FrontBlocks
– Configurar el comportamiento del tipo de contenido (estilo Entrada o Página: jerárquico o no)
– Activar/desactivar la taxonomía de categorías para cada tipo de contenido personalizado
– Añadir campos meta personalizados con varios tipos de campo (Texto, Textarea, URL, Fecha, Archivo, Número, Correo electrónico)
– Página de ajustes individual para cada tipo de contenido personalizado accesible desde el menú del tipo de contenido
– Eliminar tipos de contenido personalizados fácilmente con un solo clic
– Desactivar pestañas en la página de producto.
– Estructura horizontal del formulario del producto (precio, cantidad y botón “añadir al carrito” en una sola fila).
– **Checkout integrado:** Mostrar campos de facturación/envío (correo electrónico + teléfono, línea de dirección 1 + línea de dirección 2) lado a lado en una estructura de dos columnas. Compatible con Finalizar compra integrado (WooCommerce 8+) y checkout mediante shortcode heredado.
– **Desplazamiento de página completa:** Crear experiencias de desplazamiento de página completa con navegación suave sección a sección y puntos de navegación laterales automáticos. Perfecto para páginas de destino, porfolios y presentaciones.
– **Patrones de pie de página:** Patrones de bloque de pie de página listos para usar (3 columnas, 4 columnas, contacto en Sección destacada) para WordPress nativo y Gutenberg.
– **Bloque de acceso:** Bloque nativo de Gutenberg para formularios de acceso y registro de usuarios, con etiquetas y estilos personalizables.
– **Popup nativa:** Sistema nativo de ventanas emergentes con múltiples condiciones de activación (intención de salida, porcentaje de desplazamiento, retraso de tiempo, al hacer clic), animaciones de entrada, overlay y control de frecuencia basado en cookie.

Más información en la página de FrontBlocks PRO.

1.4.0

• “Añadido: Patrón de carrusel — patrón de Sección destacada de carrusel listo para usar con bloques de Portada nativos de WordPress, registrado en la pestaña de Pestaña bajo la categoría FrontBlocks.”
• Añadido: banner de recomendación de idioma: integración de ajustes para activar un banner inteligente que sugiera cambiar al idioma del navegador del usuario.
• «Añadido: Escala de fondo al pasar el cursor — añade un efecto de zoom suave en las imágenes de fondo al situar el cursor sobre los bloques (bucle de consulta GenerateBlocks y fondos CSS estándar).»
• Mejorado: editor de carrusel: interfaz del editor de carrusel renovada con vista previa en vivo y panel de opciones avanzadas mejorado.
• Mejorado: carga condicional de activos — los scripts y los estilos de Animations, Carousel, Counter, ContainerEdgeAlignment, GravityFormsInline, Headline, InsertPost, ShapeAnimations y StickyColumn solo se cargan (en cola) en las páginas donde se utiliza la característica.
• Mejorado: los ajustes se han movido a una página secundaria del submenú Apariencia para una mejor organización.
• Corregido: conflictos de CSS de la estructura/disposición en línea del acordeón/Gravity Forms.
• Corregido: corrección de la visualización del carrusel, los puntos y los problemas de JavaScript.
• Corregido: Accesibilidad de los puntos del carrusel: se han añadido atributos `aria-label` y se ha ampliado el área clicable.
• Añadido: [PRO] Finalizar compra integrado — muestra los campos del formulario de pago de WooCommerce (correo/teléfono y líneas de dirección) uno al lado del otro en una estructura de dos columnas. Compatible tanto con Finalizar compra mediante bloques (WooCommerce 8+) como con el pago mediante shortcode heredado.
• “Añadido: [PRO] mensaje / ventana emergente nativa — sistema nativo de mensajes / ventanas emergentes con condiciones de activación (intención de salida, porcentaje de desplazamiento, demora de tiempo, hacer clic), animaciones, superposición y control de frecuencia basado en cookie.”
• “Añadido: [PRO] Campos Meta Nativos — muestra valores personalizados de meta de la entrada dentro de los bloques nativos de WordPress directamente desde el …”