Divi'nin İletişim Formu Modülünü Şekillendirmenin 5 Benzersiz Yolu

İletişim formları birçok web sitesinin hayati bir parçasıdır. Birincil amaçları sezgisel olmak ve ziyaretçilerin kolayca iletişim kurmasına yardımcı olmaktır. Ancak bu, tüm iletişim formlarının belirli ve önceden tanımlanmış bir şekilde görünmesi gerektiği anlamına gelmez. Sezgisel bir deneyimi güzel bir tasarımla kolayca birleştirebilirsiniz. Bu yazıda tam olarak bunu yapacağız. Yalnızca Divi'nin yerleşik seçeneklerini kullanarak oluşturabileceğiniz 5 benzersiz Divi iletişim formu modülü tasarımını paylaşacağız.

Hadi hadi bakalım!

Divi İletişim Formu Modül Tasarımlarının Önizlemesi

masaüstü

Masaüstündeki Divi iletişim formu modül tasarımlarına bir göz atarak başlayalım.

Mobil

Divi iletişim formu modül tasarımları daha küçük ekran boyutlarında şöyle görünür:

Divi'nin İletişim Formu Modülünü Şekillendirmenin 5 Benzersiz Yolu

Youtube Kanalımıza Abone Olun

İletişim Formu #1 Oluşturma

Yeni Bölüm Ekle

Degrade Arka Plan

İlk örnekle başlayalım! Yeni bir bölüm ekleyin, arka plan ayarlarına gidin ve bir degrade arka planı ekleyin.

• Renk 1: #4c00ff
• Renk 2: #ffd400
• Gradyan Türü: Radyal
• Radyal Yön: Sol Alt
• Başlangıç ​​Konumu: %34
• Bitiş Konumu: %34

aralık

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

• Üst Dolgu: 200 piksel
• Alt Dolgu: 200px

Yeni Satır Ekle

Sütun Yapısı

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

Sütun 1 Arka Plan Rengi

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve bir sütun 1 degrade arka planı ekleyin.

• Sütun 1 Arka Plan Rengi: rgba(255,255,255,0.55)

Sütun 1 Arka Plan Resmi

İlk sütuna da bir arka plan resmi ekleyin.

• Sütun 1 Arka Plan Resmi Tekrarı: Tekrar Yok
• Sütun 1 Arka Plan Resmi Karışımı: Ekran

Sütun 2 Arka Plan Rengi

Ve ikinci sütuna beyaz bir arka plan rengi.

• 2. Sütun Arka Plan Rengi: #ffffff

boyutlandırma

Sonraki boyutlandırma ayarlarını değiştirin.

• Sütun Yüksekliklerini Eşitle: Evet

aralık

Tüm varsayılan özel dolguyu da kaldırın.

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

Sütun Sınır Yarıçapı

Gelişmiş sekmesindeki her iki sütuna da bir miktar kenarlık yarıçapı ekleyin.

border-radius: 10px;

Sütun 1'e Metin Modülü Ekle

İçerik Ekle

Çeşitli modülleri eklemeye başlama zamanı! Seçtiğiniz bazı içeriklerle ilk sütuna bir Metin Modülü ekleyin.

Metin Ayarları

Ardından, metin ayarlarına gidin ve bazı değişiklikler yapın.

• Metin yazı tipi: Tatmin
• Metin Rengi: #333333
• Metin boyutu: 100 piksel
• Metin Satır Yüksekliği: 1em
• Metin Yönü: Merkez

aralık

Bazı özel dolgu değerleri de ekleyin.

• Üst Dolgu: 600 piksel
• Alt Dolgu: 100px

Kutu Gölge

Tasarıma derinlik katmak için ince bir kutu gölgesi kullanın.

• Kutu Gölge Bulanıklığı Gücü: 80px
• Kutu Gölge Yayılma Gücü: -16px
• Gölge Rengi: rgba(0,0,0,0.3)

Sütun 2'ye Görüntü Modülü Ekle

PNG Resmi Yükle

İkinci sütuna bir Görüntü Modülü ekleyerek devam edin. İstediğiniz bir PNG resmini yükleyin.

