Как реализовать переключатель темного режима на вашем сайте Divi

Популярность темного режима продолжает расти как удобная возможность для пользователей работать в Интернете с меньшей нагрузкой на глаза. Посмотрим правде в глаза, мы все склонны проводить больше времени, глядя на экраны, чем, вероятно, следовало бы, поэтому любые дополнительные удобства для пользователя (например, темный режим) могут иметь большое значение. Операционные системы, программы и браузеры обычно включают встроенные возможности темного режима, но некоторые разработчики переходят на другой уровень, добавляя настраиваемый темный режим для своих веб-сайтов. Идея состоит в том, чтобы лучше контролировать то, как их веб-сайт выглядит в темном режиме, без необходимости идти на компромисс с брендом и / или дизайном.

В этом уроке мы покажем вам, как создать пользовательский переключатель темного режима в Divi с нуля без плагина. Благодаря этой функции переключения темного режима вы будете контролировать дизайн темного режима и улучшать пользовательский интерфейс, адаптированный к вашему бренду.

Давайте начнем!

Sneak Peek

Вот краткий обзор дизайна, который мы построим в этом уроке.

Вот настраиваемый переключатель темного режима, который мы создадим.

А вот до и после темного режима, примененного к одному из наших готовых макетов.

А вот переключатель темного режима, добавленный в глобальный заголовок. Обратите внимание, как остается светлый / темный режим при навигации по сайту.

Скачайте макет БЕСПЛАТНО

Чтобы получить доступ к дизайну из этого урока, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Чтобы импортировать макет раздела в свою библиотеку Divi, перейдите в библиотеку Divi.

Щелкните кнопку Импорт.

Во всплывающем окне переносимости выберите вкладку импорта и выберите файл для загрузки со своего компьютера.

Затем нажмите кнопку импорта.

После этого макет раздела будет доступен в Divi Builder.

Давайте перейдем к руководству, не так ли?

Что вам нужно для начала

Для начала вам необходимо сделать следующее:

1. Если вы еще этого не сделали, установите и активируйте тему Divi.
2. Создайте новую страницу в WordPress и используйте Divi Builder для редактирования страницы во внешнем интерфейсе (визуальный конструктор).
3. Выберите вариант «Строить с нуля».

После этого у вас будет чистый холст, чтобы начать проектировать в Divi.

Часть 1: Создание переключателя темного режима

В этой первой части урока мы собираемся создать переключатель темного режима со страницей в Divi. После создания переключателя с кодом вы сможете сохранить его в библиотеке Divi и добавить в любое место на своем веб-сайте.

Для начала добавьте строку из одного столбца в раздел по умолчанию, создавая Divi с нуля.

Добавить объявление

Чтобы создать настраиваемый переключатель, мы собираемся разработать модуль рекламного сообщения с небольшим настраиваемым CSS.

Добавьте в строку новый модуль аннотации.

Содержание

Удалите макет содержимого по умолчанию для заголовка и тела. Затем добавьте квадратный значок вместо изображения.

Дизайн

Перейдите к настройкам дизайна и обновите следующее:

• Цвет значка: # 666666
• Выравнивание изображения / значка: влево
• Размер шрифта значка: 22px

• Ширина: 50 пикселей
• Выравнивание модуля: по центру
• Высота: 25 пикселей

• Поля: низ 0 пикселей
• Закругленные углы: 4 пикселя
• Ширина границы: 2 пикселя
• Цвет границы: # 666666

Пользовательские CSS

Как только дизайн будет готов, перейдите на вкладку «Дополнительно». Под настраиваемым CSS добавьте следующий настраиваемый CSS к основному элементу, чтобы убедиться, что переполнение не скрыто от стиля скругленных углов.

overflow: visible !important;

Затем добавьте следующий настраиваемый CSS в элемент After:

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

Это добавляет метку к модулю рекламного сообщения, которую мы изменим со «светлого» на «темное» при нажатии.

