Astuces Divi | Création de site internet Guadeloupe

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

par Olivier Dufour | Jan 1, 2024 | Astuces Divi, Design Divi

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

Liens utiles :

Boostez Votre Site avec des Snippets CSS

Boostez Votre Site avec des Snippets CSS

par Olivier Dufour | Oct 25, 2023 | Astuces Divi, Design Divi

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

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

Pour ajouter une classe CSS

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

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

coaching personnalisé sur le web design et l'e-commerce avec DR Page Guadeloupe

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

par Olivier Dufour | Sep 4, 2023 | Astuces Divi

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.

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

É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 ».

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

par Olivier Dufour | Août 23, 2023 | Astuces Divi, Design Divi

É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.

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 :

Rendez-vous sur votre Dashboard WordPress.
Cliquez sur « Apparence » puis sur « Menus ».
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

Ajout du code CSS

Rendez-vous sur le Dashboard WordPress de votre site.
Cliquez sur « Divi » puis sur « Personnaliseur de Thème ».
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

Rendez-vous sur le Dashboard WordPress de votre site.
Cliquez sur « Divi » puis sur « Options du Thème ».
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

par Olivier Dufour | Août 22, 2023 | Astuces Divi, Design Divi

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

Rendez-vous dans la section « Paramètre de page » – onglet « avancé » – « personnaliser CSS »
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

/* 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 :

/* 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

par Olivier Dufour | Août 10, 2023 | Astuces Divi, Design Divi

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 😉

« Entrées précédentes