Как использовать единицы длины vw и vh для разработки адаптивной контактной формы в Divi

Опубликовано: 2019-06-12

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

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

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

Давайте начнем.

Sneak Peek

Рабочий стол

Планшет

Телефон (портрет)

Телефон (альбомный)

Загрузите макет адаптивной контактной формы БЕСПЛАТНО (включая форму подписки на адаптивную электронную почту!)

Чтобы получить доступ к дизайну из этого урока, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

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

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и перетащите файл json в Divi Builder.

Давайте перейдем к руководству, ладно?

Что вам нужно для начала

Для начала вам потребуется следующая настройка:

Тема Divi установлена и активна
Новая страница, созданная для создания с нуля в интерфейсе пользователя (визуальный конструктор)
Ваш любимый напиток (необязательно, если вы еще не пили кофе)

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

Зачем использовать единицы длины vw и vh для адаптивного дизайна

Единицы длины - это те значения, которые необходимы для размера и размещения элементов на вашей веб-странице. Вероятно, наиболее распространенными единицами длины, используемыми в веб-дизайне, являются пиксели и проценты. Например, пиксель - это обычная единица длины, используемая для размера текста, единица длины em обычно используется для высоты строки, а единица длины в процентах обычно используется для интервалов и размеров элементов для адаптивного дизайна. Фактически, значения единиц длины по умолчанию для элементов Divi (модулей, строк, секций) построены с использованием этих общих единиц длины.

Единицы длины будут либо абсолютными (размер не зависит от размера других элементов), либо относительными (изменение / масштаб в зависимости от размера других элементов). Например, пиксель - это единица абсолютной длины. Таким образом, если основной текст имеет размер шрифта 16 пикселей, текст останется 16 пикселей независимо от размера его контейнера. Но процент и em являются относительными единицами длины. Таким образом, высота строки со значением em будет регулироваться по мере изменения размера текста элемента. А поскольку процент также является единицей относительной длины, строка шириной 80% будет составлять 80% ее контейнера (или секции).

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

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

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

Часть 1: Разработка адаптивной контактной формы в Divi

Создание сечения и ряда

Создайте обычный раздел со строкой в один столбец. Перед добавлением каких-либо модулей обновите настройки раздела следующим образом:

Цвет фонового градиента слева: # fd7b5b
Правый градиент фона, цвет: # a92200

Затем откройте настройки строки и задайте для нее градиент фона.

Цвет фонового градиента слева: # ffdb8b
Правый градиент фона: # fdb15b

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

Ширина: 66vw (рабочий стол), 66vw (планшет), 100% (телефон)
Макс.ширина: 66vw (настольный компьютер), 66vw (планшет), 100% (телефон)
Мин. Высота: 100vh (телефон)

Padding: 0px сверху, 0px снизу

Значение 66vw гарантирует, что строка останется примерно на две трети ширины области просмотра браузера. Значение 100vh на дисплее телефона гарантирует, что высота строки равна высоте области просмотра телефона (необязательно, но приятно для оптимального отображения области содержимого строки на телефонах).

Обратите внимание, что ширина строки установлена на 100% (не 100vw). Это связано с тем, что 100vw не учитывает ширину полосы прокрутки при прокрутке страницы. Поэтому всегда лучше использовать проценты для полноразмерных дисплеев.

Создание контактной формы

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

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

Заголовок: Свяжитесь с нами
Показать Captcha: НЕТ

Создание полей в полную ширину

Для этого дизайна я собираюсь использовать поля полной ширины. Это позволит мне добавить постоянный интервал между полями (поскольку числа с плавающей запятой не используются), и это позволит мне позже задать произвольную ширину каждому из полей для уникального дизайна. А пока откройте настройки для полей имени и адреса электронной почты и установите для параметра «Полная ширина» значение «ДА».

Оптимизация полей для адаптивного дизайна

Теперь вернитесь к настройкам контактной формы. Теперь мы можем настроить поля формы, используя единицы длины vw и vh. Обновите следующее:

Цвет текста поля: # 333333
Поля полей (ПК и планшет): 2vw сверху, 2vw снизу
Поля полей (телефон): 2vh вверху, 2vh внизу

Заполнение полей (настольный компьютер и планшет): 1vw сверху, 1vw снизу, 2vw слева, 2vw справа
Заполнение полей (телефон): 2vh вверху, 2vh внизу, 2vh слева, 2vh справа

Размер текста полей: 2.5vw (рабочий стол), 4vh (телефон)

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

Разработка текста заголовка

Для текста заголовка настройте следующее:

Заголовок уровня заголовка: H2
Шрифт заголовка: Karla
Толщина шрифта заголовка: полужирный
Цвет текста заголовка: # f56845
Размер текста заголовка: 7vw (рабочий стол), 8vh (телефон)
Интервал между заглавными буквами: 1vw
Высота строки заголовка: 0,6 мкм

Оптимизация кнопки для адаптивного дизайна

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

Нажмите, чтобы использовать настраиваемые стили кнопок и обновить следующее:

Размер текста кнопки: 2.5vw (рабочий стол), 4vh (телефон)
Цвет текста кнопки: #ffffff
Цвет фона кнопки: # 333333
Ширина границы кнопки: 0 пикселей
Радиус границы кнопки: 0 пикселей
Шрифт кнопки: Montserrat
Поле кнопки (рабочий стол): 1vw сверху, 0px слева, 0px справа
Маржа кнопки (телефон): 1vh сверху
Padding кнопок (рабочий стол): 3vw сверху, 3vw снизу
Прокладка кнопок (телефон): 3vh сверху, 3vh снизу

Button Box Shadow: см. Снимок экрана
Положение тени бокса по горизонтали: 2em
Положение прямоугольной тени по вертикали: 0,4 эм
Цвет тени: rgba (245,104,69,0.29)

Добавить интервал в контактную форму

Затем добавьте некоторые отступы в контактную форму, используя единицу длины vw и тень поля в поля формы, как показано ниже:

Прокладка (рабочий стол): 3vw сверху, 3vw снизу, 5vw слева, 5vw справа
Прокладка (телефон): 5vh вверху, 5vh внизу, 3vh слева, 3vh справа