Дизайн основного текста

Поскольку текст в псевдоэлементе after наследует стили основного текста, мы можем добавить стили основного текста, используя параметры Divi следующим образом:

• Шрифт тела: Roboto
• Цвет основного текста: # 666666
• Размер основного текста: 13 пикселей
• Интервал между буквами основного текста: 1 пиксель

Добавление собственного кода с помощью модуля кода

Чтобы добавить необходимый код (CSS / JQuery), чтобы переключение темного режима творило чудеса, мы будем использовать модуль кода.

Создайте новый модуль кода под модулем рекламного сообщения в том же столбце.

Затем вставьте следующий код в поле кода:

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

Добавление пользовательских классов CSS

Для настраиваемого кода требуется, чтобы в модуль рекламного сообщения или в переключатель был добавлен настраиваемый класс CSS. Это позволит рекламному объявлению активировать переключение темного режима и функциональность при нажатии.

Класс модуля Blurb

Откройте настройки модуля рекламного сообщения и добавьте собственный класс CSS следующим образом:

• Класс CSS: et-dark-toggle

Способный к темному режиму класс

Нам также необходимо добавить собственный CSS-класс к каждому элементу Divi, для которого мы хотим иметь возможность темного режима. Как только элемент имеет класс CSS, этот элемент унаследует пользовательский CSS «темного режима» в коде, который мы добавили после включения темного режима. Этот метод дает нам больше контроля над нашим дизайном темного режима, поскольку некоторые элементы могут не требовать каких-либо стилей темного режима.

Для начала мы можем добавить темный режим в раздел, содержащий наш переключатель темного режима.

Откройте настройки раздела и добавьте следующий класс CSS:

• Класс CSS: с поддержкой et-dark-mode

Часть 2: Добавление функциональности темного режима на страницу Divi

Теперь, когда у нас есть код и классы CSS, мы готовы применить функциональность и дизайн темного режима ко всей странице в Divi. Для этого мы будем использовать готовый макет целевой страницы мобильного приложения.

Чтобы добавить макет, откройте меню настроек в нижней части визуального конструктора и щелкните значок «Добавить новый макет».

Затем выберите макет целевой страницы мобильного приложения на вкладке готовых макетов.

Убедитесь, что параметр «Заменить существующий контент» НЕ выбран. Вы не хотите стирать раздел с переключателем темного режима.

Так как стиль темного режима будет применяться только к элементам с классом CSS «et-dark-mode-capacity», мы можем добавить на страницу несколько различных способов.

1. Мы можем добавить класс CSS к каждому элементу на странице индивидуально.
2. Мы могли бы расширить класс CSS для элементов по всей странице (это будет быстрее, чем делать каждый из них вручную). Например, мы могли бы открыть настройки раздела для верхнего раздела и расширить класс CSS для этого раздела на все разделы на странице.
   
3. Мы можем добавить класс CSS к глобальным значениям по умолчанию элемента. Это применит класс CSS ко всем элементам всего сайта, добавив возможность темного режима по всему сайту. Например, мы могли бы открыть настройки раздела и щелкнуть глобальный значок по умолчанию, чтобы изменить глобальные настройки раздела по умолчанию. Затем мы можем добавить класс CSS и сохранить его как класс CSS для всех разделов сайта.
   

Добавление класса CSS к элементам страницы

В этом примере мы собираемся обновить элементы страницы, добавив класс CSS к глобальным значениям по умолчанию для разделов и текстовых модулей. И мы также будем делать несколько дополнений к другим элементам на странице по мере продвижения.

Все разделы

Чтобы добавить класс CSS во все разделы, откройте настройки для верхнего раздела, который содержит переключатель темного режима. Затем отредактируйте глобальные значения по умолчанию для раздела и добавьте следующий класс CSS к глобальным значениям по умолчанию раздела:

• Класс CSS: с поддержкой et-dark-mode

Все специализированные разделы

