Gagner un prix est toujours amusant. C’est pourquoi les entreprises commercialisent leurs produits et services en ligne en donnant gratuitement du matériel. Il peut s’agir d’un bon de dessert gratuit pour votre premier repas ou d’un livre électronique gratuit pour votre inscription à la liste de diffusion. Mais parfois, même les cadeaux gratuits peuvent être ignorés sur Internet. L’ajout d’un élégant effet de défilement de \
On y va. Voici une brève introduction à la conception que nous allons construire dans ce tutoriel. Téléchargement gratuit mise en page pour obtenir les dessins de ce tutoriel, vous devez d’abord les télécharger en utilisant les boutons ci – dessous. Pour accéder au téléchargement, vous devez vous abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci – dessous. En tant que nouvel utilisateur, vous recevrez plus de Divi Goods et un paquet gratuit Divi Layout le lundi! Si vous êtes déjà sur la liste, il vous suffit de saisir votre adresse e – mail ci – dessous et cliquez sur télécharger. Vous ne serez pas « ré – abonné » ou vous recevrez un courriel supplémentaire.
Télécharger le fichier
Inscrivez – vous à Divi Newsletter et nous vous enverrons par courriel une copie du dernier paquet de mise en page de la page d’atterrissage Divi, ainsi qu’un grand nombre d’autres ressources, conseils et astuces Divi gratuits. Suivez – nous et vous serez bientôt maître Divi. Si vous êtes déjà abonné, entrez votre adresse e – mail ci – dessous et cliquez sur télécharger pour accéder au paquet Layout. Vous vous êtes inscrit avec succès. Vérifiez votre adresse e – mail pour confirmer votre abonnement et obtenir l’accès
Ni ajoute une bordure droite à la colonne 1 comme suit: largeur de la bordure droite: 1px couleur de la bordure droite: rgba (0,0,0,0,12)
Utilisez le module Blurb pour créer des flèches de rotation et du texte, puis nous créerons des flèches et du texte en haut comme flèches pointant vers la sélection gagnante.
Ajouter un module Blurb ajoute un nouveau module Blurb à la colonne de gauche. Le contenu du Blurb est ensuite mis à jour avec le nouveau titre et l’icône. Titre: icône Win: Flèche droite (voir capture d’écran) Blurb Design sur l’onglet design, mettre à jour ce qui suit: couleur de l’icône: # a06d51 image \ emplacement de l’icône: taille de police de l’icône gauche: 80 Px (bureau), 50 Px (tablette), 40 Px (téléphone mobile) Police de titre: patua une police de titre poids de police: gras taille du texte de l’icône: 40 Px (bureau), 25 Px (tablette), 20 Px (téléphone) espacement des lettres de titre: 1px hauteur de la ligne de titre: 2em
Ensuite, changez l’ordre du contenu de Blurb en ajoutant le CSS personnalisé suivant à l’élément principal, de sorte que la flèche soit à droite plutôt qu’à gauche: Direction: RTL! Important Ensuite, supprimez l’en – tête de remplissage par défaut sous l’en – tête de remplissage: bas de remplissage: 0px en ajoutant ce CSS personnalisé Ajoutez plus de profils dans la colonne de droite et créez vos sélections de prix. Nous ajouterons nos sélections de prix qui tourneront et finaliseront les gagnants. Pour ce faire, nous créerons et positionnerons 4 modules Blurb avec des titres et des images.
Créer Blurb 1Pour créer le premier Blurb dans la colonne 2, copiez le Blurb dans la colonne 1 et faites – le glisser dans la colonne 2. Ouvrez le paramètre duplicate Blurb dans la colonne 2 et supprimez le CSS personnalisé de l’élément principal: Cela ramènera notre icône à gauche. Mettre à jour le titre et l’image, puis mettre à jour le titre et l’image comme suit:
Rotation ITA: est la rotation initiale: – 75% (à 15%), puis met à jour le déclencheur d’effet de mouvement en haut de l’élément. Rafraîchir les lignes en utilisant hide overflow retourne maintenant aux paramètres de ligne et cache overflow en mettant à jour les paramètres de ligne suivants: horizontal overflow: hide vertical overflow: hide Partie 2: créer un prix du CTA pour la dernière partie de ce tutoriel, nous créerons un CTA qui affiche des informations sur le prix et des boutons. Nous ajouterons un effet de défilement pour afficher le CTA une fois l’animation de rotation gagnante terminée. Cela simulera un effet surprenant. Ajouter une ligne pour commencer, ajoutez une ligne dans la colonne juste en dessous de la ligne que vous venez de créer. Pour ajouter du contenu au CTA, nous copierons le formulaire texte de la mise en page par défaut à la page. Trouvez et copiez le formulaire texte intitulé « acheter en ligne ». Puis collez – le sur la ligne que vous venez de créer. Conception du texte mettre à jour la conception du texte comme suit: caractères du texte: PT sans poids des caractères du texte: gras taille du texte: 16px hauteur de la ligne de texte: 2em alignement du texte: Centre Ajoutez le bouton CTA, puis localisez – le en haut de la disposition par défaut et copiez – le. Ensuite, collez – le directement sous le formulaire texte. Effet de défilement de ligne pour afficher le CTA après la sélection du prix dans la rotation gagnante, ouvrez les paramètres de ligne et mettez à jour l’effet de défilement suivant: sur l’onglet fade in and out, ouvrez… Activer le fondu d’entrée et de sortie: est l’opacité initiale: 0% (50%) opacité moyenne: 100% (55%) J’espère que cet effet de défilement \