Повторение веб -сайта за 5 минут с расширенными атрибутами

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

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

Что такое атрибуты расширения в Divi 5

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

Вот как это работает на практике. Вы начинаете с редактирования любого модуля в визуальном строителе. Затем, вместо того, чтобы повторять модуль «Изменения по модулю», просто щелкните правой кнопкой мыши модуль и выберите «Расширить атрибуты».

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

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

Как расширять атрибуты помогают быстрее переименовать веб -сайт

Мы проведем то, как вы можете использовать Extend Attributes, а также с предварительным процессом группы Option Group, чтобы ускорить процесс ребрендинга вашего веб -сайта.

Использование атрибутов Extend в Divi 5

Процесс прост: модуль Style One, щелкните правой кнопкой мыши, чтобы выбрать атрибуты Extend, и расширить эти варианты дизайна на каждый похожий модуль, не открывая одну панель настройки дважды. Давайте пройдемся через это, используя реальный пример.

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

Как только вы закончите, щелкните правой кнопкой мыши и выберите «Расширить атрибуты». (Мы выбрали атрибуты Extend Button Design, так как мы хотим только расширить стили, а не контент. Вы также заметите много вариантов, которые помогут вам выбрать определенные свойства.)

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

• (1) Расширение от элемента: модуль, от которого вы расширяете, как кнопка в нашем случае. Это автоматически заполняется на основе того, что вы щелкнули правой кнопкой мыши.
• (2) Распространение на местоположение: Выберите, как далеко должен зайти дизайн. Мы выбрали всю страницу , так как мы хотим, чтобы все кнопки со страницы изменились.
• (3) Распространение на тип элемента: выберите, какие типы модулей должны получать новые стили. Например, только модули кнопок или все похожие модули.
• (4) Тип атрибута для расширения: укажите, что вы хотите скопировать. Мы выбрали атрибуты дизайна и оставили других.
• (5) Группа опций для расширения: решить, какую группу (ы) опционов применить: текст, кнопка, граница, интервал и т. Д.
• (6) Модифицированные поля для расширения: вы также можете ограничить свой выбор только одним свойством стиля или выбрать все модифицированные поля для расширения всех изменений, которые вы внесли.

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

Вы заметили, как не нужно было искать сопоставления значений? Это потому, что Extend Attributes не заботятся о том, какие были оригинальные стили. Он копирует текущий вид из выбранного модуля и встает непосредственно на каждый подобный модуль в выбранном вами месте.

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

Узнайте все о расширении атрибутов

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

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

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

Давайте вернемся к примеру кнопки, чтобы понять, как это работает.

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

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

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

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

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

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

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

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

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

Как переименовать веб -сайт с расширенными атрибутами

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

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

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

Давайте пройдемся через что именно обновлять.

Визуально ребрендинг ключевых модулей через макет

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

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

Ребрендинг заголовок модулей

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

Как только вы довольны стилем, щелкните правой кнопкой мыши модуль и выберите «Расширить атрибуты» . Выберите применение для всей страницы и типа модуля в текст . Примените изменение ко всем модулям H4 на странице.

Точно так же вы переименовываете H1, H2 и H4S, чтобы объединить типографику и даст вашему сайту последовательный голос всего за несколько кликов, не останавливаясь каждый модуль заголовка вручную.

Повторный текст тела для лучшей читаемости

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

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

Повторный ребрендинг границ

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

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

Повторно ребрендинг других страниц, используя сохраненные пресеты

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

Ваши сохраненные пресеты будут появляться на всех страницах.

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

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

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

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

Совет профессионала: используйте атрибуты расширения с переменными дизайна

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

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

Расширить атрибуты позволяет переименовать без восстановления

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

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