Как повысить ваш призыв к действию с помощью эффекта прокрутки «выигрышное вращение»

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

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

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

Sneak Peek

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

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

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

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

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

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

СКАЧАТЬ

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

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

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

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

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

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

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

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

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

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

После этого вы будете готовы приступить к созданию CTA с эффектом прокрутки «выигрышного вращения» в Divi.

Часть 1. Создание эффекта прокрутки «Winning Spin»

Для начала разверните представление слоев из нижнего меню настроек в Divi Builder. Это поможет лучше управлять нашими элементами дизайна.

Добавьте раздел, строку и столбцы

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

Внутри раздела добавьте строку из двух столбцов.

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

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

• Ширина желоба: 1
• Ширина: 94%
• Отступ: 10 пикселей сверху, 10 пикселей снизу.
• Ширина границы: 1 пикс.
• Цвет границы: rgba (0,0,0,0.12)

На вкладке «Дополнительно» добавьте следующий настраиваемый CSS к основному элементу:

display:flex;
align-items: center;

Граница столбца 1

После завершения настройки строки откройте настройки для столбца 1 и добавьте правую границу следующим образом:

• Ширина правой границы: 1 пикс.
• Цвет правой границы: rgba (0,0,0,0.12)

Создание стрелки и текста Spinner с помощью модуля рекламных объявлений

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

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

Добавьте новый модуль аннотации в левый столбец.

Рекламное содержание

Затем обновите содержание рекламного объявления, добавив новый заголовок и значок.

• Название: Вы выиграете
• Значок: стрелка вправо (см. Снимок экрана)

Дизайн рекламных объявлений

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

• Цвет значка: # a06d51
• Расположение изображения / значка: слева
• Размер шрифта значка: 80 пикселей (рабочий стол), 50 пикселей (планшет), 40 пикселей (телефон)
• Шрифт заголовка: Patua One
• Толщина шрифта заголовка: полужирный
• Размер текста заголовка: 40 пикселей (рабочий стол), 25 пикселей (планшет), 20 пикселей (телефон)
• Интервал между заглавными буквами: 1 пиксель
• Высота строки заголовка: 2em

Blurb Custom CSS

Затем измените порядок содержимого рекламного объявления так, чтобы стрелка была справа, а не слева, добавив следующий настраиваемый CSS к основному элементу:

direction: rtl !important;

Затем удалите отступы по умолчанию под заголовком рекламного объявления, добавив этот собственный CSS в заголовок рекламного объявления:

padding-bottom: 0px

Создание призовых отборов с помощью нескольких пятен

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

Создание рекламного объявления 1

Чтобы создать наше первое объявление в столбце 2, продублируйте объявление из столбца 1 и перетащите его в столбец 2.

Откройте настройки дублирующего рекламного объявления в столбце 2 и извлеките собственный CSS для основного элемента:

Это вернет нашу иконку влево.

Обновить заголовок и изображение

Затем обновите заголовок и изображение следующим образом:

• Название: БЕСПЛАТНОЕ печенье!
• Изображение: загрузить изображение (около 100 на 100 пикселей)

Дизайн вставки 1

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

• Ширина изображения: 80 пикселей (рабочий стол), 50 пикселей (планшет), 40 пикселей (телефон)
• Ширина содержимого: 92%
• Ширина: 100%

Преобразовать происхождение

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

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

• Transform Origin: справа в центре

Вы также должны удалить анимацию изображения / значка.

Абсолютное положение

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

• Позиция: Абсолютная
• Расположение: справа по центру

Создание рекламного объявления 2

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

Вращающееся объявление 2

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

• Преобразование вращения по оси Z: 25 градусов

Вы увидите, что рекламное объявление теперь повернуто за пределы области просмотра строки.

Создание и вращение Blurb 3

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

• Преобразование вращения по оси Z: 50 градусов

Создание и вращение Blurb 4

Чтобы создать четвертое рекламное объявление, продублируйте рекламное объявление 3. Затем обновите поворот преобразования следующим образом:

• Преобразование вращения по оси Z: 75 градусов

Обновить заголовок и изображения рекламного объявления

После того, как вы закончите добавлять 4 объявления, вернитесь и обновите заголовок и изображение для каждого по мере необходимости.

Вращение прокрутки столбца

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

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

• Transform Origin: справа в центре

На вкладке «Дополнительно» откройте вкладку эффекта вращающейся прокрутки и обновите следующее:

• Включить вращение: ДА
• Начальное вращение: -75% (при 15%)

Затем обновите триггер эффекта движения до «Top of Element».

Обновить строку со скрытым переполнением

Теперь вернитесь к настройкам строки и скройте переполнение содержимого, обновив следующую настройку строки:

• Горизонтальное переполнение: скрыто
• Вертикальный перелив: скрытый

Часть 2: Создание призового CTA

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

Добавить строку

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

Добавить текстовый модуль

Чтобы добавить содержимое нашего CTA, мы собираемся скопировать текстовый модуль из готового макета на странице. Найдите и скопируйте текстовый модуль с заголовком «Интернет-магазин».

Затем вставьте его в только что созданную строку.

Текстовый Дизайн

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

• Шрифт текста: PT Sans
• Толщина шрифта текста: полужирный
• Размер текста текста: 16 пикселей
• Высота текстовой строки: 2em
• Выравнивание текста: по центру

Добавить кнопку CTA

Затем найдите кнопку вверху готового макета и скопируйте ее.

Затем вставьте его прямо под текстовый модуль.

Эффект прокрутки строки

Чтобы отобразить CTA после того, как «выигрышный спин» выберет приз, откройте настройки строки и обновите следующий эффект прокрутки:

На вкладке «Появление и исчезновение»…

• Включить постепенное появление и исчезновение: ДА
• Начальная непрозрачность: 0% (при 50%)
• Средняя непрозрачность: 100% (при 55%)

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

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

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

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

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