Image à la même hauteur que le texte avec Divi : les meilleures solutions

Comment avoir une image dans une colonne qui fasse exactement la même hauteur que le texte de l’autre colonne ?

Quand utiliser un module image et quand utiliser une image de fond de colonne avec Divi ?

Les manières d’intégrer une image de fond : couvrir, ajustement, taille réelle, étirer

Comment éviter d’avoir des images déformées ou coupées dans votre site Web ?

Découvrez la réponse à ces questions dans ce nouveau tutoriel Divi gratuit :

Transcript de la vidéo

Aujourd’hui, je vais vous montrer comment faire ceci : avoir une image qui est exactement la même hauteur que le texte lorsque vous avez une ligne avec deux colonnes. Donc, ceci est dans la continuité de ma nouvelle formation « Mieux utiliser Divi » dans laquelle j’aborde des erreurs très courantes qui font que des sites web Divi sont complètement détruits. Si vous ne savez pas ce qu’est Divi, vous pouvez vous rendre sur mon site nethologiste.com dans « Divi qu’est-ce que Divi ? », je vous l’explique ici : c’est un thème WordPress qui vous permet d’éditer les pages visuellement sans faire de code. Je vous mets le lien dans la description de la vidéo.

Revenons à nos images. Ici, je vous ai créé des sections, donc une section ici, ça va être une ligne avec deux colonnes : du texte et une image. Je vous ai fait plusieurs exemples.
Ici, on a une image qui fait exactement la même hauteur que le texte, vous voyez c’est parfaitement symétrique et l’image garde son homothétie. Homothétie, ça veut dire qu’elle n’est pas déformée. Une image déformée, c’est ce qu’on verra à la fin.

C’est ça. Donc, premier exemple : image avec la bonne taille. Deuxième exemple : un texte plus court, et vous voyez que ici, l’image c’est plus un rectangle, mais le rendu est encore parfait, la hauteur de l’image est exactement la hauteur de ma colonne de droite.

Troisième exemple : on a encore un bon rendu symétrique avec une même hauteur, mais vous voyez que l’image est différente. Ici, ces deux images ont la même taille, mais il y en a une qui a été retravaillée, qui a été dézoomée en gros, et l’autre où on voit la terre en plus gros.

Ensuite, si on veut faire ça, c’est parce que souvent, on se retrouve, lorsqu’on fait un design comme ça avec un texte et une image, avec un gros blanc ici. Dans certains cas, ça passe, on pourrait dire que l’image est trop haute par rapport au texte, où on pourrait laisser comme ça. On n’est pas obligé de tout le temps faire des images qui ont exactement la même hauteur que le texte, parce que vous allez voir, c’est un peu compliqué à faire, c’est fastidieux. Donc, on pourrait dire que ça, ça va, ou dans certains cas, selon les sites web, selon le design, on pourrait dire que l’image est trop haute et qu’on voudrait pas l’espace vide ici.

Autre exemple : ici, c’est l’inverse, on a l’image pas assez haute avec un texte beaucoup plus haut que l’image. Donc là, pareil, c’est pas grave. Dans certains design, on peut laisser comme ça. Dans d’autres, on voudra plutôt s’arranger pour qu’il y ait la même hauteur d’image et de texte.

Lorsqu’on essaye de faire ça, on va parfois mettre des images en fond. C’est ce qu’on verra tout à l’heure, et ça va couper l’image comme ça. Ça, dans beaucoup de cas, c’est embêtant lorsqu’une image est coupée, et dans certains cas, ça passe.

Ici, ça va dépendre du contenu de l’image et des proportions du conteneur de l’image. Par exemple, si c’est une image avec un texte dedans, on peut pas couper le texte. Ici, j’ai pris la planète Terre qui est un cercle parfait exprès pour montrer lorsqu’on coupe et lorsqu’on déforme. Donc, dans ce cas précis, l’image coupée, ça peut passer, mais c’est pas terrible.

On est quand même plus sympa lorsqu’on voit la terre en entier comme ça. Et le dernier exemple, c’est l’image des formes, on va voir ça en détail, mais ça, ça va arriver souvent lorsque vous utilisez une image en tant qu’image de fond et que vous lui mettez une propriété qui dit que l’image doit être étirée pour couvrir son container. Dans ce cas là, ça va la déformer. Votre moyen pour obtenir une image déformée, mais comme ça ce serait de manuellement changer les dimensions de l’image, mais c’est beaucoup plus rare.

Alors, allons-y, voyons tout ça en détail : comment obtenir ce résultat parfait lorsque c’est ce qu’on veut obtenir, et comment éviter d’avoir les images coupées ou déformées. Donc ici, pour l’exemple, j’utilise Divi sur WordPress pour manipuler tout ça, mais on va avoir exactement les mêmes problématiques lorsque je fais du dev à partir de zéro avec du HTML, du CSS, etc. On aura exactement les mêmes problématiques et les mêmes réponses. Ici, je suis dans une page Divi toute simple. Donc, je vais créer une nouvelle section, et puis une rangée avec deux colonnes. Dans la colonne de gauche, je mets du texte, et dans la colonne de droite, je mets une image.

