Ana İçeriğe Geç

Divi'de Kaydırma Efektleriyle Sorunsuz Geçiş Nasıl Oluşturulur

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]

Hizmetler sayfanızı tasarlarken, ziyaretçilerinizin sunduğunuz tüm farklı hizmetleri fark ettiğinden emin olmak istersiniz. Çoğu durumda, bu yalnızca aradıkları belirli bir hizmet olacaktır, ancak hizmet yapınızda modern bir yol sağlarsanız, ziyaretçilerinizin hepsini ele alma olasılığı daha yüksektir. 

Bu eğitimde, Divi'nin kaydırma efektleriyle nasıl yaratıcı olacağınızı ve sorunsuz bir hizmet geçişi oluşturacağınızı göstereceğiz. JSON dosyasını ücretsiz olarak da indirebilirsiniz!

Gidelim.

Olası Sonuç

Eğiticiye geçmeden önce, farklı ekran boyutlarında sonuca bir göz atalım.

Bölüm divi arasındaki geçiş

1, elemanların yapısını yeniden

1. bölüm ekle

aralık

Üzerinde çalıştığınız sayfaya yeni bir bölüm ekleyerek başlayın. Bölüm ayarlarını açın ve farklı ekran boyutlarında dolgu değerlerini değiştirin.

  • Üst dolgu: 80 piksel (masaüstü ve tablet), 0 piksel (telefon)
  • Alt doldurma: 80px
Divi parametre bölümü

Yeni bir satır ekle

Sütun yapısı

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

boyutlandırma

Daha fazla modül eklemeden, çizgi parametrelerini açın ve boyutlandırma parametrelerine aşağıdaki değişiklikleri uygulayın:

  • Özel bir oluk genişliği kullanın: Evet
  • Oluk genişliği: 1
  • Genişlik:% 90
  • Maksimum genişlik: 1580 piksel
Divi aralığı yapılandırması

aralık

Ardından özel bir üst ve alt kenar boşluğu ekleyin.

  • Üst kenar boşluğu: 200px
  • Alt kenar boşluğu: 200px
Divi satır aralığı yapılandırması

1 sütununa bir metin modülü ekleyin

H2 içeriği ekle

1. sütundaki bir metin modülünden başlayarak modüller ekleme zamanı. İstediğiniz herhangi bir H2 içeriğini girin.

Anın uzmanları tarafından sunulan hizmetlerimiz

H2 metin ayarları

Modül tasarımı sekmesine gidin ve H2 metin ayarlarını aşağıdaki şekilde değiştirin:

  • Başlık 2 Polis: Üç Aylık
  • Başlık 2 Metin boyutu: 80 piksel (masaüstü), 50 piksel (tablet), 40 piksel (telefon)
  • Kafanın 2. çizgisinin yüksekliği: 1.2em
Baş divi polisi

aralık

Ardından tablete ve telefona daha düşük bir kenar boşluğu ekleyin.

  • Alt kenar boşluğu: 50 piksel (yalnızca tablet ve telefon)
Divi metin aralığı yapılandırması

2 sütununa bir metin modülü ekleyin

İçerik ekle

İkinci sütuna geçelim. Orada ihtiyacımız olan ilk modül, bazı açıklama içeriğine sahip bir metin modülüdür.

İçerik divi metin kutusu

Metin ayarları

Modül tasarımı sekmesine geçin ve metin ayarlarını buna göre değiştirin:

  • Metin yazı tipi: kabin
  • Metin yazı tipi stili: büyük harf
  • Metin rengi: # 000000
  • Metin boyutu: 18 piksel (masaüstü), 15 piksel (tablet), 13 piksel (telefon)
  • Metin harf aralığı: 3 piksel (masaüstü), 1 piksel (tablet ve telefon)
  • Metin satırının yüksekliği: 3em
Divi metin parametresi

Sütun 2'ye ayırma modülü ekleme

görünürlük

Bu sütunda ihtiyacımız olan sonraki ve son modül bir ayırma modülüdür. "Ayırıcıyı Göster" seçeneğinin etkinleştirildiğinden emin olun.

  • Ayırıcıyı göster: Evet
Görünür bölücü

Hat

Ardından modülün çizgi rengini değiştirin.

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]

  • Çizgi rengi: # 000000
Bölücü renkli arka plan

boyutlandırma

Ardından boyutlandırma parametrelerinde bazı değişiklikler yapın.

  • Bölücü ağırlık: 3px
  • Genişlik:% 28
Divi ayırıcı boyutlandırma

aralık

Üst kenar boşluğu da ekliyoruz.

  • Üst kenar boşluğu: 10px
Divi ayırıcı modül aralığı

2. bölüm ekle

aralık

Bir sonraki normal bölüme geçelim. Bölümden varsayılan üst dolguyu kaldırın.

  • Üst dolgu: 0 piksel
