Как реализовать тёмный режим на вашем сайте с Divi

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

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

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

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

обследование

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

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

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

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

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

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

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

Добавить сводный модуль

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

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

Содержание

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

Дизайн

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

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

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

• Маржа: минимум 0px
• Закругленные углы: 4px
• Ширина границы: 2 пикселя
• Цвет границы: # 666666

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

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

переполнение: видимое! важное;

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

содержимое: "light"; позиция: абсолютная; слева: -35px; верх: 0px;

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

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

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

• Body Font: Робото
• Цвет основного текста: # 666666
• Размер основного текста: 13px
• Интервал букв тела: 1px

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

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

Создайте новый модуль кода под модулем Blurb в том же столбце.

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

/*** 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;}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 Firefoxe.code === 22 ||// Firefoxe.code === 1014 ||// test name field too, because code might not be present// everything except Firefoxe.name === 'QuotaExceededError' ||// Firefoxe.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&// acknowledge QuotaExceededError only if there's something already storedstorage.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");}});

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

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

Blurb модуль класса

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

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

Класс способен на темный режим

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

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

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

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

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

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

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

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

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

Поскольку стиль темного режима будет применяться только к элементам с CSS-классом «способный и темный режим», мы можем добавить на страницу разные способы.

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

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

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

Все разделы

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

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

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

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

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

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

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

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

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

Дополнительные ресурсы

Вот больше Ressources это может вас заинтересовать.

• Как настроить типографику и макет на Divi
• Как добавить повторяющийся скользящий призыв к действию на Divi
• Как выровнять элементы в одной строке на Divi
• Как создать анимированные разделы, нажав на Divi Builder

Заключительные мысли

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