Pour créer une invitation \

Le thème de l’élégance a récemment changé la conception de son site Web pour y inclure des fonctionnalités à imiter. Dans des articles précédents, j’ai écrit sur la façon d’implémenter la conception élégante de blogs thématiques et de copier le menu principal. Mais dans cet article, je vais vous montrer comment copier l’appel à l’action (CTA) sur le thème de l’élégance. Ce CTA est situé au bas du site élégant, à côté du pied de page. Ce CTA est caractérisé par l’ajout d’une fonction qui active l’animation une fois que l’utilisateur fait défiler l’élément. Aujourd’hui, je vais vous montrer comment copier non seulement les styles de ce CTA, mais aussi les fonctionnalités d’animation. Ceci est réalisé en utilisant le module de code Divi et quelques CSS personnalisés et quelques lignes JavaScript. Cependant, vous pouvez facilement étendre la même fonctionnalité d’animation à n’importe quel module Divi.
On y va. Utilisez le module de code de Visual Builder pour construire un appel à l’action, en ajoutant une nouvelle section générale avec des colonnes de ligne pleine largeur. Ajoutez ensuite le formulaire de code à votre ligne. Sous paramètres généraux de code, ajoutez le code HTML suivant à la section contenu.

Ce HTML sera utilisé comme contenu du CTA. Vous remarquerez que le titre principal de la LTC est emballé dans la marque H3. Les sous – titres sont inclus dans le marquage P standard. Ce lien (qui deviendra bientôt un bouton) a un ID CSS appelé \
Même les DIV de la classe \
: tous. 8S facile;
– conversion webkit: tous. 8S facile;
– conversion webkit: tous. 8S facile;
Posté le mardi 17 décembre 2013 à 15: 00
Ombre de la boîte MOZ: 0px 5px 20px # 231f92;
Ombre de la boîte webkit: 0px 10px 50px # 231f92;
}
Drapeau: vol stationnaire
Couleur de fond: # 2cc2e6;
Ombre de la boîte: 0px 20px 80px # 1b1867;
Ombre de la boîte MOZ: 0px 20px 80px # 1b1867;
Ombre de la boîte webkit: 0px 20px 80px # 1b1867;
}
Contenu du style dans le module de code
– Oui. Informations CTA
Couleur: # FFF;
Alignement du texte: centré;
Dépôt de garantie: 0 voiture! Important
Largeur maximale: 1080px;
Remplissage: 50px;
}
– Oui. CTA info H3 {
Couleur: # FFF;
Taille de la police: 35px;
Hauteur de la ligne: 1,3em;
}
Votre CTA commence à ressembler à ce personnage. Tout ce que nous avons à faire est d’ajouter un court script qui, une fois que le CTA est visible dans la fenêtre du navigateur au fur et à mesure qu’il défile, peut fournir un effet d’animation fascinant pour le CTA. L’une des façons les plus simples d’ajouter un script waypoint pour activer la fonctionnalité lors de la configuration d’un projet de page de défilement d’animation CTA lorsque vous faites défiler vers un projet est d’utiliser une bibliothèque JavaScript appelée waypoint. Puisque Divi a installé un point de cheminement (yeah!), Tout ce que nous avons à faire est d’inclure un script qui utilise la bibliothèque. Allez à Divi → options de sujet → intégration et collez le script suivant dans la section ajouter du Code au début du blog. Jquery (document). Ready (Function () {
Jquery (\
Jquery (\
}, {offset: ‘80%});
}); Ce script ajoute une fonction qui active une classe appelée animation CTA lorsque vous Défilez vers la section CTA (l’ID CSS est la section CTA). Notez que l’offset est spécifié à 80% de la partie du Code. Cela signifie que la fonction est activée lorsque le Haut de la section CTA se trouve à 80% du Haut de la fenêtre du navigateur. Si vous souhaitez retarder l’activation de la fonction
Lorsque le CTA arrive au centre de la page, vous pouvez changer la valeur de décalage à environ 50%. Cependant, si votre Dec est au bas de la page, vous devriez vous en tenir à des valeurs proches de 80 à 90%. Ceci est dû au fait que votre CTA peut ne jamais atteindre la moitié de la fenêtre du navigateur au moment du défilement et ne sera donc pas activé.
C’est tout! Regardons maintenant les projets achevés. Ajouter la fonctionnalité CTA à d’autres modules si vous voulez ajouter cette fonctionnalité CTA à d’autres modules dans Divi Builder, c’est facile à faire. Voici la procédure de démarrage: créez une section standard avec une ligne pleine largeur (une seule colonne). Dans CSS dans les paramètres de section, ajoutez CSS ID CTA section. Dans les paramètres en ligne, dans CSS, ajoutez l’ID CSS « ligne CTA » et la classe CSS pour la colonne « colonne CTA ». Veuillez saisir le CSS personnalisé suivant:. Colonne CTA. Et \ \ u pb \ \ u colonnes: dernier enfant {
Dépôt de garantie: 0 véhicule;
Marge droite: automatique! Important
Largeur maximale: 1080px;
Flotteur: aucun;
}
Ajoutez tout module que vous voulez à la ligne (par exemple, appelez le module d’exploitation) et modélisez – le en conséquence. Vous voudrez peut – être ajouter un fond transparent au module afin qu’il ne chevauche pas la couleur de fond de la section CTA. Important: vous ne pouvez pas ajouter plus d’une invitation à l’action par page en utilisant cette fonctionnalité.
Le CTA qui reproduit des thèmes élégants est une fonctionnalité utile qui peut être ajoutée à n’importe quel projet futur. Il attire l’attention du lecteur, mais ne le dérange pas beaucoup. Avec les modules de code, les développeurs peuvent ajouter du HTML personnalisé au CTA plus facilement. La fonction d’animation du point de cheminement n’est pas limitée au module de code. Vous pouvez également ajouter l’ID CSS requis à n’importe quelle section, ligne et colonne pour créer un CTA en utilisant n’importe quel module en utilisant Divi Builder. J’ai hâte d’entendre vos commentaires dans les commentaires qui suivent.
Bonjour!