Création Assistée par l’IA : L’Ingénieur Prompt est-il le Nouvel Artiste Numérique ?

Création Assistée par l’IA : L’Ingénieur Prompt est-il le Nouvel Artiste Numérique ?

Ingénieur prompt travaillant sur des algorithmes de création artistique assistée par l'IA, avec des œuvres numériques abstraites affichées autour de son poste de travail. L'image illustre la fusion entre technologie et créativité, mettant en avant le potentiel de l'IA dans la création numérique, une expertise proposée par Dr Page en Guadeloupe.

Table des matières

 

  • 1. Qu’est-ce que la création assistée par l’IA ?
      • 1.1 Définition de l’IA dans la création numérique
      • 1.2 Comment fonctionne la création artistique avec l’IA ?
      • 1.3 Avantages de l’IA dans la création numérique
  • 2. L’Ingénieur Prompt comme Artiste Numérique
      • 2.1 Transformation du rôle de l’ingénieur en artiste
      • 2.2 Exemples de projets artistiques réalisés par l’IA
      • 2.3 Impact de l’IA sur la créativité humaine
  • 3. Implications pour les professionnels et les industries créatives
      • 3.1 Nouvelles compétences requises pour les créateurs dans l’ère de l’IA
      • 3.2 Comment l’IA redéfinit les industries créatives (ex : Création de site internet Guadeloupe)
      • 3.3 Préparer l’avenir : intégration de l’IA dans les stratégies créatives

Vous cherchez à comprendre comment l’intelligence artificielle (IA) peut révolutionner la création numérique ? Vous êtes au bon endroit. Dans cet article, nous allons explorer comment la création assistée par l’IA bouleverse les domaines artistiques et fait évoluer le rôle de l’ingénieur en artiste numérique. Que vous soyez un développeur curieux ou un artiste à la recherche de nouvelles techniques, notre guide détaillé vous donnera un aperçu complet et concret.

1. Qu’est-ce que la création assistée par l’IA ?

1.1 Définition de l’IA dans la création numérique

L’intelligence artificielle (IA) dans la création numérique englobe l’utilisation de machines et algorithmes pour générer, modifier ou améliorer des œuvres artistiques. Les artistes utilisent des outils comme les réseaux neuronaux et les algorithmes d’apprentissage automatique pour créer des œuvres d’art visuel, de la musique et même de la littérature.

  • Réseaux neuronaux: Conçus pour imiter la structure du cerveau humain, ils traitent l’information de manière parallèle.
  • Apprentissage automatique: Permet aux systèmes d’améliorer leurs performances au fil du temps, en se basant sur l’expérience.

Pro-tip: Adobe Sensei est un bon exemple d’IA intégrée dans des outils créatifs, aidant les utilisateurs à réaliser des travaux graphiques plus rapidement.

Les logiciels comme DALL-E 2 et MidJourney montrent parfaitement comment l’IA peut transformer le processus créatif. Ils utilisent l’IA pour comprendre des descriptions verbales et les transformer en images réalistes. Imaginez pouvoir décrire un paysage de rêve et le voir apparaître sous vos yeux en quelques secondes!

1.2 Comment fonctionne la création artistique avec l’IA ?

La création artistique avec l’IA peut sembler complexe, mais le principe reste simple. L’IA analyse d’abord un ensemble de données, comme des images ou des textes, pour comprendre les styles et les motifs. Ensuite, elle utilise cette compréhension pour générer de nouvelles créations.

    • Étape 1: Collecte de données – L’IA est nourrie par une vaste base de données d’images ou de textes pour analyser les tendances.
    • Étape 2: Apprentissage – Par le biais de l’apprentissage profond, elle identifie les caractéristiques clés des œuvres.
    • Étape 3: Génération – Enfin, elle produit de nouvelles œuvres en combinant différentes techniques apprises.

Pro-tip: Les GANs (Generative Adversarial Networks) sont populaires pour leur capacité à créer des œuvres d’art réalistes en opposant deux réseaux neuronaux l’un à l’autre.

Prenez par exemple DeepArt, qui transforme vos photos en œuvres inspirées par des styles artistiques célèbres. Il suffit de télécharger une image, et l’IA s’occupe de tout, appliquant des techniques similaires à celles de Van Gogh ou Picasso.

1.3 Avantages de l’IA dans la création numérique

