Manuale base
Cos’è OLObuild, come è costruito e perché regge 192 tile con un motore solo. Cinque capitoli, poi la scheda tecnica.
Cos’è OLObuild
OLObuild è il telaio della suite: un page builder per WordPress in cui ogni elemento della pagina è una tile: un blocco autonomo con i propri campi, le proprie animazioni e il proprio render. La libreria conta 192 tile in 10 famiglie (oltre 100 già nella versione Free), tutte sullo stesso motore.
Non è un tema con degli shortcode né un builder generico con add-on a pagamento: animazioni, effetti di testo, effetti al passaggio del mouse e parallax fanno parte di ogni tile di serie. È costruito come un’app moderna, non come un tema.
Architettura tile-based
Ogni tile è una classe PHP Olobuild_<Name>_Tile che eredita da Olobuild_Tile_Base e renderizza server-side: l’HTML esce già pronto, senza generazione a runtime nel browser.
- Auto-discovery: il pannello di ogni tile si trova da solo via
import.meta.glob: aggiungere una tile significa creare due file (config JS del pannello + classe PHP) e registrare la classe. Niente shortcode. - Helper centralizzati:
Olobuild_Tile_UtilseOlobuild_Text_Effectstengono il codice DRY su tutte le 192 tile. - Scoped styles: ogni istanza ha un UID univoco (
olo-XXX-12345): il CSS resta confinato, nessun leak fra istanze. - Per-instance hover: le classi UID risolvono il classico bug “il primo elemento eredita gli hover dell’ultimo”.
Eredità gratuita — Ogni tile eredita dal telaio animazioni d’ingresso, effetti testo, hover, visibility condizionale e responsive su 6 breakpoint, senza scrivere una riga in più.
Dentro il builder
L’editor visuale è un’app Vue 3 (Composition API) con store Pinia e build Vite. Il testo si modifica inline con Tiptap (toolbar flottante), il drag & drop è un motore proprio, leggero e senza librerie esterne.
- REST API con namespace pulito
olobuild/v1. - Due tabelle dedicate:
wp_olobuild_templatesewp_olobuild_revisions: niente abuso di postmeta, revisioni vere. - Ricerca media integrata: foto, video, audio e panorami da sette fornitori senza uscire dal builder (edizione Pro).
Performance per default
Niente plugin di cache aggressivi né “ottimizzatori” esterni: la velocità è scritta nell’architettura.
- IntersectionObserver per tutto: entrance animations, text-effects, parallax: zero scroll listener.
- Video facade: YouTube/Vimeo mostrano il poster; l’iframe pesante carica solo al click.
- Lazy-load nativo del browser su immagini, video e gallerie.
- Critical CSS inline sui blocchi above-the-fold; il resto carica async.
- CSS scoped per istanza: nessuna regola globale che cade a cascata sulla pagina.
Le due edizioni
- Free · per sempre · GPL — Oltre 100 tile, form builder, dark mode, 10 effetti di testo, 35 animazioni d’ingresso, un corredo al livello dei builder Pro a pagamento della concorrenza. OLOlang incluso il primo anno.
- Pro · €29 lancio · poi €59/anno — L’intera libreria (192 tile), animazioni complete, ricerca media integrata, OLOlang a vita, supporto prioritario, 30 giorni di rimborso.
Scheda tecnica
- Tipo
- Page builder WordPress tile-based, render server-side
- Requisiti
- WordPress 5.8+ · PHP 7.4+
- Frontend builder
- Vue 3 (Composition API) + Pinia · build Vite 5
- Stile
- SASS + Tailwind (prefix mb-) + UIkit
- Editor inline
- Tiptap, rich text con toolbar flottante
- Drag & drop
- @atlaskit/pragmatic-drag-and-drop (~5 kb)
- REST API
- Namespace olo/v1
- Database
- Tabelle dedicate wp_olobuild_templates · wp_olobuild_revisions
- Libreria
- 192 tile · 10 famiglie · 2 file per tile (pannello + classe PHP)
- Animazioni
- CSS keyframes + IntersectionObserver · 35 animazioni · 10 effetti di testo
- Responsive
- 6 breakpoint ereditati da ogni tile
- Licenza
- GPL, codice aperto, nessun blob crittografato