Comment créer une page de destination Giving Tuesday avec Divi et GiveWP

Au cas où vous ne l'auriez pas entendu, nous nous préparons à lancer une campagne massive du Black Friday et du Cyber ​​Monday ici chez Elegant Themes. Mais il y a une autre chose intéressante qui se passe à cette période de l'année. Il s'appelle Giving Tuesday (cette année, il tombe le 28 novembre) et c'est un effort des organisations à but non lucratif du monde entier pour rappeler à tout le monde que même s'ils ont sorti leur portefeuille pour faire des achats personnels, ils peuvent envisager de faire un don à ceux qui besoin aussi. Quelle chouette idée ! Et puisque nous visons à responsabiliser notre communauté, nous avons pensé que ce serait une bonne idée d'aider ceux qui utilisent Divi (ou Extra) et travaillent pour des organisations à but non lucratif à créer la meilleure page de destination des dons Giving Tuesday qu'ils soient. capable de.

Voici un aperçu de ce que nous allons créer aujourd'hui.

Aperçu du résultat final

Dans l'article d'aujourd'hui, nous allons créer une magnifique page de destination Mardi je donne avec un formulaire de don visuellement époustouflant (et fonctionnel, bien sûr).

Installez le plugin GiveWP et créez un nouveau formulaire

Le formulaire de don que nous utiliserons dans ce tutoriel est généré par le plugin GiveWP. Pour l'installer, naviguez dans votre Admin WordPress vers Plugins > Ajouter un nouveau . Là, utilisez la fonction de recherche pour trouver le plugin Give. Cliquez sur le bouton « Installer maintenant », puis activez-le.

Ensuite, allez dans Dons > Ajouter un formulaire . Saisissez un titre de formulaire. J'ai choisi « Soutenir vos agriculteurs locaux et l'agriculture durable ».

Ensuite, vous remarquerez les options du formulaire de don. Parcourons-les onglet par onglet.

Dans le premier onglet, appelé Options de don, configurez les paramètres suivants dans la section supérieure.

Option de don : Don multi-niveaux

Affichage des dons : boutons

Montant personnalisé : activé

Dans la section Niveau de don, configurez les niveaux de don suivants : 1 $, 5 $, 10 $, 25 $, 50 $, 100 $. Assurez-vous de définir le niveau de don de 5,00 $ comme nouveau niveau par défaut.

Passez maintenant à l'onglet Affichage du formulaire. La seule chose que vous devez faire ici est de modifier le paramètre Options d'affichage sur Modal.

