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

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.

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

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

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

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.

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

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)

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.

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

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

Hat

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

• Çizgi rengi: # 000000

boyutlandırma

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

• Bölücü ağırlık: 3px
• Genişlik:% 28

aralık

Üst kenar boşluğu da ekliyoruz.

• Üst kenar boşluğu: 10px

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

taşmaları

Ayrıca taşmaları gizleyin.

• Yatay taşma: gizli
• Dikey taşma: gizli

Yeni bir satır ekle

Sütun yapısı

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

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

aralık

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

• Üst dolgu: 0 piksel
• Alt doldurma: 0px

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

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

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)

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.

• Ayırıcıyı göster: Evet

Hat

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

• Çizgi rengi: # 000000

boyutlandırma

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

• Bölücü ağırlık: 3px
• Genişlik:% 50

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.

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.

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

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.

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

• Düğme Yazı Tipi: Üç Aylık
• Düğme yazı tipi ağırlığı: kalın

aralık

Ayrıca özel dolgu ekleyin.

• Üst dolgu: 50 piksel
• Alt doldurma: 50px
• Sol doldurma: 100px
• Sağ dolgu: 100 piksel

Pozisyon

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

• Pozisyon: Mutlak
• Yer: sol alt

Çizgiyi gerektiği kadar klonlayın

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

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

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

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ı

İç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ı

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:

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

İç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ı

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ı

İç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ı

Nihai sonuç

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

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.