Comment ajouter un logo réactif à votre module de menu pleine largeur dans Divi

Saviez-vous que plus de 50 % du trafic Internet provient d'appareils mobiles ? Cela signifie que la version mobile de votre site Web est extrêmement importante et peut même être la principale façon dont quelqu'un visitera votre page. S'assurer que votre site Web est réactif et adapté aux mobiles est une étape essentielle dans la conception d'un site Web. Dans ce didacticiel, nous allons vous montrer comment ajouter un logo réactif à votre module de menu pleine largeur à l'aide des options réactives intégrées de Divi. Cela vous permettra d'ajouter un logo plus grand ou plus complexe qui apparaîtra sur des écrans plus grands et un logo plus petit ou plus simple qui apparaîtra sur des écrans plus petits.

Plongeons-nous !

Abonnez-vous à notre chaîne Youtube

Aperçu

Voici un aperçu de ce que nous allons concevoir. La version de bureau du site Web aura un logo étendu avec du texte supplémentaire, et la version mobile du logo n'aura que la marque de logo de base.

Pourquoi avez-vous besoin d'un logo réactif

Avant de commencer le didacticiel, voyons pourquoi vous pourriez avoir besoin d'un logo réactif sur votre site Web.

Tout d'abord, qu'est-ce qu'un logo responsive ? Un logo réactif est une variante de votre logo qui peut être plus petit, plus simple, abrégé ou réorganisé pour être plus visible et lisible à des tailles plus petites. Si votre logo comporte trop d'éléments détaillés, ils risquent de ne pas s'afficher correctement dans une taille plus petite. Les petites tailles de police et la typographie supplémentaire dans un logo réactif peuvent également être difficiles à lire sur un petit écran. En mettant en place un logo réactif sur votre site Web adapté à la taille de l'écran de l'utilisateur, vous pouvez vous assurer que l'identité de votre marque est clairement représentée, quoi qu'il arrive. Pour de superbes exemples de logos réactifs, jetez un œil à ce site Web !

Ce dont vous avez besoin pour commencer

Tout d'abord, installez et activez le thème Divi et assurez-vous d'avoir la dernière version de Divi sur votre site Web. Ensuite, assurez-vous d'avoir au moins deux versions de votre logo - une pour la vue de bureau de votre site et une pour la vue mobile. Enfin, téléchargez le modèle d'en-tête et de pied de page pour le pack de mise en page du lycée de Divi.

Maintenant, vous êtes prêt à commencer !

Comment ajouter un logo réactif à votre module de menu pleine largeur dans Divi

Importer la disposition de l'en-tête et du pied de page

Accédez au générateur de thèmes à partir du menu Divi dans la barre latérale. Importez la mise en page de l'en-tête et du pied de page du lycée en sélectionnant l'icône de portabilité. Sélectionnez l'onglet Importer et choisissez le fichier de mise en page. Sélectionnez ensuite Importer des modèles Divi Theme Builder.

Nous modifierons l'en-tête et ajouterons notre logo réactif dans le générateur de thème. Cliquez sur l'icône en forme de crayon pour modifier l'en-tête.

Créer le module de menu pleine largeur

Ajouter une section pleine largeur

Étant donné que le menu d'origine est construit avec un module de menu standard, nous devrons modifier la disposition pour ajouter un module de menu pleine largeur. Tout d'abord, ajoutez une section pleine largeur à l'en-tête global sous le menu existant.

Dans les paramètres de la section pleine largeur, accédez à Avancé, puis à Effets de défilement.

• Position collante : Coller vers le haut

Ensuite, ajoutez la couleur de fond.

• Couleur de fond : #f5f0eb

Ajoutez une couleur différente pour le fond collant.

• Couleur de fond collant : #ffffff

Ajouter un module de menu pleine largeur

Ajoutons maintenant le module de menu pleine largeur.

Ouvrez les paramètres du module et supprimez l'arrière-plan.

Pour reproduire facilement l'apparence du menu d'origine, nous pouvons utiliser la fonction de copie des styles pour copier certains des paramètres personnalisés. Ouvrez les paramètres du menu d'origine, puis cliquez avec le bouton droit sur Styles de texte du menu et sélectionnez Copier les styles de texte du menu.

Une fois copié, cliquez sur les trois points du module de menu pleine largeur, puis sélectionnez Coller les styles de texte du menu.

Nous allons maintenant répéter les mêmes étapes avec les paramètres du menu déroulant. Ouvrez les paramètres du menu d'origine, puis cliquez avec le bouton droit sur Styles de menu déroulant et sélectionnez Copier les styles de menu déroulant. Cliquez sur les trois points du module de menu pleine largeur, puis sélectionnez Coller les styles de menu déroulant.

Répétez une fois de plus pour les styles d'icônes. Ouvrez les paramètres du menu d'origine, puis cliquez avec le bouton droit sur Styles d'icônes et sélectionnez Copier les styles d'icônes. Cliquez sur les trois points du module de menu pleine largeur, puis sélectionnez Coller les styles d'icônes.

Définissez l'alignement du texte à droite.

• Alignement du texte : à droite

Définissez la hauteur maximale du logo sous Design, puis Dimensionnement.

• Hauteur maximale du logo : 50 pixels

Ajoutez le CSS suivant à la section Lien de menu sous CSS personnalisé.

padding-top: 0px;
padding-bottom: 5px;
padding-left: 0.3em;
padding-right: 1.3em;

Enfin, définissez le rembourrage supérieur et inférieur.

• Rembourrage-Top : 10px
• Rembourrage en bas : 10px

Supprimez maintenant la section de menu d'origine.

Ajouter un logo réactif

Nous allons maintenant ajouter le logo responsive. Heureusement, Divi rend cela facile avec les options réactives intégrées.

Sous Général, ouvrez les paramètres du logo et téléchargez la version de bureau de votre logo.

Sélectionnez l'icône du téléphone pour utiliser les options réactives, puis remplacez le logo mobile par votre logo réactif.

Créer une nouvelle page avec une mise en page prédéfinie

Pour voir le menu pleine largeur avec le logo réactif en action, créons une nouvelle page avec une mise en page prédéfinie à partir de la bibliothèque Divi. Pour cette conception, nous utiliserons la page d'accueil du lycée du pack de mise en page du lycée pour faire correspondre l'en-tête et le pied de page.

Ajoutez une nouvelle page à votre site Web et donnez-lui un titre, puis sélectionnez l'option Utiliser Divi Builder. Étant donné que nous avons importé la disposition de l'en-tête et du pied de page en tant qu'en-tête et pied de page globaux, utilisez la disposition par défaut pour cette page.

Nous utiliserons une mise en page prédéfinie de la bibliothèque Divi pour cet exemple, alors sélectionnez Parcourir les mises en page.

Recherchez et sélectionnez la mise en page de la page d'accueil du lycée.

Sélectionnez Utiliser cette mise en page pour ajouter la mise en page à votre page.

Résultat final

Voyons maintenant notre conception finale.

Dernières pensées

Avoir un site Web adapté aux mobiles et réactif est plus important que jamais. Et grâce aux options réactives intégrées de Divi, en créer un est plus facile que jamais ! Avec un logo réactif, l'identité de votre marque sera toujours claire, quelle que soit la taille de l'écran. Si vous souhaitez en savoir plus sur les options réactives de Divi, consultez ce tutoriel sur le contenu de témoignage réactif. Comment avez-vous mis en place des conceptions réactives sur votre site Web ? Nous aimerions entendre vos pensées dans les commentaires!