Pourquoi un site Web localisé est un atout majeur en Guadeloupe : Un guide complet sur la localisation du contenu et le SEO

Pourquoi un site Web localisé est un atout majeur en Guadeloupe : Un guide complet sur la localisation du contenu et le SEO

Optimisez pour le local, triomphez dans le global : Le pouvoir du SEO localisé

Salut à tous, chers entrepreneurs et propriétaires d’entreprises en Guadeloupe ! 🌴 Vous vous demandez peut-être si un site Web localisé est vraiment nécessaire dans notre monde globalisé. Eh bien, je suis là pour vous dire que la réponse est un grand OUI ! La localisation du contenu et le SEO sont des outils inestimables pour atteindre votre public cible ici, dans notre belle région. Dans cet article, nous allons explorer en profondeur l’évolution du paysage numérique en Guadeloupe et pourquoi il est crucial pour les entreprises locales de suivre cette tendance. Alors, attachez vos ceintures et préparez-vous à transformer votre entreprise !

Entrepreneuse guadeloupéenne devant un écran d'ordinateur

Évolution du paysage numérique en Guadeloupe

 

La Guadeloupe a connu une croissance exponentielle de l’utilisation d’Internet ces dernières années. Selon les dernières statistiques, près de 80% des résidents sont maintenant en ligne. Ce n’est pas seulement une question de commodité, mais aussi une nécessité pour les entreprises locales de se positionner en ligne.

 

Pourquoi c’est important ?

Si vous n’êtes pas en ligne, vous manquez une énorme opportunité de toucher un public plus large. Et je ne parle pas seulement de la jeunesse connectée ; même les générations plus âgées sont de plus en plus en ligne.

 

Exemple :

Prenons l’exemple de « La Belle Créole », une entreprise locale qui vend des produits artisanaux. Avant d’avoir un site Web, leur clientèle était principalement locale. Après avoir lancé leur site Web, ils ont vu une augmentation de 50% de leurs ventes, y compris des commandes internationales.

Importance de la localisation du contenu

 

Avoir un site Web est bien, mais avoir un site Web qui parle la langue de votre public cible est encore mieux. La localisation va au-delà de la simple traduction ; elle implique de comprendre la culture, les coutumes et les besoins locaux.

 

Comment faire ?

Utilisez des outils de localisation pour adapter votre contenu. Pensez à des choses comme les devises, les unités de mesure et même les expressions locales.

 

Exemple :

Si vous êtes un restaurant en Guadeloupe, au lieu de simplement traduire votre menu, pourquoi ne pas inclure des descriptions de plats qui font appel à la culture locale ? Par exemple, au lieu de « Poulet grillé », utilisez « Poulet boucané à la guadeloupéenne ».

Avantages SEO pour les entreprises locales

 

Un bon SEO peut faire ou défaire votre entreprise en ligne. Pour les entreprises locales en Guadeloupe, c’est encore plus crucial. Un SEO localisé peut vous aider à apparaître dans les recherches locales, augmentant ainsi votre visibilité et votre trafic.

 

Astuces pratiques

Utilisez des mots-clés locaux, créez du contenu pertinent pour votre public et assurez-vous que votre site est mobile-friendly.

 

Exemple :

Imaginons que vous ayez une entreprise de location de voitures en Guadeloupe. En utilisant des mots-clés comme « location de voitures en Guadeloupe » ou « voitures de location à Pointe-à-Pitre », vous augmentez vos chances d’apparaître dans les recherches locales.

Conclusion

 

Alors, voilà, mes amis ! Avoir un site Web localisé pour la Guadeloupe n’est pas seulement une bonne idée, c’est une nécessité dans le monde numérique d’aujourd’hui. Non seulement cela vous aidera à atteindre un public plus large, mais cela augmentera également votre classement dans les moteurs de recherche. N’oubliez pas, le monde numérique est en constante évolution, et pour réussir, vous devez évoluer avec lui. Alors, prenez ce savoir et agissez maintenant pour donner à votre entreprise l’élan qu’elle mérite !

