Vidéo : tutoriel pour utiliser les templates du thème Divi avec WordPress

En complément de la formation Divi qui vous permet d'apprendre à créer les pages de votre site Web, voici un petit exercice que vous pouvez pratiquer sur votre propre site WordPress.
Il consiste à prendre, d'un côté, un template Divi, d'un autre côté, un brief pour un site Web, et à mixer les deux pour créer une nouvelle page Web.

C'est en trois parties, que voici :

Lorsqu'on veut créer une page sur un site Web, techniquement, deux choix s'offrent à nous :

1. La programmer en HTML, CSS, Javascript, et souvent un langage pour traiter les données comme PHP avec une base de données

2. Ou utiliser des outils qui vont faire cela à notre place, comme WordPress utilisé en adéquation avec le page builder Divi.

Du côté de la conception, une page Web doit répondre à de nombreux critères : le contenu, son organisation, les types de médias, le SEO, les liens, les performances de la page, son design, etc.

Si on met de côté ces critères de conception pour se concentrer sur la création technique, que l'on crée la page avec du code ou avec des outils, il y a à nouveau deux solutions :

1. On part de zéro

2. Ou on part d'un modèle

Si on travaille à partir d'un modèle, il a été idéalement conçu spécifiquement pour l'activité et pour le site concerné. Cependant, il existe des modèles génériques, qui ont leurs avantages et leurs inconvénients.

Ces gabarits sont souvent appelés des "templates". Il existe des templates de sites Web complets, et des templates de page, comme des templates de landing page, de page contact, de page produit.

Le thème WordPress Divi, qui contient un page builder (constructeur visuel de page), propose gratuitement des templates de pages, et de nouveaux sont ajoutés régulièrement. Ces modèles sont déjà directement intégrés dans Divi, et on peut les importer en un clic.

Dans les vidéos ci-dessus, sur un exemple de site Divi, je vous montre comment importer ces templates Divi, et comment les manipuler, avec un exercice commun : adapter une template à autre chose que ce à quoi elle était prévue au départ.

Attention, dans ce court atelier, vous allez apprendre à créer une page Web jolie et bien organisée rapidement et facilement. Toutefois, ce n'est pas la méthode recommandée pour créer un site Web professionnel rentable, cela nécessitera bien sûr plus de travail. Mais cet exercice est un très bon début pour vous familiariser avec une page WordPress construite avec Divi.

Voici une démonstration en avance rapide de ce que nous allons voir ensemble dans cet atelier vidéo. Il s'agit d'un exercice que vous pouvez pratiquer sur votre propre site WordPress, qui consiste à prendre d'un côté un template Divi, d'un autre côté un brief pour un site web, et à mixer les deux pour créer une nouvelle page web, que voici.

Bonjour, ici Jean de formation-divi.com (maintenant ideoforge.com). Aujourd'hui je vais vous montrer comment créer une page web sur votre site à partir d'un brief existant, c'est-à-dire de textes et de photos, et d'un template Divi. Les templates Divi, ce sont des pages web déjà construites, comme ici par exemple, dans lesquelles vous allez pouvoir modifier le texte, les images, la mise en page, etc. Mais au lieu de partir de zéro, vous allez partir de quelque chose qui est déjà bien organisé et joli. C'est parti, on démarre tout de suite.

Donc on est sur un site WordPress vide, ou quasiment vide. Si vous n'avez pas de site WordPress, pas d'hébergement, je vous invite à jeter un oeil à ma formation qui s'appelle « Obtenir son hébergement web et WordPress ». Sur ce site WordPress, Divi est installé. Et si vous n'avez pas Divi, je vous invite à regarder sur le site formation-divi.com : qu'est-ce que Divi ? Donc ce qu'on va faire, c'est créer une nouvelle page. Ici on va l'appeler « Test template ». On va cliquer sur « Utiliser Divi Builder », puis sur le plus, « Layout ».

