Бъдещето на уеб хостинга е тук!

Веднага щом вашият уебсайт достигне 15.000 3 посетители на месец за период от 90 месеца (XNUMX дни), вашият хостинг автоматично става безплатен за цял живот... както и всички включени Premium WordPress плъгини.

N

Несравним управляван хостинг

N

Elementor, Divi AI, AIOSEO и др

N

Имейл адрес на PayPal за партньори

N

Brouavo Super Marketing Plugin

N

Стартирайте сайта си за минути

N

Първокласна 24/7 експертна поддръжка

N

30 дни гаранция за връщане на парите

Включено във всички пакети: Elementor Pro – Divi Builder и Divi Ai, Преводателпрес Про, Всичко в едно SEO професионалист, Защитник Професионален, Форминатор Про, Смъш Про, Snapshot Pro, Платен абонамент за членове Pro, Hummingbird Pro, Хъстъл Про, Плъгинът Brouavo Super Marketing.

Колкото по-привлекателен е CTA, толкова по-голям е шансът процентът на конверсия да бъде. Има много начини да проектирате вашите CTA, но в тази статия ще ви покажем как да създадете страхотни шаблони за колони за CTA с полупрозрачни изображения и наслагвания на колони. Можете да намерите полупрозрачните изображения в папката за изтегляне по-долу, но не се колебайте да използвате други изображения. Също така ще можете да изтеглите безплатно JSON файла!

Да вървим.

визуализациите

Преди да се потопим в урока, нека да разгледаме набързо как изглежда на различни размери на екрана.

Blurb divi дизайн
Нека започнем да пресъздаваме!

Добавете нов раздел

Contexte

Започнете със създаване на нова страница или добавяне на нова обикновена секция към съществуваща страница. След това отидете в раздела за настройки и добавете градиентен фон.

  • Фон: градиент
  • Цветен градиент на градиента: много светло сив #efefef
  • Цвят на втория цвят: бял #ffffff
  • Тип градиент: Радиален
  • Радиална посока: център
  • Начална позиция: 52%
  • Крайна позиция: 50%

Фон на секция Divi

разстояние

Превключете към раздела Проектиране и коригирайте запълването в настройките на разстоянието.

  • Горна и долна подплънка
    • Офис: 0vw
  • Тапицерия в чорапи
    • Таблет + Телефон: 70vw

Конфигурация на раздела divi
Добавете нов ред

Структура на колоната

Продължете да добавяте нов ред, като използвате следната структура на колоната:

Добавете нова дивизия
оразмеряване

След това регулирайте ширината и максималната ширина на линията.

  • Ширина: 100%
  • Максимална ширина 100%

Оразмеряване на Nexopos

Добавете текстов модул

Добавете H2 и текстово съдържание

Време е за добавяне на модули! Първо добавете текстов модул и вмъкнете малко съдържание H2 и параграфи по ваш избор.

Персонализиране на текстов модул

Texte

Преминете към раздела за дизайн и оформете текста, както следва:

  • Текст на шрифта: Open Sans
  • Подравняване на текста: център
  • Цвят на текста: Зелен #5bba1b
  • Размер на текста:
    • Офис: 1.2vw
    • Таблет: 2.8vw
    • Телефон: 3.6vw
  • Разстояние между текстовите букви: 0.2vw
  • Височина на реда на текста: 1.8em

Конфигурация на стила на текстовия модул на Wordpress
Заглавие 2 Текст

След стилизиране на текста на абзаца, също стилизирайте текста H2.

  • Секция: H2
  • H2 Тегло на шрифта: Doppio One
  • Подравняване на текст H2: Център
  • Цвят на текста H2: #3d3d3d
  • H2 Размер на текста:
    • Офис: 4.4vw
    • Таблет: 5.9vw
    • Телефон: 6.9vw

Персонализирайте главата divi
разстояние

И добавете малко подплънки в горната част.

  • Най-висока подложка: 212px

Персонализиране на подложката на текстовия модул

Добавете модул за разделяне

видимост