J’espère que cet article vous a été utile et inspirant.

FAQs

Qu'est-ce que la localisation du contenu ?

La localisation du contenu va au-delà de la simple traduction. Il s’agit d’adapter votre contenu pour qu’il résonne avec le public local, en tenant compte de la culture, des coutumes et des besoins spécifiques.

Pourquoi le SEO est-il important pour mon entreprise en Guadeloupe ?

Le SEO, ou optimisation pour les moteurs de recherche, est crucial pour augmenter la visibilité de votre site Web. Un bon SEO vous permettra d’apparaître dans les résultats de recherche locaux, ce qui est particulièrement important pour les entreprises en Guadeloupe cherchant à attirer un public local.

Comment puis-je commencer à localiser mon site Web ?

Commencez par effectuer des recherches sur votre public cible en Guadeloupe. Utilisez des outils de localisation pour adapter votre contenu, y compris la monnaie, les unités de mesure et les expressions locales.

La localisation affecte-t-elle le SEO ?

Absolument ! Un contenu bien localisé est plus susceptible d’être pertinent pour votre public local, ce qui peut améliorer votre classement dans les résultats de recherche locaux.

Dois-je embaucher un expert en SEO local ?

Si le SEO vous semble trop compliqué ou prend trop de temps, il peut être bénéfique d’embaucher un expert en SEO local qui comprend les spécificités du marché guadeloupéen.

L’importance du digital en Guadeloupe : Une transformation numérique incontournable

L’importance du digital en Guadeloupe : Une transformation numérique incontournable

Les Bénéfices Inestimables d’une Présence en Ligne

Hello, la team ! Si vous me suivez depuis un moment, vous savez à quel point je suis passionnée par le pouvoir du digital. Aujourd’hui, je veux vous emmener dans un voyage à travers la magnifique Guadeloupe, une île qui, tout comme nous, est en pleine transformation numérique. Si vous êtes un entrepreneur guadeloupéen, un web designer, ou simplement quelqu’un qui s’intéresse à la digitalisation, cet article est pour vous. Alors, prenez une tasse de votre boisson préférée, installez-vous confortablement, et explorons ensemble cette aventure digitale.

Une femme noire devant son ordinateur sur le sable d'une plage paradisiaque en Guadeloupe

Le voyage numérique de la Guadeloupe:

La Guadeloupe, avec ses plages paradisiaques et sa culture riche, a toujours été un joyau des Caraïbes. Mais ces dernières années, elle a également embrassé le monde numérique. Rappelez-vous des premiers jours d’internet, où tout était nouveau et excitant ? La Guadeloupe a vécu cette transformation, passant d’une présence en ligne minimale à une explosion de sites web, de boutiques en ligne et de médias sociaux.

Pourquoi le digital est-il si crucial pour les entreprises guadeloupéennes ?

Imaginez pouvoir atteindre non seulement les habitants locaux mais aussi la vaste diaspora guadeloupéenne à travers le monde. C’est le pouvoir du digital. Avoir une présence en ligne signifie que votre entreprise est ouverte 24h/24, 7j/7. C’est comme avoir une boutique dans chaque coin du monde. Et avec les outils actuels, comme le SEO local, vous pouvez cibler précisément votre audience, assurant un retour sur investissement maximal.

Les défis et comment les surmonter

Bien sûr, tout voyage a ses défis. La digitalisation n’est pas différente. Que ce soit la barrière technologique, les coûts initiaux ou la simple peur du changement, ces défis peuvent sembler insurmontables. Mais rappelez-vous de cette citation que j’adore : « Les défis sont ce qui rend la vie intéressante ; les surmonter est ce qui lui donne un sens. » Avec les bonnes ressources, comme ce guide sur la digitalisation, et une communauté solide, ces défis peuvent être surmontés.

Conclusion:

 

