CTA görsel olarak ne kadar çekici olursa, dönüşüm oranı o kadar yüksek olur. CTA'larınızı tasarlamanın birçok yolu vardır, ancak bu makalede, yarı saydam görüntüler ve sütun kaplamalarıyla harika CTA sütun şablonlarını nasıl oluşturacağınızı göstereceğiz. Yarı saydam resimleri aşağıdaki indirme klasöründe bulabilirsiniz, ancak diğer resimleri kullanmaktan çekinmeyin. Ayrıca JSON dosyasını ücretsiz olarak indirebileceksiniz!

Gidelim.

Önizleme

Eğiticiye girmeden önce, farklı ekran boyutlarına nasıl baktığımıza hızlıca göz atalım.

Blurb divi tasarımıRekreasyona başlayalım!

Yeni bölüm ekle

bağlam

Yeni bir sayfa oluşturarak veya mevcut bir sayfaya yeni bir normal bölüm ekleyerek başlayın. Ardından ayarlar bölümüne gidin ve bir gradyan arka planı ekleyin.

  • Arka plan: gradyan
  • Degrade renk gradyanı: çok açık gri #efefef
  • Arka plan rengi iki: Beyaz #ffffff
  • Gradyan türü: Radyal
  • Radyal yön: orta
  • Başlangıç ​​konumu:% 52
  • Son mevki:% 50

Divi bölümü arka planı

aralık

Tasarım sekmesine geçin ve boşluk ayarlarında dolguyu ayarlayın.

  • Üst ve alt dolgu
    • Ofis: 0vw
  • Çoraplarda Döşeme
    • Tablet + Telefon: 70vw

Divi bölümünün yapılandırmasıYeni bir satır ekle

Sütun yapısı

Aşağıdaki sütun yapısını kullanarak yeni bir satır eklemeye devam edin:

Yeni bir divi satırı ekleyinboyutlandırma

Ardından çizginin genişliğini ve maksimum genişliğini ayarlayın.

  • Genişlik:% 100
  • Maksimum genişlik% 100

Nexopos boyutlandırma

Metin modülü ekle

H2 ve metin içeriği ekle

Modül eklemenin zamanı geldi! İlk önce bir metin modülü ekleyin ve biraz ekleyin içindekiler H2 ve seçtiğiniz paragraflar.

Metin modülü özelleştirme

Metinleri

Tasarım sekmesine geçin ve metni aşağıdaki gibi biçimlendirin:

  • Yazı tipi metni: Açık Sans
  • Metnin hizalanması: orta
  • Metin rengi: Yeşil #5bba1b
  • Metin boyutu:
    • Ofis: 1.2vw
    • Tablet: 2.8vw
    • Telefon: 3.6vw
  • Metin harflerinin aralığı: 0.2vw
  • Metin satırının yüksekliği: 1.8em

Wordpress metin modülü stili yapılandırmasıBaşlık 2 Metin

Paragraf metnini şekillendirdikten sonra, H2 metnine de stil verin.

  • Bölüm: H2
  • H2 Yazı tipi ağırlığı: Doppio One
  • H2 Metin Hizalama: Orta
  • Metin rengi H2: #3d3d3d
  • H2 Metin boyutu:
    • Ofis: 4.4vw
    • Tablet: 5.9vw
    • Telefon: 6.9vw

Head divi'yi özelleştirinaralık

Ve üstüne küçük bir dolgu maddesi ekleyin.

  • Üst Dolgu: 212px

Metin modülü dolgusunu özelleştirme

Bölme modülü ekle

görünürlük

Metin modülünün altına bir bölme modülü ekleyin ve görünürlüğü "Evet" olarak ayarlayın.

  • Görünürlük: evet

Divi bölücü modülünü göster

Hat

Sonra ayırıcının rengini değiştirin.

  • Çizgi rengi: Koyu gri #545454

Divi çizgisinin rengini özelleştirin

boyutlandırma

Şimdi, ayırıcının boyutunu daha küçük görünecek şekilde ayarlayın.

  • Ayırıcı ağırlığı: 4px
  • Genişlik:% 9
  • Modülün hizalanması: orta

Divi hizalamasını özelleştirin

aralık

Ayrıca negatif bir üst kenar boşluğu ekleyin.

  • Üst kenar boşluğu:
    • Ofis: -40px
    • Tablet + Telefon: -15px

Negatif marj modülü bölücü divi

Yeni bir satır ekle

Sütun yapısı

