Design 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

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 😉

Comment réaliser un effet texte masqué avec n’importe quelle image sur Divi ?

par contact@dr-page.fr | Juil 27, 2023 | Design Divi

Un effet très cool !

Donnez vie à votre texte avec notre effet de texte masqué ! Cet effet unique utilise une image de votre choix pour « masquer » votre texte, créant un effet visuellement captivant qui attire l’attention de vos visiteurs.

L’effet de texte masqué est parfait pour les titres, les en-têtes et tout autre texte que vous voulez mettre en évidence sur votre site. Il est particulièrement efficace pour les sites de design, de mode, d’art et tout autre site où l’esthétique est primordiale.

Avec notre effet de texte masqué, vous pouvez :

Choisir n’importe quelle image pour masquer votre texte.
Personnaliser la taille, le poids et la couleur de votre texte.
Utiliser n’importe quelle police d’écriture.

L’effet de texte masqué est facile à ajouter à votre site avec le constructeur de page Divi. Il suffit d’ajouter le code HTML et CSS à votre page, et vous pouvez immédiatement voir l’effet en action.

Impressionnez vos visiteurs et donnez à votre site un avantage visuel avec notre effet de texte masqué. Essayez-le dès aujourd’hui !

Effet texte masqué sur Divi - Création de site internet Guadeloupe

Le tuto en vidéo

Code HTML

Dans le tableau de bord WordPress, naviguez jusqu’à la page ou l’article où vous souhaitez ajouter le texte masqué.
Cliquez sur « Modifier avec Divi ».
Cliquez sur le bouton « + » pour ajouter un nouveau module à votre page.
Dans la liste des modules disponibles, recherchez et sélectionnez le module « Code ».
Dans le champ « Contenu » du module de code, collez le code HTML suivant :

<div class="masked-text">
<h1>VOTRE TEXTE ICI</h1>
</div>

Code CSS

Toujours dans le constructeur Divi, cliquez sur l’icône de trois lignes horizontales en bas pour ouvrir les paramètres de la page.
Cliquez sur l’onglet « Avancé ».
Dans le champ « CSS personnalisé », collez le code CSS suivant :

.masked-text h1 {
font-size: 100px;
font-weight: bold;
color: transparent;
font-family: 'Arial', sans-serif;
background: url('https://example.com/your-image.jpg') no-repeat;
background-size: 100% 100%;
-webkit-background-clip: text;
background-clip: text;
}

Voilà, vous n’avez plus qu’à regarder la magie opérée 😉

« Entrées précédentes

Entrées suivantes »