Ajouter un filtre de fond CSS à & # 39; Tête adhésive en Divi

L’ajout d’effets de filtrage à l’arrière – plan CSS est un moyen intéressant et unique d’améliorer la conception du menu titre collant. L’attribut CSS du filtre d’arrière – plan est si unique parce qu’il vous permet d’appliquer l’effet de filtrage à la zone derrière l’élément. C’est le choix parfait pour les titres collants, parce que lorsque vous faites défiler une page, la conception de la page peut être modifiée par magie après le titre. Vous avez peut – être vu cet effet sur des sites populaires comme Apple. Com. Dans ce tutoriel, nous vous montrerons comment ajouter un filtre de fond CSS à la tête de collage dans Divi. Tout d’abord, nous expliquerons le processus simple d’ajout d’un effet de filtrage de fond à un en – tête existant en trois étapes simples. Ensuite, nous allons analyser comment construire toute la tête à partir de zéro.
Allons – y! Voici une brève introduction à la conception que nous allons construire dans ce tutoriel. Notez l’effet de filtre flou et saturé qui doit être utilisé pour les éléments après le titre lors du défilement. Consultez ce stylo de code pour une simple démonstration en direct des effets de filtrage de fond ajoutés au titre. Téléchargement gratuit du modèle de titre global pour obtenir le dessin dans ce tutoriel, vous devez d’abord le télécharger en utilisant les boutons ci – dessous. Pour accéder au téléchargement, vous devez vous abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci – dessous. En tant que nouvel utilisateur, vous recevrez plus de Divi Goods et un paquet gratuit Divi Layout le lundi! Si vous êtes déjà sur la liste, il vous suffit de saisir votre adresse e – mail ci – dessous et cliquez sur télécharger. Vous ne serez pas « ré – abonné » ou vous recevrez un courriel supplémentaire.
Télécharger le fichier Inscrivez – vous à Divi Newsletter et nous vous enverrons par courriel une copie du dernier paquet de mise en page de la page d’atterrissage Divi, ainsi qu’un grand nombre d’autres ressources, conseils et astuces Divi gratuits. Suivez – nous et div
Vous entrerez bientôt Divi Master. Si vous êtes déjà abonné, entrez votre adresse e – mail ci – dessous et cliquez sur télécharger pour accéder au paquet Layout. Vous vous êtes inscrit avec succès. Vérifiez votre adresse e – mail pour confirmer votre abonnement et Obtenez gratuitement le paquet hebdomadaire Divi Layout! Comment télécharger des modèles aller à Divi Theme Builder pour télécharger des modèles, allez à Divi Theme Builder à l’arrière du site WordPress. Chargez le modèle de site global par défaut, puis dans le coin supérieur droit, vous verrez une icône avec deux flèches. Cliquez sur l’icône. Allez dans l’onglet importer, téléchargez le fichier json que vous pouvez télécharger dans cet article, puis cliquez sur importer le modèle Divi Theme Builder. Lorsque vous enregistrez vos modifications dans le fichier Divi Theme Builder pour le téléchargement, vous remarquerez un nouvel en – tête global et un nouveau pied de page dans le modèle de site par défaut. Vous voulez enregistrer les modifications du générateur de thème Divi immédiatement après l’activation du modèle. Commençons le tutoriel.
Ajouter un filtre de fond CSS à un titre existant la façon la plus simple de démontrer ce processus est d’ajouter un filtre de fond CSS à un titre existant dans Divi. En fait, il se résume à trois étapes simples: ajouter une couleur de fond translucide à la section titre ajouter un CSS personnalisé filtre de fond à la section titre ajouter un emplacement fixe à la section titre Voici comment faire cela dans Divi. Changez le titre dans Theme Builder allez dans Theme Builder, puis cliquez pour changer le modèle de titre existant. Dans la section contenant les éléments du menu titre, ajoutez une couleur de fond translucide à la section paramètres ouverts. La couleur de fond translucide est ensuite ajoutée à la section. Dans cet exemple, nous fournissons la couleur de fond suivante pour cette section
Fichier: # 333 déplacer la couleur du texte du menu: # FFF panier couleur de l’icône: # FFF rechercher la couleur de l’icône: # FFF hamburger couleur de l’icône du menu: # FFF largeur: 80% (bureau et tablette) Utilisez le bouton formulaire texte pour créer un petit bouton pour le titre, et nous utiliserons le formulaire texte. Ajouter un formulaire texte sous le menu. Utilisez la tâche shopping pour mettre à jour le contenu du corps. Ensuite, donnez au texte une couleur de fond blanche. Texte: Shop Background color: # FFF Dans l’onglet conception, mettre à jour ce qui suit: police de texte: Montserrat poids de la police de texte: demi – gras couleur du texte: # 333 hauteur de la ligne de texte: 2em alignement du texte: largeur du Centre: 50px filet: 5px Le texte ici a la même largeur que l’image du logo. Lorsque nous utilisons l’attribut Flex sur une colonne avec un CSS personnalisé, cela aide à aligner parfaitement les éléments. Aligner le module colonne sur les attributs Flex CSS après avoir ajouté le logo, le menu et le formulaire texte à la colonne, ouvrez les paramètres de colonne et collez le CSS personnalisé suivant dans l’élément principal: display: Flex;
Emballage flexible: nowrap;
Contenu de l’alignement: Espacement;
Aligner les éléments: Centre; Lorsque vous avez terminé d’enregistrer la mise en page de l’en – tête et le modèle, assurez – vous d’enregistrer la mise en page et le modèle. Résultat final Voici un autre point de vue sur la conception finale. Notez l’effet de filtre flou et saturé qui doit être utilisé pour les éléments après le titre lors du défilement. Malheureusement, les propriétés CSS du filtre de fond ne fonctionnent pas bien sur Ie et Firefox pour le moment. Cependant, la couleur de fond translucide assignée à cette section est secondaire et reste valide et semble bonne. J’espère que votre prochain projet bénéficiera d’un titre bien filtré en arrière – plan. Facile à ajouter à n’importe quel titre I