Как на основе предустановки дизайн меняет парадигма Divi Design

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

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

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

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

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

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

• Обеспечить визуальную консистенцию на страницах
• Уменьшите повторяющиеся задачи стиля
• Разрешить глобальные обновления для более быстрых изменений

Опционные группы PRESETS: Модульный контроль конструкции

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

• Применить общие стили к разным элементам
• Сложный для расширенной настройки
• Разрешить глобальные изменения в реальном времени, не влияя на отдельные модули

Создание структурированного рабочего процесса с пресетами

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

Шаг 1: Определите основные стили с помощью предварительных настроек групп опционных.

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

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

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

Шаг 2: Создайте предварительные наборы элементов для конкретных модулей

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

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

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

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

Шаг 3: Реализуйте и регулируйте по мере необходимости

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

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

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

Шаг 4: Держите свои стили организованы в библиотеке Divi

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

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

Шаг 5: Итерация и улучшить

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

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

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

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

Преимущества рабочего процесса на основе предустановки

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

Скорость: сократить время дизайна с помощью готовых к использованию пресетов

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

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

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

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

Последовательность: поддерживайте единый стиль на страницах

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

Установка предварительной установки группы опций в качестве кнопки по умолчанию гарантирует, что размеры и стили шрифта вашего сайта остаются равномерными, где бы они ни появлялись. Эта консистенция укрепляет визуальную идентичность вашего сайта и придает ему отполированный, сплоченный вид.

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

Масштабируемость: легко расширить и обновить дизайн сайта

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

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

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

Гибкость: переопределяйте отдельные элементы, не нарушая системы

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

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

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

Начните разрабатывать умнее с пресетами в Divi 5

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