Представляем переменные дизайна для Divi 5

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

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

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

Проверьте следующее видео, чтобы увидеть новую функцию в действии.

Divi становится «глобальным» с управлением переменным

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

Создание новых переменных

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

• Цвета : цвета необходимы для каждого сайта; Большинство веб -сайтов используют только три -четыре основных цвета. Определение цветовых переменных и использование их через ваш сайт означает, что вы можете настроить цветовую палитру вашего сайта за несколько секунд.
• Шрифты : эпоха работы со статичными шрифтами закончилась. Кроме того, вы больше не ограничиваются глобальными настройками шрифта в настройке темы. Вы можете определить шрифты вашего сайта как переменные и управлять ими в одном месте.
• Числа : Вы можете использовать числовые переменные для разработки системы размеров вашего сайта. Например, вы можете использовать стандартный размер границы радиуса во всех элементах. Превращение этого в переменную позволит вам отрегулировать размер ваших округлых углов, редактируя одну переменную. Другое повседневное использование включает в себя определение размеров текста вашего сайта и высоты линейки, ширину контейнеров и расстояние, а также все, что между ними.
• Изображения : вы используете одно и то же изображение на нескольких страницах? Например, у вас может быть стандартное фоновое изображение, которое служит знакомым мотивом бренда. Если вы превратите это в переменную, обновить ваш бренд в будущем легко.
• Текст : переменные не ограничиваются дизайном; Вы также можете определить текстовые переменные. Например, если вы превращаете номер телефона вашей компании и адрес в текстовые переменные, вам не придется ходить на охоту за всеми местами, где вы использовали эти переменные при изменении деталей вашего бизнеса.
• URLS : Мы тоже бросили переменные URL, потому что почему бы и нет? Возможно, вы пожелаете, чтобы ваш основной ссылку на действие на разные страницы в разные времена года (например, изменяя его во время продажи). Вместо того, чтобы обновлять этот URL везде, обновите единственную переменную.

Использование переменных в элементах и ​​пресетах

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

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

Дизайн переменных примеров

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

Пример один: управлять глобальными шрифтами

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

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

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

Вот где входят переменные шрифта.

Я построил веб -сайт в видео выше, используя три переменные шрифта: шрифт заголовка, шрифт для тела и шрифт.

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

Изменение шрифта моего веб -сайта так же просто, как обновлять переменную шрифта заголовка.

Пример второй: Управление глобальными размерами

Вы можете сделать то же самое с размерами текста.

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

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

Пример третьего: глобализация всего вашего веб -сайта

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

Не только это, но я также превратил общий контент в переменные. Название моей компании, номер телефона и адрес - переменные контента.

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

Попробуйте Divi 5 сегодня

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

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

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

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

Sneak Peek: вложенные ряды

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

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

Посмотрите это видео для всех деталей.

Больше обновлений Divi 5 в пути

2025 год - год Divi 5 . Утомительная работа позади нас. Мы построили супер-фанат, и теперь пришло время для Диви, чтобы вернуться.

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

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