Использование новых параметров высоты и ширины Divi для создания адаптивного дизайна

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

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

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

Подпишитесь на наш канал Youtube

Понимание разницы между свойствами

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

Ширина - фактическая ширина элемента дизайна. Если это 100%, значит, ширина настолько велика, насколько позволяет контейнер. Ширина обычно выражается через%. Чем меньше процент ширины, тем уже будет элемент дизайна.

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

Но как это перевести в адаптивный дизайн? Чтобы объяснить разницу, мы собираемся создать визуальное сравнение, включив Visual Builder на совершенно новой странице. Мы добавим раздел со строкой из одного столбца. Затем вставьте текстовый модуль с некоторым содержимым, цветом фона и некоторыми настраиваемыми отступами.

Изменение ширины

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

Изменение максимальной ширины

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

Не превышено

Превышено

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

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

Высота - определяет фактическую высоту, которую вы хотите присвоить элементу.

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

Изменение минимальной высоты

Если вы измените минимальную высоту элемента, это значение станет нормой. При тестировании вы автоматически увидите изменение высоты текстового модуля в реальном времени.

Изменение высоты

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

Не превышает

Превышает

Изменение максимальной высоты

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

Изменение максимальной ширины рядов

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

Изменение глобальной максимальной ширины

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

В частности, измените максимальную ширину для одной строки

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

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

Еще одна техника, о которой вам следует помнить, - это придание аналогичным элементам одинаковой высоты. Это эстетически приятно для глаз и помогает посетителям легко сканировать контент. Есть два распространенных подхода:

Использование эквалайзера столбцов

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

Назначение высоты каждому модулю

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

Выравнивание содержимого в модуле

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

display: flex;
flex-wrap: wrap;
align-content: center;

Выбор высоты или ширины элемента дизайна и превращение переполнения в прокрутку

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

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

Создание полноэкранного раздела героя для всех размеров экрана

Переходим к следующему и последнему совету! Хотите создать полноэкранный раздел о героях? Откройте раздел героя на своей странице, перейдите в настройки размеров и измените высоту. Для этого важно использовать высоту области просмотра, чтобы все оставалось отзывчивым на всех размерах экрана.

• Высота: 100vh

Хотите централизованно выровнять контент в полноэкранном разделе героев? Добавьте следующие строки кода CSS к основному элементу раздела:

display: flex;
flex-wrap: wrap;
align-content: center;

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

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

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