Comment utiliser Divi pour mettre en évidence de façon interactive les coordonnées dans le pied de page global

Commencez par Divi Theme Builder à l’arrière du site WordPress. Là, ajoutez un nouveau pied de page global ou personnalisé. Construire à partir de zéro créer un modèle de pied de page à partir de zéro. 2. Une fois que vous entrez dans l’éditeur de modèle, vous remarquerez qu’une partie existe déjà. Ouvrez les paramètres partiels et appliquez la couleur de fond.
Couleur de fond: # e8e8e8 Ajouter une structure de ligne 1 continuer à ajouter de nouvelles lignes en utilisant la structure de colonne suivante: Redimensionner sans ajouter de module, ouvrir les paramètres de ligne et modifier les paramètres de taille comme suit: utiliser la largeur de gouttière personnalisée: Oui largeur de gouttière: 1 largeur: 90% largeur maximale: 2580 px Ajouter un peu de remplissage inférieur après l’espacement. Remplissage du Bas: 1% Ensuite, ouvrez les paramètres de la colonne 1, allez à l’onglet avancé et appliquez les lignes de code CSS de réponse suivantes aux principaux éléments de la colonne:
Bureau: affichage: Flex;
Direction de flexion: ligne; Tablette et téléphone: affichage: bloc; Ajouter le formulaire Texte 1 au contenu de réponse de la colonne 1 Il est temps d’ajouter un module, en commençant par le premier formulaire texte. Ajoutez un contenu réactif de votre choix. Assurez – vous d’inclure un numéro de téléphone sur votre tablette et votre appareil mobile, où les options de la souris ne sont pas évidentes. Modifier le contenu lorsque vous déplacez la souris modifier le contenu plus tard lorsque vous déplacez la souris. La couleur de fond est ensuite appliquée. Couleur de fond: # FFFFFF Couleur de fond lorsque vous déplacez la souris changez la couleur de fond lorsque vous déplacez la souris.
Couleur de fond lorsque la souris survole: # 00ff88 Paramètres de texte H3 passer à l’onglet conception du module et modifier les paramètres de texte H3 comme suit:
: title 3 Characters: Oswald header 3 font Weight: bold header 3 font style: Capital and underscore header 3 text alignment: Text Color Center title 3: # 000000 header 3 text size: desktop: 2.5vw Tablet: 4.5vw Phone: 5.5vw Assurez – vous que la largeur suivante est de 100%. Largeur: 100% L’espacement est ensuite appliqué avec les valeurs d’espacement de réaction suivantes:
Marge inférieure: Bureau: \/ tablette et téléphone mobile: 1% marge droite: Bureau: 1% tablette et téléphone mobile: 0% marge supérieure: 10vh marge inférieure: 10vh Les lignes de code CSS suivantes sont également appliquées au module: Flex: 1;
Position: relative! Important
Transition: Flex 800ms! Important Passez le curseur sur l’élément principal CSS et changez l’attribut Flex CSS de l’élément principal pendant que vous passez le curseur. élasticité: 3; Une fois le premier module terminé, vous pouvez le cloner deux fois pour le réutiliser. Vous remarquerez que les formulaires en double sont automatiquement affichés à côté l’un de l’autre. Modifier le module de texte # 2 modifier le contenu et passer le contenu ouvrir le premier module de texte dupliqué et modifier le contenu de réponse et le temps de vol stationnaire. Changer l’espacement supprime également l’espacement à droite de ce module. Modifier le formulaire de texte 3 modifier le contenu et passer le curseur sur le contenu, puis ouvrir les paramètres du troisième formulaire de texte et modifier la copie. Changer l’espacement supprime l’espacement à droite dans le réglage de l’espacement et ajoute l’espacement à gauche à la place. À gauche: Bureau: 1% tablette et téléphone: 0% Ajouter une ligne # 2 Structure de colonne ajouter une autre ligne à la section en utilisant la structure de colonne suivante: Couleur de fond Ouvrez les paramètres de ligne et appliquez la couleur de fond suivante: couleur de fond: # 141414 Basculer les dimensions sur l’onglet conception de
La ligne et changer les paramètres de taille en conséquence: utiliser une largeur de gouttière personnalisée: Oui largeur de gouttière: 1 largeur: 90% largeur maximale: 2580 px L’espacement modifie également le réglage de l’espacement des lignes. Remplissage vertical: Bureau: 100 Px tablette e télécopieur: 50 Px remplissage vertical: Bureau: 100 Px tablette e télécopieur: 50 Px remplissage vertical: Bureau: 8% tablette e télécopieur: 10% remplissage vertical: Bureau: 8% tablette e télécopieur: 10% Ajoutez le tableau de texte 1 à la colonne 1 ajoutez du contenu H4, puis ajoutez le premier tableau de texte à la colonne 1, qui contient du contenu H4 de votre choix. Paramètres de texte H4 passer à l’onglet conception du module et modifier les paramètres de texte H4 comme suit: Titre 4 caractères: Oswald titre 4 style de police: majuscules couleur du texte titre 4: # FFFFFF titre 4 taille du texte: Bureau: 26px tablette: 22px Téléphone: 18px titre 4 poids de ligne: 1,3em L’espacement applique également une marge inférieure. Marge inférieure: 20 pixels Ajouter un formulaire de texte 2 à la colonne 1 Ajouter un autre formulaire de texte sous le formulaire de texte précédent et inclure des éléments de pied de page et des liens de votre choix. Lien vers les paramètres de texte modifier les paramètres de texte du lien de formulaire en conséquence: caractères du lien: couleur du texte du lien latéral: # 00ff88 taille du texte du lien: 17 px La marge inférieure réactive est appliquée plus tard à l’intervalle. Marge inférieure: Bureau: 0px tablette et téléphone: 50px Réutiliser la colonne 1 supprimer les colonnes 2, 3 et 4 après avoir rempli deux formulaires de texte dans la colonne 1, vous pouvez supprimer les trois colonnes restantes de la ligne. Cloner la colonne 1 trois fois et réutiliser la première colonne en clonant trois fois. Modifier tout duplicata assurez – vous que tout duplicata dans chaque nouvelle colonne est édité. Supprimer ma
Abonnez – vous à notre newsletter et à YouTube Channel afin que vous soyez toujours parmi les premiers à en apprendre davantage sur ce contenu gratuit et à en bénéficier.