Divi ile Güzel CTA Sütunu Örtüşmeleri Oluşturmak için Saydam Görüntüleri Kullanma

Bir CTA görsel olarak ne kadar çekici olursa, daha iyi bir dönüşüm oranı şansı o kadar yüksek olur. CTA'larınızı tasarlamanın birçok yolu vardır, ancak bu gönderide, yarı saydam görüntüler ve sütun örtüşmeleri ile güzel CTA sütun tasarımları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. JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Önizlemeler

Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

masaüstü

Mobil

CTA Sütun Düzenini ÜCRETSİZ İndirin

Ellerinizi ücretsiz CTA sütun düzenine koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Youtube Kanalımıza Abone Olun

Yeniden Yaratmaya Başlayalım!

Yeni Bölüm Ekle

Arka plan

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

• Arka plan: Gradyan
• Arka Plan Degrade Renk Bir: Çok Açık Gri #efefef
• Arka Plan Degrade Rengi İki: Beyaz #ffffff
• Gradyan Türü: Radyal
• Radyal Yön: Merkez
• Başlangıç ​​Konumu: %52
• Bitiş Konumu: %50

aralık

Tasarım sekmesine gidin ve boşluk ayarlarında dolguyu ayarlayın.

• Üst ve Alt Dolgu
  • Masaüstü: 0vw
• Alt Dolgu
  • Tablet + Telefon: 70vw

Yeni Satır Ekle

Sütun Yapısı

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

boyutlandırma

Ardından, satırın genişliğini ve maksimum genişliğini ayarlayın.

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

Metin Modülü Ekle

H2 ve Metin İçeriği Ekle

Modül ekleme zamanı! İlk olarak, bir metin modülü ekleyin ve seçtiğiniz bazı H2 ve paragraf içeriğini ekleyin.

Metin

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

• Metin Yazı Tipi: Sans'ı Aç
• Metin Hizalama: Merkez
• Metin Rengi: Yeşil #5bba1b
• Yazı Boyutu:
  • Masaüstü: 1.2vw
  • Tablet: 2.8vw
  • Telefon: 3.6vw
• Metin Harf Aralığı: 0.2vw
• Metin Satır Yüksekliği: 1.8em

Başlık 2 Metin

Paragraf metnini şekillendirdikten sonra H2 metnine de stil verin.

• Başlık: H2
• H2 Yazı Tipi Ağırlığı: Doppio Bir
• H2 Metin Hizalama: Merkez
• H2 Metin Rengi: Çok Koyu Gri #3d3d3d
• H2 Metin Boyutu:
  • Masaüstü: 4.4vw
  • Tablet: 5.9vw
  • Telefon: 6.9vw

aralık

Ve biraz üst dolgu ekleyin.

• Üst Dolgu: 212px

Bölücü Modülü Ekle

görünürlük

Metin modülünün altına bir ayırıcı modül ekleyin ve görünürlüğü 'Evet' olarak ayarlayın.

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

Hat

Sonraki ayırıcı rengini değiştirin.

• Çizgi Rengi: Koyu Gri #545454

boyutlandırma

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

• Bölücü Ağırlığı: 4px
• Genişlik: %9
• Modül Hizalaması: Merkez

aralık

Negatif üst kenar boşluğu da ekleyin.

• Üst boşluk:
  • Masaüstü: -40 piksel
  • Tablet + Telefon: -15px

Yeni Satır Ekle

Sütun Yapısı

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

Arka plan

Herhangi bir modül eklemeden önce, satır ayarlarına arka plana bir degrade ekleyin.

• Arka plan: Gradyan
• Arka Plan Rengi Degrade Bir: Beyaz #ffffff
• Arka Plan Rengi Gradyan İki: Şeffaf
• Gradyan Türü: Radyal
• Radyal Yön Merkezi
• Başlangıç ​​Konumu: %42
• Bitiş Konumu: %50

boyutlandırma

Şimdi, satırın boyutunu ayarlayın.

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

aralık

Sonraki boşluk ayarlarına gidin ve bazı özel dolgu değerleri ekleyin.

• Üst Dolgu: 22vw
• Alt Dolgu: 10vw
• Sol ve Sağ Dolgu: 10vw

Sütun 1 Ayarları

Arka plan

Sütun 1 ayarlarını açarak devam edin ve bir degrade arka planı ekleyin.

• Arka plan: Gradyan
• Arka Plan Degrade Renk Bir: Mavi #2a4eed
• Arka Plan Degrade Rengi İki: Açık Mavi#91f5f7
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 38deg
• Başlangıç ​​Konumu: %23

Sınır

Sonraki kenarlık ayarlarında sütuna yuvarlak köşeler verin.

• Yuvarlatılmış Köşeler: Tüm köşelerde 2vw

Kutu Gölge

İnce bir kutu gölgesi de ekleyin.

• Kutu Gölgesi: İkinci Seçenek
• Kutu Gölgesi Yatay Konum: 6px
• Kutu Gölgesi Dikey Konumu: -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ünür

Sütun 2 Ayarları

Arka plan

İkinci sütuna geçin ve aşağıdaki degrade arka planını ekleyin:

• Arka plan: Gradyan
• Arka Plan Degrade Rengi Bir: #1ba038
• Arka Plan Degrade Rengi İki: #c6f727
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 38deg
• Başlangıç ​​Konumu: %23

Sınır

Sütuna da biraz kenarlık yarıçapı ekleyin.

• Yuvarlatılmış Köşeler: Dört köşenin tamamı 2vw

Kutu Gölge

İnce bir kutu gölgesi ile birlikte.

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

dönüştürmek

Bu sütun diğerlerinden biraz daha yüksekte oturuyor. Bu efekti oluşturmak için 2. sütun için dönüştürme çevirme ayarlarını ayarlayacağız.

• Dönüştür Çevirisi:
  • Masaüstü: -8vw, y ekseni
  • Tablet + Telefon: 30vw, y ekseni

taşmalar

Bu sütunun taşmalarını da görünür yapın.

• Yatay ve Dikey Taşmalar: Görünür

Sütun 3 Ayarları

Arka plan

Bir sonraki ve son sütuna! Bir degrade arka planı ekleyin.

• Arka plan: Gradyan
• Arka Plan Degrade Rengi Bir: #f0562c
• Arka Plan Degrade Rengi İki: #f1a526
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 38deg
• Başlangıç ​​Konumu: %23

Sınır

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

• Yuvarlatılmış Köşeler: Tüm köşelerde 2vw.

Kutu Gölge

Bir kutu gölgesi de ekleyin.

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

dönüştürmek

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

• Dönüştür Çevirisi:
  • Tablet + Telefon: 60vw

taşmalar

Son olarak, taşma ayarlarını yapın.

• Yatay ve Dikey Taşmalar: Görünür

Görüntü Modülleri Ekle

Kesik, Yarı Saydam Bir Resim Yükleyin

Tüm sütun ayarlarını tamamladıktan sonra sıra modül eklemeye gelir. Sütun 1'e bir Görüntü Modülü ekleyin ve istediğiniz yarı saydam bir görüntüyü yükleyin. Kullandığımız resimleri bu yazının başında indirebildiğiniz sıkıştırılmış klasörde bulabilirsiniz.

boyutlandırma

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

• Tam Genişliği Zorla: Evet

aralık

Daha sonra bazı özel kenar boşluğu ve dolgu değerleri ekleyin.

• Üst boşluk:
  • Masaüstü: -11vw
  • Tablet + Telefon: -24vw
• Sol ve Sağ Dolgu:
  • Masaüstü: 5vw
  • Tablet + Telefon: 20vw

Hover'da Ölçeği Dönüştür

Dönüştürme ayarlarındaki dönüştürme ölçeği seçeneğini kullanarak görüntüye ince bir vurgu efekti ekliyoruz.

• Hover'da Dönüştürme Ölçeği: Her iki eksende %120.

Z-endeksi

Resmin sütunun üstünde göründüğünden emin olmak için gelişmiş sekmesinde z dizini değerini artıracağız.

• Z-endeksi: 1

Görüntü Modüllerini Çoğalt ve Sürükle

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

• İlk önce, görüntü modülünü iki kez çoğaltın
• Ardından, yeni görüntü modüllerini 2. ve 3. sütunlara sürükleyin.
• Farklı görseller yükleyin

Metin Modülleri Ekle

H3 içeriği ekle

1. sütundaki görüntünün altına bir metin modülü ekleyin ve seçtiğiniz bazı H3 içeriğini ekleyin.

Başlık 3 Metin

Tasarım sekmesine gidin ve H3 metin ayarlarının stilini belirleyin.

