Сравнение сборщиков цветов Divi 4 и Divi 5

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

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

Сборщики цвета сравнивали

Поместите их бок о бок, и вы сразу увидите, насколько мощный новый интерфейс. Сборщик цветов Divi 4 хорошо послужил нам знакомым радужным спектром и подходом к выбору.

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

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

Где диви 4 стал ограниченным

Однако не все были идеальными. Все использовали только коды HEX или RGBA. Получение более легкой версии вашего синего означало угадание или использование другого приложения, чтобы выяснить его. Если ваш брендинг часто нуждается в 20% темнее или на 40% более легких цветов, чем основной цвет бренда, Divi 4 не мог бы сделать это для вас.

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

Какие визуальные изменения Диви

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

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

То, что вы видите, - это Divi, перемещающийся от индивидуального выбора цвета к цветной системе. Divi 4 был построен для «Мне нужен этот конкретный синий». Divi 5 был построен для «Мне нужен синий, который на 20% легче, чем мой основной цвет, и автоматически обновляются, когда я полностью меняю цвета своего бренда».

Интерфейс должен был измениться, потому что он изменилось.

Новый цветовой сборщик Divi 5

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

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

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

Как на самом деле работает новая система

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

Divi 5's HSL Color Ficker vs Divi 4

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

Как работают глобальные цвета Divi 4

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

Большинство людей устанавливают три или четыре основных цветов бренда таким образом. Он превосходит охоту через шестигранные коды или пытается вспомнить, использовали ли вы #2E86C1 или #3498DB для ваших ссылок.

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

Почему Divi 5 перешел на проектные переменные

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

Каждая переменная получает правильное имя и описание. Вместо «Global Color 3» вы можете назвать его «текст заголовка серым» или «тонким фоновым наложением». Через шесть месяцев вы точно знаете, для чего это.

Но вот где все становится интересным. Переменные могут ссылаться друг на друга и формировать отношения. Установите свой основной зеленый в качестве основы. Создайте «сгоревший мх», который берет это зеленое и уменьшает его яркость. Затем построите «тень (сожженный мх)», которая приносит этот сгоревший цвет мха и снижает непрозрачность до 15%.

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

Ключевое отличие на практике

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

Настройка вашей цветовой системы в Divi 4 против Divi 5

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

Настройка цветов в Divi 4

Ваш выбор формирует то, как посетители испытывают ваш сайт. Посмотрите на подход к управлению цветом Divi 4 принимает:

1. Добавьте свои глобальные цвета

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

У вас уже есть примененный цвет, который вы хотите преобразовать? Щелкните правой кнопкой мыши и выберите «Преобразовать в Global». Это добавляет этот точный цвет в вашу глобальную палитру и переключает модуль, чтобы использовать глобальную версию. Это очень полезно, когда вы понимаете, что с самого начала должны были сделать что -то глобальное.

Волшебные цвета предложения

Функция Magic Color's Divi 4 создает скоординированные палитры из вашего существующего выбора дизайна. Вместо того, чтобы догадаться, какие цвета работают вместе, этот инструмент создает предложения, основанные на том, что вы уже использовали.

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

2. Применение ваших глобальных цветов

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

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

3. Изменение ваших глобальных цветов

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

Настройка ваших цветов в Divi 5

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

1. Создайте вариацию базового цвета

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

2. Постройте относительные цвета с вашей базы

Теперь вы можете создавать цветовые вариации, связанные с вашим базовым цветом. Добавьте новый цвет в диспетчера переменной дизайна и выберите свой базовый цвет.

Используйте слайдеры HSL, чтобы настроить его: нижняя легкость на 25% для заголовка текста, 20% для текста тела; Поднимите легкость на 20% для состояний наказания или изменить насыщение для приглушенного фона. Дайте эти вариации четкие имена, такие как «Deep Orange» и «Bright Crimson» или «Hover State (основной цвет)», «Приглушенный фон (вторичный цвет)».

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

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

3. Примените переменные к своим элементам

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

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

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

4. Строительство предустановки, которые эта ссылка на цветовые переменные HSL

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

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

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

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

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

5. Развертывание цветов на вашем сайте

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

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

Divi 5 Найдите и замените функцию, ускоряет процесс преобразования для существующих сайтов с разбросанными статическими цветами. Щелкните правой кнопкой мыши любое цветовое поле и выберите «Найти и заменить».

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

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

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

Новый сборщик цвета подойдет вашему рабочему процессу

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

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

Попробуйте новую систему цвета в Divi 5 сегодня!