Divi'nin Kaydırma Efektleriyle Sorunsuz Hizmet Geçiş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, aradıkları yalnızca belirli bir hizmet olacaktır, ancak hizmet yapınızda kolaylaştırılmış bir yol sağlarsanız, ziyaretçilerinizin hepsini işleme olasılığı daha yüksektir. Bu eğitimde size Divi'nin kaydırma efektleriyle nasıl yaratıcı olabileceğinizi ve sorunsuz bir hizmet geçişi oluşturacağınızı göstereceğiz. JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

masaüstü

Mobil

Sorunsuz Hizmet Geçiş Düzenini ÜCRETSİZ İndirin

Kesintisiz hizmet geçiş düzenine el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

1, Eleman Yapısını Yeniden Oluştur

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ındaki dolgu değerlerini değiştirin.

• Üst Dolgu: 80px (Masaüstü ve Tablet), 0px (Telefon)
• Alt Dolgu: 80px

Yeni Satır Ekle

Sütun Yapısı

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

boyutlandırma

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve boyutlandırma ayarlarına aşağıdaki değişiklikleri uygulayın:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %90
• Maksimum Genişlik: 1580 piksel

aralık

Daha sonra bazı özel üst ve alt kenar boşlukları ekleyin.

• Üst Kenar Boşluğu: 200 piksel
• Alt Kenar Boşluğu: 200 piksel

Sütun 1'e Metin Modülü Ekle

H2 İçeriği Ekle

Sütun 1'deki Metin Modülü ile başlayarak modül ekleme zamanı. Seçtiğiniz bazı H2 içeriğini girin.

H2 Metin Ayarları

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

• Başlık 2 Yazı Tipi: Görev
• Başlık 2 Metin Boyutu: 80px (Masaüstü), 50px (Tablet), 40px (Telefon)
• Başlık 2 Çizgi Yüksekliği: 1.2em

aralık

Sonraki tablet ve telefonda biraz alt kenar boşluğu ekleyin.

• Alt Kenar Boşluğu: 50px (Yalnızca Tablet ve Telefon)

Sütun 2'ye Metin Modülü Ekle

İçerik Ekle

İkinci sütuna geçin. Orada, ihtiyacımız olan ilk modül, bazı açıklama içeriğine sahip bir Metin Modülü.

Metin Ayarları

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

• Yazı Tipi: Kabin
• Metin Yazı Tipi Stili: Büyük Harf
• Metin Rengi: #000000
• Metin Boyutu: 18px (Masaüstü), 15px (Tablet), 13px (Telefon)
• Metin Harf Aralığı: 3px (Masaüstü), 1px (Tablet ve Telefon)
• Metin Satır Yüksekliği: 3em

Sütun 2'ye Bölücü Modülü Ekle

görünürlük

Bu sütunda ihtiyacımız olan sonraki ve son modül bir Bölücü Modüldür. 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

• Bölücüyü Göster: Evet

Hat

Daha sonra modülün çizgi rengini değiştirin.

• Çizgi Rengi: #000000

boyutlandırma

Ardından, boyutlandırma ayarlarında bazı değişiklikler yapın.

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

aralık

Biz de biraz üst marj ekliyoruz.

• Üst Kenar Boşluğu: 10px

2. Bölüm Ekle

aralık

Bir sonraki normal bölüme. Bölümün varsayılan üst dolgusunu kaldırın.

• Üst Dolgu: 0px

taşmalar

Taşmaları da gizleyin.

• Yatay Taşma: Gizli
• Dikey Taşma: Gizli

Yeni Satır Ekle

Sütun Yapısı

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

boyutlandırma

Henüz modül eklemeden satır ayarlarını açın, boyutlandırma ayarlarına gidin ve aşağıdaki değişiklikleri yapın:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet
• Genişlik: %90
• Maksimum Genişlik: 1580 piksel

aralık

Sonraki tüm varsayılan üst ve alt dolguyu kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Sütun 1 Ayarları

Arka plan rengi

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

• Arka Plan Rengi: #f7f7f7

aralık

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

• Üst Dolgu: 200px (Masaüstü), 100px (Tablet ve Telefon)
• Alt Dolgu: 200px (Masaüstü), 100px (Tablet ve Telefon)
• Sol Dolgu: %8
• Sağ Dolgu: %8

Sütun 2 Ayarları

aralık

Sütun 2 ayarlarını açarak devam edin. Gelişmiş sekmeye gidin ve farklı ekran boyutlarına bazı özel dolgu değerleri ekleyin.

• Üst Dolgu: 100px (Masaüstü), 50px (Tablet ve Telefon)
• Alt Dolgu: 200px
• Sol Dolgu: 150px (Masaüstü), 0px (Tablet ve Telefon)

