Divi için ÜCRETSİZ CTA Sütunu Kaydırma Kahraman Bölümü Tasarımını İndirin

Sayfanızın kahraman bölümü görebileceği tüm ilgiyi hak ediyor. Web sitenizin ne hakkında olduğuna ve hedef kitlenizin nasıl davrandığına bağlı olarak, kahraman bölümünüzü şekillendirmenin sonsuz yolu vardır. Bazı web siteleri için, bunaltıcı bir deneyim yaratmadan birden çok sütunlu CTA kartı yerleştirmek kullanışlı olabilir. Buna yaklaşmanın harika bir yolu, sütun kaydırmalı CTA kartları oluşturmaktır. Bugünün Divi eğitiminde, bu tekniği ele alan, sıfırdan çarpıcı bir tasarımın nasıl oluşturulacağını göstereceğiz. JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

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

masaüstü

Mobil

Kahraman Bölümlerini ÜCRETSİZ İndirin

Ellerinizi ücretsiz kahraman bölümlerine 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

Degrade Arka Plan

Üzerinde çalıştığınız sayfaya yeni bir bölüm ekleyin, bölüm ayarlarını açın ve bir degrade arka planı ekleyin.

• Renk 1: #ffffff
• Renk 2: #f5ede5
• Gradyan Yönü: 90deg
• Başlangıç ​​Konumu: %17
• Bitiş Konumu: %17

aralık

Tasarım sekmesine geçin ve farklı ekran boyutlarına bazı özel üst ve alt dolgular ekleyin.

• Üst Dolgu: 5vw (Masaüstü), 10vw (Tablet), 13vw (Telefon)
• Alt Dolgu: 5vw (Masaüstü), 10vw (Tablet), 13vw (Telefon)

1. Satır Ekle

Sütun Yapısı

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

Arka plan rengi

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve arka plan rengini değiştirin.

• Arka Plan Rengi: #fff6ed

boyutlandırma

Tasarım sekmesine geçin ve satırın boyutlandırma ayarlarını da değiştirin.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: 60vw (Masaüstü), %100 (Tablet ve Telefon)
• Maksimum Genişlik: %100
• Satır Hizalama: Sağ

aralık

Ayrıca boşluk ayarlarına bazı özel dolgu değerleri ekliyoruz.

• Üst Dolgu: 6vw
• Alt Dolgu: 6vw
• Sol Dolgu: 5.5vw
• Sağ Dolgu: 24vw

Sınır

Sonraki sınır ayarlarına gidin ve aşağıdaki ayarları kullanarak bir sol kenarlık ekleyin:

• Sol Kenar Genişliği: 6px
• Sol Kenar Rengi: #FFFFFF

Kutu Gölge

Kahraman bölümünde derinlik yaratmak için ince bir kutu gölgesi ekleyin.

• Kutu Gölge Bulanıklığı Gücü: 100 piksel
• Gölge Rengi: rgba(0,0,0,0.22)

CSS Sınıfı

Ve gelişmiş sekmesinde bir CSS sınıfı kullanın. Bu gönderide daha sonra kaydırma çubuğunu gizlemek için bu CSS sınıfını kullanacağız.

• CSS Sınıfı: kaydırma çubuğu

Ana Eleman

Yatay kaydırma/kaydırma oluşturmak için sütunları yatay olarak yerleştirmemiz gerekecek. Bunu, satırın ana öğesine bazı özel CSS kodları ekleyerek yapacağız.

display: grid;
grid-template-columns: repeat(6, 100%);
grid-column-gap: 2vw;

taşmalar

Görünürlük ayarlarına gidin ve satırın taşmalarını değiştirin.

• Yatay Taşma: Kaydır
• Dikey Taşma: Gizli

Sütun Ayarları

Satır ayarlarını tamamladıktan sonra ilk sütunun ayarlarını açabilirsiniz.

Degrade Arka Plan

Bir degrade arka planı ekleyin.

• Renk 1: rgba(245,237.229,0.91)
• Renk 2: rgba(219,34,65,0.84)
• Başlangıç ​​Konumu: %35
• Bitiş Konumu: %81
• Gradyanı Arka Plan Resminin Üstüne Yerleştir: Evet

Arka plan görüntüsü

Bir arka plan resmi ile birlikte.

• Arka Plan Resmi Boyutu: Kapak
• Arka Plan Resmi Konumu: Merkez
• Arka Plan Resmi Tekrarı: Tekrar Yok

aralık

Tasarım sekmesine geçin ve farklı ekran boyutlarına bazı özel dolgu değerleri ekleyin.

