Использование предустановки Divi 5 по умолчанию для устранения всего вашего сайта

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

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

Что такое предустановки по умолчанию в Divi 5?

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

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

Предварительные настройки элементов по умолчанию

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

Как отредактировать предустановку элемента по умолчанию

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

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

Вы будете знать, что вы редактируете предустановку, когда исчезают панировочные сухари (показывая вложенную позицию элемента, над которым вы работали), и слово « пресет » появляется в левом верхнем левом панели. Вы также заметите, что предустановленная селектор говорит « ПРЕДУПРЕДА по умолчанию », и он становится синим. Отсюда перейдите к группе опций элементов, которую вы хотели бы отредактировать. В этом случае я решил перейти на вкладку «Дизайн»> «Текст»> «Размер текста» , чтобы редактировать размер текстового содержимого для этого модуля.

Нажмите «Сохраните Preset», чтобы ваши изменения приобрели задержание по всему сайту.

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

Внесение каркаса страницы в Divi 5. Обратите внимание на то, как у этой строки есть пресеты, не соответствующие критериям для модуля, а скорее контейнер.

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

Но в блоке появится новый предустановка, с которой вы должны сначала разрабатывать свои веб -сайты Divi.

Опции по умолчанию предустановки групп

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

Узнайте о предварительных наборах группы опционов

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

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

Как отредактировать предустановку группы опций по умолчанию

Чтобы отредактировать предустановку группы опций по умолчанию, перейдите на панель настроек модуля или настройки строки/раздела. Нависните над доступными группами опций (текст, текст заголовка, кнопка, фон и т. Д.). Опционы групп, которые поддерживают пресеты, покажут заданный значок на правой стороне этого поля OG, когда будет зависать. Нажмите на значок Presets, чтобы показать по умолчанию и любые пользовательские пресеты для этой группы опций.

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

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

В чем разница между предустановлениями по умолчанию и пользовательским пресетам?

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

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

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

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

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

Будущее выглядит ярким для дизайнеров и разработчиков на Divi 5!

Как превратить пользовательскую предустановку в предустановку по умолчанию

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

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

Откуда берутся стили внутри предустановки по умолчанию?

Неотредактированные предустановки по умолчанию просто наследственные значения стиля, найденные в The Theme Customizer. Почти все темы WordPress по -прежнему используют некоторые аспекты настройщика темы (даже блокировки тем), хотя Divi сделал так, чтобы он был подключен, но не обязательно использовать . Скорее всего, мы заменим настройку в какой -то момент в будущем, но сейчас это реликвия, перенесенная из ядра WordPress, которая является причудой даже современных тем WordPress .

Скажем, я использовал стартовый сайт финансового консультанта (как один конкретный пример). В The Theme Customizer размер текста заголовка установлен на 30px .

Я вижу то же самое значение (30px), используемое в пресетах по умолчанию, перейдя в визуальный редактор для страницы, нажав на « Престут по умолчанию » для заголовка или текстового модуля , и проверяя в разделе «Дизайн»> «Заголовок» для возвышения H1.

Серое значение в поле Divi 5 означает, что это унаследованное значение, в данном случае, унаследованное от настройщика темы

Но это просто по умолчанию, установленную этим стартовым сайтом. Если вы использовали пресеты из импортируемого пакета макетов или начали с нуля, различные значения по умолчанию будут установлены в Theme Customizer.

Как использовать предустановки по умолчанию для создания веб -сайта

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

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

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

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

1. Расстояние между секциями : включают в себя верхнюю/нижнюю маржу, левую/правую маржу и любую необходимую прокладку.
2. Цвета фона раздела : Создайте предварительную установку опциона по умолчанию, которую вы хотите использовать в большинстве случаев, и пользовательскую группу опций для альтернативного/контрастного цвета фона. Помните, что предустановка по умолчанию в предварительную программу опции фона также могут быть применены к фону столбцов.
3. Типография : начните с вашего H1-H6. В зависимости от использования вашего модуля, вы захотите запустить их в пресетах группы по умолчанию под заголовком текста для заголовка и текстовых модулей и текста заголовка для таких вещей, как модули Blurb. Затем работайте над нормальным текстом, сосредотачиваясь на группе опций текста в текстовых модулях и группах опций тела , найденные в таких вещах, как модуль Blurb.
4. Другие настройки дизайна : создать предварительные программы группы для границ, коробки тени, фильтры (если вы стилизируете изображения) и анимации. Для этого я склонен не использовать пресеты по умолчанию, а создавать пользовательские пресеты, которые я могу выборочно применить к элементам страницы.
5. Усовершенствованные настройки : это похоже на шаг выше, но я создаю предварительные наборы групп опций для таких вещей, как переходы и эффекты прокрутки. Я также склонен не использовать пресеты по умолчанию, но создаю пользовательские пресеты, которые я могу выборочно применить к элементам страницы.

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

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

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

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

Скачать Divi 5 Узнайте все о Divi 5 Попробуйте демонстрацию Divi 5