Étant donné qu’un nombre important et croissant d’utilisateurs de WordPress sont utilisés Deux Nous ouvrons une section de Tutoriels sur la personnalisation de Divi Cet article vous fournira des astuces, des conseils et des guides sur la façon d’utiliser ce thème WordPress génial de manière efficace et parfois spectaculaire.

Et aujourd’hui, nous commençons un truc que vous aimerez sûrement parce que Il n’y a rien de plus ennuyeux et moche que le pied de page d’un site Web bien connu Bas de pageAlors faisons-le scintiller un peu et applaudissons, ajoutez du CSS et des émotions.

Le but est que le Bas de pageau lieu d’être fixé en bas de votre site Web, révéler dans un bel effet parallaxeou parallaxe si vous préférez l’appeler ainsi de cette façonPuisque vous avez quelque chose là-bas, vous devriez attirer l’attention.

Et le fait est que nous décorons toujours nos couvertures Web avec de superbes effets et des designs qui disent à quel point nous sommes bons, mais vous arrivez au bas de la page et il y a ce terrible et apparemment obligatoire, Bas de page. Donc, depuis que nous l’avons dit, a-t-il au moins dit quelque chose?

Ajouter du CSS à Divi

Comme pour presque tout dans Divi, l’ajout de code CSS ne signifie pas que vous perdrez vos modifications avec les mises à jour tant que vous continuez à utiliser la case à cocher. CSS personnalisé Vous avez les options de thème Divi.

Ce champ est l’endroit où vous pouvez ajouter vos modifications CSS qui seront appliquées sur le Web. Tout ce que vous avez à faire est de copier et coller vos codes là-bas, d’enregistrer les modifications et la magie fonctionnera.

Pour ajouter le code CSS, allons à Divi -> Options du thème -> Généralet ci-dessous vous avez la boîte de CSS personnalisé.

Le code pour afficher le pied de page dans Divi

Le code à mettre dans la boîte après tous les autres que vous avez déjà est le suivant:

/*Footeer que aparece en Divi en vez de estar fijo */
 
#main-content {
 margin-bottom: 350px; /*Esto puede que tengas que ajustarlo al contenido de tu footer*/
}
 
#main-footer {
 position: fixed;
 z-index: -1;
 height: 350px; /*Esto puede que tengas que ajustarlo al contenido de tu footer*/
 width: 100%;
 bottom: 0;
}
 
#footer-bottom {
 position: fixed;
 width: 100%;
 bottom: 0;
 padding: 10px 0;
}
 
#footer-info, #footer-info a {
 padding: 0;
}
 
#main-footer .container {
 height: 100%;
}
 
#footer-widgets {
 position: absolute;
 bottom: 51px; /*Esto puede que tengas que ajustarlo al contenido de tu footer*/
}
 
/*Edita esta sección para pantallas de tablet*/
@media only screen and ( max-width: 980px ) {
  
 #main-content {
 margin-bottom: 450px;
 }
 
#main-footer {
 height: 450px;
 }
 
#footer-widgets {
 bottom: 83px;
 }
 
}
 
/*Edita esta seccion para pantallas de moviles*/
@media only screen and ( max-width: 767px ) {
 
#main-content {
 margin-bottom: 650px;
 }
 
#main-footer {
 height: 650px;
 }
 
#footer-widgets {
 bottom: 83px;
 padding: 5% 0;
 }
 
#footer-widgets .footer-widget:nth-child(n), #footer-widgets .footer-widget .fwidget {
 margin-bottom: 4.5% !important;
 }
 
}

Si vous avez regardé attentivement le code et les commentaires qu’il contient, il y a quelques lignes que vous voudrez peut-être changer, en fonction de la hauteur du contenu de votre contenu Bas de page.

En fin de compte, vous obtenez quelque chose comme ceci:

Pied de page qui apparaît dans Divi

Beau ou? Bien mieux que ça, de toute façon Bas de page statique et ennuyeux, et vous pourriez même obtenir quelques clics sur cette section parce que c’est pour cela que vous l’avez, non?

J’espère que vous avez apprécié, nous en verrons plus un autre jour Astuces pour personnaliser Divi.

ÉVALUER ET PARTAGER CET ARTICLE POUR AMÉLIORER LA QUALITÉ DU BLOG …

((12ème Votes, moyenne: 4.7)

As-tu aimé cet article? Vous ne pouvez pas imaginer ce que vous manquez et YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.



Source link

Recent Posts