Как переключиться на темную раскладку за 5 шагов, используя функции повышения эффективности Divi

При разработке веб-сайта одно из первых решений, которые вы принимаете сознательно или неосознанно, - это цветовой стиль, который вы собираетесь придать своему веб-сайту. Самые смелые из нас осмелились бы выбрать полную яркую цветовую палитру, но, будем честны, это невероятно сложно осуществить. Вот почему обычно безопаснее использовать светлый или темный макет. В разделе «Готовые макеты» библиотеки Divi вы можете найти массу светлых и темных макетов, которые вы можете использовать при создании любого типа веб-сайта. Но что, если вам нравится макет, но вы бы предпочли более темную цветовую палитру или наоборот?

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

Давайте приступим к делу!

Предварительный просмотр

Всего за 5 шагов мы собираемся изменить светлую целевую страницу Web Freelancer Layout Pack на темную.

Загрузить целевую страницу веб-фрилансера

Добавить новую страницу и включить Visual Builder

Начните с добавления новой страницы, присвоения вашей странице заголовка и переключения на Visual Builder.

Загрузить пакет макетов веб-фрилансера

Из трех вариантов, которые появляются на вашем экране, выберите загрузку готового макета.

Найдите целевую страницу пакета макетов веб-фрилансера в списке бесплатных пакетов макетов и загрузите его, нажав зеленую кнопку с надписью «Использовать этот макет».

Шаг 1. Измените общий цвет фона

Изменить цвет фона раздела первого раздела

Пора начинать! Первый шаг, который мы рекомендуем вам сделать, - это изменить цвет фона всех разделов на вашей странице. Как только вы это сделаете, вы быстро заметите, какие элементы дизайна нужно изменить, чтобы они соответствовали цвету темного фона. Откройте первый раздел страницы и выберите «# 0c0c0c» в качестве цвета фона раздела.

Расширить стиль на все разделы

Как только вы добавите цвет фона, щелкните его правой кнопкой мыши и выберите параметр «Расширить цвет фона».

Как только вы это сделаете, выберите распространить цвет фона на все разделы на странице.

Шаг 2. Измените цвета текста

Открыть модуль заголовка полной ширины и изменить цвет текста

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

Расширить стиль на все модули

Затем увеличьте этот светлый цвет текста, щелкнув правой кнопкой мыши и выбрав параметр «Расширить цвет текста».

Распространите этот новый цвет на все модули по всей странице.

Изменение пользовательских цветов с помощью функции множественного выбора

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

Теперь вы можете вносить изменения в каждый из выбранных модулей одновременно. В этом случае мы меняем цвет текста заголовка на «# 848484».

Шаг 3: измените кнопки

Открытие первой кнопки настройки полноширинного заголовка

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

Расширить стиль кнопки на все кнопки на странице

Затем щелкните правой кнопкой мыши настройки Button One и выберите параметр «Расширить стили Button One».

Расширить стиль кнопки на все кнопки по всей странице.

Изменить цвет текста кнопки 2 в разделе "Герой"

Функция расширения не достигает второй кнопки модуля заголовка полной ширины, потому что это не автономный модуль. Вот почему мы собираемся открыть настройки кнопки 2 и изменить цвет текста на '#ffffff'.

Расширить стили для всех полноразмерных заголовков на странице

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

После того, как вы щелкнули правой кнопкой мыши по цвету текста и выбрали опцию «Расширить два цвета текста кнопки», примените его ко всем полноширинным заголовкам на всей странице.

Шаг 4. Удалите пользовательское поле и замените его пользовательским заполнением.

Удалить настраиваемую маржу

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

Вместо этого используйте пользовательское заполнение

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

Шаг 5. Найдите и измените специальные настройки дизайна

Определите специальные проектные параметры

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

• Тени коробки
• Фоны столбцов
• Цвета значков
• Цвета разделителя
• …

Использовать "Найти и заменить" в цвете тени поля строки

Для этого конкретного макета нам нужно изменить цвет тени поля строки, который используется. Откройте настройки строки и щелкните правой кнопкой мыши тень блока, не меняя ее. Затем выберите вариант «Найти и заменить».

Использование функции «Найти и заменить» - лучший способ изменить определенный цветовой код на всей странице. Вы можете легко заменить его другим цветовым кодом, в данном случае «# 33302f». Это гарантирует, что вам не придется исследовать все элементы дизайна, чтобы точно увидеть, где был использован цвет.

Изменение однократных настроек вручную

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

Предварительный просмотр

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

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

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