Comment réparer votre pied de page Divi

Dans le didacticiel Divi d'aujourd'hui, nous allons vous montrer comment créer un pied de page fixe pour votre site Web au lieu d'un pied de page normal. Dans un article précédent, nous vous avons montré comment le rendre collant, ce qui diffère en fait de le faire réparer, bien qu'ils puissent sembler identiques au premier abord. Si vous ne cherchiez pas à le rendre collant mais à le corriger, cet article vous aidera.

L'ajout d'un pied de page fixé à votre site Web peut être une demande de l'un de vos clients ou un besoin que vous avez pour votre propre site Web. Bien qu'il ne soit pas aussi souvent utilisé qu'un en-tête fixe, cela pourrait être l'une de ces choses avec lesquelles vous avez du mal. Nous allons vous montrer deux manières de rendre votre pied de page collant sur votre site Divi. La première sera en utilisant des lignes CSS et la seconde en utilisant du code jQuery. Les deux méthodes apporteront des modifications à la feuille de style CSS du pied de page de votre site Web.

Voici un exemple de l'apparence du pied de page fixe lors du défilement :

Quand utiliser un pied de page fixe

Il existe différentes raisons pour lesquelles vous souhaitez avoir un pied de page fixe sur votre site Web. L'une de ces raisons pourrait être la pertinence des informations contenues dans votre pied de page. Vous pourriez, par exemple, mettre vos icônes sociales dans votre pied de page et parce que vous souhaitez encourager les visiteurs de votre site Web à explorer vos canaux de médias sociaux. Une autre raison pourrait être que vous aimez tout simplement l'effet que cela donne à votre site Web.

Si vous utilisez un pied de page fixe, sachez qu'une partie de la fenêtre du visiteur sera occupée tout le temps. Cela signifie qu'ils devront faire défiler davantage pour voir le même contenu qu'ils verraient s'il n'y avait pas de pied de page fixe. C'est un défi car les visiteurs aiment faire le moins d'efforts possible.

Cependant, si votre pied de page n'est pas si grand, cela pourrait augmenter le nombre d'actions qui sont effectuées dans votre pied de page. Nous déconseillons d'utiliser un en-tête, un menu principal et un pied de page fixes en même temps. En rendant les trois fixes, le contenu qui apparaît sera considérablement réduit, ce qui peut entraîner un taux de rebond plus élevé.

Différence entre le pied de page fixe et le pied de page collant

Avant de commencer, nous expliquerons la différence entre un pied de page fixe et un pied de page collant.

Un pied de page collant est généralement un peu plus complexe. Il est conçu pour se comporter comme un pied de page fixe si une page n'a pas assez de contenu pour pousser le pied de page vers le bas de l'écran. Dans les cas où les pages sont suffisamment longues, le pied de page se comportera comme un pied de page normal et sera poussé vers le bas jusqu'au bas de la page, donc pas l'écran.

Commençons

Abonnez-vous à notre chaîne Youtube

Nous allons commencer tout de suite en vous montrant comment ajouter le pied de page fixe à votre site Web de deux manières ; via le code CSS et via le code jQuery. Les deux méthodes fonctionnent, mais tout dépend de celle que vous préférez utiliser pour le site Web pour lequel vous en avez besoin.

Ajouter un pied de page fixe via CSS

La première et la plus simple façon de créer un pied de page fixe consiste à ajouter des lignes CSS. Avec le Divi Builder et WordPress, on peut ajouter ces lignes à différents endroits. Regardons-les.

Ajouter du code CSS via CSS personnalisé pour une page

La première façon d'ajouter le code CSS est de l'ajouter à une page en particulier. Bien qu'il soit préférable de créer un pied de page fixe identique pour chaque page de votre site Web (pour avoir cette cohérence sur votre site Web), vous pouvez également choisir de le laisser s'appliquer à une page en particulier.

Ouvrez la page à laquelle vous souhaitez ajouter les lignes de code CSS et cliquez sur le bouton suivant du Divi Builder.

Faites défiler vers le bas et ajoutez le code suivant au champ CSS personnalisé :

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

Ajouter du code CSS via le personnalisateur de thème

Une autre façon d'ajouter le code consiste à utiliser le personnalisateur de thème. En utilisant le personnalisateur de thème, vous verrez les résultats se produire en temps réel sur votre site Web. Le code que vous ajoutez via le personnalisateur de thème s'applique à toutes les pages de votre site Web.

Accédez à Theme Optimizer sur votre site Web > CSS supplémentaire > Collez les lignes de code CSS suivantes :

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

Ajouter du code CSS via les options de thème

La dernière façon d'ajouter le code CSS à votre site Web consiste à utiliser les options de thème. Lorsque vous ajoutez votre code dans le champ CSS personnalisé des options du thème, le code s'appliquera également à l'ensemble du site Web. C'est le moyen le plus fréquemment utilisé pour ajouter du code CSS personnalisé à l'ensemble de votre site Web Divi.

Allez dans Divi > Options du thème > Général > Faites défiler vers le bas et ajoutez le code suivant au champ CSS personnalisé :

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

Ajouter un pied de page fixe via jQuery

Une autre possibilité que nous avons consiste à effectuer les modifications CSS via certaines lignes de code jQuery. Lorsque vous utilisez un pied de page fixe, vous voulez généralement vous assurer qu'il s'applique à toutes les pages de votre site Web. Ce type de cohérence permet à vos visiteurs de naviguer plus facilement sur votre site Web sans se tromper.

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

Ouvrez la page sur laquelle vous souhaitez appliquer le pied de page fixe et ajoutez une nouvelle section standard en haut de votre page. Ensuite, choisissez une ligne pleine largeur et ajoutez-y un module de code. Ouvrez le module de code et collez le code jQuery suivant dans la zone de contenu :

<script text="text/javascript">
jQuery(function($) {
$("#main-footer").css("position","fixed").css("bottom",0).css("width",'100%');
});
</script>

En ajoutant du code jQuery via le module de code sur une page particulière, le code ne s'appliquera qu'à cette page. Le reste de votre site Web aura un pied de page normal tandis que celui où vous avez utilisé le module de code aura un pied de page fixe.

Ajouter du code jQuery via les options du thème

La dernière option pour ajouter du code jQuery qui rend votre pied de page fixe est via les options de thème. Les lignes de code s'appliqueront immédiatement à l'ensemble de votre site Web et offriront la cohérence dont votre site Web a besoin.

Allez dans Divi > Options du thème > Intégration > Et collez les lignes de codes suivantes dans l'<head> de votre site web :

<script text="text/javascript">
jQuery(function($) {
$("#main-footer").css("position","fixed").css("bottom",0).css("width",'100%');
});
</script>

Dernières pensées

Nous vous avons montré comment créer un pied de page collant dans l'un des articles précédents. Cet article traite particulièrement de la façon de créer un pied de page fixe pour votre site Web. Le pied de page fixe restera toujours en bas de l'écran du visiteur lors de la visite de votre site Web. Si vous avez des questions ou des suggestions, 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 Zeeker2526 / shutterstock.com