Comment créer une page d’atterrissage mardi en utilisant Divi et givewp

Un organisme sans but lucratif. Parce que j’utilise un exemple de marché agricole, j’a i décidé d’utiliser des légumes. J’a i cherché sur un site Web des images d’inventaire de \
C’est la photo que j’ai trouvée. J’ai donc ouvert cette image dans Photoshop. Puisque la couche initiale est verrouillée par défaut, copiez – la en cliquant avec le bouton droit et en sélectionnant copier la couche. Ensuite, cachez la première couche en cliquant sur l’icône de l’oeil à côté de la première couche. Ensuite, utilisez l’outil baguette magique pour sélectionner tous les blancs autour et à l’intérieur des éléments végétaux. Appuyez sur la touche Backspace pour la supprimer. Ensuite, naviguez vers le menu supérieur Image > taille de la Toile et redimensionnez la toile à 1920 × 1080. Lorsque vous faites cela, votre projet peut être très grand par rapport à la nouvelle toile plus petite.
Sur le clavier, appuyez sur commande + T ou allez à Édition > transformation > zoom. Redimensionnez les couches d’éléments isolés pour les adapter à la nouvelle taille de toile. C’est là qu’on va continuer cette photo. Assurez – vous simplement d’avoir sauvegardé ce nouveau fichier Photoshop. Une fois que nous aurons le nouveau formulaire de contribution comme référence dimensionnelle, nous continuerons avec ce qui suit. Créez votre design dans Divi si vous ne l’avez pas encore fait, nous vous recommandons de télécharger et d’installer notre nouveau paquet de mise en page du marché des agriculteurs (gratuit). Suivez les instructions de cet article pour installer le paquet de mise en page. Une fois l’installation terminée, suivez les instructions de ce blog pour configurer votre site pour la prochaine personnalisation que nous allons couvrir ici.
Lorsque vous êtes prêt, allez à votre page dons et utilisez
Istra: 40px Enfin, pendant que vous êtes dans la section paramètres, allez à l’onglet avancé et ouvrez les contrôles d’identification et les classes CSS. Sous CSS ID, tapez le mot don. Enregistrer les nouveaux paramètres. Maintenant, nous devons nous débarrasser de notre forme de prêteur sur gages. Il se compose de deux modules de texte et d’un formulaire de contact. Continuez à les éliminer. Ajoutez un formulaire texte à son emplacement. Dans le nouveau formulaire de test, entrez le Code court du formulaire de don que nous avons créé précédemment. Réglez l’arrière – plan en blanc pur (# FFFFFF). Allez maintenant à l’onglet conception. Un secret peu connu est que les éléments générés par le Code court de tiers peuvent être personnalisés dans une certaine mesure en utilisant les paramètres de conception de formulaires texte. Sous options de texte, Configurez les paramètres suivants: taille du texte: 18px hauteur de la ligne de texte: 1.8 emsous options de texte de titre pour H2, Configurez les paramètres suivants: titre 2: taille du texte: 36px hauteur de la ligne de titre 2: 1.5 emsous options d’espacement, définissez les paramètres suivants: Configurer les paramètres suivants: remplissage personnalisé: 50xp (pour tous les champs) sous options d’ombre de boîte, sélectionnez la dernière option de la ligne supérieure (la plus à droite). Ensuite, configurez cette option: Force de diffusion de l’ombre de la boîte: – 2px Enfin, sous options d’animation, configurez ces paramètres: style d’animation: direction d’animation de rebond: activez la durée de l’animation: 800 MS retard de l’animation: 400 MS opacité initiale de l’animation: après avoir configuré Tous ces paramètres de conception à 100%, sauvegardez – les. Votre contribution doit être indiquée ci – dessous. Bien sûr, c’est une forme tout à fait acceptable. Mais je m’ennuie un peu. J’ai deux choses à faire pour le réveiller. Tout d’abord, nous apparierons le style du bouton don maintenant pour correspondre à l’ensemble
Site Web. Passez aux options de thème, allez à Divi > Divi Library > General pour faire défiler vers le bas la boîte CSS personnalisée et collez les styles de boutons suivants ici: \/ * Fournissez des styles de plug – in
– Oui. Donne le BTN. Fournir le mode BTN {
Contexte: # 07c907;
Bordure: aucune;
Rayon limite: 0px;
Couleur: # FFF;
Remplissage: 20px;
Curseur: pointeur;
Hauteur de la ligne: 1,2em;
Taille de la police: 18px;
Taille de la police: en gras;
}
Donner le bouton d’achat. Submitted. Donner BTN {
Contexte: # 07c907;
Bordure: aucune;
Rayon limite: 0px;
Couleur: # FFF;
Remplissage: 20px;
Curseur: pointeur;
Hauteur de la ligne: 1,2em;
Taille de la police: 18px;
Taille de la police: en gras;
}
Enregistrer les modifications et retourner à la page dons. Mettez à jour et visualisez votre formulaire. Ça devrait l’être maintenant. Maintenant, on avance! Ajouter une touche finale. Image de fond de la partie que nous avons commencé à créer plus tôt. Pour ce faire, redimensionnez la fenêtre du navigateur à 1920 × 1120. Vous pouvez utiliser un site Web comme whatsmybrowserize. Com. Ensuite, prenez une capture d’écran de votre page de don, centrée sur notre nouveau formulaire. Ça devrait être comme ça. Ouvrez cette nouvelle capture d’écran et le fichier Photoshop que nous avons créé précédemment dans Photoshop. Utilisez l’outil de sélection rectangulaire pour sélectionner un formulaire. Ensuite, allez à select > Reverse pour sélectionner tout sauf le module. Supprimez votre nouvelle sélection. Maintenant tu devrais avoir une telle toile. Vous avez maintenant un modèle de formulaire de la bonne taille qui peut être utilisé comme référence pour l’image de fond. Après avoir ouvert les deux fichiers Photoshop, faites glisser la couche Photoshop contenant le module d’isolement dans le fichier image de fond. Dans le panneau couches, réglez l’opacité de la couche module à 50%. Ensuite, avec le formulaire encore sélectionné, cliquez sur l’icône de verrouillage et Verrouillez – le. Ça devrait l’être maintenant.
– Oui. Vous pouvez maintenant sélectionner le niveau des légumes dans le panneau couches. Utilisez l’outil Lazo pour sélectionner des éléments individuels et les supprimer ou les réorganiser jusqu’à ce que vous obteniez la configuration que vous aimez. Ma configuration finale est similaire. Une fois la configuration finale terminée, allez au fichier > exporter > exporter sous et sélectionnez PNG pour garder l’arrière – plan transparent. Nous pouvons maintenant ajouter cette image à la section formulaires de don de la page dons du site Web Divi. Ouvrez les paramètres de la section. En arrière – plan, au lieu d’utiliser les couleurs précédemment définies, sélectionnez l’option image. Ajoutez une nouvelle image de fond ici. Puis Configurez les paramètres suivants: taille de l’image de fond: taille réelle emplacement de l’image de fond: Centre Enregistrez ces paramètres. La section module devrait maintenant être terminée. Pour compléter complètement votre conception (pour correspondre à l’aperçu complet de la page au début de cet article), il suffit de changer la couleur de fond du reste de la page pour correspondre à la couleur de fond de la capture d’écran. Vous utiliserez le gris (# f6f6f6) ou le blanc (# FFFFFF). Bon collecteur de fonds! Avec des plugins puissants comme Divi et give, nous sommes sûrs que votre giving de mardi sera un grand succès. Merci de votre attention. Si vous avez encore besoin de l’aide de ce tutoriel, Je diffuserai en direct sur notre page Facebook et sur YouTube aujourd’hui à 15h00, où je vous montrerai tout le processus en une seule fois. Je répondrai également aux questions pendant que je continuerai. J’espère te voir là – bas!