Eşit boyutta üç sütun içeren yeni bir satır ekleyerek devam edin. Bu, CTA kolonunun tasarımının temeli olacaktır.

Satırda 3 sütun divi var

bağlam

Modüller eklemeden önce, satır parametrelerinin arka planına bir degrade ekleyin.

  • Arka plan: gradyan
  • 1 arka plan rengi gradyanı: beyaz #ffffff
  • Degrade arka plan rengi iki: saydam
  • Gradyan türü: Radyal
  • Radyal direksiyon merkezi
  • Başlangıç ​​konumu:% 42
  • Son mevki:% 50

Divi hattı parametre ayarı

boyutlandırma

Şimdi çizginin boyutunu ayarlayın.

  • Genişlik:% 100
  • Maksimum genişlik:% 100

Divi hattı boyutlandırmaaralık

Ardından aralık ayarlarına gidin ve özel dolgu değerleri ekleyin.

  • üst döşeme: 22vw
  • Alt doldurma: 10vw
  • Sol ve sağ dolgu: 10vw

Divi satır dolgusunu yapılandırma

1 Sütun Ayarları

bağlam

1 sütununu açıp bir degrade arka plan ekleyerek devam edin.

  • Arka plan: gradyan
  • Degrade arka plan rengi: Mavi #2a4eed
  • Degrade arka plan rengi iki: açık mavi #91f5f7
  • Gradyan türü: doğrusal
  • Gradyan Yönü: 38deg
  • Başlangıç ​​konumu:% 23

Gradyan divi konfigürasyonu

Sınır

Ardından, kenarlık ayarlarında sütunların yuvarlatılmış köşelerini tanımlayın.

  • Yuvarlak köşeler: Tüm köşelerde 2vw

Sütun yuvarlatılmış sınır yapılandırması

Gölge kutusu

Çok ince bir kutu gölgesi ekleyin.

  • Kutu Farı: İkinci seçenek
  • Kutunun Gölgesi Yatay Konum: 6px
  • Kutu Gölge Dikey Konum: -10px
  • Kutu Gölge Bulanıklığı Gücü: 50px

Sütun 1 gölge yapılandırması

taşmaları

Sütunun taşmalarının da görünür olduğundan emin olun.

  • Yatay ve dikey taşma: görülebilir

Divi sütun taşma yapılandırması

2 Sütun Ayarları

bağlam

İkinci sütuna git ve aşağıdaki degrade arka planını ekle:

  • Arka plan: gradyan
  • Arka plan gradyan rengi bir: #1ba038
  • İki renkli arka plan gradyanı: #c6f727
  • Gradyan türü: doğrusal
  • Gradyan Yönü: 38deg
  • Başlangıç ​​konumu:% 23

İkinci sütun divi ayarı

Sınır

Ayrıca sütuna bir sınır yarıçapı ekleyin.

  • Yuvarlatılmış köşeler: Dört köşede 2vw

Sütun konfigürasyonu 2 yuvarlak divi

Gölge kutusu

İnce bir kutu gölgesi ile.

  • Kutu Farı: İkinci seçenek
  • Kutunun Gölgesi Yatay Konum: 6px
  • Kutu Gölge Dikey Konum: -10px
  • Kutu Gölge Bulanıklığı Gücü: 50px

Sütun gölgesi yapılandırması 2 divi

Trafo

Bu sütun diğerlerinden biraz daha yüksektir. Bu efekti yaratmak için, 2. sütunun dönüştürme dönüştürme ayarlarını yapacağız.

  • Trafo Çevir:
    • Ofis: -8vw, y ekseni
    • Tablet + Telefon: 30vw, Y ekseni

Sütun konumu yapılandırması 2 divi

taşmaları

Ayrıca bu sütunun taşmalarını da görünür kılın.

  • Yatay ve dikey taşmalar: görülebilir

Sütun görünürlük yapılandırması 2 divi3 Sütun Ayarları

bağlam

Son ve son sütuna geçelim! Degrade arka plan ekleyin.

  • Arka plan: gradyan
  • Degrade arka plan rengi bir: #f0562c
  • İki renkli arka plan gradyanı: #f1a526
  • Gradyan türü: doğrusal
  • Gradyan Yönü: 38deg
  • Başlangıç ​​konumu:% 23

Sütun 3 divi arka plan yapılandırmasıSınır

Tasarım sekmesine geçin ve her köşeye bir kenarlık yarıçapı ekleyin.

  • Yuvarlak köşeler: Tüm köşelerde 2vw.