boyutlandırma

Bu modülün boyutlandırma ayarlarını değiştirin.

• Genişlik: %25 (Masaüstü), %50 (Tablet), %60 (Telefon)
• Modül Hizalaması: Merkez

aralık

Negatif üst kenar boşluğu kullanarak bir örtüşme oluşturun.

• Üst Marj: -%60

Metin Modülü #1'i Sütun 2'ye ekleyin

İçerik Ekle

Görüntü Modülünün hemen altına, içeriği olan bir Metin Modülü ekleyin.

Metin Ayarları

Bu modülün metin ayarlarını değiştirin.

• Metin Yazı Tipi: Tatmin
• Metin Rengi: #333333
• Metin Boyutu: 44px
• Metin Yönü: Merkez

Metin Modülü #2'yi Sütun 2'ye ekleyin

İçerik Ekle

Daha sonra başka bir metin modülü ekleyin.

Metin Ayarları

Bu modülün metin ayarlarını da değiştirin.

• Metin Yazı Tipi: Arial
• Metin Rengi: #ffd400
• Metin Boyutu: 18px
• Metin Harf Aralığı: 2px
• Metin Yönü: Merkez

aralık

Sonra biraz alt kenar boşluğu ekleyin.

• Alt Kenar Boşluğu: 100 piksel

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

Ad ve E-posta Alanında 'Tam Genişlik Yap' Seçeneğini Etkinleştirin

İhtiyaç duyulan son modül, İletişim Formu Modülüdür. Başka bir şey yapmadan önce ad ve e-posta alanlarını açın ve düzeni değiştirin.

• Tam Genişlik Yap: Evet

Konu Alanı Ekle

Bu tasarımı oluşturmak için konuya başka bir alan ekledik.

Elementler

Sonraki captcha seçeneğini devre dışı bırakın.

• Captcha'yı Görüntüle: Hayır

Form Alanı Metin Ayarları

Bu İletişim Formu Modülünün form alanı metin ayarlarında bazı değişiklikler yapın.

• Form Alanı Arka Plan Rengi: rgba(255,255,255,0)
• Form Alanı Yazı Tipi: Arial
• Form Alanı Yazı Tipi Ağırlığı: Hafif
• Form Alanı Metin Boyutu: 16px
• Form Alanı Harf Aralığı: 2px

Düğme Ayarları

Düğme görünümünü de değiştiriyoruz.

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Rengi: #ffd400
• Düğme Kenar Genişliği: 0px
• Düğme Harf Aralığı: 2px
• Düğme Yazı Tipi: Arial
• Yazı Tipi Stili: Altı çizili
• Alt Çizgi Rengi: #4c00ff

aralık

Daha sonra bazı özel dolgu değerleri ekleyin.

• Alt Dolgu: 100px
• Sol Dolgu: 50px
• Sağ Dolgu: 50px

Sınır

Ve alanların her birine ince bir alt kenarlık ekleyin.

• Alt Kenar Genişliği: 2px
• Alt Bordür Rengi: #efefef

Bireysel Alan Aralığı

Son fakat en az değil, mesaj alanı dışında her bir alana bir alt kenar boşluğu ekleyin.

• Alt Kenar Boşluğu: 20px

İletişim Formu #2 Oluşturma

Yeni Bölüm Ekle

Degrade arka plan

Bir sonraki örneğe geçelim! Degrade arka plana sahip yeni bir bölüm ekleyin.

• Renk 1: #562fef
• Renk 2: #ffffff
• Gradyan Türü: Doğrusal
• Başlangıç ​​Konumu: %50
• Bitiş Konumu: %50

aralık

Bu bölümün boşluk ayarlarına bazı özel dolgu değerleri ekleyin.

• Üst Dolgu: 200 piksel
• Alt Dolgu: 200px

Yeni Satır Ekle

Sütun Yapısı

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

Arka plan rengi

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve satıra bir arka plan rengi ekleyin.

• Arka Plan Rengi: #ffffff

Sütun 2 Gradyan Arka Planı