Dans l'onglet Objectif de don, activez d'abord l'option Objectif de don. Une fois que vous avez fait cela, définissez le montant de votre objectif. J'ai mis le mien à 1 000 $. J'ai également défini le format de l'objectif en pourcentage. Cela permettra aux téléspectateurs de connaître le pourcentage de notre objectif que nous avons atteint, et non le montant réel que nous avons collecté. Et enfin, j'ai légèrement modifié la couleur de la barre de progression pour qu'elle corresponde au même vert utilisé dans le reste de mon site Web (#07c907).

Enfin, nous devons ajouter du contenu de formulaire. Dans l'onglet Contenu du formulaire, activez Afficher le contenu. Ensuite, ajoutez du texte dans la zone de contenu.

Pour les besoins de ce didacticiel, ce sont tous les paramètres du formulaire Give que nous devons configurer. Cliquez sur le bouton Publier et notez que vous aurez besoin du shortcode de ce formulaire de don plus tard.

Lors de la configuration réelle de ce formulaire, vous devrez également accéder à Dons > Paramètres et configurer des éléments tels que vos passerelles de paiement, vos e-mails, etc.

Préparez vos éléments d'image

Nous aurons également besoin d'une image d'arrière-plan personnalisée pour notre section de formulaire. Ceci est bien sûr facultatif, cela n'affecte pas le fonctionnement du formulaire. Mais cela a l'air cool et ajoute un joli lien de conception à notre exemple de marché de producteurs.

Pour créer cette image j'ai utilisé Photoshop mais vous pouvez probablement aussi utiliser un logiciel gratuit appelé Gimp. C'est un outil open source qui a beaucoup des mêmes fonctionnalités.

Voici comment le créer.

Tout d'abord, trouvez-vous une image avec des éléments liés à votre association. Puisque l'exemple que j'utilise concerne un marché de producteurs, j'ai décidé d'utiliser des légumes. J'ai recherché sur un site Web d'images de stock des « légumes isolés ». En règle générale, le terme « isolé » sur un site Web d'images de stock fait référence à des éléments sur un fond blanc. Cela les rend faciles à isoler en supprimant l'arrière-plan. C'est exactement ce que j'ai fait.

Voici l'image que j'ai trouvée.

J'ai ensuite ouvert cette image dans photoshop.

Le calque initial étant verrouillé par défaut, dupliquez-le en cliquant dessus avec le bouton droit et en sélectionnant « Dupliquer le calque ». Ensuite, masquez le premier calque en cliquant sur l'icône en forme d'œil à côté.

Ensuite, utilisez l'outil baguette magique pour sélectionner tout l'espace blanc autour et à l'intérieur des éléments végétaux. Appuyez sur la touche retour arrière pour le supprimer.

Ensuite, naviguez dans votre menu du haut vers Image> Taille de la toile et redimensionnez votre toile à 1920 × 1080. Lorsque vous faites cela, vos éléments seront probablement très volumineux par rapport à votre nouveau canevas plus petit.

Sur votre clavier, appuyez sur Commande + T ou accédez à Édition > Transformer > Échelle . Redimensionnez votre calque d'éléments isolés pour qu'il s'adapte à la nouvelle taille de la toile.

C'est aussi loin que nous irons sur cette image pour l'instant. Assurez-vous simplement que vous avez enregistré ce nouveau fichier photoshop. Nous continuerons ci-dessous une fois que nous aurons notre nouveau formulaire de don comme référence de taille.

Création du design dans Divi

Si vous ne l'avez pas déjà fait, vous voudrez télécharger et installer notre tout nouveau pack (gratuit) de mise en page Farmers Market. Suivez les instructions de cet article pour installer le pack de mise en page. Après son installation, suivez les instructions de cet article de blog pour configurer votre site pour la prochaine étape de personnalisation, que nous aborderons ici.

Lorsque vous êtes prêt, accédez à votre page Faire un don et utilisez le bouton en haut de la page pour activer le générateur visuel. Je vous emmènerai section par section en bas de la page, en faisant des personnalisations au fur et à mesure.

Puisque nous préparons cette page pour une campagne Giving Tuesday, nous devrions probablement en faire mention tout en haut. Survolez donc votre section héros et ouvrez les paramètres du module en cliquant sur l'icône d'engrenage dans les commandes grises du module.

Ensuite, tout en restant dans l'onglet Contenu, faites défiler vers le bas et ouvrez les paramètres de lien. Dans le titre du champ URL du bouton #1, placez le texte « #donate ». Cela fonctionnera comme un lien d'ancrage vers le formulaire que nous allons créer ci-dessous.

Enfin, accédez à l'onglet Conception et ouvrez les paramètres de texte de sous-titre. Définissez le poids de la police du sous-titre sur gras.

La première section est maintenant terminée. Faites défiler jusqu'à la troisième section (celle avec une grande citation) et cliquez sur l'icône d'engrenage dans les commandes de la section bleue. Définissez la couleur d'arrière-plan sur #F6F6F6.

Ensuite, ouvrez les paramètres du module pour le module de texte de citation. Changez également l'arrière-plan de celui-ci en #F6F6F6.

Cette section est maintenant terminée également. Passez à la quatrième section immédiatement en dessous. Ceci est notre section de formulaire de don.

Comme cette section existe dans le pack de mise en page, il s'agit plutôt d'une section « promesse » où les gens peuvent utiliser le formulaire de contact pour vous envoyer une promesse de don pour combien ils ont l'intention de donner. Mais nous allons le transformer en un véritable formulaire de don où nous pouvons accepter de l'argent directement.

Commençons par les paramètres de la section et travaillons. Tout d'abord, nous devons changer la couleur d'arrière-plan. Réglez-le sur le même #F6F6F6 que la section ci-dessus.

Ensuite, dans la section onglet Conception, ouvrez les options d'espacement. Ajoutez le remplissage personnalisé suivant :

Haut : 250 pixels

À droite : 40 pixels

Bas : 250px

Gauche : 40 pixels

Enfin, tout en restant dans les paramètres de la section, accédez à l'onglet Avancé et ouvrez les contrôles CSS ID & Classes. Sous l'ID CSS, écrivez le mot « faire un don ».

Enregistrez vos nouveaux paramètres.

Nous devons maintenant nous débarrasser de notre formulaire d'engagement. Il est composé de deux modules de texte et d'un module de formulaire de contact. Allez-y et supprimez-les. A leur place, ajoutez un module de texte.

Dans le nouveau module de test, placez le shortcode pour le formulaire de don que nous avons créé précédemment. Réglez l'arrière-plan sur blanc uni (#ffffff).

Maintenant, accédez à l'onglet Conception. Un secret peu connu est que les éléments générés par des shortcodes tiers peuvent être personnalisés dans une certaine mesure à l'aide des paramètres de conception du module de texte.

Sous les options de texte, configurez les paramètres suivants :

Taille du texte du texte : 18px

Hauteur de la ligne de texte : 1,8 em

Sous les options de texte d'en-tête pour H2, configurez les paramètres suivants :

Titre 2 Taille du texte : 36px

Titre 2 Hauteur de ligne : 1.5em

Sous les options d'espacement, configurez les paramètres suivants :

Remplissage personnalisé : 50xp (pour tous les champs)

Sous les options Box Shadow, choisissez la dernière option dans la rangée supérieure (à l'extrême droite). Configurez ensuite cette option :

Force de propagation de l'ombre de la boîte : -2px

Enfin, sous les options d'animation, configurez ces paramètres :

Style d'animation : Rebond

Direction de l'animation : vers le haut

Durée de l'animation : 800 ms

Délai d'animation : 400 ms

Opacité de démarrage de l'animation : 100 %

Lorsque vous avez configuré tous ces paramètres de conception, enregistrez-les. Votre formulaire de don devrait maintenant ressembler à ceci.

Bien sûr, c'est une forme parfaitement acceptable. Mais à mon avis, c'est un peu ennuyeux. Il y a deux choses que j'aimerais faire pour le pimenter. Tout d'abord, nous allons faire correspondre le style du bouton Faire un don maintenant aux autres boutons Faire un don sur l'ensemble du site Web.

Accédez aux options de votre thème en allant dans Divi> Bibliothèque Divi> Général Faites défiler jusqu'à la zone CSS personnalisée et collez-y les styles de boutons suivants :

/*Give Plugin Styles*/

.give-btn.give-btn-modal {
    background: #07C907;
    border: none;
    border-radius: 0px;
    color: #fff;
    padding: 20px;
    cursor: pointer;
    line-height: 1.2em;
    font-size: 18px;
    font-weight: bold;
}

#give-purchase-button.give-submit.give-btn {
    background: #07C907;
    border: none;
    border-radius: 0px;
    color: #fff;
    padding: 20px;
    cursor: pointer;
    line-height: 1.2em;
    font-size: 18px;
    font-weight: bold;
}

Enregistrez vos modifications et revenez à votre page de don. Actualisez-le et jetez un œil à votre formulaire. Il devrait maintenant ressembler à ceci.

Maintenant, nous arrivons quelque part ! Ajoutons la touche finale. L'image d'arrière-plan de la section que nous avons commencé à créer plus tôt.

Pour le compléter, redimensionnez la fenêtre de votre navigateur à 1920×1120. Vous pouvez utiliser un site Web comme whatsmybrowsersize.com.

Ensuite, prenez une capture d'écran de votre page de don avec notre nouveau formulaire centré dessus. Ça devrait ressembler à ça.

Ouvrez cette nouvelle capture d'écran dans Photoshop avec le fichier photoshop que nous avons créé précédemment.

Utilisez l'outil Rectangle Marquee pour sélectionner votre formulaire. Ensuite, allez dans Sélectionner > Inverser pour tout sélectionner sauf votre formulaire. Supprimez votre nouvelle sélection. Vous devriez maintenant avoir une toile qui ressemble à ceci.

Vous disposez maintenant d'une "maquette de formulaire" correctement dimensionnée que vous pouvez utiliser comme référence pour votre image d'arrière-plan. Une fois les deux fichiers photoshop ouverts, faites glisser le calque photoshop contenant votre formulaire isolé dans votre fichier d'image d'arrière-plan.

Dans votre panneau Calques, ajustez l'opacité de votre calque de formulaire à 50 %. Ensuite, avec le formulaire plus tard toujours sélectionné, cliquez sur l'icône de verrouillage et verrouillez-le. Il devrait maintenant ressembler à ceci.

Vous pouvez maintenant sélectionner votre calque de légumes dans le panneau des calques. Utilisez l'outil lasso pour sélectionner des éléments individuels et supprimez-les ou réorganisez-les jusqu'à ce que vous obteniez la configuration qui vous convient. Ma configuration finale ressemblait à ceci.

Une fois que vous avez votre propre configuration finale, vous accédez à Fichier > Exporter > Exporter sous et choisissez PNG pour conserver l'arrière-plan transparent.

Nous pouvons maintenant ajouter cette image à la section Formulaire de don de notre page de don, de retour sur notre site Web Divi.

Ouvrez les paramètres de la section. Sous Arrière-plan, laissez la couleur que nous avons définie précédemment et choisissez l'option d'image. Ajoutez votre nouvelle image de fond ici. Configurez ensuite les paramètres suivants :

Taille de l'image d'arrière-plan : taille réelle

Position de l'image d'arrière-plan : Centre

Enregistrez ces paramètres. Votre section de formulaire devrait maintenant être remplie.

Pour finaliser complètement votre conception (pour correspondre à notre aperçu en pleine page du début de la publication), modifiez simplement les couleurs d'arrière-plan des sections de page restantes pour qu'elles correspondent à celles de la capture d'écran. Vous utiliserez soit du gris (#F6F6F6), soit du blanc (#ffffff).

Bonne collecte de fonds !

Avec Divi et un plugin aussi puissant que Give, nous sommes sûrs que vos efforts Giving Tuesday seront à coup sûr un grand succès. Merci d'avoir suivi. Si vous souhaitez toujours de l'aide pour tout ce qui est couvert dans ce didacticiel, je vais organiser une diffusion en direct aujourd'hui à 15 heures sur notre page Facebook et notre chaîne YouTube où je montrerai tout ce processus en une seule prise. Je répondrai également aux questions au fur et à mesure. Espérons vous y voir!