Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


Contexte

Ajouter une superposition de texte aux images dans WordPress peut sembler intimidant au début, surtout si vous avez une expérience minimale de la création d’un site Web. Heureusement, il existe un moyen rapide et facile de vous aider à accomplir cela Deux, un thème pour WordPress. le Générateur de Divi et Visual Builders sont d’excellents outils pour tout concepteur Web, que vous soyez débutant ou que vous conceviez des sites Web depuis des années. Une des plus grandes choses Deux est-ce que cela vous donne la possibilité de faire preuve de créativité avec votre site Web sans taper trop ou pas de CSS; Si vous voulez, vous pouvez simplement l’utiliser Deux en tant que constructeur de site par glisser-déposer.

Il existe maintenant plusieurs façons d’ajouter du texte à une image, en fonction de la façon dont vous souhaitez que votre superposition de texte fonctionne. Cependant, aucun de ceux-ci n’implique l’utilisation du module d’image. L’inspiration pour cette petite astuce est venue lorsqu’un client voulait qu’une superposition de texte n’apparaisse que lors du survol d’une image avec la souris. C’est donc la méthode que j’utiliserai dans cette visite.

A débuté

Pour commencer, vous devrez ajouter un module de boutons. C’est vrai: un module clé. Pas de module de texte, pas de module d’image, pas de module de boutons. Dans les paramètres « Contenu », ajoutez votre texte et un lien si vous souhaitez en utiliser un. Ensuite, ajoutez votre image d’arrière-plan en allant dans l’onglet Conception. Faites défiler jusqu’à Bouton et cliquez sur Utiliser les styles de boutons personnalisés. Ici, vous verrez une option pour ajouter votre image d’arrière-plan. Maintenant, si vous arrêtez et prévisualisez, ou utilisez le générateur visuel, vous constaterez que cela ressemble à quelque chose que nous ne voulons pas du tout.

Ajouter des styles personnalisés

Pour résoudre ce problème, vous devez ajouter un coussin à votre bouton. Dans l’onglet Conception, juste en dessous de la zone du bouton, il existe une option d’espacement. Ici, vous pouvez voir les zones de bordures et de remplissage. Vous pouvez inclure la valeur des pixels de remplissage que vous souhaitez donner à votre bouton gauche, droit, supérieur et inférieur à votre bouton, mais je préfère travailler avec des pourcentages. Ici, j’ajoute un rembourrage de 25% sur tous les côtés, mais vous pouvez ajouter autant ou aussi peu de rembourrage que vous le souhaitez.

Maintenant, si tout ce que vous essayez de faire est d’ajouter une superposition de texte, vous avez pratiquement terminé. Cependant, étant donné que le texte ne doit être affiché que sous la forme d’un effet de survol, il reste quelque chose à faire. Je recommande d’aller dans la section Orientation sous Conception d’abord et de centrer le bouton, puis d’ajuster la police. Ensuite, sous la zone des boutons, passons à l’option Couleur du texte du bouton. Si vous déplacez le curseur sur le côté du titre ici, vous verrez quatre icônes, dont l’une est un petit curseur qui fait apparaître nos options de survol. Pour supprimer le texte (si vous ne le survolez pas), il vous suffit de changer la couleur sous « Bureau » en « Transparent ». Sous l’option Survol, choisissez la couleur que vous voulez que votre texte soit lorsqu’il est visible.

rompre

Vous répéterez ce processus dans les sections «Couleur de la bordure des boutons» et «Couleur des symboles des boutons» si vous utilisez une icône. La dernière chose que vous devez faire est d’ajouter une superposition de dégradé à votre image d’arrière-plan, mais uniquement lorsque vous la survolez. Si vous ne savez pas à quoi ressemble la superposition de dégradé d’arrière-plan ou si vous n’êtes pas sûr d’en avoir besoin, nous vous recommandons d’aller à ce billet de blog J’ai écrit sur la facilité et l’efficacité d’en avoir un. Pour cette dernière étape, vous devez accéder aux options de survol de l’arrière-plan du bouton. Ici, juste sous Flottant, ajoutez un dégradé en cliquant sur l’icône à moitié ombrée à gauche de l’icône d’image. Après avoir choisi vos couleurs, faites défiler vers le bas et assurez-vous de cliquer sur Oui pour placer le dégradé sur l’image d’arrière-plan.

Conclusion

Et voilà, vous avez créé une superposition de texte sur une image, c’est aussi simple que cela. Il y a plein d’autres choses que vous pouvez faire avec les options de survol sur Divi. Si vous êtes intéressé par les conseils rapides que nous avons créés avec des photos, consultez ceci ce post J’ai écrit sur l’ajout d’effets de survol simples avec Divi. Si vous avez apprécié ce tutoriel et souhaitez utiliser Divi pour vos projets web, cliquez sur Ici pour acheter le sujet.



Source link

Recent Posts