Создание слайд-в CTA с настройками выравнивания строк и анимации Divi

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

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

Давайте приступим к делу!

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

Давайте посмотрим на три разных примера, которые мы рассмотрим в этом посте:

Загрузить целевую страницу клининговой компании

Добавить новую страницу и переключиться на Visual Builder

Как упоминалось ранее, мы собираемся использовать пакет макетов компании по уборке для создания этого руководства, но не стесняйтесь использовать этот подход для любого веб-сайта, который вы создаете. Добавьте новую страницу, введите заголовок страницы и сразу же переключитесь на Visual Builder.

Загрузить целевую страницу клининговой компании

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

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

Удаление всех настроек анимации на странице

Найдите раздел на странице

После того, как макет загружен на вашу страницу, перейдите к следующему разделу.

Удалить анимацию

Откройте его настройки и удалите уже существующую анимацию.

Расширить стиль на все разделы

Чтобы сэкономить время, мы собираемся распространить этот стиль анимации на все элементы дизайна на странице. Мы начнем с разделов на нашей странице, щелкнув правой кнопкой мыши и выбрав «Расширить стили анимации». Примените его ко всем разделам на странице и нажмите «Расширить».

Расширить стиль на все строки

Повторите те же шаги, но вместо этого примените их ко всем строкам на странице.

Расширить стиль на все модули

Наконец, примените его ко всем модулям на странице.

Создание CTA # 1

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

Место нахождения

Приступим к созданию первого слайда с призывом к действию! Добавьте новую строку внизу следующего раздела:

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

Выберите следующую структуру столбцов для только что добавленной строки:

Выравнивание строк

Мы собираемся сдвинуть строку влево, чтобы создать эффект скольжения.

• Выравнивание ряда: по левому краю

Размеры

Мы также уменьшим ширину нашего ряда.

• Использовать нестандартную ширину: Да
• Настраиваемая ширина: 500 пикселей

Интервал

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

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

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

Добавить копию

Теперь мы можем добавить наш модуль призыва к действию! Добавьте контент по выбору.

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

Затем добавьте ссылку на ваш модуль CTA. Если у вас еще нет ссылки для перенаправления, вы можете просто ввести "#". Не добавив что-либо в это поле, вы не сможете увидеть кнопку, поэтому убедитесь, что вы не оставили его пустым.

Удалить цвет фона

Модуль CTA по умолчанию имеет цвет фона. Идите дальше и удалите его в настройках фона.

Копировать градиент раздела

Откройте раздел, содержащий синий градиентный фон. Ничего не меняя об этом, щелкните правой кнопкой мыши и скопируйте настройки.

Вставить градиент в модуль CTA

Вставьте этот градиентный фон в модуль CTA.

Настройки текста заголовка

Снова откройте настройки модуля CTA, перейдите к настройкам текста заголовка и внесите некоторые изменения, чтобы они соответствовали пакету макетов:

• Шрифт заголовка: Ubuntu
• Толщина шрифта заголовка: полужирный
• Размер текста заголовка: 24 пикселей (компьютер и планшет), 16 пикселей (телефон)
• Высота строки заголовка: 1,2 мм

Настройки основного текста

Измените также толщину основного шрифта тела.

• Плотность основного шрифта: полужирный

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

Затем измените настройки кнопки.

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 18 пикселей
• Цвет текста кнопки: # 557df3
• Цвет фона кнопки: #FFFFFF
• Ширина границы кнопки: 10 пикселей
• Цвет границы кнопки: #FFFFFF
• Радиус границы кнопки: 0 пикселей
• Шрифт кнопки: Ubuntu
• Толщина шрифта: полужирный

Интервал

Увеличьте также заполнение модуля.

• Верхний отступ: 80 пикселей
• Нижний отступ: 80 пикселей
• Отступ слева: 50 пикселей
• Отступ справа: 50 пикселей

Граница

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

• Вверху справа: 100 пикселей
• Внизу справа: 100 пикселей

Коробка Тень

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

• Box Shadow Blur Strength: 71px.
• Сила распространения тени коробки: -5 пикселей

Анимация

И последнее, но не менее важное: дайте вашему модулю CTA эффект анимации.

• Направление анимации: вправо
• Интенсивность анимации: 100%
• Начальная непрозрачность анимации: 100%
• Кривая скорости анимации: линейная

Создание CTA # 2

Клонировать строку с призывом к действию №1 и внести изменения

Clone Row

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

Перетащить в раздел

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

Удалить верхнюю обивку секции

Откройте настройки раздела, в который вы поместили строку, и удалите верхнюю прокладку.

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

Удалить радиус верхней левой границы раздела

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

Удалить радиус верхней правой границы CTA

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

Изменить анимацию

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

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

Создание CTA # 3

Клонировать строку с призывом к действию №1 и внести изменения

Clone Row

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

Перетащить в раздел

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

Изменить выравнивание строки

Откройте настройки строки модуля и измените выравнивание вправо.

• Выравнивание строк: вправо

Удалить градиентный фон призыв к действию

Удалите также градиентный фон модуля.

Вместо этого используйте цвет фона

Вместо этого используйте цвет фона.

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

Изменить цвет текста кнопки

Чтобы соответствовать цвету фона, также измените цвет текста кнопки.

• Цвет текста кнопки: # f2835a

Удалить радиус границы CTA

Мы превращаем модуль CTA в квадрат, удалив все заданные ему границы радиуса.

Изменить анимацию

Затем измените настройки анимации.

• Направление анимации: вниз
• Интенсивность анимации: 100%
• Начальная непрозрачность анимации: 100%
• Кривая скорости анимации: линейная

Удалить нижнюю прокладку секции

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

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

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

Давайте в заключение рассмотрим три созданных нами вставных CTA.

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

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