8 отложенных анимаций кнопок для вашего пользовательского заголовка Divi CTA

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

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

Sneak Peek

Вот краткий обзор 8 отложенных анимаций кнопок, которые мы добавим в CTA настраиваемого заголовка в Divi:

Загрузите макет 8 отложенных анимаций кнопок заголовка БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и перетащите файл json в Divi Builder.

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

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

Для начала вам необходимо установить и активировать тему Divi. Убедитесь, что у вас установлена ​​последняя версия Divi.

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

После этого все готово.

Импорт шаблона из второго пакета построителя тем

На панели управления WordPress перейдите в Divi> Theme Builder. В конструкторе тем щелкните значок переносимости в правом верхнем углу страницы. Во всплывающем окне переносимости выберите вкладку импорта, выберите файл theme-builder-pack-2-404-page-template.json и нажмите кнопку импорта. (Этот файл импорта будет внутри папки Second Theme Builder Pack)

Вы также можете выбрать вариант импорта глобального верхнего и нижнего колонтитула как статических макетов.

После импорта шаблона щелкните значок, чтобы изменить область настраиваемого заголовка.

Это приведет вас к редактору макета шаблона тела, где мы добавим отложенную анимацию к кнопке в готовом заголовке.

8 отложенных анимаций кнопок для вашего пользовательского заголовка CTA

Приведенные ниже 8 отложенных анимаций кнопок включают уникальную комбинацию встроенных параметров анимации Divi и свойства CSS перспективы. Свойство перспективы добавляет трехмерный эффект, когда анимация кнопки включает эффект переворачивания или сворачивания. Для большинства этих анимаций мы добавим анимацию как к кнопке, так и к ее родительскому столбцу, чтобы получить более сложное движение.

Они здесь…

Отказ выпадающего меню №1

Настройки кнопок:

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

• Стиль анимации: отскок
• Направление анимации: вниз
• Продолжительность анимации: 1100 мс
• Задержка анимации: 1500 мс
• Начальная непрозрачность анимации: 100%

# 2 3D вертикальный флип

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

Настройки столбца

Чтобы добавить перспективу к столбцу, откройте настройки строки, а затем щелкните, чтобы изменить настройки столбца 2. На вкладке «Дополнительно» добавьте следующий настраиваемый CSS-код к основному элементу:

perspective: 150px

Настройки кнопок:

• Стиль анимации: флип
• Направление анимации: центр
• Продолжительность анимации: 1500 мс
• Задержка анимации: 1000 мс
• Интенсивность анимации: 400%
• Начальная непрозрачность анимации: 100%

# 3 3D горизонтальный флип

Задержанная анимация кнопки 3D Horizontal Flip аналогична вертикальной анимации. Единственная реальная разница - это направление анимации.

Настройки столбца:

Во-первых, убедитесь, что вы добавили перспективу в столбец 2, добавив следующий настраиваемый CSS к основному элементу:

perspective: 150px

Настройки кнопок:

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

• Расположение кнопок: по центру

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

• Стиль анимации: сложить
• Направление анимации: центр
• Продолжительность анимации: 1000 мс
• Задержка анимации: 2000 мс
• Интенсивность анимации: 400%
• Начальная непрозрачность анимации: 100%
• Кривая скорости анимации: линейная

# 4 Dropdown Bounce + 3D вертикальный переворот

Эта отложенная анимация кнопки достигается путем объединения анимации отскока (добавленной в столбец) и анимации переворота (добавленной к кнопке).

Вот как это построить.

Настройки столбца:

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

• Стиль анимации: отскок
• Направление анимации: вниз
• Задержка анимации: 2000 мс
• Начальная непрозрачность анимации: 100%

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

perspective: 150px;

Настройки кнопок:

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

• Стиль анимации: флип
• Направление анимации: центр
• Продолжительность анимации: 1500 мс
• Задержка анимации: 1000 мс
• Интенсивность анимации: 400%
• Начальная непрозрачность анимации: 100%

Хитрость здесь в том, чтобы убедиться, что вы отложили начало переворота после завершения анимации столбца.

# 5 Проведите вниз (сдвиньте вниз + поверните)

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

Давай сделаем это.

Настройки столбца:

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

• Стиль анимации: слайд
• Направление анимации: вниз
• Задержка анимации: 1000 мс
• Начальная непрозрачность анимации: 100%

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

perspective: 150px

Настройки кнопок:

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

• Стиль анимации: ролл
• Направление анимации: вниз
• Продолжительность анимации: 1500 мс
• Задержка анимации: 1000 мс
• Начальная непрозрачность анимации: 100%

# 6 Увеличить (масштабирование + масштаб трансформации)

Эта отложенная анимация кнопки уникальна тем, что включает масштабирование кнопки с использованием масштаба преобразования. Затем мы добавляем к кнопке анимацию масштабирования.

Вот как это сделать.

Настройки кнопок:

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

• Масштаб трансформации: 175%
• Стиль анимации: Zoom
• Направление анимации: центр
• Продолжительность анимации: 1500 мс
• Задержка анимации: 1000 мс
• Начальная непрозрачность анимации: 100%

# 7 Pulse (увеличение + уменьшение)

Эта задержанная импульсная анимация создается путем объединения анимации уменьшения масштаба (добавленной в столбец) и анимации увеличения (добавленной к кнопке).

Давай сделаем это.

Настройки столбца:

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

• Стиль анимации: Zoom
• Направление анимации: центр
• Продолжительность анимации: 1000 мс
• Задержка анимации: 2000 мс
• Интенсивность анимации: -100%
• Начальная непрозрачность анимации: 100%

Обратите внимание, что мы добавили отрицательное значение (-100%) для интенсивности анимации. Это приводит к противоположному эффекту столбца, который сокращает столбец / кнопку (или уменьшает масштаб).

Настройки кнопок:

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

• Стиль анимации: Zoom
• Направление анимации: центр
• Продолжительность анимации: 1500 мс
• Задержка анимации: 1000 мс
• Интенсивность анимации: 50%
• Начальная непрозрачность анимации: 100%

Обратите внимание, что задержка анимации установлена ​​на 1000 мсек до анимации столбца, поэтому кнопка будет увеличиваться, прежде чем уменьшится.

# 8 Спираль (слайд влево + вращение)

Эта последняя задержанная анимация кнопки сочетает в себе слайд-анимацию (добавленную в столбец) и анимацию поворота на 720 градусов (добавленную к кнопке).

Вот как это сделать.

Настройки столбца:

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

• Стиль анимации: слайд
• Направление анимации: влево
• Продолжительность анимации: 2000 мс
• Задержка анимации: 2000 мс
• Интенсивность анимации: 100%
• Начальная непрозрачность анимации: 100%

Настройки кнопок:

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

• Стиль анимации: флип
• Направление анимации: центр
• Продолжительность анимации: 2000 мс
• Задержка анимации: 2000 мс
• Интенсивность анимации: 800%
• Начальная непрозрачность анимации: 100%

Обратите внимание, что интенсивность анимации установлена ​​на 800%. Это заставит кнопку перевернуться три раза, чтобы создать эффект вращения.

Окончательные результаты

Давайте в последний раз взглянем на 8 отложенных анимаций кнопок.

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

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

Есть любимый?

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

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