Ajouter l’élément Button

Dans cet article, vous en apprendrez plus sur l’élément Button de PageFly et sur son utilisation.

À propos de l’élément Button

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

Add Button element

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.

Add Button element

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. Add Button element
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

Add Button element
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.

Add Button element
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. Add Button element
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. Add Button element

Vous pouvez consulter plus d’informations sur l’onglet Style ici

Comment augmenter la taille du bouton ?Click to copy

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

Add Button element

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)Click to copy

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.

Add Button elementPour 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.

Add Button element

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!

JOIN PAGEFLY COMMUNITY

 

Navigate this category

PreviousPrevious article

Next articlePrevious

Feedback
Thank you for your feedback!

Could not find the answer
to your question?

Chat with us
Boost your holiday sales with PageFly's Thanksgiving Template 👉 Discover Now