Les blocs UFO, mettre en page WordPress sans être développeur

Les blocs UFO sont les briques que j’ai développées pour construire les pages des sites WordPress que je livre. Ils sont construits à partir des blocs Gutenberg, l’éditeur natif de WordPress : on modifie la page directement, telle qu’elle s’affichera, sans licence à payer ni constructeur de pages à maintenir. Ce guide les présente un par un, pour ceux qui font vivre leur site au quotidien.

Quand je livre un site, les pages sont construites avec l’éditeur de WordPress, Gutenberg. J’ai expliqué ce choix dans l’article Pourquoi créer votre site WordPress avec Gutenberg. Les blocs fournis par WordPress couvrent l’essentiel, mais pas tout : leurs colonnes sont limitées et les boutons manquent d’options. J’ai donc ajouté une petite famille de blocs maison, les blocs UFO.

La version technique, avec le code, est dans Comment créer des blocs Gutenberg sur mesure avec Tailwind CSS. Ici, pas une ligne de code : seulement ce que vous voyez à l’écran et ce que vous pouvez en faire. Les captures viennent du site de l’Aïkido Club Tarbais.

On modifie la page, pas une copie de la page

C’est ce qui compte le plus pour quelqu’un qui n’est pas du métier. Pour corriger une page ou un article, vous cliquez sur « Modifier », et vous êtes dans la page. Le texte a la police du site, les titres ont leur couleur, la grille a ses colonnes, les boutons ont leur forme. Vous cliquez sur une phrase, vous la corrigez. Vous cliquez sur un bouton, vous changez son texte.

C’est ce qu’on appelle le WYSIWYG, pour « What You See Is What You Get » : ce que vous voyez est ce que vous obtenez. Pas de bascule vers un autre écran, pas d’éditeur séparé qui s’ouvre en plein écran avec ses propres menus, comme le font Elementor ou le Visual Builder de Divi. On reste dans l’interface de WordPress, celle des articles, des médias et des menus. Il n’y a qu’un seul outil à apprendre.

Construits avec Gutenberg, pas à côté

Les blocs UFO ne sont pas un constructeur de pages ajouté par-dessus WordPress. Ce sont des blocs Gutenberg, développés avec les outils officiels de WordPress, exactement comme les blocs Paragraphe ou Image. Ils se glissent, se dupliquent, se déplacent et s’annulent de la même façon, et ils apparaissent dans la même liste que les blocs natifs.

Cette intégration a trois conséquences concrètes.

• Les mises à jour de WordPress ne cassent rien. Les blocs suivent les règles de l’éditeur : quand WordPress évolue, ils évoluent avec lui, sans couche intermédiaire à attendre ni compatibilité à surveiller.
• Aucune licence à payer. Les blocs sont open source et gratuits, comme WordPress. Pas d’abonnement annuel à renouveler pour continuer à recevoir les mises à jour, et pas de site bloqué le jour où la carte bancaire a expiré.
• Moins de portes d’entrée pour les pirates. Les constructeurs de pages sont des extensions énormes, entourées de dizaines d’extensions complémentaires, et donc des cibles de choix. En mai 2023, une faille critique dans Essential Addons for Elementor, installée sur plus d’un million de sites, permettait de réinitialiser le mot de passe de n’importe quel compte, administrateur compris ; elle a été exploitée dans les jours qui ont suivi. Les blocs UFO, eux, sont neuf blocs au code court, sans extension tierce greffée dessus.

Un bloc, comment ça marche ?

Dans l’éditeur, une page est une pile de blocs : un paragraphe, un titre, une image, un bouton. Chaque bloc se déplace, se copie et se supprime indépendamment des autres.

Pour en ajouter un, deux méthodes :

• cliquez sur le bouton + bleu en haut à gauche, puis cherchez la catégorie « UFO Blocks » ;
• dans un paragraphe vide, tapez / suivi du nom du bloc, par exemple « /ufo grid », puis Entrée.

Une fois le bloc sélectionné, ses réglages apparaissent dans le panneau de droite, onglet « Bloc ». Si ce panneau est fermé, l’icône carrée en haut à droite de l’écran le rouvre.

La grille et ses cases, pour organiser la page

C’est le bloc le plus important. La ufo Grid est une boîte qui découpe une section de la page en colonnes. À l’intérieur, chaque case est une ufo Row, dans laquelle vous placez ce que vous voulez : titres, textes, images, boutons.

Dans le panneau de droite, vous choisissez :

• le nombre de colonnes, de 1 à 6 ;
• l’espacement entre les cases, dans une liste de valeurs toutes prêtes ;
• une image ou une vidéo de fond pour toute la section ;
• l’option Inverser sur mobile, utile quand l’image est à droite du texte sur ordinateur mais doit passer au-dessus sur téléphone.

Sur un téléphone, les colonnes s’empilent automatiquement les unes sous les autres. Vous n’avez rien à faire : une grille à trois colonnes devient une seule colonne, dans l’ordre des cases.

Une ufo Row peut aussi s’étendre sur plusieurs colonnes. Dans une grille de trois, une case peut occuper deux colonnes et la suivante une seule : c’est la mise en page classique « texte large, image étroite ». Ce réglage se fait en sélectionnant la case, toujours dans le panneau de droite.

Les boutons, avec une icône et un texte clair

Les boutons vont par groupe. Le bloc ufo Buttons est le conteneur, qui règle l’alignement (à gauche, centré, à droite). À l’intérieur, chaque UFO Button est un bouton. Sur téléphone, les boutons d’un même groupe passent automatiquement les uns sous les autres.

Pour chaque bouton, vous réglez :

