Полное руководство по настройке темы Divi

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

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

Нам предстоит многое осветить, поэтому начнем с самого начала.

Создано с использованием WordPress в уме

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

Вот пример параметров настройки темы для темы TwentySeventeen:

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

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

Настройщик тем Divi по-прежнему имеет множество стандартных параметров настройщика WordPress, но также имеет гораздо больше.

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

общие настройки

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

Идентичность сайта

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

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

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

ВКЛЮЧИТЬ РАЗМЕЩЕНИЕ В КОРОБКЕ

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

ШИРИНА СОДЕРЖАНИЯ САЙТА

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

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

ШИРИНА ВЕБ-САЙТА

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

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

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

ИСПОЛЬЗУЙТЕ ПОЛЬЗОВАТЕЛЬСКУЮ ШИРИНУ БОКОВОЙ ПАНЕЛИ

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

РАЗРЕЗ И ВЫСОТА РЯДА

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

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

Например, «0» представляет 0% верхнего и нижнего заполнения, «1» представляет 1% верхнего и нижнего заполнения, «2» представляет 2% и так далее. Процент заполнения зависит от ширины контейнера (раздела или строки). Итак, если фактическая ширина раздела составляет 1080 пикселей и вы установили высоту раздела равной 1, это означает, что у вас будет…

1080 пикселей x 0,01 = 10,8 пикселей

… 10,8 пикселей отступа сверху и снизу.

Варианты варьируются от 0 до 10, так что у вас может быть до 10% заполнения.

ТЕМА АКЦЕНТ ЦВЕТ

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

Обновление цвета акцента темы также обновит следующее:

• Цвет звена тела
• Цвет заголовка виджета
• Цвет маркера виджета
• Цвет значков социальных сетей в нижнем колонтитуле
• Цвет значков по умолчанию
• Цвет активной ссылки меню нижнего колонтитула
• Цвет фона дополнительного меню
• Цвет фона в стиле слайда и полноэкранного заголовка
• Значок меню гамбургер для цвета мобильного меню
• Цвет активной ссылки основного меню
• Цвет строки раскрывающегося меню
• Цвет фона дополнительного меню
• Цвет фона дополнительного раскрывающегося меню
• Цвет фона дополнительного меню
• Цвет ссылки активного основного меню
• Цвет активной ссылки меню нижнего колонтитула

Типография

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

РАЗМЕР ТЕКСТА

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

Совет по дизайну: кажется, что 14 пикселей слишком мало для стандартного размера основного текста. Вы действительно не должны уменьшать размер шрифта основного уровня менее 16 пикселей. Те из нас, кому около 40 лет и старше, будут вам благодарны. Даже большинство браузеров используют размер шрифта стандартного базового уровня 16 пикселей.

ВЫСОТА ЛИНИИ КУЗОВА

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

Совет разработчика : высота линии измеряется значением длины «em». Divi по умолчанию - 1,7em для основного текста. Это значение em лучше, чем значение в пикселях (px), потому что оно основано на текущем размере шрифта элемента и поэтому масштабируется с родительским встроенным значением (или, в нашем случае, текущим размером шрифта). Значение «1.7em» в основном представляет 1,7-кратный текущий размер шрифта. Итак, если ваш текущий размер шрифта составляет 16 пикселей, высота строки будет 27,2 пикселей. Это дает вам 5,6 пикселя дополнительного пространства вверху и 5,6 пикселя внизу. Кажется, это хороший начальный интервал (пробел между строками текста) для удобочитаемости.

РАЗМЕР ТЕКСТА ЗАГОЛОВКИ

Divi позволяет вам установить здесь размер текста заголовка h1 по умолчанию. Это влияет на элементы Divi, такие как заголовки модуля полноразмерного заголовка. Если вы хотите настроить размер других уровней заголовков (h2, h3 и т. Д.), Я предлагаю добавить их в дополнительный CSS (это будет рассмотрено позже в этой публикации).

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