Sütun 1'e Bölücü Modülü Ekle

görünürlük

İlk sütunda ihtiyacımız olan ilk modül bir Bölücü Modül. 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

• Bölücüyü Göster: Evet

Hat

Daha sonra modülün çizgi rengini değiştirin.

• Çizgi Rengi: #000000

boyutlandırma

Boyutlandırma ayarlarında da bazı değişiklikler yapın.

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

Sütun 1'e Metin Modülü Ekle

H3 İçeriği Ekle

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

H3 Metin Ayarları

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

• Başlık 3 Yazı Tipi: Görev
• Başlık 3 Metin Rengi: #000000
• Başlık 3 Metin Boyutu: 50px (Masaüstü), 40px (Tablet), 35px (Telefon)
• Başlık 3 Çizgi Yüksekliği: 1.1em

Sütun 2'ye Metin Modülü Ekle

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

• Yazı Tipi: Kabin
• Metin Yazı Tipi Stili: Büyük Harf
• Metin Boyutu: 18px (Masaüstü), 15px (Tablet), 13px (Telefon)
• Metin Harf Aralığı: 3px (Masaüstü), 1px (Tablet ve Telefon)
• Metin Satır Yüksekliği: 3em

Sütun 2'ye Düğme Modülü Ekle

Kopya Ekle

İhtiyacımız olan sonraki ve son modül bir Düğme Modülü. Seçtiğiniz bir kopyayı girin.

Düğme Ayarları

Sonraki düğmeyi stilleyin.

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 20px
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #000000
• Düğme Kenar Genişliği: 0px

• Düğme Yazı Tipi: Görev
• Düğme Yazı Ağırlığı: Kalın

aralık

Biraz özel dolgu da ekleyin.

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

Konum

Ve düğmeyi buna göre yeniden konumlandırın:

• Pozisyon: Mutlak
• Konum: Sol Alt

Satırı Gerektiği Kadar Kez Klonlayın

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

Tüm İçeriği Değiştir

Yinelenen satırlardaki tüm içeriği değiştirdiğinizden emin olun.

2. Kaydırma Efektlerini Uygulayın

İlk Satır Kaydırma Efektleri

Yatay Hareket

Bölümünüzdeki tüm satırları tamamladığınızda sıra kaydırma efektlerini eklemeye gelir. Bölümdeki ilk satırı açın ve biraz yatay hareket ekleyin.

• Yatay Hareketi Etkinleştir: Evet
• Başlangıç ​​Ofseti: -5
• Orta Ofset: 0 (%26'da)
• Bitiş Ofseti: 0
• Hareket Efekti Tetikleyicisi: Elemanın Ortası

İçeri ve Dışarı Soluk

Bir solma ve sönme efekti de kullanın.

• Soldurmayı ve Yavaşlamayı Etkinleştir: Evet
• Opaklığı Başlatma: %100
• Orta Opaklık: %100 (%50'de)
• Bitiş Opaklığı: %0 (%53'te)
• Hareket Efekti Tetikleyicisi: Elemanın Ortası

Orta Satır Kaydırma Efektleri

Dikey Hareket

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

• Dikey Hareketi Etkinleştir: Evet
• Başlangıç ​​Ofseti: -4
• Orta Ofset: 0 (%26'da)
• Bitiş Ofseti: 0
• Hareket Tetikleme Etkisi: Öğenin Ortası

İçeri ve Dışarı Soluk

Bir solma ve sönme efektini de etkinleştirin.

• Soldurmayı ve Yavaşlamayı Etkinleştir: Evet
• Opaklığı Başlatma: %0
• Orta Opaklık: %100 (%27'den %50'ye)
• Bitiş Ofseti: 0 (%53'te)
• Hareket Efekti Tetikleyicisi: Elemanın Ortası

Son Satır Kaydırma Efektleri

Dikey Hareket

Ardından, bölümdeki son satırı açın ve aşağıdaki dikey hareketi ekleyin:

• Dikey Hareketi Etkinleştir: Evet
• Başlangıç ​​Ofseti: -4
• Orta Ofset: 0 (%26'da)
• Bitiş Ofseti: 0
• Hareket Efekti Tetikleyicisi: Elemanın Ortası

İçeri ve dışarı solma

Bir solma efekti ile birlikte ve bitirdiniz!

• Soldurmayı ve Yavaşlamayı Etkinleştir: Evet
• Opaklığı Başlatma: %0
• Orta Opaklık: %100 (%27'den %50'ye)
• Bitiş Opaklığı: %100 (%53'te)
• Hareket Efekti Tetikleyicisi: Elemanın Ortası

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

masaüstü

Mobil

Son düşünceler

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

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.