GreenShift - Animation and Page Builder Blocks

Montar una página con animaciones llamativas suele acabar igual: el diseño queda bien, pero el informe de velocidad de Google se llena de avisos por scripts, hojas de estilo y librerías que cargan aunque no se usen. GreenShift parte de ese problema: añade bloques y animaciones al editor de bloques de WordPress sin arrastrar frameworks, fuentes de iconos ni librerías de scripts.

El problema real de las webs animadas: pagas el peso aunque no lo uses

El coste de un page builder no está en lo que añades, sino en lo que se carga por defecto. GreenShift genera cada recurso al vuelo y lo carga solo si lo usas en esa página. Los estilos se dividen en fragmentos, las librerías dinámicas no dependen de jQuery y los estilos van en línea en la cabecera para evitar saltos de maquetación y choques con plugins de caché.

Un recorrido con GreenShift: de una landing en blanco a una página con movimiento

Paso 1: partir de una sección ya hecha

Dentro del editor de bloques puedes importar secciones y diseños de su biblioteca, compatible con edición completa del sitio (FSE). Para traerlos, el plugin consulta la biblioteca de plantillas en un servicio externo, así que necesitas conexión en ese momento.

Paso 2: ajustar la maquetación

Tienes contenedores avanzados, filas, flexbox y CSS grid, con ayudas visuales en el editor para cambiar posición, espacios, bordes y tamaño. Los valores se pueden fijar por resolución, con cuatro puntos de ruptura y modo de vista previa.

Paso 3: darle movimiento

• Animaciones CSS al hacer scroll y transiciones al pasar el ratón, sin librerías.
• Fondos con color, degradado o vídeo, y superposiciones con transición.
• Capas de interacción: disparadores, condiciones y acciones sobre los bloques.
• Efectos en titulares, divisores con forma, transformaciones CSS (también 3D) y sombras predefinidas.

Paso 4: pensar en el móvil

Puedes convertir columnas en elementos con desplazamiento horizontal o en carruseles en el móvil, para un aspecto tipo aplicación. También hay bloques de slider, pestañas, paneles laterales deslizantes, popups y un visor 3D (AR/VR) más un bloque de Spline3d.

Paso 5: datos dinámicos

Con los repetidores y el bloque Meta getter puedes mostrar valores de campos personalizados, metadatos de usuario, opciones del sitio o feeds externos. Hay además opciones de visibilidad por bloque.

Lo que se queda fuera del plugin base

Algunas cosas pertenecen a complementos aparte según el tipo de web:

• Animation addon: parallax, disparadores avanzados (scroll, hover, clic, stagger, batch), bloques fijados durante el scroll, Lottie, Rive y animaciones de texto y SVG basadas en GSAP.
• Query addon: patrones para el bloque Query Loop, listados tipo directorio y constructor de bucles para tipos de contenido personalizados.
• SEO and Marketing addon: bloques para sitios de afiliación, reseñas y comparativas.
• WooCommerce addon: bloques de tienda como botón de compra directa, bundles, muestras de variación y búsqueda ajax.

Si tu proyecto es una tienda o un directorio, revisa qué bloques necesitas antes de decidir, porque no vienen en el plugin base. Además, el conversor de cualquier página web a bloques requiere el plan AIO.

Si ya usas otro editor: bloques como shortcode

No hace falta abandonar tu page builder. Puedes crear plantillas reutilizables, y el plugin genera un shortcode para usarlas donde Gutenberg no controla el contenido. También se pueden cargar bloques de forma diferida cuando entran en pantalla o al hacer clic o pasar el ratón, útil en páginas pesadas.

Preguntas frecuentes sobre GreenShift

¿Funciona con cualquier theme?

Con los que siguen los estándares de código de WordPress. Se recomiendan los themes optimizados para Gutenberg y los de edición completa del sitio.

¿Puedo combinarlo con otros plugins de bloques?

Sí, todo se basa en bloques, así que convive con bloques de otros plugins.

¿Sirve para crear código sin saber programar?

Sí, las animaciones y estilos se configuran desde el editor sin escribir código.

¿Puedo traer diseños de Figma?

Sí, hay un conversor de Figma a bloques de GreenShift. También existe un asistente de IA que usa tus propias claves de API con el proveedor que elijas.