Как добавить темный режим в Elementor

В этом уроке мы добавим темный режим интерфейса на веб-сайт Elementor.

Содержание этой статьи точно соответствует шагам, описанным в нашем общем посте «Как добавить темный режим в WordPress» пару месяцев назад, но мы адаптировали все здесь, чтобы показать вам, как можно быстро и легко добавить темный режим. на сайт Elementor.

Если вы не знакомы с темным режимом, подумайте о своем устройстве iOS, странице Facebook или браузере Reddit. Все эти пользовательские интерфейсы позволяют переключаться между «нормальной» цветовой схемой пользовательского интерфейса и «темной» цветовой схемой пользовательского интерфейса.

Темный режим — отличное дополнение к вашему веб-сайту, потому что он облегчает чтение контента ночью, потребляет меньше заряда батареи и просто выглядит круто. За последние пару лет он набирает гораздо большую популярность, поскольку большинство основных приложений и платформ добавили свой собственный «ночной режим».

Если вы создали веб-сайт с помощью Elementor, относительно легко добавить ночной режим в интерфейс.

В редакторе уже есть темный режим на бэкенде — теперь пришло время добавить эту функциональность во внешний интерфейс.

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

Поиск цветов темного режима

Первым шагом к добавлению темного режима в Elementor является поиск/генерация цветов темного режима.

Нам нравится использовать бесплатный веб-сайт под названием Color Hunt, чтобы найти темные цветовые палитры, которые мы можем легко интегрировать в наш веб-сайт.

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

Вот некоторые из наших переходов к цветам, когда мы делаем темные режимы для сайтов Elementor:

Прочтите наше руководство по использованию Coolors.co здесь.

Планирование темного режима

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

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

Добавление темного режима в Elementor

Чтобы добавить темный режим в Elementor, мы будем использовать плагин WordPress, предназначенный для этой задачи. Конечно, вы можете сделать это с помощью JavaScript и CSS (что, по сути, и делает этот плагин), но такой способ сэкономит вам много времени и усилий.

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

Плагин называется WP Night Mode и находится в свободном доступе в репозитории WordPress. Есть пара других предложений, хотя ночной режим WP на сегодняшний день является самым мощным и расширяемым (не говоря уже о том, что он бесплатный!).

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

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

                            

                        
Язык кода: JSON / JSON с комментариями ( json )

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

                            

                        
Язык кода: JSON / JSON с комментариями ( json ) 

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

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

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

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

Пользовательское приложение ночного режима CSS в Elementor

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

 body.wp-night-mode-on .elementor-selector { night mode styling }

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

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

Это можно добавить для каждой страницы с помощью расширенных пользовательских настроек CSS Elementor для страницы, пользовательского ввода CSS в настройщике WordPress или стороннего плагина, такого как YellowPencil.

Вы можете убедиться, что ваши пользовательские стили CSS применяются только к ночному режиму, добавив к ним префикс «body.wp-night-mode-on», затем добавив свой общий селектор и, наконец, добавив правила стиля.

Например, это изменит любой элемент шрифта, который имеет CSS-класс element-class, на черный только при включенном ночном режиме.

