Basishandbuch
Was OLObuild ist, wie es gebaut ist und warum es 192 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 192 Tiles in 10 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 Olobuild_<Name>_Tile, die von Olobuild_Tile_Base erbt und serverseitig rendert: Das HTML kommt bereits fertig heraus, ohne Laufzeit-Generierung im Browser.
- Auto-Discovery: Das Panel jeder Tile wird automatisch über
import.meta.globgefunden: Eine Tile hinzuzufügen bedeutet, zwei Dateien zu erstellen (JS-Konfiguration des Panels + PHP-Klasse) und die Klasse zu registrieren. Keine Shortcodes. - Zentralisierte Helfer:
Olobuild_Tile_UtilsundOlobuild_Text_Effectshalten den Code über alle 192 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-Build. Der Text wird inline mit Tiptap bearbeitet (schwebende Toolbar), Drag & Drop ist eine eigene Engine, leicht und ohne externe Bibliotheken.
- REST API mit sauberem Namespace
olobuild/v1. - Zwei dedizierte Tabellen:
wp_olobuild_templatesundwp_olobuild_revisions: kein Postmeta-Missbrauch, echte Revisionen. - Integrierte Mediensuche: Fotos, Videos, Audio und Panoramen von sieben 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 Tiles, Form Builder, Dark Mode, 10 Text-Effekte, 35 Eingangsanimationen, eine Ausstattung auf dem Niveau kostenpflichtiger Pro-Builder der Konkurrenz. OLOlang im ersten Jahr inklusive.
- Pro · €29 Launch · dann €59/Jahr — Die gesamte Bibliothek (192 Tiles), vollständige Animationen, integrierte Mediensuche, 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_olobuild_templates · wp_olobuild_revisions
- Bibliothek
- 192 Tiles · 10 Familien · 2 Dateien pro Tile (Panel + PHP-Klasse)
- Animationen
- CSS-Keyframes + IntersectionObserver · 35 Animationen · 10 Text-Effekte
- Responsive
- 6 Breakpoints, von jeder Tile geerbt
- Lizenz
- GPL, offener Quellcode, keine verschlüsselten Blobs