Значение по умолчанию для размера текста заголовка - 30 пикселей. Это хороший безопасный размер для начала. Тем более, что для некоторых заголовков потребуется более длинный текст. Однако я склонен к большему размеру заголовка, чтобы приспособиться к растущим размерам мониторов. Кроме того, большинству клиентов нужны веб-сайты с простыми и короткими заголовками, такими как «О нас» и «Свяжитесь с нами», которые лучше смотрятся с большим размером шрифта. Мне нравится устанавливать заголовки h1 не менее 48 пикселей .

РАССТОЯНИЕ БУКВ В ЗАГОЛОВКЕ

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

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

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

ВЫСОТА ЛИНИИ ЖАТКИ

Как и в случае значения межбуквенного интервала, значение высоты строки заголовка влияет на все уровни заголовка (h1, h2, h3, h4, h5, h6), цитаты и заголовки слайдов. Из-за большего размера шрифта по умолчанию используется 1em. Я думаю, что высота строки где-то между 1em и 1.3em выглядит хорошо, особенно когда заголовок занимает две строки или более.

СТИЛЬ ШРИФТА ЗАГОЛОВКИ

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

ЗАГОЛОВОК И КОРПУСНАЯ ШРИФТА

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

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

ЦВЕТ КРЕПЛЕНИЯ ТЕЛА

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

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

ЦВЕТ ТЕКСТА ТЕЛА

Здесь вы можете изменить цвет вашего основного текста. Популярные блоги, такие как New York Times и Smashing Magazine, используют цвет основного текста # 333333 . На мой взгляд, это лучше читается на белом фоне.

ЦВЕТ ТЕКСТА ЗАГОЛОВКИ

Здесь вы можете изменить цвет ваших заголовков. Если вы используете оттенок черного, я бы сделал его немного темнее, чем основной текст, чтобы он немного выделялся. Что-то вроде # 121212 подойдет .

Фон

