Comment ajouter des effets de filtre de toile de fond CSS à un en-tête collant dans Divi

Publié: 2021-07-21

L'ajout d'effets de filtre de toile de fond CSS est un moyen amusant et unique d'améliorer la conception d'un menu d'en-tête persistant. Ce qui rend la propriété CSS background-filter si unique, c'est qu'elle vous permet d'appliquer des effets de filtre à la zone derrière un élément. C'est une option parfaite pour les en-têtes collants, car la conception de votre page peut être modifiée comme par magie derrière l'en-tête tout en faisant défiler la page. Vous avez peut-être vu cet effet utilisé sur des sites populaires comme apple.com.

Dans ce tutoriel, nous allons vous montrer comment ajouter des effets de filtre de fond CSS à un en-tête collant dans Divi. Tout d'abord, nous expliquerons le processus simple d'ajout d'effets de filtre de fond à un en-tête existant qui implique 3 étapes faciles. Après cela, nous expliquerons comment créer l'ensemble de l'en-tête à partir de zéro.

Commençons!

Aperçu

Voici un aperçu rapide de la conception que nous allons construire dans ce tutoriel.

Remarquez les effets de filtre de flou et de saturation appliqués aux éléments derrière l'en-tête lorsque vous faites défiler.

Pour une simple démonstration en direct de cet effet de filtre de fond ajouté à un en-tête, consultez ce codepen.

Téléchargez GRATUITEMENT le modèle d'en-tête global

Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers
Télécharger gratuitement

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Comment télécharger le modèle

Aller à Divi Theme Builder

Pour télécharger le modèle, accédez au Divi Theme Builder dans le backend de votre site Web WordPress.

modèle d'en-tête et de pied de page pour le Bushcraft Layout Pack de Divi

Télécharger le modèle de site Web par défaut global

Ensuite, dans le coin supérieur droit, vous verrez une icône avec deux flèches. Cliquez sur l'icône.

modèle d'en-tête et de pied de page pour le Bushcraft Layout Pack de Divi

Accédez à l'onglet d'importation, téléchargez le fichier JSON que vous avez pu télécharger dans cet article et cliquez sur « Importer des modèles Divi Theme Builder ».

modèle d'en-tête et de pied de page pour le Bushcraft Layout Pack de Divi

Enregistrer les modifications apportées au générateur de thème Divi

Une fois que vous avez téléchargé le fichier, vous remarquerez un nouvel en-tête et un nouveau pied de page globaux dans votre modèle de site Web par défaut. Enregistrez les modifications de Divi Theme Builder dès que vous souhaitez que le modèle soit activé.

modèle d'en-tête et de pied de page pour le Bushcraft Layout Pack de Divi

Passons au tutoriel, voulez-vous ?

Ajout d'effets de filtre de toile de fond CSS à un en-tête existant

Le moyen le plus simple de démontrer le processus consiste à ajouter des effets de filtre de fond CSS à un en-tête existant dans Divi. Vraiment, cela se résume à ces trois étapes faciles :

  1. Ajouter une couleur d'arrière-plan semi-transparente à la section d'en-tête
  2. Ajoutez le CSS personnalisé de toile de fond à la section d'en-tête
  3. Ajouter une position collante à la section d'en-tête

Voici comment le faire dans Divi.

Modifier l'en-tête dans le générateur de thème

Accédez au générateur de thèmes et cliquez pour modifier le modèle d'en-tête existant.

Ajouter une couleur d'arrière-plan semi-transparente à la section

Ouvrez les paramètres de la section contenant les éléments de menu d'en-tête. Ajoutez ensuite une couleur d'arrière-plan semi-transparente à la section. Dans cet exemple, nous donnons à la section la couleur de fond suivante :

  • Couleur d'arrière-plan : rgba(0,0,0,0.8)

Ajouter un filtre de toile de fond CSS personnalisé