Yuvarlak kenar yapılandırması divi sütun 3Gölge kutusu

Bir kutu gölge de ekleyin.

  • Kutu Farı: İkinci seçenek
  • Kutunun Gölgesi Yatay Konum: 6px
  • Kutu Gölge Dikey Konum: -10px
  • Kutu Gölge Bulanıklığı Gücü: 50px

Sınır divi yapılandırması sütun 3

Trafo

Daha küçük ekran boyutlarında, özel dönüşüm dönüştürme değerlerini kullanarak sütunu yeniden konumlandırmamız gerekecek.

  • Trafo Çevir:
    • Tablet + Telefon: 60vw

Divi modül dönüşümü

taşmaları

Son olarak, taşma ayarlarını düzenleyin.

  • Yatay ve dikey taşmalar: görülebilir

Divi taşma yapılandırması

Görüntü modülleri ekleyin

Bir kesme yarı saydam görüntüsünü içe aktar

Tüm sütun parametrelerini yaptıktan sonra, modüller eklemenin zamanı geldi. 1. sütuna bir resim modülü ekleyin ve seçtiğiniz yarı şeffaf bir resmi yükleyin. İndirebildiğiniz sıkıştırılmış klasörde kullandığımız görselleri bu makalenin başında bulabilirsiniz.

Şeffaf bir divi görüntüsü ekleyin

boyutlandırma

Modülü tam genişlikte yapın.

  • Tam genişlik moduna geç: Evet

Tam genişlikte moe'ye geç

aralık

Sonra özel marj ekleyin ve değerleri doldurun.

  • Üst kenar boşluğu:
    • Ofis: -11vw
    • Tablet + Telefon: -24vw
  • Sola ve sağa doldurma:
    • Ofis: 5vw
    • Tablet + Telefon: 20vw

Dolgu yapılandırma görüntü modülü divi

Merdiveni bir gezintiye çevirin

Dönüştürme ayarlarında ölçek dönüştürme seçeneğini kullanarak görüntüye ince bir vurgulu efekt ekliyoruz.

  • Vurgulu Dönüştür Ölçeği: Her iki eksende% 120.

Hover divi modül görüntüsüne dönüştür

Z Dizini

Görüntünün sütunun en üstünde görünmesini sağlamak için, Gelişmiş sekmesindeki z endeksi değerini artırın.

  • Z Dizini: 1

Yapılandırma zindex modülü görüntü divi

Görüntü modüllerini çoğaltın ve sürükleyin

Şimdi görüntü modülünü iki kez klonlayın ve kopyaları kalan iki sütuna yerleştirin. Bu işlem kablolu modda daha kolaydır.

  • Görüntü modülünü iki kez çoğaltarak başlayın
  • Ardından, yeni görüntü modüllerini 2 ve 3 sütunlarına sürükleyin.
  • Farklı görüntüler indir

Bir görüntü modülünü çoğaltın ve taşıyın

Metin modülleri ekle

H3 içeriği ekle

1. sütundaki görselin altına bir metin modülü ekleyin ve biraz ekleyin içindekiler H3 sizin seçiminiz.

Divi modülü metni ekleyin

Başlık 3 Metin

Tasarım sekmesine geçin ve H3 metin ayarlarına bir stil uygulayın.

  • Metin Başlığı: H3
  • H3 Yazı Tipi: Doppio Bir
  • H3 Yazı tipi ağırlığı: kalın
  • H3 Hizalama: orta
  • H3 Metin Rengi: Beyaz #ffffff
  • H3 Metin boyutu:
    • Ofis: 1.8vw
    • Tablet: 5vw
    • Telefon: 6vw

Divi metin modülü parametresi

Metin modüllerini çoğaltın ve sürükleyin

Metin modülünü iki kez klonlayın ve kopyaları kalan iki sütuna yerleştirin.

  • Metin modüllerini iki kez kopyalayarak başlayın.
  • Ardından bunları 2. ve 3. sütunlardaki resim modüllerinin altına sürükleyin.
  • Değiştir içindekiler her yeni metin modülünde

Divi metin modülünü çoğaltın

Metin modülleri ekle

İçerik ekle

Başlık modülünün altına yeni bir metin modülü ekleyin. İçerik alanına paragraf içeriği ekleyin.

Divi modülü metni ekleyin

Metinleri

