Manuel de base
Ce qu'est OLObuild, comment il est construit et pourquoi il tient 187 tiles avec un seul moteur. Cinq chapitres, puis la fiche technique.
Qu'est-ce qu'OLObuild
OLObuild est le châssis de la suite : un page builder pour WordPress où chaque élément de la page est une tile : un bloc autonome avec ses propres champs, ses propres animations et son propre rendu. La bibliothèque compte 187 tiles en 12 familles (plus de 100 déjà dans la version Free), toutes sur le même moteur.
Ce n'est pas un thème avec des shortcodes ni un builder générique avec des add-ons payants : animations, effets de texte, hover et parallax font partie de chaque tile en série. Il est construit comme une app moderne, pas comme un thème.
Architecture basée sur les tiles
Chaque tile est une classe PHP Olo_<Name>_Tile qui hérite de Olo_Tile_Base et effectue un rendu côté serveur : le HTML sort déjà prêt, sans génération à l'exécution dans le navigateur.
- Auto-discovery : les tiles s'enregistrent seules via
import.meta.glob: ajouter une tile signifie créer deux fichiers (config JS du panneau + classe PHP). Pas de compilation, pas de shortcodes. - Helpers centralisés :
Olo_Tile_UtilsetOlo_Text_Effectsgardent le code DRY sur les 187 tiles. - Scoped styles : chaque instance a un UID unique (
olo-XXX-12345) : le CSS reste confiné, aucune fuite entre instances. - Hover par instance : les classes UID résolvent le bug classique « le premier élément hérite du hover du dernier ».
Héritage gratuit — Chaque tile hérite du châssis les animations d'entrée, les effets de texte, le hover, la visibilité conditionnelle et le responsive sur 6 breakpoints, sans écrire une ligne de plus.
À l'intérieur du builder
L'éditeur visuel est une app Vue 3 (Composition API) avec store Pinia et build Vite 5. Le texte se modifie en ligne avec Tiptap (barre d'outils flottante), le drag & drop utilise Pragmatic drag-and-drop : 5 kb contre 80 kb pour les alternatives.
- REST API avec un namespace propre
olo/v1. - Deux tables dédiées :
wp_olo_templatesetwp_olo_revisions: pas d'abus de postmeta, de vraies révisions. - Recherche média intégrée : photos et vidéos de 8 fournisseurs sans quitter le builder (édition Pro).
Performance par défaut
Pas de plugins de cache agressifs ni d'« optimiseurs » externes : la vitesse est inscrite dans l'architecture.
- IntersectionObserver pour tout : animations d'entrée, effets de texte, parallax : zéro scroll listener.
- Video facade : YouTube/Vimeo affichent le poster ; l'iframe lourd ne charge qu'au clic.
- Lazy-load natif du navigateur sur images, vidéos et galeries.
- CSS critique inline sur les blocs above-the-fold ; le reste charge en async.
- CSS scoped par instance : aucune règle globale qui retombe en cascade sur la page.
Les deux éditions
- Free · pour toujours · GPL — Plus de 100 tiles natives, form builder, dark mode, 11 effets de texte, 36 animations, un équipement au niveau des builders Pro payants de la concurrence. OLOlang inclus la première année. Distribuée sur WordPress.org.
- Pro · €29 lancement · puis €59/an — Toute la bibliothèque (187 tiles), animations complètes, recherche média sur 8 fournisseurs, OLOlang à vie, support prioritaire, 30 jours de remboursement.
Fiche technique
- Type
- Page builder WordPress basé sur les tiles, rendu côté serveur
- Prérequis
- WordPress 5.8+ · PHP 7.4+
- Frontend builder
- Vue 3 (Composition API) + Pinia · build Vite 5
- Style
- SASS + Tailwind (prefix mb-) + UIkit
- Éditeur en ligne
- Tiptap, texte enrichi avec barre d'outils flottante
- Drag & drop
- @atlaskit/pragmatic-drag-and-drop (~5 kb)
- REST API
- Namespace olo/v1
- Base de données
- Tables dédiées wp_olo_templates · wp_olo_revisions
- Bibliothèque
- 187 tiles · 12 familles · auto-discovery (2 fichiers par tile)
- Animations
- CSS keyframes + IntersectionObserver · 36 animations · 11 effets de texte
- Responsive
- 6 breakpoints hérités par chaque tile
- Licence
- GPL, code ouvert, aucun blob chiffré