Voici les fameux templates Divi. Chez eux, ça ne s'appelle pas « template », ça s'appelle des « layouts » : c'est une mise en page. Je vais vous montrer le brief existant, puisque l'objectif aujourd'hui est de créer une page web pour le refuge de Tutti Gris. C'est un exemple, c'est un exercice. Imaginez que d'un côté vous avez un site WordPress avec Divi, et de l'autre côté vous avez un brief. Ça, c'est le brief : le contenu de la page. C'est une page en quatre parties.

Partie 1, une en-tête avec le titre « Le refuge de Tutti Gris ». Un refuge, c'est un endroit où il y a des animaux qu'on soigne et que les gens peuvent adopter. Ici on va avoir le texte de l'en-tête de la page. Ensuite, dans la partie 2, on m'a dit qu'on voudrait mettre des portraits d'animaux, neuf animaux, et le titre, c'est « Les petits chéris qui vous attendent », avec un lien « Voir tous les petits chéris ». Dans le brief, partie 3, le titre « Ces quelques chiffres », et ici on va mettre des chiffres avec une petite phrase. Et partie 4, « Qui sommes-nous ? ».

Dans ce brief, il n'y a pas de newsletter, pas de liens vers les réseaux sociaux. Ça, c'est un brief qui a été fait, par exemple, par vous-même pour vous-même, ou bien entre un client et un prestataire, et donc on va le suivre à la lettre. Évidemment, quand on construit le site, on ne remet pas en cause le contenu, l'ordre des parties, le brief. On ne se dit pas : « Finalement, je vais rajouter des liens vers les réseaux sociaux », alors qu'on a dit qu'il n'y en avait pas.

Par exemple, une très bonne pratique peut être de dire : on va faire une version 1 qui va être bien présentée avec les contenus qu'on a définis ensemble. Par la suite, on rajoutera une inscription à une newsletter, avec un système de newsletter, dans une autre étape. Une fois que tout ça sera bien en place, on créera des réseaux sociaux, on mettra des liens, etc. Il ne faut pas toujours vouloir tout faire en même temps. Voilà le brief texte, et voilà les images qu'on nous a données.

Avant même de démarrer un site web, évidemment, les textes et les images doivent être prêts dans leur majorité. Donc ici, ce sont les neuf portraits qu'on nous a demandé de mettre dans la partie 2, portraits d'animaux, et en haut on a une image avec des chiens, qu'on voudrait mettre dans l'en-tête. Donc on a créé une page, on l'a ouverte dans Divi. Maintenant j'ai dû cliquer quelque part, j'ai fait disparaître ce qui me demandait de choisir un layout. Je vais donc cliquer en bas sur le bouton violet, sur le plus, et ici je vais choisir un modèle.

Le modèle que nous avons choisi, c'est celui-ci, « Animal Shelter ». Pour un modèle, il y a plusieurs pages : ici il y a huit pages. Celle qui nous intéresse, c'est celle-là. Donc on va l'utiliser, on attend qu'il s'importe. Alors je vais aller un petit peu rapidement, parce que je considère que vous savez déjà manipuler Divi, que vous avez déjà fait la formation « Découvrir Divi ». Je ne vais pas vous expliquer tous les clics, sinon la vidéo va durer trois heures au lieu de 20 minutes.

Ici on va s'occuper du contenu de la page, pas du menu, qui est autre chose. Donc, contenu de la page. Je reprends mon brief, partie 1, en-tête : titre, petit texte et un lien. Ça tombe bien, le template propose un surtitre, un titre, un petit texte et des liens. Donc on va adapter ça un petit peu. On va déjà regarder ensemble rapidement à quoi ressemble le modèle qu'on a choisi.

Ça, c'est une en-tête avec ce qu'on appelle deux call to action. Ensuite on a un long texte avec un titre. Ensuite on a un surtitre, un titre et des animaux, on a une liste de services, on a deux call to action, et une inscription à la newsletter ainsi que des liens vers les réseaux sociaux. On va commencer par le début. Si je prends mon brief, contenu de la page d'accueil, partie en-tête, le titre principal, « Le refuge de Tutti Gris ». Donc ici je vais modifier ceci.

