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.
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
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
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:
boyutlandırma
Ardından çizginin genişliğini ve maksimum genişliğini ayarlayın.
- Genişlik:% 100
- Maksimum genişlik% 100
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.
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
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
aralık
Ve üstüne küçük bir dolgu maddesi ekleyin.
- Üst Dolgu: 212px
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
Hat
Sonra ayırıcının rengini değiştirin.
- Çizgi rengi: Koyu gri #545454
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
aralık
Ayrıca negatif bir üst kenar boşluğu ekleyin.
- Üst kenar boşluğu:
- Ofis: -40px
- Tablet + Telefon: -15px
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.
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
boyutlandırma
Şimdi çizginin boyutunu ayarlayın.
- Genişlik:% 100
- Maksimum genişlik:% 100
aralı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
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
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
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
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
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
Sınır
Ayrıca sütuna bir sınır yarıçapı ekleyin.
- Yuvarlatılmış köşeler: Dört köşede 2vw
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
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
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
3 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ı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.
Gö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
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
taşmaları
Son olarak, taşma ayarlarını düzenleyin.
- Yatay ve dikey taşmalar: görülebilir
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.
boyutlandırma
Modülü tam genişlikte yapın.
- Tam genişlik moduna geç: Evet
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
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.
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
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
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.
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
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
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.
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
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
Metin 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
Düğ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.
Bir link ekle
Modülün bağlantı seçeneklerine bir bağlantı ekleyin.
hizalanma
Şimdi düğme modülünü hizalayın.
- Hizalama: orta
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
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
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
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
Düğ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
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
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!