Her web sitesinin bir iletişim bölümüne ihtiyacı vardır, ancak bu, standart bir tasarıma gitmeniz gerektiği anlamına gelmez. Divi'nin kaydırma efektleriyle öne çıkacak yüzer bir iletişim bölümü oluşturabilirsiniz. Ziyaretçileri sizinle etkileşime girmeye davet edecek dikey kayan bir iletişim bölümü düzeniyle kullanıcı etkileşiminizi geliştirin. İletişim formu. Bu yazıda, herhangi bir sayfaya ekleyebileceğiniz tam genişlikte kayan bir kişi bölümünün nasıl oluşturulacağını göstereceğiz. Divi Theme Builder ile bunu site genelindeki bir altbilginin en üstüne bile ekleyebilirsiniz.
Aşağıda, kendi Divi kitaplığınıza indirebileceğiniz JSON düzenine sahip ücretsiz bir indirilebilir dosya bulacaksınız. Ayrıca, harita arka planını yeniden oluşturmanıza yardımcı olacak bir PSD şablonu ve kendi renklerinizle özelleştirebilmeniz için bir harita pimi SVG ekledik.
Bir eleman yapısı oluşturun
Bu tasarımda, sergilemek istediğiniz konumun Google Haritasında temsili olan bir arka plan resmi kullanacağız. Bunu Photoshop veya başka bir resim düzenleyici ile yapabilirsiniz.
Yeni bölüm ekle
Şimdi Divi Builder ile kayan temas bölümünü oluşturmaya başlama zamanı! Yapacağımız ilk şey yeni veya mevcut bir sayfa açmak ve yeni bir bölüm eklemek.
İçerik sekmesinde, Photoshop'ta oluşturduğunuz haritanın arka planını ekleyin.
- Arka plan resmi: değiştirilmiş haritanız
aralık
Ardından, tasarım sekmesindeki bölüm aralığı ayarlarını özelleştirin.
- Üst ve alt kenar boşluğu: 50vh
- Alt doldurma: 0vw
görünürlük
Ardından taşmaları görünür olarak ayarlayın.
- Yatay ve dikey taşma: görülebilir
Pozisyon
Son olarak, bölümün Z dizinini 10 olarak ayarlayın.
- Z Endeksi: 10
Yeni bir satır ekle
Sütun yapısı
Şimdi birkaç şey ekleme zamanı. İlk önce 2 sütunlu bir satır ekleyin.
boyutlandırma
Çizgi parametrelerini açın ve boyutlandırmayı aşağıdaki gibi ayarlayın.
- Genişlik
- Ofis:% 90
- Tablet ve telefon:% 80
- Maksimum genişlik:% 90
görünürlük
Gelişmiş sekmesine tıklayın ve ardından taşmaları ayarlayın.
- Yatay ve dikey taşma: görülebilir
Pozisyon
Konum ayarlarını değiştirerek satır ayarlarını tamamlayın.
- Pozisyon: Göreli
- Ofset Menşei: Sol Üst
- Dikey Ofset
- Masaüstü: -8vw
Sütun 1 Ayarları
Olayın Arka Planı
Modül eklemeden önce tek tek sütunları biçimlendirmemiz gerekecek. Sütun 1'e arka plan rengi ekleyin.
- Düz Renk: # 25274d
aralık
Sonra aralık ayarlarını yapın.
- Üst ve Alt Dolgu
- Masaüstü ve Tablet: 7vw
- Sol ve Sağ Dolgu
- Masaüstü: 3vw
- Tablet ve Telefon: 6vw
sınır
Ardından kenarlık ayarlarına yuvarlatılmış köşeler ekleyin.
- Yuvarlak Köşeler: Dört köşenin tümü 10 piksel
Kaydırma Efektleri
Sonuncu fakat son derece önemli olarak kaydırma efektleri ayarlarında dikey bir hareket kullanın. Bu yüzen bir efekt yaratmamıza yardımcı olacaktır.
- Kaydırma Dönüştürme Efektleri: Dikey Hareket
- Dikey Hareket / Masaüstü Seti
- Başlangıç Dengesi: 4
- Orta Ofset: 0 (% 50'de)
- Bitiş Ofseti: -4
- Dikey Hareket / Tablet ve Telefon Seti
- Başlangıç Dengesi: 4
- Orta Ofset: 0 (% 40 ve% 60'da)
- Bitiş ofseti: -3
- Hareket Efekti Tetikleyicisi: Elemanın Ortası
Sütun 2 ayarları
Pozisyon
Şimdi ikinci sütunun parametrelerine geçelim. Konum parametrelerini uygun şekilde ayarlayın.
- Pozisyon: Göreli
- Ofsetin kökeni: sol üst
- Dikey ofset
- Ofis: 25vw
Kaydırma efektleri
Ayrıca bu sütuna dikey bir hareket ekliyoruz.
- Kaydırma dönüşüm efektleri: dikey hareket
- Dikey / masaüstü hareketini tanımlama
- Başlangıç ofseti: 2
- Ortalama ofset: 0 (% 50'de)
- Bitiş ofseti: -2
- Dikey hareketi / tableti ve telefonu tanımlama
- Başlangıç ofseti: 0
- Ortalama ofset: 0 (% 50'de)
- Bitiş ofseti: -2
- Hareket Efekti Tetikleyicisi: Öğe Üstü
1 sütununa bir metin modülü ekleyin
içindekiler
1. sütundaki bir metin modülünden başlayarak modüller eklemenin zamanı geldi. İstediğiniz H2 içeriğini ekleyin.
Başlık metni
Tasarım sekmesine gidin ve H2 metninin stilini aşağıdaki gibi yapın.
- Başlık seviyesi: H2
- Yazı tipi: Palanquin Dark
- Yazı tipi ağırlığı: kalın
- Yazı Tipi Stili: TT
- Renk: sarı # ffd868
- boyut
- Ofis: 5vw
- Tablet: 10vw
- Telefon: 12vw
- Harf aralığı: 4 piksel
Sütun 1'e iletişim formu modülü ekleme
içindekiler
Metin modülünün altına bir ekleyin İletişim formu. Bunlar kullandığımız alanlar:
- Soyad
- e-posta
- malzeme
- Mesaj
Spam Koruması
Modülü şekillendirmeden önce İletişim formu. Spam korumasını etkinleştirin ve ReCaptcha hesabınızı bağlayın.
- Spam koruma hizmeti kullanın: Evet
- Servis Sağlayıcı: ReCaptcha
- Bir hesap seçin
alanlar
Tasarım sekmesine geçin ve alanları aşağıdaki gibi biçimlendirin.
- Arka Plan Rengi: Koyu Mavi # 25274d
- Metin rengi: açık gri # d1d1d1
- Odak Arka Plan Rengi: Koyu Mavi # 25274d
- Odak metni rengi: açık gri # d1d1d1
- Yazı tipi: Palanquin
- Tarz: TT
- Metin boyutu
- Ofis: 0.9vw
- Tablet: 2vw
- Telefon: 3vw
- Harf aralığı: 1 piksel
Bouton
Ardından düğmeyi stilize edin.
- Özel stiller: Evet
- Metin boyutu: 20px
- Metin rengi: koyu mavi # 25274d
- Arka Plan Rengi: Sarı # ffd868
- Sınır yarıçapı: 7 piksel
- Simge Rengi: Koyu Mavi # 25274d
- Üst kenar boşluğu: 5px
boyutlandırma
Daha sonra boyutlandırma parametrelerini değiştiririz.
- Genişlik:% 100
- Maksimum genişlik:% 100
aralık
Ayrıca üst dolgu ekleyeceğiz.
- Üst dolgu: 4vw
Sınır
Sınır parametrelerini özelleştirerek modül parametrelerini tamamlayın.
- Yuvarlak köşeli girişler: Dört köşede 6 piksel
- Girişler Kenarlık stilleri: dört tarafı da
- Giriş kenarlığı genişliği: 2 piksel
- Girişler Kenarlık rengi: sarı # ffd868
Sosyal medya izleme modülünü 2. sütuna ekleyin
içindekiler
2. sütuna gidin ve bir sosyal medya modülü ekleyin. İhtiyacınız olan tüm sosyal ağları kullanın.
Ihtiyati haciz
Şekillendirmeden önce, karşılık gelen ağlara bağlantılar ekleyin.
Makalenin bağlamı
Şimdi ilk sosyal ağı açın ve arka plan rengini değiştirin.
- Renk: Koyu Mavi # 25274d
Öğe simgesi
Aynı elemanın tasarım sekmesinde, simge ayarlarını aşağıdaki gibi değiştirin.
- Renk: sarı # ffd868
- Simge yazı tipi boyutu
- Masa ve tablet: 31 piksel
- Telefon: 26 piksel
Öğe aralığı
Ardından, simgeleri birbirinden ayırmak için küçük bir kenar boşluğu ekleyin.
- Sağ kenar boşluğu: 1vw
Öğe stillerini kopyalayıp yapıştırın
Kalan sosyal ağları biçimlendirmek için ana içerik penceresine dönün ve ilk simgeden öğe stillerini kopyalayın. Ardından öğe stillerini kalan sosyal ağlara yapıştırın.
hizalanma
Ana tasarım sekmesine geçin ve modülün sola hizalandığından emin olun.
- Modülün hizalanması: sol
boyutlandırma
Ardından modülün boyutlarını ayarlayın.
- Genişlik:% 100
aralık
Ayrıca tüm varsayılan dolguyu da temizleyin.
- Üst, alt, sol ve sağ dolgu: 0vw
Sınır
Son olarak, kenarlık ayarlarında yuvarlatılmış köşeler ekleyin. Bu, tüm simgelerin kenarlıklarını aynı anda ayarlayacaktır.
- yuvarlak köşeler
- Sol üst ve sağ: 7 piksel
- Sol alt ve sağ: 0 piksel
2 sütununa bir metin modülü ekleyin
içindekiler
Sosyal medya modülünün altına başka bir metin modülü ekleyin. Seçtiğiniz içeriği ekleyin. İki adres, bir telefon numarası ve bir e-posta ekledik. Her bir öğenin başlığında tümü büyük harflerle kalın kullanın.
- Genel alan: 1587 Sukhumvit Soi 21, Bangkok, Tayland.
- Satış noktası : Emporium Alışveriş Merkezi, 2. kat
- Telefon: (321) 564 2398
- E-posta: [e-posta korumalı]
bağlam
Modülün arka plan rengini değiştirin.
- Renk: Koyu Mavi # 25274d
Metinleri
Tasarım sekmesine geçin ve metnin stilini belirleyin.
- Yazı tipi: Palanquin
- Renk: sarı # ffd868
- Boyut: 18px
aralık
Ayrıca özel aralık değerleri ekleyin.
- Üst kenar boşluğu
- Ofis: -60px
- Tablet ve telefon: -50 piksel
- Üst, alt, sol ve sağ dolgu
- Ofis: 3vw
- Tablet: 6vw
- Telefon: 8vw
Sınır
Ve kenarlık ayarlarına yuvarlatılmış köşeler ekleyerek modülü tamamlayın. Bu kadar!
- Yuvarlak köşeler: Sağ üstte, sol altta ve sağ altta 10 piksel.
anket
Kayan kişiler bölümünü yeniden oluşturmayı bitirdiğimize göre, farklı ekran boyutlarında sonuca son bir göz atın.
Ek Kaynaklar
C'est kaynakların bulunduğu az önce okuduklarınızın tamamlayıcısı olabilir. Ek olarak veya sahip olmayanlar tarafından kullanılabilirler. Divi teması.
- Nasıl WordPress üzerinde bir pop-up iletişim formunu eklemek için
- Divi'deki genel başlığa açılır bir form nasıl eklenir
- İletişim formları oluşturmak için 5 eklenti
Finish
Yeni Divi kaydırma efektlerini kullanmak, herhangi bir standart düzeni güzel bir tasarıma dönüştürür. Kendi arka planınızı oluşturarak, bitmiş tasarımın görünümü üzerinde daha fazla kontrole sahip olursunuz. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorumlar bölümüne bir yorum bırakın!
