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

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

Давайте перейдем к этому.

Предварительный просмотр

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

Рабочий стол

Мобильный

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

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

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

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

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

СКАЧАТЬ

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

Начнем воссоздавать!

Добавить новую специальную секцию

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

Градиентный фон

Откройте настройки раздела и примените следующий градиентный фон:

• Цвет 1: # fff8f5
• Цвет 2: # f9f3ef
• Тип градиента: радиальный
• Радиальное направление: внизу слева
• Стартовая позиция: 40%
• Конечная позиция: 40%

Размеры

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

• Выровнять высоту столбца: Да
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Внутренняя ширина: 90%
• Внутренняя максимальная ширина: 1580 пикселей

Интервал

Затем перейдите к настройкам интервалов и добавьте правый отступ в столбец 1.

• Колонка 1, отступ справа: 6%

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

Добавить контент H2

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

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

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

• Шрифт заголовка 2: Kumbh Sans
• Толщина шрифта заголовка 2: полужирный
• Цвет текста заголовка 2: # 08665c
• Размер текста заголовка 2:
  • Рабочий стол: 75 пикселей
  • Таблетка: 60 ​​пикселей
  • Телефон: 45 пикселей

Интервал

Затем добавьте верхнее и нижнее поле.

• Верхнее поле: 50 пикселей
• Нижнее поле: 50 пикселей

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

Добавить описание содержимого

Добавьте еще один текстовый модуль под предыдущим с некоторым описанием по вашему выбору.

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

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

• Шрифт текста: Kumbh Sans
• Цвет текста: # 08665c
• Размер текста: 16 пикселей
• Высота текстовой строки: 1,8 м

Интервал

Добавьте немного нижнего поля на экранах меньшего размера.

• Нижняя маржа:
  • Рабочий стол: /
  • Планшет и телефон: 50 пикселей

Добавить строку №1 в столбец 2

Структура столбца

Переходим ко второй колонке раздела. Там добавьте первую строку, используя следующую структуру столбцов

Размеры

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

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 2

Интервал

Затем удалите все стандартные верхние и нижние отступы.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

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

Фоновый цвет

Затем откройте настройки столбца 1 и примените цвет фона по вашему выбору.

• Цвет фона: #cccccc

Интервал

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

• Верхняя обивка:
  • Рабочий стол: 100 пикселей
  • Планшет и телефон: 70 пикселей
• Левый отступ:
  • Компьютеры и планшеты: 8%
  • Телефон: 10%
• Правый отступ:
  • Компьютеры и планшеты: 8%
  • Телефон: 10%

Граница

Также добавьте закругленные углы к настройкам границы.

• Все углы: 10 пикселей

Видимость

Завершите настройки столбца настройками, которые должны отображаться на расширенной вкладке.

• Горизонтальное переполнение: видимое
• Вертикальное переполнение: видимое

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

Добавить содержимое

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

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

Измените текстовые настройки модуля:

• Шрифт текста: Kumbh Sans
• Толщина шрифта текста: легкий
• Цвет текста: # 08665c
• Размер текста: 30 пикселей
• Высота текстовой строки: 1em

Интервал

Также примените немного нижнего поля.

• Нижнее поле: 15 пикселей

Добавить модуль разделителя в столбец 1

Видимость

Затем добавьте модуль разделителя. Убедитесь, что опция «Показать разделитель» включена.

• Показать разделитель: Да

Линия

Перейдите на вкладку дизайна модуля и измените цвет линии.

• Цвет линии: # fff8f5

Размеры

Измените также настройки размера.

• Вес разделителя: 2 пикселя
• Высота: 2 пикселя

Интервал

Также добавьте немного нижнего поля.

• Нижнее поле: 50 пикселей

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

Добавить контент H3

Добавьте еще один текстовый модуль в столбец 1. Используйте контент H3 по вашему выбору.

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

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

