Создание вашей дизайнерской структуры с Divi 5

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

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

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

Divi 5 готов к использованию на новых веб -сайтах , но мы еще не рекомендуем мигрировать существующие.

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

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

Подписаться на наш канал на YouTube

Переменные дизайна позволяют определить глобальные ценности дизайна

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

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

Переменные дизайна похожи на версию пользовательских свойств CSS, но имеют гораздо большую гибкость. Например, вы обычно объявляете переменные CSS, такие как : root {–primary-Color: #1A73E8; } , но с переменными дизайна Divi вы сохраняете цвет только как основной цвет .

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

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

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

Узнайте все о переменных дизайна

Сохранить комбинации общего стиля с предварительными устройствами группы

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

Например, допустим, что вы всегда используете одну и ту же 40px Padding и 10px argin на всех ваших отзывчивых разделах. Сохраните эти настройки в качестве предварительной установки между расстоянием . Когда вы добавляете новый отзывник, выберите предустановку, и это сделано.

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

ПРЕДУПРЕТЫ Группы опций Не переопределяют весь ваш модуль, они применяются только к выбранной вами группе стилей. Но вы всегда можете переопределить пресеты с помощью настроек для специфичных для модулей для настройки определенных модулей. Это позволяет вам сохранить свой макет и контент уникальным, одновременно обеспечивая постоянный визуальный стиль на вашем сайте.

Узнайте все о пресетах группы

Сохранить полностью спроектированные элементы с пресетами элементов

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

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

Как эти инструменты отражаются на фронте HTML

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

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

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

Первая начальная загрузка:

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

Для нашего примера я использовал настройку WordPress с установленной темой недостатки.

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

:root {
 --primary-color: #e91e63;
 --border-radius: 6px;
 --box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

Допустим, мы создаем простой макет страницы контакта с контактной формой и настраиваемой кнопкой. Чтобы все было последовательным и многоразовым, мы будем использовать сочетание утилиты Bootstrap и наших собственных переменных CSS.

Во-первых, мы добавляем пользовательский код для контактной формы, используя встроенные классы форм Bootstrap для обработки макета и стиля ввода.

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

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

Теперь давайте создадим ту же страницу, используя Divi 5 без кодирования.

Воссоздание той же страницы визуально с Divi 5

Мы начинаем с определения наших глобальных переменных дизайна, которые становятся частью нашей системы проектирования по всему сайту. Во -первых, вы переходите к переменным менеджеру> цвета . Затем напишите шестнадцатеричный код для первичного цвета (#E91E63) и сохраните.

Точно так же вы также можете сохранить числовые переменные для радиуса границы {6px} и расстояния. Далее я добавляю модуль контактной формы и настраиваю кнопку отправки в свой предпочтительный стиль:

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

Если я добавлю еще одну кнопку и выберу кнопку Preset , посмотрите, что происходит? Он станет автоматически.

Чтобы применить предустановку группы опций, наведите настройку и поищите значок «Настройки» .

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

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

Страница источника приведенной выше страницы Divi Designing показывает, что основной цвет сохраняется в корневом разделе, как и переменные CSS:

И на фронте ваши предварительные устройства группы опционов автоматически сохраняются и выводятся в виде чистых CSS, нацеленных на соответствующие классы (.et_pb_button, .et_pb_contact_submit).

Обе страницы выглядят одинаково, но то, как они были построены и поддерживались, совершенно отличается.

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

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

Как построить свою структуру дизайна с Divi 5

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

1. Определите свои глобальные переменные дизайна

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

В Divi 5 у вас есть менеджер переменных , чтобы создавать и организовать их.

Вот как играют выделенные типы переменных:

• Цвета: Сохраните основные, второстепенные и акцентные цвета вашего бренда, поэтому вам не нужно печатать шестигранные коды или сопоставить оттенки. Сохраните свои цветовые переменные и примените их одним щелчком.
• Шрифты: Определите точные шрифты, которые вы используете для заголовков, текста тела или отзывов. Вместо того, чтобы переоценивать поппины, жирные каждый раз, когда вы создаете H2, сохраняйте его как переменную шрифта . Вы сможете легко повторно использовать тот же стиль между модулями.
• Числа: храните свои значения для проектирования, такие как радиус границы 8PX для карт или прокладки 32PX для модулей изображения, в качестве чисел переменные . Вы также можете использовать расширенные единицы внутренних переменных номеров для создания динамических конструкций.

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

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

2. Сохранить глобально повторяющийся контент

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

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

Вы можете сохранить контент через оставшиеся три переменные:

• Текст: Допустим, адрес вашей компании появляется в нижнем колонтитуле, на странице контактов и в разделе Hero вашей домашней страницы. Сохраните его в виде текстовой переменной и выберите ее везде, где вы хотите, чтобы адрес появился.
• Ссылки: Сохраните URL -адреса на вашу страницу, коллекции продуктов, социальные профили или условия как переменные ссылки.
• Изображения: если вы используете логотип своего бренда или фоновое изображение на нескольких страницах, сохраните его в качестве переменной изображения . Представьте, что замените изображения заполнителей в шаблонах в кликах!

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

3. Создание и сохранение основных стилей с предварительным устройством группы опционов

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

Вот как извлечь максимальную пользу из -за пресетов группы:

1. Сохранить пресеты для общих стилей

Начните с сохранения пресетов для настройки, которые вы используете чаще всего, например, радиус границы, цвета фона или интервал. Допустим, я всегда использую 40px top Padding и 10px нижнюю маржу для отзывов, поэтому я сохранил эти значения в качестве предварительной установки между расстоянием.

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

2. Объедините переменные дизайна с пресетами

Затем укрепите свою структуру, объединив переменные дизайна с предварительными устройствами группы. Допустим, вы сохранили радиус границы 6px в качестве численной переменной и использовали его при создании предварительной установки группы опционов. Если вы измените переменную позже, ваши пресеты также будут автоматически обновляться по всему сайту.

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

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

4. Создать предварительные настройки элементов

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

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

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

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

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

Проектирование новых страниц на основе вашей структуры дизайна

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

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

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

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

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

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

Это Power Divi 5 приносит вам. Он позволяет создавать, сохранять и настраивать всю свою структуру дизайна, не касаясь ни одной строки кода.

Построение вашей структуры дизайна без кодов визуально

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

Divi 5 дает вам инструменты, чтобы это произошло

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

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

Divi 5 готов к использованию на новых веб -сайтах , но мы еще не рекомендуем мигрировать существующие.