Полное руководство по работе с пресетами в 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. назначить по умолчанию.
Панель настроек пресета
Полное руководство по работе с пресетами в Divi | foto avtora 1

Автор блога — DiviLancer Леонид

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

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

Пресеты в теме 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 и как ими пользоваться при создании сайта.
Если понравилась эта статья, то  подписывайтесь на мою рассылку.

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

Автор блога — DiviLancer Леонид

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

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

Divi 4.0. Новый подход к созданию сайтов

Divi 4.0. Новый подход к созданию сайтов

Тема Divi 4.0 после включения в её состав Theme Builder стала больше, чем просто визуальный конструктор сайтов

Настал тот день, которого многие ждали. Сегодня я с гордостью объявляю о выпуске Divi 4.0, которая включает новый Divi Theme Builder. Theme Builder использует возможности Divi Builder, но теперь распространяет его на все области сайта. Theme Builder позволяет создавать собственные верхние (header) и нижние (footer) колонтитулы, страницы категорий, шаблоны продуктов, записей блога, 404 страницы и многое другое. В Theme Builder введены такие важные функции Divi как динамический контент и модули WooCommerce, а также удивительная дизайнерская мощь самого конструктора. Все это дает полный контроль над всем сайтом. Divi 4.0 меняет правила игры при создании сайтов. 
Ник Роач (Nick Roach),
основатель и директор компании Elegant Themes, разработчик темы Divi 

Особенности Divi Theme Builder

Divi Theme Builder — это полнофункциональная система шаблонов сайта, которая позволяет  использовать Divi Builder для структурирования сайта. Билдер позволяет редактировать любую часть сайта, включая хедер (header) и футер (footer), шаблоны записей, категорий и многое другое. Каждый шаблон Theme Builder состоит из пользовательского макета тела записи, хедера и футера. Все три области могут быть построены и настроены конструктором Divi Builder с учетом динамического контента.

Конструктор сайтов divi 4.0

Хорошо сделанное не пропадет

Можно создать новый шаблон Theme Builder и создать записи блога или же даже создать глобальный шаблон сайта, который будет обновляться. Конструктор Theme Builder это позволяет.
Глобальные модули в конструкторе divi 4.0

Точно настроенный контроль

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

Шаблоны divi 4.0 можно точно настраивать в каждом конкретном случае

Импорт и экспорт макетов Theme Builder

Шаблоны Theme Builder также можно импортировать и экспортировать, включая все макеты header, footer и основного текста. Экспорт Theme Builder — это, по сути, «пакеты сайтов». Это как пакеты Divi Layout Pack. Пакеты Theme Builder устраняют необходимость в дочерних темах и позволяют создавать предварительно созданные шаблоны тем, которые можно использовать на любом сайте.

Экспорт и импорт модулей построителя сайтов divi 4.0

Пользовательские верхние (header) и нижние (footer) колонтитулы

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

Пользовательские header и footer в шаблонах Divi

Шаблоны записей  и товаров для всего сайта

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

Почтовые и товарные шаблоны для всего сайта
Divi 4.0. Новый подход к созданию сайтов | foto avtora 1

Автор блога — DiviLancer Леонид

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

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