Utiliser une image comme un bouton

Utiliser une image comme un bouton

1. Cliquez sur « » situé sous l'article dans lequel se trouve l'image que vous souhaitez transformer en bouton cliquable.

2. Cliquez sur la photo pour la sélectionner. Des carrés aux quatre coins de la photo vous indiquent qu'elle est bien sélectionnée.



3. Cliquez sur l'icône « »

4. Dans le champ « Titre », inscrivez un texte alternatif (étiquette) pour le lien de votre bouton image.

5. Indiquez à quoi sera lié l'image :
  1. À un site externe : Dans le champ « URL/fichier », insérez l'adresse complète commençant par « https:// ». Dans le menu déroulant « Cible », choisissez « Nouvelle fenêtre ».
  2. À un fichier : À droite du champ « URL/fichier », cliquez sur l'icône « ». Sélectionnez ensuite le fichier. Dans le menu déroulant « Cible », choisissez « Nouvelle fenêtre ».
  3. À une page de votre site : Dans le menu déroulant « Pages de votre site », sélectionnez la page en question. Dans le menu déroulant « Cible », choisissez « Dans la même fenêtre ».


6. Dans le menu déroulant « Apparence », sélectionnez « Image & texte ». Ce style combinera votre image et le texte de la prochaine étape en bouton cliquable.

7. Cliquez sur le bouton bleu « Ok ».

8. Vous devez maintenant configurer le texte sur l'image. Sélectionnez votre image à nouveau et cliquez sur  .
  1. Dimensions : Indiquez la largeur et la hauteur souhaitées pour l'image sur le site ou laissez celles déjà inscrites. L'image sera affichée dans les dimensions indiquées. Une fois sur le site, si les dimensions sont plus grandes que la colonne dans laquelle se trouve l'image, celle-ci s'ajustera automatiquement au maximum de l'espace disponible.
  2. Titre : Saisissez un titre à l'image. Ce dernier sert de texte alternatif à l'image. Il devient visible lorsque l'on utilise une image comme un bouton.
  3. Description : Saisissez une description à l'image. Elle sert aussi de texte alternatif à l'image. Elle devient visible lorsque l'on utilise une image comme un bouton.
  4. Crédit : Au besoin, saisissez le droit d'auteur de la photo. Le crédit apparait sous la photo.


9. Cliquez sur le bouton bleu « Ok ».

10. Vous pouvez maintenant cliquer sur le bouton vert « Sauvegarder » et voir le résultat.


Voici un exemple de lien avec apparence Image & texte. Dans cet exemple, le titre apparait sur l'image. La description et le crédit photo apparaissent seulement lors du passage de la souris sur l'image (hover).




Les mises en forme et les styles sont personnalisés lors du design du site web. Ces éléments ont donc une apparence différente d'un site à l'autre. De plus, certains styles peuvent ne pas être configurés avec les sites dont le design a été réalisé antérieurement.





    • Related Articles

    • Ajouter un lien à une image

      1. Cliquez sur « » situé sous l'article dans lequel vous souhaitez ajouter un lien à une image. 2. Cliquez sur la photo pour la sélectionner. Des carrés aux quatre coins de la photo vous indiquent qu'elle est bien sélectionnée. 3. Cliquez sur l'icône ...

    • Ajouter un bouton

      Un bouton fonctionne comme un lien. Cependant il a une présentation plus attirante qui donne envie aux visiteurs de cliquer dessus. 1. Cliquez sur « » situé sous l'article dans lequel vous souhaitez ajouter un bouton. 2. Dans l'espace blanc pour les ...

    • Placer un texte sur une image

      1. Rendez-vous sur la page dans laquelle vous souhaitez ajouter un article avec un texte sur une image en arrière-plan. 2. Cliquez sur le « + » situé dans la rangée et la colonne où vous souhaitez ajouter votre article. 3. Dans la fenêtre d'édition, ...

    • Ajouter un crédit d'auteur à une image

      1. Cliquez sur « » situé sous l'article dans lequel vous souhaitez ajouter un crédit photo. 2. Cliquez sur la photo pour la sélectionner. Des carrés aux quatre coins de la photo vous indiquent qu'elle est bien sélectionnée. 3. Cliquez sur  pour ...

    • Ajouter une image

      1. Cliquez sur « » situé sous l'article dans lequel vous souhaitez ajouter une image. 2. Dans l'espace blanc pour les contenus, placez le curseur de votre souris à l'endroit où vous désirez ajouter votre image. 3. Cliquer sur l'icône « » ...