Как настроить типографику и макет на Divi

Чтобы начать настраивать макет и типографику вашего сайта, вы должны сначала получить доступ к настройщику тем, нажав на ссылку Divi> Theme Customizer на вашей панели WordPress. Это запустит настройщик. Затем найдите панель «Общие настройки». Нажмите на панель, чтобы открыть соответствующие настройки и начать настройку. На панели «Общие настройки» вы увидите три раздела: «Параметры макета», «Типография» и «Фон».

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

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

Включить раскладку

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

Ширина содержимого веб-сайта

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

Интервал между столбцами на веб-сайте

Ширина желоба - это количество горизонтального пространства (поля) между столбцами каждой линии.

Необязательные значения ширины желоба находятся между 1 и 4.

1 представляет нулевое поле между столбцами.
2 представляет запас 3% между столбцами.
3 представляет запас 5,5% между столбцами.
4 представляет запас 8% между столбцами.

Использовать пользовательскую ширину боковой панели

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

Высота раздела и линии

Эти параметры регулируют величину вертикального интервала (верхняя и нижняя заливка) для каждого раздела и линии.

Тема акцентного цвета

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

книгопечатание

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

Размер текста тела

Это изменит тело текста по умолчанию для вашей темы. Размер по умолчанию - 14px.

Высота линии тела

Высота строки каждой строки текста.

Размер текста заголовка

Divi позволяет вам установить размер текста по умолчанию вашего заголовка здесь. Это влияет на элементы Divi в качестве заголовков модуля заголовка Fullwidth.

Буквенное пространство заголовка

Интервал букв регулирует горизонтальное пространство между буквами. Значение интервала букв заголовка влияет на все уровни заголовка (h1, h2, h3, h4, h5, h6), кавычки и заголовки слайдов.

Высота строки заголовка

Подобно значению межбуквенного интервала, значение высоты строки заголовка влияет на все уровни заголовка (h1, h2, h3, h4, h5, h6), кавычки и заголовки. скользить.

Стиль полиции

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

Шрифт основного текста и заголовка

В Divi по умолчанию используется шрифт Open Sans, но Divi предлагает на выбор почти сто шрифтов! Воспользуйтесь этими встроенными шрифтами и протестируйте лучшие из них для вашей темы.

Цвет тела

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

Цвет текста тела

Здесь вы можете изменить цвет текста вашего тела.

Цвет текста заголовка

Здесь вы можете изменить цвет ваших заголовков.

фон

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

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

Другие учебные пособия Divi

• сайты 5 для использования ресторана Divi темы
• Как добавить текст в продукт Divi WooCommerce
• Как изменить цвет меню между страницами Divi
• Как персонализировать сетки блога с Divi
• Как использовать роль DiVi редактор на WordPress
• Как создать полноэкранный слайдер Divi
• Как изменить цвет меню между страницами Divi
• Особенности, которые вы, вероятно, не знаете о Divi
• Как использовать Divi Builder в WordPress
• Как использовать модуль прокрутки видео Divi
• Как использовать модуль Flip Builder Flip
• Как добавить отзыв модуль на Divi Builder
• Как использовать текстовый модуль Divi
• Как создать слайдер на Divi
• Как редактировать роль пользователя Divi
• Как использовать модуль Divi Social Media
• Как пользоваться магазинным модулем на тему WordPress Divi
• Как использовать боковую панель Divi
• Как использовать модуль таблицы цен Divi
• Как использовать титульный модуль изданий Divi
• Как добавить видео модуль Divi
• Как использовать навигационный модуль статьи
• Как использовать модуль поиска Divi
• Как использовать модуль кошелька Divi
• Как использовать модуль пользователя в Divi Builder
• Как использовать модуль кошелька с фильтром Divi
• Как использовать ползунок полной ширины
• Как использовать модуль изображения Divi Builder
• Как использовать полноразмерный навигационный модуль Divi Builder
• Как использовать модуль галереи изображений
• Как использовать модуль карты полной ширины Divi Builder
• Как использовать модуль Divi Full Width Portfolio
• Как использовать полноразмерный заголовочный модуль Divi
• Как использовать Divi Counter Module
• Как использовать слайдер статей в Divi Builder
• Как использовать модуль Divi Email Optin