Использование переменных дизайна Divi 5, чтобы стать эффективным веб -дизайнером

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

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

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

Понимание переменных дизайна в Divi 5

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

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

Что такое дизайнерские переменные?

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

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

Типы переменных дизайна

Divi 5 поддерживает широкий диапазон переменных типов, таких как:

• Цвета: установите глобальную цветовую палитру для последовательного брендинга, обеспечивая быстрое и простое применение на вашем сайте.
• Шрифты: эти переменные позволяют стандартизировать типографику на вашем сайте. Он более надежный, чем настройщик WordPress, который часто ограничивает варианты шрифта на заголовок и текст тела. С переменными вы можете назначить шрифты для заголовков, текста тела, отзывов, отзывов или любой другой области вашего сайта, для которой вы хотите пользовательский шрифт.
• Числа: вы можете контролировать интервал, размеры, границы и многое другое. Например, вы можете использовать функцию Clamp () для создания номеров переменных для всех уровней заголовка, гарантируя, что ваш текст выглядит потрясающе на любом размере экрана.
• Текст: оптимизированный повторяющийся контент, такой как рабочее время или адрес, и легко применяйте его на протяжении всего вашего сайта.
• Ссылки: Упрощайте обновления ссылок, такие как ссылки в социальных сетях, или используйте их в модулях или кнопках CTA.
• Изображения: это позволяет загружать логотипы, фоновые изображения, значки или декоративные активы один раз и повторно использовать их на вашем сайте.

Полная дизайн синергия

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

Использование расширенных единиц в проектных переменных

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

Преимущества передовых подразделений

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

Как переменные дизайна повышают эффективность веб -дизайна

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

Централизованное управление дизайном

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

Конструкция дизайна

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

Динамическая интеграция контента

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

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

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

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

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

Далее, нажмите + добавить глобальный номер , чтобы создать новую переменную.

Дайте своей переменной имя-например , накладку по всему сайту -и введите значение, используя значение CALC, например (25px + 1VW).

В поле значения добавить (25px + 1vw) . Давайте разберемся, что делает эта формула. 25px -это единица фиксированной длины. Независимо от размера экрана или просмотра, эта часть значения всегда будет 25 пикселей. Затем формула добавляет 1% от ширины просмотра. Viewport является видимой областью окна браузера пользователя. Таким образом, если окно браузера имеет ширину 1200px, 1vw будет равным 12 пикселям. Этот блок обеспечивает отзывчивость, поскольку значение масштабируется с размером экрана.

Нажмите кнопку «Сохранить переменные», чтобы сохранить ее.

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

Применение переменных к элементам

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

Затем перейдите на вкладку Design и найдите поля накладки под настройками интервалов .

Наведите поля накладки, чтобы выявить значок динамического контента .

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

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

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

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

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

С активным диалоговым окном с предустановкой нажмите кнопку «Новая пресет» из кнопки «Текущие стили» .

Дайте своему предустановке имя и нажмите кнопку «Сохранить предустановку», чтобы сохранить ее.

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

Лучшие практики максимизации эффективности

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

1. Планируйте свою систему проектирования рано

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

2. В сочетании с другими функциями Divi 5

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

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

3. Проверьте на всех устройствах

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

4. Сохраняйте переменные организованы

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

Перегружать свой рабочий процесс с переменными дизайна в Divi 5

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

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