• Başlık Metni: H3
• H3 Yazı Tipi: Doppio Bir
• H3 Yazı Ağırlığı: Kalın
• H3 Hizalama: Merkez
• H3 Metin Rengi: Beyaz #ffffff
• H3 Metin Boyutu:
  • Masaüstü: 1.8vw
  • tablet: 5vw
  • Telefon: 6vw

Metin Modüllerini Çoğalt ve Sürükle

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

• İlk önce, metin modüllerini iki kez çoğaltın
• Ardından, bunları 2. ve 3. sütunlardaki görüntü modüllerinin altına sürükleyin.
• Her yeni metin modülündeki içeriği değiştirin

Metin Modülleri Ekle

İçerik Ekle

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

Metin

Şimdi metni aşağıdaki gibi biçimlendirin.

• Metin Yazı Tipi: Sans'ı Aç
• Metin Rengi: Beyaz #ffffff
• Yazı Boyutu:
  • Masaüstü: 0.6vw
  • Tablet: 2vw
  • Telefon: 2.8vw
• Metin Satırı Yüksekliği: 2.2em

aralık

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

• Alt Kenar Boşluğu:
  • Masaüstü: 5vw
  • Tablet + Telefon: 10vw
• Sol ve Sağ Dolgu
  • Masaüstü: 5vw
  • Tablet + Telefon: 14vw

Metin Modüllerini Çoğalt ve Sürükle

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

• İlk önce, metin modüllerini iki kez çoğaltın
• Ardından, kopyaları 2. ve 3. sütunlara yerleştirin
• Her kopyadaki içeriği değiştirin

Düğme Modülleri Ekle

İçerik Ekle

Son modüle! Seçtiğiniz bir kopya ile sütun 1'e bir düğme modülü ekleyin.

Link ekle

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

hizalama

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

• Hizalama: Merkez

Düğme Stilleri

Ardından, düğmeyi aşağıdaki gibi şekillendirin.

• Düğme Metin Boyutu:
  • Masaüstü: 1vw
  • Tablet: 2vw
  • Telefon: 3vw
• Düğme Metin Rengi: Parlak Mavi #2a4eed
• Düğme Arka Plan Rengi: Beyaz #ffffff
• Düğme Sınır Yarıçapı: 50vw
• Düğme Yazı Tipi: Doppio One
• Düğme Yazı Ağırlığı: Kalın
• Düğme Simge Rengi: Parlak Mavi #2a4eed

aralık

Düğmeyi şekillendirin ve boşluk ayarlarında bazı özel kenar boşluğu ve dolgu değerleri ekleyerek bir alt örtüşme oluşturun.

• Alt Kenar Boşluğu:
  • Masaüstü: -1.5vw
  • Tablet: -4vw
  • Telefon: -6vw
• Üst ve Alt Dolgu:
  • Masaüstü: 1vw
  • Tablet + Telefon: 3vw
• Sol ve Sağ Dolgu
  • Masaüstü: 4vw
  • Tablet + Telefon: 10vw

Kutu Gölge

Son olarak, düğmeye ince bir kutu gölgesi ekleyin.

• Kutu gölgesi: İlk Seçenek
• Kutu Gölgesi Yatay Konumu: 0px
• Kutu Gölge Dikey Konumu: 2px
• Kutu Gölge Bulanıklığı Gücü: 50px

Çoğalt ve Sürükle Düğmesi Modülleri

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

• Düğme modülünü iki kez klonlayın
• Kopyaları 2. ve 3. sütunlara yerleştirin

Düğme 2 Metin ve Simge Rengi

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

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

Düğme 3 Metin ve Simge Rengi

Aynısını son sütundaki düğmeyle yapın ve işiniz bitti!

• Düğme Metin Rengi: Turuncu #f0562c
• Simge Rengi: #f0562c

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

masaüstü

Mobil

Bu bir Sargı

Bu gönderide, güzel bir CTA sütun tasarımı oluşturmak için yarı saydam görüntülerin nasıl kullanılacağını gösterdik. Görüntülerin ve düğmelerin sorunsuz bir şekilde üst üste gelmesini sağlamak için Divi sütun taşma ayarlarını kullandık. Bu tasarımı bir sonraki Divi projenizde kullanmayı deneyin ve yorum bölümünde bunun nasıl olduğunu bize bildirin!