Voilà, donc ça donne ça. Je vais la bouger en haut. Ici, on attaque « images »…

Voici la suite du texte avec une ponctuation améliorée :

…Donc, souvent notre texte sera plus long, il aura un titre, et voilà le résultat.

Méthode numéro 1 : ici, si jamais pour une contrainte de design on souhaite avoir la même hauteur de texte et d’images, la plus facile c’est d’écrire plus de texte. [Applaudissements] Donc là, on peut chipoter où on peut mesurer : est-ce qu’on doit finir à cette ligne là ou à cette ligne là ? Finissons à celle-ci. Et on pourrait retravailler l’image pour qu’elle fasse 5 pixels de moins qu’elle arrive pile en bas du texte. Mais là, c’est chipoter. Alors cette méthode, la plus facile et la plus rapide pour avoir la même hauteur, qui consiste à rajouter du texte, c’est pas très malin. Parce que sinon, à chaque fois que vous avez une contrainte de design de symétrie, etc., vous allez changer votre texte. Or, votre texte, il est peut-être préparé en amont, c’est sûrement le message d’une entreprise, de vente ou quelque chose comme ça. S’il faut enlever une ligne ou en rajouter une, ça va. Mais par contre ici, on a doublé la longueur du texte, c’est rarement une bonne idée de faire ça.

Méthode numéro 2 : ici, on peut changer la largeur des colonnes. Si je mets la largeur de droite plus petite, comme ça on va voir qu’on va se rapprocher. Vous voyez, petit à petit, à chaque fois que je mets la colonne de droite moins large, puisque l’image va garder ses proportions, elle va donc être moins haute. Et donc ici, on arrive à peu près à la même hauteur. Même si maintenant, on voit qu’il nous manque, on a toujours pas assez de texte ou d’image, et encore trop large. Donc avec Divi, on peut pas faire plus petit que ça. Si vous faites du code, vous pourriez faire encore plus petit, mais enfin ce serait un peu ridicule de faire une colonne qui soit toute petite, toute petite, pour avoir une toute petite image juste pour avoir la même hauteur que le texte. Dans certains cas, ça ça peut passer. On va se rendre compte que nous étions en 50/50 et en fait il fallait plus tôt passer en deux tiers un tiers. Et avec une image rectangle, ici on aura gagné à peu près la bonne hauteur. Par contre, on voit que dans notre cas ici, ça ne fonctionne pas. Même si je la mets toute petite, on arrive toujours pas à quelque chose de satisfaisant.

Méthode numéro 3 : je pourrais changer la taille de l’image manuellement. Donc ça, je vous le dis tout de suite, c’est rarement une bonne idée. Ici, je vais dans mon image, dimensionnement, largeur. Si je lui mets 200 pixels, qu’est-ce qui se passe ? Il se passe simplement… Donc je pourrais essayer de jouer comme ça jusqu’à trouver exactement la bonne hauteur, quelque chose comme ça. Mais là, voyez ce qui se passe : maintenant on a un blanc à droite. Donc c’est pas du tout un problème d’avoir des blancs si on fait des sites web, un site web ça doit être aéré, il doit y avoir des grandes marges hautes, il doit y avoir plein d’espace blanc, ça c’est une règle de design en général. Mais ici, c’est pas un espace blanc qui apporte qui aère le site web, ça fait très bizarre, parce qu’on va avoir toutes nos rangées qui finissent exactement dans la largeur du site. Voyez où là, il y a la ligne verte ici, et celle-ci qui est coupée comme ça à droite qui est vide ? Donc ça fait très bizarre. On pourrait dire que pour faire un petit peu moins pire, on met l’image à droite, mais l’appareil, on se retrouve avec un blanc ici et ce blanc là aussi, c’est pareil, il est pas opportun.

Méthode numéro 4 : très mauvaise idée, ce serait de déformer l’image pour qu’elle prenne tout le conteneur. Donc, est-ce qu’il va nous permettre de faire ça ? Comme on le fait jamais ça, je sais même pas si on va pouvoir le faire. Si je lui dis hauteur 300 pixels… Ouais, s’il me permet de le faire. Donc hauteur on veut… de 100, et largeur si on lui dit 400 par exemple… Ça ne marche pas. Ça ne marche pas non plus non, il veut pas que je le fasse. Bon, toute façon c’était une très mauvaise idée d’aller déformer manuellement l’image pour qu’elle prenne son conteneur, parce qu’on se serait retrouvé à quelque chose comme ça, on ne déforme jamais une image, ça c’est une règle de base du design que ce soit quel que soit le projet. Donc ici, je vais aller enlever, réinitialiser les styles, et on se retrouve au point de départ.

Dernière mauvaise méthode avant de passer aux bonnes méthodes, ce serait de changer ici la taille du texte. Donc ce serait pas du tout une bonne idée. Ici pour, je pourrais aller par exemple dans texte, au lieu de 14 je lui mets 18, je vais changer ça, son interlignage… Vous voyez que c’est pas une bonne idée du tout, parce qu’on va avoir ici un texte tout moche, très espacé et grand, et partout dans le reste du site un texte normal. Donc ça va faire très bizarre, c’est pas possible de travailler comme ça, parce qu’on veut une homogénéité dans nos textes, on peut pas avoir un texte comme ça très espacé et puis normal juste après, on perd un peu l’homogénéité dans notre design.

