Comment ajouter des motifs d'arrière-plan créatifs à la barre de pied de page inférieure de Divi

La barre de pied de page inférieure de Divi est un élément petit mais important de votre site Web. Et avec certaines mises en page, il peut être nécessaire d'ajouter une touche finale créative à cette barre inférieure.

Dans ce tutoriel, je vais vous montrer comment ajouter des motifs d'arrière-plan personnalisés pour la barre de pied de page inférieure de Divi. En supprimant la couleur d'arrière-plan par défaut de la barre de pied de page inférieure et en ajoutant une marge personnalisée à une section, vous pouvez exploiter les paramètres de conception d'une section pour créer des conceptions d'arrière-plan intéressantes.

Commençons.

Un petit aperçu

Voici un aperçu de quelques exemples de conceptions que vous pouvez créer avec ce didacticiel.

Personnalisation de la barre de pied de page inférieure dans le personnalisateur de thème

Avant de pouvoir ajouter des arrière-plans personnalisés derrière notre barre de pied de page inférieure, nous devons nous débarrasser de la couleur d'arrière-plan par défaut utilisée.

Accédez au personnalisateur de thème et accédez à Pied de page > Barre inférieure. Changez ensuite la couleur de fond pour qu'elle soit complètement transparente.

Vous ne remarquerez peut-être pas beaucoup de changement dans l'aperçu car il y a toujours une couleur d'arrière-plan de pied de page derrière la barre inférieure. La couleur d'arrière-plan du pied de page peut être modifiée sous Pied de page > Mise en page, mais c'est une bonne idée de laisser cette couleur d'arrière-plan active comme solution de secours. L'arrière-plan personnalisé sera ajouté à la barre inférieure à l'aide d'une section page par page. Donc, avoir cet arrière-plan garantira que le contenu de votre barre inférieure a un arrière-plan sur les pages qui n'ont pas l'arrière-plan personnalisé en place.

Vous pouvez également changer la couleur du texte de la barre inférieure et la couleur de l'icône sociale en blanc si vous prévoyez d'avoir un arrière-plan plus sombre. Cela rendra le contenu plus lisible.

Création de la conception d'arrière-plan de la section pour la barre inférieure

Maintenant que la barre inférieure du pied de page a un arrière-plan transparent, nous sommes prêts à concevoir l'arrière-plan de notre section et à le positionner derrière la barre.

Si vous ne l'avez pas déjà fait, créez une nouvelle page et choisissez « Créer à partir de zéro ». Insérez ensuite une disposition à une colonne pour la ligne de section.

Pas besoin d'ajouter un module à la ligne puisque nous n'aurons besoin que de la section et de la ligne pour les conceptions d'arrière-plan.

Ensuite, accédez aux paramètres de ligne et ajoutez un espacement comme suit :

Marge personnalisée : 0 pixels en haut, 0 pixels en bas
Rembourrage personnalisé (bureau) : 80 pixels en haut, 80 pixels en bas
Rembourrage personnalisé (tablette) : 100 pixels en haut, 100 pixels en bas

Cet espacement est nécessaire pour donner de la hauteur à notre section tout en préservant l'espace nécessaire pour les diviseurs de section que nous ajouterons pour notre conception d'arrière-plan.

Maintenant, allez dans les paramètres de la section et mettez à jour l'espacement comme suit :

Marge personnalisée (bureau) : -55 px en bas
Marge personnalisée (tablette): -94px Bas
Rembourrage personnalisé : 0 pixels en haut, 0 pixels en bas

La marge inférieure de -55px tire la barre inférieure dans la zone de section de sorte que tout design que nous ajoutons à notre section se trouve derrière notre barre inférieure. La barre inférieure par défaut mesure 54 pixels de haut sur le bureau et environ 94 pixels de haut sur la tablette, c'est pourquoi vous avez besoin d'une marge négative plus importante pour la tablette.

Se débarrasser du rembourrage supérieur et inférieur maximise l'espace nécessaire pour le diviseur de section que nous ajouterons plus tard.

Ajout du séparateur inférieur

Ensuite, ajoutez un séparateur inférieur à la section pour encadrer le contenu de votre pied de page comme suit :

Style de séparateur inférieur : voir capture d'écran
Couleur du séparateur : #121212
Hauteur du séparateur : 120 px (ordinateur de bureau), 150 px (tablette), 150 px (smartphone)
Répétition horizontale du diviseur : 0.9x (ordinateur de bureau), 0.5x (tablette), 0.5x (smartphone)
Diviseur Flip: vertical

À l'heure actuelle, le contenu de la barre inférieure (le texte et les icônes sociales) est masqué derrière le séparateur, même si la disposition du séparateur est définie sous le contenu de la section. En effet, le pied de page inférieur ne fait pas techniquement partie du contenu de la section. Pour résoudre ce problème, nous devons ajouter un z-index personnalisé à notre section afin qu'il se trouve derrière le pied de page inférieur.