Bölüm 2 divi aralığı

taşmaları

Ayrıca taşmaları gizleyin.

  • Yatay taşma: gizli
  • Dikey taşma: gizli
Divi modülü taşmalarını gizle

Yeni bir satır ekle

Sütun yapısı

Aşağıdaki sütun yapısını kullanarak ilk satırı eklemeye devam edin:

Bir divi düzeni seçin

boyutlandırma

Daha fazla modül eklemeden, çizgi parametrelerini açın, boyutlandırma parametrelerine erişin ve aşağıdaki değişiklikleri yapın:

  • Özel bir oluk genişliği kullanın: Evet
  • Oluk genişliği: 1
  • Sütun yüksekliklerini eşitle: Evet
  • Genişlik:% 90
  • Maksimum genişlik: 1580 piksel
Cilt payı yapılandırma divi bölümü

aralık

Ardından, varsayılan üst ve alt dolguların tümünü kaldırın.

  • Üst dolgu: 0 piksel
  • Alt doldurma: 0px
Divi 1 hat modülü aralık ayarları

Sütun 1 ayarları

Arka plan rengi

Ardından 1. sütunun ayarlarını açın ve arka plan rengini değiştirin.

  • Arka Plan Rengi: # f7f7f7
Divi hat modülü arka plan yapılandırması

aralık

Farklı ekran boyutlarına özel dolgu değerleri ekleyerek sütun ayarlarını tamamlayın.

  • Üst dolgu: 200 piksel (masa), 100 piksel (tablet ve telefon)
  • Alt dolgu: 200 piksel (masa), 100 piksel (tablet ve telefon)
  • Sol dolgu:% 8
  • Sağ dolgu:% 8
Satır modülü sütun ayarları

Sütun 2 ayarları

aralık

2. sütundaki ayarları açarak devam edin. Gelişmiş sekmesine gidin ve farklı ekran boyutlarında özel dolgu değerleri ekleyin.

  • Üst dolgu: 100 piksel (masaüstü), 50 piksel (tablet ve telefon)
  • Alt doldurma: 200px
  • Sol dolgu: 150 piksel (masa), 0 piksel (tablet ve telefon)
Divi modülü aralık ayarları

Sütun 1'ye ayırma modülü ekleme

görünürlük

İlk sütunda ihtiyacımız olan ilk modül bir ayırma modülüdür. "Ayırıcıyı Göster" seçeneğinin etkinleştirildiğinden emin olun.

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]

  • Ayırıcıyı göster: Evet
Divi 1 ayırıcısını göster

Hat

Ardından modülün çizgi rengini değiştirin.

  • Çizgi rengi: # 000000
Divi ayırıcı ayarları

boyutlandırma

Ayrıca boyutlandırma parametrelerinde değişiklikler yapın.

  • Bölücü ağırlık: 3px
  • Genişlik:% 50
Divi ayırıcı boyutlandırma

1 sütununa bir metin modülü ekleyin

H3 içeriği ekle

Sütun 1'de ihtiyacımız olan bir sonraki modül, H3 içeriğine sahip bir metin modülüdür.

Divi içerik bölümü ayarı

H3 metin ayarları

Modül tasarımı sekmesine geçin ve H3 metin ayarlarını değiştirin:

  • Başlık 3 Polis: Üç Aylık
  • 3. öğenin metin rengi: # 000000
  • Öğe 3 Metin boyutu: 50 piksel (masaüstü), 40 piksel (tablet), 35 piksel (telefon)
  • Kafanın 3. çizgisinin yüksekliği: 1.1em

2 sütununa bir metin modülü ekleyin

İçerik ekle

İkinci sütunda, ihtiyacımız olan ilk modül, bazı açıklama içeriğine sahip bir metin modülüdür.

Divi metin modülü ayarı

Metin ayarları

Modülün metin ayarlarını aşağıdaki gibi değiştirin:

  • Metin yazı tipi: kabin
  • Metin yazı tipi stili: büyük harf
  • Metin boyutu: 18 piksel (masaüstü), 15 piksel (tablet), 13 piksel (telefon)
  • Metin harf aralığı: 3 piksel (masaüstü), 1 piksel (tablet ve telefon)
  • Metin satırının yüksekliği: 3em
Divi metin kalıbı yazı tipi ayarı

2 sütununa bir düğme modülü ekleyin

Bir kopya ekle

İhtiyacımız olan bir sonraki ve son modül bir düğme modülü. Seçtiğiniz bir kopyasını girin.

Metin modülü içerik ayarı

Düğme ayarları

Ardından düğmeyi biçimlendirin.

  • Düğme için özel stiller kullan: Evet
  • Düğme metni boyutu: 20 piksel
  • Düğme metni rengi: #ffffff
  • Düğme arka plan rengi: # 000000
  • Düğme kenarlığı genişliği: 0 piksel
