Divi's Scroll Efektleriyle Yapılmış ÜCRETSİZ Kendiliğinden Kaydırılan Ekip Üyeleri Döngülerini İndirin

Hakkında sayfanızı kurarken, büyük olasılıkla ekip üyelerinizi de orada öne çıkarmak isteyeceksiniz. Bunu yaparak, ziyaretçilerinizin şirketinizin arkasındaki kişilerle bağlantı kurmasına izin verirsiniz. Takım üyesi bölümünüzü kaydırmada canlandırmanın bir yolunu arıyorsanız, bu öğreticiyi seveceksiniz. Ziyaretçileriniz sayfayı aşağı kaydırırken hareket eden güzel bir kendi kendine kayan ekip üyesi atlıkarıncasını yeniden oluşturacağız. 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

Ekip Üyesi Dönen Düzeni ÜCRETSİZ İndirin

Ellerinizi ücretsiz ekip üyesi atlıkarınca düzenine 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.

Yeniden Yaratmaya Başlayalım!

Yeni Bölüm Ekle

aralık

Üzerinde çalıştığınız sayfaya yeni bir normal bölüm ekleyerek başlayın. Bölüm ayarlarını açın ve farklı ekran boyutlarına bazı özel dolgular ekleyin.

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

taşmalar

Tasarımımızda yatay kaydırma çubuğunun görünmediğinden emin olmak için gelişmiş sekmesinde bölüm taşmalarını gizleyeceğiz.

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

1. Satır Ekle

Sütun Yapısı

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

boyutlandırma

Henüz herhangi bir modül eklemeden, satır ayarlarını açın, tasarım sekmesine geçin ve boyutlandırma ayarlarında genişlik ve maksimum genişliği değiştirin.

• Genişlik: %90
• Maksimum Genişlik: 1580 piksel

aralık

Bazı özel üst ve alt dolgular da ekliyoruz.

• Üst Dolgu: 100 piksel
• Alt Dolgu: 100px

Sütuna Metin Modülü Ekle

H2 İçeriği Ekle

İlk Metin Modülünden 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: Bataklık
• Başlık 2 Yazı Ağırlığı: Yarı Kalın
• Başlık 2 Metin Rengi: #000000
• Başlık 2 Metin Boyutu: 70px (Masaüstü), 50px (Tablet), 40px (Telefon)

Sütuna Ayırıcı Modül Ekle

görünürlük

Ardından, bir Bölücü Modül ekleyin. 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

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

Hat

Sonraki satır ayarlarında bazı değişiklikler yapın.

• Çizgi Rengi: #edf000
• Çizgi Stili: Katı
• Çizgi Konumu: Üst

boyutlandırma

Ve boyutlandırma ayarlarını uygun şekilde değiştirerek modül ayarlarını tamamlayın:

• Bölücü Ağırlığı: 20px
• Genişlik: %11
• Modül Hizalama: Sol
• Yükseklik: 20 piksel

2. Satır Ekle

Sütun Yapısı

Bir sonraki sıraya! Aşağıdaki sütun yapısını kullanın:

boyutlandırma

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

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 2
• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Ardından, yalnızca daha küçük ekran boyutlarına biraz sol ve sağ dolgu ekleyin.

• Sol Dolgu: %5 (Yalnızca Tablet ve Telefon)
• Sağ Dolgu: %5 (Yalnızca Tablet ve Telefon)

Sütun Ayarları (5x)

Şimdi, bu öğreticinin sonraki üç adımında sütunlarda bazı değişiklikler yapacağız. Satırınızdaki sütunların her birine üç adımı da uygulayın.

Degrade Arka Plan

İlk olarak, her sütuna bir degrade arka planı ekleyin.

• Renk 1: rgba(255,255,255,0)
• Renk 2: rgba(0,0,0,0.84)
• Gradyan Türü: Doğrusal
• Başlangıç ​​Konumu: %25
• Bitiş Konumu: %86
• Gradyanı Arka Plan Resminin Üstüne Yerleştir: Evet

Arka plan görüntüsü

