Как быстро изменить стили пакетов макетов с помощью находки и замены

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

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

Что находит и заменяет в Divi 5

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

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

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

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

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

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

Использование поиска и замены в Divi 5

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

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

Это открывает панель Find и замените множество вариантов:

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

Например, мы заменяем размер шрифта от 30 пикселей на жидкий зажим (20px, 4VW, 50px). Мы выбрали всю страницу и все элементы, так как хотим обновить все заголовки на странице.

Нажмите кнопку «Найти и заменить» и посмотрите, что происходит. Все заголовки с размером шрифта 30PX теперь имеют значение Fluid Clamp ().

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

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

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

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

Давайте продолжим с тем же примером, обновив все размеры шрифтов. Но на этот раз, вместо того, чтобы заменить 30px на прямое значение зажима, мы заменим его на переменную с именем размер шрифта H3.

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

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

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

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

Вот где это становится интересным. Нужно настроить этот размер шрифта позже? Перейдите к менеджеру переменных , откройте переменную размер шрифта H3 и измените значение. Обновите зажим с зажимом (24px, 5VW, 60px) и каждый заголовок, используя эти обновления переменной автоматически.

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

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

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

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

Как заменить стили на пакете макета

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

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

1. Проверьте стили дизайна вашего макета

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

• Размеры шрифтов: 30px используется для всех заголовков H3, и 48px для H2S на нескольких страницах
• Шрифты: Poppins используется последовательно для всех заголовков
• Основная кнопка: Цвет фона - #4449E0 с белым текстом
• Заполнение: большинство разделов используют 60px верхнюю и снизу
• Значки рекламы: размер значка установлен на 24px
• Границы Blurb: к модулям Brond не применяется граница
• Фоны раздела: зеленый цвет #47be68 появляется в разделе нижнего колонтитула почти каждой страницы

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

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

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

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

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

Создание цветной переменной

В примере ранее я обнаружил, что значки Blurb используют цвет #4449E0, но я хочу переключить его на свой основной цвет бренда, #6C012A. Для этого я создаю цветную переменную.

Перейдите к менеджеру переменной с левой боковой панели, затем откройте цветной столбец.

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

Создание численной переменной

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

Создание переменной шрифта

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

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

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

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

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

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

Изменение цветов икон

Во -первых, давайте изменим цвет значков на нашу сохраненную первичную цветную переменную бренда . Перейдите к настройкам рекламы> Дизайн> Изображение и значок. Теперь наведите вариант цвета значка и нажмите на три точки. Выберите «Найти и заменить» .

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

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

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

Изменение всех заголовков

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

Обновление ширины границ всех модулей Blurb

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

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

Бонусный шаг: создать и сохранить пресеты (необязательно)

В то время как переменные поиска и замены и проектирования дают вам прочную основу, есть дополнительный шаг, который накапливается на этой системе еще дальше. ПРЕДУПРЕТЫ ПОЛУЧИТЕ ВАС КОМПЛЕКТЫЙ ПОЛУЧЕНИЕ И ИСПОЛЬЗОВАНИЕ ИХ В любом месте с одним щелчком.

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

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

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

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

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

Узнайте все о пресетах Divi Option Group

После применения всех сохраненных переменных дизайна, вот как выглядят версии до и после:

4. Примените тот же процесс на другие страницы

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

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

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

Обновленная целевая страница курса с использованием переменных находки и замены и проектирования Divi

Внесите изменения в компоновке за секунды с поиском и заменой

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

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

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