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

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

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

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

Sneak Peek

Вот краткий обзор дизайна, который мы построим в этом уроке.

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

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

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

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

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

СКАЧАТЬ

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

https://youtu.be/kpjbG8frPTQ

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

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

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

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

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

После этого макет раздела будет доступен в Divi Builder.

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

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

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

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

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

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

Создание CTA # 1

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

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

Добавить объявление

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

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

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

• Заголовок уровня заголовка: H2
• Шрифт заголовка: Titillium Web
• Плотность шрифта заголовка: полужирный
• Выравнивание текста заголовка: по центру
• Размер текста заголовка: 36 пикселей (рабочий стол), 28 пикселей (телефон)
• Высота строки заголовка: 1,5 м
• Высота линии тела: 2em

Добавить строку для кнопки CTA

Под строкой, содержащей только что созданное рекламное объявление, добавьте новую строку из одного столбца.

Для правильного выравнивания функциональности залипающих кнопок важно правильно настроить строки.

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

• Ширина желоба: 1
• Ширина: 100%
• Макс. Ширина: 1400 пикселей (рабочий стол), 100% (планшет)

Добавить кнопку призыва к действию

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

• Нам понадобится только элемент кнопки в этом модуле, чтобы мы могли избавиться от заголовка и основного текста.
• Обязательно добавьте URL-адрес ссылки кнопки (на данный момент подойдет '#'), чтобы кнопка была видна при разработке макета. Вы всегда можете обновить это позже.
• Отключите опцию «Использовать цвет фона».

(ПРИМЕЧАНИЕ: вы пока не увидите белую кнопку на белом фоне, но это изменится на следующем шаге)

На вкладке дизайна обновите следующие стили кнопок:

• Размер текста кнопки: 14 пикселей (рабочий стол), 11 пикселей (телефон)
• Цвет текста кнопки: # 1b1f50
• Цвет фона кнопки: # 09d5fe
• Ширина границы кнопки: 0 пикселей
• Расстояние между буквами кнопки: 2 пикселя
• Шрифт кнопки: Titillium Web
• Толщина шрифта кнопок: полужирный
• Стиль шрифта кнопки: TT
• Набивка кнопок: 1em сверху, 1em снизу

Продолжайте обновлять дизайн следующим образом:

• Ширина: 33,33%
• Выравнивание модуля: по центру
• Padding: 0px сверху, 0px снизу

Ширина кнопки 33,33% позволит кнопке занимать ровно 1/3 окна браузера в закрепленном положении. Объединение этого с двумя другими кнопками (каждая с той же шириной 33,33%) даст полную панель меню кнопок CTA.

На вкладке «Дополнительно» добавьте следующий фрагмент кода CSS в описание промо (в нем есть ненужный интервал, который нам не нужен):

display:none;

Затем добавьте еще один фрагмент Promo Button:

display:block;

Делаем кнопку липкой

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

Обновите следующее:

• Липкое положение: придерживаться верха и низа
• Смещение липкой вершины: 54 пикселя (рабочий стол), 0 пиксель (планшет)
• Смещение от окружающих липких элементов: НЕТ

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

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

• Преобразовать преобразовать ось X (залипание): -100%

Это переместит кнопку на расстояние, равное точной ширине кнопки (что составляет 33,33%), как только она закрепится в верхней или нижней части страницы.

Создание CTA # 2

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

Сначала продублируйте раздел.

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

• Преобразовать преобразовать ось X (залипание): 0 пикселей

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

Создание CTA # 3

Чтобы создать третий раздел CTA, продублируйте предыдущий раздел.

Затем откройте настройки модуля призыва к действию в новом разделе и обновите параметры преобразования следующим образом:

• Преобразовать преобразовать ось X (залипание): 100%

Это переместит кнопку вправо на расстояние, равное точной ширине кнопки (что составляет 33,33%), как только она закрепится в верхней или нижней части страницы.

Обновить текст и цвета кнопки

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

Для призыва к действию №2…

• Текст кнопки: просмотреть наши планы
• Цвет текста кнопки: #ffffff
• Цвет фона кнопки: # 1b1f50

Для призыва к действию №3…

• Текст кнопки: Свяжитесь с нами в чате
• Цвет текста кнопки: #ffffff
• Цвет фона кнопки: # 4328b7

Добавьте временную маржу в верхнюю и нижнюю секции для проверки функциональности

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

В верхней части добавьте верхнее поле 90vh.

В нижней части добавьте нижнее поле 90vh.

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

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

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

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

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

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