Под текстовия модул добавете модул за разделяне и задайте видимост на „Да“.

Показване на модула за разделяне на divi

Ligne

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

  • Цвят на линията: Тъмно сив #545454

Персонализирайте цвета на дивизионната линия

оразмеряване

Сега коригирайте размера на разделителя, така че да изглежда по-малък.

  • Тегло на сепаратора: 4px
  • Ширина: 9%
  • Подравняване на модула: център

Персонализирайте подравняването на divi

разстояние

Добавете и отрицателен горен марж.

  • Горна граница:
    • Офис: -40px
    • Таблет + Телефон: -15px

Разделител на модула с отрицателен марж divi

Добавете нов ред

Структура на колоната

Продължете, като добавите нов ред с три колони с еднакъв размер. Това ще бъде основата за дизайна на колоната CTA.

Редът има 3 колони divi

Contexte

Преди да добавите модули, добавете градиент към фона на параметрите на реда.

  • Фон: градиент
  • 1 цветен градиент на фона: бял #ffffff
  • Цвят на градиентния фон два: прозрачен
  • Тип градиент: Радиален
  • Радиален кормилен център
  • Начална позиция: 42%
  • Крайна позиция: 50%

Настройка на параметрите на Divi линия

оразмеряване

Сега коригирайте размера на линията.

  • Ширина: 100%
  • Максимална ширина: 100%

Оразмеряване на Divi линия
разстояние

След това отидете в настройките за разстоянието и добавете персонализирани стойности за подплата.

  • горна тапицерия: 22vw
  • Подложка отдолу: 10vw
  • Ляв и десен подплънки: 10vw

Конфигуриране на подложка на линия divi

Настройки на колоните 1

Contexte

Продължете, като отворите колоната 1 и добавите градиентен фон.

  • Фон: градиент
  • Цвят на градиентния фон: син #2a4eed
  • Цвят на градиентния фон два: светло син #91f5f7
  • Тип градиент: линеен
  • Наклон на градиента: 38deg
  • Начална позиция: 23%

Конфигурация на градиентния дел

граница

След това дефинирайте заоблените ъгли на колоните в настройките на границата.

  • Заоблени ъгли: 2vw във всички ъгли

Конфигурация на заоблена граница на колона

Кутия за сянка

Добавете и фин нюанс на кутията.

  • Box Shadow: Втора опция
  • Сянка на кутията Хоризонтална позиция: 6px
  • Кутия Сянка Вертикална позиция: -10px
  • Сила за размазване на кутия в сянка: 50px

Конфигурация на сянка в колона 1

залято

Уверете се, че преливниците на колоната също са видими.

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

Конфигурация за преливане на колона Divi

Настройки на колоните 2

Contexte

Отидете във втората колона и добавете следния градиентен фон:

  • Фон: градиент
  • Цвят на градиента на фона един: #1ba038
  • Двуцветен градиент на фона: #c6f727
  • Тип градиент: линеен
  • Наклон на градиента: 38deg
  • Начална позиция: 23%

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

граница

Освен това добавете граница радиус към колоната.

  • Заоблени ъгли: 2vw в четирите ъгъла

Конфигурация на колона 2 заоблени divi

Кутия за сянка

С фин нюанс на кутията.

  • Box Shadow: Втора опция
  • Сянка на кутията Хоризонтална позиция: 6px
  • Кутия Сянка Вертикална позиция: -10px
  • Сила за размазване на кутия в сянка: 50px

Конфигурация на сянката на колона 2 divi

Трансформатор

Тази колона е малко по-висока от останалите. За да създадем този ефект, ще коригираме настройките за преобразуване на преобразуване за колона 2.

  • Трансформатор Превод:
    • Офис: -8vw, y-ос
    • Таблет + Телефон: 30vw, Y ос

Конфигурация на позиция на колона 2 divi

залято

Също така направете видими преливанията на тази колона.

  • Хоризонтални и вертикални преливания: видими

Конфигурация на видимост на колона 2 divi
Настройки на колоните 3

Contexte

