Comment rendre votre pied de page Divi collant

Dans ce tutoriel, nous allons vous montrer exactement comment rendre le pied de page de votre site Divi collant. L'utilisation d'un pied de page collant peut être l'une des demandes que vous recevez lorsque vous concevez un site Web pour un client ou un besoin que vous avez lorsque vous créez votre propre site Web. Nous allons vous montrer deux possibilités qui rendront votre pied de page collant. La première méthode passe par le code CSS et la seconde par le code jQuery. Les deux méthodes fonctionnent, mais tout dépend de celle que vous préférez utiliser pour créer cet effet collant pour votre site Web.

L'ajout d'un pied de page collant à votre site Web n'est actuellement pas quelque chose que vous pouvez faire automatiquement dans le constructeur Divi. C'est pourquoi nous allons vous montrer comment obtenir le résultat exact que vous souhaitez sans avoir à faire beaucoup d'efforts. La seule chose que vous avez à faire est de suivre ce post étape par étape, de copier et coller quelques lignes de code et de les mettre au bon endroit.

Pourquoi utiliser un pied de page collant ?

Un pied de page collant est généralement utilisé pour une raison principale ; si vous avez une ou plusieurs pages sur votre site Web qui n'ont pas assez de contenu disponible pour remplir un écran entier. Vous pouvez, bien sûr, vous assurer d'avoir suffisamment de contenu sur une page mais si cela n'apporte pas de valeur ajoutée à la page ; il n'y a pas besoin de le faire.

Maintenant, au cas où il n'y aurait pas assez de contenu pour remplir tout l'écran, la page aura un pied de page flottant juste après la fin du contenu. Cela n'a généralement pas l'air bien et ce n'est pas le résultat que vous voulez obtenir. Heureusement, vous pouvez utiliser un pied de page collant pour vous débarrasser du pied de page flottant. Le pied de page collant garantit que le pied de page reste en bas de la page sans créer d'espace inutile. La longueur de la page restera donc la même et à chaque fois que vous ajusterez la taille de votre fenêtre, le pied de page se modifiera à l'écran.

Ici, vous avez une image d'une courte page qui n'a pas de pied de page collant :

Et voici la même image de cette page après l'ajout d'un pied de page collant :

Différence entre le pied de page collant et fixe

Tout le monde ne décide pas d'utiliser un pied de page sur son site Web, mais quand il le fait ; il existe de nombreuses façons de le styler. Tout dépend de la structure de votre site Web et si vous souhaitez inclure un pied de page « manuel » et de style différent créé avec le constructeur Divi à la place.

Mais si vous utilisez un pied de page standard, vous pouvez choisir comment vous voulez le styler et comment vous voulez qu'il soit positionné sur votre site Web. Les trois positions principales qu'un pied de page peut avoir sur un site Web sont flottantes, fixes et collantes.

Lorsque vous comparez le pied de page collant et le pied de page fixe ; ils peuvent se ressembler à première vue, mais ce n'est pas le cas. Le pied de page fixe est toujours visible lors du défilement d'une page de votre site Web, tandis que le pied de page collant gère spécifiquement les pages dont le contenu n'est pas assez long pour atteindre le bas de l'écran. Dans ce cas précis où le contenu n'est pas assez long ; il se comportera comme un pied de page fixe et restera collé au bas de votre page ; créant cet « effet de pied de page fixe ».

Cependant, si le contenu est suffisamment long, le pied de page collant se comportera comme d'habitude et la page poussera le pied de page vers le bas de la page pour s'assurer qu'il n'apparaît pas en permanence à l'écran. Dans la plupart des cas, cette méthode est plutôt préférée que d'avoir un pied de page fixe sur l'ensemble du site Web, car elle laisse plus de place dans la fenêtre pour que le contenu apparaisse.

Créez un Sticky Footer sur votre site Divi via CSS

Sans plus attendre, commençons à créer un pied de page collant pour votre site Web. Le code que nous utiliserons est vraiment simple mais fait le travail. Vous passerez rapidement d'un pied de page flottant sur votre page à une page où le pied de page est poussé vers le bas si le contenu n'est pas assez long.

Ajouter du code CSS via les paramètres de page (pour une page en particulier)

Dans certains cas, vous souhaitez rendre le pied de page collant sur une seule page en particulier . Dans cette partie de l'article, nous allons vous montrer comment procéder exactement en ajoutant le code CSS au champ CSS personnalisé d'une page. En faisant cela, vous vous assurez que le code CSS ne s'applique qu'à cette seule page de votre site Web. Ce qui signifie également que le code CSS ne sera chargé que lorsque quelqu'un ouvrira cette page particulière. Cette méthode est généralement utilisée dans les cas où il n'y a que quelques pages plus courtes sur le site Web auxquelles vous souhaitez donner le pied de page collant.