Donc, passons aux bonnes méthodes. Les bonnes méthodes, c’est travailler nos images pour qu’elles aient exactement la taille que nous voulons qu’elles aient, tout simplement. Exemple : ici on a du texte, une image, soit on estime que c’est bien comme ça, et dans ce cas là il y a pas de problème, soit on estime que pour cette partie du design il nous faudrait plutôt une image qui est la même hauteur que le texte. Si nous décidons ça, donc notre image doit avoir cette taille là tout simplement.

Donc ici, j’ai un petit outil qui s’appelle Snaggit, qui me permet de mesurer, mais je vais aller mesurer autrement encore. Ici on nous dit 512 x 302. Donc c’est simple, ce que je veux c’est une image qui fait 512 x 302. Donc je vais le noter dans mes notes ici. Maintenant, pour avoir la largeur exacte, parce que là je l’ai fait un petit peu au pif, il nous suffit de faire clic droit, inspecter. On met la page à son maximum, vous voyez qu’à partir d’ici le contenu devient pas plus grand, par contre à partie d’ici il vient, il devient plus petit. Donc je me mets là, là, quand il devient pas plus grand. Maintenant ici, quand je passe la souris là dessus, ici on a le code HTML que mon thème Divi a créé, et ici vous voyez que c’est écrit « 10etpbcolumn.etpbcolumn12 ». Donc « column » ses colonnes et 12 ça veut dire que c’est une colonne qui fait un demi. Donc c’est bien ça que je vais sélectionner, et ici on me dit que ça fait 510,3 en largeur. Donc je vais me noter ici « colonne largeur 1/2 : 510,3 ». Et pour la hauteur ? Alors la hauteur ici, il faut pas que je la prenne puisque ça c’est la hauteur de ma colonne actuelle, or elle est trop haute. On va aller regarder ici. Si je prends ma colonne de gauche, ici la hauteur est de 292,38. 292,38, ça c’est la hauteur de mon texte. Donc si je fais une image qui fait ça en largeur et ça en hauteur, elle devrait normalement tomber pile et ça devrait vraiment bien rendre, un résultat qui ressemble à ça.

Ici on a des virgules, et on n’a pas besoin, quand on fait une image on ne coupe pas des pixels. Donc soit on prend 510 soit on prend 511, ça changera pas beaucoup, il y a pas beaucoup de gens qui verront la différence. Mais on va déjà être pas mal si on prend ça : 510, 292.

Donc je vais créer une image qui fait cette taille là dans mon logiciel de gestion d’image préféré : 510, 292. Donc pour travailler les images, moi j’utilise Photoshop parce que j’ai l’habitude de ça. Mais vous n’avez pas besoin d’acheter Photoshop si vous n’avez pas de logiciel de traitement d’image préféré, vous n’avez jamais fait ça. Vous tapez sur Google « logiciel traitement d’image », « logiciel retouche d’image », « logiciel graphisme », etc. Vous en trouvez pour faire les petites manips qu’on va faire, il y en a pas besoin d’en acheter un, vous allez en trouver plein qui sont gratuits. Ensuite, vous regardez des tutoriels et la documentation qui vous explique comment utiliser le logiciel d’image que vous avez choisi, et vous arriverez à peu près au même point que moi ici.

Donc j’ai créé une image vide qui fait 510 x 292. Maintenant, lorsque je prends mon image de la terre, c’est un carré. Donc soit je la mets comme ça, et elle est coupée. Soit je veux garder tout ce qu’il y a dans l’image, et dans ce cas là j’ai du blanc, j’ai du vide à gauche et à droite. Donc pour ça, on va travailler notre image. Pour chaque image sur un site web, elle va forcément passer quelque part dans un logiciel de traitement d’image, il faut travailler toutes les images une à une, soit pour changer un petit peu leur propriété, leur contraste, leur couleur, etc., soit au minimum pour les redimensionner et les recadrer.

Donc ici, j’ai un exemple un peu compliqué avec la terre, je vous montre… On va le faire, mais avant ça je vous montre un autre exemple. Si mon image c’était ces fleurs, je vérifie que vous voyez bien l’intégralité de mon écran… Voilà, comme j’ai un écran très grand, j’enregistre juste une petite partie de mon écran au cas où votre écran à vous soit plus petit pour que vous voyez bien. Et là je viens de redimensionner Photoshop à la taille de la vidéo.

Donc imaginez que votre image soit ces fleurs, ici on peut couper sans problème, je pourrais faire ça, et voilà c’est fini, j’ai ma bonne image. Maintenant si votre image elle contient du texte comme ça, ça va dépendre de la position du texte dans l’image et à ce qu’il y a un bord etc. Il y a des images qu’on peut couper, d’autres qu’on ne peut pas couper. Ici, si je fais ça comme ça, on voit que ça c’est une image que je peux couper parfaitement, je fais ça et c’est terminé. Les fleurs, on peut les couper, celle là on peut les couper.

