7 лучших практик Divi UX, о которых следует помнить

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

Давайте приступим к делу!

1. Использование микро-анимаций

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

Перейти на вкладку "Дизайн" элемента дизайна

Откройте любой элемент дизайна по вашему выбору и перейдите на вкладку «Дополнительно». Там вы найдете параметры анимации.

Используйте небольшую интенсивность анимации

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

2. Оптимизация времени отклика вручную

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

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

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

Давайте пройдемся по процессу шаг за шагом.

Изменить размер строки

Первое, что вам нужно сделать, это удалить все пространство между разделами, строками и модулями, включив следующие параметры в настройках размера строки:

• Сделать эту строку полной шириной: Да
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1

Добавить раздел ИЛИ отступ строки

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

• Отступ слева: 23vw (рабочий стол), 30px (планшет), 25px (телефон)
• Отступ справа: 23vw (рабочий стол), 30px (планшет), 25px (телефон)

Добавить отступы столбца

Также важно расстояние между колоннами и модулями. Вы можете настроить эти значения в соответствии с различными размерами экрана.

• Правое заполнение столбца 1: 1vw (рабочий стол), 0vw (планшет и телефон)
• Поле слева в столбце 2: 1vw (рабочий стол), 0vw (планшет и телефон).
• Правое заполнение столбца 2: 1vw (рабочий стол), 0vw (планшет и телефон)
• Поле слева в столбце 3: 1vw (рабочий стол), 0vw (планшет и телефон).

Уменьшить размер текста

Хотите на 100% использовать ширину по горизонтали на экранах меньшего размера? Хотя 13 пикселей для размера основного текста может показаться небольшим с точки зрения ноутбука, обычно этого более чем достаточно для мобильного устройства. Попробуйте просмотреть на мобильном телефоне основной текст размером 13 пикселей в сочетании с описанными выше шагами, и вы поймете, о чем я говорю!

3. Использование единиц просмотра вместо пикселей

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

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

4. Расширение стиля для ориентации текста

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

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

Давайте пройдемся по этим шагам.

Откройте любой модуль, содержащий текст

Откройте любой модуль на вашей странице, содержащий текст, и перейдите к настройкам текста.

Параметр ориентации текста при щелчке правой кнопкой мыши

Щелкните правой кнопкой мыши параметр «Ориентация текста», который можно найти в настройках текста, и выберите параметр «Расширить стили».

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

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

5. Переключение между режимами Visual Builder и Wireframe назад и вперед

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

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

6. Импорт / экспорт макета прямо на странице

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

• Сохранение макета в библиотеке Divi
• Переход к вашей библиотеке Divi и экспорт файла JSON
• Переход в библиотеку Divi вашего живого веб-сайта
• Загрузка файла JSON
• Переход на страницу вашего действующего веб-сайта
• Загрузка файла JSON из сохраненных макетов

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

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

7. Регулярное использование опции «Уменьшение» для сохранения перспективы

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

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

Последние мысли

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

Лучшее изображение: aurielaki / shutterstock.com