Как создать адаптивный полноэкранный раздел контактной формы с анимацией прокрутки с увеличением

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

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

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

Sneak Peek

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

Скачайте макет БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

https://youtu.be/5Qt9J95uME8

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

Чтобы импортировать макет раздела в свою библиотеку Divi, перейдите в библиотеку Divi.

Щелкните кнопку Импорт.

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

Затем нажмите кнопку импорта.

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

См. Внизу сообщения, как добавить макет раздела на страницу.

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

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

Для начала вам необходимо сделать следующее:

1. Если вы еще этого не сделали, установите и активируйте тему Divi.
2. Создайте новую страницу в WordPress и используйте Divi Builder для редактирования страницы во внешнем интерфейсе (визуальный конструктор).

Создание макета контактного раздела

Для начала мы добавим готовый макет на новую страницу с помощью Divi Builder. Это ускорит дизайн, чтобы мы могли сосредоточиться на том, что нужно, чтобы сделать раздел (с контактной формой) полноэкранным и адаптивным. Затем мы добавим эффект прокрутки, чтобы собрать все вместе в конце.

Добавление готового макета

После того, как вы нажмете, чтобы отредактировать страницу с помощью конструктора Divi, выберите опцию «Выбрать готовый макет».

Затем найдите макет страницы контактов бизнес-тренера и нажмите кнопку «Использовать этот макет».

Настройки раздела

После загрузки макета на страницу откройте настройки раздела в самом верху макета и обновите следующее:

Фон

• Цвет фона: # 3550a0

Высота и заполнение раздела

• Мин. Высота: 600 пикселей
• Высота: 104vh
• Отступ: верхний 0 пикселей, нижний 0 пикселей

Один из ключей к этому дизайну - установить высоту не менее 100vh (100% высоты области просмотра). Это гарантирует, что раздел будет занимать всю высоту окна браузера. Мы добавляем высоту 104vh, чтобы у нас было немного дополнительного места, когда пользователь прокручивает раздел.

Установка min-height на 600 пикселей - это запасная высота, поэтому ни один из элементов в разделе не будет скрыт, если высота браузера слишком мала. Это нужно будет отрегулировать в соответствии с объемом контента, который у нас есть в разделе.

Пользовательские CSS

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

display:flex;flex-direction: column;

Добавление контактной формы

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

Удалить лишние разделы из готового макета

Затем удалите нижнюю секцию, чтобы осталась только одна секция, которую мы строим.

Настройка элементов раздела для полноэкранного адаптивного дизайна

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

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

Настройки строки

Откройте настройки строки и обновите следующее:

• Ширина желоба: 1
• Ширина: 100%
• Отступ: 0px сверху, 0px снизу, 7vh слева, 7vh справа

Настройки текстового модуля

Откройте настройки текстового модуля и обновите следующее:

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

• Размер текста заголовка: 7vh (компьютер), 5vh (планшет и телефон)

• Размер текста заголовка 3: 2vh (рабочий стол), 3vh (планшет), 12px (телефон)

Прибыль

• Маржа: 3vh дно

Настройки контактной формы

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

Параметры поля

• Маржа полей: 3vh
• Прокладка Fleids: 2vh сверху, 2vh снизу
• Размер текста полей: 2,5vh

Размер текста кнопки

• Размер текста кнопки: 2vh

Ширина

• Максимальная ширина: нет

Добавление эффектов прокрутки

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

На вкладке «Увеличение и уменьшение масштаба»…

• Включить масштабирование вверх и вниз: ДА
• Начальный масштаб: 60% (при 0%)
• Средний масштаб: 60% (при 70%)
• Конечный масштаб: 100% (при 100%)

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

Использование раздела полноэкранной контактной формы на вашем веб-сайте

Сохранить макет раздела в библиотеку Divi

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

Для этого щелкните значок «Добавить в библиотеку» в меню раздела. Затем дайте макету имя и нажмите кнопку «Сохранить в библиотеке».

Теперь макет раздела будет доступен в библиотеке Divi для использования в будущем.

Добавить макет раздела на страницу из библиотеки Divi

Чтобы добавить макет раздела полноэкранной контактной формы на страницу (или сообщение) в Divi, откройте страницу для редактирования с помощью Divi Builder.

Затем щелкните, чтобы добавить где-нибудь на странице новый раздел.

Во всплывающем окне «Вставить раздел» щелкните вкладку «Добавить из библиотеки» и выберите сохраненный макет раздела из списка (мой называется «Полноэкранная контактная форма»).

Конечный результат

Теперь посмотрим на окончательный результат.

Вот он на рабочем столе.

Вот он на планшете (на самом деле iPad Pro).

Вот он на телефоне (на самом деле iPhone 5). Обратите внимание, что даже несмотря на то, что экран действительно короткий, содержимое все равно умещается в полноэкранном режиме.

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

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

Для получения дополнительной информации по этой теме ознакомьтесь с нашим сообщением о том, как использовать единицы длины vw и vh для разработки адаптивной контактной формы в Divi.

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!