Chers lecteurs, la digitalisation en Guadeloupe n’est pas seulement une tendance, c’est une révolution. Et comme toute révolution, elle apporte son lot de changements, de défis, mais aussi d’opportunités incroyables. Pour les entrepreneurs guadeloupéens, c’est le moment d’embrasser cette transformation, d’apprendre, de grandir et de prospérer dans ce nouveau monde numérique.

Je vous encourage à prendre des mesures, à vous éduquer et à plonger tête baissée dans cette aventure. Et n’oubliez pas, vous n’êtes pas seul. Rejoignez des communautés, participez à des formations et, surtout, croyez en vous et en votre entreprise.

FAQs

Pourquoi la digitalisation est-elle importante pour les petites entreprises en Guadeloupe ?

Elle permet d’atteindre une audience plus large, d’améliorer la visibilité et d’offrir des services 24h/24.

Quels sont les premiers pas vers la digitalisation ?

Commencez par créer un site web professionnel, optimisez-le pour le SEO, et soyez actif sur les médias sociaux.

Comment le SEO local peut-il aider mon entreprise en Guadeloupe ?

Il cible spécifiquement les recherches locales, assurant que les clients locaux trouvent votre entreprise en premier.

Y a-t-il des subventions ou des aides pour la digitalisation en Guadeloupe ?

Oui, plusieurs programmes gouvernementaux et locaux offrent des aides financières et des formations pour aider les entreprises à se digitaliser.

Dois-je embaucher un expert en digital ou puis-je le faire moi-même ?

Bien que vous puissiez commencer vous-même, embaucher un expert peut accélérer le processus et assurer que tout est optimisé.

Web Design : Comment Créer un Site Web Responsive

Web Design : Comment Créer un Site Web Responsive

Guide Pratique : Transformer Votre Site Web en Expérience Responsive Inoubliable

Introduction

Salut, mes chers créateurs en ligne ! C’est votre ami Dr Page, et aujourd’hui, nous allons plonger dans le monde merveilleux du design web responsive. Vous vous demandez peut-être, « Qu’est-ce que c’est et pourquoi est-ce si important ? » Eh bien, dans ce monde en constante évolution, où les smartphones sont devenus nos compagnons de tous les jours, avoir un site web qui s’adapte à tous les appareils est essentiel. Non seulement cela améliore l’expérience utilisateur, mais cela peut aussi booster votre référencement ! Alors, enfilez vos lunettes de geek et préparez-vous à devenir un maître du design web responsive.

Best website - Dr Page Guadeloupe

Les Principes de Base du Design Web Responsive

 

Qu’est-ce que le Design Web Responsive ?

 

Le design web responsive, mes amis, c’est l’art de créer des sites web qui s’adaptent à la taille de l’écran de l’utilisateur. Cela signifie que votre site aura fière allure, que vous le consultiez sur un ordinateur de bureau, un smartphone ou une tablette. C’est un peu comme avoir un caméléon pour animal de compagnie qui change de couleur en fonction de son environnement. Sauf que dans ce cas, votre site web est le caméléon, et l’environnement est l’appareil de l’utilisateur. Vous pouvez en savoir plus sur ce concept dans ce guide Google sur le design web responsive.

 

Pourquoi est-ce Important ?

 

Imaginez ça : vous avez créé un site web incroyable, mais quand les gens le visitent sur leur téléphone, tout est déformé et difficile à naviguer. Vous pouvez dire adieu à ces visiteurs ! Un site web responsive, en revanche, est accueillant et accessible, peu importe l’appareil. C’est comme si vous invitiez vos visiteurs à entrer dans votre maison. Vous voulez qu’ils se sentent à l’aise, n’est-ce pas ? Eh bien, c’est la même chose pour votre site web.

Responsive website - Dr Page Guadeloupe

Comment Rendre un Site Web Responsive

 

