Manual base
Qué es OLObuild, cómo está construido y por qué soporta 192 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 192 tiles en 10 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 Olobuild_<Name>_Tile que hereda de Olobuild_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: el panel de cada tile se encuentra solo vía
import.meta.glob: añadir un tile significa crear dos archivos (config JS del panel + clase PHP) y registrar la clase. Sin shortcodes. - Helpers centralizados:
Olobuild_Tile_UtilsyOlobuild_Text_Effectsmantienen el código DRY en los 192 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. El texto se edita en línea con Tiptap (barra flotante), el drag & drop es un motor propio, ligero y sin librerías externas.
- REST API con namespace limpio
olobuild/v1. - Dos tablas dedicadas:
wp_olobuild_templatesywp_olobuild_revisions: sin abuso de postmeta, revisiones reales. - Búsqueda de medios integrada: fotos, vídeos, audio y panoramas de siete 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, form builder, dark mode, 10 efectos de texto, 35 animaciones de entrada, un equipamiento al nivel de los builders Pro de pago de la competencia. OLOlang incluido el primer año.
- Pro · €29 de lanzamiento · luego €59/año — Toda la biblioteca (192 tiles), animaciones completas, búsqueda de medios integrada, 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_olobuild_templates · wp_olobuild_revisions
- Biblioteca
- 192 tiles · 10 familias · 2 archivos por tile (panel + clase PHP)
- Animaciones
- CSS keyframes + IntersectionObserver · 35 animaciones · 10 efectos de texto
- Responsive
- 6 breakpoints heredados por cada tile
- Licencia
- GPL, código abierto, sin blobs cifrados