Basculer votre logo sur un en-tête fixe dans Divi

C'est toujours une bonne idée de créer différentes versions de votre logo avec différentes couleurs et tailles. Par exemple, vous devriez probablement avoir une version sombre et claire de votre logo afin qu'il apparaisse bien sur différentes couleurs d'arrière-plan. Et avoir une version plus petite (moins verticale et plus horizontale) du logo pour les zones exiguës de votre site Web. L'un des meilleurs endroits pour utiliser une version différente de votre logo est sur votre en-tête fixe (ou collant).

Dans de nombreux cas, votre en-tête fixe aura besoin d'un style différent de celui de votre en-tête principal. Si vous conservez le même logo, vous êtes limité dans la façon de styliser votre en-tête fixe. C'est là qu'avoir un logo personnalisé est utile. Avec un logo séparé spécialement personnalisé pour l'en-tête fixe, vous pouvez le styliser comme vous le souhaitez. Cela vous donne plus de contrôle sur la conception de votre site.

Dans cet article, je vais vous montrer comment :

1. Changez votre logo pour un autre lorsque votre en-tête fixe est actif. (Cela peut être fait avec une seule ligne de CSS)
2. Inversez la couleur de votre logo sur votre en-tête fixe.
3. Ajoutez un effet de transition sympa lorsque vous changez votre logo sur l'en-tête fixe.
4. Basculez et déplacez votre logo d'en-tête centré sur la disposition par défaut (alignée à gauche) sur votre en-tête fixe.

Commençons.

Aperçu

Voici un petit aperçu de ce que nous allons accomplir dans ce tutoriel.

Voici à quoi ressemble un simple changement de logo.

Voici le logo switch avec un effet de transition.

Voici le logo changeant de position par rapport au style d'en-tête centré.

La mise en place

Avant de faire quoi que ce soit d'autre, assurez-vous d'avoir effectué les opérations suivantes :

1. Installez la dernière version de Divi.
2. Implémentez un thème Divi Child actif. Si vous avez besoin d'aide pour configurer un thème enfant, cela est couvert dans cet article. Si vous avez besoin d'aide supplémentaire. Veuillez contacter notre équipe d'assistance.
3. Créez deux versions de votre logo au format 200 × 131 et ajoutez-les à votre médiathèque WordPress. Un logo sera utilisé pour l'en-tête principal et un autre pour votre en-tête fixe. Si vous le pouvez, rendez la version d'en-tête fixe du logo plus horizontale afin qu'elle ne soit pas écrasée verticalement sur l'en-tête fixe plus petit. Voici un exemple de mon logo d'en-tête principal que j'utilise. Voici un exemple de mon logo d'en-tête fixe. Remarquez que j'ai recadré le texte afin de créer un logo plus simple et plus horizontal qui s'intègre bien sur un en-tête avec moins de hauteur. Il est peu probable que quiconque puisse lire ce texte de toute façon et la marque est toujours représentée.

   

4. Configurez votre menu principal avec des éléments de menu.

Une fois que vous avez terminé ces étapes, vous êtes prêt à commencer.

Basculer votre logo sur un en-tête fixe dans Divi

Abonnez-vous à notre chaîne Youtube

Changer le logo de votre en-tête fixe à l'aide de CSS

Avant de passer à notre CSS personnalisé, configurons nos paramètres de menu dans le personnalisateur de thème. Depuis le backend de votre site WordPress, accédez à Personnalisateur de thème > En-tête et navigation > Format d'en-tête et assurez-vous que le style d'en-tête par défaut est sélectionné.

Revenez ensuite aux paramètres d'en-tête et de navigation dans le personnalisateur de thème. Sélectionnez la barre de menus principale et mettez à jour les éléments suivants :

Hauteur du menu : 105
Hauteur maximale du logo : 80
Taille du texte : 20

Revenez maintenant à En-tête et navigation. Sélectionnez Paramètres de navigation fixes et mettez à jour les éléments suivants :

Hauteur du menu fixe : 60
Taille du texte : 20

Vous pouvez ajouter le reste de vos paramètres pour l'adapter à la conception de votre site. La hauteur des menus et des logos devra peut-être être ajustée en fonction de vos besoins. Cependant, je vous suggère de conserver ces paramètres si vous souhaitez ajouter l'effet de transition afin que le dimensionnement soit précis. Vous pouvez toujours revenir et le changer plus tard.

