Самые быстрые способы обновления дизайна вашей страницы с помощью Divi 5

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

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

8 шагов для обновления дизайна вашей страницы с Divi 5

Для этого урока мы используем целевую страницу CV Business из библиотеки Divi Mayout Pack.

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

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

1. Оптимизируйте панель мониторинга для редактирования без отвлечения.

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

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

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

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

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

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

2. Сначала установите свои глобальные переменные дизайна

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

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

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

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

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

3. Замените статические значения на проектные переменные

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

Вам не нужно охотиться на них индивидуально. Инструмент Divi Find and Entual позволяет легко обменять статические значения на переменные всего за несколько кликов. Допустим, ваши заголовки используют шрифты вручную. Откройте любой модуль заголовка, нажмите на поле Font и выберите «Найти и заменить».

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

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

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

4. Используйте атрибуты Extend для применения обновлений за секунды

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

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

Щелкните правой кнопкой мыши на стиле и выберите «Расширить атрибуты».

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

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

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

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

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

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

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

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

6. Используйте копирование/вставку для быстрых разовых изменений

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

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

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

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

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

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

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

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

8. Обновите переменные дизайна, чтобы мгновенно обновить всю макет

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

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

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

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

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

Настройте свой рабочий процесс Divi 5

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

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

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

И если вам интересно, могут ли эти инструменты не отставать по мере развития вашего рабочего процесса, они абсолютно могут, потому что…

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

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

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

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