Divi Hero Bölümünüze Kaydırmalı Sütun İletişim Formunu Sorunsuz Bir Şekilde Ekleme

Sayfa tasarımınıza CTA'ları dahil etmenin yollarını düşünürken, kahraman bölümünüze bir iletişim formu eklemeyi düşünebilirsiniz. Bu yaklaşım, insanların web sitenizde daha fazla gezinmek zorunda kalmadan sizinle hemen iletişime geçmesini sağlar. Bunu Divi'de yapmanın kusursuz bir yolunu arıyorsanız, bu gönderiyi seveceksiniz. Bu öğreticide, yalnızca Divi'nin yerleşik seçeneklerini kullanarak kahraman bölümünüze nasıl kayar sütun iletişim formu ekleyeceğinizi 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

Sütun İletişim Formu Kahraman Bölümü Düzenini ÜCRETSİZ İndirin

Ücretsiz sütun iletişim formu kahraman bölümü düzenine el 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!

Yeniden Oluşturmaya Başlayalım

Yeni Bölüm Ekle

Arka plan rengi

Üzerinde çalıştığınız sayfaya yeni bir bölüm ekleyerek başlayın. Bölüm ayarlarını açın ve arka plan rengini değiştirin.

• Arka Plan Rengi: #ff8949

Arka plan görüntüsü

Şimdi Mali Müşavir Düzen Paketinin bir parçası olan bir arka plan deseni yüklüyoruz. Bu arka plan resmini bu yazının başında indirebildiğiniz klasörde bulabilirsiniz.

• Arka Plan Resmi Boyutu: Sığdır
• Arka Plan Resmi Konumu: Merkez

aralık

Bölümün tasarım sekmesine gidin ve tüm varsayılan üst ve alt dolguyu kaldırın.

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

taşmalar

Gelişmiş sekmesinde taşmaları gizleyerek bölüm ayarlarını tamamlayın. Bu, daha sonra eklediğimiz animasyonların bölüm kapsayıcısının ötesine geçmemesini sağlayacaktır.

• Yatay Taşma: Gizli
• Dikey Taşma: Gizli

Yeni Satır Ekle

Sütun Yapısı

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

boyutlandırma

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:

• Sütun Yüksekliklerini Eşitle: Evet
• Genişlik: %80 (Masaüstü), %100 (Tablet ve Telefon)
• Maksimum Genişlik: 1380 piksel
• Satır Hizalama: Sağ

aralık

Sonraki tüm varsayılan üst ve alt dolguyu kaldırın.

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

Sütun 1 Ayarları

aralık

Ardından, sütun 1 ayarlarını açın ve farklı ekran boyutlarındaki boşluk ayarlarını değiştirin.

• Üst Dolgu: %22
• Alt Dolgu: %22
• Sol Dolgu: %10 (Yalnızca Tablet ve Telefon)
• Sağ Dolgu: %10 (Yalnızca Tablet ve Telefon)

Sütun 2 Ayarları

Arka plan rengi

Ardından, sütun 2 ayarlarını açacağız ve beyaz bir arka plan rengi kullanacağız.

• Arka Plan Rengi: #ffffff

Animasyon

Aşağıdaki animasyon ayarlarını uygulayarak sütun 2 ayarlarını tamamlayacağız:

• Animasyon Yönü: Sol (Masaüstü), Yukarı (Tablet ve Telefon)
• Animasyon Süresi: 1500ms
• Animasyon Yoğunluğu: %70
• Animasyon Opaklığı Başlatma: %100

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

H1 İçeriği Ekle

Sütun 1'deki ilk Metin Modülü ile başlayarak modül ekleme zamanı. Seçtiğiniz bazı H1 içeriğini ekleyin.

H1 Metin Ayarları

Modülün tasarım sekmesine gidin ve H1 metin ayarlarını aşağıdaki gibi değiştirin:

• Başlık Yazı Tipi: Oswald
• Başlık Yazı Tipi Stili: Büyük Harf
• Başlık Metni Rengi: #ffffff
• Başlık Metni Boyutu: 120px (Masaüstü), 70px (Tablet), 60px (Telefon)

boyutlandırma

Modülün boyutlandırma ayarlarını da değiştiriyoruz.

• Genişlik: %75 (Masaüstü), %100 (Tablet ve Telefon)
• Modül Hizalama: Sol

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

Açıklama İçeriği Ekle

Başka bir Metin Modülü olan bir sonraki modüle geçin. Seçtiğiniz bazı açıklama içeriğini ekleyin.

Metin Ayarları

Modülün tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Sans'ı Aç
• Metin Rengi: #ffffff
• Metin Satır Yüksekliği: 1.9em

boyutlandırma

Boyutlandırma ayarlarını da değiştirin.

• Genişlik: %75 (Masaüstü), %100 (Tablet ve Telefon)
• Modül Hizalama: Sol

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

