Changement & # 39; En – tête fixe en Divi

C’est toujours une bonne idée de créer différentes versions du logo dans différentes couleurs et tailles. Par exemple, vous pourriez avoir un logo en couleurs claires et foncées pour qu’il apparaisse bien dans différentes couleurs de fond. Pour les zones étroites de votre site, ayez une version plus petite (moins verticale, plus horizontale) du logo. L’un des meilleurs endroits pour utiliser différentes versions du logo est de le fixer (ou de le coller) sur le titre. Dans de nombreux cas, un titre fixe nécessite un style différent du Titre principal. Si vous gardez le même logo, le style de l’en – tête fixe est limité. C’est là qu’il est utile d’avoir un logo personnalisé. Avec un logo séparé spécialement conçu pour un en – tête fixe, vous pouvez le façonner comme vous voulez. Cela vous donne un meilleur contrôle sur la conception du site.
Dans cet article, je vais vous montrer comment: changer votre logo en un autre logo lorsque le titre fixe est actif. (ceci peut être fait avec une ligne CSS) inverse la couleur du logo sur le titre fixe. Ajoutez un excellent effet de transition lorsque vous changez le logo sur un titre fixe. Changez et déplacez le logo du titre centré sur la disposition par défaut (alignée à gauche) vers un titre fixe. On y va. Voici quelques aperçus que nous allons faire dans ce tutoriel. Voici l’apparence d’un simple interrupteur de logo. Il s’agit d’un interrupteur de logo avec effet de transition. Il s’agit d’un logo qui change de position par rapport au style de titre centré. Avant de faire quoi que ce soit d’autre, assurez – vous de faire ce qui suit: installer la dernière version de Divi. Sous – thème Divi de l’activité de mise en oeuvre. Si vous avez besoin d’aide pour définir un thème pour enfants, consultez ce billet. Si vous avez besoin de plus d’aide. Contactez notre équipe de soutien. Créer deux versions du logo, les deux 200 × 131, et ajouter
Téléchargez – les dans la médiathèque WordPress. Un logo sera utilisé pour l’en – tête principal et un pour fixer l’en – tête. Si possible, rendre la version du titre du logo fixe plus horizontale afin qu’elle ne s’écrase pas verticalement sur le titre fixe plus petit. Voici un exemple du logo du Titre principal que j’utilise. Voici un exemple de mon logo à titre fixe. Notez que j’ai supprimé le texte et créé un logo horizontal plus simple qui correspond bien au titre inférieur. Il est peu probable que quelqu’un puisse encore lire le texte et que la marque reste représentative. Utilisez les éléments du menu pour définir le menu principal. Une fois ces étapes terminées, vous êtes prêt à commencer.
Modifier les logos sur les titres fixes dans Divi Abonnez – vous à nos canaux YouTube utilisez css pour changer les logos sur les titres fixes avant d’accéder à notre CSS personnalisé, nous définissons les paramètres du menu dans le personnalisateur de thème. À partir de l’arrière – plan du site WordPress, allez à Theme Customer > title and Navigation > title format et assurez – vous que le style de titre par défaut est sélectionné. Puis retournez au titre et aux paramètres de navigation dans le personnalisateur de sujet. Sélectionnez la barre de menu principale et mettez à jour ce qui suit:
Hauteur du menu: 105 hauteur maximale du logo: 80 taille du texte: 20 Retournez maintenant à l’en – tête et naviguez. Sélectionnez les paramètres de navigation fixes et mettez à jour ce qui suit: hauteur du menu fixe: 60 taille du texte: 20 Vous pouvez ajouter d’autres paramètres pour vous adapter à la conception de votre site. Vous devrez peut – être ajuster la hauteur du menu et du logo au besoin. Cependant, si vous voulez ajouter des effets de transition, je vous recommande de conserver ces paramètres pour redimensionner
En – tête fixe
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
– Oui. Et titre fixe # logo
– Filtre webkit: inversé (100%);
Filtre: inversé (100%);
}
Résultats de l’inspection. C’est un logo noir qui peut être inversé en blanc. Ajouter des effets de transition lorsque vous changez un logo sur un titre fixe vous pouvez vous demander pourquoi j’utilise une autre méthode (plus fiable) pour changer un logo sur un titre fixe. La raison principale est que lorsque le logo \ Ajoute un nouveau logo au fichier d’en – tête. PHP pour ajouter une autre image de logo au titre, nous devons l’ajouter au fichier titre. Php. En utilisant un client FTP comme Filezilla, allez à la racine du fichier sujet Divi et copiez le fichier d’en – tête. Php. Collez une copie du fichier d’en – tête. PHP est dans le Répertoire racine du dossier sous – thème. Ensuite, ouvrez le fichier d’en – tête en utilisant votre éditeur de texte préféré. Php. Trouvez le code HTML qui contient le lien vers l’image du logo enveloppée dans la DIV avec la classe logo _ container. \ \ Nous ajouterons un fragment de code similaire pour afficher une autre image dans le titre. Copiez et collez le code suivant directement en dessous.
<a href=" \
<img src=" \

