Basishandbuch
Was OLObuild ist, wie es gebaut ist und warum es 187 Tiles mit nur einer Engine stemmt. Fünf Kapitel, dann das technische Datenblatt.
Was ist OLObuild
OLObuild ist das Chassis der Suite: ein WordPress-Page-Builder, in dem jedes Seitenelement eine Tile ist: ein eigenständiger Baustein mit eigenen Feldern, eigenen Animationen und eigenem Render. Die Bibliothek zählt 187 Tiles in 12 Familien (über 100 schon in der Free-Version), alle auf derselben Engine.
Es ist kein Theme mit Shortcodes und kein generischer Builder mit kostenpflichtigen Add-ons: Animationen, Text-Effekte, Hover und Parallax gehören serienmäßig zu jeder Tile. Es ist wie eine moderne App gebaut, nicht wie ein Theme.
Tile-basierte Architektur
Jede Tile ist eine PHP-Klasse Olo_<Name>_Tile, die von Olo_Tile_Base erbt und serverseitig rendert: Das HTML kommt bereits fertig heraus, ohne Laufzeit-Generierung im Browser.
- Auto-Discovery: Die Tiles registrieren sich selbst über
import.meta.glob: Eine Tile hinzuzufügen bedeutet, zwei Dateien zu erstellen (JS-Konfiguration des Panels + PHP-Klasse). Keine Kompilierung, keine Shortcodes. - Zentralisierte Helfer:
Olo_Tile_UtilsundOlo_Text_Effectshalten den Code über alle 187 Tiles hinweg DRY. - Scoped Styles: Jede Instanz hat eine eindeutige UID (
olo-XXX-12345): Das CSS bleibt abgegrenzt, kein Leak zwischen Instanzen. - Hover pro Instanz: Die UID-Klassen lösen den klassischen Bug „das erste Element erbt die Hover-Effekte des letzten“.
Kostenlose Vererbung — Jede Tile erbt vom Chassis Eingangsanimationen, Text-Effekte, Hover, bedingte Sichtbarkeit und Responsivität über 6 Breakpoints, ohne eine einzige Zeile mehr zu schreiben.
Im Builder
Der visuelle Editor ist eine Vue 3-App (Composition API) mit Pinia-Store und Vite 5-Build. Der Text wird inline mit Tiptap bearbeitet (schwebende Toolbar), Drag & Drop nutzt Pragmatic drag-and-drop: 5 kb gegenüber den 80 kb der Alternativen.
- REST API mit sauberem Namespace
olo/v1. - Zwei dedizierte Tabellen:
wp_olo_templatesundwp_olo_revisions: kein Postmeta-Missbrauch, echte Revisionen. - Integrierte Mediensuche: Fotos und Videos von 8 Anbietern, ohne den Builder zu verlassen (Pro-Version).
Performance per Default
Keine aggressiven Cache-Plugins, keine externen „Optimierer“: Geschwindigkeit steckt in der Architektur.
- IntersectionObserver für alles: Eingangsanimationen, Text-Effekte, Parallax: null Scroll-Listener.
- Video-Fassade: YouTube/Vimeo zeigen das Poster; das schwere iframe lädt erst beim Klick.
- Natives Lazy-Load des Browsers bei Bildern, Videos und Galerien.
- Inline Critical CSS für Above-the-Fold-Blöcke; der Rest lädt async.
- CSS scoped pro Instanz: keine globale Regel, die über die Seite kaskadiert.
Die zwei Editionen
- Free · für immer · GPL — Über 100 native Tiles, Form Builder, Dark Mode, 11 Text-Effekte, 36 Animationen, eine Ausstattung auf dem Niveau kostenpflichtiger Pro-Builder der Konkurrenz. OLOlang im ersten Jahr inklusive. Verteilt über WordPress.org.
- Pro · €29 Launch · dann €59/Jahr — Die gesamte Bibliothek (187 Tiles), vollständige Animationen, Mediensuche von 8 Anbietern, OLOlang lebenslang, Priority-Support, 30 Tage Rückerstattung.
Technisches Datenblatt
- Typ
- WordPress-Page-Builder, tile-basiert, Server-Side-Render
- Anforderungen
- WordPress 5.8+ · PHP 7.4+
- Frontend builder
- Vue 3 (Composition API) + Pinia · build Vite 5
- Stil
- SASS + Tailwind (prefix mb-) + UIkit
- Inline-Editor
- Tiptap, Rich Text mit schwebender Toolbar
- Drag & drop
- @atlaskit/pragmatic-drag-and-drop (~5 kb)
- REST API
- Namespace olo/v1
- Datenbank
- Dedizierte Tabellen wp_olo_templates · wp_olo_revisions
- Bibliothek
- 187 Tiles · 12 Familien · Auto-Discovery (2 Dateien pro Tile)
- Animationen
- CSS-Keyframes + IntersectionObserver · 36 Animationen · 11 Text-Effekte
- Responsive
- 6 Breakpoints, von jeder Tile geerbt
- Lizenz
- GPL, offener Quellcode, keine verschlüsselten Blobs