Par contre, si je vous prends un autre exemple… Voyez celui-là, il y a un texte, une image, mais si je commence à faire simple ici, on est embêté parce que soit on veut montrer le sujet de l’image qui est la tasse de café, les bougies, tout simple, et on a un petit bout de texte qui nous embête. Soit on va vous montrer juste le texte, mais déjà il rentre pas, donc il faudrait que je le mette comme ça pour qu’il rentre, et puis notre image n’a plus le sens parce qu’on voit le bas d’une tasse de café, d’une bougie, et puis en plus à gauche et à droite c’est vide. Donc dans ces cas-là, il faut retravailler complètement l’image avec les calques, etc. Donc c’est tout un travail de graphisme ou changer l’image.

Un autre exemple… Si j’essaie… Même problème, ça c’est une image en hauteur, je peux pas la transformer de vertical à horizontal. Ou alors je garde que le visage de la personne, ou alors je garde que le texte, mais on peut pas faire ça par exemple, c’est moche.

Autre exemple, vous voyez que ça va dépendre vraiment du cas par cas, il va falloir apprendre pour chaque image, pour chaque cas, quelle est la meilleure solution. Celle-ci je peux la couper comme ça, elle rentre bien sans problème. J’ai un autre exemple… Celle-ci, elle peut être coupée. Donc il y en a qui peuvent être coupés, il y en a qui peuvent pas.

Donc, prenons notre terre. Si ici on veut mettre une image de terre comme ça, ici on a un carré qu’on veut faire entrer dans un rectangle. Avant d’essayer de faire les manips compliquées qu’on va faire tout de suite, on peut aussi, si c’est une image qu’on a trouvé en ligne, qu’on a acheté ou téléchargé sur un site libre de droit, on peut essayer de trouver une image qui soit déjà plutôt horizontale en format paysage rectangle, ce sera plus facile à travailler. Si on l’a faite faire par un graphiste, on peut lui demander de nous faire une image rectangle, ce sera plus facile aussi.

Maintenant, si on se retrouve dans ce cas là et qu’on veut vraiment utiliser cette image là, on peut choisir de couper, c’est pas grave, dans ce cas là ça peut passer. Après, si on se dit qu’on veut garder la terre en entier, on va faire comme ça, on la met au milieu, et on se retrouve avec des vides qu’on veut combler.

Donc pour ça, ici on va pas faire une formation de graphisme parce que ici on est en train de parler de la taille des images sur le web. Voilà, si je fais ça, vous voyez ça rend pas terrible. Donc là, il y a un travail à faire pour chaque image sur un site web, il faut la travailler. Soit vous apprenez à le faire, soit vous confiez ça à un professionnel de l’image.

Donc je vais mettre la vidéo en pause et je vais travailler cette image pour combler ces vides.

Et voilà, j’ai terminé. Donc j’ai créé une image qui a exactement les dimensions que nous avons mesurées pour pouvoir l’utiliser ici. Et lorsque je la mets en ligne, nous avons le résultat que nous allons voir tout de suite.

Donc nous étions sur laquelle ? Celle-ci, c’était « images trop haute ». Je mets mon image et voilà. Maintenant nous avons exactement une image qui fait la hauteur du texte.

Maintenant, pour se dire le rendu de cette image est bizarre parce que on a un cercle qui est presque collé en haut et en bas avec un grand espace à gauche et un grand espace à droite. Donc dans ce cas là, on la travaille différemment, c’est tout. Ici, comme elle est dans un rectangle comme ça, je pourrais décider que ça rendrait mieux d’avoir ceci. Ensuite, je travaille pour remplir mes vides, je fais le travail de graphisme, etc. Ce serait mieux si j’avais des calques avec la terre sur un calque ici et le fond sur un autre là. C’est pas le cas mais c’est le cas si vous travaillez vos images depuis zéro dans Photoshop. Et hop, vous aurez toujours toute la surface ici qui est couverte avec une terre plus petite au milieu.

Donc ça c’était pour résoudre le cas où l’image était trop haute. Si l’image est pas assez haute, c’est la même chose. Ici on va aller prendre les dimensions, donc la largeur on l’a déjà notée. Maintenant la hauteur de mon texte ici, c’est 840,8. Hauteur de mon texte : 848. Donc 510, 848.

510, 848. Mais quand c’est très haut comme ça, une image verticale qui est très haute, souvent ça rend pas terrible. Ça rend pas terrible. Donc je vais… je vais vous montrer ce que ça donne…

Voilà, j’ai fini de travailler mon image. Donc le rendu n’est pas très beau, mais je vais pas passer une heure à faire une image jolie pour juste ce tutoriel. On va dire que là elle est décente. Donc ici, je vais la remplacer par mon image qui fait pile les dimensions, et voilà, on a réussi. Maintenant on a une image qui fait pile la même hauteur que le texte. Le rendu n’est pas trop mal, mais il faut savoir que quand c’est des photos, et qu’on les coupe en hauteur comme ça, souvent ça, ça va pas rendre terrible.