Maintenant que nous avons couvert les bases, passons à la partie amusante : comment rendre un site web responsive. Prêt à devenir un maître du design web responsive ? Allons-y !

 

Utiliser un Layout Flexible

 

Au lieu de définir des largeurs fixes, utilisez des pourcentages. Cela permet à votre contenu de s’adapter à l’espace disponible. C’est comme si vous construisiez une maison avec des murs qui peuvent se déplacer en fonction du nombre de personnes à l’intérieur. Plutôt cool, non ?

 

Images Fluides

Assurez-vous que vos images se redimensionnent en fonction de la taille de l’écran. Cela peut être fait en utilisant des unités relatives dans votre CSS. C’est comme si vous aviez une peinture qui change de taille en fonction du mur sur lequel elle est accrochée. C’est un peu magique, non ?

 

Media Queries

 

Les media queries permettent d’appliquer différents styles en fonction de la taille de l’écran. C’est un outil puissant pour rendre votre site responsive. C’est comme si vous aviez un chef d’orchestre qui dirige les musiciens pour qu’ils jouent différemment en fonction de la salle de concert. C’est assez impressionnant, non ?

Media Queries

Conseils et Astuces

 

1 – Gardez la simplicité en tête. Comme le dit le vieil adage, « la simplicité est la sophistication ultime ». Ne compliquez pas les choses inutilement.

2 – Pensez à la facilité de navigation sur mobile. Vos utilisateurs doivent pouvoir naviguer facilement sur votre site avec un seul pouce. Oui, vous avez bien entendu, un seul pouce !

3 – Testez votre site sur différents appareils. N’oubliez pas, votre site doit être comme un caméléon, capable de s’adapter à tous les environnements.

4 – Utilisez des outils de test de la réactivité d’un site web comme celui-ci outil de test de Google. Ils peuvent vous aider à identifier les problèmes et à les résoudre.

Conclusion

 

Mes amis, le design web responsive n’est pas seulement une tendance, c’est une nécessité. En suivant les conseils de cet article, vous serez sur la bonne voie pour créer un site web qui non seulement aura fière allure, mais qui sera aussi fonctionnel sur tous les appareils. N’oubliez pas que votre site web est souvent la première impression que les gens ont de votre entreprise, alors faites-en une bonne ! Restez créatifs et continuez à apprendre. Et n’oubliez pas, si vous avez besoin d’inspiration, consultez ces exemples de sites web responsive. À la prochaine !

FAQs

Qu'est-ce qu'un design web responsive ?

C’est une approche du design web qui fait en sorte que votre site s’adapte à la taille de l’écran de l’utilisateur. Cela signifie que votre site aura fière allure, que vous le consultiez sur un ordinateur de bureau, un smartphone ou une tablette.

Pourquoi le design web responsive est-il important ?

Avec l’augmentation de l’utilisation des smartphones pour naviguer sur le web, avoir un site web responsive est devenu essentiel. Un site web responsive améliore l’expérience utilisateur et peut également améliorer votre référencement.

Comment puis-je rendre mon site web responsive ?

Il y a plusieurs techniques que vous pouvez utiliser, comme l’utilisation d’un layout flexible, d’images fluides et de media queries. Vous pouvez également utiliser des frameworks CSS comme Bootstrap qui sont conçus pour être responsive.

Quels sont les avantages d'un design web responsive ?

Un design web responsive peut améliorer l’expérience utilisateur, augmenter le temps passé sur votre site, réduire le taux de rebond et améliorer votre référencement.

Mon site web doit-il être responsive ?

Oui, absolument. Avec l’augmentation de l’utilisation des smartphones et des tablettes pour naviguer sur le web, ne pas avoir un site web responsive pourrait vous faire perdre une grande partie de votre audience.

Liens utiles

 

Vidéos YouTube – le responsive sur Divi Builder

Astuces pour votre responsive

Divi 100% responsive

Personnaliser le badge « Promo » sur WooCommerce pour booster vos ventes

