Comment créer une carte commémorative personnalisée en utilisant Divi (téléchargement gratuit!)

Vous vous êtes inscrit avec succès. Vérifiez votre adresse e – mail pour confirmer votre abonnement et Obtenez gratuitement le paquet hebdomadaire Divi Layout! Commençons à recréer! Tout d’abord, ajoutez une nouvelle section à la page en cours de traitement. Ouvrez les paramètres partiels et ajoutez une couleur de fond. Couleur de fond: # ffefdb L’espacement passe à l’onglet conception de section et ajoute des marges personnalisées et des valeurs de remplissage. Marge supérieure: 5% marge inférieure: 5% marge gauche: 5% marge droite: 5% marge gauche: 5% marge droite: 5% La bordure comprend également des filets. Tous les angles: 20px Ajouter une structure de ligne 1 continuer d’ajouter la première ligne à la section en utilisant la structure de colonne suivante: Sans ajouter de module, ouvrez les paramètres de ligne et ajoutez une marge inférieure. Marge bénéficiaire inférieure: 3% Ajouter un formulaire texte à la colonne ajouter du contenu H2 il est temps d’ajouter un formulaire, en commençant par un formulaire texte qui contient du contenu H2. Paramètres de texte H2 passer à l’onglet conception du formulaire et modifier les paramètres de texte H2 en conséquence:
Titre 2 caractères: Montserrat titre 2 poids des caractères titre 2: demi – gras titre 2 taille du texte: 31 Px titre 2 espacement des lettres: – 1px Ajoutez le module séparateur à la colonne de visibilité juste en dessous du module texte, et nous ajoutons le module séparateur. Assurez – vous que l’option afficher le séparateur est activée. Afficher les séparateurs: Oui La ligne passe à l’onglet conception du module et change la couleur de la ligne en blanc. Couleur de ligne: # FFFFFF Le redimensionnement modifie également les paramètres de taille. Poids du séparateur: 10px largeur: 14% hauteur: 10px Border e complète la configuration du module en ajoutant des filets aux importations
Actif {
Conversion: translatex (- 10%);
}
[ID * = \
– transition webkit: toutes les 0.5s sont faciles;
– transition MOZ: toutes les 0,5 secondes sont faciles;
O – transition: toutes les mesures d’atténuation de 0,5 s;
MS transition: All 0.5s mitigation;
Transition: toutes les mesures d’atténuation de 0,5 s;
Curseur: menu contextuel;
}
[ID * = \
– transition webkit: toutes les 0,3 secondes sont faciles;
– transition MOZ: toutes les 0,3 secondes sont faciles;
– O – transition: toutes les 0,3 secondes sont faciles;
– transition MS: toutes les 0,3 secondes sont faciles;
Transition: toutes les 0,3 secondes sont faciles;
Position: absolument! Important
En haut: – 100px;
En bas: voiture élévatrice;
Gauche: 0;
Droite: automatique;
Visibilité: cachée;
Opacité: 0;
} Ajoutez le Code jquery, puis insérez la ligne de code jquery suivante entre les balises de script, comme indiqué sur l’écran d’impression ci – dessous, terminé! Jquery (fonction ($)
USD (file). Ready (Function () {
$(\
$(‘[ID * = \
Variable $Selector = $(ceci). Propriété (\
Variable $Proof = $(\
$(‘[ID * = \
$preuve. Addclass (\
$(‘[ID * = \
$(this). Ajouter une classe (\
});
});
}); Aperçu maintenant que nous avons terminé toutes les étapes, regardons enfin les résultats sur les différents écrans de taille. Bureau Mobile Dans cet article, nous vous montrons comment créer des recommandations interactives pour tout type de site Web que vous construisez. Plus précisément, nous vous avons montré comment créer des cartes de recommandation personnalisées qui sont activées lorsque quelqu’un survole un module Blurb sur la gauche. Vous pouvez également télécharger gratuitement le fichier json! Si vous avez des questions ou des suggestions, n’hésitez pas à faire part de vos commentaires dans la section commentaires ci – dessous. Si vous souhaitez en savoir plus sur Divi et recevoir des cadeaux supplémentaires sur Divi, assurez – vous de vous abonner à notre newsletter et à YouTube Channel