Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 901.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits.

Souhaitez vous ajouter un logo réactif à votre module Fullwidth Menu de Divi afin qu’il s’adapte à la vue sur mobile ?

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 tutoriel, nous allons vous montrer comment ajouter un logo réactif à votre module Fullwidth Menu à l’aide des options responsives 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.

Commençons !

Aperçu

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

Divi Responsive Logo Full Width Menu Conception finale
Logo réactif Menu pleine largeur Mobile

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 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 Fullwidth Header dans Divi

Créer le module Fullwidth Header

Lire aussi : Divi : Comment afficher en plein écran le module Fullwidth Header

Ajouter une section pleine largeur

Étant donné que le menu d’origine est construit avec un module de menu standard, nous devrons modifier la mise en page pour ajouter un module Fullwidth Header.

Tout d’abord, ajoutez une section pleine largeur (Fullwidth) à l’en-tête global sous le menu existant.

Divi Responsive Logo Menu Pleine Largeur Ajouter une section Pleine Largeur

Dans les paramètres de la section pleine largeur, accédez à Advanced, puis à Scroll Effects.

  • Sticky Position : Stick to Top

Ensuite, ajoutez la couleur d’arrière-plan.

  • Background : #f5f0eb
Divi Responsive Logo Pleine Largeur Menu Section Arrière-plan

Ajoutez une couleur différente pour l’arrière-plan à l’état sticky.

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer Facilement et Gratuitement n'importe quel design de site Web ou blog avec un look professionnel. Arrêtez de payer cher pour un site internet que pouvez faire vous-même.

  • Background (Sticky) : #ffffff
Divi Responsive Logo Pleine Largeur Menu Sticky Background

Ajouter un module Fullwidth Header

Ajoutons maintenant le module Fullwidth Header.

Divi Responsive Logo Menu Pleine Largeur Ajouter un module de menu

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

Divi Responsive Logo Menu Pleine Largeur Supprimer 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.

Consulter également : Divi : Comment changer le dégradé d’un arrière-plan au survol

Ouvrez les paramètres du menu d’origine, puis faites un clic droit sur Menu Text et sélectionnez Copy Menu Text Styles.

Une fois copié, cliquez sur les trois points du module Fullwidth Header, puis sélectionnez Past Menu Text Styles.

Maintenant, nous allons répéter les mêmes étapes avec les paramètres du menu déroulant.

Répétez l’opération une fois de plus pour les icônes.

Divi Responsive Logo Full Width Menu Copier Coller Styles d’icônes

Définissez l’alignement du texte à droite.

  • Text Alignment : droite
Divi Responsive Logo Alignement du texte du menu pleine largeur

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

  • Logo Max Height : 50px
Divi Responsive Logo Full Width Menu Logo Max Height

Voulez-vous vendre vos produits sur internet ?

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress et créez facilement votre boutique en ligne. Parfait pour les débutants.

Ajoutez le CSS suivant à la section Menu Link sous Custom CSS.

padding-top: 0px;
padding-bottom: 5px;
padding-left: 0.3em;
padding-right: 1.3em;
Divi Responsive Logo Full Width Menu CSS personnalisé

Enfin, réglez le rembourrage supérieur et inférieur.

  • Padding-Top: 10px
  • Padding-Bottom: 10px
Divi Responsive Logo Menu Pleine Largeur Ajouter un rembourrage

Supprimez maintenant la section de menu d’origine.

Divi Responsive Logo Pleine Largeur Menu Supprimer Section

Ajouter un logo réactif

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

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

Divi Responsive Logo Menu Pleine Largeur Ajouter un logo

Sélectionnez l’icône du mode mobile pour utiliser les options responsives, puis remplacez le logo mobile par votre logo réactif.

Divi Responsive Logo Full Width Menu Télécharger Responsive Logo

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 High School 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 Use Divi Builder. Étant donné que nous avons importé la disposition d’en-tête et de pied de page en tant qu’en-tête et pied de page globaux, utilisez la mise en page par défaut pour cette page.

Nous allons utiliser une mise en page prédéfinie de la bibliothèque Divi pour cet exemple, alors sélectionnez Browse Layouts.

Divi Responsive Logo Menu Pleine Largeur Parcourir les mises en page

Recherchez et sélectionnez la mise en page High School Home Page.

Sélectionnez Use This Layout pour ajouter la mise en page à votre page.

Divi Responsive Logo Full Width Menu Utiliser la mise en page

Résultat final

Jetons maintenant un coup d’œil à notre conception finale.

ajouter un logo responsif à votre module Fullwidth Menu de Divi
ajouter un logo responsif à votre module Fullwidth Menu de Divi

Télécharger DIVI maintenant !!!

Conclusion

Avoir un site Web adapté aux mobiles et responsive est plus important que jamais. Et grâce aux options responsives intégrées de Divi, en construire un est plus facile que jamais!

Avec un logo réactif, votre identité de marque sera toujours claire, quelle que soit la taille de l’écran.

Nous espérons que ce tutoriel vous inspirera pour vos prochains projets Divi. Si vous avez un quelconque souci ou des suggestions, retrouvons nous dans la section commentaires pour en discuter.

Vous pourrez aussi consulter nos ressources, si vous avez besoin de plus d’éléments pour mener à bien vos projets de création de sites internet, en consultant notre guide sur la création de blog WordPress ou celui sur Divi : le meilleur thème WordPress de tous les temps.

Mais en attendant, partagez cet article sur vos différents réseaux sociaux.

%d blogueurs aiment cette page :