Sous l'onglet avancé, ajoutez l'extrait de code CSS personnalisé suivant à l'élément principal :

z-index: 0;

Maintenant, le contenu de votre barre de pied de page se trouvera au-dessus de votre section et vous aurez un joli arrière-plan qui encadre votre barre de pied de page.

Et il s'adaptera également bien sur mobile.

Avec cette structure de base en place, vous disposez d'une belle conception de section sur laquelle s'appuyer. Dans cet esprit, allez-y et enregistrez cette section dans votre bibliothèque afin que vous puissiez utiliser cette structure comme point de départ pour explorer les conceptions actuelles.

Vous êtes maintenant prêt à explorer de nouveaux designs. Vous pouvez modifier le diviseur inférieur en différents styles et couleurs pour créer d'innombrables motifs de cadre d'arrière-plan. Vous devrez peut-être ajuster la hauteur du diviseur et les valeurs de répétition horizontale en fonction du style de diviseur que vous choisissez.

Voici quelques exemples.

Utilisation du séparateur supérieur avec un dégradé d'arrière-plan personnalisé

L'utilisation d'un seul séparateur inférieur comme conception de cadre d'arrière-plan pour votre pied de page inférieur est quelque peu limitative. Mais si vous utilisez un séparateur supérieur comme conception de cadre, vous pouvez utiliser un dégradé d'arrière-plan personnalisé pour votre section. Cela ouvrira de nouvelles portes à explorer.

Accédez aux paramètres de votre section et définissez votre style de séparateur inférieur sur aucun. Ajoutez ensuite un dégradé d'arrière-plan comme arrière-plan de votre section.

Vous pouvez maintenant ajouter un style de séparateur supérieur à votre section pour créer un tout nouveau look.

Voici quelques exemples de conceptions possibles en modifiant simplement l'arrière-plan dégradé et le style de séparation.

Combinaison de séparateurs avec des dégradés d'arrière-plan pour une conception de cadre de bordure multicolore

Il est maintenant temps de monter d'un cran. N'oubliez pas qu'il existe de nombreuses possibilités pour créer des motifs d'arrière-plan uniques dans les sections et les rangées. Donc, pour ce dernier exemple, je vais vous montrer comment combiner ces fonctionnalités pour créer un design complètement unique.

Pour démarrer cette conception, continuez et utilisez la section que vous avez enregistrée dans votre bibliothèque en cliquant pour ajouter une nouvelle section dans le générateur visuel, en sélectionnant l'onglet Ajouter à partir de la bibliothèque et en choisissant la disposition de la section.

Une fois la section ajoutée à la page, nous sommes prêts à la personnaliser.

Pour commencer, accédez à la section Paramètres et mettez à jour les éléments suivants :

Dégradé de fond à gauche : #29c4a9
Couleur d'arrière-plan du dégradé à gauche : #2b87da

Direction du gradient : 90 degrés
Position de départ : 50 %
Position finale : 0%

Ajoutez maintenant un séparateur supérieur comme suit :

Style de séparateur supérieur : voir capture d'écran
Couleur du séparateur : #ffffff
Hauteur du séparateur : 120 px (ordinateur de bureau), 150 px (tablette), 150 px (smartphone)
Répétition horizontale du diviseur : 0.9x (ordinateur de bureau), 0.5x (tablette), 0.5x (smartphone)
Diviseur Flip: vertical

Ces paramètres de diviseur reflètent complètement le diviseur inférieur de sorte qu'il crée une bordure entourant le diviseur inférieur. Étant donné que le séparateur lui-même est blanc, cela donne l'impression que le dégradé de fond est une extension du séparateur inférieur.

Allez maintenant dans les paramètres de ligne et ajoutez un dégradé d'arrière-plan comme suit :

Couleur d'arrière-plan du dégradé à gauche : #df52ff
Couleur d'arrière-plan du dégradé à gauche : #2b87da

Direction du gradient : 90 degrés
Position de départ : 50 %
Position finale : 0%

Pour égaliser la largeur de chaque segment de couleur pour votre arrière-plan, attribuez à la ligne une largeur personnalisée de 50 %.

Voici la conception finale!

Dernières pensées

Avoir un design d'arrière-plan personnalisé pour la barre de pied de page inférieure de Divi peut être un ajout rafraîchissant à votre page. Il suffit de quelques personnalisations pour une section située au bas de la page. Malheureusement, la conception est limitée à une seule page et ne pourrait pas être appliquée à l'ensemble du site. C'est pourquoi la couleur d'arrière-plan du pied de page est utilisée comme solution de secours. Mais une fois que vous avez enregistré la section dans votre bibliothèque, vous pouvez facilement la déposer sur la page de votre choix. Vous pouvez même ajouter à l'une de nos mises en page prédéfinies à utiliser dans votre prochain projet. Tout ce que vous avez à faire est de vous assurer d'ajouter la section tout en bas de votre page. J'espère que vous le trouverez utile!

En outre, vous pourriez être intéressé à encadrer votre menu de navigation en utilisant une technique similaire.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!