Dans WordPress, une modification de texte ou d’image peut parfois désorganiser une page, surtout sur mobile. Quelques règles simples suffisent pourtant à préserver le design, la lisibilité et la performance, même avec une connexion variable. Voici les bonnes pratiques d’édition les plus utiles pour les équipes en Afrique de l’Ouest.

Pourquoi le design “casse” lors de l’édition dans WordPress

WordPress sépare généralement le contenu (textes, images, vidéos) et la mise en page (structure, colonnes, styles, espacements). Lorsque l’édition mélange ces deux dimensions, le rendu peut se dégrader : titres trop grands, images déformées, colonnes qui se chevauchent, boutons illisibles sur mobile.

Les causes les plus fréquentes sont :

• mauvaise utilisation des blocs (copier-coller depuis Word, suppression d’un bloc “conteneur”, insertion d’éléments au mauvais endroit) ;
• non-respect de la hiérarchie des titres (H2/H3 utilisés “pour la taille” plutôt que pour la structure) ;
• images trop lourdes ou aux mauvaises dimensions (ralentissements, recadrages imprévus) ;
• styles ajoutés à la main (couleurs et tailles incohérentes, conflits avec le thème) ;
• plugins d’édition multiples (constructeur de pages + éditeur de blocs + shortcodes), parfois incompatibles.

Comprendre l’éditeur WordPress : blocs, thème et modèles

Depuis l’éditeur de blocs (souvent appelé Gutenberg), une page est composée de blocs : paragraphe, image, colonnes, bouton, liste, groupe, etc. Le thème (et parfois un constructeur) définit les styles : typographies, couleurs, tailles, espacements, comportements responsive.

Deux notions aident à éditer sans risque :

• Bloc “conteneur” : bloc qui “porte” d’autres blocs (Groupe, Colonnes, Couverture). Supprimer ce conteneur peut casser l’alignement.
• Modèle / template : structure globale d’une page (en-tête, pied de page, largeur, zones). Modifier un modèle peut impacter plusieurs pages.

Objectif : modifier le contenu en évitant de toucher à la structure et aux styles globaux.

Règles d’édition qui protègent le design

Éditer le texte sans “copier-coller sale”

Le copier-coller depuis Word, Google Docs ou WhatsApp peut importer des styles invisibles (tailles, polices, retours à la ligne) qui perturbent l’affichage.

• Préférer le collage sans mise en forme (selon le navigateur) ou coller d’abord dans un bloc “Texte brut” si disponible.
• Éviter les retours à la ligne multiples pour “créer de l’espace” : utiliser les options d’espacement prévues par le thème.
• Garder des paragraphes courts, utiles pour la lecture sur mobile.

Respecter la hiérarchie des titres (utile pour le SEO et la lisibilité)

Les titres structurent la page pour les visiteurs et pour Google. Ils ne doivent pas être choisis uniquement pour leur taille.

• Utiliser des H2 pour les grandes sections, des H3 pour les sous-sections.
• Éviter de sauter des niveaux (passer de H2 à H4).
• Ne pas transformer un paragraphe en titre pour “grossir” : ajuster via les styles du thème si nécessaire.

Ne pas supprimer les blocs de structure

Dans de nombreux sites, la mise en page repose sur des blocs “Groupe”, “Colonnes” ou sur des blocs propres au thème. Supprimer le mauvais bloc peut déplacer tout ce qui suit.

• Avant de supprimer, vérifier si le bloc contient d’autres éléments (icône d’imbrication, indentation, liste des blocs).
• Préférer remplacer le contenu d’un bloc existant plutôt que supprimer/recréer la structure.
• Éviter de déplacer des blocs de colonnes sans comprendre l’alignement (notamment sur mobile).

Limiter les styles “au cas par cas”

Changer une couleur, une taille de police ou un espacement “juste pour une page” crée souvent des incohérences visuelles et complique la maintenance.

• Utiliser les styles globaux (définis par le thème) quand c’est possible.
• Réserver les ajustements locaux aux cas justifiés (ex. un encadré important), en restant dans la palette et les tailles prévues.
• Éviter l’injection de CSS ou de HTML non maîtrisé dans les pages, surtout si plusieurs personnes éditent.

