Pour de nombreux adeptes de WordPress, la possibilité d'ajouter un bouton sur une image est essentielle pour rendre le contenu plus interactif et plus attrayant. Leurs motivations peuvent découler du désir d'enrichir les interactions avec les utilisateurs, d'exploiter les capacités de WordPress ou de résoudre des problèmes liés aux thèmes ou aux plugins. Qu'il s'agisse d'améliorer la navigation de l'utilisateur, de surmonter des problèmes de mise en page ou simplement d'adopter les tendances modernes en matière de conception de sites web, cette fonctionnalité peut aider les utilisateurs à relever des défis en matière de mise en page ou à adopter les tendances modernes en matière de conception sans nécessiter de compétences avancées.
Heureusement, le bloc Cover intégré à WordPress rend le processus simple et accessible. Dans ce guide, nous vous montrerons comment y parvenir, étape par étape.
Étape 1 : Ajouter un bloc de couverture
Pour commencer, ouvrez la page ou l'article dans lequel vous souhaitez placer votre image préférée avec le bouton. Dans l'éditeur WordPress, cliquez sur le bouton "+" pour ajouter un bloc et recherchez "Couverture". Une fois que vous l'avez trouvé, sélectionnez le bloc Couverture.
Étape 2 : Insérer une image
Une fois le bloc ajouté, vous devez télécharger l'image de votre choix ou choisissez-en une dans la Bibliothèque des médias. Cette image servira désormais d'arrière-plan à votre dessin.
Étape 3 : Ajouter un titre à l'image (facultatif)
Une fois que votre bloc de couverture est en place, vous remarquerez un texte de remplacement indiquant "Écrire le titre..." à l'intérieur de l'image. Cliquez sur ce texte et tapez le titre ou l'en-tête que vous souhaitez afficher sur l'image.
Étape 4 : Ajouter un bouton sur l'image
Une fois que le bloc de couverture est prêt, cliquez sur l'image et l'outil d'insertion de blocs apparaît. Cliquez sur le signe "+", recherchez "Boutons" et ajoutez le bloc.
Étape 5 : Personnaliser le design
Afin de peaufiner chaque détail, nous avons séparé cette section en trois parties. Nous commencerons par le titre, puis les boutons, et nous terminerons par le bloc de couverture global afin d'obtenir un aspect professionnel.
5.1 Personnaliser le texte du titre
Cliquez sur le texte que vous avez mis comme titre dans le bloc Couverture pour le sélectionner. Utilisez la barre d'outils du bloc pour ajuster le style du texte (gras, italique ou alignement). Si vous souhaitez davantage de personnalisation, rendez-vous dans les paramètres du bloc dans la barre latérale de droite pour modifier la taille, la couleur et la typographie de la police.
5.2 Personnaliser le bouton
Sélectionnez le bloc de boutons, tapez le texte que vous souhaitez afficher et reliez-le à la page ou à l'URL correspondante en cliquant sur l'icône de la chaîne. (1) dans la barre d'outils. Utilisez la barre d'outils du bloc pour aligner le bouton et ajuster son style.
Accédez maintenant au panneau des paramètres du bloc sur le côté droit. Le panneau Onglet Général (1) permet d'ajuster la largeur du bouton par rapport à son conteneur, et le bouton Onglet Styles (3) vous permet de personnaliser les styles, les couleurs, la typographie, les dimensions et la bordure du bouton.
5.3 Personnalisation du bloc de couverture
Cliquez sur le bloc de couverture pour accéder à ses paramètres dans l'onglet Onglet Général. A partir de là, réglez le Paramètres de mise en page pour contraindre les blocs imbriqués, activez l'option Arrière-plan fixe pour que l'arrière-plan reste immobile pendant le défilement ou la touche Historique répété si votre image est plus petite que le bloc et qu'elle doit être mise en mosaïque pour remplir l'espace, et définissez le paramètre Point focal pour que les zones importantes de l'image restent visibles.
Passez ensuite à l'option Onglet Styles. À partir de là, vous pouvez ajuster la couleur générale, l'opacité, la typographie, la dimension, le rapport d'aspect, la bordure, etc.
Étape 6 : Prévisualisation et publication
Parcourez à nouveau l'ensemble de la page pour vous assurer que le bouton et l'image apparaissent comme prévu. Lorsque tout semble correct, publiez ou mettez à jour votre contenu pour le mettre en ligne.
Conclusion
La possibilité d'ajouter un bouton sur une image dans WordPress ouvre des possibilités créatives pour rendre votre contenu plus interactif et visuellement attrayant. Le bloc Couverture de WordPress vous permet de superposer des boutons sur des images et de créer des designs interactifs et visuellement attrayants sans avoir besoin d'outils supplémentaires ou de codage. Il offre une flexibilité totale pour la personnalisation des titres, des boutons et des détails de la mise en page, ce qui permet d'aligner facilement votre contenu sur les tendances modernes en matière de design. En suivant ce guide, vous obtiendrez un résultat professionnel qui améliorera à la fois la conception et la fonctionnalité de votre site web. En suivant ce guide, la conception de votre site peut se distinguer par une meilleure navigation et une finition raffinée.
