Divi: "İletişim Formu" modülü nasıl özelleştirilir

oluşturmak ister misiniz? İletişim formu modül sayesinde web sitenize İletişim Formu Divi'den mi? İşte 3 özelleştirme fikri…

formlar İletişim bilgileri birçok web sitesinin önemli bir parçasıdır. Ana hedefleri sezgisel olmak ve ziyaretçilerin kolayca iletişim kurmasına yardımcı olmaktır.

Ama bu her şeyin olduğu anlamına gelmez formlar temas noktaları kesin ve önceden tanımlanmış bir görünüme sahip olmalıdır. Sezgisel bir deneyimi güzel bir tasarımla kolayca birleştirebilirsiniz. Bu eğitimde tam olarak bunu yapacağız.

Modülün 3 benzersiz tasarımını paylaşacağız İletişim Formu de Divi yalnızca Divi'nin yerleşik seçeneklerini kullanarak oluşturabileceğiniz.

Gidelim!

Divi İletişim Formu modülünün tasarımlarına genel bakış

Masaüstü sürümleri

Modülün farklı tasarımlarına sahip masaüstü versiyonuna göz atarak başlayalım İletişim Formu Bu derste tasarlayacağımız şey.

Divi'nin İletişim Formu modülünü kullanarak web sitenize bir iletişim formu ekleyin

Mobil Sürümler

Ve işte daha küçük ekran boyutlarında nasıl göründükleri:

DIVI'yı şimdi indirin!!!

Divi İletişim Formu modülünü özelleştirme: 3 örnek

Ayrıca Oku: Divi: Atlıkarınca olarak ekip üyeleri bölümü nasıl oluşturulur

1 numaralı iletişim formunun oluşturulması

Yeni bölüm ekle

Gradyan arka planı

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

Gradyan Durakları
- %34: #4c00ff
- %34: #ffd400
Tür: Yuvarlak
Degrade Yönü: Sol Alt

aralık

Daha sonra Tasarım sekmesindeki Aralık seçeneğine gelin ve ayarları aşağıdaki gibi değiştirin.

Dolgu (Üst ve Alt): 200 piksel

Yeni bir satır ekle

Sütunun 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ı, ardından sütun 1 ayarlarını açın ve aşağıdaki arka plan rengini ekleyin

Arka plan: rgba(255,255,255,0.55)

Sütun 1: Arka plan resmi

Ayrıca ilk sütuna bir arka plan resmi ekleyin.

Arka Plan Görüntüsü Tekrarı: Tekrarlama Yok
Arka Plan Görüntüsü Karışımı: Ekran

Sütun 2: Arka plan resmi

Ve ikinci sütuna beyaz bir arka plan rengi.

Arkaplan: #ffffff

boyutlandırma

Ardından boyutlandırma parametrelerini değiştirin.

Sütun Yüksekliklerini Eşitle: EVET

aralık

Ayrıca tüm varsayılan özel dolguları kaldırın.

Dolgu (Üst ve Alt): 0 piksel

Sütun sınır yarıçapı

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

border-radius: 10px;

1. sütuna bir Metin modülü ekleyin

İçerik ekle

Farklı modülleri eklemeye başlama zamanı! Seçtiğiniz içeriğe sahip ilk sütuna bir Metin modülü ekleyin.

Metin ayarları

Ardından, Metin modülünün Tasarım sekmesine gidin ve bazı değişiklikler yapın.

Metin :
- yazı tipi: tatmin
- Metin Rengi: #333333
- Boyut: 100 piksel
- Satır Yüksekliği: 1 em
- Hizalama: Merkez

aralık

Ayrıca özel dolgu değerleri ekleyin.

Dolgu (Üst): 600px
Dolgu (Alt): 100px

Gölge kutusu

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'e bir Görüntü modülü ekleyin

Bir resim yükle

İkinci sütuna bir Görüntü modülü ekleyerek devam edin. Seçtiğiniz bir resmi yükleyin.

boyutlandırma

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

Genişlik: %25 (masaüstü), %50 (tablet), %60 (telefon)
Modül Hizalaması: Merkez

aralık

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

Marj (Üst): -60%

sınır

Resmin kenarlıklarını aşağıdaki gibi değiştirin:

Yuvarlatılmış Köşeler: 100px (Tüm köşeler)

Metin #1 modülünü sütun 2'ye ekleyin

İçerik ekle

Görüntü modülünün hemen altına içerik içeren bir Metin modülü ekleyin.

Metin ayarları

Bu modül için metin ayarlarını düzenleyin.

Metin :
- yazı tipi: tatmin
- Metin Rengi: #333333
- Metin Boyutu: 44px
- Oryantasyon: Merkez

Metin #2 modülünü sütun 2'ye ekleyin

İçerik ekle

Ardından başka bir Metin modülü ekleyin.

Metin ayarları

Ayrıca bu modül için metin ayarlarını değiştirin.

Metin :
- Yazı Tipi: Arial
- Metin Rengi: #ffd400
- Metin Rengi: 18px
- Harf Aralığı: 2px
- Oryantasyon: Merkez

aralık

Ardından bir alt kenar boşluğu ekleyin.

Kenar Boşluğu (Alt): 100 piksel

İletişim Formu modülünü 2. sütuna ekleyin

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

Bir konu alanı ekleyin

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

Spam Koruması

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

Temel Captcha'yı Kullan: HAYIR

Form alanı metin ayarları

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

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

Düğme ayarları

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

Düğme İçin Özel Boyut Kullan: EVET
Buton :
- Metin Rengi: #ffd400
- Kenarlık Genişliği: 0 piksel
- Harf Aralığı: 2px
- Yazı Tipi: Arial
- Yazı stili: U
- altı çizili Renk: #4c00ff

aralık

Ardından bazı özel dolgu değerleri ekleyin.

Dolgu (Alt): 100 piksel
Dolgu (Sol ve Sağ): 50 piksel

Sınır

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

Girişler Alt Sınır Genişliği: 2px
Girişler Alt Kenarlık Rengi: #efefef

Bireysel alanların aralığı

Son olarak, mesaj alanı dışındaki her bir alana bir alt kenar boşluğu ekleyin.

Kenar Boşluğu (Alt): 20 piksel