L’avenir des Callbots IA : vers une automatisation totale du service client ?

L’avenir des Callbots IA : vers une automatisation totale du service client ?

L’automatisation du service client est-elle inévitable ?

Les callbots IA, ces assistants conversationnels automatisés, révolutionnent le service client. En 2023, le marché mondial des callbots IA a atteint 1,3 milliard de dollars et devrait croître à un taux de croissance annuel composé (TCAC) de 23,9 % d’ici à 2028. Cette croissance fulgurante est alimentée par les nombreux avantages que les callbots IA offrent aux entreprises, à commencer par une amélioration de la satisfaction client.

n robot métallique avec un visage humain regarde un écran d'ordinateur affichant un schéma de points de lumière bleue, symbolisant l'automatisation IA en Guadeloupe.

I. Avantages potentiels d’une automatisation totale du service client

 

Amélioration de la satisfaction client

Les callbots IA sont disponibles 24h/24 et 7j/7, ce qui permet aux clients d’obtenir de l’aide instantanément, sans avoir à attendre en ligne. De plus, les chatbots peuvent traiter les demandes des clients plus rapidement que les agents humains, ce qui réduit le temps d’attente et augmente la satisfaction client.

Exemple concret : Selon une étude de Forrester Research: [[URL non valide supprimée]]([URL non valide supprimée]), 66 % des clients préfèrent utiliser un chatbot pour obtenir de l’aide plutôt que d’appeler un service client.

Réduction des coûts

L’automatisation des tâches répétitives permet aux entreprises de réduire les coûts du service client. Les chatbots peuvent gérer les demandes simples, telles que les questions sur les produits ou les services, les demandes de statut de commande ou les réinitialisations de mot de passe, ce qui libère les agents humains pour se concentrer sur les tâches plus complexes.

Exemple concret : Selon McKinsey & Company: https://www.mckinsey.com/, l’automatisation du service client peut réduire les coûts de 30 à 40 %.

Gain de temps pour les agents humains

En automatisant les tâches répétitives, les callbots permettent aux agents humains de se concentrer sur les tâches plus complexes et à valeur ajoutée, telles que la résolution de problèmes complexes, la gestion des plaintes clients et la fidélisation des clients.

Exemple concret : Selon une étude de Gartner: https://www.gartner.com/en/information-technology/glossary/chatbot, les chatbots peuvent réduire le temps que les agents humains consacrent aux tâches répétitives de 45 %.

Meilleure analyse des données clients

Les callbots IA peuvent collecter et analyser de grandes quantités de données clients, ce qui permet aux entreprises de mieux comprendre les besoins et les attentes de leurs clients. Ces données peuvent ensuite être utilisées pour personnaliser l’expérience client et améliorer l’efficacité du service client.

Exemple concret : Selon Salesforce : https://www.salesforce.com/, les entreprises qui utilisent des chatbots peuvent augmenter leur taux de conversion de 14 %.

Un homme en costume tient un smartphone d'où s'émane une holographie de l'icône "AI" entourée de symboles représentant l'automatisation et la connectivité, illustrant l'intégration de l'IA dans les processus industriels et quotidiens en Guadeloupe.

II. Limites et défis à relever

Incapacité à gérer les situations complexes et émotionnelles

Les callbots IA ne sont pas encore capables de gérer les situations complexes et émotionnelles. Ils peuvent avoir des difficultés à comprendre les demandes des clients formulées de manière ambiguë ou à répondre aux clients mécontents ou frustrés.

Risque de déshumanisation du service client

L’utilisation excessive de callbots IA peut créer un sentiment de déshumanisation du service client. Les clients peuvent avoir l’impression de parler à une machine plutôt qu’à un être humain, ce qui peut nuire à la satisfaction client et à la fidélisation.

Manque de confiance de la part des clients

Certains clients peuvent encore hésiter à utiliser des callbots IA pour obtenir de l’aide. Ils peuvent avoir peur que les chatbots ne soient pas assez intelligents pour comprendre leurs demandes ou qu’ils ne soient pas en mesure de leur fournir les informations dont ils ont besoin.

Difficultés d’adaptation pour les entreprises et les employés

L’implémentation d’une solution de chatbot IA peut être un défi pour les entreprises et les employés. Les entreprises doivent investir dans la technologie et former leurs employés à l’utiliser. Les employés peuvent également être réticents à l’idée de voir leur travail automatisé.