• Шрифт заголовка 3: Kumbh Sans
• Толщина шрифта заголовка 3: полужирный
• Цвет текста заголовка 3: # 08665c
• Размер текста заголовка 3:
  • Рабочий стол: 48 пикселей
  • Таблетка: 38 пикселей
  • Телефон: 32px

Интервал

Также используйте нижнее поле.

• Нижнее поле: 15 пикселей

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

Добавить содержимое

Добавьте последний текстовый модуль в столбец 1 с некоторым описанием по вашему выбору.

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

Соответственно измените настройки текста:

• Шрифт текста: Kumbh Sans
• Цвет текста: # 08665c
• Размер текста: 16 пикселей
• Высота текстовой строки: 1,8 м

Интервал

Включите также нижнее поле.

• Нижняя маржа:
  • Рабочий стол: 200 пикселей
  • Планшет и телефон: 150 пикселей

Добавить модуль Blurb в столбец 1

Оставьте поля содержимого пустыми

Переходим к последнему модулю, который нам нужен в этом столбце, это модуль Blurb. Оставьте поля содержимого пустыми.

Значок по умолчанию

Щелкните значок стрелки рядом.

Значок наведения

Измените значок при наведении.

Добавить ссылку

Используйте ссылку и на этот модуль.

Цвет фона при наведении

Затем добавьте цвет фона при наведении.

• Цвет фона при наведении: # 08665c

Настройки значков по умолчанию

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

• Цвет значка: #ffffff
• Размещение изображения / значка: вверху
• Выравнивание изображения / значка: вправо
• Использовать размер шрифта значка: Да
• Размер шрифта значка: 80 пикселей

Настройки значка наведения

Измените размер шрифта значка при наведении курсора.

• Размер шрифта значка наведения: 40 пикселей

Размеры

Затем добавьте немного ширины в настройки размера.

• Ширина: 80 пикселей

Расстояние при наведении

Измените верхнее и правое отступы при наведении курсора.

• Отступ сверху при наведении: 25 пикселей
• Отступ вправо при наведении: 10 пикселей

Граница

Также включите закругленные углы в настройки границы.

• Все углы: 5 пикселей

Масштаб наведения

Затем используйте опцию масштабирования трансформации при наведении курсора.

• Наведите оба: 130%

CSS для основного элемента и размытого изображения

Затем перейдите на вкладку «Дополнительно» и используйте следующую строку кода CSS для основного элемента:

cursor: pointer;

Используйте эту строку для поля css Blurb Image:

margin-bottom: 0px;

Позиция

Завершите настройки модуля, переставив его в настройках положения:

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

Повторное использование столбца 1

Удалить столбец 2

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

Клонировать столбец 1

Затем клонируйте первый.

Изменить цвет фона столбца 2

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

• Цвет фона столбца 2: # f0c7b1

Добавить Transform Translate to Column 2

Мы также добавляем значение transform translate для экранов меньшего размера.

• Верно:
  • Рабочий стол: /
  • Планшет и телефон: 50 пикселей

Изменить повторяющийся контент

Убедитесь, что вы изменили весь повторяющийся контент.

Изменить ссылку на модуль Blurb

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

Повторное использование строки

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

Удалить столбец 2

Удалите второй столбец в настройках строки.

Изменить цвет фона столбца

Затем измените цвет фона оставшегося столбца.

• Цвет фона столбца: # dfe7f2

Добавить верхнюю маржу в строку

Вернитесь к общим настройкам строки и добавьте отзывчивое верхнее поле.

• Верхнее поле:
  • Рабочий стол: 50 пикселей
  • Планшет и телефон: 100 пикселей

Изменить повторяющийся контент

Затем измените все повторяющееся содержимое в столбце.

Изменить ссылку на модуль Blurb

Завершите руководство, изменив ссылку внутри модуля Blurb. Вот и все!

Предварительный просмотр

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

Рабочий стол

Мобильный

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

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

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