• Üst Dolgu: 4vw (Masaüstü), 10vw (Tablet), 12vw (Telefon)
• Alt Dolgu: 4vw (Masaüstü), 10vw (Tablet), 12vw (Telefon)
• Sol Dolgu: 2vw (Masaüstü), 5vw (Tablet), 7vw (Telefon)
• Sağ Doldurma: 2vw (Masaüstü), 5vw (Tablet), 7vw (Telefon)

Sınır

Kenarlık ayarlarında köşelerin her birine '20px' kenarlık yarıçapı ekleyerek devam edin.

Ana Eleman

Bu işi yapmanın bir diğer önemli kısmı, sütunun ana öğesine tek bir CSS kodu satırı eklemektir.

width: 100% !important;

Metin Modülü #1'i Sütun 1'e ekleyin

H3 İçeriği Ekle

Modül eklemeye başlama zamanı! İstediğiniz kadar modül ekleyebilir ve bunları kendi tercihinize göre şekillendirebilirsiniz. Bununla birlikte, bu gönderinin önizlemesinde paylaşılan aynı örneği yeniden oluşturmak istiyorsanız, bir Metin Modülü ile başlayın ve biraz H3 içeriği ekleyin.

H3 Metin Ayarları

Tasarım sekmesine gidin ve H3 metin ayarlarını buna göre değiştirin:

• Başlık 3 Yazı Tipi: Poppins
• Başlık 3 Yazı Tipi Ağırlığı: Hafif
• Başlık 3 Metin Rengi: #e92640
• Başlık 3 Metin Boyutu: 1.5vw (Masaüstü), 3.5vw (Tablet), 4.5vw (Telefon)

Metin Modülü #2'yi Sütun 1'e ekleyin

İçerik Ekle

İhtiyacımız olan bir sonraki modül başka bir Metin Modülü. Seçtiğiniz bazı paragraf içeriğini girin.

Metin Ayarları

Sonraki metin ayarlarına gidin ve bazı değişiklikler yapın.

• Metin Yazı Tipi: Poppins
• Metin Yazı Tipi Ağırlığı: Hafif
• Metin Rengi: #e92640
• Metin Boyutu: 0.8vw (Masaüstü), 1.9vw (Tablet), 2.8vw (Telefon)

aralık

Ayrıca, sütun kaydırma kartımızda yer açmak için bir miktar alt kenar boşluğu ekliyoruz.

• Alt Kenar Boşluğu: 18vw (Masaüstü), 30vw (Tablet), 42vw (Telefon)

Sütun 1'e Düğme Modülü Ekle

Kopya Ekle

Bir Düğme Modülü olan bir sonraki modüle geçin. Seçtiğiniz bir kopyayı girin.

Düğme Ayarları

Tasarım sekmesine gidin ve düğme ayarlarını buna göre değiştirin:

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 0.8vw (Masaüstü), 1.8vw (Tablet), 2.5vw (Telefon)
• Düğme Metin Rengi: #f5ede5
• Düğme Kenar Genişliği: 1px
• Düğme Kenar Rengi: #f5ede5
• Düğme Sınır Yarıçapı: 5px
• Düğme Yazı Tipi: Poppins

aralık

Farklı ekran boyutlarına bazı özel dolgu değerleri ekleyerek düğmenin boyutunu artırın.

• Üst Dolgu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Alt Dolgu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Sol Dolgu: 3vw (Masaüstü), 5vw (Tablet), 7vw (Telefon)
• Sağ Doldurma: 3vw (Masaüstü), 5vw (Tablet), 7vw (Telefon)

Sütun 1'e Bölücü Modülü Ekle

görünürlük

İhtiyacımız olan bir sonraki modül bir Bölücü Modül. 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

• Bölücüyü Göster: Evet

Hat

Tasarım sekmesine gidin ve çizgi rengini değiştirin.

• Çizgi Rengi: #f5ede5

Sütun 1'e Metin Modülü #3'ü ekleyin

İçerik Ekle

Bu sütunda ihtiyacımız olan sonraki ve son modül başka bir Metin Modülüdür. Seçtiğiniz bazı paragraf içeriğini girin.

Metin Ayarları

Tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Poppins
• Metin Yazı Tipi Ağırlığı: Hafif
• Metin Rengi: #f5ede5
• Metin Boyutu: 0.8vw (Masaüstü), 1.9vw (Tablet), 2.8vw (Telefon)
• Metin Satırı Yüksekliği: 2.3em

aralık

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

• Üst Marj: 2vw

5 Kat Klonlama Sütunu ve Diğer CTA'lar için Yeniden Kullanım

İlk sütunu ve içindeki tüm modülleri tamamladığınızda, kaç tane sütun kaydırma CTA kartı görüntülemek istediğinize bağlı olarak tüm sütunu 5 kata kadar klonlayabilirsiniz. Düğme bağlantılarıyla birlikte kopyalanan her sütun için tüm kopyayı değiştirdiğinizden emin olun.