Sonraki satırın ikinci sütununa bir degrade arka planı ekleyin.

• Renk 1: #9932ff
• Renk 2: #562fef
• Sütun 2 Gradyan Türü: Doğrusal
• Sütun 2 Gradyan Yönü: 160deg

boyutlandırma

Satırın boyutlandırma ayarlarını da değiştirin.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet

aralık

Ardından, bazı özel boşluk değerleri ekleyin.

• Üst Dolgu: 0px
• Alt Dolgu: 0px
• Sütun 1 Üst Dolgu: 100 piksel
• Sütun 1 Alt Dolgu: 50 piksel
• Sütun 1 Sol Dolgu: 50px
• Sütun 1 Sağ Dolgu: 50 piksel
• Sütun 2 Üst Dolgu: 100 piksel
• Sütun 2 Alt Dolgu: 100 piksel
• Sütun 2 Sol Dolgu: 50px
• Sütun 2 Sağ Dolgu: 50 piksel

Sınır

Satırın kenarlıklarının her birine '20px' ekleyin.

Kutu Gölge

Son olarak, satıra ince bir kutu gölgesi ekleyin.

• Kutu Gölge Bulanıklığı Gücü: 45px
• Kutu Gölge Yayılma Gücü: -11px
• Gölge Rengi: rgba(0,0,0,0.3)

Sütun 1'e Metin Modülü Ekle

İçerik Ekle

Modülleri eklemeye başlama zamanı! İlk sütunda bir Metin Modülü ile başlayın.

Metin Ayarları

Bu modülün metin ayarlarını değiştirin.

• Metin Yazı Tipi Ağırlığı: Ultra Kalın
• Metin Yazı Tipi Stili: Büyük Harf
• Metin Rengi: #562fef
• Metin Suze: 100px (Masaüstü), 80px (Tablet), 60px (Telefon)
• Metin Harf Aralığı: -10px
• Metin Satır Yüksekliği: 1em

aralık

Biraz alt kenar boşluğu da ekleyin.

• Alt Kenar Boşluğu: 50px

Sütun 1'e İletişim Formu Modülü Ekle

Elementler

İlk sütunda ihtiyaç duyacağımız ikinci modül, bir İletişim Formu Modülüdür. Modülü ekledikten sonra 'Görüntü Captcha' seçeneğini devre dışı bırakın.

• Captcha'yı Görüntüle: Hayır

Form Alanı Metin Ayarları

Sonraki form alanı arka plan rengini değiştirin.

• Form Alanı Arka Plan Rengi: #ffffff

Düğme Ayarları

Metin içeren bir düğme yerine bir simge düğmesi oluşturmak için düğme ayarlarıyla da oynayın.

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Boyutu: 73px
• Botton Metin Rengi: rgba(0,0,0,0)
• Hover Düğmesi Arka Plan Rengi: rgba(255,255,255,0)
• Düğme Kenar Genişliği: 0px
• Düğme Simge Rengi: #9932ff
• Yalnızca Düğmenin Üzerine Geldiğinde Simgeyi Göster: Hayır

Kutu Gölge

Son olarak, alanların her birine ince bir kutu gölgesi ekleyin.

• Kutu Gölge Bulanıklığı Gücü: 36px
• Kutu Gölge Bulanıklığı Gücü: -14px
• Gölge Rengi: rgba(0,0,0,0.3)

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

İçerik Ekle

İkinci sütunda ihtiyaç duyacağımız ilk modül başka bir Metin Modülü.

Metin Ayarları

İçeriği ekledikten sonra bu modülün metin ayarlarını değiştirin.

• Metin Yazı Tipi Ağırlığı: Ultra Kalın
• Metin Rengi: #ffffff
• Metin Boyutu: 23px
• Metin Harf Aralığı: -1px

Blurb Modülü #1'i Sütun 2'ye ekleyin

İçerik Ekle

İhtiyacımız olan ikinci modül bir Blurb Modülü. Devam edin ve bazı iletişim bilgilerini girin.

Simge Seç

Ardından, eşleşen bir simge seçin.

