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.