L’IA offre de nombreux avantages dans la création numérique:

  • Productivité accrue: Automatisation des tâches fastidieuses comme le traçage ou la coloration.
  • Accessibilité: Permet à des personnes sans compétences artistiques traditionnelles de créer des œuvres impressionnantes.
  • Innovation: Génération de nouvelles idées en combinant des styles et techniques variées.

Selon une étude récente de Accenture, 75% des entreprises utilisant l’IA dans leurs processus créatifs ont constaté une augmentation de leur productivité.

Pro-tip: Pensez à intégrer l’IA dans vos outils créatifs pour optimiser votre temps et votre créativité. Par exemple, Fotor utilise l’IA pour retoucher des photos, rendant ainsi les pixels parfaits avec peu d’intervention humaine.

Avec tous ces avantages, l’IA n’est pas qu’un gadget; elle devient un partenaire essentiel dans le processus créatif, permettant aux artistes de se concentrer sur l’innovation plutôt que sur l’exécution.

2. L’Ingénieur Prompt comme Artiste Numérique

2.1 Transformation du rôle de l’ingénieur en artiste

Qui aurait cru que l’ingénieur prompt pourrait un jour revêtir la casquette d’un artiste numérique ? Grâce à l’IA, il ne s’agit plus de simples lignes de code, mais d’une véritable révolution artistique. En utilisant des algorithmes complexes, les ingénieurs créent désormais des œuvres d’art uniques. En quelques clics, ils transforment des instructions textuelles en images époustouflantes, en suivant une série de règles et de paramètres définis.

Avec l’aide de plateformes comme DALL-E ou MidJourney, des ingénieurs prompts convertissent des descriptions en œuvres visuelles détaillées. Vous pouvez demander à l’IA de dessiner un chat sur une planète alien et obtenir une image qui pourrait rivaliser avec celles d’un studio Pixar. Plus besoin de pinceaux ou de toiles, juste un clavier et une imagination débordante.

2.2 Exemples de projets artistiques réalisés par l’IA

L’IA a déjà laissé sa marque sur plusieurs projets artistiques remarquables. Par exemple, la vente aux enchères de Christie’s de l’œuvre « Portrait d’Edmond de Belamy » en 2018, une peinture réalisée par un GAN (Generative Adversarial Network), a prouvé que l’art numérique assisté par IA pouvait atteindre des sommets inattendus.

    • Projet DeepDream : Google a utilisé cet algorithme pour transformer des images classiques en visions surréalistes, ressemblant à des hallucinations. Chaque image déborde de couleurs et motifs fantastiques.
    • Musique générée par l’IA : Des plateformes comme Jukedeck permettent de créer des compositions musicales en ajustant simplement quelques variables. Le résultat ? Des morceaux symphoniques à couper le souffle.

Pro-tip: Pour les artistes en herbe, essayez des outils comme ArtBreeder qui vous permettent de mixer et remixer des images pour créer quelque chose de totalement inédit.

2.3 Impact de l’IA sur la créativité humaine

À la question « L’IA tue-t-elle la créativité humaine ? », la réponse semble être bien plus complexe. En réalité, l’IA tire le meilleur de notre inventivité. Elle pousse les limites de ce que nous pouvons réaliser, nous offrant des outils novateurs pour concrétiser nos visions les plus folles. Par exemple, l’utilisation d’IA dans le design web en Guadeloupe facilite la création de sites intuitifs et élégants, sans sacrifier l’aspect créatif.

Cependant, il est crucial de noter que l’IA ne prend pas les décisions finales. Les choix artistiques essentiels restent entre les mains des humains, préservant ainsi l’étincelle originale de créativité. En déléguant certaines tâches répétitives ou chronophages à l’IA, les créateurs peuvent se concentrer sur l’essence de leur vision, explorant de nouvelles idées et concepts. Selon une étude récente de Gartner, 37% des entreprises utilisent l’IA pour améliorer les processus créatifs, montrant ainsi une adoption croissante de ces technologies pour stimuler l’innovation.

Pro-tip: Utilisez des outils d’IA pour générer des ébauches rapides de vos projets artistiques, puis peaufinez manuellement les détails. Cela peut économiser des heures de travail tout en gardant un contrôle total sur le résultat final.

3. Implications pour les professionnels et les industries créatives

3.1 Nouvelles compétences requises pour les créateurs dans l’ère de l’IA