Images et médias : qualité, poids et affichage sur mobile

En Afrique de l’Ouest, la performance est directement liée à l’expérience utilisateur : data coûteuse, réseau variable, navigation majoritairement mobile. Les médias sont la première cause de pages lentes.

Choisir les bonnes dimensions et le bon format

• Importer des images à une taille cohérente avec le site (éviter les photos “énormes” issues d’un smartphone en pleine résolution).
• Privilégier des formats modernes quand le site les gère (ex. WebP) tout en conservant une bonne compatibilité.
• Éviter de “déformer” une image en tirant sur les poignées : préférer le recadrage.

Renseigner les textes alternatifs (accessibilité et SEO)

Le texte alternatif (alt) décrit l’image pour l’accessibilité et aide les moteurs à comprendre le contenu visuel.

• Décrire simplement l’image (ex. “Équipe d’une ONG en réunion à Dakar”).
• Éviter de répéter des mots-clés sans logique.

Utiliser les galeries et vidéos avec prudence

• Préférer une galerie optimisée plutôt que 10 images empilées en pleine largeur.
• Pour la vidéo, privilégier l’intégration via une plateforme (selon la stratégie) plutôt que l’hébergement direct de gros fichiers sur le site, afin de préserver la bande passante.

Bonnes pratiques pour éviter les surprises avant publication

Prévisualiser systématiquement en mobile

Un rendu correct sur ordinateur peut être difficile à lire sur smartphone : colonnes trop serrées, boutons trop proches, images trop hautes.

• Utiliser la prévisualisation WordPress et tester sur un téléphone réel quand c’est possible.
• Vérifier : lisibilité des titres, taille des boutons, espacements, éléments qui débordent.

Travailler avec des brouillons et des révisions

WordPress conserve des révisions qui permettent de revenir en arrière. C’est un filet de sécurité utile quand plusieurs personnes modifient le site.

• Enregistrer en brouillon si la page n’est pas prête.
• Mettre à jour aux horaires où l’audience est la plus faible si le site est très consulté.

Standardiser avec des modèles de blocs (réutilisables)

Pour garder une cohérence, certains éléments peuvent être standardisés : bandeaux d’appel, blocs “contact WhatsApp”, encadrés “à retenir”, sections “services”.

• Utiliser des blocs réutilisables ou des patrons (selon la configuration) pour reproduire la même mise en forme.
• Éviter de recréer à la main un bouton ou un encadré à chaque page.

Organisation et droits : éditer sans risque à plusieurs

Quand une PME, une ONG ou une association édite à plusieurs, le risque de modification involontaire augmente. Une bonne pratique consiste à aligner les droits WordPress avec les responsabilités réelles.

• Rôles : limiter l’accès “Administrateur” aux personnes responsables de la configuration (plugins, thèmes, comptes).
• Process : une personne rédige, une autre relit et publie (quand l’équipe le permet).
• Charte éditoriale : règles simples sur les titres, le ton, les images, les liens, les CTA (boutons).

Checklist rapide avant de cliquer sur “Mettre à jour”

• La page reste lisible sur mobile (titres, boutons, colonnes) ?
• Les titres sont structurés (H2/H3) et cohérents ?
• Aucun bloc de structure important n’a été supprimé (groupes/colonnes) ?
• Les images sont nettes, non déformées, et pas trop lourdes ?
• Les liens fonctionnent (WhatsApp, email, formulaires, pages internes) ?
• Le style reste cohérent (couleurs, polices, espacements) ?

Quand demander un accompagnement technique

Certains signes indiquent qu’il vaut mieux faire intervenir un prestataire (ou l’équipe web) plutôt que “forcer” une mise en page :

• la page change d’apparence de façon imprévisible après modification ;
• des blocs ne se comportent pas pareil selon les appareils ;
• le site devient lent après ajout d’images ou de plugins ;
• des erreurs apparaissent après mise à jour du thème ou d’extensions.

Un cadre clair (modèles, styles globaux, règles d’édition, rôles) permet de publier régulièrement sans dégrader le site, tout en gardant un design professionnel et stable.