Также добавьте класс CSS к глобальным значениям по умолчанию в специальном разделе.

Текстовые модули

Затем откройте настройки для одного из текстовых модулей на странице и добавьте тот же класс CSS в глобальные значения по умолчанию для текста.

Blurbs

Затем откройте настройки для одного из размытых изображений в макете страницы и добавьте класс CSS к глобальным настройкам Blurb по умолчанию.

Колонки с отзывами

Ниже по макету страницы есть несколько отзывов, каждая из которых находится в столбце с настраиваемым белым фоном. Чтобы переопределить стили столбцов в темном режиме, добавьте класс CSS к одному из столбцов и распространите его на другие столбцы в строке.

ПРИМЕЧАНИЕ. Не рекомендуется добавлять класс CSS к глобальным значениям столбца по умолчанию, потому что это нарушит некоторые элементы дизайна (т. Е. Не рекомендуется давать всем столбцам темный фон, когда большую часть времени фоны столбцов прозрачны).

Чтобы проверить результат, перейдите на живую страницу и нажмите переключатель темного режима вверху страницы.

Вот как должна выглядеть страница в светлом режиме.

А вот как должна выглядеть страница в темном режиме.

Часть 3: Добавление переключателя темного режима в глобальный заголовок

Если вы хотите расширить функциональность темного режима на весь сайт, было бы неплохо добавить переключатель темного режима к глобальному заголовку Divi. Таким образом, он будет доступен для пользователей всего сайта в одном удобном месте.

Сохранение переключателя темного режима и кода в библиотеке Divi

Но прежде чем вы это сделаете, нам нужно сохранить переключатель темного режима и код в библиотеке Divi. Это упростит добавление в другие области нашего сайта, включая глобальный заголовок.

Вернитесь к макету, который мы создали с помощью Divi, развернутого на передней панели. Затем откройте меню модуля рекламного сообщения, используемого для создания переключателя темного режима, и выберите «Сохранить в библиотеку». Дайте макету имя и сохраните его в библиотеке.

Затем сохраните модуль кода в библиотеке Divi.

Импорт готового шаблона глобального заголовка

Если у вас еще нет глобального заголовка, вам нужно будет создать свой собственный или использовать один из наших готовых пакетов для создания тем.

В этом уроке мы собираемся использовать глобальный заголовок, включенный в пятый пакет построителя тем. Чтобы добавить глобальный заголовок с помощью построителя тем, вам необходимо загрузить пакет построителя тем, а затем использовать параметры переносимости для импорта файла JSON с именем «divi-theme-builder-pack-5-default-website-template.json» .

После загрузки шаблона щелкните, чтобы отредактировать глобальный заголовок.

Затем добавьте переключатель темного режима из библиотеки в столбец 1 во второй строке заголовка.

В модуле переключения темного режима / рекламного сообщения добавьте модуль кода, который вы сохранили в библиотеке, непосредственно под переключателем темного режима.

Поскольку у нас есть класс CSS «et-dark-mode-совместимый» по умолчанию для всех разделов, разделы внутри заголовка также будут иметь его по умолчанию. Чтобы отключить это, просто дайте ему приоритетный класс CSS.

Окончательные результаты

Вот окончательные результаты нашей страницы переключения темного режима.

А вот переключатель темного режима в заголовке. Выбранный режим (темный или светлый) останется при переходе на другие страницы сайта.

Настройка пользовательских стилей темного режима CSS

Если вы хотите настроить стиль темного режима переключателя или элементов Divi, вам нужно будет сделать это внутри кода в модуле кода.

В настоящее время в коде есть только базовый стиль темного режима, применяемый к каждому из элементов один раз в темном режиме. Он состоит из темного цвета фона и светлого цвета текста.

Последние мысли

Оснащение вашего сайта Divi настраиваемым переключателем темного режима может быть отличным способом повысить UX и создать совершенно новый дизайн, который радует и облегчает глаза. Надеюсь, вам это пригодится.

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!