Divi ile Tek Tasarımda Vurgulu Üzerinde Birden Çok Hedefli İletişim Formu Oluşturma

Web sitenizde iletişim formlarını görüntüleme şekliniz kesinlikle dönüşüm oranlarını artırmaya yardımcı olabilir. Güzel ve kullanıcı dostu iletişim formları oluşturmanın yanı sıra, ona daha hedefli bir şekilde de yaklaşabilirsiniz. Bu gönderide, ziyaretçilerinizin hangi hizmetle ilgilendiğine bağlı olarak görünen birden fazla iletişim formuyla tek bir tasarımı nasıl oluşturacağınızı 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

Hedeflenen İletişim Formları Düzenini ÜCRETSİZ İndirin

Ellerinizi ücretsiz hedeflenen iletişim formları 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!

Düzeni sayfanıza yükledikten sonra, üzerinde çalıştığınız sayfaya yine de CSS kodunu eklemeniz gerekir. CSS kodunu bu eğitimin sonunda bulabilirsiniz.

Youtube Kanalımıza Abone Olun

Yeniden Yaratmaya Başlayalım!

1. Bölüm Ekle

Yeni veya mevcut bir sayfa açın ve yeni bir normal bölüm ekleyin.

Yeni Satır Ekle

Sütun Yapısı

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

Metin Modülü Ekle

H2 İçeriği Ekle

Seçtiğiniz bazı H2 içeriğiyle sütuna bir Metin Modülü ekleyin.

H2 Metin Ayarları

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

• Başlık 2 Yazı Ağırlığı: Ultra Kalın
• Başlık 2 Yazı Tipi Stili: Büyük Harf
• Başlık 2 Metin Hizalama: Orta
• Başlık 2 Metin Rengi: #000000
• Başlık 2 Metin Boyutu: 6vw
• Başlık 2 Harf Aralığı: -0.4vw
• Başlık 2 Çizgi Yüksekliği: 0.8em

aralık

Bazı özel üst ve alt kenar boşluklarını da ekleyin.

• Üst Marj: 2vw
• Alt Marj: 2vw

2. Bölüm Ekle

Degrade Arka Plan

Bir öncekinin hemen altına başka bir bölüm ekleyin ve aşağıdaki gradyan arka planı (veya seçtiğiniz herhangi bir gradyan arka planı) uygulayın:

• Renk 1: #30fff1
• Renk 2: #4635ff
• Gradyan Yönü: 110deg
• Bitiş Konumu: %85

Üst Bölücü

Tasarım sekmesine gidin ve bir üst ayırıcı ekleyin.

• Bölücü Stili: Listede Bul
• Bölücü Düzenlemesi: Bölüm İçeriğinin Altında

Alt Bölücü

Bir alt bölücü de ekleyin.

• Bölücü Stili: Listede Bul
• Bölücü Düzenlemesi: Bölüm İçeriğinin Altında

boyutlandırma

Sonraki boyutlandırma ayarlarında yüksekliği değiştirin.

• Yükseklik: 200 piksel

aralık

Daha sonra bazı özel boşluk ayarları ekleyin.

• Alt Kenar Boşluğu: 30vw (Masaüstü), 45vw (Tablet), 200vw (Telefon)
• Üst Dolgu: 0vw
• Alt Dolgu: 0vw

CSS Sınıfı

Gönderinin ilerleyen bölümlerinde, efektin çalışması için bazı CSS kodları ekleyeceğiz. Bunun için hazırlık olarak bölüme bir CSS sınıfı ekleyeceğiz.

• CSS Sınıfı: iletişim bölümü

Yeni Satır Ekle

Sütun Yapısı

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

taşma

Satır ayarlarını açın ve taşmaları gizleyin.

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

geçişler

Geçiş süresini de kaldırın.

• Geçiş Süresi: 0ms

Bulanıklık Modülü Ekle

İçerik Kutusuna Başlık Ekle

Modül eklemeye başlama zamanı! Bir Blurb Modülü ekleyin ve hizmetlerinizden birini temsil eden bir başlık girin.

Simge Seç

Sonraki bir simge seçin.

Varsayılan Arka Plan Rengi

Varsayılan bir arka plan rengi ekleyerek devam edin.

• Arka Plan Rengi: #ffffff

Vurgulu Arka Plan Rengi

Fareyle üzerine gelindiğinde arka plan rengini değiştirin.

• Arka Plan Rengi: #000000

Varsayılan Simge Ayarları

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

• Simge Rengi: #000000
• Simge Yazı Tipi Boyutunu Kullan: Evet
• Simge Yazı Tipi Boyutu: 2.5vw (Masaüstü), 5vw (Tablet), 7vw (Telefon)

Fareyle Üzerine Gelme Simgesi Ayarları

Fareyle üzerine gelindiğinde simge rengini değiştirin.

• Simge Rengi: #ffffff

Varsayılan Başlık Metni Ayarları

Sonraki başlık metni ayarlarını açın ve aşağıdaki değişiklikleri uygulayın:

• Başlık Yazı Tipi Ağırlığı: Ultra Kalın
• Başlık Yazı Tipi Stili: Büyük Harf
• Başlık Metni Hizalama: Orta
• Başlık Metin Rengi: #000000
• Başlık Metin Boyutu: 0.9vw (Masaüstü), 1.8vw (Tablet), 3vw (Telefon)