La montée en puissance de l’IA (intelligence artificielle) transforme le monde créatif, nécessitant des compétences inédites pour les professionnels. On parle ici d’aptitudes techniques spécifiques comme le prompt engineering et la maîtrise des algorithmes d’IA. Imaginez un artiste numérique qui doit non seulement être créatif mais aussi savoir programmer !

Les créateurs doivent désormais :

    • Apprendre à coder et comprendre les bases de l’intelligence artificielle.
    • Développer les « prompts » et affiner leur précision pour obtenir des résultats artistiques satisfaisants.
    • Interpréter les données générées par l’IA pour améliorer les processus créatifs.
    • Collaborer avec des spécialistes en IA pour intégrer les nouvelles technologies dans leurs projets.

Pro-tip : Inscrivez-vous à des cours en ligne gratuits sur les fondements de l’IA et du prompt engineering pour rester compétitif dans votre domaine. Des plateformes comme Coursera ou Udemy offrent des options accessibles.

3.2 Comment l’IA redéfinit les industries créatives (ex : Création de site internet Guadeloupe)

L’intégration de l’IA dans les industries créatives redéfinit les frontières de ce qui est possible. Prenons l’exemple de la création de sites internet en Guadeloupe. Les entreprises telles que Dr Page exploitent l’IA pour offrir des services de web design personnalisés et innovants. L’IA permet d’automatiser des tâches complexes, d’améliorer l’efficacité et de fournir une analyse approfondie des données clients.

L’IA redéfinit les industries créatives en :

    1. Automatisant les tâches répétitives, permettant aux créateurs de se concentrer sur les aspects artistiques.
    2. Offrant des analyses prédictives pour mieux cibler les attentes des clients.
    3. Améliorant l’expérience utilisateur grâce à l’intégration de chatbots et de callbots IA.
    4. Réduisant les coûts opérationnels en optimisant les processus internes.

Pro-tip : Adoptez une stratégie intégrée en collaborant avec des experts en IA pour transformer votre vision créative en réalité. Consultez des entreprises locales comme Dr Page pour des solutions sur mesure adaptées à vos besoins.

3.3 Préparer l’avenir : intégration de l’IA dans les stratégies créatives

Se préparer à l’avenir avec l’IA signifie intégrer ces technologies dès aujourd’hui dans vos stratégies créatives. Les outils d’IA peuvent révolutionner votre approche, offrant des insights précieux et optimisant vos processus créatifs. Par exemple, l’analyse de données via l’IA aide à comprendre les tendances de consommation et à adapter vos créations en conséquence.

Pour intégrer efficacement l’IA :

    • Formez-vous continuellement aux nouvelles technologies et méthodes IA.
    • Collaborez avec des spécialistes pour mieux comprendre les opportunités offertes par l’IA.
    • Implémentez progressivement des solutions IA dans vos projets afin de mesurer leur impact.
    • Expérimentez avec des outils d’IA pour découvrir leur potentiel et leurs limites.

Pro-tip : Commencez par des petites intégrations IA dans vos projets. Utilisez des outils gratuits ou en version d’essai pour tester l’impact avant un déploiement à grande échelle.

Le rôle de l’IA dans la création artistique et les industries créatives est inévitable. Pour rester pertinent et compétitif, il est crucial de se former aux nouvelles compétences, de comprendre comment l’IA redéfinit les industries et d’intégrer progressivement ces technologies dans vos stratégies.

Pensez à explorer les services de Dr Page pour la création de site internet en Guadeloupe et découvrir comment l’IA peut transformer votre approche créative. Transformez votre vision en réalité numérique ! www.dr-page.fr

F.A.Q

 

Qu’est-ce que le prompt engineering en lien avec l’IA ?

Le prompt engineering consiste à créer des instructions précises pour diriger les modèles d’IA afin d’obtenir des résultats spécifiques dans la génération de contenu.

Quel est le salaire d’un Prompt Engineer ?

Le salaire d’un Prompt Engineer varie entre 70 000 et 110 000 euros par an, selon l’expérience et l’emplacement.

Quel est l’objectif principal d’un prompt lors de la génération de contenu par une IA ?

L’objectif principal d’un prompt est de guider l’IA pour générer un contenu pertinent et de qualité, en fournissant des instructions claires et détaillées.

Comment l’IA peut aider les artistes ?

L’IA aide les artistes par :

    • Automatisation de tâches répétitives
    • Analyse des tendances du marché
    • Génération d’idées créatives
    • Amélioration de la productivité
    • Facilitation de la collaboration
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 !