Kopya Ekle

Sütun 1'de ihtiyacımız olan son modül bir Düğme Modülüdür. Seçtiğiniz bir kopyayı ekleyin.

Düğme Ayarları

Modülün tasarım sekmesine gidin ve düğme ayarlarını aşağıdaki gibi değiştirin:

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Rengi: #ffffff
• Düğme Sınır Yarıçapı: 1 piksel

• Düğme Yazı Tipi: Oswald
• Düğme Yazı Tipi Stili: Büyük Harf

Sütun 2'ye Blurb Modülü Ekle

İçerik Ekle

İkinci sütuna geçin. Orada, ihtiyacımız olan ilk modül bir Blurb Modülü. Seçtiğiniz bir başlık ekleyin.

Simge Seç

Ardından, bir simge seçin.

Simge Ayarları

Modülün tasarım sekmesine gidin ve simge ayarlarını aşağıdaki gibi değiştirin:

• Simge Rengi: #ffd8c6
• Simge Yerleşimi: Üst
• Simge Hizalama: Merkez
• Simge Yazı Tipi Boyutunu Kullan: Evet
• Simge Yazı Tipi Boyutu: 250px (Masaüstü), 150px (Tablet ve Telefon)

Başlık Metni Ayarları

Sonraki başlık metni ayarlarını değiştirin.

• Başlık Başlık Düzeyi: H2
• Başlık Yazı Tipi: Oswald
• Başlık Yazı Tipi Stili: Büyük Harf
• Başlık Metni Hizalama: Orta
• Başlık Metin Rengi: #ff8949
• Başlık Metin Boyutu: 38px

aralık

Biraz sol ve sağ dolgu da ekleyin.

• Sol Dolgu: %11
• Sağ Dolgu: %11

Animasyon

Ve aşağıdaki animasyon ayarlarını ekleyerek modülü tamamlayın:

• Animasyon Yönü: Aşağı
• Animasyon Süresi: 1100ms
• Animasyon Gecikmesi: 400ms
• Animasyon Opaklığı Başlatma: %100

Sütun 2'ye İletişim Formu Modülü Ekle

Alanları Tam Genişliğe Dönüştür

İletişim Formu Modülü olan son modüle geçiyoruz. Ad ve e-posta alanlarını ayrı ayrı açın ve düzen ayarlarında bunları tam genişlikte yapın.

• Tam Genişlik Yap: Evet

Arka plan rengi

Ardından genel İletişim Formu Modülü ayarlarına geri dönün ve bir arka plan rengi ekleyin.

• Arka Plan Rengi: #f7f7f7

Alan Ayarları

Tasarım sekmesine geçin ve sonraki alan ayarlarında bazı değişiklikler yapın.

• Alanlar Arka Plan Rengi: #ffffff
• Alanlar Metin Rengi: #ff8949
• Alanlar Üst Kenar Boşluğu: 15px
• Alanlar Alt Kenar Boşluğu: 15px
• Alan Üst Dolgusu: 20px
• Alanlar Alt Dolgusu: 20px

• Alan Yazı Tipi: Oswald
• Alanlar Yazı Tipi Stili: Büyük Harf
• Alanlar Metin Hizalaması: Merkez
• Alanlar Metin Boyutu: 21px

Düğme Ayarları

Ardından, düğmeyi buna göre biçimlendirin:

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Rengi: #ff8949
• Düğme Sınır Yarıçapı: 1 piksel

• Düğme Yazı Tipi: Oswald
• Düğme Yazı Tipi Stili: Büyük Harf

boyutlandırma

Ayrıca, boyutlandırma ayarlarında genişliğin '%100' olduğundan emin oluyoruz.

• Genişlik: %100

aralık

Sonraki boşluk ayarlarına geçin ve bazı özel dolgu değerleri uygulayın.

• Üst Dolgu: %14
• Alt Dolgu: %14
• Sol Dolgu: %12
• Sağ Dolgu: %12

Animasyon

Ardından, aşağıdaki animasyon ayarlarını kullanın:

• Animasyon Stili: Slayt
• Animasyon Yönü: Yukarı
• Animasyon Süresi: 1100ms
• Animasyon Gecikmesi: 400ms
• Animasyon Opaklığı Başlatma: %100

Konum

Modülü yalnızca masaüstünde yeniden konumlandırarak modül ayarlarını (ve öğreticiyi) tamamlayın:

• Konum: Mutlak (Masaüstü), Varsayılan (Tablet ve Telefon)
• Yer: Alt Merkez

Ö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, kahraman bölümünüze sorunsuz bir şekilde bir iletişim formunu nasıl ekleyeceğinizi gösterdik. Daha spesifik olarak, tüm ekran boyutlarında harika görünen bir kayar sütun iletişim formu oluşturduk. JSON dosyasını da ücretsiz olarak indirebildiniz! Herhangi bir sorunuz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin.

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.