Personnaliser le badge « Promo » sur WooCommerce pour booster vos ventes

Booster vos ventes avec un badge promotionnel percutant sur WooCommerce

 

Le badge « Promo » sur WooCommerce peut paraître basique avec juste le mot « Promo ! ». En personnalisant ce texte, vous pouvez créer un sentiment d’urgence et inciter vos visiteurs à acheter.

Découvrez dans ce tutoriel comment changer facilement le badge « Promo » pour des messages accrocheurs :

    • Dernières pièces
    • Promotion éclair
    • À saisir vite !
    • X % de réduction

En quelques minutes, accédez au fichier functions.php, ajoutez un bout de code PHP et personnalisez le texte du badge.

Un badge percutant générera plus de ventes. Ne ratez pas cette opportunité de booster vos revenus !

Les promos limitées créent un sentiment d’urgence. Écoulez vos stocks et fidélisez vos clients avec des offres spéciales.

Suivez ce tutoriel étape par étape pour changer le badge « Promo » sur WooCommerce et doper vos ventes.

Dans ce tutoriel, vous trouverez comment :

      • Changer le badge « Promo ! » avec un autre texte
      • Changer le badge « Promo ! » avec un pourcentage dynamique

Personnaliser le badge promo sur WooCommerce

Le tuto en vidéo

Changer le badge « Promo » avec un autre texte simple

Étape 1 : Ajouter un module « Produits Woo »

Si ce n’est pas déjà fait, ajoutez un module « Produits Woo » à une page

Personnaliser le badge "Promotion" sur WooCommerce

Étape 2 : Modifiez le fichier function.php

Accédez à la console Apparence > Editeur de thème et localisez le fichier functions.php de votre thème enfant.

Ajoutez le code suivant avant la fermeture PHP ?>

add_filter('woocommerce_sale_flash', 'ds_change_sale_text');

function ds_change_sale_text() {
   return '<span class="onsale">Ventes Flash</span>';
}

Une fois ces étapes réalisées, vous verrez apparaître votre texte personnalisé « Ventes flash » à la place du texte par défaut « Promo ! » sur le front-end de votre site. C’est un moyen simple et rapide de créer un badge promotionnel percutant et d’apporter votre touche personnelle à votre boutique en ligne.

Personnaliser le badge "Promotion" sur WooCommerce

Choisissez le texte de votre choix pour le badge promotionnel

Le code fourni vous permet de remplacer le texte du badge « Promo ! » par n’importe quel texte de votre choix. Vous avez ainsi la liberté de créer un message promotionnel percutant, en adéquation avec votre image de marque.

Pour cela, il vous suffit de modifier le texte « Ventes flash » présent dans le code par le texte souhaité. Vous pouvez opter pour des formulations du type :

– Coup de cœur

– Offre à saisir vite

– Dernières pièces

Cette simple manipulation vous permettra d’avoir un badge promotionnel accrocheur sur vos produits en réduction, et d’inciter ainsi vos visiteurs à passer à l’achat.

Changer le badge « Promo » avec un pourcentage dynamique

Personnaliser le badge promo sur WooCommerce

Étape 1 : Ajouter vos tarifs réguliers et vos tarifs promo 

Rendez-vous sur votre Dashboard WordPress puis cliquer sur tous les produits. Ensuite renseigner les tarifs réguliers et les tarifs promo pour votre produit ou vos produits.

Afficher un pourcentage dynamique à la place du badge promo WooCommerce

Étape 2 : Ajoutez le code PHP

Dans votre Dashboard, accédez à l’onglet Apparence > Editeur de thème et localisez le fichier functions.php de votre thème enfant.

Ajoutez le code suivant avant la fermeture PHP ?>

/* Remplacer le texte du badge "Promo !" par un pourcentage*/

  add_filter( 'woocommerce_sale_flash', 'ds_replace_sale_text' );
 
