Создание призыва к действию «Приступаем к работе», который открывает несколько вариантов при наведении курсора.
Опубликовано: 2019-06-26Многие компании размещают на своей домашней странице призыв к действию с призывом к действию. Обычно это основной призыв к действию на странице, поскольку он ведет пользователя через какой-то намеченный процесс. Это может быть простая кнопка «Начать сейчас», которая ведет на другую страницу. Или это может быть раздел страницы, который включает инструкции по «началу работы» и / или различные варианты, которые пользователь может использовать для запуска процесса, запланированного компанией.
В этом уроке мы покажем вам, как создать призыв к действию «Начало работы», который при наведении курсора покажет несколько вариантов «Начало работы». Используя Divi, мы создадим раздел, который будет выглядеть как большая кнопка. Затем при наведении курсора на кнопку параметры будут отображаться так же, как вертикальный ползунок открывает следующий слайд.
Дизайн элегантен, а функциональность может быть полезна во многих отношениях.
Давайте начнем.
Sneak Peek
Вот краткий обзор призыва к действию «Начало работы», который мы создадим в этом руководстве.
Загрузите макет CTA Divi «Начало работы» БЕСПЛАТНО
Чтобы получить дизайн из этого урока, вам сначала нужно загрузить его, нажав кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.
Скачать бесплатно
Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.
Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!
Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и перетащите файл json в Divi Builder.
Давайте перейдем к руководству, ладно?
Что вам нужно для начала
Для начала вам понадобится следующее:
- Тема Divi установлена и активна
- Новая страница, созданная для создания с нуля в интерфейсе пользователя (визуальный конструктор)
- Изображения, которые будут использоваться для фиктивного содержания
После этого у вас будет чистый холст, чтобы начать проектировать в Divi.
Реализация дизайна CTA «Начни с этого» в Divi
Основная идея этого дизайна заключается в перемещении содержимого раздела вверх при наведении курсора на раздел. Для этого нам нужно убедиться, что наша секция имеет фиксированную высоту со скрытым переливом. Это скроет параметры CTA перед состоянием наведения. Затем мы можем использовать маржу для размещения наших модулей и верхний отступ, чтобы перемещать контент в поле зрения при наведении курсора.
Начнем с раздела.
Создание раздела
Для начала создайте обычный раздел со строкой из одного столбца. Затем, прежде чем добавлять какие-либо модули, давайте обновим настройки раздела.
Откройте настройки раздела и обновите следующее:
Цвет фона: # 2b87da
Ширина: 90%
Максимальная ширина: 1100 пикселей
Выравнивание секции: по центру
Маржа: 6vw сверху, 6vw снизу (просто чтобы дать ему немного места для дыхания)
Отступ (рабочий стол): 300 пикселей сверху, 0 пикселей снизу.
Padding (планшет): 0px сверху, 15% снизу
Затем добавьте закругленные углы. Это будет создавать наш дизайн, похожий на кнопку, всякий раз, когда мы задаем максимальную высоту секции.
Закругленные углы: 140 пикселей (рабочий стол), 20 пикселей (при наведении), 10 пикселей (планшет)
Затем придайте ему тень блока (см. Снимок экрана).
На данном этапе мы не собираемся добавлять все настройки, необходимые для окончательного дизайна. Нам нужно будет вернуться и задать ему фиксированную высоту и эффект зависания. А пока добавим контент.
Создание первой строки контента
Откройте настройки для созданной вами строки с одним столбцом и обновите следующее:
Ширина: 100%
Отступ: 0 пикселей сверху, 0 пикселей снизу, 5% слева, 5% справа
Внутри строки с одним столбцом добавьте текстовый модуль.
Затем добавьте следующий заголовок h2 к содержанию тела.
<h2>Get Started Here...</h2>
Обновите настройки дизайна следующим образом:
Шрифт заголовка 2: Nunito
Толщина шрифта заголовка 2: полужирный
Цвет текста заголовка 2: #ffffff
Размер текста заголовка 2: 78 пикселей (компьютер и планшет), 46 пикселей (телефон).
Максимальная ширина: 500 пикселей
Высота: 300 пикселей (рабочий стол), авто (планшет и телефон)
Поля: сверху -300 пикселей (для ПК), сверху 0 пикселей (для планшетов и телефонов)
Утеплитель: 7% верх
Высота 300 пикселей и верхнее поле -300 пикселей поднимают текстовый модуль, чтобы заполнить верхний отступ в 300 пикселей раздела. Позже, когда мы убираем отступ в верхней части при наведении курсора, текстовый модуль будет прокручиваться вверх над разделом.
Создание второй строки контента
Вторая строка контента - это то место, где мы добавим наши опции CTA. Идите вперед и добавьте новую строку с макетом из трех столбцов.
Затем обновите настройки строки следующим образом:
Ширина: 100%
Максимальная ширина: 100%
Padding: 0px сверху, 0px снизу
Затем добавьте модуль рекламного сообщения в столбец 1.
Затем обновите настройки рекламного сообщения следующим образом:
Уберите основной текст по умолчанию и оставьте заголовок.
Затем добавьте значок изображения (90 X 90). Или вы можете использовать обычный значок Divi, если хотите.
Добавьте фон и обновите дизайн текста заголовка.
Цвет фона: #ffffff
Шрифт заголовка: Nunito
Плотность шрифта заголовка: Ультра полужирный
Стиль шрифта заголовка: TT
Выравнивание текста заголовка: по центру
Цвет текста заголовка: # 2b87da
Размер текста заголовка: 14 пикселей
Прежде чем мы сможем сделать размытые изображения круглыми, сначала нам нужно придать рекламному объявлению одинаковую высоту и ширину. Затем мы можем использовать интервал, чтобы выровнять рекламное объявление и содержимое рекламного объявления по центру.
Ширина содержимого: 200 пикселей (рабочий стол), 250 пикселей (планшет)
Ширина: 250 пикселей (рабочий стол), 300 пикселей (планшет)
Выравнивание модуля: по центру
Высота: 250 пикселей (рабочий стол), 300 пикселей (планшет)
Поля: сверху 25 пикселей, снизу 0 пикселей
Отступ: сверху 50 пикселей (рабочий стол), сверху 75 пикселей (планшет и телефон).
Чтобы завершить дизайн круга, придайте рекламному объявлению закругленный угол и тень прямоугольника.
Закругленные углы: 50%
Box Shadow: см. Снимок экрана
Это касается нашей первой аннотации. Для создания следующих двух. Скопируйте рекламное объявление и вставьте его в столбец 2 и столбец 3. Затем обновите значок изображения для каждого из них. Должно получиться так:
Последние штрихи к разделу
Чтобы завершить дизайн CTA «Начало работы», нам нужно немного обновить раздел. Обновите настройки следующего раздела:
Высота: 300 пикселей (рабочий стол), авто (планшет и телефон)
Горизонтальное переполнение: скрыто
Вертикальное переполнение: скрыто
При этом высота раздела останется такой же, как у содержимого в строке 1 и строке 2. Если скрыть переполнение, содержимое строки 2 останется скрытым до тех пор, пока мы не отобразим его при наведении курсора.
Чтобы отобразить содержимое строки 2, нам нужно убрать верхний отступ раздела при наведении курсора.
Отступ (при наведении): сверху 0 пикселей
Теперь посмотрим на результат. Контент будет прокручиваться вверх, чтобы отобразить контент в строке 2, в которой показаны три варианта CTA.
Чтобы раздел больше походил на кнопку, мы можем использовать параметры преобразования, чтобы уменьшить его, а затем вернуть к обычному размеру при наведении курсора. Обновите следующие параметры преобразования для раздела.
Масштаб трансформации (настольный компьютер): 70%
Масштаб трансформации (при наведении): 100%
Масштаб трансформации (планшет): 100%
Теперь добавьте фоновое изображение (500 X 500), чтобы занять нужный размер раздела.
Фоновое изображение: вставить изображение
Размер фонового изображения: фактический размер
Расположение фонового изображения: по центру справа (рабочий стол), вверху справа (планшет), вверху слева (телефон)
Добавление URL-адресов ссылок в Blurbs и их масштабирование при наведении курсора
Поскольку наши объявления действительно служат круглыми кнопками, нам нужно добавить URL-адреса ссылок на модули для каждого из них. Вам, конечно же, нужно будет добавить свои собственные, чтобы они соответствовали вашим потребностям.
Поскольку рекламные объявления скрыты в визуальном построителе, переключите режим просмотра каркаса и обновите каждую из настроек рекламного объявления с помощью URL-адреса ссылки модуля.
Затем оставайтесь в режиме каркасного просмотра и используйте множественный выбор, чтобы выбрать все три размытия. И откройте настройки одного из объявлений, чтобы обновить настройки элементов для всех трех. Затем обновите параметр преобразования следующим образом:
Масштаб трансформации (при наведении): 105%
Вот и все!
Окончательный результат
Давайте посмотрим на окончательный дизайн призыва к действию «Начать работу».
А вот и дизайн на планшете и телефоне.
Последние мысли
Призыв к действию «Начать работу» сегодня широко распространен в Интернете. Надеюсь, это руководство поможет вам перейти на следующий уровень. И не бойтесь думать о других способах использования этой функции. Думаю об этом. Вы можете добавить в раздел любой контент, какой захотите!
Не стесняйтесь делиться своими мыслями в комментариях ниже.
С нетерпением жду Вашего ответа.
Ваше здоровье!