Profil d'un homme d'affaires avec un visuel superposé de circuits électroniques formant un visage de robot, symbolisant la fusion de l'intelligence humaine et de l'automatisation IA en Guadeloupe.

III. Tendances et technologies émergentes

Développement de l’IA conversationnelle et du NLP

L’IA conversationnelle et le NLP (Natural Language Processing) sont des technologies en plein développement qui permettent aux chatbots de mieux comprendre et répondre aux demandes des clients.

Exemple concret : La technologie de traitement du langage naturel de Google

La technologie de traitement du langage naturel de Google, LaMDA, permet aux chatbots IA de tenir des conversations plus fluides et plus naturelles avec les clients. LaMDA peut comprendre les nuances du langage humain, telles que le sarcasme et l’humour, ce qui permet aux chatbots de fournir des réponses plus adaptées et personnalisées.

Apprentissage automatique et analyse des données

L’apprentissage automatique permet aux chatbots IA d’apprendre et de s’améliorer au fil du temps. En analysant les données des conversations entre les chatbots et les clients, les entreprises peuvent identifier les domaines où les chatbots peuvent être améliorés.

Exemple concret : La plateforme Amelia d’IPSoft utilise l’apprentissage automatique pour s’adapter au langage et aux préférences des clients individuels. Cela permet à Amelia de fournir des interactions plus personnalisées et plus efficaces.

Callbots vocaux et chatbots vidéo

Les callbots vocaux permettent aux clients d’interagir avec les chatbots en utilisant la voix, ce qui peut être plus naturel et plus pratique que de taper du texte. Les chatbots vidéo permettent aux clients de voir un avatar du chatbot, ce qui peut créer une interaction plus personnelle.

Exemple concret : Le chatbot vocal Alexa d’Amazon permet aux clients de poser des questions, de contrôler des appareils domestiques intelligents et de faire des achats en utilisant la voix.

n robot métallique avec un visage humain regarde un écran d'ordinateur affichant un schéma de points de lumière bleue, symbolisant l'automatisation IA en Guadeloupe.

IV. Scénarios possibles pour l’avenir

Il existe plusieurs scénarios possibles pour l’avenir du service client :

Coexistence entre agents humains et callbots IA :

Les agents humains et les callbots IA travailleront ensemble pour fournir un service client de qualité. Les chatbots IA gèreront les demandes simples, tandis que les agents humains se concentreront sur les tâches plus complexes.

 

Spécialisation des agents humains dans les tâches complexes : 

Les agents humains se spécialiseront dans les tâches complexes nécessitant une intelligence émotionnelle et une capacité de résolution de problèmes avancée.

 

Automatisation progressive de la plupart des interactions clients : 

La plupart des interactions clients seront automatisées, avec des chatbots IA capables de gérer la majorité des demandes. Les agents humains ne seront sollicités que pour les situations exceptionnelles.

 

Développement de services clients « hybrides » : 

Les entreprises proposeront des services clients « hybrides », combinant des interactions avec des chatbots IA et des interactions avec des agents humains. Les clients pourront choisir le type d’interaction qu’ils préfèrent.

V. Conclusion

L’avenir du service client est automatisé. Les callbots IA présentent de nombreux avantages pour les entreprises, notamment une amélioration de la satisfaction client, une réduction des coûts, un gain de temps pour les agents humains et une meilleure analyse des données clients. Cependant, il existe également des défis à relever, tels que l’incapacité à gérer les situations complexes et émotionnelles, le risque de déshumanisation du service client et le manque de confiance de la part des clients. Pour réussir, les entreprises doivent adopter une approche réfléchie et progressive à l’automatisation du service client, en combinant les avantages des callbots IA avec les compétences et l’empathie des agents humains.

