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

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

Теперь, когда вы используете пакет макетов для своего веб-сайта, есть вероятность, что вы захотите превратить стили пакета макетов в глобальные значения по умолчанию, чтобы вам не приходилось перемещаться туда и обратно. Но как лучше всего это сделать? Мы покажем вам пример использования на этой неделе. Мы будем использовать пакет Cyber ​​Security Layout Pack, чтобы продемонстрировать его, но будьте уверены, этот метод применим к любому пакету макетов, который вы используете.

Давайте приступим к делу!

1. Создайте новую страницу для каждого макета в Layout Pack.

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

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

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

Мы пошли дальше и обнаружили наиболее часто используемые модули в Cyber ​​Security Layout Pack, которые содержат настраиваемые стили. Эти модули также являются одними из самых популярных модулей Divi и могут быть найдены практически в любом пакете макетов:

• Текстовый модуль
• Основной кнопочный модуль
• Модуль делителя
• Модуль подписки на электронную почту
• Модуль контактной формы

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

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

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

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

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

Последний текстовый модуль, который мы откроем, содержит текстовые стили H2 и H3. Щелкните правой кнопкой мыши каждый из элементов заголовка по отдельности и выберите «Сделать стили по умолчанию». После того, как вы выполнили эти шаги, ваши текстовые модули готовы к работе!

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

1. Основной кнопочный модуль

Настройки кнопок

Обивка

2. Модуль Blurb

Настройки значков (при необходимости)

Настройки текста

Настройки текста заголовка

Настройки основного текста

3. Разделительный модуль

Настройки линии

Параметры размера

4. Модуль подписки на электронную почту

Весь модуль, кроме: маржа + размер + параметры преобразования

5. Модуль контактной формы

Весь модуль, кроме: маржа + размер + параметры преобразования

3. Сохраните повторяющиеся элементы как (глобальные) элементы для повторного использования.

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

• Дополнительная кнопка
• Третичная кнопка
• Разделы с призывом к действию
• Разделы нижнего колонтитула
• Особенности пакета макетов: модули изображений с разделителями секций / модули рекламных сообщений в разных стилях /…

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

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

4. Создайте цветовую палитру по умолчанию в параметрах темы Divi.

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

• Цвета текста
• Цвета фона
• Акцентные цвета

5. Сброс стилей модулей на существующих страницах

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

Последние мысли

В этом посте мы показали вам, как использовать новое обновление глобальных значений по умолчанию Divi, чтобы превратить пакеты макетов в глобальные значения по умолчанию. Хотя мы использовали пакет Cyber ​​Security Layout Pack, вы можете заставить этот метод работать с любым пакетом макетов, который вы выберете. Этот учебник по вариантам использования является частью нашей текущей инициативы по дизайну Divi, в рамках которой мы каждую неделю стараемся добавлять что-то дополнительное в ваш набор инструментов для дизайна. Если у вас есть какие-либо вопросы или предложения, не стесняйтесь оставлять их в разделе комментариев ниже!

Если вы хотите узнать больше о Divi и получить больше бесплатных подарков Divi, убедитесь, что вы подписались на нашу рассылку новостей по электронной почте и канал YouTube, чтобы вы всегда были одним из первых, кто узнает и извлекает выгоду из этого бесплатного контента.