Да преминем към последната и последната колона! Добавете градиентен фон.

  • Фон: градиент
  • Цвят на градиентния фон един: #f0562c
  • Двуцветен цветен градиент: #f1a526
  • Тип градиент: линеен
  • Наклон на градиента: 38deg
  • Начална позиция: 23%

Конфигурация на фона на колона 3 divi
граница

Преминете към раздела Дизайн и добавете радиус на границата към всеки ъгъл.

  • Заоблени ъгли: 2vw на всички ъгли.

Колона за разделяне на закръглена граница 3
Кутия за сянка

Добавете и кутия сянка.

  • Box Shadow: Втора опция
  • Сянка на кутията Хоризонтална позиция: 6px
  • Кутия Сянка Вертикална позиция: -10px
  • Сила за размазване на кутия в сянка: 50px

Колона за конфигуриране на граничен divi 3

Трансформатор

При по-малки размери на екрана ще трябва да преместим колоната, като използваме стойности за преобразуване по избор.

  • Трансформатор Превод:
    • Таблет + Телефон: 60vw

Преобразуване на модул Divi

залято

Накрая коригирайте настройките за преливане.

  • Хоризонтални и вертикални преливания: видими

Конфигурация за преливане на Divi

Добавете модули за изображения

Импортирайте полупрозрачно изображение

След като сте направили всички параметри на колоната, е време да добавите модули. Добавете модул за изображение към колона 1 и качете полупрозрачно изображение по ваш избор. Можете да намерите изображенията, които използвахме, в папката с цип, която успяхте да изтеглите в началото на тази статия.

Добавете прозрачно изображение на divi

оразмеряване

Направете модула с пълна ширина.

  • Превключване в режим на пълна ширина: Да

Превключете на moe с пълна ширина

разстояние

След това добавете персонализирани стойности за марж и запълване.

  • Горна граница:
    • Офис: -11vw
    • Таблет + Телефон: -24vw
  • Подложка отляво и отдясно:
    • Офис: 5vw
    • Таблет + Телефон: 20vw

Подплатен конфигурационен модул за изображение divi

Преобразувайте стълбата в ховър

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

  • Трансформационна скала при задържане: 120% и на двете оси.

Преобразувайте в изображение на модула на hover divi

Z-Index

За да сте сигурни, че изображението се появява в горната част на колоната, увеличете стойността на индекса z в раздела Разширени.

  • Z-индекс: 1

Конфигурация zindex модул изображение divi

Дублирайте и плъзнете модули за изображения

Сега клонирайте модула за изображения два пъти и поставете дубликатите в останалите две колони. Този процес е по-лесен в жичен режим.

  • Започнете с дублиране на модула за изображение два пъти
  • След това плъзнете новите модули за изображение в колоните 2 и 3.
  • Изтеглете различни изображения

Дублирайте и преместете модул за изображение

Добавете текстови модули

Добавете H3 съдържание

Под изображението в колона 1 добавете текстов модул и вмъкнете малко съдържание H3 по ваш избор.

Добавяне на текст на модула divi

Заглавие 3 Текст

Преминете към раздела за проектиране и приложете стил към настройките на текста H3.

  • Заглавие на текста: H3
  • Шрифт H3: Doppio One
  • H3 Тегло на шрифта: удебелен
  • H3 Подравняване: център
  • Цвят на текста на H3: бял #ffffff
  • H3 Размер на текста:
    • Офис: 1.8vw
    • Таблет: 5vw
    • Телефон: 6vw

Параметър на текстовия модул Divi

Дублирайте и плъзнете текстови модули

Клонирайте текстовия модул два пъти и поставете дубликатите в двете останали колони.

  • Започнете с дублиране на текстовите модули два пъти.
  • След това ги плъзнете под модулите с изображения в колони 2 и 3.
  • Променете съдържание във всеки нов текстов модул

Дублирайте текстовия модул divi

Добавете текстови модули

Добавете съдържание

Под заглавния модул добавете нов текстов модул. Добавете съдържание на абзац в областта на съдържанието.

Добавяне на текст на модула divi

Texte

