Пропустить

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

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 901.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

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

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

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

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

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

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

Включить темный режим

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

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

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

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

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

Раздел Divi

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

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

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

Содержание

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

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

Модуль сводки Divi

Дизайн

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

  • Цвет значка: # 666666
  • Выравнивание изображения / значка: слева
  • Размер шрифта иконки: 22 пикселей
Конфигурация значка Divi
  • Ширина: 50px
  • Выравнивание модуля: центр
  • Высота: 25px
Конфигурация размеров Divi
  • Маржа: минимум 0px
  • Закругленные углы: 4px
  • Ширина границы: 2 пикселя
  • Цвет границы: # 666666
Конфигурация границы Divi

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

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

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

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

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

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

Кнопка переключения Divi

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

Поскольку текст псевдоэлемента сообщения наследует стили основного текста, мы можем добавить стили основного текста, используя параметры 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 следующим образом:

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

  • Класс CSS: et-dark-toggle
Код css divi

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

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

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

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

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

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

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

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

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

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

Выберите макет divi 1

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

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

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

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

Все разделы

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

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

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

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

Добавить во все специализированные разделы

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

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

Добавить в текстовые модули

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

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

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

Очистить режим

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

Темный режим

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

Вот еще несколько ресурсов, которые могут вас заинтересовать.

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

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

Эта статья содержит комментарии 0

Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
0 акции
доля
чирикать
Регистрация