Le bloc de paiement EDD vous permet de créer une page de paiement entièrement personnalisée pour votre boutique Easy Digital Downloads. Ce bloc affiche tous les éléments de paiement, y compris les formulaires d'informations de facturation, le résumé du panier et les options de paiement, avec un contrôle total sur le style et la mise en page.
Une page de paiement bien conçue est la dernière étape pour convertir les visiteurs en acheteurs. Avec ce bloc, vous pouvez créer une expérience de paiement qui renforce la confiance, réduit les frictions et correspond parfaitement à votre marque. Personnalisez les champs du formulaire, les boutons, les affichages du panier et les sections de paiement pour créer un parcours fluide du panier à l'achat finalisé.
Ajouter le bloc de paiement EDD à vos pages
Suivez ces étapes pour ajouter un bloc de paiement EDD à votre page SeedProd :
Étape 1 : Ajouter le bloc
Sous Design > Blocs > Easy Digital Downloads, faites glisser et déposez le bloc Paiement dans la section souhaitée de votre page.
Le bloc de paiement EDD se trouve sous Easy Digital Downloads et peut être ajouté pour créer une page de paiement personnalisée.
Étape 2 : Personnaliser le design
Une fois ajouté, cliquez sur le bloc de paiement EDD pour ouvrir ses paramètres. Dans l'onglet Styles, vous pouvez personnaliser chaque aspect de l'apparence de votre page de paiement.
Champs :
- Couleur d'arrière-plan des champs : Définissez la couleur d'arrière-plan des champs de saisie du formulaire comme le nom, l'e-mail et l'adresse
- Couleur du texte des champs : Choisissez la couleur du texte saisi dans les champs du formulaire
- Couleur de la bordure des champs : Définissez la couleur des bordures autour des champs de saisie
- Épaisseur de la bordure des champs : Ajustez l'épaisseur des bordures des champs (Haut, Droite, Bas, Gauche)
- Espacement des lignes : Contrôlez l'espacement vertical entre les lignes des champs du formulaire
- Rayon de la bordure : Ajustez l'arrondi des coins des champs. Des valeurs plus élevées créent des champs plus arrondis
Boutons :
- Style de bouton : Choisissez le traitement visuel des boutons de paiement comme « Finaliser l'achat ». Les options incluent Plat (design plat moderne), 2D (profondeur subtile), Vintage (look classique), Fantôme (transparent avec bordure) ou Lien (simple lien texte)
- Couleur du bouton : Définissez la couleur d'arrière-plan du bouton d'achat
- Rayon de la bordure : Ajustez l'arrondi des coins des boutons
Panier :
- Couleur de la bordure du panier : Définissez la couleur des bordures autour de la section du résumé du panier
- Épaisseur de la bordure du panier : Ajustez l'épaisseur des bordures du panier (Haut, Droite, Bas, Gauche)
- Couleur d'arrière-plan : Définissez la couleur d'arrière-plan de la zone de résumé du panier
- Typographie de l'en-tête : Contrôlez les propriétés de la police pour les en-têtes de section du panier comme « Résumé de la commande »
- Couleur de l'en-tête : Définissez la couleur du texte de l'en-tête du panier
- Typographie des articles : Personnalisez les propriétés de la police pour les noms de produits dans le panier
- Couleur des articles du panier : Choisissez la couleur du texte des articles du panier
- Typographie des liens : Contrôlez les propriétés de la police pour les liens du panier
- Couleur des liens du panier : Définissez la couleur des liens cliquables dans la section du panier
Section de paiement :
- Couleur de fond : Définissez la couleur de fond de la section des méthodes de paiement
- Couleur de la bordure des paiements : Choisissez la couleur des bordures autour des options de paiement
- Épaisseur de la bordure des paiements : Ajustez l'épaisseur des bordures de la section de paiement (Haut, Droite, Bas, Gauche)
- Rayon de la bordure des paiements : Contrôlez l'arrondi des coins de la section de paiement
- Couleur de l'étiquette : Définissez la couleur des étiquettes des champs de paiement
- Typographie de l'étiquette : Personnalisez les propriétés de la police pour les étiquettes de paiement
- Couleur du titre : Choisissez la couleur des titres des méthodes de paiement (comme « Carte de crédit » ou « PayPal »)
- Typographie du titre : Contrôlez les propriétés de la police pour les titres de paiement
- Couleur de la description : Définissez la couleur des descriptions des méthodes de paiement
- Typographie de la description : Personnalisez les propriétés de la police pour les descriptions de paiement
- Couleur du total : Choisissez la couleur de l'affichage du total de la commande
- Typographie du total : Contrôlez les propriétés de la police pour le montant total
L'onglet Styles offre des options de personnalisation complètes pour les champs de formulaire, les boutons, l'affichage du panier et les sections de paiement.
Étape 2a : Choisir un style de modèle
Dans l'onglet Modèles, vous pouvez choisir parmi des styles de champs prédéfinis pour modifier rapidement l'apparence générale de votre formulaire de paiement.
- Champ de saisie clair, Champ de saisie sans bordure, Champ de saisie à bordure large, Champ de saisie gris, Champ de saisie foncé, Champ à bordure inférieure, Champ de saisie transparent : Choisissez parmi sept conceptions de modèles différentes pour vos champs de formulaire, chacune avec des approches de style uniques. Prévisualisez chaque style pour trouver celui qui correspond le mieux à la conception de votre page.
L'onglet Modèles propose sept styles de champs prédéfinis pour personnaliser rapidement l'apparence de votre formulaire de paiement.
Étape 3 : Configurer les options avancées
Dans l'onglet Avancé, vous pouvez personnaliser davantage votre bloc de paiement EDD :
Espacement :
- Marge : Contrôlez l'espacement extérieur autour de votre bloc de paiement (Haut, Droite, Bas, Gauche). Cela détermine l'espace entre le formulaire de paiement et les éléments environnants.
- Rembourrage : Ajustez l'espacement intérieur de votre bloc de paiement (Haut, Droite, Bas, Gauche). Cela crée un espace de respiration entre le contenu du paiement et ses bords.
Attributs :
- ID CSS : Affiche l'identifiant unique généré automatiquement pour votre bloc de paiement. Cet ID est créé automatiquement par SeedProd pour une personnalisation personnalisée ou un ciblage JavaScript.
- Classe personnalisée : Ajoutez des classes CSS personnalisées pour appliquer des styles spécifiques de votre thème ou de votre CSS personnalisé
- Attributs personnalisés : Ajoutez des attributs HTML à l'élément conteneur du paiement. Entrez chaque attribut sur une nouvelle ligne en utilisant le format : nom-attribut|valeur (par exemple, data-checkout|edd-checkout)
Visibilité de l'appareil :
- Masquer sur ordinateur : Masquer le bloc de paiement sur les écrans d'ordinateur
- Masquer sur tablette : Masquer le bloc de paiement sur les appareils tablettes
- Masquer sur mobile : Masquer le bloc de paiement sur les appareils mobiles
Effets d'animation :
- Animation d'entrée : Choisissez parmi divers effets d'animation qui se jouent lorsque le formulaire de paiement défile dans la vue. Les options incluent Rebond, Fondu, Zoom avant, Rotation avant, et bien d'autres
L'onglet Avancé fournit des options pour l'espacement, les attributs personnalisés, la visibilité des appareils et les effets d'animation.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé de configurer le bloc de paiement EDD et de personnaliser son apparence, assurez-vous de sauvegarder votre travail.
Vous avez ajouté avec succès un bloc de paiement EDD à votre page ! Cette solution de paiement complète vous aide à créer une expérience de paiement professionnelle et personnalisée qui renforce la confiance des clients et rationalise le processus d'achat. Expérimentez différents styles de champs, couleurs et options de mise en page pour créer une page de paiement qui convertit les visiteurs en acheteurs et maximise vos ventes de produits numériques.