Сега стилизирайте текста по следния начин.

  • Текст на шрифта: Open Sans
  • Цвят на текста: Бял #ffffff
  • Размер на текста:
    • Офис: 0.6vw
    • Таблет: 2vw
    • Телефон: 2.8vw
  • Височина на реда на текста: 2.2em

Описание на конфигурацията divi модул

разстояние

За да центрирате текста, регулирайте разстоянието на модула, както следва.

  • Долен марж:
    • Офис: 5vw
    • Таблет + Телефон: 10vw
  • Подплънки наляво и надясно
    • Офис: 5vw
    • Таблет + Телефон: 14vw

Диви оформление
Дублирайте и плъзнете текстови модули

Клонирайте текстовия модул два пъти и плъзнете дублиращите елементи в останалите две колони.

  • Започнете с дублиране на текстовите модули два пъти
  • След това поставете дублиращите в колони 2 и 3
  • Променете съдържанието на всеки дубликат

Дублирайте текстовия модул в друга колона divi
Добавете модули с бутони

Добавете съдържание

Да преминем към последния модул! Добавете модул с бутони към колоната 1 с копие по ваш избор.

Добавете модул за бутон divi

Добави линк

Вмъкнете връзка в опциите за връзка на модула.

Конфигурация на връзката на модула Divi
подравняване

Сега подравнете модула на бутона.

  • Подравняване: център

Конфигурация за подравняване на модула Divi бутон

Стилове на бутони

След това извикайте бутона, както следва.

  • Размер на текста на бутона:
    • Офис: 1vw
    • Таблет: 2vw
    • Телефон: 3vw
  • Цвят на текста на бутона: Ярко син #2a4eed
  • Цвят на фона на бутона: бял #ffffff
  • Радиус на границата на бутона: 50vw
  • Шрифт на бутона: Double One
  • Тегло на шрифта: Дързо
  • Цветът на бутоните: Ярко синьо #2a4eed

Конфигурация на цвета на бутона на модула Divi

разстояние

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

  • Долен марж:
    • Офис: -1.7vw
    • Таблет: -4vw
    • Телефон: -6vw
  • Тапицерия отгоре и отдолу:
    • Офис: 1vw
    • Таблет + Телефон: 3vw
  • Подплънки наляво и надясно
    • Офис: 4vw
    • Таблет + Телефон: 10vw

бутон за разстояние

Кутия за сянка

Не на последно място, добавете фин нюанс на кутията към бутона.

  • Кутия сянка: първи вариант
  • Сянка на хоризонталното положение на кутията: 0px
  • Сянка на вертикалното положение на кутията: 2px
  • Сила за размазване на кутия в сянка: 50px

Конфигурация на дивиден модул Shadow

Дублиращи и плъзгащи се бутони

Както при предишните модули, клонирайте бутона два пъти и поставете дублиращите елементи в останалите две колони на реда.

  • Клонирайте модула с два пъти
  • Поставете дубликатите в колони 2 и 3

Дублирайте модула divi бутон
Бутон 2 Текст и цвят на иконата

Променете цвета на иконата на бутона и модула на бутона в колона 2.

  • Цвят на текста на бутона: Зелен # 1ba038
  • Цвят на иконата: # 1ba038

Бутон 3 Текст и цвят на иконата

Направете същото с бутона в последната колона и сте готови!

  • Цвят на текста на бутоните: оранжев #f0562c
  • Цвят на иконата: # f0562c

Завърши

В тази статия ви показахме как да използвате полупрозрачни изображения, за да създадете зашеметяващ дизайн на колона с призив към действие. Използвахме настройките за препълване на колони на Divi, за да направим изображенията и бутоните да се припокриват безпроблемно. Опитайте да използвате този дизайн в следващия си Divi проект и ни уведомете как се получава в секцията за коментари!

аватар на автора
Блеър Jersyer
Разработчик на WordPress и запален по всичко, свързано с новите технологични тенденции. Автори на добавки, Теми на WordPress и други уеб приложения. Автор в BlogPasCher.com.

Тя ПИН на Pinterest