Эта опция устанавливает фон для вашей темы. Для темы Divi этот параметр действительно применим только к макету коробки . Цвет фона по умолчанию - белый (#ffffff), если вы не измените его здесь. Вы также можете добавить фоновое изображение, если хотите.

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

Заголовок и навигация

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

Формат заголовка

Стиль заголовка

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

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

Панель основного меню

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

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

Сделать полную ширину

Это расширяет меню на всю ширину окна браузера.

Скрыть изображение логотипа

При желании здесь вы можете полностью скрыть изображение логотипа из своего меню.

Высота меню

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

Максимальная высота логотипа

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

Размер текста, интервал между буквами, шрифт, стиль шрифта, цвет текста, цвет активной ссылки

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

Фоновый цвет

Это позволяет вам изменить цвет фона вашего основного меню.

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

Параметры раскрывающегося меню

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

Вторичная строка меню

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

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

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

Фиксированные настройки навигации

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

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

Элементы заголовка

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

Социальные иконки

По умолчанию Divi отображает значки для Facebook, Twitter, Google+ и RSS. Вы можете редактировать эти профили в параметрах темы Divi.

Нижний колонтитул

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

Макет

Здесь вы можете выбрать один из 5 макетов для раздела нижнего колонтитула.

Вы также можете установить цвет фона нижнего колонтитула, который по умолчанию установлен на # 222222.

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

Виджеты

Если вы добавили виджеты в свои разделы нижнего колонтитула, вы можете стилизовать то, как эти виджеты будут выглядеть здесь.

Виджеты не уникальны для Divi. Они встроены в wordpress и могут быть найдены на панели инструментов WordPress в разделе Внешний вид> Виджеты . Там вы можете увидеть четыре области нижнего колонтитула, в которые вы можете добавлять виджеты. Любые виджеты, которые вы добавляете в эти разделы, будут отображаться в области нижнего колонтитула.

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

Элементы нижнего колонтитула

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

Меню нижнего колонтитула

Если у вас есть меню нижнего колонтитула, вы можете оформить его здесь.

Нижняя панель

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

Редактировать кредиты в нижнем колонтитуле

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

Кнопки

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

Стиль кнопок

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

Цвет текста

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

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

Кнопки при наведении курсора

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

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

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

Блог

Почта

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

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

Мобильные стили

Мне нравится этот раздел. Здесь вы можете настроить внешний вид вашего сайта на мобильных устройствах и увидеть результаты в режиме реального времени.

Стили планшета и телефона

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

Совет по дизайну №1. Мне нравится настраивать макет телефона, чтобы установить для параметра «Высота строки» значение «0». Это создает лучший поток контента при прокрутке на телефоне, поскольку убирает интервал между строками.

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

Рабочий стол: 48 пикселей

Таблетка: 40 пикселей

Телефон: 32px

Мобильное меню

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

Цветовые схемы

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

На мой взгляд, лучше оставить это значение по умолчанию.

Меню и виджеты

Вам больше не нужно слепо редактировать меню или виджеты на панели инструментов WordPress. Теперь вы можете добавлять и настраивать эти элементы и видеть, как они оживают на вашей странице в режиме реального времени. Обожаю удобство!

Статическая первая страница

По умолчанию WordPress отображает ваш последний пост на вашей главной странице (домашней странице). Вы можете изменить это на любую статическую страницу в этом разделе. И вы также можете назначить свою страницу сообщений (или страницу блога).

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

Дополнительный CSS

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

Дополнительные примеры CSS

Пример # 1: отрегулируйте размер всех заголовков

Хорошим примером дополнительного CSS может быть стили для оставшихся тегов заголовка. Divi позволяет настраивать параметры шрифта заголовка, но это касается только заголовков h1. Вы можете использовать поле Additional CSS для ввода остальных настроек тегов заголовка (h2, h3, h4 и т. Д.). Мне нравится использовать следующий масштаб: 16, 18, 21, 24, 36, 48.

h2 {
	font-size: 36px;
}

h3 {
	font-size: 24px;
}

h4 {
	font-size: 21px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}

Пример # 2: сопоставление заполнения нижнего абзаца с высотой основной строки

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

p { padding-bottom: 1.7em}

Поскольку значение длины em основано на родительском font-size, если вы изменили базовый размер шрифта на что-то еще в настройщике темы, значение 1.7em изменится соответствующим образом.

Пример № 3: Добавить атрибут подчеркивания к вашим ссылкам

Добавьте атрибут подчеркивания к основным ссылкам.

a {
    text-decoration: underline;
}

Экспорт и импорт настроек настройщика Divi для вашего следующего проекта

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

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

Чтобы экспортировать настройки, щелкните значок переносимости в верхней части настройщика темы Divi.

Дайте вам имя экспортируемого файла и нажмите кнопку «Экспорт настроек Divi Customizer».

Теперь вы можете использовать этот файл .json в будущем, щелкнув тот же значок переносимости в настройщике темы Divi и выбрав «Импорт» вместо экспорта. Затем все, что вам нужно сделать, это загрузить файл .json и нажать «Импортировать настройки Divi Customizer».

Вот и все.

Что включает в себя настройки Divi Customizer?

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

1. общие настройки
2. Заголовок и навигация
3. Нижний колонтитул
4. Кнопки
5. Блог
6. Мобильные стили
7. Цветовые схемы

Последние 4 раздела относятся к WordPress и не переносятся на другие установки Divi. Эти разделы включают:

1. Меню
2. Виджеты
3. Статическая первая страница
4. Дополнительный CSS

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

Как хранятся стили настройщика Divi

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

Заключительные мысли

Настройщик тем Divi имеет несколько довольно мощных опций, а процесс настройки удобен и приятен в работе. И более глубокое понимание того, что могут сделать эти параметры, определенно улучшит то, как вы создаете веб-сайты с Divi. Если вы еще этого не сделали, найдите время, чтобы изучить, какими будут ваши оптимальные базовые параметры для проекта, подключите их к настройщику и создайте файл экспорта. Вы будете удивлены тем толчком (и уверенностью), который это даст вам при запуске нового проекта.

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!