Donc ici, on pourrait se demander : plutôt que faire des images très hautes, est-ce qu’on n’a pas plutôt trop de texte ici ? Est-ce qu’on devrait pas faire deux sections ? Ou est-ce qu’on devrait organiser le texte en deux colonnes, etc. ? Enfin, ces images très hautes verticales en général ça va pas tout le temps marcher.

Je vous ai montré 4 ou 5 mauvaises méthodes. Ici il y a deux bonnes solutions, là on vient de voir la première bonne solution qui est de travailler notre image pour qu’elle fasse exactement la taille du container dans laquelle elle doit se trouver. Maintenant le désavantage de cette solution, c’est que si demain on vous dit « Ah j’ai oublié une ligne de texte ici et il faut que je l’ajoute », et bien il faut recommencer tout le travail. Dans ce cas là, à chaque fois que vous allez modifier le texte, ça va changer sa hauteur et donc il faudra refaire l’image.

Puis en plus ici, on va arriver à quelque chose qui est vraiment trop haut, donc il faudra réorganiser toute la section. Et puis si vous vous dites « Finalement 50/50 on ne sait pas ce que je veux, je vais changer en deux tiers un tiers », pareil il faut retravailler l’image parce qu’elle n’a plus la bonne hauteur. Même si on n’avait pas rajouté ce texte ici, maintenant vous voyez, plus je réduis la largeur de la colonne, plus forcément la hauteur de l’image, puisqu’elle garde ses proportions, va se réduire. Et donc elle ne correspond plus à la hauteur de mon texte.

Donc ça c’est la première bonne solution, c’est ce qu’on fait dans les deux tiers des cas lorsqu’on souhaite absolument que l’image ait la même hauteur que le texte. Même si, comme je vous ai dit tout à l’heure, c’est pas obligatoire.

La deuxième bonne solution, ça va être au lieu de mettre une image comme ça ici avec un module image (donc si vous faites du code, le module image c’est de Divi pour vous, c’est une balise HTML IMG tout simplement), la deuxième solution consiste à utiliser une image de fond dans notre colonne. Donc image de fond, c’est du CSS, background-image, url parenthèses, etc. Nous, on va le faire avec Divi, donc juste avec des clics et de la compréhension sans faire le code.

Donc je vais recréer, je vais dupliquer celle-ci. Ici je vais l’appeler « images de fond ». Je vais supprimer mon image. Je vais me rendre dans les réglages de ma rangée, puis les réglages de ma deuxième colonne, puis dans fond, puis dans l’image de fond, et ici je vais mettre mon image. Donc je vais pas prendre celle que j’ai travaillée depuis tout à l’heure, je vais prendre l’image d’origine qui faisait 1000×1000. Donc elle est un peu trop grande, vous savez qu’il faut jamais mettre des images plus grandes que leur utilisation sinon votre site est plus long à charger et puis Google vous punira. Mais ici, prenons déjà la 1000×1000 pour l’exemple.

Donc dans ma deuxième colonne, j’ai mis une image de fond. Maintenant, rien ne s’affiche. Pourquoi rien ne s’affiche ? Parce qu’elle est vide, elle a une hauteur nulle, elle fait 0 de hauteur. Donc on a beau lui mettre du rouge, du bleu, des images de fond tout ce qu’on veut en fond, tant qu’elle fait zéro de hauteur, on ne verra rien du tout.

Maintenant, si je vais lui mettre un texte, on voit que mon image apparaît. Et comme c’est une image de fond de la colonne, elle va prendre la hauteur de la colonne. Et donc, plus mon texte est haut, vous voyez, plus mon image sera haute comme ça.

Maintenant vous voyez que… elle se zoom, elle se dézoom, elle a un peu changé de taille. Donc ça c’est parce que nous avons des réglages ici. Quand on met une image de fond, on a ici le type d’image de fond, ça peut être « couvrir » justement, « taille réelle » et « étirer ».

Donc « couvrir », ça va automatiquement couvrir toute la surface de ma colonne. La surface de ma colonne, elle est déterminée par quoi ? La largeur, c’est la moitié de la largeur de mon site, c’est la largeur de ma colonne comme on est en 50/50. Et la hauteur, c’est la hauteur de mon texte ici.

Donc ici, ça va couvrir tout le temps, tout le temps couvrir, même si je rajoute du texte à l’infini, vous voyez, la hauteur de mon texte est ici et la surface est toujours bien remplie. Donc ça, ça permet de automatiquement faire le travail que nous avons fait tout à l’heure, sans faire aucun calcul. Tout à l’heure c’est moi qui ai été mesuré, ici j’avais dit que c’était 510, là c’était 848,13 machin truc. Ici vous voyez qu’il y a aucun autre, aucun calcul lorsque je mets l’image de fond en mode « couvrir », ça va automatiquement couvrir.