function ds_replace_sale_text($text) {
 global $product; 
 $stock = $product->get_stock_status();
 $product_type = $product->get_type();
 $sale_price  = 0;
 $regular_price = 0;
 if($product_type == 'variable'){
  $product_variations = $product->get_available_variations();
  foreach ($product_variations as $kay => $value){
   if($value['display_price'] < $value['display_regular_price']){
    $sale_price = $value['display_price'];
    $regular_price = $value['display_regular_price'];
   }
  }
  if($regular_price > $sale_price && $stock != 'outofstock') {
   $product_sale = intval(((intval($regular_price) - floatval($sale_price)) / floatval($regular_price)) * 100);
   if ($product_sale > 5 ) {
   return '<span class="onsale"> <span class="sale-icon" aria-hidden="true" data-icon="&#xe0da"></span> ' . esc_html($product_sale) . '% de réduction</span>'; /* vous pouvez remplacer le texte ici */
   }
   if ($product_sale <= 5 ) {
       return '<span class="onsale"> <span class="sale-icon" aria-hidden="true" data-icon="&#xe0da"></span>Sale!</span>';
   }
  }else{
   return  '';
  }
 }else{
  $regular_price = get_post_meta( get_the_ID(), '_regular_price', true);
  $sale_price = get_post_meta( get_the_ID(), '_sale_price', true);
  if($regular_price > 5) {
   $product_sale = intval(((floatval($regular_price) - floatval($sale_price)) / floatval($regular_price)) * 100);
   return '<span class="onsale"> <span class="sale-icon" aria-hidden="true" data-icon="&#xe0da"></span> ' . esc_html($product_sale) . '% de réduction</span>'; /* vous pouvez remplacer le texte ici */
  }
  if($regular_price >= 0 && $regular_price <= 5 ) {
   $product_sale = intval(((floatval($regular_price) - floatval($sale_price)) / floatval($regular_price)) * 100);
   return '<span class="onsale"> <span class="sale-icon" aria-hidden="true" data-icon="&#xe0da"></span>Sale!</span>';
  }

  else{
   return '';
  }
 }
}

Après avoir ajouté le code PHP dans le fichier functions.php, n’oubliez pas d’enregistrer vos modifications en cliquant sur « Mettre à jour le fichier ».

Vous avez la possibilité de changer le texte. par exemple :

Remplacer « % de réduction » par « % d’économie » à la ligne 22 et 35 du code CSS

Étape 3 : Ajoutez le code CSS

Dans votre Dashboard, accédez à l’onglet Apparence > Editeur de thème et localisez le fichier style.css de votre thème enfant.

Ajoutez le code suivant