Simge Ayarları

Bu simgenin ayarlarını değiştirin.

• Simge Rengi: #ffffff
• Simge Yerleşimi: Sol

Başlık Metni Ayarları

Sonraki başlık metni ayarlarında bazı değişiklikler yaparak devam edin.

• Başlık Metin Boyutu: 15px
• Başlık Harf Aralığı: -0.5px

aralık

Ve biraz üst kenar boşluğu ekleyin.

• Üst Kenar Boşluğu: 120px

Blurb Modülünü İki Kez Klonla

İlk Blurb Modülünü değiştirmeyi tamamladığınızda, devam edip modülü iki kez klonlayabilirsiniz.

Her İki Kopyaların İçeriğini ve Simgesini Değiştirin

Ziyaretçilerle farklı türde iletişim bilgilerini paylaşmak için her iki kopyanın içeriğini ve simgelerini değiştirin.

Her İki Çoğaltmanın Aralığını Değiştirin

Her iki kopyanın da üst kenar boşluğunun da değiştirilmesi gerekiyor.

• Üst Kenar Boşluğu: 30 piksel

İletişim Formu #3 Oluşturma

Yeni Bölüm Ekle

Arka plan rengi

Üçüncü örneğe geçelim! Aşağıdaki arka plan rengiyle yeni bir bölüm ekleyin:

• Arka Plan Rengi: #3491CE

aralık

Aralık ayarlarına bazı özel dolgu değerleri ekleyerek devam edin.

• Üst Dolgu: 200 piksel
• Alt Dolgu: 200px

1. Satır Ekle

Sütun Yapısı

Ardından, aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyin:

Metin Modülü Ekle

İçerik Ekle

Modül eklemeye başlama zamanı! İlk sütuna eklememiz gereken ilk modül bir Metin Modülüdür. Seçtiğiniz bazı içeriği girin.

Metin Ayarları

Ardından, metin ayarlarını değiştirin.

• Metin Yazı Tipi Ağırlığı: Ultra Kalın
• Metin Rengi: rgba(255,255,255,0.24)
• Metin boyutu: 100px (Masaüstü), 86px (Tablet), 60px (Telefon)
• Metin Satır Yüksekliği: 1em
• Metin Yönü: Merkez

aralık

Bir miktar negatif alt kenar boşluğu da ekleyin.

• Alt Kenar Boşluğu: -100 piksel

2. Satır Ekle

Sütun Yapısı

Bu örneği tamamlamamız gereken ikinci satır aşağıdaki sütun yapısını içerir:

Degrade Arka Plan

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve bir degrade arka planı ekleyin.

• Renk 1: #11CE84
• Renk 2: #10C77F
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 160deg
• Başlangıç ​​Konumu: %50
• Bitiş Konumu: %50

boyutlandırma

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

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet

aralık

Daha sonra bazı özel dolgu değerleri ekleyin.

• Üst Dolgu: 150 piksel
• Alt Dolgu: 100px
• Sol Dolgu: 50px
• Sağ Dolgu: 50px

Sınır

Ardından, kenarlık ayarlarına gidin ve köşelerin her birine '20px' ekleyin. Bir alt kenarlık da kullanın.

• Alt Kenar Genişliği: 10px
• Alt Kenar Rengi: #1ba35a

Kutu Gölge

İnce bir kutu gölgesi ekleyerek satır ayarlarını tamamlayın.

• Kutu Gölge Bulanıklığı Gücü: 80px
• Kutu Gölge Yayılma Gücü: -24px
• Gölge Rengi: rgba(0,0,0,0.3)

Sütun 1'e İletişim Formu Modülü Ekle

Ad ve E-posta Alanında 'Tam Genişlik Yap' Seçeneğini Etkinleştirin

Satırın ilk sütununda ihtiyacımız olan ilk modül bir İletişim Formu Modülüdür. Ad ve e-posta alanını açın ve düzen ayarlarını değiştirin.

• Tam Genişlik Yap: Evet

Elementler

Sonraki captcha'yı devre dışı bırakın.

