Ana İçeriğe Geç

Divi'de Bölüm Bölücü Kaydırma Efektleri 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]

Bölüm bölücüyü kullanarak kaydırma efektleri oluşturmak, Divi WordPress temasını kullanarak web sitenize hayat katabilecek eğlenceli ve kolay bir tekniktir. Bir bölüm bölücü, sayfa içeriği geçişlerinize bir yaratıcılık dokunuşu eklemek için yararlı olan çok yönlü bir tasarım öğesi olmaya devam ediyor. 

Ancak Divi'nin kaydırma efektleriyle bölüm bölücüler daha da ilginç hale geliyor! İşin püf noktası, seçim bölücü stiline adanmış bir bölümü izole etmektir. Ardından, sayfa içeriğinin arka planı olarak güzel kaydırma efektleri oluşturmak için bölüme her türlü kaydırma oluşturulmuş hareketi ekleyebilirsiniz.

Hadi başlayalım!

Olası sonuç

İşte bu öğreticiyi tamamladıktan sonra elde edebileceğimiz tasarımlara genel bir bakış.

Divi ile animasyonlu kaydırma bölümü bölücüler nasıl oluşturulur

İki içerik bölümünün oluşturulması

Satır ekle

Başlamak için, varsayılan bölümde bir sütun içeren bir satır oluşturun.

Divi bölümü ekle

Bölüm marjı (testler için)

Test amacıyla, kaydırma için yerimiz olması amacıyla bölüme bir üst kenar boşluğu ekleyin. Bölüm ayarlarını açın ve aşağıdakileri ekleyin:

  • Üst kenar boşluğu: 80vh
Divi bölüm aralığını yapılandırma

Metin modülü ekle

Sütun satırına yeni bir metin modülü ekleyin.

Divi metin modülü

Metin modülünün içeriği

Gövde içeriğinin içine aşağıdaki H2 başlığını ekleyin:

<h2>Section Avec Séparateurs</h2>

Bölücülü bölüm

Metin modülü tasarımı

Tasarım ayarları altında aşağıdakileri güncelleyin:

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]

  • Metin yazı tipi: Roboto
  • Metnin hizalanması: orta
  • Öğe 2 Metin rengi: # bae0d8
  • Başlık 2 Metin boyutu: 80 piksel (masaüstü), 50 piksel (tablet), 30 piksel (telefon)
Divi yazı tipi yapılandırması

İkinci bir içerik bölümü ekleyin

Önceki bölümün altına yeni bir normal bölüm ekleyin.

bölücü bölümü bölücü kaydırma efektleri

Satır ekle

Yeni bölümde bir sütuna satır ekleyin.

Divi bölüm 1 ekle

Metin modülü ekle

Ardından satıra yeni bir metin modülü ekleyin.

Divi metin modülü ekle

Metin modülü tasarımı

Varsayılan dolgu içeriğini şimdilik gövdenin içinde tutabiliriz. Tasarım sekmesine geçelim ve aşağıdakileri güncelleyelim:

  • Metin yazı tipi: Roboto
  • Metin metni rengi: #dddddd
  • Metin boyutu: 16px
  • Metin satır yüksekliği: 1,5 em
  • Metin hizalama: sol
  • Maksimum genişlik: 400 piksel
  • Modülün hizalanması: orta
Metin stili divi modülünü özelleştirin

Bölüm ayarları

Bölümün varsayılan arka plan rengini kaldırdığınızdan emin olun, ancak tamamen şeffaf bir arka plan verin. Ardından üst dolguyu kaldırabilir ve kaydırma testi amacıyla bir alt kenar boşluğu ekleyebiliriz.

Bunu yapmak için bölüm ayarlarını açın ve aşağıdakileri güncelleyin:

  • Arka plan rengi: rgba (0,0,0,0)
  • Alt kenar boşluğu: 80vh
  • Dolgu: 0px
Divi aralık bölümü yapılandırması

Hareketli bölüm ayırıcısının oluşturulması

İki içerik bölümü tamamlandığında, animasyonlu bölüm bölücülerimiz için bölümü eklemeye hazırız.

Yeni bölüm ekle

