Как заменить шрифты на шрифт Divi 5 переменных дизайна

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

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

Почему статические шрифты могут создавать проблемы

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

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

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

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

Что вы должны использовать вместо этого: переменные дизайна Divi 5

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

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

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

Какие предварительные предварительные настройки группы делают

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

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

Пошаговое руководство по созданию динамической системы шрифтов с Divi 5

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

1. Создайте переменные шрифта для вашей новой системы

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

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

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

2. Добавить числовые переменные для размеров шрифтов

Переключитесь на вкладку «Числа» в Manager Variable. Здесь вы создаете переменные размера, которые работают с вашими шрифтами. Думайте об этом как о вашей шкале типографии.

Начните с размеров заголовков. Создайте переменные с именем H1, H2, H3 и т. Д. Установите каждый на другой размер, который имеет смысл для вашего дизайна. Вы можете использовать обычные значения пикселей, такие как 32px или адаптивные единицы, такие как Clamp () для размеров, которые адаптируются к другим экранам.

Текст тела тоже нуждается в переменной размера. Назовите это что -то вроде «размера тела» и установите его на удобный размер чтения, обычно от 16 до 18px.

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

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

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

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

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

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

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

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

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

Установите границы замены

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

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

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

Избегайте случайных замен

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

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

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

4. Работайте через систему шрифтов

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

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

5. Создайте пресеты с вашими переменными

Доступ к любому текстовому модулю и перейдите на вкладку Design. Найдите типографику и нажмите на значок PRESET. Выберите свою переменную шрифта заголовка из раскрывающегося меню. Примените переменную номера H1 для размеров.

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

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

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

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

6. Расширьте свои новые переменные на все элементы

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

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

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

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

Этот методический подход определяет форматирование конфликтов на раннем этапе и контролирует процесс обновления.

Divi 5 делает типографию проще

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

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

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