Maintenant, vous avez vu ce qui se passe, et peu, c’est que puisque on demande à une image de couvrir une zone qui a des dimensions indéterminées, notre image ne pourra jamais avoir exactement la même taille que cette zone. Moi j’ai une image carrée qui fait 1000×1000, et ici j’ai un container qui fait 510, et en hauteur comme j’ai plein de texte il fait peut-être 1000. Donc on essaie de mettre un carré dans un rectangle vertical, donc forcément ça va automatiquement couper. Ça c’est parce que on a mis en mode « couvrir ».

Maintenant, si je vais changer, ici au lieu de « couvrir » si je lui dis « ajustement », on voit que l’image n’est plus coupée. Par contre, elle n’est pas assez haute par rapport à la hauteur de mon texte. Donc ces exemples de textes que j’avais mis parce que sinon on ne voyait rien, on va les enlever.

Déjà je vais vous montrer comment faire apparaître l’image sans forcément mettre quoi que ce soit ici, puisque c’est ce qu’on veut, on veut pas du texte sur notre image, c’était juste une étape dans l’exemple. Nous, on veut juste une image à droite. Là l’image est encore là, mais je vous rappelle que la hauteur est zéro, donc on ne la voit pas. Pour faire ça, je vais dans ma rangée, ce qu’ils appellent « ligne » ici, et dans dimensionnement, je vais lui dire « harmoniser les hauteurs des colonnes ». Lorsque je fais ça, il va rendre les deux colonnes à la même hauteur, c’est-à-dire qu’il prend exactement la hauteur de cette colonne là, pour l’appliquer à l’autre colonne puisque elle elle faisait zéro. Il prend la plus petite et met la taille de la plus haute.

Donc ça c’est génial parce que c’est le travail que nous avions fait tout à l’heure. Tout à l’heure on avait été mesuré la hauteur, on avait été dans Photoshop, on avait fait des images, etc. Maintenant en un clic ça s’est fait tout seul. Simplement ici, comme on est en mode numéro 2, le mode numéro 2 c’était ce qu’ils appellent « ajustement », ici elle est trop petite. C’est ce qu’on avait comme exemple au tout début de la vidéo, on se retrouve avec du blanc à gauche à droite. Et je vous ai dit, le blanc c’est pas grave mais ici il est pas opportun. Donc « ajustement » c’est pas ce qui nous intéresse.

Si je reprends « couvrir », là c’est pas mal. C’est pas mal simplement, c’est coupé. Donc là ça va dépendre du type d’image. Mais exemple, si je reprends les fleurs que je vous ai montrées tout à l’heure, je reviens ici, je change, je lui mets les fleurs… Ça c’est une photo, si elle est coupée ça pose pas de problème.

Donc ici en deux clics, grâce à une image de fond, on a quelque chose qui fait exactement la même hauteur et c’est terminé. Pour les grands, pour les grands écrans. Après pour le mobile il faudra faire autre chose. Mais voyez déjà on n’a pas besoin d’aller dans Photoshop, on n’a pas besoin de mesurer quoi que ce soit, on met une image, il faut simplement qu’elle soit plus large que la largeur de notre colonne. Notre colonne elle fait 510, donc ici si j’ai une image qui fait 510 ou 600 ou 700 ou 800 ça passe et on est bon. Celle-ci je peux la couper, celle-ci est bien, ça dépend des images, ça dépend de la sensibilité, est-ce qu’on peut couper la terre ou pas c’est embêtant.

Et ça nous permet de voir l’exemple suivant. Donc « couvrir » c’est très bien mais ça coupe l’image. « Ajustement » c’est pas terrible puisque ça fait trop petit. « Taille réelle » c’est la taille réelle de votre image. Donc à moins que vous l’ayez fait exactement la bonne taille, ça ça va pas vous arranger. Ici elle fait 1000×1000, donc mon image fait 1000×1000. Donc comme le container fait 510 x quelques centaines, ça va montrer qu’un tout petit bout de mon image.

Maintenant arrivons au coupable : « étirer pour remplir ». « Étirer pour remplir », ça peut paraître bien parce que ça va prendre automatiquement exactement la taille de mon container, c’est magique. Et ça va même étirer l’image pour qu’on la voit en entier. Donc ça paraît magique, c’est exactement ce qu’on voudrait, sauf que comme vous le voyez maintenant, c’est tout moche. On ne veut jamais déformer une image, c’est pas possible. J’ai testé plein d’images avant d’enregistrer la vidéo et j’ai choisi la terre parce que là, c’est vraiment quelque chose que tout le monde comprend : on voit bien que l’image est déformée.

Évidemment, mais attention, parce qu’il y a certaines images, on va pas forcément le voir qu’elles sont déformées, on va pas le voir au premier coup d’œil, parce qu’elles seront un petit peu déformées, pas trop, selon la taille de l’image, la taille du container, de la colonne, etc.