Sources :

    Annexes :

    • Lexique des termes clés : Callbot IA, IA conversationnelle, NLP, apprentissage automatique, chatbot vocal, chatbot vidéo
    • Infographie sur les chiffres clés du marché des callbots IA
    Divi AI d’Elegant Themes : Une révolution pour WordPress, mais à quel prix ?

    Divi AI d’Elegant Themes : Une révolution pour WordPress, mais à quel prix ?

    L’avenir du Web Design avec Divi AI : Avantages et Considérations

    Le monde du référencement SEO et du design web ne cesse d’évoluer avec l’introduction de nouvelles technologies, notamment l’intelligence artificielle (IA). Elegant Themes, un leader dans les thèmes WordPress, a récemment introduit Divi AI, une suite d’outils révolutionnaires visant à simplifier et optimiser la création de sites. Cet article explore les capacités, avantages, et considérations de coût associés à l’utilisation de Divi AI.

    Un robot humanoïde avec une expression pensive tient le menton avec sa main mécanique, symbolisant la réflexion et l'interrogation. Le texte "Divi AI" est affiché en bleu vif à côté, évoquant les capacités de l'intelligence artificielle dans la conception de sites web. Cette image illustre comment Divi AI pourrait influencer le travail d'un web designer en Guadeloupe, intégrant l'IA dans le processus créatif.

    Divi AI : Qu’est-ce que c’est ?

     

    Divi AI est une initiative d’Elegant Themes visant à intégrer l’intelligence artificielle dans leur célèbre thème WordPress, Divi. Cette intégration vise à rendre la conception de sites web plus intuitive, efficace et performante. Avec cet outil, les utilisateurs peuvent bénéficier d’une aide à la rédaction de contenu, à l’optimisation SEO, à la conception graphique et bien plus encore, le tout alimenté par l’IA.

    Les promesses de Divi AI

     

    Conception assistée par IA :

    Divi AI promet de révolutionner la manière dont les sites sont conçus en proposant des suggestions de mise en page, de couleurs, et de contenus personnalisés basés sur l’analyse des tendances et des préférences de l’utilisateur.

     

    Optimisation SEO intelligente :

    L’intégration de l’IA vise à améliorer le référencement naturel des sites en analysant et en suggérant des améliorations en termes de mots-clés, de structure de contenu, et de performances techniques.

     

    Génération de contenu automatisée :

    Divi AI peut aider à produire des textes de qualité, des titres accrocheurs et des descriptions optimisées, le tout en quelques clics.

    Vue futuriste d'une ville cybernétique avec des gratte-ciels illuminés, intégrée à des éléments de circuits imprimés et des graphiques numériques, évoquant une métropole avancée connectée par des technologies de création de sites web en Guadeloupe

    Avantages de Divi AI pour les utilisateurs WordPress

     

    • Gain de temps significatif dans la création et l’optimisation de sites.
    • Amélioration de la qualité et de la performance des sites web.
    • Innovation continue grâce à l’apprentissage automatique, l’outil s’améliore avec chaque utilisation.

     

     

    Mais à quel prix ?

     

    Bien que Divi AI offre de nombreux avantages, il est important de considérer les coûts associés :

    Coût financier :

    L’accès à Divi AI peut nécessiter un abonnement premium ou des frais supplémentaires par rapport au thème Divi standard.

    Dépendance à la technologie :

    S’appuyer fortement sur l’IA peut réduire la personnalisation et l’unicité des sites.

    Courbe d’apprentissage :

    Bien que conçu pour être intuitif, maîtriser toutes les fonctionnalités de Divi AI peut prendre du temps.

    Conclusion

     

    Divi AI d’Elegant Themes représente une avancée significative pour les utilisateurs de WordPress, offrant des outils puissants pour améliorer la conception, le contenu, et le référencement des sites. Cependant, comme pour toute technologie, il est crucial de peser les avantages contre les coûts, qu’ils soient financiers, temporels ou créatifs. En fin de compte, Divi AI est une preuve de l’innovation continue dans le domaine du web et promet de façonner l’avenir de la création de sites.

    TEST DIVI AI : Mon avis sur cet outil

    Boostez Votre Site avec des Snippets CSS

    Boostez Votre Site avec des Snippets CSS

    Qu’est-ce qu’un Snippet Divi et comment l’utiliser ?

     

    Les Snippets sont des bouts de code prêts à l’emploi qui permettent d’ajouter rapidement des fonctionnalités ou de personnaliser l’apparence de votre site WordPress.

    Les utilisateurs de Divi sans connaissances techniques apprécient particulièrement les Snippets Divi. Ils leur permettent de résoudre facilement de petits problèmes sans passer par un développeur.

    Il suffit de copier-coller le code du Snippet à l’endroit adéquat. Je vous indiquerai où le placer pour chaque Snippet proposé.

    Il existe 4 façons de positionner les CSS 

    • Dans les paramètres d’une page (le code n’aura d’effet que sur la page sur laquelle le CSS est positionné)
    • Dans un module, pour ajouter une classe CSS ou personnaliser le CSS
    • Dans le personnaliseur de thème (le code s’appliquera à tout le site)
    • Dans le « head » ou le « Body » de votre thème

     

    Paramètres de page

    Le CSS ne s’appliquera qu’à la page en question

    CSS Snippets dans les paramètres de page Divi

    Dans une « Section » (violet), « Rangée » (vert) ou un « Module » (gris)

    Pour ajouter une classe CSS 

    Classe CSS dans un module Divi

    Pour ajouter le CSS snippet

    Ajouter un code CSS dans l'option avancé d'une section, rangée ou module sur Divi

    Dans le CSS personnalisé du thème

    Le CSS ne s’appliquera à la totalité du site

    Code CSS dans le personnaliseur de thème

    Dans le « HEAD » ou le « BODY » du thème

    CSS dans le head ou le body du thème

    Supprimer la ligne grise sous le menu de Divi

    Placer ce code dans l’onglet Divi > Options du Thème > Personnaliser CSS – ou dans l’onglet Apparence > Personnaliser > CSS Additionnel.

    @media screen and ( max-width: 980px ) {
    .inverse {
    display: flex;
    flex-direction: column-reverse;
    }
    }

    Supprimer l’ombre sous le menu principal de Divi

    Placer ce code dans l’onglet Divi > Options du Thème > Personnaliser CSS – ou dans l’onglet Apparence > Personnaliser > CSS Additionnel.

    @media screen and ( max-width: 980px ) {
    .inverse {
    display: flex;
    flex-direction: column-reverse;
    }
    }

    Changer la couleur du menu automatiquement

    Placer ce code dans l’onglet Divi > Options du Thème > Personnaliser CSS – ou dans l’onglet Apparence > Personnaliser > CSS Additionnel.

    @media screen and ( max-width: 980px ) {
    .inverse {
    display: flex;
    flex-direction: column-reverse;
    }
    }

    Inverser les colonnes sur mobile 

    (voir l’effet et le tuto)

    Dans les paramètres de la rangée (vert), écrivez « inverse » dans l’onglet Avancé>ID et Classe CSS>Classe CSS 

    Pour que le code soit présent sur tout le site :

    Placer ce code dans l’onglet Divi > Options du Thème > Personnaliser CSS – ou dans l’onglet Apparence > Personnaliser > CSS Additionnel.

    Si vous souhaitez que l’effet soit sur une page unique :

    Placer le code dans les paramètres de la page (3 petits points blanc sur fond violet>roue crantée) puis coller le code avancé>Personnalisé CSS

    @media screen and ( max-width: 980px ) {
    .inverse {
    display: flex;
    flex-direction: column-reverse;
    }
    }

    Retirer le titre des images au survol de la souris

    Placer ce code dans l’onglet Divi > Options du Thème > Intégration> Head.

     

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
    $(document).ready(function() {
      $('img[title]').removeAttr('title');
    });
    </script>

    Supprimer la ligne grise de la sidebar

    Placer ce code dans l’onglet Divi > Options du Thème > Personnaliser CSS – ou dans l’onglet Apparence > Personnaliser > CSS Additionnel.

    /* supprimer la ligne grise de la sidebar Divi */
    #main-content .container::before {
        background-color: rgba(0, 0, 0, 0);
    }

    Réduire la police du bouton Rechercher

    Placer ce code dans l’onglet Divi > Options du Thème > Personnaliser CSS – ou dans l’onglet Apparence > Personnaliser > CSS Additionnel.

    /* réduire la police pour le bouton rechercher */
    .et_pb_widget .wp-block-search__button {
        font-size: 10px;
    }

    Fixer la barre d’outils du module Texte de Divi

    Placer ce code dans l’onglet Divi > Options du Thème > Personnaliser CSS – ou dans l’onglet Apparence > Personnaliser > CSS Additionnel.

    /* toolbar sticky au scroll */
    .mce-top-part {
    	position: sticky !important;
    	top: -60px;
    }

    Autoriser la parallaxe sur les écrans mobile

    Placer ce code dans l’onglet Divi > Options du Thème > Intégration> Head.

     

    <script>
        jQuery(document).ready(function($) {
          // Mobile device check
          $is_mobile_device = null !== navigator.userAgent.match(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/);
          if ($is_mobile_device) {
            // Function to check if an element is in the Viewport
            isInViewport = function(elem) {
                elementTop = elem.offset().top, elementBottom = elementTop + elem.outerHeight(), viewportTop = $(window).scrollTop(), viewportBottom = viewportTop + $(window).height();
                return elementBottom > viewportTop && elementTop < viewportBottom;
            };
            // Apply Parallax transform calculations when scrolling
            $(window).scroll(function() {
                $(".et_parallax_bg").each(function() {
                   var $this_parent = $(this).parent();
                   // Check if the parent element is on-screen
                   var $is_visible = isInViewport($this_parent);
                   if ($is_visible) {
                     element_top = $this_parent.offset().top,
                     parallaxHeight = $(this).parent(".et_pb_fullscreen").length && $(window).height() > $this_parent.innerHeight() ? $(window).height() : $this_parent.innerHeight(),
                     bg_height = .3 * $(window).height() + parallaxHeight,
                     main_position = "translate(0, " + .3 * ($(window).scrollTop() + $(window).height() - element_top) + "px)";
                     $(this).css({height: bg_height,"-webkit-transform": main_position,"-moz-transform": main_position,"-ms-transform": main_position,transform: main_position});
                   }
                });
            });
          }
        });
    </script>

    ALIGNER VERTICALEMENT LA GALERIE D’IMAGE D’UN PRODUIT

    Placez ce code dans un module « code » dans votre page où se trouve le module « Woo Product » 

     

    <style>
    @media screen and (min-width: 981px) {
    
    .woocommerce div.product div.dr-page-woo-image .flex-control-thumbs {
    
      position: absolute;
    
      top: 0;
    
      left: -120px;
    
      width: 100px;
    
      margin-top: 0;
    
    }
    .woocommerce div.product div.dr-page-woo-image .flex-control-thumbs li {
    
      width: 100%;
    
      margin-right: 0;
    
      margin-bottom: 20px;
    
    }
    
    }
    
    @media screen and (max-width: 767px) {
    
    .et_pb_wc_related_products.dr-page-related-products ul.products.columns-4 li.product{
    
      width: 100% !important;
    
      margin-right: 0 !important;
    
    }
    </style>

    RÉALISER UN EFFET KEN BURNS SUR les images

    Dans les paramètres de la section (violet) ou de la rangée où se trouve votre image, Avancé>ID et Classe CSS>Classe CSS écrivez « dfhs-1« 

    Placez le code ci-dessous dans un module « Code » dans votre page

     

    .dfhs-1 .et_pb_slide .et_parallax_bg {
    
    animation: dfhs-ken-burn 15s forwards;
    
    animation-iteration-count: infinite;
    
    }
    
    @keyframes dfhs-ken-burn {
    
    0% {
    
        transform: scale3d(1.4, 1.4, 1.4);
    
        animation-timing-function: linear;
    
    }
    
    100% {
    
        transform: scale3d(1, 1, 1);
    
    }
    
    }

    Retirer le zoom au passage de la souris sur le module « woo image « 

    Dans le module « Woo image » –  Avancé>Personnaliser CSS – Copier le code ci-dessous.

     

    .woocommerce-product-gallery__image {
    
    pointer-events: none!important;
    }
    

    Retirer la loupe sur le module « woo image »

    Dans les paramètres de la page  Avancé>Personnaliser CSS – Copier le code ci-dessous.

     

    .woocommerce div.product div.images .woocommerce-product-gallery__trigger {
    display: none;
    }

    Retirer la loupe sur le module « woo image »

    Dans le module « Woo image » –  Avancé>Personnaliser CSS – Copier le code ci-dessous.

     

    -webkit-backdrop-filter :
    blur(10px) ;
    backdrop-filter :  blur(10px) ;

    Afficher un prix “A partir de” pour les produits variables « WooCommerce »

    Allez dans Apparence>Éditeur des fichiers et thèmes>functions.php et copier le code ci-dessous

     

    /* Afficher "À partir de" pour les produits variables */
    add_filter( 'woocommerce_variable_sale_price_html', 'wpm_variation_price_format', 10, 2 );
    add_filter( 'woocommerce_variable_price_html', 'wpm_variation_price_format', 10, 2 );
    
    function wpm_variation_price_format( $price, $product ) {
    	//On récupère le prix min et max du produit variable
    	$min_price = $product->get_variation_price( 'min', true );
    	$max_price = $product->get_variation_price( 'max', true );
    
    	// Si les prix sont différents on affiche "À partir de ..."
    	if ($min_price != $max_price){
    		$price = sprintf( __( 'A partir de %1$s', 'woocommerce' ), wc_price( $min_price ) );
    		return $price;
    	// Sinon on affiche juste le prix
    	} else {
    		$price = sprintf( __( '%1$s', 'woocommerce' ), wc_price( $min_price ) );
    		return $price;
    	}
    }

    Afficher le nombre de produits vendus « WooCommerce »

    Allez dans Apparence>Éditeur des fichiers et thèmes>functions.php et copier le code ci-dessous

     

    /* Afficher le nombre de produit vendu sur les pages produits WooCommerce */
    
    // On affiche le nombre de ventes sur la page produit
    add_action( 'woocommerce_single_product_summary', 'wpm_product_sold_count', 11 );
     
    function wpm_product_sold_count() {
        global $product;
    
    	//On récupère le nombre total de ventes par produit
        $units_sold = $product->get_total_sales();
       
    	// On affiche notre texte personnalisé contenant le nombre de vente
        echo '<p class="wpm-sold-product">' . sprintf( __( 'Produit vendu %s fois', 'woocommerce' ), $units_sold ) . '</p>';
    }

    Modifier la couleur du prix affiché dans le module « Woo Ajouter au panier »

    Dans les paramètres de la page Avancé>Personnalisé CSS 

    Remplacez #xxxxx par le code hexadécimal de votre choix

    .woocommerce div.product span.price {
    color: #xxxxxx;
    }

    Cacher l’affichage du prix dans le module « Ajouter au panier »

    (voir l’effet et le tuto)

    Copier le code ci-dessous dans les paramètres de la page Avancé>Personnalisé CSS

    .woocommerce .woocommerce-variation-price {
    display: none;
    }

    Lien utile : Présence en ligne

    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.

    Personnalisez vos « Listes à puces » avec Divi pour des bullet points mémorables

    Personnalisez vos « Listes à puces » avec Divi pour des bullet points mémorables

    Des « bullet points » (liste à puces) basiques aux bullet points stylés, comment donner de l’impact à vos listes

    Les listes à puces (bullet point) sont un élément clef pour structurer le contenu de manière visuelle et attrayante. Mais il est facile de tomber dans la monotonie avec des puces standards et impersonnelles. Heureusement, Divi nous offre de nombreuses options pour personnaliser nos listes à puces et leur donner plus d’impact. Dans ce tutoriel, nous allons voir comment changer la forme, la couleur, la taille des puces pour les adapter à votre style et rendre vos listes plus percutantes. Nous verrons aussi comment ajouter des icônes comme puces pour encore plus de visuel. En suivant ces quelques étapes simples, vos listes à puces passeront du basique au mémorable !

    Tuto WordPress/Divi : Personnalisation des listes à puces

    Le tuto en vidéo

    Changer les listes à puces avec Divi (option native)

    Pour accéder aux options de mise en forme des puces, il suffit d’insérer une liste à puces dans un module de texte, puis de se rendre dans l’onglet « Style » . Là, en cliquant sur l’icône de liste à puces, vous aurez accès à différents réglages :

    • Police et taille du texte des puces
    • Alignement du texte
    • Espacement entre les puces
    • Couleur du texte

    Plus bas, vous pourrez aussi choisir la forme des puces parmi :

    • Disque (rond)
    • Carré
    • Cercle
    • Pas de puce
    tutoriel divi builder bullet points (listes à puces)

    Les limites du CSS pour la personnalisation des puces

    Divi offre de nombreuses options pour personnaliser les puces d’une liste. Cependant, certaines personnalisations plus poussées se heurtent aux limites du CSS.

    Par exemple, il n’est pas possible de changer la couleur du texte des puces indépendamment de celle du texte de la liste. En effet, la propriété CSS « list-style-color » n’existe pas.

    Ainsi, si vous changez la couleur d’une liste à puces, celle-ci s’appliquera à la fois au texte et aux puces. Impossible de les différencier.

    C’est une limitation inhérente au CSS, Divi n’y est pour rien ! Mais rassurez-vous, il existe des astuces pour contourner cela et obtenir le résultat voulu. Nous allons voir comment faire preuve de créativité pour repousser les limites du CSS et créer des puces très stylées. Accrochez-vous, ça va devenir technique !

    Comment changer la couleur des puces indépendamment du texte ?

    Nous avons vu que les limitations du CSS empêchent de définir une couleur de puces différente de celle du texte avec les options natives de Divi. Heureusement, il existe une astuce pour contourner cela !

    La solution consiste à désactiver complètement l’affichage des puces, puis à les réinsérer « virtuellement » via du code CSS personnalisé.

    Dans le module texte rendez-vous sur le deuxième onglet « style » – « Insérer une liste désordonnée » et sélectionnez « Aucun »

    Dans le troisième onglet « Avancé » – « Classe CSS » écrivez bullet-point

    tutoriel divi builder bullet points (listes à puces)

    1. Rendez-vous dans la section « Paramètre de page » – onglet « avancé » – « personnaliser CSS »
    2. Copiez et collez le code CSS suivant :
    /* changer couleur des points de liste avec la classe CSS bullet-point */
    
    .bullet-point ul {
    	list-style: none;
    }
    
    .bullet-point li::before {
    	content: "• "; color: #27b5ed;
    }

    Changer le style des puces avec des caractères spéciaux

     

    Le code CSS vu précédemment permet de réinsérer une puce de type « disque » grâce au caractère spécial « • ». Mais on peut aller plus loin et utiliser n’importe quel caractère à la place !

    Pour afficher des caractères spéciaux comme des symboles, vous pouvez :

    • Sur Mac : utiliser le raccourci clavier « Ctrl + Cmd + Espace » pour ouvrir le sélecteur de caractères spéciaux.
    • Sous Windows : « Touche logo Windows + . » ouvre également un sélecteur de caractères spéciaux.

    Grâce à cela, vous pouvez par exemple remplacer le « • » par :

    • Une flèche : ➤
    • Une étoile : ★

    Il suffit de revenir dans le code CSS et de changer le caractère entre guillemets après « content:« 

    /* changer couleur des points de liste avec la classe CSS bullet-point */
    
    .bullet-point ul {
    	list-style: none;
    }
    
    .bullet-point li::before {
    	content: "★ "; color: #27b5ed;
    }

    Attribuer une couleur différente à chaque puce

    Nous avons vu qu’il est possible de styliser toutes les puces d’une liste de la même façon. Mais peut-on aller plus loin et leur attribuer une couleur différente chacune ? Oui, c’est faisable !

    Pour cela, il faut définir une couleur pour chaque puce une par une via leur position dans la liste.

    Par exemple, pour une liste à 5 puces :

    • La première puce est sélectionnée avec :first-child
    • La dernière avec :last-child
    • Les intermédiaires via : nth-child(x) où x est leur rang

    Dans le troisième onglet « Avancé » – « Classe CSS » écrivez bullet-point- color-change

     

    tutoriel divi builder bullet points (listes à puces)
    /* assigner une couleur différente aux points de liste avec la classe CSS bullet-point-color-change */
    
    .bullet-point-color-change ul {
    	list-style: none;
    }
    
    .bullet-point-color-change li:first-child::before {
    	content: "★ "; color: #FF0000 ;
    }
    
    .bullet-point-color-change li:nth-child(2)::before {
    	content: "★ "; color: #0FFF00;
    }
    
    .bullet-point-color-change li:nth-child(3)::before {
    	content: "★ "; color: #FF00FF;
    }
    
    .bullet-point-color-change li:nth-child(4)::before {
    	content: "★ "; color: #0017FF ;
    }
    
    .bullet-point-color-change li:last-child::before {
    	content: "★ "; color: #000000;
    }

    Créer une liste à puces en emojis

    Les emojis offrent un excellent moyen de créer des puces amusantes et originales. On peut tout à fait définir un emoji différent pour chaque puce, comme ceci :

    tutoriel divi builder bullet points (listes à puces)
    /* utiliser des emojis comme points de liste avec la classe CSS bullet-emoji */
    
    .bullet-emoji ul {
    	list-style: none;
    }
    
    .bullet-emoji li:first-child::before {
    	content: "✅ ";
    }
    
    .bullet-emoji li:nth-child(2)::before {
    	content: "🚀 ";
    }
    
    .bullet-emoji li:nth-child(3)::before {
    	content: "👍 ";
    }
    
    
    .bullet-emoji li:last-child::before {
    	content: "😉 ";
    }

    En utilisant le sélecteur d’emoji, vous pouvez choisir n’importe quel emoji en remplacement des puces standards.

    C’est une excellente technique pour apporter de la couleur et de la vie à vos listes à puces, tout en structurant votre contenu. Vos lecteurs adoreront découvrir des emojis à la place des traditionnels points ou chiffres.

    Amusez-vous à trouver les emojis qui correspondent le mieux à votre contenu pour des puces fun et mémorables !

    En conclusion,

    Nous voilà arrivés au terme de ce tutoriel sur la personnalisation poussée des puces dans Divi. J’espère que ces astuces CSS vous auront donné des idées pour rendre vos listes à puces beaucoup plus créatives !

    Les codes partagés permettent d’agir sur des listes spécifiques, en leur assignant une classe CSS.

    Si vous voulez que ces styles s’appliquent globalement à toutes vos listes, il suffit de supprimer la classe et d’intégrer le code CSS directement dans la section « Personnaliser CSS » des options de thème Divi.

    Quel que soit votre niveau en CSS, n’hésitez pas à tester, même de manière basique. Donnez de la couleur, jouez avec les formes, osez les emojis ! Vos lecteurs adoreront ces petites touches d’originalité.

    /* changer couleur des points de liste sur tout le site */
    
    ul {
    	list-style: none;
    }
    
    li::before {
    	content: "• "; color: #27b5ed;
    }

    J’espère que ce tutoriel vous inspira à explorer tout le potentiel créatif de Divi pour des puces et des listes qui ne passent pas inaperçues. Amusez-vous bien !

    Affichez vos images en plein écran pour captiver vos visiteurs

    Affichez vos images en plein écran pour captiver vos visiteurs

    L’affichage en plein écran des images pour une interaction immersive.

    Le code JavaScript présenté ci-dessous permet d’améliorer l’expérience utilisateur sur les sites web en permettant aux visiteurs de visualiser les images en plein écran. Cela offre une approche interactive pour agrandir les images et observer les détails avec aisance. Nous allons expliquer comment ce code fonctionne et pourquoi il est utile pour les sites web.

    Afficher les images en plein écran sur WordPress/divi

    Avantages pour les sites web :

    Expérience utilisateur améliorée :

    En permettant aux visiteurs d’agrandir les images en plein écran, le site offre une expérience visuelle immersive. Cela permet aux utilisateurs de mieux apprécier les détails des images, ce qui peut être particulièrement utile pour les sites d’art, de photographie, de voyage, de produits, etc.

    Interactivité accrue :

    L’ajout de cette fonctionnalité apporte une dimension interactive au site, offrant aux utilisateurs un moyen simple de zoomer sur les images qu’ils trouvent intéressantes.

    Compatibilité multi-navigateurs :

    Le code prend en charge différents navigateurs en utilisant des méthodes spécifiques à chacun. Cela garantit que la fonctionnalité d’affichage en plein écran fonctionne de manière cohérente pour tous les utilisateurs, quel que soit leur navigateur préféré.

    Pas de dépendance externe : Le code est écrit en pur JavaScript, ce qui signifie qu’il n’a pas besoin de dépendances externes telles que des bibliothèques ou des frameworks supplémentaires pour fonctionner correctement.

    En conclusion :

    En mettant en œuvre ce code d’affichage en plein écran pour les images, les propriétaires de sites web peuvent améliorer significativement l’expérience de leurs visiteurs. En offrant une expérience visuelle immersive et interactive, les utilisateurs seront plus enclins à explorer le contenu du site et à rester plus longtemps. Cette fonctionnalité, combinée à une compatibilité multi-navigateurs, contribue à renforcer la qualité globale du site et à satisfaire les attentes des visiteurs en matière d’ergonomie et d’interactivité.

    Le tuto en vidéo

    Code Javascript à ajouter dans le « Body » de votre site

     

    Où trouver le « Body »

    Dans votre Dashboard WordPress, cliquer sur « Divi » – « Options du thème » – « L’intégration »

    Copier le code ci-dessous dans le « Body »

     

    Code Javascript pour afficher les images en plein écran sur WordPress et Divi
    <script>
    document.addEventListener('DOMContentLoaded', (event) => {
        document.querySelectorAll('img').forEach((img) => {
            img.addEventListener('click', (e) => {
                if (!document.fullscreenElement) {
                    if (img.requestFullscreen) {
                        img.requestFullscreen();
                    } else if (img.mozRequestFullScreen) { // Firefox
                        img.mozRequestFullScreen();
                    } else if (img.webkitRequestFullscreen) { // Chrome, Safari and Opera
                        img.webkitRequestFullscreen();
                    } else if (img.msRequestFullscreen) { // IE/Edge
                        img.msRequestFullscreen();
                    }
                } else {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.mozCancelFullScreen) { // Firefox
                        document.mozCancelFullScreen();
                    } else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
                        document.webkitExitFullscreen();
                    } else if (document.msExitFullscreen) { // IE/Edge
                        document.msExitFullscreen();
                    }
                }
            });
        });
    });
    </script>

    Sauvegarder votre page et le tour est joué. Vous avez maintenant toutes vos images qui s’afficheront en plein écran dès que vous cliquerez dessus 😉