Comment utiliser Divi & # 39; pour créer un pied de page personnalisé; Générateur de thème s

Allez au générateur de thème dans les options de thème Divi. Ajoutez et créez un pied de page global, soit à partir de la Bibliothèque Divi, soit à partir de zéro. Dans ce tutoriel, nous allons créer un pied de page personnalisé à partir de zéro, Donc continuez à sélectionner la première option. Il est temps d’ajouter la couleur de fond de la section 1! Ouvrez la Section de la page et changez la couleur de fond de la section.
Couleur de fond: # 000000 Espacement ensuite, changez le réglage de l’espacement de section. Marge supérieure: 6vw marge gauche: 6vw marge droite: 6vw marge gauche: 30px marge droite: 30px Bordure ajouter les bords supérieurs gauche et droit suivants. En haut à gauche: 20px en haut à droite: 20px Les ombres de boîte sont également incluses dans les paramètres de section. Boîte d’ombre floue forcée: rgba (0,0,0,0,18) couleur de l’ombre: rgba (0,0,0,0,18) Ajoutez de nouvelles lignes à la section structure de la colonne continue en ajoutant des lignes à la section en utilisant la structure de colonne suivante: Ajouter un formulaire texte à la colonne ajouter du contenu H2 ajouter un formulaire texte qui contient du contenu H2. Paramètres de texte H2 passer à l’onglet conception du module et modifier les paramètres de texte H2 en conséquence: titre 2 caractères: Poppins titre 2 poids des caractères: demi – gras titre 2 alignement du texte: texte intermédiaire couleur titre 2: # FFFFFF titre 2: taille du texte: 31 Px (bureau), 24 px (tablette), 18 pixels (téléphone) hauteur de la ligne de titre 2: 1,6 em Ajoutez également une largeur maximale au module. Largeur maximale: 700 pixels Ajouter un formulaire de bouton à la colonne ajouter une copie ajouter un formulaire de bouton directement sous le formulaire de texte dans la colonne, puis entrer la copie que vous avez sélectionnée. Alignement passer à l’onglet conception du module et modifier l’alignement
Personnaliser en fonction des différentes tailles d’écran. Remplissage en haut: 100 Px (bureau), 50 Px (tablette et téléphone) remplissage en bas: 100 Px (bureau), 50 Px (tablette et téléphone) remplissage à gauche: 50 Px remplissage à droite: 50 px Il est temps d’ajouter le formulaire texte # 1 à la colonne ajouter du contenu! Ajoutez un formulaire de texte général à la colonne 1 et entrez ce que vous avez sélectionné. Paramètres de texte passer à l’onglet conception du formulaire et modifier les paramètres de texte en conséquence: police de texte: Poppins poids de la police de texte: gras couleur du texte: # 000000 taille du texte: 17px alignement du texte: Centre Espacement, puis ajouter des marges supérieures et inférieures personnalisées. Marge supérieure: 10px marge inférieure: 30 px Ajoutez le module séparateur à la colonne de visibilité sous le module texte, ajoutez le module séparateur et assurez – vous que l’option afficher le séparateur est activée. Afficher les séparateurs: Oui La ligne change la couleur de la ligne en noir. Couleur de ligne: # 000000 Redimensionner modifie également les paramètres de taille du séparateur. Largeur: 15% alignement du module: Centre Ajoutez le formulaire de texte 2 à la colonne ajouter du contenu continuer en ajoutant un autre formulaire de texte à la colonne. Ajouter un lien ajouter un lien à la page à laquelle ce formulaire se réfère. Paramètres du texte ensuite, allez à l’onglet conception et modifiez les paramètres du texte comme suit: police de texte: Poppins poids de la police de texte: couleur claire du texte: # 7777777 taille du texte: 15px alignement du texte: Centre L’espacement ajoute également des marges supérieures et inférieures. Marge supérieure: 10px marge inférieure: 10px Une fois que vous avez terminé de cloner le deuxième formulaire texte dans la colonne, vous pouvez Cloner le formulaire Texte 2 au besoin.
Au besoin (selon le nombre de pieds de page à inclure). Modifier le contenu et les liens assurez – vous de modifier le contenu et les liens du formulaire pour chaque copie. Une fois la colonne entière clonée deux fois et son module terminé, vous pouvez cloner la colonne entière deux fois. La couleur de fond de la colonne 2 ouvre ensuite les paramètres de la colonne 2 et modifie la couleur de fond. Colonne 2 couleur de fond: \ # f9f9f9 Modifier le contenu et les liens assurez – vous que tout le contenu et les liens de chaque colonne en double sont édités. Ajouter une nouvelle colonne, puis ajouter une quatrième colonne à la ligne. La couleur de fond change la couleur de fond de la nouvelle colonne. Couleur de fond: # 0fffc7 Espacement avec les valeurs de remplissage des colonnes. Remplissage en haut: 70px remplissage en bas: 70px remplissage à gauche: 50 Px remplissage à droite: 50 px Ajouter un module de suivi des médias sociaux à la colonne 4 ajouter un réseau social continuer en ajoutant un module de suivi des médias sociaux à la colonne 4. Réinitialiser les styles de réseaux sociaux Réinitialise les styles d’éléments pour chaque réseau social que vous ajoutez. Aligner puis aller à l’onglet conception et modifier l’alignement du formulaire. Alignement des modules: Centre Les paramètres de l’icône changent également la couleur de l’icône. Couleur de l’icône: # 000000 Ajouter un formulaire d’activation de courriel à la colonne 4 supprimer le contenu continuer en ajoutant le formulaire d’activation de courriel à la colonne 4 et en supprimant le titre et le contenu du corps. Compte e – mail ajouter un compte e – mail plus tard. Si vous n’ajoutez pas de compte e – mail, le formulaire ne sera pas affiché une fois que vous quittez le constructeur. La suppression de la couleur de fond se poursuit en supprimant la couleur de fond du formulaire. Utiliser la couleur de fond: Non Les paramètres du champ passent à l’onglet conception et changent les paramètres du champ comme suit: couleur de fond du champ
Ce tutoriel vous encourage à créer un beau pied de page global pour le prochain projet Divi. Si vous avez des questions ou des suggestions, veuillez les commenter immédiatement dans la section commentaires ci – dessous! Si vous souhaitez en savoir plus sur Divi et recevoir plus de cadeaux sur Divi, assurez – vous de vous abonner à notre newsletter et à YouTube Channel afin que vous soyez toujours l’un des premiers à apprendre et à bénéficier de ce contenu gratuit.