Mais il faut bien comprendre ce qu’il se passe, parce que même si vous faites le truc rapidement, votre image est un petit peu déformée. Vous passez à la suite, vous oubliez. Les gens, le cerveau humain, vos visiteurs, ils vont voir qu’il y a quelque chose d’un peu déformé. Je vais voir si je peux vous faire un exemple ici. Est-ce que je peux trouver une autre photo qui va être un petit peu déformée ? Si je prends en flash sail, voilà, là on est un petit peu déformé. Et si on ne connaît pas tout ce que je viens d’expliquer pendant 40 minutes, et puis qu’on ne le réfléchit pas à ce qu’on fait, on peut se dire : « Là c’est bon, ça passe, là c’est parfait, la hauteur est bonne, je suis content de moi, je passe à la suite. » Non, vous voyez que l’image ici, elle a les bonnes proportions à gauche, mais l’image à droite, elle est un petit peu déformée. Et ça, vos visiteurs ils le voient, ils vont percevoir sans s’en rendre compte. Ça crée des frictions, ce genre de phénomène psychologique. On peut dire de votre visiteur : il passe, il regarde votre site, il ne va pas se dire « Ah tiens l’image est déformée, je vais appeler tous mes amis pour leur dire, et j’ai trouvé un site web, il y a une image déformée », non, il s’en fout. Mais il le voit, c’est comme s’il y avait une petite faute d’orthographe par-ci par-là, ou un manque d’homogénéité, un texte de 14 pixels puis un autre de 15 pixels. Ça décrédibilise en fait l’entreprise qui fait le site, même si vous n’avez pas l’impression qu’elle est vraiment déformée. On l’a bien vu tout à l’heure quand on compare l’original à celle-là. Donc ça, on ne veut jamais le faire, on ne veut pas déformer une image.

Donc on a vu une mauvaise méthode pour l’image de fond, c’est celle qui consiste à dire « étirer pour remplir », ça on l’utilise quasiment jamais.
On a vu que « taille réel » à moins d’avoir travaillé l’image pile à la bonne taille, mais dans ce cas-là pas besoin d’utiliser un fond, autant la mettre directement en tant qu’image, c’est pas bon non plus.
On a vu que « couvrir » c’est bon dans certains cas quand on peut couper l’image, et que justement ça ne nous arrange pas. Donc chacun de ces types d’images arrière-plan a son utilité.

Un réel ajustement, « couvrir » et « tirer » n’utilisez jamais. Et pour faire ce qu’on veut faire aujourd’hui dans cette vidéo, qui est d’avoir une image à la même hauteur que notre texte, on utilise « couvrir ». Lorsque vous utilisez « couvrir », là je vais supprimer l’image des formes et c’est très moche. Lorsque vous utilisez « couvrir », soit c’est une image qui peut être coupée comme ça et c’est parfait pour la version grand écran, vous avez fini. Soit c’est une image qui ne peut pas être coupée, dans ce cas-là vous choisissez une autre image qui elle peut être coupée, ou vous retravaillez un peu votre image dans Photoshop, dans votre logiciel d’image, avec moins de contraintes que ce qu’on a vu tout à l’heure. Parce que comme le phénomène d’image de fond et « couvrir » ça va couper votre image automatiquement, on n’a plus besoin d’aller mesurer exactement 510 pixels, point 50 de pixels, etc. On veut juste s’arranger en gros pour que l’image ne soit pas trop grosse, faut pas qu’elle fasse trois mégaoctets, il faut pas qu’elle fasse 2000 pixels de large, et s’arranger pour que le sujet de l’image tienne dans son container automatiquement coupé, et c’est terminé.

Donc récapitulatif : bonne solution numéro 1, on mesure notre container, on va dans notre logiciel d’image et on fait une image qui a exactement les dimensions souhaitées. Bonne solution numéro 2 : en images de fond de notre colonne, une image en mode « couvrir ». Alors petit rappel quand même, ce que vous voyez chez vous lorsque vous travaillez sur un site web, ce n’est pas forcément ce que toutes les autres personnes vont voir. Ça dépend de leur navigateur, leur système d’exploitation, ça dépend de leurs paramètres, par exemple il y a des gens ils ont des paramètres du navigateur pour grossir tous les textes parce qu’ils trouvent que les textes sont trop petits. Et donc vous, vous voyez ça, mais eux qu’est-ce qu’ils vont voir ? Ils vont voir un texte plus grand, et ça va rendre ça chez eux.

C’est pour la solution numéro 1 dans laquelle on avait fait l’image pile à la taille du container. Ça, vous n’y pouvez rien si la personne choisit d’avoir les textes plus grands chez elle. Elle a l’habitude d’avoir des choses qui sont un peu pas symétriques, puisque c’est la personne elle-même, le visiteur, qui a choisi d’avoir un texte plus grand. Donc, quand je vous dis ça, elle ne va pas aller dans Divi (indiquez-vous qui travaillez dans Divi en votre site). La personne sait que dans les paramètres de son navigateur, elle peut décider d’avoir des textes plus grands, elle peut décider de ne jamais appliquer la police de caractère que vous avez choisie, etc. Donc, vous n’aurez jamais chez tout le monde cette ligne parfaite ici qui arrive en bas. Donc, ce n’est pas la peine si quelqu’un vous disait « chez moi, c’est pas le droit ». Oui, vous le savez, c’est comme ça que fonctionne le web. Si vous testez le même site sur 50 personnes différentes, avec 50 systèmes d’exploitation, navigateurs et paramètres différents, vous n’aurez pas tout le temps le même résultat. Mais quand même, en faisant ce qu’on a fait ici, la plupart des gens ça devrait arriver à peu près à la même hauteur.

