Manual base
Qué es OLObuild, cómo está construido y por qué soporta 187 tiles con un solo motor. Cinco capítulos, luego la ficha técnica.
Qué es OLObuild
OLObuild es el chasis de la suite: un page builder para WordPress en el que cada elemento de la página es un tile: un bloque autónomo con sus propios campos, sus propias animaciones y su propio render. La biblioteca cuenta 187 tiles en 12 familias (más de 100 ya en la versión Free), todos sobre el mismo motor.
No es un tema con shortcodes ni un builder genérico con add-ons de pago: animaciones, efectos de texto, hover y parallax forman parte de cada tile de serie. Está construido como una app moderna, no como un tema.
Arquitectura basada en tiles
Cada tile es una clase PHP Olo_<Name>_Tile que hereda de Olo_Tile_Base y renderiza en el servidor: el HTML sale ya listo, sin generación en tiempo de ejecución en el navegador.
- Auto-discovery: los tiles se registran solos vía
import.meta.glob: añadir un tile significa crear dos archivos (config JS del panel + clase PHP). Sin compilación, sin shortcodes. - Helpers centralizados:
Olo_Tile_UtilsyOlo_Text_Effectsmantienen el código DRY en los 187 tiles. - Scoped styles: cada instancia tiene un UID único (
olo-XXX-12345): el CSS queda confinado, sin fugas entre instancias. - Hover por instancia: las clases UID resuelven el clásico bug "el primer elemento hereda el hover del último".
Herencia gratuita — Cada tile hereda del chasis animaciones de entrada, efectos de texto, hover, visibilidad condicional y responsive en 6 breakpoints, sin escribir una línea más.
Dentro del builder
El editor visual es una app Vue 3 (Composition API) con store Pinia y build Vite 5. El texto se edita en línea con Tiptap (barra flotante), el drag & drop usa Pragmatic drag-and-drop: 5 kb frente a los 80 kb de las alternativas.
- REST API con namespace limpio
olo/v1. - Dos tablas dedicadas:
wp_olo_templatesywp_olo_revisions: sin abuso de postmeta, revisiones reales. - Búsqueda de medios integrada: fotos y vídeos de 8 proveedores sin salir del builder (edición Pro).
Rendimiento por defecto
Nada de plugins de caché agresivos ni "optimizadores" externos: la velocidad está escrita en la arquitectura.
- IntersectionObserver para todo: animaciones de entrada, efectos de texto, parallax: cero scroll listeners.
- Video facade: YouTube/Vimeo muestran el póster; el iframe pesado solo carga al hacer clic.
- Lazy-load nativo del navegador en imágenes, vídeos y galerías.
- CSS crítico inline en los bloques above-the-fold; el resto carga async.
- CSS scoped por instancia: ninguna regla global que caiga en cascada sobre la página.
Las dos ediciones
- Free · para siempre · GPL — Más de 100 tiles nativos, form builder, dark mode, 11 efectos de texto, 36 animaciones, un equipamiento al nivel de los builders Pro de pago de la competencia. OLOlang incluido el primer año. Distribuida en WordPress.org.
- Pro · €29 de lanzamiento · luego €59/año — Toda la biblioteca (187 tiles), animaciones completas, búsqueda de medios de 8 proveedores, OLOlang de por vida, soporte prioritario, 30 días de reembolso.
Ficha técnica
- Tipo
- Page builder de WordPress basado en tiles, render en servidor
- Requisitos
- WordPress 5.8+ · PHP 7.4+
- Frontend builder
- Vue 3 (Composition API) + Pinia · build Vite 5
- Estilo
- SASS + Tailwind (prefix mb-) + UIkit
- Editor en línea
- Tiptap, texto enriquecido con barra flotante
- Drag & drop
- @atlaskit/pragmatic-drag-and-drop (~5 kb)
- REST API
- Namespace olo/v1
- Base de datos
- Tablas dedicadas wp_olo_templates · wp_olo_revisions
- Biblioteca
- 187 tiles · 12 familias · auto-discovery (2 archivos por tile)
- Animaciones
- CSS keyframes + IntersectionObserver · 36 animaciones · 11 efectos de texto
- Responsive
- 6 breakpoints heredados por cada tile
- Licencia
- GPL, código abierto, sin blobs cifrados