body.wp-night-mode-on .element-class {color: #000; }

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

Рабочий процесс инструментов разработки

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

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

Здесь вы можете видеть, что наш заголовок определяется селектором h2 и пользовательским классом CSS «.Elementor-heading-title».

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

body.wp-night-mode-on h2 .Elementor-heading-title {color: #fff; }

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

Затем мы записываем все правила стилей CSS для темного режима в таблице стилей рабочего стола, используя бесплатный инструмент Microsoft Visual Studio Code.

Как правило, мы применяем стиль к общим селекторам, таким как h1, h2, h3 или Section или Div, а затем точно настраиваем его, используя уникальный класс, назначенный каждому элементу Elementor. Например, если мы хотим изменить цвет фона определенного столбца в Elementor, все, что нам нужно сделать, это определить его уникальный класс CSS.

Из этого уникального класса CSS мы создаем наше правило CSS:

body .wp-night-mode-on .elementor-element-5b14c912 { background-color : rgba ( 0 , 0 , 0 , 0 ); }
 Язык кода: CSS ( css )

Опять же, это правило записано в нашей таблице стилей, содержащейся в коде Visual Studio.

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

Рабочий процесс продолжается до тех пор, пока таблица стилей не будет построена. Firefox Devtools для определения селектора элемента, VS Code для записи css.

Затем мы копируем и вставляем его непосредственно в пользовательский ввод CSS в разделе «Настройка внешнего вида» и проверяем, применяется ли наш ночной режим/темный режим ко всем элементам сайта.

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

Рабочий процесс желтого карандаша

Наше агентство использует YellowPencil как способ управления пользовательским CSS для наших веб-сайтов Elementor и хотело показать вам, как это интегрируется в наш рабочий процесс при добавлении темного режима в Elementor. С помощью YellowPencil вы можете указать и щелкнуть определенные элементы, и он автоматически заполнит ваш редактор CSS соответствующим селектором.

Если вам интересно, взгляните на эту статью:

YellowPencil экономит нам много времени и позволяет легко применять и управлять множеством пользовательских стилей CSS.

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

После создания этого базового кода обязательно добавьте к нему префикс body.wp-night-mode-on , нажмите «Сохранить», и он будет применен к вашему сайту.

Общие правила CSS темного режима для Elementor

Вы можете изменить большинство основных заголовков, просто:

body .wp-night-mode-on h1 , body .wp-night-mode-on h2 , body .wp-night-mode-on h3 , body .wp-night-mode-on h4 , body .wp-night-mode-on h5 , body .wp-night-mode-on h6 { color : #fff }
 Язык кода: CSS ( css )

Вы можете изменить фон раздела, указав все разделы для изменения:

body .wp-night-mode-on section { background-color : #2F374A }
 Язык кода: CSS ( css )

Вы также можете сделать это со столбцами и другими селекторами.

body .wp-night-mode-on .elementor-column { background-color : #2F374A }
 Язык кода: CSS ( css )

Общие CSS-селекторы Elementor включают в себя:

• элементор-ряд
• elementor-изображение
• элементор-виджет
• элементор-кнопка

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

С:

body .wp-night-mode-on span { background-color : #2F374A }
 Язык кода: CSS ( css )

Вы также можете установить эффекты наведения (хотя вы захотите быть конкретными с вашим выбором):

body .wp-night-mode-on span :hover { background-color :pink}
 Язык кода: CSS ( css )

Если изображения работают на вашем темном фоне, вы можете оставить их в покое, но часто у вас есть темные изображения, которые необходимо изменить. Вы обращаетесь к изображениям в темном режиме Elementor, используя набор методов.

Во-первых, вы можете просто изменить цвет фона (как мы сделали в приведенном выше примере).

вы также можете применить фильтр CSS invert(1), чтобы полностью инвертировать цвета. Это здорово, если у вас есть сплошной PNG с прозрачным фоном.

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

 Filter : brightness(0) invert (1)
 Язык кода: HTTP ( http )

Вы также можете просто заменить исходное изображение, скрыв его (непрозрачность, отображение или видимость) и используя background-image в его оболочке, чтобы заменить его чем-то новым.

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

Ютуб Учебник

Если вам интересно, вот наш учебник на YouTube. это не создано специально для Elementor, но оно даст вам общее пошаговое руководство и поможет вам визуализировать процесс добавления темного режима во внешний интерфейс веб-сайтов Elementor.

Вывод

Мы надеемся, что эта статья была полезной и научила вас, как добавить темный режим интерфейса на веб-сайт Elementor. Для получения дополнительной информации вы можете ознакомиться с этой статьей, хотя она содержит практически ту же информацию (не адаптирована для Elementor).

Мы применяем этот эффект на многих клиентских веб-сайтах, поэтому, если у вас есть какие-либо конкретные вопросы, не стесняйтесь обращаться к нам в разделе комментариев.