Колкото по-привлекателен е CTA, толкова по-голям е шансът процентът на конверсия да бъде. Има много начини да проектирате вашите CTA, но в тази статия ще ви покажем как да създадете страхотни шаблони за колони за CTA с полупрозрачни изображения и наслагвания на колони. Можете да намерите полупрозрачните изображения в папката за изтегляне по-долу, но не се колебайте да използвате други изображения. Също така ще можете да изтеглите безплатно JSON файла!
Да вървим.
визуализациите
Преди да се потопим в урока, нека да разгледаме набързо как изглежда на различни размери на екрана.
Нека започнем да пресъздаваме!
Добавете нов раздел
Contexte
Започнете със създаване на нова страница или добавяне на нова обикновена секция към съществуваща страница. След това отидете в раздела за настройки и добавете градиентен фон.
- Фон: градиент
- Цветен градиент на градиента: много светло сив #efefef
- Цвят на втория цвят: бял #ffffff
- Тип градиент: Радиален
- Радиална посока: център
- Начална позиция: 52%
- Крайна позиция: 50%
разстояние
Превключете към раздела Проектиране и коригирайте запълването в настройките на разстоянието.
- Горна и долна подплънка
- Офис: 0vw
- Тапицерия в чорапи
- Таблет + Телефон: 70vw
Добавете нов ред
Структура на колоната
Продължете да добавяте нов ред, като използвате следната структура на колоната:
оразмеряване
След това регулирайте ширината и максималната ширина на линията.
- Ширина: 100%
- Максимална ширина 100%
Добавете текстов модул
Добавете H2 и текстово съдържание
Време е за добавяне на модули! Първо добавете текстов модул и вмъкнете малко съдържание H2 и параграфи по ваш избор.
Texte
Преминете към раздела за дизайн и оформете текста, както следва:
- Текст на шрифта: 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
Добавете модул за разделяне
видимост
Под текстовия модул добавете модул за разделяне и задайте видимост на „Да“.
- видимост: да
Ligne
Променете цвета на разделителя след това.
- Цвят на линията: Тъмно сив #545454
оразмеряване
Сега коригирайте размера на разделителя, така че да изглежда по-малък.
- Тегло на сепаратора: 4px
- Ширина: 9%
- Подравняване на модула: център
разстояние
Добавете и отрицателен горен марж.
- Горна граница:
- Офис: -40px
- Таблет + Телефон: -15px
Добавете нов ред
Структура на колоната
Продължете, като добавите нов ред с три колони с еднакъв размер. Това ще бъде основата за дизайна на колоната CTA.
Contexte
Преди да добавите модули, добавете градиент към фона на параметрите на реда.
- Фон: градиент
- 1 цветен градиент на фона: бял #ffffff
- Цвят на градиентния фон два: прозрачен
- Тип градиент: Радиален
- Радиален кормилен център
- Начална позиция: 42%
- Крайна позиция: 50%
оразмеряване
Сега коригирайте размера на линията.
- Ширина: 100%
- Максимална ширина: 100%
разстояние
След това отидете в настройките за разстоянието и добавете персонализирани стойности за подплата.
- горна тапицерия: 22vw
- Подложка отдолу: 10vw
- Ляв и десен подплънки: 10vw
Настройки на колоните 1
Contexte
Продължете, като отворите колоната 1 и добавите градиентен фон.
- Фон: градиент
- Цвят на градиентния фон: син #2a4eed
- Цвят на градиентния фон два: светло син #91f5f7
- Тип градиент: линеен
- Наклон на градиента: 38deg
- Начална позиция: 23%
граница
След това дефинирайте заоблените ъгли на колоните в настройките на границата.
- Заоблени ъгли: 2vw във всички ъгли
Кутия за сянка
Добавете и фин нюанс на кутията.
- Box Shadow: Втора опция
- Сянка на кутията Хоризонтална позиция: 6px
- Кутия Сянка Вертикална позиция: -10px
- Сила за размазване на кутия в сянка: 50px
залято
Уверете се, че преливниците на колоната също са видими.
- Хоризонтално и вертикално преливане: видимо
Настройки на колоните 2
Contexte
Отидете във втората колона и добавете следния градиентен фон:
- Фон: градиент
- Цвят на градиента на фона един: #1ba038
- Двуцветен градиент на фона: #c6f727
- Тип градиент: линеен
- Наклон на градиента: 38deg
- Начална позиция: 23%
граница
Освен това добавете граница радиус към колоната.
- Заоблени ъгли: 2vw в четирите ъгъла
Кутия за сянка
С фин нюанс на кутията.
- Box Shadow: Втора опция
- Сянка на кутията Хоризонтална позиция: 6px
- Кутия Сянка Вертикална позиция: -10px
- Сила за размазване на кутия в сянка: 50px
Трансформатор
Тази колона е малко по-висока от останалите. За да създадем този ефект, ще коригираме настройките за преобразуване на преобразуване за колона 2.
- Трансформатор Превод:
- Офис: -8vw, y-ос
- Таблет + Телефон: 30vw, Y ос
залято
Също така направете видими преливанията на тази колона.
- Хоризонтални и вертикални преливания: видими
Настройки на колоните 3
Contexte
Да преминем към последната и последната колона! Добавете градиентен фон.
- Фон: градиент
- Цвят на градиентния фон един: #f0562c
- Двуцветен цветен градиент: #f1a526
- Тип градиент: линеен
- Наклон на градиента: 38deg
- Начална позиция: 23%
граница
Преминете към раздела Дизайн и добавете радиус на границата към всеки ъгъл.
- Заоблени ъгли: 2vw на всички ъгли.
Кутия за сянка
Добавете и кутия сянка.
- Box Shadow: Втора опция
- Сянка на кутията Хоризонтална позиция: 6px
- Кутия Сянка Вертикална позиция: -10px
- Сила за размазване на кутия в сянка: 50px
Трансформатор
При по-малки размери на екрана ще трябва да преместим колоната, като използваме стойности за преобразуване по избор.
- Трансформатор Превод:
- Таблет + Телефон: 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.
- Променете съдържание във всеки нов текстов модул
Добавете текстови модули
Добавете съдържание
Под заглавния модул добавете нов текстов модул. Добавете съдържание на абзац в областта на съдържанието.
Texte
Сега стилизирайте текста по следния начин.
- Текст на шрифта: Open Sans
- Цвят на текста: Бял #ffffff
- Размер на текста:
- Офис: 0.6vw
- Таблет: 2vw
- Телефон: 2.8vw
- Височина на реда на текста: 2.2em
разстояние
За да центрирате текста, регулирайте разстоянието на модула, както следва.
- Долен марж:
- Офис: 5vw
- Таблет + Телефон: 10vw
- Подплънки наляво и надясно
- Офис: 5vw
- Таблет + Телефон: 14vw
Дублирайте и плъзнете текстови модули
Клонирайте текстовия модул два пъти и плъзнете дублиращите елементи в останалите две колони.
- Започнете с дублиране на текстовите модули два пъти
- След това поставете дублиращите в колони 2 и 3
- Променете съдържанието на всеки дубликат
Добавете модули с бутони
Добавете съдържание
Да преминем към последния модул! Добавете модул с бутони към колоната 1 с копие по ваш избор.
Добави линк
Вмъкнете връзка в опциите за връзка на модула.
подравняване
Сега подравнете модула на бутона.
- Подравняване: център
Стилове на бутони
След това извикайте бутона, както следва.
- Размер на текста на бутона:
- Офис: 1vw
- Таблет: 2vw
- Телефон: 3vw
- Цвят на текста на бутона: Ярко син #2a4eed
- Цвят на фона на бутона: бял #ffffff
- Радиус на границата на бутона: 50vw
- Шрифт на бутона: Double One
- Тегло на шрифта: Дързо
- Цветът на бутоните: Ярко синьо #2a4eed
разстояние
Оформете бутона и създайте припокриване отдолу, като добавите персонализирани стойности на полета и подплънки в настройките на разстоянието.
- Долен марж:
- Офис: -1.7vw
- Таблет: -4vw
- Телефон: -6vw
- Тапицерия отгоре и отдолу:
- Офис: 1vw
- Таблет + Телефон: 3vw
- Подплънки наляво и надясно
- Офис: 4vw
- Таблет + Телефон: 10vw
Кутия за сянка
Не на последно място, добавете фин нюанс на кутията към бутона.
- Кутия сянка: първи вариант
- Сянка на хоризонталното положение на кутията: 0px
- Сянка на вертикалното положение на кутията: 2px
- Сила за размазване на кутия в сянка: 50px
Дублиращи и плъзгащи се бутони
Както при предишните модули, клонирайте бутона два пъти и поставете дублиращите елементи в останалите две колони на реда.
- Клонирайте модула с два пъти
- Поставете дубликатите в колони 2 и 3
Бутон 2 Текст и цвят на иконата
Променете цвета на иконата на бутона и модула на бутона в колона 2.
- Цвят на текста на бутона: Зелен # 1ba038
- Цвят на иконата: # 1ba038
Бутон 3 Текст и цвят на иконата
Направете същото с бутона в последната колона и сте готови!
- Цвят на текста на бутоните: оранжев #f0562c
- Цвят на иконата: # f0562c
Завърши
В тази статия ви показахме как да използвате полупрозрачни изображения, за да създадете зашеметяващ дизайн на колона с призив към действие. Използвахме настройките за препълване на колони на Divi, за да направим изображенията и бутоните да се припокриват безпроблемно. Опитайте да използвате този дизайн в следващия си Divi проект и ни уведомете как се получава в секцията за коментари!