Превращение цветов бренда вашего клиента в цветную систему Divi 5

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

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

Понимание цветовой системы Divi 5

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

Подписаться на наш канал на YouTube

Вот три основных обновления:

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

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

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

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

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

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

Узнайте все о новой цветной системе Divi

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

Превращение цветов бренда вашего клиента в цветную систему Divi 5

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

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

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

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

1. Сохраните основной цвет вашего клиента в качестве дизайнерской переменной

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

Добавление основного цвета

Для начала откройте диспетчер переменных и переключитесь на вкладку Colors .

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

Добавление второстепенного цвета

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

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

Если вы сейчас работаете только с одним цветом, не стесняйтесь оставить вторичный слот на черный.

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

Выберите его. Это приносит базовый цвет в качестве отправной точки.

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

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

Если вы хотите сохранить вторичный цвет черным, но все же свяжите его с первичным, поверните слайдеры легкостью и насыщенности вплоть до -100.

Чтобы создать более темный оттенок, оставьте оттенок и насыщенность как есть и уменьшите только легкость.

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

2. Построить вспомогательные цвета с использованием регулировки HSL

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

Чтобы создать эти вариации, откройте панель HSL и отрегулируйте ползунки:

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

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

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

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

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

3. Замените существующие статические цвета на переменные

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

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

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

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

Давайте начнем с расширения атрибутов.

Используя расширенные атрибуты

В этом примере мы хотим назначить новый вторичный цвет всем H2S в макете. Мы начнем с применения его только к одному из них.

Как только это будет сделано, мы щелкем правой кнопкой мыши элемент и выберем атрибуты Extend. На появляющейся панели мы установим область на всю страницу и тип элемента на текст.

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

Использование и заменить

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

В этом случае мы хотим обновить цвет текста тела. Для этого мы перейдем к настройкам> Дизайн> Цвет текста тела , щелкните правой кнопкой мыши и выберите «Найти и заменить». Затем мы будем зависать над полем Значения замены и выберем нашу новую переменную.

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

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

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

Тестирование вашей новой цветовой схемы

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

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

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

Звучит больно, но не для тебя. Вы просто обновляете основной цвет, а остальная часть сайта следует.

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

В некоторых случаях цвет бренда может оставаться прежним, но вторичная нуждается в обновлении. Это просто вопрос корректировки слайдеров HSL. Не нужно касаться каждой кнопки или фона индивидуально.

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

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

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

Divi делает ваш цвет рабочего процесса в будущем

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

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

И это всего лишь один из многих, которые мы сделали за последние несколько месяцев, в том числе строитель петли, макет Flexbox и полностью переосмысленный интерфейс для современных веб -дизайнеров. Если вы еще не исследовали их, сейчас самое идеальное время.