Hizmetler sayfanızı tasarlarken, ziyaretçi sağladığınız tüm farklı hizmetleri fark edin. Çoğu durumda, aradıkları yalnızca belirli bir hizmet olacaktır, ancak hizmet yapınızda kolaylaştırılmış bir yol sağlarsanız, ziyaretçi hepsiyle ilgilen. 

Bu eğitimde, size aşağıdaki kaydırma efektleriyle nasıl yaratıcı olunacağını göstereceğiz. Divi ve sorunsuz bir hizmet geçişi oluşturun. Ayrıca JSON dosyasını ücretsiz olarak indirebileceksiniz!

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 metin modülünden başlayarak modül ekleme zamanı geldi. içindekiler H2 sizin seçiminiz.

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 belirli özelliklere sahip bir metin modülüdür. içindekiler Tanım.

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

  • Ç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.

  • 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

1. sütunda ihtiyacımız olan bir sonraki modül, aşağıdakileri içeren bir metin modülüdür: içindekiler H3.

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
Divi tasarım tırnak ayarı

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:

  • 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ımızda, kaydırma efektleriyle güzel bir servis geçişinin nasıl oluşturulacağını gösterdik. Divi. 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 bir hizmeti bireysel düzeyde öne çıkarmanıza yardımcı olacaktır. Ayrıca JSON dosyasını ücretsiz olarak indirebildiniz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin.