Гибкость расширения до разных типов элементов в Divi 5

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

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

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

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

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

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

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

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

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

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

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

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

Вы увидите несколько четких вариантов:

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

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

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

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

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

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

Узнайте все о расширенных атрибутах Divi 5

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

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

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

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

Extend Attributes доступны в Divi 5 - Загрузите последнюю версию, чтобы попробовать ее сейчас.

5 Практических примеров того, что вы можете расширить (и как)

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

1. Распространение стилей на разные типы элементов

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

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

Простирается от раздела до столбца

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

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

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

Простирается от секции до ряда

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

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

Простирание от раздела до модуля

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

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

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

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

Простирается от столбца до ряда

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

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

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

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

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

2. Расширить стили на разные типы модулей

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

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

Дизайн мгновенно перенесется в кнопку отправки контактной формы без ручной настройки.

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

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

3. Сохранить и расширить предустановки групп опций

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

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

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

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

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

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

4. Стиль один раз, а затем расширяйте только то, что вы изменили

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

Вот где появляется параметр «Все измененные поля» .

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

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

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

5. расширить стили внутри одного модуля

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

Теперь вам нужно только стилизовать первый элемент и расширить стили дальше.

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

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

Расширить атрибуты разблокирует истинную гибкость дизайна

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

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