/* Afficher les soldes ! Icône d'insigne */
.sale-icon[data-icon]:before {
    font-family: 'ETmodules';
    content: attr(data-icon);
    speak: none;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

/* Optional styling */

.woocommerce-page ul.products li.product span.onsale, .woocommerce ul.products li.product span.onsale {
  left: 0px!important;
    top: 0px!important; 
    font-size: 15px;
   background: #137118!important;
}

Encore une fois, validez vos changements en cliquant sur « Mettre à jour le fichier ».

Afficher un pourcentage dynamique à la place du badge promo WooCommerce

Et le tour est joué ! Ces quelques lignes de code PHP et CSS suffisent pour remplacer le texte standard de votre badge promotionnel WooCommerce par un pourcentage de réduction dynamique. Votre boutique gagne instantanément en attractivité.

Grâce à ces quelques lignes de PHP et CSS, vous venez de transformer instantanément l’apparence de votre badge promotionnel WooCommerce.

Ce tutoriel vous a montré à quel point il est simple de personnaliser des éléments comme le badge promotionnel en modifiant directement le code. C’est votre première étape vers une customisation avancée.

N’hésitez pas à explorer toutes les options à votre disposition pour créer une boutique au design unique et aux fonctionnalités sur-mesure. Vous pourrez ainsi vous démarquer de la concurrence.

En maîtrisant les bases du code, vous ouvrez un monde de possibilités pour votre boutique WooCommerce. Apportez votre touche personnelle pour offrir la meilleure expérience à vos clients.

Amusez-vous à tester de nouvelles options de personnalisation et à repousser les limites de votre créativité !

.

Refermez automatiquement les sous-menus de votre site Divi sur mobile

Refermez automatiquement les sous-menus de votre site Divi sur mobile

Évitez que les sous-menus restent ouverts et gênent la navigation sur mobile

Cet article explique comment configurer votre site Divi pour que les sous-menus se referment automatiquement lorsque les utilisateurs naviguent sur la version mobile. Cette astuce simple améliore l’expérience utilisateur en évitant que les sous-menus restent ouverts après avoir cliqué dessus. Suivez ce tutoriel étape par étape pour implémenter facilement ce réglage avec seulement quelques lignes de code.

Pourquoi c’est important :

La fermeture automatique des sous-menus sur mobile est importante pour l’expérience utilisateur car elle empêche que de longs menus verticaux restent affichés à l’écran. Cela optimise l’interface pour le mobile en ne gardant visible que le menu principal jusqu’à ce que l’utilisateur sélectionne un sous-menu. Le site est ainsi plus facile à naviguer sur petite taille d’écran. Ce réglage apporte un confort d’utilisation et évite la frustration. En résumé, il s’agit d’un tweak simple mais efficace pour améliorer l’ergonomie de votre site Divi sur mobile.

Refermez automatiquement les sous-menus de votre site Divi sur mobile

Le tuto en vidéo

Réglez vos emplacements de menu – Première étape pour refermer automatiquement les sous-menus Divi sur mobile

Tout d’abord, gérez l’emplacement du menu en procédant comme suit :

  1. Rendez-vous sur votre Dashboard WordPress.
  2. Cliquez sur « Apparence » puis sur « Menus ».
  3. Dans l’onglet « Gérer les emplacements », choisissez « Main Navigation » à la fois pour l’emplacement « Menu principal » et pour l’emplacement « Menu pied de page ». Copier-coller le premier code CSS

Si vous n’avez pas l’option « Main navigation » remplacez là par « Menu principal » et copier-coller le deuxième code CSS

Refermez automatiquement les sous-menus de votre site Divi sur mobile

Ajout du code CSS

  1. Rendez-vous sur le Dashboard WordPress de votre site.
  2. Cliquez sur « Divi » puis sur « Personnaliseur de Thème ».
  3. Dans la section « CSS additionnel », copiez et collez le code CSS suivant :
Refermez automatiquement les sous-menus de votre site Divi sur mobile - Code CSS

Code CSS pour l’option « Main navigation »

 

/**** Cela permet de masquer les éléments du sous-menu sur les téléphones portables ****/
#page-container .mobile_nav li ul.hide {
    display: none !important;
}
/**** Cela permet d'ajuster le positionnement et la transparence de l'arrière-plan de l'élément de menu parent sur les téléphones mobiles. ****/
#page-container .mobile_nav .menu-item-has-children {
    position: relative;
}
#page-container .mobile_nav .menu-item-has-children > a {
    background: transparent;
}
/**** Cette opération permet de styliser l'icône et de la déplacer vers la droite ****/
#page-container .mobile_nav .menu-item-has-children > a + span {
    position: absolute;
    right: 0;
    top: 0;
    padding: 10px 20px;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    z-index: 3;
}
/**** Ici, vous pouvez remplacer les icônes actuelles ****/
#page-container span.menu-closed:before {
    content: "\+";
    display: block;
    color: #000;
    font-size: 16px;
    font-family: ETmodules;
}
#page-container span.menu-closed.menu-open:before {
  content: "\x";
}

Code CSS pour l’option « Menu principal »

 

.et_pb_menu .et_mobile_menu .menu-item-has-children > a,
#main-header .et_mobile_menu .menu-item-has-children > a {
    background-color: transparent;
    position: relative;
}