• Captcha'yı Görüntüle: Hayır

Düğme Ayarları

Ve düğme ayarlarını değiştirin.

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Rengi: #ffffff
• Renk 1: #3AA0E3
• Renk 2: #3491CE
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 155deg
• Başlangıç ​​Konumu: %50
• Bitiş Konumu: %50
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 10px
• Kutu Gölge Yayılma Gücü: -2px
• Gölge Rengi: #0a60af

Sınır

Ayrıca alanların her birine '5px' yuvarlatılmış köşeler ekliyoruz.

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

İçerik Ekle

İkinci sütunda, ihtiyacımız olan ilk modül bir Metin Modülüdür. Devam edin ve biraz içerik girin.

Arka plan rengi

Ardından, arka plan rengini değiştirin.

• Arka Plan Rengi: rgba(255,255,255,0.13)

Metin Ayarları

Metin ayarlarıyla da oynayın.

• Metin Yazı Tipi Ağırlığı: Hafif
• Metin Rengi: #ffffff
• Metin Boyutu: 15px
• Metin Harf Aralığı: -0.5px

aralık

Modülün nefes alması için alan sağlamak için bazı özel dolgular ekleyin.

• Üst Dolgu: 12px
• Alt Dolgu: 12px
• Sol Dolgu: 10px
• Sağ Dolgu: 10px

Sınır

Ayrıca sol üst ve sol alt köşelere '20 piksel' ekliyoruz. Bunun üzerine, bir sol kenarlık ekleyeceğiz.

• Sol Kenar Genişliği: 34px
• Sol Kenar Rengi: #edf000

görünürlük

Bu tasarımın farklı ekran boyutlarına uymasını sağlamak için telefon ve tablette Metin Modülünü devre dışı bırakacağız.

Metin Modülünü İki Kez Klonla

İlk Metin Modülünü değiştirmeyi bitirdikten sonra devam edin ve modülü iki kez klonlayın.

Her İki Kopyaların İçeriğini Değiştirin

Her iki kopyanın içeriğini başka bir şeye değiştirin.

Her İki Çoğaltmanın Aralığını Değiştirin

Ve modüllerin her biri arasında boşluk yaratmak için biraz üst kenar boşluğu ekleyin.

• Üst Kenar Boşluğu: 20px

Her İki Çoğaltmanın Sınırını Değiştir

Son olarak, kopyaların her birinin sol kenarlık rengini ayrı ayrı değiştirin.

• Renk 1: #00faff
• Renk 2: #00f76f

İletişim Formu #4 Oluşturma

Yeni Bölüm Ekle

Arka plan rengi

Dördüncü örneğe geçelim! Aşağıdaki arka plan rengini kullanarak yeni bir bölüm ekleyin:

• Arka Plan Rengi: #FFBABD

aralık

Bu bölümün varsayılan dolgusunu kaldırın.

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

Yeni Satır Ekle

Sütun Yapısı

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

Degrade Arka Plan

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve bir degrade arka planı ekleyin.

• Renk 1: #ffffff
• Renk 2: rgba(41,196.169,0)
• Gradyan Türü: Radyal
• Radyal Yön: Merkez
• Başlangıç ​​Konumu: %38
• Bitiş Konumu: %38

boyutlandırma

Sonraki boyutlandırma ayarlarını değiştirin.

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

aralık

Ve bazı özel dolgu ekleyin.

• Üst Dolgu: 160 piksel
• Alt Dolgu: 160px

Metin Modülü Ekle

İçerik Ekle

İhtiyacımız olan ilk modül bir Metin Modülü. Devam edin ve biraz içerik girin.

Metin Ayarları

Metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Abril Fatface
• Metin Rengi: #640076
• Metin Boyutu: 45px (Masaüstü), 34px (Tablet), 20px (Telefon)
• Metin Satır Yüksekliği: 1em
• Metin Yönü: Merkez

aralık

Daha sonra bazı özel boşluk değerleri ekleyin.

• Üst Kenar Boşluğu: 300px
• Üst Dolgu: 50px
• Alt Dolgu: 50px

