Comment créer un pied de page de séparation en utilisant Divi

Dans le tutoriel Divi d’aujourd’hui, nous vous montrerons comment réaliser des effets spécifiques que vous n’auriez peut – être jamais pensé intégrer à votre site Web ou au site de votre client. Plus précisément; Nous vous montrerons comment créer une illumination de pied de page. L’affichage du pied de page attendra essentiellement la fin de la page, puis affichera le pied de page comme défilé. Lorsque vous faites défiler la page entière, le pied de page apparaît dans sa forme originale. L’ajout d’un pied de page à un site Web ajoute une touche supplémentaire au pied de page du site. C’est aussi la dernière chose que les gens voient quand ils naviguent sur n’importe quelle page de votre site. Pour vous montrer exactement ce que nous entendons par révélation de pied de page, regardons le résultat final: Comme vous pouvez le voir, en plus d’afficher le pied de page, nous avons ajouté quelques nuances au contenu principal du site. De cette façon, nous créons une perspective entre le contenu principal et le pied de page. Comment utiliser Divi pour créer un abonnement Display footer à notre canal YouTube pour ajouter le code CSS nécessaire pour obtenir les résultats de l’affichage footer, nous avons d’abord besoin de quelques lignes de code CSS. Parce qu’il y a plusieurs façons d’ajouter du code CSS au site Divi, nous allons vous montrer ces trois façons. Tout d’abord, nous vous montrerons comment ajouter du Code aux options de sujet. Deuxièmement, nous ajouterons du code via le personnalisateur de thème. En ajoutant du Code de l’une ou l’autre façon, la détection des pieds de page s’applique immédiatement à l’ensemble du site. D’autre part, si vous voulez que le Code s’applique à une page spécifique, vous pouvez également le faire. En vous montrant comment ajouter du Code à la page en cours de traitement, vous pouvez créer cet effet pour une seule page.
Deux principes
L’aile dont nous avons besoin dans le Code est l’index Z et la marge inférieure du contenu principal. Pour s’assurer que le pied de page s’adapte parfaitement, nous devons connaître la hauteur du pied de page. En général, la valeur du pied de page utilisé est 53 Px. Mais peut – être avez – vous changé d’altitude au besoin. Après vous avoir montré comment ajouter un pied de page de façon standard, nous vous montrerons également comment l’adapter à la hauteur de n’importe quel pied de page. La première façon de vous montrer comment ajouter du code CSS est par l’option Divi theme. C’est la façon la plus courante d’ajouter d’autres codes CSS à un site Web. En ajoutant le code CSS dans cette zone, vous l’appliquerez immédiatement à l’ensemble du site.
Pour ajouter du Code, allez au tableau de bord WordPress > Divi > Options du thème > et copiez et collez la ligne de code CSS suivante dans le champ CSS personnalisé au bas de l’onglet: # main content {
Bord inférieur: 53px;
Indice Z: 2;
}
Home foot
Largeur: 100%;
Position: fixe;
Gauche: 0;
En bas: 0;
Indice Z: – 1;
} Une fois le Code ajouté, allez sur votre site Web pour voir le pied de page qui affiche les tâches que vous effectuez. Une autre façon d’ajouter du code CSS au site Divi est par l’intermédiaire du personnalisateur de thème. L’ajout de code par personnalisation de thème ou options de thème est le même. Lorsque vous supprimez le Code de l’option thème, il est également supprimé dans le personnalisateur thème et vice versa. L’un des avantages de l’ajout de code avec Theme Customer est que vous pouvez voir ce qui se passe en temps réel. D’autres changements que vous apportez au Code vous donneront immédiatement un résultat final clair.
Pour ajouter du Code au personnalisateur de thème, V
Contenu principal. Par exemple, si vous voulez une hauteur de pied de page de 60 Px, vous avez besoin de la ligne de code suivante: # main content {
Bord inférieur: 60px;
Indice Z: 2;
}
Home foot
Hauteur: 60px;
Largeur: 100%;
Position: fixe;
Gauche: 0;
En bas: 0;
Indice Z: – 1;
}
Bas du pied de page
Hauteur: 60px;
} Comme vous pouvez le voir, il y a trois points qui nécessitent une valeur \
Pour ajouter des ombres de boîte à la détection de pied de page, utilisez la ligne de code suivante: # main content {
Bord inférieur: 60px;
Indice Z: 2;
– l’ombre de la boîte webkit: 1px 1px 10px 1px noir;
Ombre de la boîte MOZ: 1px 1px 10px 1px noir;
Ombre de la boîte: 1px 1px 10px 1px noir;
}
Home foot
Hauteur: 60px;
Largeur: 100%;
Position: fixe;
Gauche: 0;
En bas: 0;
Indice Z: – 1;
}
Bas du pied de page
Hauteur: 60px;
} C’est tout! La détection des pieds de page devrait maintenant fonctionner correctement. Dans le billet d’aujourd’hui, nous vous montrons comment créer un effet d’affichage de pied de page sur votre site. Assurez – vous d’utiliser le code CSS personnalisé fourni pour créer l’effet et assurez – vous qu’il correspond à la hauteur du pied de page. Si vous voulez lui donner une perspective supplémentaire, nous vous recommandons d’ajouter des ombres de boîte au contenu principal, comme indiqué à l’étape précédente. Si vous avez des questions ou des suggestions