.et_pb_menu .et_mobile_menu .menu-item-has-children > a:after, #main-header .et_mobile_menu .menu-item-has-children > a:after {
    font-family: 'ETmodules';
    text-align: center;
    speak: none;
    font-weight: 600;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    position: absolute;
    font-size: 18px;
    content: '\4c';
    top: 11px;
    right: 13px;
}

.et_pb_menu .et_mobile_menu .menu-item-has-children.visible > a:after,
#main-header .et_mobile_menu .menu-item-has-children.visible > a:after {
    content: '\4d';
}

.et_pb_menu .et_mobile_menu ul.sub-menu,
#main-header .et_mobile_menu ul.sub-menu,
.et-db #et-boc .et-l .et_pb_menu .et_mobile_menu li ul.sub-menu {
    display: none !important;
    visibility: hidden !important;
    transition: all 1.5s ease-in-out;
}

.et_pb_menu .et_mobile_menu li.visible > ul.sub-menu,
#main-header .et_mobile_menu li.visible > ul.sub-menu,
.et-db #et-boc .et-l #main-header .et_mobile_menu li.visible > ul.sub-menu,
.et-db #et-boc .et-l .et_pb_fullwidth_menu .et_mobile_menu li.visible > ul.sub-menu,
.et-db #et-boc .et-l .et_pb_menu .et_mobile_menu li.visible > ul.sub-menu {
    display: block !important;
    visibility: visible !important;
}

Changer les icônes

Vous pouvez remplacer les icônes (dans l’exemple « + » et « x ») à la ligne 25 et 32.

Ajout du code jQuery

  1. Rendez-vous sur le Dashboard WordPress de votre site.
  2. Cliquez sur « Divi » puis sur « Options du Thème ».
  3. Dans la section « Intégration », allez dans l’onglet « Body » et collez le code jQuery suivant :
Refermez automatiquement les sous-menus de votre site Divi sur mobile - Code JQuéry

Code JQuéry pour l’option « Main navigation »

 

<script>
(function($) { 
    function setup_collapsible_submenus() {
        // mobile menu
        $('.mobile_nav .menu-item-has-children > a').after('<span class="menu-closed"></span>');
        $('.mobile_nav .menu-item-has-children > a').each(function() {
            $(this).next().next('.sub-menu').toggleClass('hide',1000);
        });
        $('.mobile_nav .menu-item-has-children > a + span').on('click', function(event) {
            event.preventDefault();
            $(this).toggleClass('menu-open');
            $(this).next('.sub-menu').toggleClass('hide',1000);
        });
    }
    $(window).load(function() {
        setTimeout(function() {
            setup_collapsible_submenus();
        }, 700);
    });
})(jQuery);
</script>

Code JQuéry pour l’option « Menu principal »

 

<script>
jQuery(document).ready(function($){
    function ds_setup_collapsible_submenus() {
        var $menu = $('.et_mobile_menu'),
        top_level_link = '.et_mobile_menu .menu-item-has-children > a';
        
        $menu.find('a').each(function() {
            $(this).off('click');
            if ( $(this).is(top_level_link) ) {
                $(this).attr('href', '#');
            }

            if ( ! $(this).siblings('.sub-menu').length ) {
                $(this).on('click', function(event) {
                    $(this).parents('.mobile_nav').trigger('click');
                });
            } 
            else {
                $(this).on('click', function(event) {
                    event.preventDefault();
                    $(this).parent().toggleClass('visible');
                });
            }
        });
    }
    setTimeout(function() {
        ds_setup_collapsible_submenus();
    }, 700);
 });
</script>

J’espère que ce tutoriel vous a inspiré à explorer tout le potentiel de customisation des menus sur la version mobile de votre site Divi. N’hésitez pas à personnaliser davantage l’apparence et le comportement du menu pour créer une expérience optimale adaptée aux appareils mobiles de vos visiteurs.