• le texte, directement dans le bouton ;
• le lien, avec l’icône de chaîne dans la barre d’outils au-dessus du bouton ;
• une icône parmi une cinquantaine (flèche, téléphone, calendrier, enveloppe…), placée avant ou après le texte ;
• l’ouverture dans un nouvel onglet, à réserver aux liens qui sortent du site ;
• la pleine largeur, pour un bouton qui occupe toute la case.

Un réglage mérite qu’on s’y arrête : le texte pour lecteurs d’écran, dans le panneau « Lien et accessibilité ». Les personnes aveugles naviguent souvent de lien en lien, sans lire ce qui les entoure. Un bouton « En savoir plus » ne leur dit rien. Si vous écrivez « sur nos horaires » dans ce champ, le bouton sera lu « En savoir plus sur nos horaires », sans changer ce qui s’affiche à l’écran. Le mieux reste un texte de bouton clair dès le départ, comme « Voir les horaires » ou « Appeler le club ».

La FAQ, pour répondre aux questions avant qu’on les pose

Le bloc ufo FAQ crée une liste de questions-réponses en accordéon : le visiteur voit les questions, et clique sur celle qui l’intéresse pour déplier la réponse. Chaque question est un bloc ufo FAQ Item. Pour ajouter une question, le plus simple est de sélectionner la dernière et de la dupliquer (Ctrl + Maj + D), puis de remplacer le texte.

Ce bloc fait aussi un travail invisible. Quand l’option « Activer les données structurées » est cochée, il ajoute dans le code de la page une description lisible par les machines : « ceci est une question, voici sa réponse ». Google, Bing et les assistants IA comprennent ainsi mieux la page. Vous n’avez rien à remplir de plus : les champs « Nom », « Description » et « Sujet » sont facultatifs.

Pour que la FAQ soit utile, écrivez de vraies questions, avec leur point d’interrogation, et formulées comme vos visiteurs les poseraient : « Faut-il une tenue pour le cours d’essai ? » plutôt que « Tenue ».

Les petits blocs qui rendent service

Trois autres blocs complètent la famille.

• Ufo title : un titre précédé d’une icône sur fond arrondi. Pratique pour des rubriques qui se répètent, comme « Adresse », « Horaires », « Téléphone » sur une page contact. Choisissez le bon niveau de titre (H2, H3) dans le panneau de droite.
• UFO Icon : une icône seule, aux couleurs du site, pour illustrer un service. Elle décore, elle ne remplace pas un texte.
• UFO Time : une date ou un horaire mis en forme, pour un stage ou un événement.

Des réglages limités, et c’est voulu

Si vous avez déjà utilisé un constructeur de pages comme Divi ou Elementor, vous allez trouver les blocs UFO sobres. Pas de choix de police, pas de pipette pour inventer une couleur, pas de marge réglable au pixel près. Les espacements se choisissent dans une liste, les colonnes vont de 1 à 6, les couleurs sont celles de la charte du site.

C’est un choix. Avec trois cents réglages, chaque page finit par avoir son propre style, et le site perd sa cohérence au fil des mises à jour. Avec des choix limités, une page ajoutée deux ans après la livraison ressemble encore aux autres. Et vous passez votre temps sur le contenu, pas sur les marges.

Il y a aussi un bénéfice que vous ne voyez pas : les blocs UFO chargent moins d’un kilo-octet de style à eux. La mise en forme vient du thème, en un seul fichier. C’est l’une des raisons pour lesquelles les sites que je livre sont rapides, y compris sur mobile.

Partir d’une composition plutôt que d’une page blanche

Monter une grille de zéro demande un peu d’habitude. Pour aller plus vite, les thèmes que je livre peuvent proposer des compositions : des sections déjà construites avec les blocs UFO, qu’il suffit de remplir. Sur le site de l’Aïkido Club Tarbais, par exemple, une grille tarifaire à trois offres sert à présenter les cotisations.

Pour en insérer une : bouton + en haut à gauche, onglet « Compositions », puis la catégorie au nom de votre site. Cliquez sur la composition, elle s’insère dans la page. Remplacez ensuite les textes d’exemple, et vérifiez qu’il n’en reste aucun avant de publier.

Cinq réflexes pour ne pas se perdre

1. Utilisez la vue en liste. L’icône à trois traits en haut à gauche affiche la structure de la page. C’est le moyen le plus simple de sélectionner une grille quand on clique toujours sur le texte qu’elle contient. La barre en bas de l’écran (« Page › ufo Grid › ufo Row ») sert aussi à remonter d’un niveau.
2. Pas plus de trois colonnes de texte. Au-delà, les lignes deviennent trop courtes pour être lues confortablement.
3. Une étape par case. Pour une suite d’étapes, mettez chacune dans sa propre ufo Row, dans l’ordre : sur téléphone, l’ordre reste juste.
4. Pas de lignes vides pour aérer. Le thème gère les espaces. Si une section paraît trop serrée, réglez les marges intérieures de la grille.
5. Vérifiez sur mobile. Avant de publier, l’icône d’aperçu en haut à droite permet d’afficher la page comme sur un téléphone.

Ces règles sont aussi rappelées dans le mode d’emploi intégré à l’administration des sites que je livre, avec les blocs propres à chaque site.

Questions fréquentes
sur les blocs UFO

Mon avis

Je n’ai pas créé les blocs UFO pour impressionner, mais pour que les personnes qui font vivre un site puissent le modifier directement, dans la page, sans m’appeler. Une grille, des boutons, une FAQ : avec ces trois blocs, on couvre la grande majorité des pages d’un site vitrine. Le reste, c’est du contenu, et c’est vous qui le connaissez le mieux.

Vous cherchez un site WordPress que votre équipe peut modifier seule, sans constructeur de pages ni licence payante ? Découvrez ma façon de travailler sur la création de site internet, ou parlons de votre projet.