Notez qu’il s’agit d’une copie mise à jour du code original ci – dessus, mais avec deux différences. Tout d’abord, il a une nouvelle URL de source d’image que vous devez ajouter. Deuxièmement, c’est une classe appelée \
Affiche le texte du nouveau logo pour l’image URL ici et l’URL de l’image réelle. Enregistrer le fichier d’en – tête. Php. Vous avez maintenant deux logos qui apparaîtront côte à côte sur votre site. Vous ne voudrez peut – être pas qu’il reste ainsi, donc nous avons ajouté des CSS personnalisés pour les effets de transition. Lorsque le logo sur le titre fixe est allumé, ajoutez une transition intéressante, allez à Theme Customer > attachez CSS et supprimez (ou Commentez) Le Code dans la section précédente de cet article, le cas échéant. Puis ajoutez le CSS personnalisé suivant: @ Media all et (largeur minimale: 980px) {
\/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Afficher, masquer et convertir les logos de la navigation principale et de la navigation fixe;
Il doit y avoir un deuxième logo dans le titre. Fichiers PHP pour qu’ils fonctionnent
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
LOGO {
Opacité: 1;
Affichage: héritage;
Marge: 0 0 0;
– conversion webkit: tous. 4S facile à entrer et à sortir;
– transition MOZ: tous. 4S facile à entrer et à sortir;
Transition: tous. 4S facile à entrer et à sortir;
}
Logo. Deuxième logo {
Opacité: 0;
Marge: 0 – 200px – 130px;
– conversion webkit: tous. 4S facile à entrer et à sortir;
– transition MOZ: tous. 4S facile à entrer et à sortir;
Transition: tous. 4S facile à entrer et à sortir;
}
– Oui. Et titre fixe # logo
Opacité: 0;
Marge: – 200px 0px 0 0px;
– conversion webkit: tous. 4S facile à entrer et à sortir;
– transition MOZ: tous. 4S facile à entrer et à sortir;
Transition: tous. 4S facile à entrer et à sortir;
}
– Oui. Et fixez le titre # logo. Deuxième logo {
Opacité: 1;
Marge: 0 0 – 90 pixels! Important
– conversion webkit: tous. 4S facile à entrer et à sortir;
– transition MOZ: tous. 4S facile à entrer et à sortir;
Transition: tous. 4S facile à entrer et à sortir;
}
\/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Masquer le débordement sur le conteneur d’en – tête afin que le logo n’affiche pas l’extérieur de l’en – tête lors de la conversion
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
En – tête principal
Débordement: caché;
}
}
J’ai commenté le code CSS pour vous faire savoir ce qu’il fait. En bref, css réduit et augmente son opacité en déplaçant chaque logo hors du titre. Donc, pour
Lorsque vous passez à un titre fixe, votre logo. Changez l’emplacement du logo d’en – tête centré à gauche de l’en – tête fixe si vous préférez un style d’en – tête centré pour afficher l’en – tête, vous devrez peut – être vérifier l’emplacement du logo sur l’en – tête fixe. Pour moi, je préfère utiliser le style de titre par défaut (logo aligné à gauche) sur les titres fixes. La raison principale est que lorsque vous faites défiler la page, placer le logo en haut de la navigation rend le titre fixe un peu trop élevé. Pour passer du logo centré au logo aligné à gauche, vous pouvez ajouter le CSS personnalisé suivant dans la boîte CSS supplémentaire pour la personnalisation du thème. Ajoutez d’abord du Code pour changer rapidement et facilement le logo: \/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Modifier le logo de l’en – tête fixe (rapide et facile)
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
– Oui. Et titre fixe # logo
Contenu: url (insérer l’URL de l’image du nouveau logo ici);
}
N’oubliez pas d’ajouter l’URL de l’image logo. Puis ajoutez ce qui suit pour ajuster la position du logo: @ Media all et (largeur minimale: 980px) {
\/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Changer le logo centré sur le style de titre centré à la disposition par défaut lorsque le titre fixe est actif
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
– Oui. Et _ header style Centered header # main header. Et sécurisez l’en – tête. LOGO _ Container {
Flotteur: gauche;
Largeur: 20%;
}
– Oui. Et _ header style Centered # header. Et titre fixe DIV # et navigation en haut
Largeur: 80%;
Flotteur: à droite;
Hauteur: 70px;
Hauteur de la ligne: 70px;
Alignement du texte: alignement à droite;
}
– Oui. Et titre fixe # navigation du menu supérieur
Flotteur: aucun! Important
}
– Oui. Et _ fixe NAV #
– conversion webkit: aucune! Important
– transition MOZ: aucune! Important
Transition: aucune! Important
}
}
Remarque: Assurez – vous de supprimer tout CSS précédemment conflictuel de cet article. C’est tout. Inspection