Manuel de base
Ce qu'est OLObuild, comment il est construit et pourquoi il tient 192 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 192 tiles en 10 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 Olobuild_<Name>_Tile qui hérite de Olobuild_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 : le panneau de chaque tile est trouvé automatiquement via
import.meta.glob: ajouter une tile signifie créer deux fichiers (config JS du panneau + classe PHP) et enregistrer la classe. Pas de shortcodes. - Helpers centralisés :
Olobuild_Tile_UtilsetOlobuild_Text_Effectsgardent le code DRY sur les 192 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. Le texte se modifie en ligne avec Tiptap (barre d'outils flottante), le drag & drop est un moteur maison, léger et sans bibliothèques externes.
- REST API avec un namespace propre
olobuild/v1. - Deux tables dédiées :
wp_olobuild_templatesetwp_olobuild_revisions: pas d'abus de postmeta, de vraies révisions. - Recherche média intégrée : photos, vidéos, audio et panoramas de sept 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, form builder, dark mode, 10 effets de texte, 35 animations d'entrée, un équipement au niveau des builders Pro payants de la concurrence. OLOlang inclus la première année.
- Pro · €29 lancement · puis €59/an — Toute la bibliothèque (192 tiles), animations complètes, recherche média intégrée, 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_olobuild_templates · wp_olobuild_revisions
- Bibliothèque
- 192 tiles · 10 familles · 2 fichiers par tile (panneau + classe PHP)
- Animations
- CSS keyframes + IntersectionObserver · 35 animations · 10 effets de texte
- Responsive
- 6 breakpoints hérités par chaque tile
- Licence
- GPL, code ouvert, aucun blob chiffré