Comment implémenter une bascule en mode sombre dans votre site Divi

Le mode sombre continue de gagner en popularité en tant qu'option pratique permettant aux utilisateurs de profiter du Web avec moins de fatigue oculaire. Avouons-le, nous avons tous tendance à passer plus de temps à regarder les écrans que nous ne le devrions probablement, donc tout confort supplémentaire à l'expérience utilisateur (comme le mode sombre) peut aller très loin. Les systèmes d'exploitation, les programmes et les navigateurs incluent généralement des fonctionnalités de mode sombre intégrées, mais certains développeurs le font passer à un autre niveau en incluant une expérience de mode sombre personnalisée pour leur site Web. L'idée est de mieux contrôler l'apparence de leur site Web en mode sombre sans avoir à faire de compromis sur l'image de marque et/ou le design.

Dans ce tutoriel, nous allons vous montrer comment créer une bascule de mode sombre personnalisée dans Divi à partir de zéro sans plugin. Avec cette fonctionnalité de basculement du mode sombre, vous aurez le contrôle sur la conception du mode sombre et aurez une meilleure expérience utilisateur adaptée à votre marque.

Commençons!

Aperçu

Voici un aperçu rapide de la conception que nous allons construire dans ce tutoriel.

Voici la bascule de mode sombre personnalisée que nous allons construire.

Et voici l'avant et l'après du mode sombre appliqué à l'une de nos mises en page prédéfinies.

Et voici la bascule du mode sombre ajoutée à un en-tête global. Remarquez comment le mode clair/sombre reste pendant que vous naviguez sur le site.

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Pour importer la mise en page de la section dans votre bibliothèque Divi, accédez à la bibliothèque Divi.

Cliquez sur le bouton Importer.

Dans la fenêtre contextuelle de portabilité, sélectionnez l'onglet d'importation et choisissez le fichier à télécharger depuis votre ordinateur.

Cliquez ensuite sur le bouton importer.

Une fois cela fait, la disposition des sections sera disponible dans le Divi Builder.

Passons au tutoriel, voulez-vous ?

Ce dont vous avez besoin pour commencer

Pour commencer, vous devrez effectuer les opérations suivantes :

1. Si vous ne l'avez pas encore fait, installez et activez le thème Divi.
2. Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour éditer la page sur le front-end (constructeur visuel).
3. Choisissez l'option « Construire à partir de zéro ».

Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.

Partie 1 : Construire le basculement du mode sombre

Dans cette première partie du tutoriel, nous allons construire une bascule en mode sombre avec une page dans Divi. Une fois la bascule créée avec le code, vous pourrez l'enregistrer dans la bibliothèque Divi et l'ajouter à n'importe quel endroit de votre site Web.

Pour commencer, ajoutez une ligne à une colonne à la section par défaut tout en construisant avec Divi sur le front-end à partir de zéro.

Ajouter une présentation

Pour créer la bascule personnalisée, nous allons concevoir un module de présentation avec un peu de CSS personnalisé.

Ajoutez un nouveau module de présentation à la ligne.

Teneur

Retirez le contenu fictif par défaut pour le titre et le corps. Ajoutez ensuite l'icône carrée à la place de l'image.

Concevoir

Passez aux paramètres de conception et mettez à jour les éléments suivants :

• Couleur de l'icône : #666666
• Alignement Image/Icône : Gauche
• Taille de la police de l'icône : 22px

• Largeur : 50px
• Alignement du module : centre
• Hauteur : 25px

• Marge : 0px en bas
• Coins arrondis : 4px
• Largeur de la bordure : 2px
• Couleur de la bordure : #666666

CSS personnalisé

Une fois la conception en place, passez à l'onglet avancé. Sous le CSS personnalisé, ajoutez le CSS personnalisé suivant à l'élément principal afin de vous assurer que le débordement n'est pas masqué par le style des coins arrondis.

overflow: visible !important;

Ajoutez ensuite le CSS personnalisé suivant à l'élément After :

content: "light";
position: absolute;
left: -35px;
top:0px;

Cela ajoute une étiquette au module de présentation que nous passerons de « clair » à « foncé » au clic.

