Les images ne se centrent pas lorsqu’on utilise Gutenberg sur un site où Elementor est utilisé

Les images ne se centrent pas lorsqu'on utilise Gutenberg sur un site où Elementor est utilisé

Il m’a fallut du temps avant de m’habituer au « nouvel » éditeur de WordPress Gutenberg. Je sais, je fais de la résistance au changement ;). Mais là, je commence à bien l’aimer Gutenberge ! En fait, j’utilise généralement la combinaison JupiterX et Elementor pour développer des sites WordPress. Les résultats sont vraiment hot, en très peu de temps. Mais quand viens le temps d’écrire un billet de blogue, je n’ai pas besoin de tout le flafla d’Elementor. Quand j’écris un billet, je veux que l’interface soit la plus simple possible et je veux focuser sur le texte à écrire, pas tout ce qu’il y a autour.

J’ai donc commencer à donner une chance à Guntenberg. Puis une autre, et une autre. Et là j’aime bien 🙂

Mais un truc me tapait réellement sur les nerfs. Avec Guntenberg, sur un WordPress où Elementor est installé, il est impossible de centrer une image. Même si on voit bel et bien l’image comme étant centrée dans Gutenberg, sur le site live, elle restera alignée à gauche.

Sur Gutenberg:

Elementor JupiterX Gutenberg image non centrée

On voit que l’image est belle et bien centrée. Par contre, lorsqu’on prévisualise ce billet, l’image reste alignée à gauche:

Gutenberg Elementor JupiterX image non centrée

Après une petite recherche, j’ai trouvé que le problème est causé par Elementor qui redéfini la classe CSS .aligncenter. Voici comment régler le bobo.

Rendez-vous dans Apparence / Personnaliser / CSS additionnel et ajouter ceci:

.wp-block-image .aligncenter {
margin: 0 auto !important;
}

Et le problème est résolu 🙂

JupiterX Gutenberg Elementor image non centrée

Commentaires

Laisser un commentaire

D'autres billets qui pourraient vous intéresser

IA remplacera les développeurs, vraiment?

L’IA va tuer les développeurs. Vraiment?

Cette semaine, je lisais un article à propos de la « SaaSpocalypse« , l’idée selon laquelle l’IA générative permettra aux entreprises de ...
Obsidian: Backup et synchronisation sur plusieurs appareils

Obsidian: Backup et synchronisation sur plusieurs appareils

Je prends souvent des notes. Il me semble que j’ai toujours quelque chose à écrire. Une idée, quelque chose à ...
Ce n'est jamais juste un mot de passe

Ce n’est jamais « juste » un mot de passe

Vous souvenez-vous de cette époque où un mot de passe de quatre lettres suffisait? Pas de majuscule. Pas de chiffre. ...
Quand on écoutait des albums pas des chansons

Quand on écoutait encore des albums

Avant Spotify, avant Apple Music, avant YouTube Music, on écoutait des albums. Pas des chansons. On insérait la cassette, le ...

« Qui a tué les Expos » m’a rappelé pourquoi certains souvenirs ne meurent jamais

Je viens de terminer Qui a tué les Expos sur Netflix. Ouf. Je ne m’attendais pas à toutes ces émotions… ...
Extension pour navigateur Obsidian Web Clipper

Comment transformer n’importe quelle page web en note Obsidian

Le Web Clipper d’Obsidian est une extension de navigateur qui permet, en un clic, de capturer le contenu d’une page ...