İletişim Formu Modülü Ekle

Ad ve E-posta Alanında 'Tam Genişlik Yap' Seçeneğini Etkinleştirin

İhtiyacımız olan ikinci ve son modül ise İletişim Formu Modülü. Hem ad hem de e-posta alanlarını açın ve düzen ayarlarını değiştirin.

• Tam Genişlik Yap: Evet

Elementler

Ardından, öğe ayarlarında captcha seçeneğini devre dışı bırakın.

• Captcha'yı Görüntüle: Hayır

Form Alanı Metin Ayarları

Form alanı metin ayarlarında da bazı değişiklikler yapın.

• Form Alanı Arka Plan Rengi: #fff6f6
• Form Alanı Metin Rengi: #ff7c7c

Düğme Ayarları

Aşağıdaki ayarları kullanarak düğmeyi bir simge düğmesine dönüştürün:

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Boyutu: 88px
• Düğme Metin Rengi: rgba(255,255,255,0)
• Hover Düğmesi Arka Plan Rengi: rgba(255,255,255,0)
• Düğme Kenar Genişliği: 0px
• Düğme Simge Rengi: #e60085
• Yalnızca Düğmenin Üzerine Geldiğinde Simgeyi Göster: Evet

boyutlandırma

Ve tasarımın tüm ekran boyutlarıyla eşleşmesini sağlamak için boyutlandırma değerleriyle oynayın.

• Genişlik: %42 (Masaüstü), %50 (Tablet), %77 (Telefon)
• Modül Hizalaması: Merkez

aralık

Modüle bazı özel boşluk değerleri ekleyerek devam edin.

• Alt Kenar Boşluğu: 200 piksel
• Sol Dolgu: 50px
• Sağ Dolgu: 50px

Sınır

Ve köşelerin her birine '10px' ekleyin.

Düğme Kenar Boşluğu

Son olarak, gelişmiş sekmesinde aşağıdaki CSS kodu satırını kullanarak simge düğmesini sağa doğru itin:

margin-right: -100px;

İletişim Formu #5 Oluşturma

Yeni Bölüm Ekle

Degrade Arka Plan

Son örneğe geçelim! Aşağıdaki gradyan arka planına sahip yeni bir bölüm ekleyin:

• Renk 1: #4bf2d0
• Renk 2: #ffffff
• Gradyan Türü: Radyal
• Radyal Yön: Sol
• Başlangıç ​​Konumu: %36
• Bitiş Konumu: %36

aralık

Ardından, boşluk ayarlarına gidin ve bazı özel dolgular ekleyin.

• Üst Dolgu: 250 piksel
• Alt Dolgu: 250px

Yeni Satır Ekle

Sütun Yapısı

Bölüm ayarlarını değiştirmeyi bitirdikten sonra, aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyin:

Arka plan rengi

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve bir arka plan rengi ekleyin.

• Arka Plan Rengi: #ffffff

Sütun 1 Arka Plan Rengi

İlk sütuna başka bir arka plan rengi ekleyin.

• Sütun 1 Arka Plan Rengi: #f9f9f9

boyutlandırma

Ardından, satırın boyutlandırma ayarlarını değiştirin.

• Özel Genişlik Kullan: Evet
• Birim: PX
• Özel Genişlik: 1730 piksel
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet

aralık

Ve tüm ekran boyutlarına uyması için bazı özel boşluk değerleri ekleyin.

• Üst Dolgu: 0px
• Alt Dolgu: 0px
• Sütun 1 Üst Dolgu: 200 piksel (Masaüstü), 0 piksel (Tablet ve Telefon)
• Sütun 1 Alt Dolgu: 150 piksel (Masaüstü), 0 piksel (Tablet ve Telefon)
• Sütun 1 Sol Dolgu: 50px
• Sütun 1 Sağ Dolgu: 50 piksel
• Sütun 2 Üst Dolgu: 200 piksel (Masaüstü), 100 piksel (Tablet ve Telefon)
• Sütun 2 Alt Dolgu: 150 piksel, 100 piksel (Tablet ve Telefon)

