Вы хотите создать Контактная форма липкий в ДИВИ?
Встроенные возможности приклеивания Divi позволяют создавать потрясающие визуальные эффекты на странице всего за несколько кликов.
Вы можете применить липкие эффекты к любому элементу на своей странице, но в этом уроке мы сосредоточимся на том, как создать Контактная форма прикрепляется к любой странице Divi, которую вы создаете.
Также прочитайте наше руководство на Как создать липкий глобальный заголовок в DIVI
В этом примере мы добавим изображения и контактную информацию, которые будут прокручиваться по мере Контактная форма останется на месте.
обследование
Вот предварительный просмотр того, что мы будем разрабатывать. На мобильных устройствах мы не применяем липкий эффект.
Как добавить липкую контактную форму на свою страницу Divi
Создайте новую страницу с предопределенным макетом
Начнем с использования предопределенного макета из библиотеки Divi. Для этого примера мы будем использовать контактную страницу Пакет макетов косметических продуктов .
Добавьте новую страницу в свой Веб-сайт и дайте ему название, затем выберите опцию «Использовать Divi Builder».
В этом примере мы будем использовать готовый макет из библиотеки Divi, поэтому выберите «Выберите макет».
Найдите и выберите контактная страница макета 'Косметический продукт».
Выбирать 'Выберите макет', чтобы добавить макет на вашу страницу.
Теперь мы готовы продолжить наш урок.
Изменение макета закрепленной контактной формы
В этом руководстве мы хотим, чтобы контактная форма в левом столбце (столбец 1) оставалась прикрепленной, пока пользователь прокручивает другие модули контента в правом столбце (столбец 2). Это даст нам эффект динамической прокрутки, который выделит вашу контактную форму. Давайте начнем с изменения нашего предопределенного шаблона.
См. Также: Как создать скользящее и push-меню в DIVI
Создать новый раздел
Добавьте новый раздел на свою страницу.
Затем вставьте новую строку с двумя столбцами. Вы можете добавить этот раздел в любом месте на странице, другие разделы в конечном итоге будут удалены по мере прохождения этого руководства.
Откройте настройки раздела и измените цвет фона в соответствии с дизайном макета:
- Фон: #EEE8E2
Добавление ваших липких модулей в столбец 1
Добавьте модуль контактной формы в столбец 1. Если вы следуете этому руководству или уже имеете контактную форму на своей странице, вы можете просто перетащить модуль 'Контактная форма' существующий в столбце 1.
Переместите текстовый модуль Связаться с нами в верхней части этого раздела. Он также будет липким. Добавьте белую рамку в настройках текста, чтобы она соответствовала стилю макета:
- Ширина границы: 20px
- Цвет границы: #FFFFFF
Первоначальный макет включал отступы между текстом и рамкой, но мы пропустим это, потому что на небольших экранах он обрезает нижнюю часть контактной формы.
Добавьте свои модули прокрутки в столбец 2
В столбец 2 добавьте все ваши модули прокрутки. В нашем случае переместите два модуля изображения, контактную информацию и информацию о местоположении в столбец 2. После того, как вы переместите свои модули в новый раздел, вы можете удалить все оставшиеся пустые разделы.
Совет: если вам нужно переместить несколько модулей одновременно, удерживайте клавишу 'Май' на клавиатуре и выберите модули, которые вы хотите переместить. Используйте функцию перемещения модулей, чтобы перемещать все ваши модули одновременно.
Большое смещенное изображение выбранного нами макета может вызвать проблемы с горизонтальной прокруткой. Итак, давайте изменим некоторые настройки, чтобы решить эту проблему.
Читайте также: Как создать глобальный заголовок с формой входа в DIVI
Откройте настройки раздела. Под Передовой, перейдите в раздел «Видимость», затем обновите параметры горизонтального и вертикального переполнения:
- Горизонтальное переполнение: скрыто
- Вертикальное переполнение: скрыто
Теперь ваша страница должна выглядеть так: закрепленный контент в столбце 1 и прокручиваемый контент в столбце 2.
Мы готовы сделать последний шаг: сделать контактную форму липкой.
Сделайте контактную форму липкой
С нашим макетом мы можем включить липкие настройки для нашей контактной формы. Выбирать 'Настройки строки', затем выберите настройки столбца 1.
На вкладке «Дополнительно» перейдите к «Эффекты прокрутки». Здесь мы установим липкие параметры.
- Липкая позиция: придерживайтесь верха
- Верхнее смещение палки: 15 пикселей
- Нижний липкий предел: линия
И это все! Теперь вы добавили закрепляемые настройки в столбец 1, благодаря чему ваша контактная форма и заголовок прикрепляются при прокрутке страницы вниз. Вы должны увидеть содержимое прокрутки столбца 2 рядом с контактной формой.
Конечный результат
Теперь давайте посмотрим на нашу липкую контактную форму в действии.
Скачайте DIVI прямо сейчас!!!
Заключение
Так ! Вот и все для этой статьи. Прикрепленные настройки Divi — это простой способ улучшить внешний вид вашей контактной формы или любого другого элемента на вашей странице. Вы можете применять фиксированные настройки для любого раздела, строки или модуля, отображая практически все, что угодно на вашем Веб-сайт липкий.
Если вы хотите узнать больше о том, что вы можете делать с липкими функциями Divi, ознакомьтесь с нашими учебными пособиями. Например, вы можете ознакомиться с нашим руководством по Как добавить контактную форму в глобальный заголовок.
Вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
