doc OLO-BLD-M01manuel de base+ fiche technique

Manuel de base

Ce qu’est OLObuild, comment il est construit et pourquoi un seul moteur porte 187 tiles. Cinq chapitres, puis la fiche technique.

§1

C’est quoi, OLObuild

OLObuild est le châssis de la suite : un page builder pour WordPress où chaque élément de page est un tile : un bloc autonome avec ses champs, ses animations et son rendu. La bibliothèque compte 187 tiles en 12 familles (plus de 100 déjà dans la Free), tous sur le même moteur.

Ce n’est ni un thème avec des shortcodes ni un builder générique avec add-ons payants : animations, effets de texte, hover et parallax font partie de chaque tile de série. C’est construit comme une app moderne, pas comme un thème.

§2

Architecture tile-based

Chaque tile est une classe PHP Olo_<Name>_Tile héritant d’Olo_Tile_Base et rendue côté serveur : le HTML sort prêt, sans génération à l’exécution dans le navigateur.

  • Auto-découverte : les tiles s’enregistrent seuls via import.meta.glob : ajouter un tile, c’est créer deux fichiers (config JS du panneau + classe PHP). Pas de compilation, pas de shortcodes.
  • Helpers centralisés : Olo_Tile_Utils et Olo_Text_Effects gardent le code DRY sur les 187 tiles.
  • Styles scopés : 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 des hovers du dernier ».
Héritage gratuit

Chaque tile hérite du châssis les animations d’entrée, effets de texte, hover, visibilité conditionnelle et responsive sur 6 breakpoints, sans écrire une ligne de plus.

§3

Dans le builder

L’éditeur visuel est une app Vue 3 (Composition API) avec store Pinia et build Vite 5. Le texte se modifie inline avec Tiptap (toolbar flottante), le drag & drop utilise Pragmatic drag-and-drop : 5 ko contre 80 ko pour les alternatives.

  • API REST avec un namespace propre olo/v1.
  • Deux tables dédiées : wp_olo_templates et wp_olo_revisions : pas d’abus de postmeta, de vraies révisions.
  • Recherche médias intégrée : photos et vidéos de 8 fournisseurs sans quitter le builder (édition Pro).
§4

Performance par défaut

Pas de plugins de cache agressifs ni d’« optimiseurs » externes : la vitesse est écrite dans l’architecture.

  • IntersectionObserver pour tout : animations d’entrée, effets de texte, parallax : zéro scroll listener.
  • Video facade : YouTube/Vimeo montrent le poster ; l’iframe lourd ne charge qu’au clic.
  • Lazy-load natif du navigateur sur images, vidéos et galeries.
  • Critical CSS inline sur les blocs above-the-fold ; le reste charge en async.
  • CSS scopé par instance : aucune règle globale en cascade sur la page.
§5

Les deux éditions

Freepour toujours · GPLPlus de 100 tiles natifs, 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.
Pro29 € lancement · puis 59 €/anToute la bibliothèque (187 tiles), animations complètes, recherche médias sur 8 fournisseurs, OLOlang à vie, support prioritaire, 30 jours de remboursement.

Fiche technique

OLObuildpage builder · GPL
TypePage builder WordPress tile-based, rendu côté serveur
PrérequisWordPress 5.8+ · PHP 7.4+
Frontend builderVue 3 (Composition API) + Pinia · build Vite 5
StyleSASS + Tailwind (prefix mb-) + UIkit
Éditeur inlineTiptap, rich text avec toolbar flottante
Drag & drop@atlaskit/pragmatic-drag-and-drop (~5 kb)
REST APINamespace olo/v1
Base de donnéesTables dédiées wp_olo_templates · wp_olo_revisions
Bibliothèque187 tiles · 12 familles · auto-découverte (2 fichiers par tile)
AnimationsKeyframes CSS + IntersectionObserver · 36 animations · 11 effets de texte
Responsive6 breakpoints hérités par chaque tile
LicenceGPL, code ouvert, aucun blob chiffré
OLOtheme by clod.eu | @2026 | site de présentation | info@olotheme.com