Kutu Gölge

Satır ayarlarında yapmanız gereken son şey, ince bir kutu gölgesi eklemektir.

• Kutu Gölge Bulanıklığı Gücü: 56px
• Kutu Gölge Yayılma Gücü: -17px
• Gölge Rengi: rgba(0,0,0,0.3)

Sütun 1'e Metin Modülü Ekle

İçerik Ekle

Modül eklemeye başlama zamanı! İlk sütuna bir Metin Modülü ekleyin.

Metin Ayarları

İçeriği ekledikten sonra metin ayarlarına gidin ve bazı değişiklikler yapın.

• Yazı Tipi: Cambay
• Metin Rengi: #000000
• Metin Boyutu: 26px
• Metin Harf Aralığı: -0.5px
• Metin Yönü: Sağ

aralık

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

• Üst Kenar Boşluğu: 60px

görünürlük

Ve modülü hem telefonda hem de tablette gizleyin.

Metin Modülünü İki Kez Klonla

Her İki Kopyaların İçeriğini Değiştirin

İlk Metin Modülünü değiştirmeyi bitirdikten sonra devam edin ve modülü iki kez klonlayın. Her iki kopyanın içeriğini değiştirin.

Her İki Çoğaltmanın Aralığını Değiştirin

Her iki kopyanın da üst kenar boşluğunu değiştirin.

• Üst Kenar Boşluğu: 80px

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

Ad ve E-posta Alanında 'Tam Genişlik Yap' Seçeneğini Etkinleştirin

İkinci sütunda ihtiyacımız olan tek modül, İletişim Formu Modülüdür. Ad ve e-posta alanlarını açın ve düzen ayarlarını değiştirin.

• Tam Genişlik Yap: Evet

Elementler

Sonraki captcha seçeneğini devre dışı bırakın.

• Captcha'yı Görüntüle: Evet

Form Alanı Metin Ayarları

Ardından, form alanı metin ayarlarına gidin ve bazı değişiklikler yapın.

• Form Alanı Arka Plan Rengi: rgba(255,255,255,0)
• Form Alanı Yazı Tipi: Cambay

Düğme Ayarları

Ve aşağıdaki düğme ayarlarını kullanarak benzersiz bir düğme oluşturun:

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Boyutu: 64px (Masaüstü), 50px (Tablet), 40px (Telefon)
• Düğme Metin Rengi: #000000
• Renk 1: #4bf2d0
• Renk 2: rgba(41,196.169,0)
• Gradyan Türü: Radyal
• Radyal Yön: Merkez
• Başlangıç ​​Konumu: %25
• Bitiş Konumu: %25
• Düğme Kenar Genişliği: 0px
• Yalnızca Düğmenin Üzerine Geldiğinde Düğmeyi Göster: Hayır

aralık

Bu modüle de biraz üst kenar boşluğu ekleyin.

• Üst Kenar Boşluğu: 50px

Sınır

Ve alanların her biri için ince bir alt kenarlık kullanın.

• Alt Kenar Genişliği: 0,5 piksel
• Alt Kenar Rengi: #000000

Bireysel Alan Aralığı

Son olarak, alanların her birine ayrı ayrı aşağıdaki alt kenar boşluğunu ekleyin ve işiniz bitti!

• Alt Kenar Boşluğu: 50px

Ön izleme

masaüstü

Artık tüm adımların üzerinden geçtik, şimdi masaüstündeki Divi iletişim formu modül tasarımlarına son bir göz atalım.

Mobil

Ve daha küçük ekran boyutlarında Divi iletişim formu modülü tasarımlarından bekleyeceğiniz şey şudur:

Son düşünceler

Bu gönderide, oluşturduğunuz herhangi bir web sitesi için kolayca kullanabileceğiniz ve değiştirebileceğiniz 5 güzel Divi iletişim formu modülü tasarımı paylaştık. İletişim formları, birçok web sitesinin hayati bir parçasıdır, bu nedenle tasarımınızın ziyaretçilerinizi iletişim kurmaya ikna etmesini sağlamak önemlidir. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!