Şimdi, metni aşağıdaki gibi stillendirin.

  • Yazı tipi metni: Açık Sans
  • Metin rengi: Beyaz #ffffff
  • Metin boyutu:
    • Ofis: 0.6vw
    • Tablet: 2vw
    • Telefon: 2.8vw
  • Metin satırının yüksekliği: 2.2em

Yapılandırma açıklaması divi modülü

aralık

Metni ortalamak için modülün boşluğunu aşağıdaki gibi ayarlayın.

  • Düşük marj:
    • Ofis: 5vw
    • Tablet + Telefon: 10vw
  • Sol ve sağ doldurma
    • Ofis: 5vw
    • Tablet + Telefon: 14vw

Divi düzeniMetin modüllerini çoğaltın ve sürükleyin

Metin modülünü iki kez klonlayın ve kopyaları kalan iki sütuna sürükleyin.

  • Metin modüllerini iki kez kopyalayarak başlayın
  • Ardından kopyaları 2 ve 3 sütunlarına yerleştirin
  • Her kopyanın içeriğini değiştirme

Metin modülünü başka bir divi sütununda çoğaltınDüğme modülleri ekle

İçerik ekle

Son modüle gidelim! Seçtiğiniz bir kopyasını içeren 1 sütununa bir düğme modülü ekleyin.

Divi düğme modülü ekle

Bir link ekle

Modülün bağlantı seçeneklerine bir bağlantı ekleyin.

Divi modülü bağlantı yapılandırmasıhizalanma

Şimdi düğme modülünü hizalayın.

  • Hizalama: orta

Divi düğme modülü hizalama yapılandırması

Düğme Stilleri

Ardından, düğmeyi aşağıdaki şekilde arayın.

  • Düğme metninin boyutu:
    • Ofis: 1vw
    • Tablet: 2vw
    • Telefon: 3vw
  • Düğme metni rengi: Parlak Mavi #2a4eed
  • Düğme Arkaplan Rengi: Beyaz #ffffff
  • Düğmenin kenarlığının yarıçapı: 50vw
  • Düğme yazı tipi: Çift Bir
  • Yazı tipi ağırlığı: Kalın
  • Düğmelerin rengi: Parlak Mavi #2a4eed

Divi modülü düğme rengi yapılandırması

aralık

Düğmeyi şekillendirin ve aralık ayarlarına özel kenar boşluğu ve dolgu değerleri ekleyerek altta bir örtüşme oluşturun.

  • Düşük marj:
    • Ofis: -1.7vw
    • Tablet: -4vw
    • Telefon: -6vw
  • Döşeme Üst ve Alt:
    • Ofis: 1vw
    • Tablet + Telefon: 3vw
  • Sol ve sağ doldurma
    • Ofis: 4vw
    • Tablet + Telefon: 10vw

boşluk düğmesi

Gölge kutusu

Son fakat en az değil, düğmeye ince bir kutu gölge ekleyin.

  • Kutu gölge: ilk seçenek
  • Kutunun yatay pozisyonunun gölgesi: 0px
  • Kutunun dikey pozisyonunun gölgesi: 2px
  • Kutu Gölge Bulanıklığı Gücü: 50px

Gölge modülü divi yapılandırması

Düğme modüllerini çoğaltın ve sürükleyin

Önceki modüllerde olduğu gibi, düğmeyi iki kez klonlayın ve kopyaları çizginin kalan iki sütununa yerleştirin.

  • Düğme modülünü iki kez klonla
  • Çiftleri 2 ve 3 sütunlarına yerleştirin

Divi düğme modülünü çoğaltınDüğme 2 Simge metni ve rengi

2. sütundaki düğme ve düğme modülü simgesi rengini değiştirin.

  • Düğme metni rengi: Yeşil # 1ba038
  • Simge Rengi: # 1ba038

Divi düğme modülü

Düğme 3 Simge metni ve rengi

Aynı şeyi son sütundaki düğmeyle yapın ve bitirdiniz!

  • Düğmelerin metninin rengi: Turuncu #f0562c
  • Simge Rengi: # f0562c

Divi düğme parametresi

Bitirmek için

Bu yazıda, çarpıcı bir CTA sütun tasarımı oluşturmak için yarı saydam görüntülerin nasıl kullanılacağını gösterdik. Sütun taşma ayarlarını kullandık Divi böylece görüntüler ve düğmeler sorunsuz bir şekilde üst üste gelir. Bu tasarımı bir sonraki projenizde kullanmayı deneyin Divi ve yorumlar bölümünde nasıl gittiğini bize bildirin!