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

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

В данной статье рассмотрим функционал, настойки и особенности пресетов темы.

Замена глобальных настроек по умолчанию

Предположим,  у меня на сайте есть три основные дизайна кнопок, которые используются повсеместно. Назначаем каждой из этих трех дизайнов кнопок свои собственные глобальные предварительные настройки (пресеты)  «Кнопка 1», «Кнопка 2» и «Кнопка 3». Теперь каждый раз, когда я создаю новую кнопку, выбираю один из этих пресетов.

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

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

Меню пресетов

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

Выбор пресета из настроек элемента
В раскрывающемся списке есть возможность выбрать сохранённый пресет (2), создать новый (3) и (4) или обновить текущий по умолчанию.
Выбор пресета
В рассматриваемом примере по умолчанию установлен пресет «Кнопка 1» (около него стоит звездочка). Зеленая галочка свидетельствует о том, что он активен и применяется к создаваемому элементу Кнопка. Активным может быть любой из трех вариантов на выбор вебмастера.

Есть еще два пункта в выпадающем меню:

  • (3) — создать новый пресет из текущих стилей или
  • (4) — создать новый пресет с нуля.

Настройка дизайна и установок пресета

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

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

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

Глобальные настройки пресета и локальные настройки
Левая часть (фиолетовый цвет) — это панель работы с пресетами как целыми единицами. А правая часть (серая) — это панель настроек конкретного пресета. Сделано это для того, чтобы можно оперативно отредактировать любой из возможных пресетов, находясь в меню настроек.

Использование в Divi глобальных пресетов

Глобальный пресет — это пресет по умолчанию. Конечно, все пресеты в Divi носят глобальный характер. Их глобальность проявляется в том, что установки применяются ко всем элементам, сделанных на основе того или иного пресета.

При создании того или иного элемента сайта к нему применяется глобальный пресет (установки по умолчанию). В моем случае дефолтовым выбран пресет «Кнопка».

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

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

Создание новых пресетов

Также в раскрывающемся списке предустановок есть две основные кнопки.

Если нажать на кнопку «Создать новый пресет на основании текущих стилей», то мы запустим создание пресета со стилями и дизайном, активными на данный момент. Или можно нажать кнопку «Добавить новый пресет», чтобы добавить новый пресет с нуля.

Создание нового пресета

Меню настройки

При наведении мыши на пресет в раскрывающемся списке элемент станет синим, и появится меню с дополнительными параметрами.

Дополнительнее меню для пресета
Этот пункт меню включает в себя следующие параметры:
  1. редактировать пресет,
  2. обновить пресет с текущими стилями,
  3. удалить
  4. настроить,
  5. дублировать,
  6. назначить по умолчанию.
Панель настроек пресета
Автор DiviLancer

Помогу в создании блога, интернет-магазина или лендинга на премиальной теме WordPress Divi. Обучу администрированию сайта. Окажу техническую поддержку.

Обращайтесь, буду рад помочь Вашему бизнесу или хобби.

Оставьте ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *