Пресеты в теме Divi — новый способ создания сайтов

Пресеты в теме Divi — новый способ создания сайтов

9 июля 2020 года разработчик Divi Elegant Themes в версию темы 4.5 ввел Divi Presets (пресеты Divi). Это абсолютно новая система проектирования сайтов на основе классов.

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

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

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

Что такое пресет Divi?

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

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

Тем не менее если таких кнопок на сайте будет 10 или 20, то придется энное количество раз вносить изменения… до сих пор это так и есть.

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

Система пресетов позволяет сделать пользовательский внешний вид кнопки и сохранить его. Затем просто применить этот пресет ко всем кнопкам. Вот и все!

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

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

Разработка новых пресетов

Управлять предустановками можно в раскрывающемся меню в верхней части панели настройки всех элементов. 

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

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

И дизайн модуля будет создан в соответствии с сохраненным дизайном.

Создание пресетов из существующих элементов

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

Назначение по умолчанию

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

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

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

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

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

Редактирование существующих пресетов

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

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

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

Это серьезный сдвиг в методологии дизайна Divi и огромное преимущество для пользователей!

Интерфейс пресета

Всеми пресетами можно управлять в новом выпадающем меню. Здесь можно создавать новые пресеты и управлять существующими.
Посмотрим на интерфейс пресета.

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

Интерфейс пресета
  1. Выпадающее меню пресетов. Здесь видны активные пресеты текущего модуля. Нажав на выпадающий список, можно управлять библиотекой пресетов.
  2. Default Preset. Пресет по умолчанию. Выбрав его, активируется внешний вид модуля по умолчанию.
  3. Назначенный пресет по умолчанию. Звездочка обозначает, какая предустановка в настоящее время назначена дефолтовой. Все основные модули сайта будут использовать эту предустановку. Нажав значок звездочки в любом пресете, делаем его по умолчанию.
  4. Выбранный пресет. Зеленая галочка указывает, какая предустановка назначена редактируемому модулю. Базовые стили модуля управляются выбранным пресетом.
  5. Редактировать пресет. Щелкнув значок карандаша изменяем дизайн предустановки. Когда редактируется дизайн пресета, все модули, использующие его, приобретают новый вид.
  6. Управление настройками. Можно изменить имя пресета, чтобы лучше организовать его в библиотеке.
  7. Обновить с текущими стилями. Обновление пресета в соответствии с текущим дизайном редактируемого модуля.
  8. Дублировать пресет. Это отличный способ создавать различные варианты без необходимости начинать с нуля, а используя то, что уже сделано.
  9. Удалить пресет. Все модули, использующие удаленный пресет, переключатся на предустановку по умолчанию.
  10. Создать новый пресет из текущих стилей. Создание нового пресета, соответствующего дизайну редактируемого модуля. Если есть предварительно разработанный элемент, которые можно повторно использовать на сайте, то его превращаем в пресет.
  11. Добавить новый пресет. Добавит новый пустой пресет в библиотеку. Затем можно настроить пресет, используя доступные элементы дизайна модуля.

Почему пресеты Divi так важны

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

Звучит ужасно, правда? Верьте или нет, но это текущее состояние большинства создателей страниц. И это было даже в Divi до сих пор.

Классы для CSS, а пресеты для Divi! 

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

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

Вот и все. Я надеюсь, что эта статья помогла узнать, что такое пресеты Divi и как ими пользоваться при создании сайта.
Если понравилась эта статья, то  подписывайтесь на мою рассылку.

Автор DiviLancer

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

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

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

Ваш адрес email не будет опубликован.