Ici je vais vérifier : est-ce qu'on supprime « Adopter un animal » ? Non, on l'a bien, celui-ci. Ensuite, le texte qui vient ici. Le call to action s'appelle « Visiter le refuge », et on n'en a pas de deuxième. Voilà, on a adapté le texte de l'en-tête. Maintenant on voit que ce titre, soit on le met sur une ligne, très bien, soit on voudrait réduire l'interlignage. Celui-là, c'est celui qui s'appelle sous-titre : ici il s'appelle sous-titre, ici il s'appelle surtitre.

Ici on peut soit réduire la taille du texte pour qu'il passe sur une ligne, il était à 80, soit réduire la hauteur de ligne. Si c'était un petit peu plus long, je dirais qu'on réduirait la hauteur de ligne. Là, je vais le laisser, on va mettre ça comme ça. Voilà, c'est très bien. Ensuite, l'image de fond. L'image de fond qu'on m'a donnée dans le brief, ce sont ces chiens. Évidemment, on ne met jamais une photo telle quelle comme ça sur un site web, puisque ici elle est beaucoup trop grande : une image pour un site web doit faire 3000 pixels maximum.

Donc il faut évidemment la traiter avant de l'envoyer sur nos sites. Si un jour vous êtes amenés à envoyer des photos tous les jours sur votre site, vous pourrez mettre en place des outils qui vont les redimensionner automatiquement, mais parfois ça va simplement compliquer la tâche. Évidemment, on prépare toujours ses textes, ses documents et ses images pour le web. Un texte doit être structuré et rédigé pour le web, et une image doit être préparée pour le web. Préparer pour le web, ça veut dire qu'on va vérifier sa taille.

Ici il faudrait qu'on sache quelle taille on veut. Comme c'est une image de fond, 1800, c'est très bien, 72 dpi. Alors si je vais un peu trop vite pour vous, c'est normal, c'est parce que je vais vous montrer comment on fait rapidement, une fois qu'on se débrouille un petit peu. Une fois que j'ai préparé mon image à la bonne taille, je vais continuer à la traiter un petit peu : ici je ne veux pas autant de bleu. Là, je vais l'appeler « en-tête-web ».

Évidemment, il faut nommer vos fichiers images en fonction de leur contenu. Comme c'est une vidéo rapide, je vais mettre des noms rapidement. Donc ici je vais changer son image de fond. Là, je vois qu'elle n'est pas dans la section : ce n'est pas dans la section, c'est calé dans la rangée ou dans le module. Tout ça, vous l'apprenez lorsque vous apprenez Divi. Ici je vais la remplacer par l'image que je viens de créer, et on va voir le résultat.

Le résultat est bon en termes d'image. En revanche, le texte, maintenant, ça ne va plus du tout. Pourquoi ? Parce que l'image d'avant était faite pour avoir une grande partie vide à gauche. Donc maintenant on est embêtés, parce qu'on a un brief qui nous dit « veuillez mettre cette image en haut », mais le texte ne va pas dessus. Il y a plein de solutions. Une solution, ce serait de mettre un fond blanc, par exemple, sur le texte. Ce serait de décaler l'image vers la droite, ou de mettre un beaucoup plus grand fond bleu, décalé, tout ça avec des marges. Donc voilà, on efface.

Ce qui est très intéressant, avec nos premiers problèmes de design, c'est que lorsqu'on prend un template et qu'on veut remplacer nos textes et nos photos, ça ne va pas toujours rentrer dedans. C'est comme un enfant qui essaye de mettre un triangle dans un carré. C'est pourquoi tout construire, faire un design de zéro à partir de notre brief et de nos images, ça a des avantages. Après, il y a quand même des avantages : ici on a quelque chose qui est déjà structuré.

Comme nous avons choisi d'utiliser un template prédéfini, il y a forcément des contraintes. Sinon, on déconstruit tout ce qui a été fait, et ça nous prendra peut-être plus de temps que si on avait tout construit à partir de zéro. Donc là, ce qu'on va faire, qui peut être assez intéressant, c'est travailler cette image. Pour ça, on va aller prendre l'image de départ et reproduire à l'identique celle qu'il y avait avant. Je me rends dans la bibliothèque de médias, je retrouve l'image en question, c'était celle-ci.

Je vais l'ouvrir en entier, ici la copier, ici prendre mes chiens. Pour les dimensions, ce n'est pas encore bon. Celle-là, on va la mettre à peu près au même format. Ce qui est bien, maintenant, c'est qu'on peut voir : il faudrait qu'on ait tout ce qui est ici à gauche en gris. C'est simple, on va prendre nos chiens, l'enregistrer comme ceci, et on va la remplacer par « en-tête-web ». On va aller la remettre ici.

Ce qu'on peut faire dans ces cas-là, c'est, ici, le fond, lui mettre un parallaxe, lui dire qu'elle va plutôt être en bas. Et voilà, on a nos petits bonhommes qui apparaissent ici. On a cette ligne-là, qui est dans le template, qui est un peu courte, et qui nous embête, et on n'en veut pas. Donc il faut qu'on trouve d'où elle vient. Est-ce qu'elle vient de ce module, par exemple ? Si je vais dans « Style », ici dans les séparateurs, je veux lui dire « non ». Voilà.

Donc on a commencé par des difficultés techniques avec les images : on pensait que ça allait nous prendre deux minutes, ça en a pris 10. C'est comme ça. Évidemment, je vais vous faire une jolie page web en 30 minutes, mais le vrai travail va prendre plusieurs heures pour faire une page web correcte, une fois qu'on prend en compte l'aspect mobile, l'aspect SEO, l'aspect conversion, etc.

Bonjour, ici Jean de Netologiste (maintenant ideoforge.com). Voici la partie 2 de l'atelier vidéo « Comment utiliser les templates du thème Divi avec WordPress ». Donc maintenant, on a fait un magnifique en-tête et on a mis tous les contenus. On passe à la partie des portraits d'animaux : « Les petits chéris qui vous attendent ».

Alors ici, on voit que la partie 2 du template, c'est « About ». Donc ce qu'on va faire, c'est qu'on va la prendre et la faire glisser, pour l'instant n'importe où là-dessous. Il était fait en deux parties, donc on va aussi prendre cette partie-là au fond, on la réserve pour plus tard, comme on dit en cuisine. Donc, nous, notre partie, ça va être « Les petits chéris qui vous attendent ».

Ici, on n'a pas de surtitre. On peut soit en ajouter un, mais ce serait un peu dommage d'adapter le contenu à un design existant, donc on va simplement le supprimer. Ensuite, le titre est sur deux lignes parce que c'est censé être un titre court. On pourrait le passer sur une ligne, moi je vais le laisser comme ça.

Ensuite, ici, on a six petits chéris. On regarde déjà comment la personne qui a fait le template s'y est prise pour organiser ça. Il n'y a pas vraiment un seul module : on pourrait avoir dans chaque colonne un module image, un module titre, un module texte. Ici, il y a un seul module qui s'appelle « Résumé », et ce module va prendre un titre, un texte, une image et puis éventuellement d'autres choses. Ce qui nous intéresse, c'est la taille de l'image. Pour cela, je vais faire un clic droit sur « Quitter le Visual Builder ». Avant ça, on va quand même enregistrer, puisque pour l'instant on n'a rien enregistré : on avait une page vide.

Je vais aller vérifier la taille de ces images : elles font 800 x 800, et les bords ne sont pas arrondis. Ça veut dire que les bords seront arrondis par la programmation du site. Donc nous, on n'a pas besoin de travailler les images avant, on veut juste des images 800 x 600. Ce qu'on va faire, c'est prendre les images qu'on nous a données pour notre brief, et il faut qu'on en sorte des images 800 x 600. Donc on va créer un masque à 800 x 600, et on pourra mettre nos images dedans. Ici, j'ai un rectangle, il faut évidemment que je choisisse une image qui s'y prête.

Ici, je fais tout très très rapidement, mais il faut évidemment, si possible, un graphiste ou un photographe qui prépare ses images à l'avance, ou alors, si vous le faites tout seul, que vous y mettiez un certain soin. Ici, on fait la cinquième image avec le petit bonhomme rigolo, et puis la sixième. Et voilà, les animaux du refuge à adopter. Donc on va enregistrer ça, on va faire un petit dossier qui s'appelle « web ».

