Как создать цветовую систему с Divi 5

Случайный выбор цвета редко приводит к сплоченному дизайну. Если вы профессионально создаете веб -сайты, вам нужна преднамеренная система. Вы можете построить реальную систему цвета внутри Divi 5, используя переменные управления цветом и дизайна. Это цвета, которые вы устанавливаете непосредственно в визуальном редакторе, могут получить доступ в любом цветовом поле и поставляются с множеством других удобств (которые мы покажем вам ниже).

Этот пост покажет вам, как настроить гибкую, масштабируемую цветную систему в Divi 5.

Что такое цветная система?

Цветовая система-это в основном предварительно спланированная палитра цветов, используемая последовательно на вашем сайте. Это помогает всем выглядеть преднамеренно стилизованным, а не случайным образом объединенным. Для хорошей системы вам обычно нужно:

• Основной цвет : основной фирменный цвет.
• Вторичный цвет : поддерживает и контрастирует с первичным.
• Цвет текста : чистый и читаемый для заголовков и абзацев.
• Акцент : другие цвета для оповещений, уведомлений и других важных вещей (необязательно).
• Цвета фона : обычно нейтральные или тонкие оттенки.

Правило 60-30-10 применяется к цвету в веб-дизайне. Как правило, нейтральные цвета (например, фон раздела и негативное пространство) будут использоваться для 60%дизайна, основной цвет для 30%и вторичные/акцентные цвета для оставшихся 10%.

Как выбрать цвета сайта

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

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

Значения вашей компании могут даже определяться типом работы, которую вы выполняете. Слесарки и сантехники должны быть надежными, поэтому синий - отличный способ передать это. Финансовые планировщики и ландшафты занимаются ростом и устойчивостью (в их соответствующих областях), поэтому зеленый - это хороший якорь. Цветочные фермеры, центры ухода за детьми и рестораны могут опираться на красных и желтых, чтобы соединить энергию и жизненную силу со своими брендами. Как только у вас появится общая идея, используйте что -то вроде Coolors, чтобы создать простую палитру.

Создание вашей цветовой системы в Divi 5

Divi 5 поставляется с менеджером с переменной дизайна, который является самым простым способом обработки глобальных цветов. В нем у вас есть четыре предварительно назначенных глобальных цветов, чтобы вы могли работать с коробкой. Они есть:

1. Основной цвет
2. Вторичный цвет
3. Заголовок текста
4. Цвет текста тела

Шаг 1: Определите ваши базовые цвета как переменные

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

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

Эти переменные мгновенно становятся доступными повсюду в визуальном строителе Divi, который очень удобен. Но обязательно сохраните их!

Шаг 2: Создайте оттенки и оттенки с цветами HSL

Используя фильтры Divi HSL, мы можем создавать оттенки (более легкие версии наших цветов) и оттенков (более темные версии наших цветов). Для этого проекта мы сделаем вариации только для первичных и вторичных цветов. Вы можете использовать генератор цветов для создания этих цветовых вариаций.

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

Теперь нам нужно применить фильтр на этот базовый цвет, чтобы создать вариацию. Нажмите на цветовой чип, а затем выберите «Цвет фильтра», или нажмите «Смедитель цвета» для вашей новой относительной цветной переменной.

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

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

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

Применение ваших цветов в дизайне с Divi

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

Шаг 1. Создайте каркас вашей страницы

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

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

Шаг 2. Типография и цвет

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

Обратите внимание, как цвет заголовка нелен в модуле. Divi автоматически присваивает глобальный цвет заголовкам и тексту тела для вас. Конечно, вы можете переопределить его, выбрав другой цвет.

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

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

Шаг 3. Кнопки стиля

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

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

Создать состояния паря с оттенками и/или оттенками

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

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

Шаг 4. Создание секций с цветными пресемами и градиентами

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

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

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

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

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

Завершая вашу цветную систему Divi 5

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

• Определите ваши основные цвета бренда как переменные повторно используемого дизайна
• Расширить их на полезные оттенки и оттенки с помощью HSL -фильтров
• Применить их последовательно через текст, кнопки, формы и разделы
• Сохраните свой выбор в качестве пресетов, чтобы каждая новая страница следовала тем же правилам

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