01. Le fichier maquette graphique

C’est une situation réelle : il n’y a rien de préparé à l’avance. Cette approche permet de voir les problématiques et solutions possibles qu’on rencontre lorsqu’on transforme un design en site Web en utilisant des outils donnés.

Il y a un total de 10 heures de travail dans ces vidéos à travers 55 vidéos : il s’agit des grandes lignes. Évidemment, pour un site Web complet, on ajoute quelques dizaines d’heures pour peaufiner les détails.

Téléchargez les fichiers de l’atelier :

• La maquette Photoshop (restaurant.zip, 45 Mo)

• Les images découpées (images-divi-integration-web.zip, 4 Mo)

N’hésitez pas à écrire des commentaires/questions sous chaque vidéo pour demander des détails, précisions, codes, ou pointer d’éventuelles erreurs.

Formation de 2019, 95% toujours valable en 2024. Ce sont les méthodes et les techniques d'analyse qui importent ici, il y aura peut-être un ou deux boutons qui ont changé de place depuis.

Note 2026 : l’atelier a été tourné en 2019 avec Divi 3. Les méthodes d’analyse, de découpe et d’intégration restent valables ; depuis Divi 4, le Theme Builder permet de construire l’en-tête et le pied de page avec des modules, sans les contournements en CSS montrés dans certaines leçons.

Maintenant, nous allons faire un exercice intéressant qui consiste à transformer une maquette de site web en site tout à fait fonctionnel, voire presque créé avec Divi. C'est-à-dire que nous avons un graphiste qui nous a fourni une maquette : ici, nous sommes sur Photoshop, et nous allons la transformer en Divi.

Un autre cas de figure : vous avez téléchargé un design sur le web, ou vous voulez faire un design similaire à quelque chose d'existant.

Ce qui est intéressant ici, c'est que nous allons faire la méthode inverse de celle que nous avons faite dans la première formation. Dans la première formation, ce qu'on a fait, c'est qu'on a créé un site vide et on a commencé à créer des sections, à charger des designs préfaits, à écrire le contenu en même temps. Maintenant, on a le contenu qui est fait et le design qui est fait : ça, c'est le bon ordre des choses. On va se poser beaucoup moins de questions sur le contenu, les couleurs, etc., puisque tout est fait ici.

Donc là, sur quoi on part ? J'ai tapé "free PSD web design" dans Google, j'en ai téléchargé un qui me semblait sympa, complètement au hasard, en cinq minutes, sans savoir s'il allait bien ou non. Quand je le regarde comme ça, il me semble bien, parce qu'on va avoir pas mal de challenges, on va découvrir plein de choses. Le site est très beau : c'est une page pour un restaurant.

Je l'ai trouvé sur un site qui s'appelle colorlib.com, qui nous fait un lien vers ce fichier .zip, dans lequel on trouve simplement un PSD, donc un ps 17,1 fichiers Photoshop.

Si vous n'avez pas Photoshop, il y a une alternative gratuite qui s'appelle GIMP. Vous pouvez taper "GIMP" dans Google : le résultat, c'est gimp.org, et vous pouvez le télécharger. C'est un logiciel d'édition d'image très puissant qui va vous permettre d'ouvrir le fichier PSD qu'on va utiliser pour nos travaux.