Alors là, je change l'ordre. Il y avait des numéros, un, deux, trois, quatre, cinq, six : si on vous donne des numéros comme ça, évidemment, il faut respecter l'ordre. Moi, je fais ma propre démo le plus rapidement possible pour vous montrer un petit peu ce qu'on peut faire quand on a un petit peu d'expérience avec WordPress et Divi. Et vous voyez que je ne fais pas de programmation : je n'ai pas fait de PHP, ni de JavaScript, même pas de HTML encore. Donc vous passez un petit peu de temps, et tout ce que je fais, vous pouvez le faire.

Ici, je vais cliquer sur le premier module. Son image n'est pas la bonne, elle est dans « Images ». Ici, je vais aller dans le dossier « web », je mets la première, la deuxième, et nous voilà. Donc on a les photos du brief. C'est quand même très beau : ça ne fait pas longtemps qu'on a commencé et c'est déjà une belle page.

On a ici le nom, et puis une petite caractéristique. Or on m'a donné six photos dans mon brief, mais on n'a pas donné les noms. Donc là, il va falloir montrer neuf animaux, et on a un brief incomplet. Soit on supprime complètement les infos ici, soit on va demander à la personne concernée, ou à celui qui vous fait cette page web, les prénoms ou les noms des animaux et, si possible, une ligne de description. Voilà, c'est le cas où il nous manque du contenu, ce qui arrive tout le temps sur un site web.

C'est pour ça que je vous dis : avant même de demander à quelqu'un de vous faire un site web, ou de le faire vous-même, écrivez déjà tous vos textes à plat, en colonne, sans rien du tout, un beau texte à plat sans couleur évidemment, et vos photos brutes, toujours en bonne qualité. Tout ça se travaille ensuite et s'intégrera dans le site. Donc ici, il nous manque des prénoms. On peut les appeler comme ça, et je vais appeler sa description « bébé femelle ». Voilà, dans le cas où il nous manque du contenu.

Ensuite, fin de la partie 2 : montrer neuf animaux. Là, il y a encore un problème de brief. Dans le brief, on a envoyé six photos, mais on me dit de montrer neuf animaux. Donc demandez aux concernés : vous leur demandez de montrer neuf animaux mais d'envoyer six photos, avec vous les trois photos manquantes, ou alors vous changez le brief pour montrer que six animaux. Finalement, hop, on va dupliquer celle-ci pour montrer ce que ça donne si on en avait neuf. Et ce qui nous reste, c'est le lien : partie 2, ici, sur le bouton « Voir tous les petits chéris ».

Ensuite, partie 3 : quelques chiffres. On veut mettre ce contenu quelque part, avec trois chiffres et une toute petite ligne de blabla. Donc on cherche si on a des sections. On pourrait dupliquer celle-ci, par exemple, et mettre le chiffre ici. On pourrait dupliquer celle-ci puis faire deux, trois colonnes. Je vais vous montrer rapidement comment on pourrait faire : « Animaux sauvés », et ici il y aurait juste une petite ligne.

Ensuite, on changerait ici en trois colonnes, on copierait ceci, et on changerait peut-être le style du texte H2, pas besoin d'être aussi haut. Quand on le ferait comme ça, on irait copier, voilà. Puis on copie les textes qu'on a mis, six. Donc ça peut être une manière de faire, et pas mal.

Ensuite, on a ça, qui est pas mal en fait, c'est assez joli. On se dit : tiens, on aurait pu utiliser ça. On va plutôt utiliser ça.

Bonjour, ici Jean de Formation Divi (maintenant ideoforge.com). Voici la partie 3 sur 3, la dernière de l'atelier vidéo « Comment utiliser les templates du thème Divi avec WordPress ». Ce qu'on va faire, c'est copier-coller ceux-ci, et supprimer l'exemple que je vous ai fait. Si vous êtes débutant et que vous ne suivez pas, c'est normal. Vous comprendrez très bien cette vidéo une fois que vous vous serez formé un petit peu à Divi, au fonctionnement du web et des pages web en général.