Ensuite, nous pouvons ajouter les effets background-filter (à l'aide de la propriété CSS background-filter) avec un extrait de CSS personnalisé dans l'élément principal de la section. Sous l'onglet avancé, collez le CSS suivant dans l'élément principal : 

-webkit-backdrop-filter: saturate(200%) blur(10px);
backdrop-filter: saturate(200%) blur(10px);

Ces effets de filtre sont similaires aux effets de filtre intégrés à tous les éléments Divi. La principale différence est que le filtre de fond ajoute l'effet au ou aux éléments situés derrière, tandis que les effets de filtre intégrés de Divi ajoutent l'effet à l'élément lui-même.

Ici, nous utilisons 2 effets de filtre (saturer et flou) qui appliqueront l'effet de filtre à tous les éléments de conception derrière la section.

N'hésitez pas à explorer l'ajout d'autres valeurs de fonction de filtre (ou une combinaison de celles-ci) pour créer votre propre design unique. Les plus utiles d'entre eux incluent :

  • se brouiller()
  • luminosité()
  • contraste()
  • niveaux de gris()
  • teinte-rotation()
  • inverser()
  • sépia()
  • saturer()

Ajouter une position collante à l'en-tête

Enfin, assurez-vous de donner à la section d'en-tête une position collante.

Résultat final

Voici un aperçu du résultat final sur une page en direct. Remarquez les effets de filtre de flou et de saturation appliqués aux éléments derrière l'en-tête lorsque vous faites défiler.

Création d'un en-tête avec des effets de filtre de toile de fond CSS à partir de zéro

Si vous souhaitez créer l'intégralité de l'en-tête avec des effets de filtre de fond CSS à partir de zéro, voici comment procéder.

Construire un en-tête global dans Theme Builder

Accédez au générateur de thèmes et cliquez sur pour créer un nouvel en-tête global.

Création d'une section collante avec des effets de filtre d'arrière-plan CSS

Commençons par créer une section collante avec les effets de filtre d'arrière-plan CSS comme nous l'avons fait dans la première partie de ce tutoriel.

Dans l'éditeur de disposition d'en-tête global, ajoutez une ligne d'une colonne à la section.

Ouvrez les paramètres de la section. Ajoutez ensuite la couleur d'arrière-plan semi-transparente suivante à la section :

  • Couleur d'arrière-plan : rgba(0,0,0,0.8)

Mettez à jour le remplissage comme suit :

  • Remplissage : 0px en haut, 0px en bas

Ensuite, nous pouvons ajouter les effets background-filter (à l'aide de la propriété CSS background-filter) avec un extrait de CSS personnalisé dans l'élément principal de la section. Sous l'onglet avancé, collez le CSS suivant dans l'élément principal : 

-webkit-backdrop-filter: saturate(200%) blur(10px);
backdrop-filter: saturate(200%) blur(10px);

Enfin, assurez-vous de donner à la section d'en-tête une position collante.

  • Position collante : coller au sommet

Modifier les paramètres de ligne

Maintenant que la section est terminée, ouvrez les paramètres de ligne et mettez à jour les éléments suivants :

  • Largeur de gouttière : 1
  • Largeur : 95%
  • Rembourrage : 20 pixels en haut, 20 pixels en bas

Ajouter une image de logo

Une fois les paramètres de ligne mis à jour, ajoutez un module d'image à la ligne/colonne pour créer le logo.

Téléchargez l'image du logo dans le module d'image.

La mise à jour des paramètres de conception d'image comme suit :

  • Largeur : 50px
  • Marge : 0px à droite

Créer un menu

Ensuite, ajoutez un module de menu sous le module image.

Sous l'onglet Contenu, sélectionnez un menu et attribuez-lui une couleur d'arrière-plan transparente.

  • Couleur d'arrière-plan : rgba(0,0,0,0)

Sous l'onglet Conception, mettez à jour les paramètres de conception du menu comme suit :

  • Style : Aligné à gauche
  • Couleur du lien actif : #fff
  • Police du menu : Montserrat
  • Poids de la police du menu : semi-gras
  • Couleur du texte du menu : #fff
  • Alignement du texte : Centre
  • Couleur d'arrière-plan du menu déroulant : #333
  • Couleur de la ligne du menu déroulant : #fff
  • Couleur du texte du menu déroulant : #fff
  • Lien actif du menu déroulant : #fff
  • Arrière-plan du menu mobile : #333
  • Couleur du texte du menu mobile : #fff
  • Couleur de l'icône du panier d'achat : #fff
  • Couleur de l'icône de recherche : #fff
  • Couleur de l'icône du menu Hamburger : #fff
  • Largeur : 80 % (ordinateur de bureau et tablette)

Créer un bouton avec un module de texte

Pour créer le petit bouton de l'en-tête, nous allons utiliser un module de texte. Ajoutez un module de texte sous le menu.

Mettez à jour le contenu du corps avec le travail « Shop ». Donnez ensuite au module de texte une couleur de fond blanche.

  • Corps du texte : « Boutique »
  • Couleur d'arrière-plan : #fff

Sous l'onglet Conception, mettez à jour les éléments suivants :

  • Police du texte : Montserrat
  • Poids de la police de texte : demi-gras
  • Texte Couleur du texte : #333
  • Hauteur de la ligne de texte : 2 em
  • Alignement du texte : Centre
  • Largeur : 50px
  • Coins arrondis : 5px

Ici, le module de texte a la même largeur que l'image du logo. Cela aidera à aligner parfaitement les éléments lorsque nous utilisons la propriété flex sur la colonne avec un CSS personnalisé.

Aligner les modules en colonne avec la propriété CSS Flex

Une fois le logo, le menu et le module de texte ajoutés à la colonne, ouvrez les paramètres de la colonne et collez le CSS personnalisé suivant dans l'élément principal : 

display:flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items:center;

Enregistrer la mise en page et le modèle d'en-tête

Une fois cela fait, assurez-vous d'enregistrer la mise en page et le modèle.

Résultat final

Voici un autre aperçu de la conception finale. Remarquez les effets de filtre de flou et de saturation appliqués aux éléments derrière l'en-tête lorsque vous faites défiler.

Prise en charge du navigateur

Malheureusement, la propriété CSS background-filter ne fonctionne actuellement pas correctement sur IE et Firefox. Cependant, la solution de repli sera la couleur d'arrière-plan semi-transparente donnée à la section, qui fonctionne toujours et a fière allure.

Dernières pensées

Espérons que votre prochain projet bénéficiera d'un en-tête avec un bel effet de filtre de fond. Il est vraiment facile d'ajouter à n'importe quel en-tête dans Divi et amusant d'explorer toutes les différentes valeurs de fonction de filtre disponibles.

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

À votre santé!