2. Satır Ekle

Sütun Yapısı

İkinci sıraya! Bir öncekiyle örtüşme oluşturmak için bu satırı kullanacağız. Aşağıdaki sütun yapısını seçin:

boyutlandırma

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarını buna göre yapın:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Gönderinin devamında, ihtiyacımız olan modülleri ekleyeceğiz ve modüllerin ilk satırın parçası gibi görünmesi için negatif bir üst örtüşme oluşturacağız. Bu, tasarımımızda herhangi bir yer kaplamak için ikinci sıraya ihtiyacımız olmadığı anlamına gelir. Bu nedenle, tüm varsayılan üst ve alt sıra dolgusunu kaldırıyoruz.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Metin Modülü #1'i Sütun 1'e ekleyin

H1 İçeriği Ekle

Modül eklemeye başlama zamanı! İlk Metin Modülü ile başlayın ve seçtiğiniz bazı H1 içeriğini girin.

H1 Metin Ayarları

Tasarım sekmesine gidin ve H1 metin ayarlarını buna göre değiştirin:

• Başlık Yazı Tipi: Poppins
• Başlık Metni Rengi: #e92741
• Başlık Metni Boyutu: 3vw (Masaüstü), 5vw (Tablet), 7vw (Telefon)

aralık

Daha sonra bazı kenar boşluğu değerleri ekleyin.

• Üst Marj: -35vw (Masaüstü), 7vw (Tablet), 10vw (Telefon)
• Sol Kenar Boşluğu: 5vw
• Sağ Kenar Boşluğu: 12vw

Metin Modülü #2'yi Sütun 1'e ekleyin

İçerik Ekle

İhtiyacımız olan ikinci modül başka bir Metin Modülü. Seçtiğiniz bazı paragraf içeriğini girin.

Metin Ayarları

Tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Poppins
• Metin Yazı Tipi Ağırlığı: Hafif
• Metin Rengi: #e92741
• Metin Boyutu: 0.8vw (Masaüstü), 1.9vw (Tablet), 2.8vw (Telefon)
• Metin Satır Yüksekliği: 2.8em

aralık

Metin Modülüne de bazı özel kenar boşluğu değerleri ekliyoruz.

• Üst Marj: 2vw (Masaüstü), 7vw (Tablet), 10vw (Telefon)
• Alt Kenar Boşluğu: 2vw (Masaüstü), 7vw (Tablet), 10vw (Telefon)
• Sol Kenar Boşluğu: 5vw
• Sağ Kenar Boşluğu: 13vw (Masaüstü), 5vw (Tablet ve Telefon)

Sütun 1'e Düğme Modülü Ekle

Kopya Ekle

İhtiyacımız olan bir sonraki modül bir Düğme Modülü. Seçtiğiniz bir kopyayı girin.

Düğme Ayarları

Ardından, tasarım sekmesine gidin ve düğmenin stilini belirleyin.

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 0.9vw
• Düğme Metin Rengi: #e92741
• Düğme Arka Plan Rengi: #f5ede5
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 5px
• Düğme Yazı Tipi: Poppins

aralık

Ayrıca bazı özel boşluk değerleri ekleyerek düğmenin boyutunu artırıyoruz.

• Üst Marj: 2vw
• Sol Kenar Boşluğu: 5vw
• Üst Dolgu: 1.5vw (Masaüstü), 2.5vw (Tablet), 3vw (Telefon)
• Alt Dolgu: 1.5vw (Masaüstü), 2.5vw (Tablet), 3vw (Telefon)
• Sol Dolgu: 6vw (Masaüstü), 9vw (Tablet), 15vw (Telefon)
• Sağ Doldurma: 6vw (Masaüstü), 9vw (Tablet), 15vw (Telefon)

Kutu Gölge

İnce bir kutu gölgesi ekleyerek Düğme Modülü tasarımını tamamlayın.

• Kutu Gölge Dikey Konumu: 20px
• Kutu Gölge Bulanıklığı Gücü: 50px
• Kutu Gölge Yayılma Gücü: -5px
• Gölge Rengi: rgba(0,0,0,0.19)

Ö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

Son düşünceler

Bu gönderide, ücretsiz olarak güzel bir sütun kaydırmalı kahraman bölümü paylaştık ve onu nasıl sıfırdan yeniden oluşturacağınızı da gösterdik. Bu, çok ezici görünen bir tasarıma sahip olmadan kahraman bölümünüzde birden fazla CTA kartı sergilemenin harika bir yoludur. Umarız bu öğreticiyi beğenmişsinizdir ve herhangi bir sorunuz veya öneriniz varsa, bunları aşağıdaki yorum bölümünde bıraktığınızdan emin olun!

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.