Тъмният режим продължава да набира популярност популярност като удобна опция за потребителите да преживеят мрежата с по-малко напрежение на очите си. Нека си признаем, всички сме склонни да прекарваме повече време в гледане на екрани, отколкото би трябвало, така че всяко допълнително удобство за потребителското изживяване (като тъмен режим) може да помогне много. 

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

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

Нека да започнем!

изследване

Ето визуализация на дизайна, който ще изградим в този урок.

Ето копчето за персонализиран тъмен режим, което ще създадем.

И ето преди и след за тъмен режим, приложен към едно от нашите предварително дефинирани оформления.

И ето превключвателят за тъмен режим, добавен към глобална заглавка. Забележете как режимът светлина / тъмнина остава, когато разглеждате сайта.

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

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

За да започнете, добавете ред с една колона към раздела по подразбиране, когато изграждате от нулата с Divi на предния край.

Добавяне на обобщен модул

За да изградим персонализирания превключвател, ще проектираме модул Blurb с малко персонализиран CSS.

Добавете нов текстов модул за представяне към реда.

Съдържание

Премахнете фиктивното съдържание по подразбиране за заглавието и основния текст. След това добавете квадратната икона на мястото на изображението.

Концепция

Отидете на настройките на дизайна и актуализирайте следното:

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

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

• Марж: 0px ниско
• Заоблени ъгли: 4px
• Ширина на границата: 2px
• Цвят на границата: # 666666

Персонализиран CSS

След като дизайнът е на мястото си, преминете към разширения раздел. Под Персонализиран CSS добавете следния персонализиран CSS към основния елемент, за да сте сигурни, че преливането не е скрито от стила на заоблените ъгли.

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

След това добавете следния персонализиран CSS към елемента After:

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

Това добавя етикет към модула Blurb, който при кликване ще променим от „светъл“ към „тъмен“.

Дизайн на текста на тялото

Тъй като пост псевдоелементният текст наследява стиловете на основния текст, можем да добавим стилове на основния текст, като използваме опциите Divi, както следва:

• Шрифт на тялото: Roboto
• Цвят на основния текст: # 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 и добавете персонализиран клас CSS, както следва:

• CSS клас: et-dark-превключване

Клас с възможност за тъмен режим

Също така трябва да добавим персонализиран CSS клас към всеки елемент Divi, който искаме да има възможност за тъмен режим. След като елементът има клас CSS, този елемент ще наследи персонализирания CSS "тъмен режим" в кода, който добавихме, след като тъмният режим беше активиран. Този метод ни дава по-голям контрол върху дизайна на тъмния ни режим, тъй като някои елементи може да не изискват стилизиране в тъмен режим.

За начало можем да добавим тъмен режим към секцията, съдържаща нашия тъмен режим.

Отворете параметрите на секцията и добавете следния CSS клас:

• CSS клас: способен на et-dark режим

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

Сега, когато разполагаме с CSS кода и класовете, сме готови да приложим функционалността и дизайна на Dark Mode към цяла страница в Divi. За целта ще използваме нашето предварително оформление на целевата страница на мобилното приложение.

За да добавите оформлението, отворете менюто с настройки в долната част на визуалния конструктор и щракнете върху иконата Добавяне на ново оформление.

След това изберете оформлението на целевата страница на мобилното приложение от раздела Предефинирани оформления.

Уверете се, че опцията „Замяна на съществуващо съдържание“ НЕ е избрана. Не искате да изчистите секцията с превключвателя за тъмен режим.

Тъй като стилът на тъмния режим ще се прилага само за елементи с CSS клас "способен и тъмен режим", можем да изберем да добавим към страницата по различни начини.

1. Можем да добавим CSS класа към всеки елемент на страницата поотделно.
2. Можем да разширим CSS класа до елементи по цялата страница (това би било по-бързо, отколкото да го правим ръчно). Например, бихме могли да отворим настройките на раздела за горната секция и да разширим CSS класа за тази секция до всички раздели на страницата.
3. Можем да добавим клас CSS към глобалните настройки по подразбиране на елемента. Това ще приложи CSS класа към всички елементи в целия сайт, добавяйки възможност за тъмен режим в целия сайт. Например, бихме могли да отворим настройките на раздела и да щракнем върху иконата по подразбиране, за да променим настройките по подразбиране за общия раздел. След това можем да добавим CSS класа и да го регистрираме като CSS клас за всички раздели на сайта.

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

За този пример ще актуализираме елементите на страницата, като добавим класа CSS към глобалните настройки по подразбиране към раздели и текстови модули. Освен това ще правим някои допълнения към други елементи на страницата.

Всички раздели

За да добавите CSS класа към всички секции, отворете настройките на горната секция, която съдържа превключвателя на тъмния режим. След това променете глобалните настройки по подразбиране и добавете следния клас CSS към глобалните настройки по подразбиране:

• CSS клас: способен на et-dark режим

Всички специализирани секции

Освен това добавете класа CSS към глобалните настройки по подразбиране в специализирания раздел.

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

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

За да тествате резултата, отидете на страницата на живо и кликнете върху превключвателя на тъмния режим в горната част на страницата.

Ето как трябва да изглежда страницата в ясен режим.

И това трябва да изглежда страницата в тъмен режим.

Допълнителни ресурси

Ето и други грабене на ресурси това може да ви заинтересува.

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

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

Оборудването на вашия сайт Divi с персонализиран превключвател на тъмен режим може да бъде чудесен начин да подобрите потребителското изживяване и да създадете изцяло нов дизайн, който едновременно радва и облекчава окото. Надявам се това да ви бъде полезно.