Insérer un extrait CSS pour basculer le logo sur l'en-tête fixe

L'un des moyens les plus simples de changer l'image de votre logo avec une autre sur l'en-tête fixe est d'utiliser la propriété CSS « content ». Si vous êtes familier avec CSS, c'est normalement ce qui est utilisé lors de l'ajout de contenu à un pseudo-élément :before ou :after. Dans ce cas, nous allons l'utiliser pour insérer un nouveau contenu (votre image de logo) pour remplacer l'image de logo actuelle.

Pour ce faire, allez dans Personnalisateur de thème > CSS supplémentaire et insérez le CSS suivant.

/*********************************
change logo for fixed header (quick and easy way)
**********************************/
.et-fixed-header #logo {
content: url(INSERT NEW LOGO IMAGE URL);
}

Remplacez maintenant le texte qui dit "INSÉRER UNE NOUVELLE IMAGE DU LOGO" par l'image de votre logo.

Pour obtenir l'URL, accédez à votre médiathèque à partir du tableau de bord WordPress et cliquez sur l'image que vous souhaitez ajouter. Vous pouvez trouver l'URL en haut à droite de l'écran qui apparaît.

C'est ça. Cette solution simple remplacera votre logo par un nouveau uniquement lorsque l'en-tête fixe est actif lorsque vous faites défiler la page. Le logo par défaut reviendra lorsque vous revenez tout en haut de la page.

Inverser la couleur de votre logo

Si vous cherchez uniquement à ajouter une version sombre ou claire du même logo sur l'en-tête fixe, vous aimerez peut-être cette solution.

En utilisant la propriété invert CSS, vous pouvez inverser la couleur de votre logo avec quelques lignes de CSS. Par exemple, si votre logo est noir, inverser la couleur du logo le rendra blanc. Et si le logo est blanc, il s'inversera en noir. Pour ajouter ce style à votre logo, accédez à Personnalisateur de thème > CSS supplémentaire et ajoutez le CSS suivant (assurez-vous de supprimer ou de commenter le CSS précédemment ajouté) :

/*********************************
Invert Logo color on fixed header
*********************************/
.et-fixed-header #logo {
-webkit-filter: invert(100%);
filter: invert(100%);
}

Découvrez le résultat. Il s'agit d'un logo noir inversé en une version blanche.

Ajout d'un effet de transition lors du basculement de votre logo sur l'en-tête fixe

Vous vous demandez probablement pourquoi je vais couvrir un autre moyen (plus robuste) de basculer votre logo sur un en-tête fixe. La raison principale est que nous pouvons ajouter un effet de transition sympa au logo lorsqu'il « passe » vers l'en-tête fixe. Pour ce faire, nous avons besoin des deux images de logo côte à côte pour le style.

Ajout de votre nouveau logo au fichier Header.php

Pour ajouter une autre image de logo à votre en-tête, nous devons l'ajouter au fichier header.php. À l'aide d'un client FTP (comme FileZilla), allez à la racine de vos fichiers de thème Divi et faites une copie du fichier header.php.

Collez la copie du fichier header.php à la racine de votre dossier de thème enfant.

Ensuite, à l'aide de votre éditeur de texte préféré, ouvrez le fichier header.php. Localisez le code html du lien qui contient l'image du logo enveloppée dans le div avec la classe "logo_container".

<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />
</a>

Nous allons ajouter un extrait de code similaire pour afficher une autre image dans votre en-tête. Copiez et collez le code suivant directement en dessous.

<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="INSERT NEW LOGO IMAGE URL" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" class="second-logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />
</a>

Notez qu'il s'agit d'une copie mise à jour du code d'origine au-dessus avec deux différences. Tout d'abord, il a une nouvelle URL de source d'image que vous devrez ajouter. Et deuxièmement, c'est une classe appelée "second-logo".

Depuis votre tableau de bord WordPress, accédez à votre médiathèque et obtenez l'URL de la nouvelle image de logo que vous souhaitez ajouter.

Revenez ensuite à votre fichier header.php. Recherchez l'extrait de code que vous venez de créer et remplacez le texte qui lit "INSÉRER LA NOUVELLE URL DE L'IMAGE DU LOGO ICI" par l'URL de l'image réelle.