Pour la solution 2, qui consiste à utiliser une image de fond :

Où est-ce qu’on a mis l’image ? Je la paire à chaque fois. Elle est là, notre image de fond. L’image de fond est « couvrir » dans ce cas-là, puisque ici on couvre la zone automatiquement. Même si le texte est plus grand chez la personne, ça va couvrir. Par contre, il verra pas la même chose que vous. Quand on utilise « couvrir » comme ça pour couper les images, vous allez avoir des gens (si vous travaillez avec des collègues ou vos clients etc.) qui vont vous dire « chez moi c’est coupé comme ça » et vous chez vous c’est coupé comme ça. Bon bah, il faut savoir que l’image sera coupée et vous ne pourrez jamais exactement la couper où vous voulez si vous utilisez des images de fond. Puisque l’image de fond, c’est une coupe automatique qui dépend de la largeur du conteneur, qui peut dépendre du navigateur de la personne qui regarde le site web. Donc, vous n’aurez pas le même résultat.

Maintenant qu’on a réussi ça pour grand écran, on va voir ce que ça donne sur mobile.

Ici, si je clique sur tablette, on voit que notre solution 2 (images de fond « couvrir ») elle a un petit problème et notre solution 1 elle est parfaite. Et sur mobile, notre solution 1 elle est parfaite et notre solution 2 elle a un petit problème. Donc, comment résoudre ça ?

Donc, je vous rappelle que notre solution c’était de faire une image qui est la taille du container. Donc, même si le container change de taille sur mobile (puisque les deux colonnes se transforment de lignes qui viennent les unes après les autres), comme la largeur du mobile est moins large que la largeur de la colonne que nous avions tout à l’heure en grand écran, cela va bien prendre 100% et s’afficher parfaitement lorsqu’on a fait une image aux bonnes dimensions. Par contre, pour notre solution 2, puisque ici il n’y a pas de contenu dans notre colonne 2, et bien ça nous fait comme ce qu’on avait tout à l’heure. Tout à l’heure elle faisait 0 pixel de hauteur et c’était vide. Là, il nous en affiche un petit bout mais on voit que c’est trop coupé. Ça, c’est pas satisfaisant. Si la terre était coupée mais un peu plus grande, ça se discuterait, mais là c’est pas satisfaisant.

Donc, deux solutions pour ça :

Soit vous mettez quelque chose dans cette colonne qui va prendre de la place (donc par exemple un module séparateur). Vous décochez « afficher le séparateur » et vous lui mettez une hauteur (par exemple 400 pixels). Donc, ici ça va être trop grand. Voilà, hauteur minimale de 100 pixels. Donc, ça n’a rien changé ici. Vous voyez, si je le supprime et je le remets avec « contrôle Z », ça ne change rien. Par contre, sur mobile (puisque ça avance à une hauteur nulle mais que maintenant on lui a dit 200 pixels minimum), hop on voit notre image et on peut même mettre des dimensions différentes. Ici, on va dans « style » -> « dimensionnement ». On clique sur le téléphone. Donc ici, on lui dit que sur bureau c’est 200 pixels, sur tablette ça rend quoi si on lui dit 200 pixels sur tablette ? On va lui dire 400 pixels. Alors, attention, ce qu’on fait là est un peu hasardeux, mais ça va à peu près. Ici 200 pixels sur mobile, ça va dépendre de la largeur et la résolution du mobile (300 pixels sur mobile). Donc ici on a 200, mais on pourrait avoir 0 puisque toute façon sur grand écran on a deux colonnes à côté de l’autre et on lui a dit de prendre la même hauteur que celle de gauche. Sur tablette on a fait un peu au pif, il faut travailler ça plus longtemps, mais on a déjà un bon résultat et sur mobile ça fonctionne. Donc, ça c’est pour la solution du fond de l’image de fond : mettre un contenu séparateur invisible ici.

Maintenant, on peut aussi simplement mettre une marge dans notre colonne pour pousser. Ici, je vais dans ma colonne -> « espacement » -> « margin ». Je vais lui mettre les mêmes valeurs ici. On va lui dire 180 (ici on avait dit 500 et ici on avait dit 200). Là, ici je mets un « padding top », une marge interne dans ma colonne. Donc ça va pousser le contenu même si on n’a pas ça, ça pousse quand même. Et donc puisque le container de l’image grandit grâce à cette marge, elle peut maintenant s’afficher.

Ceci en comprenant bien que puisque nous avons demandé à l’image de couvrir une zone qui change de taille lorsqu’on change de taille d’écran, forcément la coupe sera toujours différente en fonction de la taille de l’écran.

Ce qui est bien aussi avec la solution 2 de couvrir, c’est que maintenant lorsque nous changeons la taille de nos colonnes, vous voyez que ça va automatiquement bien fonctionner si l’image peut être coupée facilement, comme c’est le cas pour les fleurs. Ça va marcher dans tous les cas, quasiment.