Получить мгновенный хостинг с Plaseor и Premizer Pro

С CDN, SSL и резервными копиями.

Начните сегодня

Как создать всплывающее окно обратного отсчета на WordPress с помощью Elementor

Muneeb Учебные пособия по WordPress Jun 15, 2021

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

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

Мало того, всплывающие окна обратного отсчета, когда они красиво созданы, могут повысить общий дизайн и влияние веб-сайта. В этом руководстве мы поймем, как создать всплывающее окно обратного отсчета в WordPress, используя Конструктор страниц Elementor.

Как создать всплывающее окно обратного отсчета с помощью Elementor

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

Начать

После того, как вы установили и активировали Elementor Pro, перейдите к своей панели инструментов и перейдите к параметру «Всплывающие окна» из шаблона.

Нажмите кнопку «Добавить новое всплывающее окно» на странице и двигайтесь вперед.

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

После того, как вы ввели свои данные, нажмите кнопку создания всплывающего окна.

Вы будете перенаправлены в библиотеку Elementor, где увидите множество готовых всплывающих окон. Найдите строку Hello в библиотеке и выберите одну из библиотеки.

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

Закройте всплывающую библиотеку и перейдите в «Настройки» из меню Elementor.

На вкладке «Настройки» вам необходимо заменить существующий набор на упомянутый ниже.

  • Ширина: 100 VW
  • Высота: 300 пикселей
  • Вертикальное положение: сверху
  • Входная анимация: постепенное появление
  • Продолжительность анимации: 2,2 секунды.

Перейдите на вкладку "Стили" и внесите эти изменения.

  • Цвет: 4EBBC6
  • Тип границы: сплошной
  • Ширина: 20
  • Цвет границы: белый

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

Убедитесь, что столбцы выровнены по вертикали до середины.

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

Затем вам нужно добавить кнопку прямо под виджетом заголовка.

На вкладке «Содержимое» в кнопках редактирования установите текст кнопки «Купить сейчас!».

На вкладке «Стиль» кнопок редактирования внесите следующие изменения.

  • Цвет фона: прозрачный
  • Цвет текста: черный
  • Положение границы: снизу
  • Тип границы: сплошной
  • Ширина границы: 2 пикселя
  • Радиус границы: Нет
  • Установите отступ внизу на 2 пикселя.

В библиотеке Elementor найдите обратный отсчет и перетащите виджет обратного отсчета во второй столбец.

Чтобы отредактировать виджет, перейдите в Edit Countdown, а затем в Content. Чтобы начать обратный отсчет по мере того, как посетитель приходит на ваш веб-сайт, установите тип обратного отсчета на Evergreen Timer, установите 24 часа и скройте «дни».

Придумайте сообщение, которое будет отображаться после истечения срока продажи, например «Извините! Срок действия продажи истек».

По прошествии 24 часов для пользователя всплывающее окно исчезнет и появится сообщение.

Вы также можете изменить дизайн таймера на вкладке стилей.

Затем перетащите виджеты изображений в столбцы влево, то есть в третий и четвертый столбцы. И добавьте к этим виджетам два изображения.

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

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

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