Как создать плавающий баннер в Divi (без плагина)

Опубликовано: 2024-10-08

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

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

Как создать плавающий баннер в Divi на основе поведения прокрутки (без плагина)

Шаг 1. Создайте или отредактируйте собственный шаблон тела

На панели управления WordPress перейдите в Divi -> Theme Builder . На странице Theme Builder создайте новый шаблон тела или отредактируйте существующий, нажав кнопку «Добавить глобальное или пользовательское тело» или выбрав шаблон, который вы хотите изменить.

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

Добавить новый раздел

После входа в редактор шаблонов Custom Body создайте новый раздел для своей страницы. Чтобы элемент плавающего баннера выглядел на вашей странице пропорциональным и не слишком большим, мы установили размер раздела на 25 % по ширине.

Шаг 2. Добавьте контент плавающего баннера

Добавить модуль

Далее мы добавим содержимое плавающего баннера. Нажмите кнопку « + » внутри раздела, чтобы добавить новый модуль. После этого выберите любой модуль, который вы хотите отображать в виде содержимого плавающего баннера, например «Текст», «Кнопка», модуль «Призыв к действию» и т. д. В этом примере мы выбираем модуль «Призыв к действию» .

Настройте модуль

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

  • Добавьте класс CSS

Затем добавьте собственный класс CSS под названием « floating-banner-content » на вкладке «Дополнительно» модуля.

Завершив разработку содержимого плавающего баннера, не забудьте сохранить все изменения.

Шаг 3. Добавьте пользовательский CSS и фрагмент JavaScript.

Далее мы добавим пользовательский фрагмент CSS и JavaScript в параметры темы Divi.

Добавьте пользовательский CSS

Перейдите к настройкам темы Divi и выберите «Пользовательский CSS» (панель управления WordPress -> Divi -> Параметры темы Divi -> Общие -> Пользовательский CSS ). После этого скопируйте приведенный ниже фрагмент CSS и вставьте его в доступное поле. 

 @media only screen и (min-width: 768px) { .floating-banner-content {
  положение: фиксированное;
  верх: 130 пикселей;
  осталось: 80%;
  преобразование: TranslateX (-50%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-индекс: 9999;
  непрозрачность: 0;
  видимость: скрыта;
  переход: непрозрачность 0,3 с, легкость выхода, видимость 0,3 с, легкость выхода;
}
}

Только экран @media и (минимальная ширина: 768 пикселей) { .floating-banner-content.active {
  непрозрачность: 1;
  видимость: видимая;
}
}

Добавьте код JavaScript

На странице параметров Divi Them перейдите на вкладку «Интеграция» . Затем вставьте приведенный ниже фрагмент JavaScript в поле «Добавить код в <head>» вашего блога . 

 <скрипт>
jQuery(документ).ready(функция($) {
    var баннер = $('.floating-banner-content');

    $(окно).scroll(функция() {
        вар ScrollTop = $(this).scrollTop();
        если (scrollTop >= 400) {
            баннер.addClass('активный');
        } еще {
            баннер.removeClass('активный');
        }
    });
});
</скрипт>

После добавления пользовательских фрагментов CSS и JavaScript примените изменения, нажав кнопку «Сохранить изменения» .

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

Что делал код CSS и JavaScript?

Разбивка CSS-кода

  • @media only screen and ( min-width: 768px ) :
    • Этот медиа-запрос специально предназначен для устройств с минимальной шириной экрана 768 пикселей (т. е. планшетов и больше). Это гарантирует, что плавающий баннер будет адаптирован для устройств, которые могут его удобно отображать.
  • .floating-banner-content :
    • Этот селектор нацелен на элементы с классом «floating-banner-content», который применяется к модулю, содержащему содержимое баннера.
  • Стили для .floating-banner-content :
    • position: fixed; : он останется на месте, даже когда пользователь прокручивает страницу.
    • top: 130px; : устанавливает верхнюю позицию баннера на расстоянии 130 пикселей от верхней части области просмотра.
    • left: 80%; : размещает баннер на 80 % ширины области просмотра от левого края.
    • transform: translateX(-50%); : центрирует баннер по горизонтали, перемещая его на 50 % влево.
    • box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); : добавляет к баннеру легкую тень для придания глубины.
    • z-index: 9999; : гарантирует, что баннер появится поверх других элементов на странице.
    • opacity: 0; : изначально баннер скрывается, устанавливая его непрозрачность на 0.
    • visibility: hidden; : скрывает содержимое баннера, пока оно не станет видимым.
    • transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; : применяет эффект плавного перехода при изменении непрозрачности и видимости баннера.
  • .floating-banner-content.active :
    • Этот селектор нацелен на элементы с классом « floating-banner-content », который также имеет класс « active ». Этот класс добавляется к баннеру, когда он должен быть виден.
  • Стили для элемента .floating-banner-content.active :
    • opacity: 1; : Делает баннер видимым, устанавливая его непрозрачность на 1.
    • visibility: visible; : отображает содержимое баннера.

Сводка кода JavaScript

Этот код JavaScript эффективно управляет видимостью плавающего баннера в зависимости от положения прокрутки пользователя.

Баннер становится видимым, когда пользователь прокручивает вниз определенный порог (в данном случае 400 пикселей ).

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

Итог

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

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