Conception du corps du texte

Étant donné que le texte du pseudo-élément après hérite des styles de corps de texte, nous pouvons ajouter les styles de corps de texte à l'aide des options Divi comme suit :

• Police de caractère : Roboto
• Couleur du corps du texte : #666666
• Taille du corps du texte : 13 px
• Espacement des lettres du corps : 1px

Ajout de code personnalisé avec un module de code

Pour ajouter le code nécessaire (CSS/JQuery) pour que le basculement du mode sombre fonctionne comme par magie, nous utiliserons un module de code.

Créez un nouveau module de code sous le module de présentation dans la même colonne.

Collez ensuite le code suivant dans la zone de code :

<style>
/**
 * Dark Mode Toggle Styles
 */
.et-dark-mode {
  transition: all .5s;
  }
.et-dark-toggle {
  cursor: pointer;
  transition: all .5s;
  }
body.et-dark-mode .et-dark-toggle {
  border-color: #666666;
  }
body.et-dark-mode .et-dark-toggle:after {
  content:"dark";
  color: #666666;
  left: 54px;
  }
body.et-dark-mode .et-dark-toggle .et_pb_blurb_content {
  text-align:right;
  }
body.et-dark-mode .et-dark-toggle .et-pb-icon {
  color: #666666;
  }
/**
 * Body Dark Mode Style
 */
body.et-dark-mode {
  background-color: #23282d !important;
  }
/**
 * Divi Element Dark Mode Styles
 *
 * Here you can add styling for each Divi Element that has the class "et-dark-mode-capable".
 */
/* Section with dark mode */
.et_pb_section.et-dark-mode-capable.et-dark-mode {
  background-color: #23282d !important;
  background-blend-mode: overlay;
  transition: opacity .5s ease-in-out;
  color: #dddddd !important;
  }
 /* Row with dark mode */
.et_pb_row.et-dark-mode-capable.et-dark-mode {
  background-color: #23282d !important;
  color: #dddddd !important;
}
/* Column with dark mode */
.et_pb_column.et-dark-mode-capable.et-dark-mode {
  background-color: #23282d !important;
  color: #dddddd !important;
  }
/* Module with dark mode */
.et_pb_module.et-dark-mode-capable.et-dark-mode {
  background-color: transparent !important;
  color: #dddddd !important;
  }
