Title: FrontBlocks para Gutenberg y GeneratePress
Author: closemarketing
Published: <strong>11 de febrero de 2024</strong>
Last modified: 13 de mayo de 2026

---

Buscar plugins

![](https://ps.w.org/frontblocks/assets/banner-772x250.png?rev=3035560)

![](https://ps.w.org/frontblocks/assets/icon-256x256.png?rev=3035560)

# FrontBlocks para Gutenberg y GeneratePress

 Por [closemarketing](https://profiles.wordpress.org/closemarketing/)

[Descargar](https://downloads.wordpress.org/plugin/frontblocks.1.3.4.zip)

 * [Detalles](https://es.wordpress.org/plugins/frontblocks/#description)
 * [Valoraciones](https://es.wordpress.org/plugins/frontblocks/#reviews)
 *  [Instalación](https://es.wordpress.org/plugins/frontblocks/#installation)
 * [Desarrollo](https://es.wordpress.org/plugins/frontblocks/#developers)

 [Soporte](https://wordpress.org/support/plugin/frontblocks/)

## Descripción

**Container Edge Alignment for GenerateBlocks**
 Add custom controls to GenerateBlocks
Container blocks to remove padding from the left or right side, creating edge-to-
edge layouts. This feature only appears for containers using GeneratePress global
max-width settings, perfect for creating asymmetric layouts where content extends
to one browser edge while maintaining proper spacing on the other side.

**Carrusel/control deslizante para la cuadrícula de GenerateBlocks**
 Hemos añadido
opciones a los bloques de Gutenberg que te permiten crear un carrusel o control 
deslizante con los bloques que quieras.

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

Carousel/Slider attributes:
 – Autoplay: automatically changes the slides after 
a certain amount of time (in seconds). – Items to view: configure the number of 
items to display for different screen sizes: * Desktop (>1200px): number of items
to show on desktop screens. * Laptop (992px-1199px): number of items to show on 
laptop screens. * Tablet (768px-991px): number of items to show on tablet screens.*
Mobile (<768px): number of items to show on mobile devices. – Buttons: the type 
of buttons to display in the carousel/slider (bullets, arrows or none). – Button
colour: colour of the buttons. – Button background colour: background colour of 
the buttons (can be transparent).

**Carousel Pattern:**
 We provide a ready-to-use Hero Carousel pattern using native
WordPress Cover blocks. This pattern is automatically registered in the WordPress
editor’s «Patterns» tab under the «FrontBlocks» category. Simply click the + button
in the editor, go to Patterns, and search for «Hero Carousel» or browse the FrontBlocks
category. The pattern creates full-width hero sliders with smooth transitions, perfect
for landing pages and promotional content. It includes three customizable slides
with gradients, colors, headings, text, and call-to-action buttons. See the documentation
for complete implementation details and customization options.

**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](https://animate.style/): 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.

**Container Effects**
 Apply glassmorphism effects to any block with customizable
blur intensity. In the block settings, open the ‘Container Effects’ panel to enable
the glass effect and adjust the blur level (0-50px) for a modern, frosted glass 
appearance. The effect includes a semi-transparent background, subtle border, and
soft shadow, creating a beautiful layered design. Perfect for hero sections, cards,
and overlays.

**Hover Effects**
 Add smooth zoom effects to background images when users hover
over elements. Perfect for post grids, galleries, and cards. In the block settings,
open the ‘FrontBlocks Hover Effects’ panel to enable background scaling. Features:–
Compatible with GenerateBlocks Query Loop (–inline-bg-image) – Works with standard
CSS background-image – Configurable scale amount from 1.0 to 2.0 (default: 1.1 for
110% zoom) – Smooth 0.4s transition with GPU acceleration – Content remains readable
and properly positioned above the scaled image – Overflow protection ensures images
don’t extend beyond container

**Opción fija para el bloque de cuadrícula:**
 La opción fija te permite hacer que
el bloque de cuadrícula se quede en la parte superior del área visible al desplazarte
hacia abajo. Para usar esta característica, tendrás la opción en los ajustes del
bloque de cuadrícula para activar la opción «Fijo». Cuando esté activado, el bloque
de cuadrícula permanecerá fijo en la parte superior del área visible mientras te
desplazas hacia abajo en la página.

**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.

**Efecto de Headline en Marquee:**
 Agrega un efecto de marquee de desplazamiento
infinito a los bloques de Headline/Textos. 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, mientras que el texto largo se repite menos. Funciones:–
Cambiar a activado/desactivado el efecto de marquee – Control de velocidad con preajustes:
Rápido (10s), Medio (20s), Lento (40s) – Bucle infinito sin saltos ni interrupciones–
Rellena automáticamente el ancho del contenedor con las 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 irá incrementándose desde el valor inicial hasta el 
valor final en la duración establecida.

**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]

**Reading Progress Bar:**
 Display a vertical progress bar on the right side of 
posts that fills up as users scroll through the content. The progress bar uses your
website’s primary color and provides a visual indicator of reading progress. This
feature can be enabled/disabled from the FrontBlocks settings page in the WordPress
admin.

**Back Button:**
 Display a floating back button in the bottom left corner that 
allows users to navigate to the previous page. Enable it from the FrontBlocks settings
page.

**Tipografía Fluida:**
 Convierte automáticamente las opciones de tipografía estática
de GeneratePress Pro en una tipografía fluida y moderna usando CSS clamp(). En lugar
de cambios bruscos en el tamaño de la fuente en los puntos de ruptura, esto crea
un escalado suave y gradual desde móvil (320px) hasta escritorio (1440px).

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!

**Custom SVG Animations:**
 Add animated graphics to GenerateBlocks Shape blocks
by importing JSON files. Supports two formats that are automatically detected: **
Lottie/Bodymovin** (import JSON from After Effects or LottieFiles.com) and **Custom
CSS** (SVG + @keyframes).

**Text Animation Block:**
 Add dynamic animated text effects to any page or post.
Insert the block from the Gutenberg inserter under the FrontBlocks category and 
choose from 30+ animation types to make your headings and copy stand out.

Animation types available:
 – Entrance effects: fade-in, blur-in, scale-in, bounce-
in, drop-in, roll-in, flip-in, rotate-in, glow-in, slide-up, slide-down, slide-left,
slide-right – Text reveals: typewriter, block-reveal, tracking-expand, terminal-
type, random-reveal, shuffle-text – Attention effects: pulse, flash, rubber-band,
wave, swing, stretch, squeeze – Creative effects: glitch, glitch-rgb, flicker, water-
drop, shadow-pop, solid-outline

Features:
 – Live animated preview directly in the Gutenberg editor. – Full typography
controls: heading tag (H1–H6, p, span), font family, size, weight, style, and color.–
Background color and padding/margin controls. – Max-width and text alignment options.–
Speed control for each animation.

**Before/After Comparison Block:**
 Display an interactive image comparison slider
that lets visitors drag a handle to reveal the difference between two images. Perfect
for showcasing makeovers, retouching results, renovation work, or any visual transformation.
Add the block from the Gutenberg inserter under the FrontBlocks category.

Features:
 – Upload separate «Before» and «After» images from the WordPress media
library. – Draggable handle with left/right arrows — also controllable via keyboard
for accessibility. – Customizable labels displayed over each image (default: «Before»/«
After»). – Initial slider position control (0–100%) to choose how much of each image
is revealed on load. – Fixed height mode with a configurable pixel value, keeping
the block compact regardless of image proportions.

**Gravity Forms Inline Layout:**
 Display Gravity Forms with fields and buttons 
on the same line. Perfect for newsletter signup forms (email + subscribe button)
or search forms (input + search button).

To use this feature:
 1. Select a form in the Gravity Forms block 2. Find the «FrontBlocks
Gravity Form Options» panel in the block settings where you can: – Enable inline
layout with a simple toggle – Adjust the gap between elements (0-50px) – Responsive
design: automatically stacks on mobile devices

This feature eliminates the need for custom CSS to achieve inline form layouts.

**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.

Features:
 – Enable Gutenberg in the product editor. – Enable simple prices for 
variable products. – Block added after button. – Product description behaviour. –
Disable zoom on product image. – Share buttons. – Custom Post Types Builder: Create
and manage custom post types with advanced configuration options: * Create custom
post types with a simple interface from the FrontBlocks settings page * Configure
post type behavior (Post or Page style – hierarchical or not) * Enable/disable categories
taxonomy for each custom post type * Add custom meta fields with multiple field 
types (Text, Textarea, URL, Date, File, Number, Email) * Individual settings page
for each custom post type accessible from the post type menu * Delete custom post
types easily with a single click – Disable tabs on the product page. – Horizontal
product form layout (price, quantity, and add to cart button in one row). – Full
Page Scroll: Create fullpage scroll experiences with smooth section-by-section navigation
and automatic side navigation dots. Perfect for landing pages, portfolios, and presentations.

More information in the [FrontBlocks PRO](https://close.technology/en/wordpress-plugins/frontblocks-pro/?utm_source=WordPressORGReadme&utm_medium=link&utm_campaign=frontblocks)
page.

### 1.3.4

* Added: Text Animation block with 30+ animation types — fade-in, typewriter, shuffle-
text, slide-up/down/left/right, drop-in, swing, pulse, flash, rubber-band, wave,
stretch, squeeze, roll-in, glitch, glitch-rgb, random-reveal, flicker, block-reveal,
tracking-expand, terminal-type, solid-outline, water-drop, shadow-pop, scale-in,
blur-in, glow-in, bounce-in, flip-in, rotate-in.
 * Added: Text Animation block —
full typography controls (tag, font family, size, weight, style, color, background,
alignment, padding, margin, max-width). * Added: Text Animation block — live animated
preview in the Gutenberg editor. * Added: Before/After Comparison block — interactive
drag-to-reveal image comparison with customizable labels, initial position, and 
fixed height mode. * Added: Before/After block — keyboard-accessible draggable handle
with left/right arrow indicators. * Improved: Conditional asset loading for Carousel,
Animations, Text Animation, and Before/After — scripts/styles only enqueue on pages
where the feature is used.

### 1.3.3

 * Fixed: Carousel bullets display and behavior.
 * Fixed: Carousel editor styling and functionality.
 * Fixed: Carousel in native (core) blocks.
 * Fixed: Carousel JavaScript and CSS issues.
 * Fixed: Stacked images block display.
 * Fixed: Accordion in Gravity Forms inline layout.
 * Improved: Carousel styles – updated classes and removed unnecessary declarations.
 * Improved: Settings page and carousel advanced options.
 * Improved: Shape animations option component.
 * Improved: PHPStan compliance and code quality.

### 1.3.2

 * Added: FrontBlocks Hover Effects – Smooth background image zoom on hover for 
   Query Loops, grids, and cards.
 * Added: Configurable scale amount (1.0-2.0) for hover background zoom effect.
 * Added: Support for GenerateBlocks –inline-bg-image and standard CSS background-
   image.
 * Added: GPU-accelerated smooth transitions (0.4s) for optimal performance.
 * Added: Hero Carousel Pattern – Ready-to-use block pattern automatically registered
   in WordPress Patterns tab.
 * Added: Pattern includes 3 full-width hero slides with customizable gradients,
   headings, text, and CTA buttons.
 * Added: One-click pattern insertion under «FrontBlocks» category in block editor.
 * Added: Pattern searchable by keywords: carousel, hero, slider, banner, header.
 * Improved: Carousel single-slide view now displays full width (100%) instead of
   50% of two slides.
 * Improved: Dynamic gap calculation – 0px gap when showing 1 slide, 20px gap for
   multiple slides.
 * Improved: Smooth carousel transitions with cubic-bezier easing for fluid animations.
 * Improved: Carousel responsive behavior with proper width and spacing across all
   devices.
 * Fixed: Carousel appearing blank/white when initialized.
 * Fixed: Slides being cut in half or showing partial content.
 * Fixed: Autoplay not respecting empty or zero values.
 * Improved: Increased carousel bullet size from 9px to 13px for better accessibility
   and easier interaction.
 * Improved: Updated carousel bullets spacing using CSS gap property for more consistent
   layout.
 * Added: Fluid Typography – Automatically converts GeneratePress typography to 
   smooth fluid scaling using CSS clamp().
 * Added: Support for all typography elements (body, h1-h6) with individual responsive
   values.
 * Added: Smart detection of multi-selector CSS patterns (body, button, input, textarea).
 * Added: Automatic conversion from static breakpoints to fluid viewport scaling(
   320px-1440px).
 * Added: High specificity CSS to properly override GenerateBlocks inline styles.
 * Added: Debug mode for Fluid Typography troubleshooting (?frbl_debug=1).
 * Improved: Better CSS parsing for media queries and responsive font sizes.
 * Added: Full Page Scroll toggle in settings (PRO feature).
 * PRO: Full Page Scroll – Create smooth fullpage scroll experiences with automatic
   section navigation.
 * PRO: Side navigation with dots that updates automatically as you scroll.
 * PRO: Smooth scroll between sections with mouse wheel control.
 * PRO: Responsive design with mobile-optimized navigation.
 * Improved: Carousel/Slider – Added individual controls for desktop, laptop, tablet,
   and mobile view items instead of hardcoded values.

### 1.3.1

 * Improved: Custom SVG Animations now uses file upload instead of textarea for 
   importing JSON files.
 * Added: Download example JSON button for Custom SVG Animations feature.
 * Added: Clear button to remove imported animation files.
 * Added: Visual file name display with icon for imported JSON files.
 * Improved: Better user experience with file import workflow for Shape animations.
 * Fixed: File input now properly resets after clearing, allowing immediate re-import
   of files.

### 1.3.0

 * Added: Container Effects with Glass Effect (Glassmorphism) – Apply customizable
   glass effect with adjustable blur intensity (0-50px) to any block.
 * Improved: Complete redesign of the Settings page with modern card-based layout.
 * Improved: Each feature now displays in its own card with icon, title, and toggle
   switch.
 * Improved: PRO features show distinctive badge in the top-left corner.
 * Improved: Responsive grid layout that adapts to mobile, tablet, and desktop screens.
 * Improved: License section displays as full-width card for better visibility.
 * Added: Container Edge Alignment – Remove padding from left or right side of GenerateBlocks
   containers to create asymmetric edge-to-edge layouts (only for containers using
   GeneratePress global max-width).
 * Added: Custom Animations for Shapes – Full Lottie/Bodymovin support + custom 
   CSS animations via JSON. Auto-detects format.
 * Added: Lottie-web library integration for After Effects animations.
 * Added: Gravity Forms Inline Layout option for displaying fields and buttons on
   the same line.
    …

## Capturas

 * [[
 * [[
 * [[
 * [[
 * [[
 * [[

## Bloques

Este plugin proporciona 6 bloques.

 *   Before After
 *   Product Categories
 *   Text Animation
 *   Stacked Images
 *   Reading Time
 *   Insert Post

## Instalación

 1. Go to Plugins > Add New > Search for «FrontBlocks» > Install and Activate.
 2. Go to Settings > FrontBlocks > Features and enable the features you want to use.

## Reseñas

![](https://secure.gravatar.com/avatar/407a0a5b5e80c78e7c9083f4374d9606c074626f2774af75ffdb1a10ff946713?
s=60&d=retro&r=g)

### 󠀁[The perfect plugin to do everything quickly](https://wordpress.org/support/topic/the-perfect-plugin-to-do-everything-quickly/)󠁿

 [Álvaro Dallas](https://profiles.wordpress.org/alvarodallas/) 29 de agosto de 2025

This is one of my favorite plugins for layouts. It saves me time and stops me from
adding extra code that makes the website messy. 👌

![](https://secure.gravatar.com/avatar/3089ff1456a3ba047f6b20713c8828dc7cec818fb0775415d83da1249ee047d2?
s=60&d=retro&r=g)

### 󠀁[Very useful](https://wordpress.org/support/topic/very-useful-3653/)󠁿

 [Mariano Pérez Caro](https://profiles.wordpress.org/mpcdigital/) 15 de agosto de
2025

It works wonderfully. There aren’t many carousel plugins that work as well as this
one.

 [ Leer todas las 2 reseñas ](https://wordpress.org/support/plugin/frontblocks/reviews/)

## Colaboradores y desarrolladores

«FrontBlocks para Gutenberg y GeneratePress» es un software de código abierto. Las
siguientes personas han colaborado con este plugin.

Colaboradores

 *   [ closemarketing ](https://profiles.wordpress.org/closemarketing/)
 *   [ David Perez ](https://profiles.wordpress.org/davidperez/)
 *   [ Sacra Jﾃ｡imez ](https://profiles.wordpress.org/sacrajaimez/)
 *   [ Alex Brea ](https://profiles.wordpress.org/alexbreagarcia/)
 *   [ Matﾃｭas Quero ](https://profiles.wordpress.org/matiasquero/)
 *   [ A. Mulero ](https://profiles.wordpress.org/amulero/)
 *   [ mit2sumit ](https://profiles.wordpress.org/mit2sumit/)
 *   [ Alejandro Castellﾃｳn Martﾃｭnez ](https://profiles.wordpress.org/alexcm13/)

«FrontBlocks para Gutenberg y GeneratePress» está traducido en 2 idiomas. Gracias
a [los traductores](https://translate.wordpress.org/projects/wp-plugins/frontblocks/contributors)
por sus contribuciones.

[Traduce «FrontBlocks para Gutenberg y GeneratePress» a tu idioma.](https://translate.wordpress.org/projects/wp-plugins/frontblocks)

### ¿Interesado en el desarrollo?

[Revisa el código](https://plugins.trac.wordpress.org/browser/frontblocks/) , echa
un vistazo al [repositorio SVN](https://plugins.svn.wordpress.org/frontblocks/) 
o suscríbete al [registro de desarrollo](https://plugins.trac.wordpress.org/log/frontblocks/)
por [RSS](https://plugins.trac.wordpress.org/log/frontblocks/?limit=100&mode=stop_on_copy&format=rss).

## Meta

 *  Versión **1.3.4**
 *  Última actualización **hace 1 día**
 *  Instalaciones activas **400+**
 *  Versión de WordPress ** 5.0 o superior **
 *  Probado hasta **7.0**
 *  Versión de PHP ** 7.0 o superior **
 *  Idiomas
 * [English (US)](https://wordpress.org/plugins/frontblocks/), [Spanish (Chile)](https://cl.wordpress.org/plugins/frontblocks/)
   y [Spanish (Spain)](https://es.wordpress.org/plugins/frontblocks/).
 *  [Traducir a tu idioma](https://translate.wordpress.org/projects/wp-plugins/frontblocks)
 * Etiquetas:
 * [generatepress](https://es.wordpress.org/plugins/tags/generatepress/)[gutenberg](https://es.wordpress.org/plugins/tags/gutenberg/)
   [lightweight](https://es.wordpress.org/plugins/tags/lightweight/)[slider](https://es.wordpress.org/plugins/tags/slider/)
 *  [Vista avanzada](https://es.wordpress.org/plugins/frontblocks/advanced/)

## Valoraciones

 5 de 5 estrellas.

 *  [  2 valoraciones de 5 estrellas     ](https://wordpress.org/support/plugin/frontblocks/reviews/?filter=5)
 *  [  0 valoraciones de 4 estrellas     ](https://wordpress.org/support/plugin/frontblocks/reviews/?filter=4)
 *  [  0 valoraciones de 3 estrellas     ](https://wordpress.org/support/plugin/frontblocks/reviews/?filter=3)
 *  [  0 valoraciones de 2 estrellas     ](https://wordpress.org/support/plugin/frontblocks/reviews/?filter=2)
 *  [  0 valoraciones de 1 estrellas     ](https://wordpress.org/support/plugin/frontblocks/reviews/?filter=1)

[Your review](https://wordpress.org/support/plugin/frontblocks/reviews/#new-post)

[Ver todas las valoraciones](https://wordpress.org/support/plugin/frontblocks/reviews/)

## Colaboradores

 *   [ closemarketing ](https://profiles.wordpress.org/closemarketing/)
 *   [ David Perez ](https://profiles.wordpress.org/davidperez/)
 *   [ Sacra Jﾃ｡imez ](https://profiles.wordpress.org/sacrajaimez/)
 *   [ Alex Brea ](https://profiles.wordpress.org/alexbreagarcia/)
 *   [ Matﾃｭas Quero ](https://profiles.wordpress.org/matiasquero/)
 *   [ A. Mulero ](https://profiles.wordpress.org/amulero/)
 *   [ mit2sumit ](https://profiles.wordpress.org/mit2sumit/)
 *   [ Alejandro Castellﾃｳn Martﾃｭnez ](https://profiles.wordpress.org/alexcm13/)

## Soporte

¿Tienes algo que decir? ¿Necesitas ayuda?

 [Ver el foro de soporte](https://wordpress.org/support/plugin/frontblocks/)

## Donar

¿Te gustaría apoyar el progreso de este plugin?

 [ Dona a este plugin ](https://close.marketing/go/donate/)