Divi düğme stili ayarı
  • Düğme Yazı Tipi: Üç Aylık
  • Düğme yazı tipi ağırlığı: kalın
Divi düğmesi renk ayarları

aralık

Ayrıca özel dolgu ekleyin.

  • Üst dolgu: 50 piksel
  • Alt doldurma: 50px
  • Sol doldurma: 100px
  • Sağ dolgu: 100 piksel
Divi modülü düğme aralığı ayarları

Pozisyon

Ve düğmeyi uygun şekilde yeniden konumlandırın:

  • Pozisyon: Mutlak
  • Yer: sol alt
Divi düğme modülü konum ayarı

Çizgiyi gerektiği kadar klonlayın

Tüm hattı ve tüm modüllerini tamamladıktan sonra, tüm hattı üç kez klonlayabilirsiniz.

Klon divi modülü

Tüm içeriği değiştir

Yinelenen satırlardaki tüm içeriği düzenlediğinizden emin olun.

Divi bölüm içeriğini düzenleyin

2. Kaydırma efektleri uygulayın

İlk satır kaydırma efektleri

Yatay hareket

Bölümünüzdeki tüm satırları tamamladıktan sonra, kaydırma efektlerini eklemenin zamanı geldi. Bölümün ilk sırasını açın ve yatay hareket ekleyin.

  • Yatay hareketi etkinleştir: Evet
  • Başlangıç ​​ofseti: -5
  • Ortalama ofset: 0 (% 26'de)
  • Bitiş ofseti: 0
  • Hareket Efekti Tetikleyicisi: Elemanın Ortası
Divi kaydırma efektleri uygulayın

İçeri ve dışarı solmaya

Ayrıca gelen ve giden bir solma efekti kullanın.

  • Solmaya giriş ve çıkışı etkinleştir: Evet
  • Başlangıç ​​opaklığı:% 100
  • Ortalama opaklık:% 100 (% 50'de)
  • Uç opaklığı:% 0 (% 53'ye kadar)
  • Hareket Efekti Tetikleyicisi: Elemanın Ortası
Soluk animasyon divi bölümünü yapılandırın

Orta sıra kaydırma efektleri

Dikey hareket

Ardından, bölümün ilk ve son satırı arasındaki tüm satırlara kaydırma efektleri ekleyeceğiz. Önce dikey bir hareket kullanın:

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

  • Dikey hareketi etkinleştir: Evet
  • Başlangıç ​​ofseti: -4
  • Ortalama ofset: 0 (% 26'de)
  • Bitiş ofseti: 0
  • Hareket tetikleme efekti: elemanın ortası
Divi kaydırma aniation yapılandırması

İçeri ve dışarı solmaya

Ayrıca içeri ve dışarı solma efektini de etkinleştirin.

  • Solmaya giriş ve çıkışı etkinleştir: Evet
  • Başlangıç ​​opaklığı:% 0
  • Ortalama opaklık:% 100 (% 27 ila% 50)
  • Bitiş ofseti: 0 (% 53'da)
  • Hareket Efekti Tetikleyicisi: Elemanın Ortası
Divi hattı solmaya animasyon

Son Satır Kaydırma Efektleri

Dikey hareket

Sonra bölümün son satırını açın ve aşağıdaki dikey hareketi ekleyin:

  • Dikey hareketi etkinleştir: Evet
  • Başlangıç ​​ofseti: -4
  • Ortalama ofset: 0 (% 26'de)
  • Bitiş ofseti: 0
  • Hareket Efekti Tetikleyicisi: Elemanın Ortası
Animasyon kaydırma divi hattı modülü

İçeri ve dışarı solmaya

Gelen ve giden solma efekti ile işiniz bitti!

  • Solmaya giriş ve çıkışı etkinleştir: Evet
  • Başlangıç ​​opaklığı:% 0
  • Ortalama opaklık:% 100 (% 27 ila% 50)
  • Uç opaklığı:% 100 (% 53'ye kadar)
  • Hareket Efekti Tetikleyicisi: Elemanın Ortası
Divi hat modülü görünüm animasyon ayarları

Nihai sonuç

Artık tüm adımları attığımıza göre, farklı ekran boyutlarında sonuca son bir göz atalım.

Nihai demo

Son düşünceler

Bu yazıda, Divi'nin kaydırma efektleri ile nasıl güzel bir hizmet geçişi oluşturacağınızı gösterdik. Bir servis kaybolmadan önce bile diğeri görünmeye başlar ve göze hoş gelen hoş bir geçiş sağlar. Bu yaklaşım, her hizmeti bireysel düzeyde vurgulamanıza yardımcı olacaktır. JSON dosyasını ücretsiz olarak da indirebilirsiniz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorumlar bölümüne yorum yapmaktan çekinmeyin.

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