Ana İçeriğe Geç

Divi'de kaydırma efektleriyle kayan bir kişi bölümü oluşturma

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

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 kayan bir temas bölümü oluşturabilirsiniz. Ziyaretçileri iletişim formunuzla etkileşime girmeye davet edecek dikey kaydırmalı iletişim bölümü düzeniyle kullanıcı etkileşiminizi geliştirin. Bu makalede, herhangi bir sayfaya ekleyebileceğiniz tam genişlikte bir kayan kişi bölümünün nasıl oluşturulacağını göstereceğiz. Divi Theme Builder ile bunu site çapında bir altbilginin ü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, vurgulamak istediğiniz konumun Google Haritasındaki bir temsili olan bir arka plan resmi kullanacağız. Bunu Photoshop veya başka bir görüntü 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
Divi arka plan resmi

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
Divi 1 bölüm aralığı yapılandırması

görünürlük

Ardından taşmaları görünür olarak ayarlayın.

  • Yatay ve dikey taşma: görülebilir
yüzer temas bölümü

Pozisyon

Son olarak, bölümün Z dizinini 10 olarak ayarlayın.

  • Z Endeksi: 10
Divi bölümü konumu

Yeni bir satır ekle

Sütun yapısı

Şimdi birkaç şey ekleme zamanı. İlk önce 2 sütunlu bir satır ekleyin.

Satırda iki sütun divi var

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
Divi hattı parametresi

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
Divi hattı taşma yapılandırması

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
Divi çizgisi konumunu yapılandırın

Sütun 1 Ayarları

Arka fon

Modül eklemeden önce tek tek sütunları biçimlendirmemiz gerekecek. Sütun 1'e arka plan rengi ekleyin.

  • Düz Renk: # 25274d
Sütun rengi 1 divi

aralık

Sonra aralık ayarlarını yapın.

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

  • Üst ve Alt Dolgu
    • Masaüstü ve Tablet: 7vw
  • Sol ve Sağ Dolgu
    • Masaüstü: 3vw
    • Tablet ve Telefon: 6vw
İki sütun bölüm aralığı yapılandırması

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
Yuvarlak kenarlar divi bölümü

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ı
Divi bölümü kaydırma efektini özelleştirin

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
Divi sütun özelleştirme

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ü
Divi kaydırma efekti

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.

Sütun 1 içerik modülü

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
Üstte Divi yazı tipi özelleştirme

Sütun 1'e iletişim formu modülü ekleme

içindekiler

Metin modülünün altına bir iletişim formu ekleyin. Kullandığımız alanlar şunlardır:

  • Soyad
  • E-Posta Adresi
  • malzeme
  • Mesaj
Divi iletişim formu ekle

Spam Koruması

İletişim formu modülünü şekillendirmeden önce. 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
Divi iletişim formu spam koruması

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
Renk alanlarını özelleştirme 1

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
Divi düğme stilini özelleştirin 1
Divi düğme rengi yapılandırması

boyutlandırma

Daha sonra boyutlandırma parametrelerini değiştiririz.

  • Genişlik:% 100
  • Maksimum genişlik:% 100
Divi boyutlandırma yapılandırması

aralık

Ayrıca üst dolgu ekleyeceğiz.

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

  • Üst dolgu: 4vw
Divi aralığı

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
Divi sınır yapılandırması

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.

  • Facebook
  • Twitter
  • Linkedin
Modül bizi sosyal ağlarda takip edin

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
Divi 1 arka planını değiştir

Öğ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
Renk divisini özelleştirin

Öğe aralığı

Ardından, simgeleri birbirinden ayırmak için küçük bir kenar boşluğu ekleyin.

  • Sağ kenar boşluğu: 1vw
Sosyal paylaşım aralığı yapılandırması

Öğ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.

Stil öğesini kopyala
Stil öğesi divi'yi yapıştır

hizalanma

Ana tasarım sekmesine geçin ve modülün sola hizalandığından emin olun.

  • Modülün hizalanması: sol
Hizalamayı seçin

boyutlandırma

Ardından modülün boyutlarını ayarlayın.

  • Genişlik:% 100
Divi boyutlandırmasını yapılandırın

aralık

Ayrıca tüm varsayılan dolguyu da temizleyin.

  • Üst, alt, sol ve sağ dolgu: 0vw
Divi aralığını yapılandırın

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
Divi modülü sınır yapılandırması

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ı]
Divi metin modülü adres yapılandırması

bağlam

Modülün arka plan rengini değiştirin.

  • Renk: Koyu Mavi # 25274d
Metin modülü arka plan yapılandırması

Metinleri

Tasarım sekmesine geçin ve metnin stilini belirleyin.

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

  • Yazı tipi: Palanquin
  • Renk: sarı # ffd868
  • Boyut: 18px
Divi modülü metin yazı tipi

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
Divi aralığı marjı

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.
Yuvarlak kenarlık divi metin modülü

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.

yüzer temas bölümü

Ek Kaynaklar

Kaynakları, okuduklarınızı tamamlayıcı nitelikte olabilir. Ek olarak veya Divi temasına sahip olmayanlar tarafından kullanılabilirler.

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!

Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
0 hisseleri
hisse
cıvıltı
Enregistrer