Commencez par ouvrir la page sur laquelle vous souhaitez que le pied de page collant soit actif ou en créant une nouvelle page où vous souhaitez qu'il s'applique. Ensuite, ouvrez les paramètres de la page en cliquant sur l'icône suivante dans votre constructeur Divi :

Ensuite, ajoutez le code suivant au champ CSS personnalisé dans la fenêtre que vous venez d'ouvrir :

#main-footer {
position: absolute;
bottom: 0;
width: 100%;
}

À partir du moment où vous prévisualisez votre page, le code CSS doit s'appliquer et rendre le pied de page collant.

Ajouter du code CSS via le personnalisateur de thème (vue en temps réel)

Une autre façon d'ajouter le code consiste à utiliser le personnalisateur de thème. Si vous ajoutez le code CSS de cette manière, il s'appliquera automatiquement à l'ensemble du site Web. Chaque page aura ce code CSS appliqué. En ajoutant le code via le personnalisateur de thème, vous pouvez également voir directement les modifications apportées à votre site Web.

Pour ajouter le code CSS au personnalisateur de thème, cliquez sur le « Personnalisateur de thème » dans le back-end de votre site Web WordPress. Ensuite, faites défiler la page et ouvrez l'option CSS supplémentaire. Vous verrez apparaître tout le code CSS personnalisé que vous avez utilisé jusqu'à présent. Allez-y et ajoutez-y le code suivant :

#main-footer {
position: absolute;
bottom: 0;
width: 100%;
}

Ajouter du code CSS via les options de thème Divi

Enfin, vous pouvez également ajouter le code via les options du thème Divi. C'est le moyen le plus fréquemment utilisé pour ajouter du code à un site Web où vous souhaitez que l'ensemble du site Web bénéficie du code.

Allez dans Divi > Options du thème > Faites défiler la page vers le bas > Ajoutez le code CSS suivant à la case CSS personnalisée :

#main-footer {
position: absolute;
bottom: 0;
width: 100%;
}

Créez un pied de page collant sur votre site Web Divi via JQuery

Ajouter du code jQuery via le module de code (pour une page en particulier)

Vous pouvez ajouter le code jQuery en utilisant le module de code dans le générateur Divi. Ceci, encore une fois, est principalement utilisé lorsqu'il n'y a pas beaucoup de pages avec un contenu court et si vous ne souhaitez pas charger le code jQuery pour l'ensemble du site Web.

Ajoutez une section avec une ligne pleine largeur à la page sur laquelle vous travaillez.

Continuez en ajoutant un module de code à cette ligne pleine largeur et collez-y le code suivant :

<script text= "text/javascript">
jQuery(function($){
function stickyFooter(){
var footer = $("#main-footer");
var position = footer.position();
var height = $(window).height();
height = height - position.top;
height = height - footer.outerHeight();
if (height > 0) {
footer.css({'margin-top' : height+'px'});
}
}
stickyFooter();
$(window).resize(function(){
stickyFooter();
});
});
</script>

Ajouter du code jQuery via les options de thème Divi

Une autre possibilité d'ajouter le code jQuery est via les options du thème Divi. Lors de l'ajout de code jQuery pour l'ensemble du site Web, il existe un endroit spécifique dans les options du thème Divi où nous pouvons le faire; dans le <head&gt; champ de l'onglet Intégration. C'est exactement là que nous allons ajouter le code maintenant.

Ouvrez votre site Web WordPress > Allez dans Divi > Ouvrez les Options du thème > Allez dans l'onglet Intégration et ajoutez le code jQuery suivant à la <head> de votre site Web :

<script text= "text/javascript">
jQuery(function($){
function stickyFooter(){
var footer = $("#main-footer");
var position = footer.position();
var height = $(window).height();
height = height - position.top;
height = height - footer.outerHeight();
if (height > 0) {
footer.css({'margin-top' : height+'px'});
}
}
stickyFooter();
$(window).resize(function(){
stickyFooter();
});
});
</script>

Dernières pensées

L'ajout d'un pied de page collant est généralement nécessaire dans les cas où vous avez une page avec peu de contenu. Vous voulez vous débarrasser du pied de page flottant pour que la structure de la page soit plus naturelle. Si vous avez des commentaires ou des suggestions pour de futurs articles sur notre section de blog ; assurez-vous de laisser un commentaire dans la section commentaires ci-dessous afin que nous puissions vous contacter!

Assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube pour ne jamais manquer une grande annonce, un conseil utile ou un cadeau Divi !

Image en vedette par Vintagio / shutterstock.com