Чем более привлекательным будет CTA, тем выше будет коэффициент конверсии. Есть много способов создать свои CTA, но в этой статье мы покажем вам, как создавать потрясающие шаблоны столбцов CTA с полупрозрачными изображениями и перекрытиями столбцов. Вы можете найти полупрозрачные изображения в папке для загрузки ниже, но можете использовать другие изображения. Вы также сможете бесплатно скачать файл JSON!
Пойдем.
Предыдущий
Прежде чем мы углубимся в руководство, давайте быстро посмотрим, как он выглядит на экранах разных размеров.
Давайте начнем воссоздание!
Добавить новый раздел
контекст
Начните с создания новой страницы или добавления нового обычного раздела к существующей странице. Затем перейдите в раздел настроек и добавьте градиентный фон.
- Фон: градиент
- Градиент цвета градиента: очень светло-серый #efefef
- Цвет фона два: белый #ffffff
- Тип градиента: Радиальный
- Радиальное направление: центр
- Начальная позиция: 52%
- Конечная позиция: 50%
расстояние
Перейдите на вкладку Дизайн и отрегулируйте заполнение в настройках интервала.
- Верхняя и нижняя обивка
- Офис: 0vw
- Обивка в чулках
- Планшет + телефон: 70vw
Добавить новую строку
Структура столбца
Продолжайте добавлять новую строку, используя следующую структуру столбцов:
калибровка
Затем настройте ширину и максимальную ширину линии.
- Ширина: 100%
- Максимальная ширина 100%
Добавить текстовый модуль
Добавить H2 и текстовый контент
Пришло время добавлять модули! Сначала добавьте текстовый модуль и вставьте несколько содержание H2 и абзацы по вашему выбору.
Текст
Перейдите на вкладку дизайна и стилизуйте текст следующим образом:
- Текст шрифта: Open Sans
- Выравнивание текста: центр
- Цвет текста: Зеленый #5bba1b
- Размер текста:
- Офис: 1.2vw
- Планшет: 2.8vw
- Телефон: 3.6vw
- Интервал текстовых букв: 0.2vw
- Высота строки текста: 1.8em
Заголовок 2 Текст
После оформления текста абзаца также примените стиль текста H2.
- Раздел: H2
- H2 Вес шрифта: Doppio One
- H2 Выравнивание текста: Центр
- Цвет текста H2: #3d3d3d
- H2 Размер текста:
- Офис: 4.4vw
- Планшет: 5.9vw
- Телефон: 6.9vw
расстояние
И добавьте немного обивки сверху.
- Верхняя обивка: 212px
Добавить модуль деления
видимость
В модуле «Текст» добавьте модуль разделения и установите для видимости значение «Да».
- Видимость: да
Линия
Затем измените цвет разделителя.
- Цвет линии: темно-серый #545454
калибровка
Теперь отрегулируйте размер разделителя так, чтобы он выглядел меньше.
- Вес сепаратора: 4px
- Ширина: 9%
- Выравнивание модуля: центр
расстояние
Также добавьте отрицательное верхнее поле.
- Верхнее поле:
- Офис: -40px
- Планшет + телефон: -15px
Добавить новую строку
Структура столбца
Продолжите, добавив новую строку с тремя столбцами одинакового размера. Это будет основой дизайна колонки CTA.
контекст
Прежде чем добавлять модули, добавьте градиент к фону параметров линии.
- Фон: градиент
- 1 градиент цвета фона: белый #ffffff
- Цвет градиента фона два: прозрачный
- Тип градиента: Радиальный
- Радиальный центр рулевого управления
- Начальная позиция: 42%
- Конечная позиция: 50%
калибровка
Теперь отрегулируйте размер линии.
- Ширина: 100%
- Максимальная ширина: 100%
расстояние
Затем перейдите к настройкам интервалов и добавьте собственные значения отступов.
- верхняя обивка: 22vw
- Нижняя обивка: 10vw
- Левый и правый отступ: 10vw
Настройки столбца 1
контекст
Для продолжения откройте столбец 1 и добавьте градиентный фон.
- Фон: градиент
- Цвет градиента фона: синий #2a4eed
- Цвет градиента фона два: светло-синий #91f5f7
- Тип градиента: линейный
- Направление градиента: 38deg
- Начальная позиция: 23%
Граница
Затем определите закругленные углы столбцов в настройках границ.
- Закругленные углы: 2vw на всех углах
Shadow box
Добавьте тонкий оттенок коробки тоже.
- Box Shadow: Второй вариант
- Тень коробки Горизонтальное положение: 6px
- Вертикальное положение тени от коробки: -10px
- Box Shadow Blur Force: 50px
переполнение
Убедитесь, что переполнения столбца также видны.
- Горизонтальное и вертикальное переполнение: видимый
Настройки столбца 2
контекст
Перейдите во второй столбец и добавьте следующий градиентный фон:
- Фон: градиент
- Цвет градиента фона один: #1ba038
- Двухцветный градиент фона: #c6f727
- Тип градиента: линейный
- Направление градиента: 38deg
- Начальная позиция: 23%
Граница
Также добавьте радиус границы к столбцу.
- Закругленные углы: 2vw на четырех углах
Shadow box
С тонким оттенком коробки.
- Box Shadow: Второй вариант
- Тень коробки Горизонтальное положение: 6px
- Вертикальное положение тени от коробки: -10px
- Box Shadow Blur Force: 50px
трансформатор
Этот столбец немного выше остальных. Чтобы создать этот эффект, мы собираемся настроить параметры преобразования преобразования для столбца 2.
- Transformer Перевести:
- Офис: -8vw, ось Y
- Планшет + телефон: 30vw, ось Y
переполнение
Также сделайте видимыми переполнения этого столбца.
- Горизонтальные и вертикальные переливы: видимые
Настройки столбца 3
контекст
Давайте перейдем к последнему и последнему столбцу! Добавьте градиентный фон.
- Фон: градиент
- Цвет фона градиента один: #f0562c
- Двухцветный фоновый градиент: #f1a526
- Тип градиента: линейный
- Направление градиента: 38deg
- Начальная позиция: 23%
Граница
Перейдите на вкладку «Дизайн» и добавьте радиус границы к каждому углу.
- Закругленные углы: 2vw на всех углах.
Shadow box
Добавьте шкатулку тоже.
- Box Shadow: Второй вариант
- Тень коробки Горизонтальное положение: 6px
- Вертикальное положение тени от коробки: -10px
- Box Shadow Blur Force: 50px
трансформатор
На экранах меньшего размера нам потребуется изменить положение столбца, используя настраиваемые значения преобразования преобразования.
- Transformer Перевести:
- Планшет + телефон: 60vw
переполнение
Наконец, настройте параметры переполнения.
- Горизонтальные и вертикальные переливы: видимые
Добавить модули изображений
Импортировать полупрозрачное изображение выреза
После того, как вы настроили все параметры столбца, самое время добавить модули. Добавьте модуль изображения в столбец 1 и загрузите полупрозрачное изображение по вашему выбору. Вы можете найти изображения, которые мы использовали, в заархивированной папке, которую вы смогли загрузить в начале этой статьи.
калибровка
Сделайте модуль полной ширины.
- Переключиться в режим полной ширины: Да
расстояние
Затем добавьте пользовательское поле и заполните значения.
- Верхнее поле:
- Офис: -11vw
- Планшет + телефон: -24vw
- Обивка слева и справа:
- Офис: 5vw
- Планшет + телефон: 20vw
Превратите лестницу в парение
Мы добавляем легкий эффект наведения к изображению, используя параметр масштабного преобразования в настройках преобразования.
- Масштаб трансформации при наведении: 120% по обеим осям.
Z-Index
Чтобы изображение отображалось в верхней части столбца, увеличьте значение индекса z на вкладке «Дополнительно».
- Z-индекс: 1
Дублируйте и перетащите модули изображений
Теперь дважды клонируйте модуль изображения и поместите дубликаты в оставшиеся два столбца. Этот процесс проще в проводном режиме.
- Начните с дублирования модуля изображения дважды
- Затем перетащите новые модули изображений в столбцы 2 и 3.
- Скачать разные картинки
Добавить текстовые модули
Добавить контент H3
Под изображением в столбце 1 добавьте текстовый модуль и вставьте несколько содержание H3 на ваш выбор.
Заголовок 3 Текст
Перейдите на вкладку дизайна и примените стиль к настройкам текста H3.
- Название текста: H3
- Шрифт H3: Doppio One
- H3 Вес шрифта: жирный
- Выравнивание H3: центр
- H3 Цвет текста: Белый #ffffff
- H3 Размер текста:
- Офис: 1.8vw
- Планшет: 5vw
- Телефон: 6vw
Дублирование и перетаскивание текстовых модулей
Дважды клонируйте текстовый модуль и поместите дубликаты в два оставшихся столбца.
- Начните с дублирования текстовых модулей дважды.
- Затем перетащите их под модули изображений в столбцах 2 и 3.
- Изменить содержание в каждом новом текстовом модуле
Добавить текстовые модули
Добавить контент
Под заголовком модуля добавьте новый текстовый модуль. Добавьте содержимое абзаца в область содержимого.
Текст
Теперь стиль текста следующим образом.
- Текст шрифта: Open Sans
- Цвет текста: белый #ffffff
- Размер текста:
- Офис: 0.6vw
- Планшет: 2vw
- Телефон: 2.8vw
- Высота строки текста: 2.2em
расстояние
Чтобы центрировать текст, отрегулируйте расстояние модуля следующим образом.
- Нижнее поле:
- Офис: 5vw
- Планшет + телефон: 10vw
- Обивка слева и справа
- Офис: 5vw
- Планшет + телефон: 14vw
Дублирование и перетаскивание текстовых модулей
Дважды клонируйте текстовый модуль и перетащите дубликаты в оставшиеся два столбца.
- Начните с дублирования текстовых модулей дважды
- Затем поместите дубликаты в столбцы 2 и 3.
- Изменить содержание каждого дубликата
Добавить кнопочные модули
Добавить контент
Давайте перейдем к последнему модулю! Добавьте модуль кнопок в столбец 1 с выбранной копией.
Добавить ссылку
Вставьте ссылку в опции ссылок модуля.
Alignement
Теперь выровняйте кнопочный модуль.
- Выравнивание: центр
Стили кнопок
Затем нажмите кнопку следующим образом.
- Размер текста кнопки:
- Офис: 1vw
- Планшет: 2vw
- Телефон: 3vw
- Цвет текста кнопки: Ярко-синий #2a4eed
- Цвет фона кнопки: Белый #ffffff
- Радиус границы кнопки: 50vw
- Шрифт кнопки: Double One
- Вес шрифта: жирный
- Цвет кнопок: ярко-синий #2a4eed
расстояние
Сформируйте кнопку и создайте перекрытие внизу, добавив настраиваемые значения полей и отступов в настройках интервала.
- Нижнее поле:
- Офис: -1.7vw
- Планшет: -4vw
- Телефон: -6vw
- Обивка верх и низ:
- Офис: 1vw
- Планшет + телефон: 3vw
- Обивка слева и справа
- Офис: 4vw
- Планшет + телефон: 10vw
Shadow box
И последнее, но не менее важное: добавьте к кнопке тонкий оттенок.
- Тень коробки: первый вариант
- Тень коробки в горизонтальном положении: 0px
- Тень вертикального положения коробки: 2px
- Box Shadow Blur Force: 50px
Дублирование и перетаскивание модулей кнопок
Как и в предыдущих модулях, дважды клонируйте кнопку и поместите дубликаты в оставшиеся два столбца строки.
- Клонировать кнопочный модуль дважды
- Поместите дубликаты в столбцы 2 и 3
Кнопка 2 Текст и цвет значка
Измените цвет значка кнопки и кнопочного модуля в столбце 2.
- Цвет текста кнопки: Зеленый # 1ba038
- Цвет значка: # 1ba038
Кнопка 3 Текст и цвет значка
Сделайте то же самое с кнопкой в последнем столбце, и все готово!
- Цвет текста кнопок: оранжевый #f0562c
- Цвет значка: # f0562c
Чтобы закончить
В этой статье мы показали вам, как использовать полупрозрачные изображения для создания потрясающего дизайна CTA-колонки. Мы использовали настройки переполнения столбца Divi чтобы изображения и кнопки плавно перекрывались. Попробуйте использовать этот дизайн в своем следующем проекте Divi и дайте нам знать, как это происходит в разделе комментариев!
