Comment placer un bouton sur une image ?

Pourquoi placer un bouton sur une image ?

Placer un bouton sur une image vous permet de créer un appel à l'action clair sans interrompre le flux de votre conception. Cela rend la page plus attrayante et incite les visiteurs à passer immédiatement à l'étape suivante.

Les cas d'utilisation courants incluent :

• Avec un "Achetez maintenant" bouton sur les bannières de produits ou de collections.
• Attirer l'attention sur promotions ou remises saisonnières.
• Lien direct vers un page de destination spécifique ou section de mise en évidence.
• Création d'un mise en page plus propre au lieu de séparer l'image et le bouton.

Conseils: Choisissez une couleur de bouton qui contraste avec votre image d'arrière-plan pour vous assurer qu'elle se démarque, en particulier sur les appareils mobiles.

Pour y parvenir dans GemPages, vous pouvez suivre deux méthodes simples expliquées ci-dessous.

Comment mettre un bouton sur votre image dans GemPages ?

Méthode 1 : utiliser un élément de bannière de héros

En général, vous pouvez utiliser l'élément Bannière Héros pour importer cette image. Ensuite, la bannière Héros autorise l'ajout d'autres éléments, dont le bouton. Suivez ces étapes :

Étape 1 : Rendez-vous dans la section Générateur de pages GemPages application> Pages. Ensuite, cliquez sur la page sur laquelle vous souhaitez placer un bouton sur votre image pour ouvrir l'éditeur.

Étape 2 : Dans la barre latérale gauche, recherchez «bannière de hérosFaites glisser et déposez la mise en page préférée à n’importe quel endroit de votre page.

Étape 3 : Supprimez les éléments de texte et conservez uniquement l'élément bouton.

Étape 4 : Cliquez sur le Bannière de héros pour afficher ses paramètres. Faites défiler jusqu'à l'élément Présentation section et sélectionnez le Image(s) champ.

Étape 5 : Téléchargez votre image ou choisissez-en une dans la bibliothèque à utiliser comme image d'arrière-plan.

Étape 6 : Ajuste le image de fond comme tu préfère.

Étape 7 : Cliquez sur le Bouton pour ouvrir ses paramètres. Vous pouvez ensuite personnaliser le bouton à votre guise, par exemple :

• Changez la couleur, la forme et la taille.
• Ajoutez une icône ou un effet de survol.
• Liez le bouton à une nouvelle page ou à une section cible de votre page.

Reportez-vous à cet article pour plus d'instructions.

Étape 8 : Enregistrez vos modifications et cliquez sur Publier.

Méthode 2 : utiliser l'option relative de la position du bouton

Pour vous assurer que le bouton est correctement placé sur l'image dans la conception de votre page, vous pouvez définir le Position du bouton à Relatif.

Suivez les étapes de synthèse:

• Cliquez sur l'élément Bouton pour ouvrir ses paramètres et accédez à l' Avancé languette.
• Faites défiler jusqu'à la Poste .
• Sélectionnez le Relatif option dans le menu déroulant.

Apprenez-en plus sur toute cette configuration via cet article.