Как заменить статические стили на переменные дизайна Divi 5

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

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

Divi 5 готов к использованию на новых сайтах.

Что такое «статические стили»?

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

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

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

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

Как Divi 5 облегчает замену статических стилей

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

Переменные дизайна позволяют вам определить ваши глобальные стили

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

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

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

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

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

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

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

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

Узнайте все о переменных дизайна

Найти и заменить позволяет переключаться с статических на глобальные стили

Функция Divi 5 Find and Replicy позволяет быстро обновить значения стиля по вашему макету без редактирования каждого модуля индивидуально. Он предназначен для того, чтобы помочь вам изменить статические значения, такие как цвета, шрифты, расстояние или любые другие настройки, которые повторяются по разделам из одной отправной точки с несколькими щелчками.

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

Это открывает новую находку и заменить панель. Здесь вы можете внести желаемые изменения и применить их оптом.

• (1.) Исходный элемент: настройка, на которую вы нацелены (например, текст, цвет или расстояние). Откройте выпадающий список, и вы заметите, что это на самом деле иерархия слоев.
• (2.) Найдите значение: точное значение, которое вы хотите заменить, например, конкретный шрифт или цветовой код.
• (3.) Замените значение: новое значение или переменная, которую вы хотите применить вместо этого.
• (4.) Найдите и замените в месте: выберите, где применить изменение. Этот модуль, раздел или вся страница.
• (5.) Найти и заменить в типе элемента: решить, должно ли изменение применяться ко всем элементам или только конкретные типы модулей.
• (6.) Замените только идентичные поля: при включении замены возникают только в том случае, если как настройка, так и значение точно соответствуют.

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

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

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

В значении Find введите значение, которое будет заменено. Для нашего примера это Medula One, текущий прикладной шрифт. В значении замены выберите новое значение, которое вы хотите применить. Давайте выберем Aclonica.

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

И это все. Просто нажмите «Найти и заменить», а через секунды обновляются 20 экземпляров. Обратите внимание, что текст тела и шрифты кнопок остаются нетронутыми? Это потому, что они используют разные значения. И вот как точна система.

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

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

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

Узнайте все о поиске и замените

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

Как заменить статические стили сохраненными переменными

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

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

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

1. Сохраните переменные дизайна

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

• Ширина границы строк
• Кнопка накладки
• Заголовок текст
• Текс тела
• Цвет текста тела

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

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

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

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

2. Используйте и замените, чтобы переключить статические стили на переменные

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

Прямо сейчас каждая кнопка использует вручную прокладку: 6px для сверху и внизу, а 1px для слева и справа. Чтобы обеспечить последовательность и облегчить обновления, я создал две переменные:

• Button-T = 12px для верхней и нижней прокладки.
• Кнопка-L = 32px для левой и правой прокладки.

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

На панели «Найти и заменить» я заменю существующее статическое значение сохраненной переменной из менеджера переменной.

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

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

3. Преобразовать предпочтительные стили в пресеты (необязательно)

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

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

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

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

Обновление стилей вашей страницы проще, чем когда -либо

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

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

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

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

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

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

Сделайте массовые изменения легко с находкой и заменой

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

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

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