Предустановки элементов и предварительные настройки группы: разница объяснена

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

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

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

Какие предварительные предварительные устройства?

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

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

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

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

Какие предварительные предварительные предприятия групп опционов?

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

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

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

ПРЕДУПТЫ ПРЕДУПРЕЗОВ ПРЕДУПРЕЗИ ПРЕДУППИ

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

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

Опционные группы пресетов

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

Они сияют, сокращая избыточность в общей обстановке. Они позволяют вам определить стиль заголовка или тени коробки один раз и применяют его по всей площадке, при этом поддерживая глобальные изменения в реальном времени и переопределения на уровне элементов. В отличие от статической природы Element Presets, All-Nothing Nother, предварительные программы группы дают вам точный стиль и адаптивность по всему вашему дизайну.

Как использовать предустановки элементов и предварительные предварительные настройки группы в Divi 5

Объединение предустановки элементов и опционов группы в Divi 5 похоже на сочетание мастера шеф -повара с Sous Chef - одна обрабатывает общую картину, а другая погружается в детали. Вот пошаговое руководство, чтобы заставить их работать в гармонии:

Шаг 1: Начните с предварительных наборов группы для основополагающих стилей

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

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

Шаг 2: Направления элементов сборки

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

Шаг 3: тонкая настройка с предустановленными изменениями

Иногда вы можете изменить предустановку, не изменяя другие экземпляры на вашем сайте. К счастью, как предустановки элементов, так и предварительные устройства для групп опционов позволяют для этого. Например, вы создали предварительные наборы группы опций для своих заголовков - от H1 до H6 - но вы хотите изменить цвет заголовка, который вы планируете использовать на фоне изображения. Наши заголовки определяются как #000000 , который не будет работать для этого приложения. Вы можете отредактировать один экземпляр этой предустановки, не изменяя саму предустановку. Отправляйтесь на вкладку дизайна модуля заголовка и измените цвет.

Вы можете точно отредактировать пресеты элементов, например, пример Blurs из до. Одна икона не идеально квадратная, кажущаяся шире, чем другие. Применяя CSS на The Advanced Tab, изменение остается изолированным. Другие модули рекламы с одной и той же предустановкой остаются незатронутыми. Это увеличивает гибкость проектирования, позволяя настраивать отдельные элементы, не изменяя более широкую систему.

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

Почему они работают лучше вместе

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

Будущее предварительных наборов группы элементов и опционов в Divi 5

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

Представьте себе, что легко создавать полностью стильемые размытия, CTAS и многое другое, используя предварительные устройства для групп опций, которые вы уже разработали. Это сэкономит время, облегчит создание сплоченного образа для ваших сайтов и позволит вам быстрее строить веб -сайты. С обеими предустановленными группами, работающими вместе, вы можете обновлять элементы дизайна на своем сайте один раз, и каждый связанный элемент будет мгновенно настраивать. Это не просто постепенное обновление; Это прыжок в сторону истинной системы дизайна, подобной CSS, в визуальном строителе Divi's Drag-and-Drop.

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

Design Smart с предварительной программой группы Option

Предварительная система Divi 5 не просто функция - это революция для веб -дизайнеров. Профилирование элементов и предустановки групп опционов могут показаться небольшими инструментами, но они наносят удар. ПРЕДУПРЕТЫ ELEMER позволяет сохранить и повторно использовать целые дизайны с нулевой суетой, в то время как предварительные настройки опционных групп обеспечивают гибкость и согласованность в стилях и поведении, которые вы используете везде. Используемые вместе, они создают быстрый, сплоченный и адаптируемый рабочий процесс-независимо от того, создаете ли вы одностраничный или многостраничный сайт электронной коммерции.

Настоящая магия происходит, когда вы используете их вместе. Опционные группы PRESTEST помогут вам заложить фонд Sock Solid, а затем создавать полированные, многократные конструкции с предварительным процессом элемента. Результатом является последовательный веб -сайт без жесткости, масштабируемый без подавляющего и эффективного без разрезания углов. Эта предустановленная система дизайна имеет изменение игры для пользователей Divi, разблокируя CSS-подобную мощность с простотой.

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