Web Design dans WordPress

Dans le module 11 de la formation WordPress, vous trouverez :

• Introduction au Web design

• Charte graphique, identité visuelle, branding

• Conseils de design et études de cas

Par ailleurs, le module 4 de la formation Mieux Utiliser Divi aborde un exemple concret de design fonctionnel à partir de zéro.

WordPress ne fait pas le design à votre place : il applique celui que vous lui donnez. Selon votre installation, le design se règle à trois endroits.

• Le thème fixe la structure et les styles de base : en-tête, pied de page, largeur du contenu, polices et couleurs par défaut. Le choix du thème est donc la première décision de design.

• Les Styles de l'éditeur de site, avec un thème bloc : dans Apparence > Éditeur, l'icône Styles permet de régler pour tout le site la typographie (polices, tailles, interlignage), les couleurs (palette, couleur des liens, des titres et des boutons), la disposition (largeur du contenu, espacements) et l'apparence de chaque type de bloc. Les variations de style, apparues avec WordPress 6.0, proposent des combinaisons toutes prêtes. Le détail est dans le guide du Full Site Editing.

• Un constructeur de pages comme Divi : vous composez chaque section visuellement, et les réglages globaux évitent de tout refaire page par page. Voir les couleurs globales dans Divi et les typographies dans Divi.

Quel que soit l'outil, la règle est la même : définissez les couleurs et les typographies une seule fois, globalement, puis utilisez-les partout. Changer une couleur de marque doit prendre une minute, pas une journée.

Un site cohérent se prépare avant d'ouvrir l'éditeur. Les notions de la section Design s'appliquent telles quelles :

1. Le logo et les couleurs de la marque : deux ou trois couleurs principales, plus une couleur pour les boutons d'action.

2. La typographie : une police pour les titres, une pour le texte, et des règles de lisibilité (largeur des lignes, alignement à gauche) ; voir typographie.

3. Les images : style photo ou illustration, formats, poids.

4. Les gabarits de pages : accueil, page de service, article, contact. Chaque gabarit se conçoit une fois et se réutilise.

5. La version mobile : prévue dès le départ, pas corrigée à la fin ; voir responsive.

Si un designer vous livre une maquette (Figma, Photoshop, Illustrator), le travail consiste à la transformer en pages WordPress fidèles et faciles à modifier. Le tutoriel convertir un design Photoshop ou Illustrator en site WordPress avec Divi décrit les étapes : analyse du design, découpe et export des images, création des pages et de la navigation, mise en place du design avec Divi (et un peu de CSS pour les détails), version responsive, puis révisions et livraison.

Le module 4 de la formation Mieux utiliser Divi, cité plus haut, est un atelier pratique en treize leçons. Il part des couleurs du logo pour construire la palette du site, puis conçoit une page section par section : en-tête (héro), bénéfices, démonstration et logos, détails techniques, témoignages, FAQ et appel à l'action. Les dernières leçons traitent de la version responsive (aide à la décision, puis réglages dans Divi) et récapitulent les bonnes pratiques.

Ce module, comme le module 11 de la formation WordPress, est réservé aux membres.