Fareyle Üzerine Gelme Başlık Metni Ayarları

Fareyle üzerine gelindiğinde başlık metni rengini değiştirin.

• Başlık Metin Rengi: #ffffff

boyutlandırma

Daha sonra farklı ekran boyutlarının genişliğini değiştirin.

• Genişlik: 10vw (Masaüstü), 17vw (Tablet), 30vw (Telefon)
• Modül Hizalaması: Merkez

aralık

Ve boşluk ayarlarına bazı özel kenar boşluğu ve dolgu değerleri ekleyin.

• Üst Marj: 4vw
• Alt Marj: 4vw
• Üst Dolgu: 2vw (Masaüstü), 3vw (Tablet), 6vw (Telefon)
• Alt Dolgu: 2vw (Masaüstü), 3vw (Tablet), 6vw (Telefon)

Sınır

Ayrıca kenarlık ayarlarında köşelerin her birine '50vw' ekleyerek modülü daire haline getiriyoruz.

Kutu Gölge

Bir kutu gölgesi de ekleyin.

Varsayılan Dönüştürme Ölçeği

Dönüştürme ayarlarına geçin ve varsayılan dönüştürme ölçeği değerlerinin '%100' kaldığından emin olun.

Hover Dönüşüm Ölçeği

Fareyle üzerine gelindiğinde bu değerleri değiştirin.

• Alt: %120
• Sağ: %120

İletişim Formu Ekle

Ad ve E-posta Alanlarını Tam Genişlikte Yapın

Bu satırda ihtiyacımız olan ikinci modül ise İletişim Formu Modülü. İletişim formunu ekledikten sonra, ad ve e-posta alanlarını açın ve bunları tam genişlikte yapın.

• Tam Genişlik Yap: Evet

Mesaj Alanını Kaldır ve Hizmete Özgü Sorular için Üç Giriş Alanı Ekle

Ardından, söz konusu hizmet için geçerli olan üç soru ekleyin.

Captcha'yı devre dışı bırak

Captcha seçeneğini de devre dışı bırakın.

• Captcha'yı göster: Hayır

Alan Ayarları

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

• Alanlar Üst Doldurma: 0.6vw (Masaüstü), 0.9vw (Tablet), 1.5vw (Telefon)
• Alanlar Alt Doldurma: 0.6vw (Masaüstü), 0.9vw (Tablet), 1.5vw (Telefon)
• Alanlar Metin Boyutu: 0.8vw (Masaüstü), 1.6vw (Tablet), 2.3vw (Telefon)

Düğme Ayarları

Sonraki düğmenin görünümünü değiştirin.

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Boyutu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #000000
• Düğme Kenar Genişliği: 0px
• Düğme Yazı Tipi Ağırlığı: Ultra Kalın
• Düğme Yazı Tipi Stili: Büyük Harf

aralık

Bazı dolgu değerleri de ekleyin.

• Üst Dolgu: 2vw
• Alt Dolgu: 2vw
• Sol Dolgu: 2vw
• Sağ Dolgu: 2vw

Kenarlık Ayarları

Son olarak, kenarlık ayarlarına gidin ve köşelerin her birine '10px' ekleyin.

Satırı Üç Kez Klonla

İlk satırı tamamladıktan sonra devam edip üç kez klonlayabilirsiniz.

Her Yinelenen Satır İçin Bulanık İçeriği ve Simgeyi Değiştirin

Her bir kopya için tanıtım yazısı başlığını ve simgesini değiştirdiğinizden emin olun.

Her Yinelenen Satır İçin Hizmete Özgü Soruları Değiştirin

İletişim formunun özel sorularını da değiştirin.

Ek Satır Ayarları

Varsayılan Yükseklik

İlk satırın ayarlarını bir kez daha açın, boyutlandırma ayarlarına gidin ve farklı ekran boyutlarında yüksekliği değiştirin.

• Yükseklik: 18vw (Masaüstü), 27vw (Tablet), 38vw (Telefon)

Hover Yüksekliği

Fareyle üzerine gelindiğinde yüksekliği otomatik olarak geri getirin.

• Yükseklik: otomatik

Satır Boyutlandırma Ayarlarını Bölümdeki Tüm Satırlara Genişlet

İlk satırın boyutlandırma ayarlarını değiştirdikten sonra, ayarları bölüm boyunca tüm satırlara genişletebilirsiniz.

Masaüstünde ve Tablette Satırları Yanyana Yerleştirin

Sayfa Ayarlarını Aç

Son fakat en az değil, dört satırı da tablet ve masaüstünde yan yana yerleştireceğiz. Bunu yapmak için sayfa ayarlarını açın.

Özel CSS Ekle

Özel CSS kutusuna gidin ve aşağıdaki CSS Kodu satırlarını ekleyin:

@media (min-width: 767px) {
.contact-section {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
}
}

Ö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, tek bir tasarımda birden çok hedefli iletişim formunun nasıl oluşturulacağını gösterdik. Bu, ziyaretçileriniz ve ilgilendikleri hizmet hakkında daha fazla bilgi edinmenin harika bir yoludur. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum 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.