/* Text Headings with dark mode */
.et_pb_module.et-dark-mode-capable.et-dark-mode.et_pb_module_header,
.et_pb_module.et-dark-mode-capable.et-dark-mode h1,
.et_pb_module.et-dark-mode-capable.et-dark-mode h2,
.et_pb_module.et-dark-mode-capable.et-dark-mode h3,
.et_pb_module.et-dark-mode-capable.et-dark-mode h4,
.et_pb_module.et-dark-mode-capable.et-dark-mode h5,
.et_pb_module.et-dark-mode-capable.et-dark-mode h6 {
color: #dddddd !important;
}
</style>
<script>
  function storageAvailable(type) {
    try {
        var storage = window[type],
            x = '__storage_test__';
        storage.setItem(x, x);
        storage.removeItem(x);
        return true;
    }
    catch(e) {
        return e instanceof DOMException && (
            // everything except Firefox
            e.code === 22 ||
            // Firefox
            e.code === 1014 ||
            // test name field too, because code might not be present
            // everything except Firefox
            e.name === 'QuotaExceededError' ||
            // Firefox
            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
            // acknowledge QuotaExceededError only if there's something already stored
            storage.length !== 0;
    }
  }
  jQuery(document).ready(function($) {
      var storageAvailable = window.storageAvailable('sessionStorage');
      $(".et-dark-toggle").click(function() {
          $(".et-dark-mode-capable,body").toggleClass("et-dark-mode");
          if ( storageAvailable ) {
              $("body").hasClass("et-dark-mode") ?
              sessionStorage.setItem('etDarkModeEnabled','1'):
              sessionStorage.removeItem('etDarkModeEnabled');
          }
      });
      if (storageAvailable) {
          '1' == sessionStorage.getItem('etDarkModeEnabled') ?
          $(".et-dark-mode-capable,body").addClass("et-dark-mode"):
          $(".et-dark-mode-capable,body").removeClass("et-dark-mode");
      }
  });
</script>

Ajout des classes CSS personnalisées

Le code personnalisé nécessite que vous ayez une classe CSS personnalisée ajoutée au module de présentation ou à la bascule. Cela permettra au texte de présentation de déclencher le basculement du mode sombre et la fonctionnalité au clic.

Classe de module Blurb

Ouvrez les paramètres du module de présentation et ajoutez une classe CSS personnalisée comme suit :

• Classe CSS : et-dark-toggle

Classe compatible avec le mode sombre

Nous devons également ajouter une classe CSS personnalisée à chaque élément Divi pour lequel nous souhaitons avoir la capacité de mode sombre. Une fois que l'élément a la classe CSS, cet élément héritera du CSS personnalisé "mode sombre" dans le code que nous avons ajouté une fois le mode sombre activé. Cette méthode nous donne plus de contrôle sur notre conception en mode sombre, car certains éléments peuvent ne nécessiter aucun style en mode sombre.

Pour commencer, nous pouvons ajouter le mode sombre à la section contenant notre bascule de mode sombre.

Ouvrez les paramètres de la section et ajoutez la classe CSS suivante :

• Classe CSS : et-dark-mode-capable

Partie 2 : Ajout de la fonctionnalité du mode sombre à une page Divi

Maintenant que nous avons le code et les classes CSS en place, nous sommes prêts à appliquer la fonctionnalité et la conception du mode sombre à une page entière dans Divi. Pour ce faire, nous allons utiliser notre disposition prédéfinie de la page de destination de l'application mobile.

Pour ajouter la mise en page, ouvrez le menu des paramètres en bas du générateur visuel et cliquez sur l'icône Ajouter une nouvelle mise en page.

Sélectionnez ensuite la mise en page de la page de destination de l'application mobile sous l'onglet des mises en page prédéfinies.

Assurez-vous que l'option « Remplacer le contenu existant » n'est PAS sélectionnée. Vous ne voulez pas effacer la section avec la bascule du mode sombre.

Étant donné que le style du mode sombre ne s'appliquera qu'aux éléments avec la classe CSS "et-dark-mode-capable", nous pouvons choisir d'ajouter à la page de différentes manières.

1. Nous pouvons ajouter la classe CSS à chaque élément de la page individuellement.
2. Nous pourrions étendre la classe CSS aux éléments de la page (ce serait plus rapide que de faire chacun manuellement). Par exemple, nous pourrions ouvrir les paramètres de section pour la section supérieure et étendre la classe CSS pour cette section à toutes les sections de la page.
   
3. Nous pouvons ajouter la classe CSS aux valeurs par défaut globales de l'élément. Cela appliquera la classe CSS à tous les éléments à l'échelle du site, ajoutant une capacité de mode sombre sur l'ensemble du site. Par exemple, nous pourrions ouvrir les paramètres de la section et cliquer sur l'icône par défaut global pour modifier les paramètres par défaut de la section globale. Ensuite, nous pouvons ajouter la classe CSS et l'enregistrer en tant que classe CSS pour toutes les sections du site.
   

Ajout de la classe CSS aux éléments de page

Pour cet exemple, nous allons mettre à jour les éléments de la page en ajoutant la classe CSS aux valeurs par défaut globales des sections et des modules de texte. Et nous apporterons également quelques ajouts aux autres éléments de la page au fur et à mesure.

Toutes les rubriques

Pour ajouter la classe CSS à toutes les sections, ouvrez les paramètres de la section supérieure qui contient la bascule du mode sombre. Modifiez ensuite les valeurs par défaut globales de la section et ajoutez la classe CSS suivante aux valeurs par défaut globales de la section :

• Classe CSS : et-dark-mode-capable

Toutes les sections spécialisées

Ajoutez également la classe CSS aux valeurs par défaut globales de la section de spécialité.

Modules de texte

Ensuite, ouvrez les paramètres de l'un des modules de texte sur la page et ajoutez la même classe CSS aux valeurs par défaut globales du texte.

Présentation

Ensuite, ouvrez les paramètres de l'un des textes de présentation dans la mise en page et ajoutez la classe CSS aux valeurs par défaut globales du texte.

Colonnes de témoignages

Plus bas dans la mise en page, il y a quelques témoignages, chacun dans une colonne avec un fond blanc personnalisé. Pour remplacer les styles de colonne en mode sombre, ajoutez la classe CSS à l'une des colonnes et étendez-la aux autres colonnes de la ligne.

REMARQUE : ce n'est pas une bonne idée d'ajouter la classe CSS aux valeurs par défaut globales de la colonne car cela casserait certains des éléments de conception (c'est-à-dire que ce n'est pas une bonne idée de donner à toutes les colonnes un arrière-plan sombre lorsque la plupart du temps les arrière-plans sont transparents).

Pour tester le résultat, passez à la page en direct et cliquez sur la bascule du mode sombre en haut de la page.

Voici à quoi devrait ressembler la page en mode clair.

Et voici à quoi devrait ressembler la page en mode sombre.

Partie 3 : Ajout de la bascule du mode sombre à un en-tête global

Si vous souhaitez étendre la fonctionnalité du mode sombre à l'ensemble du site, ce serait une bonne idée d'ajouter la bascule du mode sombre à votre Divi Global Header. De cette façon, il sera disponible pour les utilisateurs sur tout le site en un seul endroit pratique.

Enregistrement de la bascule et du code du mode sombre dans la bibliothèque Divi

Mais avant de faire cela, nous devons enregistrer la bascule et le code du mode sombre dans la bibliothèque Divi. Cela facilitera l'ajout à d'autres zones de notre site, y compris l'en-tête global.

Revenez à la mise en page que nous avons construite avec Divi déployé sur le front-end. Ensuite, ouvrez le menu du module de présentation utilisé pour créer le basculement du mode sombre et sélectionnez Enregistrer dans la bibliothèque. Donnez un nom à la mise en page et enregistrez-la dans la bibliothèque.

Ensuite, enregistrez également le module de code dans la bibliothèque Divi.

Importation d'un modèle d'en-tête global prédéfini

Si vous n'avez pas encore d'en-tête global, vous devrez créer le vôtre ou utiliser l'un de nos packs de création de thèmes prédéfinis.

Pour ce didacticiel, nous allons utiliser l'en-tête global inclus dans le cinquième pack de création de thèmes. Pour ajouter l'en-tête global à l'aide du générateur de thème, vous devrez télécharger le pack de générateur de thème, puis utiliser les options de portabilité pour importer le fichier JSON appelé "divi-theme-builder-pack-5-default-website-template.json" .

Une fois le modèle chargé, cliquez pour modifier l'en-tête global.

Ajoutez ensuite le basculement du mode sombre de la bibliothèque à la colonne 1 de la deuxième ligne de l'en-tête.

Sous le module bascule/blurb du mode sombre, ajoutez le module de code que vous avez enregistré dans la bibliothèque directement sous le basculement du mode sombre.

Puisque nous avons la classe CSS « ​​et-dark-mode-capable » par défaut pour toutes les sections, les sections à l'intérieur de l'en-tête l'auront également par défaut. Pour désactiver cela, attribuez-lui simplement une classe CSS de remplacement.

Résultats finaux

Voici les résultats finaux de notre page de basculement en mode sombre.

Et voici la bascule du mode sombre sur l'en-tête. Le mode sélectionné (foncé ou clair) restera pendant que vous naviguez vers d'autres pages du site.

Ajustement des styles CSS personnalisés du mode sombre

Si vous souhaitez ajuster le style du mode sombre des éléments bascule ou Divi, vous devrez le faire dans le code du module de code.

Le code n'a actuellement qu'un style de mode sombre de base appliqué à chacun des éléments une fois en mode sombre. Il s'agit d'une couleur de fond sombre et d'une couleur de texte claire.

Dernières pensées

Équiper votre site Divi d'une bascule de mode sombre personnalisée peut être un excellent moyen de booster l'UX et de créer un tout nouveau design qui à la fois plaît et soulage les yeux. J'espère que cela vous sera utile.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!