Как применить цветовые палитры к вашему сайту Divi

В Интернете есть несколько вещей хуже, чем простой веб-сайт. Конечно, некоторые веб-сайты намеренно используют бруталистский или минималистский вид (глядя на вас, Craigslist), но даже они не являются мягкими . Имея солидную цветовую палитру безошибочного способ сделать ваш сайт выделиться из бежевой массы, те невдохновленное монохроматического eshops что де пресса больше , чем им пресса. К счастью, Divi предлагает вам сочетание нашей системы Magic Color и функции Global Colors. Вы можете легко применить цветовые палитры к своему веб-сайту Divi. Результаты обязательно произведут впечатление на ваших посетителей.

Общие советы по цветовым палитрам

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

1. Выберите темный или светлый веб-сайт.

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

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

2. Выбор цвета

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

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

Цвета фона

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

Цвет шрифта

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

Цвет гиперссылки и CTA

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

Цвет для последних штрихов

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

3. Убедитесь, что есть достаточный контраст

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

4. Найдите правильный цветовой баланс.

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

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

Как добавить цветовую палитру на свой сайт Divi

Имея все это в виду, пора углубиться в Divi и применить новую цветовую палитру вашего сайта!

Палитра Divi по умолчанию

Прежде всего, зайдите в панель управления WordPress и перейдите в Divi - Theme Options . На вкладке « Общие » вы увидите запись под названием « Палитра выбора цвета по умолчанию» . Это позволяет вам выбрать любые 8 цветов, к которым вы хотите получить быстрый доступ, в любое время, когда вы открываете параметры цвета в конструкторе Divi. По умолчанию это яркие цвета, которые используют многие люди, но они не являются полной палитрой, которую следует использовать на каком-либо отдельном веб-сайте.

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

Войдите в Divi Builder

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

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

Установить цвета как глобальные

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

Для начала зайдите в любой модуль с палитрой цветов. Под ним вы увидите ссылку под названием Global . Щелкните по нему, и вся палитра исчезнет. Отсюда вы установите, какие цвета должны быть доступны во всем мире, щелкнув значок плюс + .

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

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

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

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

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

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

На следующем экране вы решите заменить этот цвет своим глобальным. Убедитесь, что в разделе « Заменить на» вы щелкните « Глобальный», а затем выберите глобальный цвет, который нужно распространить на страницу. Обязательно установите флажок «Заменить все найденные значения в каждом типе параметра, не ограничиваясь [вставить текущий тип элемента]». Это гарантирует, что, несмотря ни на что, этот цвет будет заменен.

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

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

После этого процесс просто повторяется для каждого цвета в вашей новой палитре. Всего одно изменение для каждого цвета в вашей палитре. Не замена каждого отдельного элемента на определенный цвет.

Заключение

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

Наслаждаться!

Статья из избранного изображения: ART.ICON / shutterstock.com