Enregistrez votre fichier header.php.

Vous avez maintenant deux logos qui s'afficheront côte à côte sur votre site. Il y a de fortes chances que vous ne vouliez pas le laisser comme ça, alors ajoutons le CSS personnalisé nécessaire pour créer notre effet de transition.

Ajout d'une transition cool lorsque le logo s'allume sur votre en-tête fixe

Accédez à Personnalisateur de thème > CSS supplémentaire et supprimez (ou commentez) le code de la section précédente de cet article (le cas échéant). Ajoutez ensuite le CSS personnalisé suivant :

@media all and (min-width: 980px){
/*********************************
show, hide, and transition logos for primary and fixed nav;
must have second logo in header.php file for this to work
**********************************/
#logo {
opacity:1;
display:inherit;
margin: 0 0 0 0;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
#logo.second-logo {
opacity:0;
margin: 0 0 -200px -130px;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.et-fixed-header #logo {
opacity: 0;
margin: -200px 0px 0 0px;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;

}
.et-fixed-header #logo.second-logo {
opacity:1;
margin: 0 0 0 -90px !important;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}

/*********************************
hides overflow on header container so logo doesn't show outsite header on transition
*********************************/
#main-header {
overflow: hidden;
}
}

J'ai commenté le code CSS afin de vous faire savoir ce que le code fait. Bref le CSS diminue et augmente l'opacité de chacun des logos tout en les déplaçant en dehors de l'entête. Ainsi, vous avez un effet de transition assez cool pour votre logo lorsque vous accédez à votre en-tête fixe.

Modification de l'emplacement de votre logo d'en-tête centré vers la gauche pour votre en-tête fixe

Si vous aimez le style d'en-tête centré pour afficher votre en-tête, vous voudrez peut-être vérifier l'emplacement de ce logo sur votre en-tête fixe. Pour moi, je préfère avoir le style d'en-tête par défaut (avec le logo aligné à gauche) sur mon en-tête fixe. La raison principale est que le fait d'avoir le logo en haut de ma navigation a tendance à rendre l'en-tête fixe un peu trop haut lors du défilement pour afficher une page.

Pour passer d'un logo centré à un logo aligné à gauche, vous pouvez ajouter le CSS personnalisé suivant dans la zone CSS supplémentaire du Personnalisateur de thème. Ajoutez d'abord le code pour changer le logo de manière simple et rapide :

/*********************************
change logo for fixed header (quick and easy way)
**********************************/
.et-fixed-header #logo {
content: url(INSERT NEW LOGO IMAGE URL HERE);
}

N'oubliez pas d'ajouter l'URL de votre image de logo.

Ajoutez ensuite les éléments suivants pour ajuster l'emplacement du logo :

@media all and (min-width: 980px){
/*********************************
change centered logo on centered header style to default layout when fixed header is active
*********************************/
.et_header_style_centered header#main-header.et-fixed-header .logo_container {
float: left;
width: 20%;
}

.et_header_style_centered #main-header.et-fixed-header div#et-top-navigation {
width: 80%;
float: right;
height: 70px;
line-height: 70px;
text-align: right;
}
.et-fixed-header #top-menu-nav {
float: none!important;
}

.et_fixed_nav #et-top-navigation {
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
}
}

Remarque : assurez-vous de retirer tout CSS précédent de ce message qui serait en conflit.

C'est ça. Découvrez le résultat.

En clôture

Il est difficile de ne pas être fier d'un bon logo. Alors, ne vous contentez pas d'une petite version inéligible ou, pire encore, de cacher votre logo sur votre entête fixe. Remplacez-le par une version personnalisée avec une transition en douceur que vos clients apprécieront.

À venir

Par défaut, Divi n'inclut pas d'en-tête fixe sur mobile. Mais en ajouter un est vraiment simple. Dans mon prochain article, je vais vous montrer comment ajouter un en-tête fixe personnalisé avec un logo différent sur mobile. Voici un petit aperçu.

Je l'attends avec impatience.

N'oubliez pas de poster vos commentaires ci-dessous. Si vous rencontrez des problèmes liés à la configuration et à la modification de vos fichiers de thème enfant, veuillez contacter notre équipe d'assistance.

À votre santé.