Ici, je vais pouvoir mettre ceux-ci. Je supprime le dernier, mais pour l'instant je vais le garder parce qu'il y a une image qui m'intéresse. Donc, « Images et icônes » : il utilise de belles images. Là, il va falloir les faire faire par quelqu'un, parce que c'est un format précis et vous voyez que c'est très, très soigné. Ici, on va le passer en trois colonnes. Maintenant, il va falloir soit apprendre à faire des images dans ce style, ou dans votre style, avec exactement les bonnes dimensions, de la transparence, etc., soit les commander à un graphiste, ou trouver des exemples en ligne et les modifier pour qu'elles aient exactement le bon format.

Maintenant, on ne va pas faire en sorte que la vidéo dure quatre heures, donc on continue. Ici, ça s'appelle « Quelques chiffres », on n'a pas le surtitre. Et cette partie-là, elle était ici. Après, voyez tous les petits chiens : là, on a encore une ligne qui était présente dans le layout mais qui ne nous plaît pas. Hop. Les petits chiens qui vous attendent, ici on réduit un peu, il faut laisser quand même, on ne réduit pas trop, c'est l'espace. Voilà, « Quelques chiffres », bla, bla, bla. Partie 3 terminée.

Partie 4, « Qui sommes-nous ? ». Qui sommes-nous, c'est facile, on l'a ici. Donc ici, on va faire « Qui sommes-nous ». J'ai pris du texte libre de droit, mais normalement ça aurait été rédigé en amont de la création du site. Et là, on voit qu'on a quelque chose en deux colonnes dans le template. Si le deuxième paragraphe, j'aurais dû le faire comme exemple, s'il avait été grand comme ça, on voit qu'on aurait quelque chose de complètement déséquilibré. On aurait donc pu vouloir mettre ici une image à droite, ou alors plutôt prendre un peu de ce contenu pour le mettre ici et équilibrer. Voilà, un équilibre entre les deux colonnes.

Ici, on a un bloc qui ne fait pas partie du brief. Partie 4, « Qui sommes-nous » : le paragraphe, pas de newsletter, pas de réseaux sociaux. Maintenant, on va faire quelque chose qui me brise le cœur en général, et qui doit faire la même chose à tout le monde : on va supprimer tout ce dont on ne se sert pas, même si c'est joli dans le template, parce que ça ne fait pas partie du brief. Si on commence à essayer de trouver du texte à mettre là-dedans, le site va partir en cacahuète. Donc ça, on ne s'en sert pas.

Ici, là encore, une ligne : on pourrait dire « ah, on peut la laisser », mais non, on la supprime. Du coup, ça, c'était plus grand, on peut le réduire ici. On a une photo magnifique, on a vraiment envie de la laisser. Pour l'instant, on va la laisser quelques secondes pour se faire plaisir. En tout cas, la newsletter, on la supprime ici. Voilà. Alors regardez, j'ai trouvé un truc sympa : est-ce que vous auriez une photo à mettre ici ? Et puis on remplace la photo, ça peut être sympa.

Donc si on vérifie ce qu'on a fait, on a dit qu'on ne s'occupait pas du menu, qui date d'une autre formation. On a une partie 1 qui est magnifique, une partie 2 avec des petits chiens rigolos, une partie 3 également. Exactement comme le brief, il nous faudrait des images. Je pourrais vous montrer comment les récupérer, les transformer, les faire, mais je le ferai dans une autre vidéo. Et puis un « Qui sommes-nous ». Donc on a répondu au brief, la page est prête. Bon travail !

Si tout ça vous plaît, que vous avez envie de reproduire ça à la maison ou au bureau, je vous invite à découvrir mon site Formation Divi. Si c'est ce qu'on vient de faire qui vous intéresse, ce serait la première formation, qui s'appelle « Découvrir Divi ».

Si vous avez déjà un site WordPress, vous pouvez simplement acheter Divi et faire cette formation. Si vous n'avez rien du tout mais que vous voulez commencer à créer votre site, je vous conseille de faire la formation « Obtenir son hébergement web et WordPress », puis la formation « Découvrir Divi », et ensuite vous serez capable de faire ce que je viens de faire ici assez facilement. Je vous remercie de votre attention, et revenez régulièrement me voir. Bonne journée !