Devam edin ve iki içerik bölümünün ortasında yeni bir normal bölüm oluşturun.

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]

Normal bölüm divi ekle

Bölümün bağlamı

Ve yine, bölümün varsayılan arka plan rengini kaldırın, ancak aşağıdakileri güncelleyin:

  • Arka plan rengi: rgba (0,0,0,0)
Personnalsier arka plan bölümü divi

Bölüm ayırıcı tasarımı

Endişelenmeyin, arka plan rengimizi bölüm bölücülerle oluşturacağız. Bunu yapmak için, tasarım sekmesine tıklayın ve bölüme aşağıdaki gibi bir üst ve alt ayırıcı ekleyin:

Üstün bölücü tasarımı

  • Üst Bölücü Stili: ekran görüntüsüne bakın
  • Üst bölücünün rengi: # 524fbf
  • Üst bölücünün yüksekliği: 20vw
  • Üst bölücünün yatay tekrarı: 0,6x
  • Üst bölücünün kapağı: yatay
Divi bölümü sınır yapılandırması

Alt bölücü tasarımı

  • Alt bölücü stili: ekran görüntüsüne bakın
  • Alt ayırıcı rengi: # 524fbf
  • Alt bölücünün yüksekliği: 20vw
  • Alt bölücünün yatay tekrarı: 0,5x
  • Alt bölücü eğimi: yatay ve dikey
Alt divi seçici
Bölüm yüksekliği ve dolgu

Bu bölüm tamamen bölücü tasarıma yönelik olduğundan, yükseklik ve dolgudan kurtulabiliriz, böylece yalnızca bölücünün stili gösterilir ve iki içerik bölümü arasında gereksiz boşluk kalmaz. Aşağıdakileri güncelleyin:

  • Yükseklik: 0px
  • Dolgu: 0 piksel yüksek, 0 piksel düşük
Düşük bölücü bölüm divi
Bölüm Ayırıcı Kaydırma Efektleri

Ardından bölüme aşağıdaki kaydırma efektlerini verin:

Sekmenin altında Yatay hareket ...

  • Yatay hareketi etkinleştir: EVET

Bunun için varsayılan ayarları, büro .

Yatay kaydırma divi

Ardından yatay hareket parametrelerini Tablet :

  • Başlangıç ​​ofseti: 3 (pencerenin% 0'ında)
  • Ortalama uzaklık: 0 (görüntü alanının% 50'sinde)
  • Bitiş uzaklığı: -3 (görüntü alanının% 100'ünde)
Yatay kusur tablosu divi

Sekmenin altında Yukarı ve Aşağı Etkisini Ölçeklendirme , aşağıdakileri güncelleyin: büro ...

Ç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]

  • Başlangıç ​​ölçeği:% 200 (pencerenin% 0'ında)
  • Ortalama ölçek:% 150 (görüntü alanının% 45 -% 65'inde)
  • Bitiş ölçeği:% 150 (görüntü alanının% 100'ünde)
Düzen yapılandırması

Ardından, ölçek büyütme ve küçültme efektini Tablet aşağıdaki gibi

  • Başlangıç ​​ölçeği:% 400 (pencerenin% 0'ında)
  • Ortalama ölçek:% 300 (görüntü alanının% 45 -% 65'inde)
  • Bitiş ölçeği:% 400 (görüntü alanının% 100'ünde)

Tabletteki (ve telefondaki) hareket efektlerini ayarlamamızın ana nedeni, piksel uzunluk birimleri (yani 3 = 300 piksel) kullanan yatay hareket değerlerinden kaynaklanmaktadır. mutlaktır ve tarayıcının genişliğine göre ayarlamayın.

Şimdi kaydırma animasyonlu bölüm bölücümüzün nihai sonucunu görelim.

Son düşünceler

Kaydırma üzerindeki bölüm ayırıcıları canlandırmak, bir web sayfasını hayata geçirmenin eğlenceli ve etkili bir yoludur. Umarım bu, daha yaratıcı tasarımları kendiniz harekete geçirmek için size biraz ilham verir.

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üş
1 hisseleri
hisse1
cıvıltı
Enregistrer