Ardından, seçtiğiniz bir arka plan resmini yükleyin. Bu arka plan resmi, her bir ekip üyesini temsil eder, bu nedenle her sütun için farklı bir resim kullanın.

• Arka Plan Resmi Boyutu: Kapak
• Arka Plan Resmi Konumu: Merkez

Ana Eleman

Her sütunun tabletin ana öğesine bazı özel CSS ekleyerek sütun ayarlarını tamamlayın. Bu CSS kod satırları, sütunları yan yana iki sütun yerine tablette alt alta yerleştirmemize yardımcı olacaktır.

width: 100% !important;
margin: 50px 0px 50px 0px !important;

Sütuna Kişi Modülü Ekle

İçerik Ekle

Ekip üyesi bilgilerini paylaşmak için bir Kişi Modülü kullanacağız. İlk Kişi Modülünü sütun 1'e ekleyin ve seçtiğiniz içeriği kullanın.

Resmi Kaldır

Ardından, görüntüyü kaldırın. Bunun yerine sütun arka plan resmini kullanıyoruz.

Arka plan görüntüsü

Ardından modülün arka plan görüntüsü olarak bir görüntü katmanı ekleyeceğiz. Bu öğreticinin başındaki klasörü indirerek kullandığımızı bulabilirsiniz.

• Arka Plan Resmi Boyutu: Kapak
• Arka Plan Resmi Konumu: Merkez

Başlık Metni Ayarları

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

• Başlık Başlık Düzeyi: H3
• Başlık Yazı Tipi: Bataklık
• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Metin Rengi: #ffffff
• Başlık Metin Boyutu: %230

Gövde Metni Ayarları

Gövde metni ayarlarını da değiştirin.

• Gövde Yazı Tipi: Açık Sans
• Gövde Metni Rengi: #ffffff
• Gövde Çizgisi Yüksekliği: 2.2em

Konum Metni Ayarları

Ardından, konum metni ayarlarında bazı değişiklikler yapın.

• Pozisyon Yazı Tipi: Açık Sans
• Konum Metni Rengi: #edf000

aralık

Ve boşluk ayarlarına bazı özel dolgu değerleri ekleyerek modül ayarlarını tamamlayın.

• Üst Dolgu: %70
• Alt Dolgu: %10
• Sol Dolgu: %10
• Sağ Dolgu: %10

Klon Kişi Modülü 4x

Kişi Modülünü tamamladığınızda, tüm modülü dört kez kopyalayabilirsiniz.

Kopyaları Kalan Sütunlara Yerleştirin

Yinelenen modülleri satırın kalan dört sütununa yerleştirin. İçeriği de değiştirdiğinizden emin olun.

Satırı Kendinden Kaydıran Atlıkarıncaya Dönüştürün

2. Satır Boyutlandırmasını Değiştir

Şimdi, bu satırı kendi kendine kayan bir ekip üyesi atlıkarıncasına dönüştürmek için, satır ayarlarını yeniden açmamız ve boyutlandırma ayarlarında genişlik ve maksimum genişliği değiştirmemiz gerekecek.

• Genişlik: %180
• Maksimum Genişlik: %220 (Masaüstü), %100 (Tablet ve Telefon)

2. Satır Ekle Yatay Hareket

Gelişmiş sekmesindeki kaydırma efekti ayarlarına biraz yatay hareket ekleyerek satır ayarlarını tamamlayın ve işiniz bitti!

• Yatay Hareketi Etkinleştir: Evet
• Başlangıç ​​Ofseti:
  • Masaüstü: 2.5
  • Tablet & Telefon: 0
• Orta Ofset: 0 (%40'ta)
• Bitiş Ofseti:
  • Masaüstü: -25 (%62'de)
  • Tablet & Telefon: 0
• 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 yerleşik kaydırma efektleriyle nasıl yaratıcı olabileceğinizi gösterdik. Daha spesifik olarak, güzel bir kendi kendine kayan ekip üyesi atlıkarıncasını yeniden yarattık. Ziyaretçiler sayfayı aşağı kaydırdıkça, atlıkarıncanın farklı bir kısmı görünü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.