Dans cet article, vous en apprendrez plus sur l’élément Button de PageFly et sur son utilisation.
L’élément Button est l’un des éléments fondamentaux de toutes les pages. Il agit comme un appel à l’action pour tout objectif que vous essayez d’atteindre sur votre page.
Vous pouvez vérifier plus de détails dans le didacticiel vidéo ci-dessous.
Accès à l’élément Button
Étape 1 : Cliquez sur l’icône Plus qui est la fonction Ajouter un élément
Étape 2 : Cliquez sur l’élément Button dans le menu déroulant
Étape 3 : L’élément Button est livré avec 4 variantes de boutons, chaque bouton avec un style différent. Nous continuerons à ajouter d’autres variantes pour vous aider à gagner du temps. Faites glisser et déposez l’une de ces variantes que vous souhaitez sur l’éditeur de page
Configuration de l’élément Bouton
L’élément Bouton est livré avec de nombreux paramètres vous permettant d’affiner l’apparence du contenu pour atteindre le meilleur taux de clics possible pour votre Appel à l’action.
Sélectionnez l’élément dans la mise en page pour voir ses paramètres.
Les paramètres des onglets Général et Style sont spécifiques à cet élément.
Paramétrage général
| CONTENU | |
| Texte du Bouton : Insérez et stylisez le contenu de l’en-tête. La largeur du bouton augmentera en fonction de la longueur de ce texte. |  |
| Afficher l’icône : Activer / Désactiver l’icône Position de l’icône : choisissez entre la gauche et la droite du haut pour la position de l’icône |  |
| ACTION | |
| Vous pouvez vous diriger vers un lien, une section, une fenêtre contextuelle, une adresse e-mail ou un numéro de téléphone en cliquant sur Action. Veuillez en savoir plus sur le paramètre ACTION ici. |  |
| You can get further information about ATTRIBUTES, VISIBILITY, ANIMATION parameters here Vous pouvez obtenir plus d’informations sur les paramètres ATTRIBUTS, VISIBILITÉ, ANIMATION ici Configuration du style | |
| PRÉRÉGLAGE DE STYLE | |
| Style global : choisissez le style du bouton avec 5 variantes. |  |
| Style d’état : contient 3 options État normal, État survol de la souris et État actif/sélectionné que vous pouvez choisir pour votre bouton. |  |
Vous pouvez consulter plus d’informations sur l’onglet Style ici
Comment augmenter la taille du bouton ?
Fondamentalement, si vous augmentez le bouton de contenu, la taille du bouton augmentera également automatiquement. Dans un autre cas, vous pouvez modifier le rembourrage du bouton. Vous pouvez vérifier le gif ci-dessous
Dans ce cas, nous augmentons le Rembourrage droit et gauche de 20 px à 30 px et le Rembourrage haut et bas de 12 px à 50 px.
Comment créer un bouton de paiement dynamique (ACHETER MAINTENANT)
Veuillez noter que cela ne fonctionne que dans l’élément Détails du produit (vous devez l’ajouter dans l’élément Détails du produit avec l’option Variante combinée activée)
- Étape 1 : Cliquez sur l’icône nommée Ajouter un élément dans la barre latérale gauche
- Étape 2 : Faites défiler jusqu’à la section Basique > choisissez l’élément HTML/Liquid
- Etape 3 : Glissez-déposez cet élément dans l’éditeur de page
- Étape 4 : Cliquez sur le bouton Ouvrir l’éditeur de code dans l’onglet Général pour ouvrir l’éditeur HTML/Liquid Code
- Étape 5 : Collez ce code ci-dessous dans :
{{ form | payment_button }}
Vous pouvez vérifier le gif ci-dessous. Notez que vous devez publier pour voir le résultat.
Pour ajouter le bouton Paypal, vous devez configurer Paypal dans votre boutique Shopify, puis utiliser le code ci-dessus. Vous pouvez consulter cette vidéo pour savoir comment lier un élément à une section spécifique
Comment créer un bouton pleine largeur
Si vous souhaitez que votre bouton soit en pleine largeur, choisissez votre bouton > onglet général > activez Activer la pleine largeur.
If you have further questions, please join our community. This community is exclusive for PageFly merchants only with our experts and merchants from all around the world!
Previous article
