Hakkında sayfanızı oluştururken, muhtemelen orada ekip üyelerinizi de tanıtmak isteyeceksiniz. Bunu yaparak, ziyaretçi işinizin arkasındaki insanlarla etkileşime geçin. Ekip üyelerinizin bölümünü kaydırmada canlandırmanın bir yolunu arıyorsanız, bu öğreticiyi yararlı bulabilirsiniz. Siz hareket ettiğinizde hareket eden, otomatik kayan bir ekip üyesi döngüsü oluşturacağız. ziyaretçi sayfayı kaydır 

gösteri

Eğiticiye geçmeden önce, farklı ekran boyutlarında sonuca bir göz atalım.

Divi takım üyesini kaydır

Gebe kalmanın başlangıcı

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 özel dolgu ekleyin.

  • Üst dolgu: 200 piksel (masa), 100 piksel (tablet ve telefon)
  • Alt dolgu: 200 piksel (masa), 100 piksel (tablet ve telefon)
Parametre yapılandırması

taşmaları

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

  • Yatay taşma: gizli
  • Dikey taşma: gizli
Taşma yapılandırması

1 numaralı satır ekle

Sütun yapısı

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

Divi düzenini seçin

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şliği ve maksimum genişliği değiştirin.

  • Genişlik:% 90
  • Maksimum genişlik: 1580 piksel
Divi hattı parametresi

aralık

Ayrıca özel üst ve alt dolgu ekliyoruz.

  • Üst dolgu: 100 piksel
  • Alt doldurma: 100px
Satır aralığı divi yapılandırması

Sütuna metin modülü ekleme

H2 içeriği ekle

İlk metin modülünden başlayarak modül ekleme zamanı geldi. Girin içindekiler H2 sizin seçiminiz.

Ekiple tanış

H2 metin ayarları

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

  • Yazı tipi başlığı 2: Quicksand
  • Yazı tipi başlığı 2: yarı kalın
  • 2. öğenin metin rengi: # 000000
  • Başlık 2 Metin boyutu: 70 piksel (masaüstü), 50 piksel (tablet), 40 piksel (telefon)
Divi metin aralığı

Sütuna bir ayırma modülü ekleme

görünürlük

Ardından bir ayırma modülü ekleyin. "Ayırıcıyı Göster" seçeneğinin etkinleştirildiğinden emin olun.

  • Ayırıcıyı göster: Evet
Divi ayırıcısını göster

Hat

Ardından hat ayarlarında bazı değişiklikler yapın.

  • Çizgi rengi: # edf000
  • Çizgi stili: düz
  • Çizgi Konumu: Üst
Divi aralığı stili

boyutlandırma

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

  • Bölücü ağırlık: 20px
  • Genişlik:% 11
  • Modülün hizalanması: sol
  • Yükseklik: 20px
Divi hat modülünün boyutlandırılması

Satır # 2 ekle

Sütun yapısı

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

Divi sütun yapılandırması

boyutlandırma

Daha fazla modül eklemeden, çizgi parametrelerini açın ve boyutlandırma parametrelerini aşağıdaki gibi değiştirin:

  • Özel bir oluk genişliği kullanın: Evet
  • Oluk genişliği: 2
  • Genişlik:% 100
  • Maksimum genişlik:% 100
Cilt payı genişliği yapılandırması

aralık

Ardından, yalnızca daha küçük ekranlara sol ve sağ dolgu ekleyin.

  • Sol dolgu:% 5 (yalnızca tablet ve telefon)
  • Sağ dolgu:% 5 (yalnızca tablet ve telefon)
Satır aralığı stili yapılandırması

Sütun parametreleri (5x)

Şimdi, bu eğitimin sonraki üç adımında, sütunlarda bazı değişiklikler yapacağız. Üç adımı sıranızdaki sütunların her birine uygulayın.

Divi parametre hattı yapılandırması

Gradyan arka planı

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

  • 1 renk: rgba (255,255,255,0)
  • 2 renk: rgba (0,0,0,0,84)
  • Gradyan türü: doğrusal
  • Başlama Konumu:% 25
  • Bitiş Pozisyonu:% 86
  • Gradyanı arka plan resminin üzerine yerleştirin: Evet
Divi arka sütun yapılandırması

Arka plan resmi

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

  • Arka Plan Resim Boyutu: Kapak
  • Arka plan resminin konumu: Merkez
Divi sütun arka plan resmi ekle

Ana eleman

Her bir sütunun ana tablet öğesine özel CSS ekleyerek sütun ayarlarını tamamlayın. Bu CSS kodu satırları, iki yan yana yerleştirmek yerine, sütunları tablette üst üste yerleştirmemize yardımcı olacaktır.

genişlik:% 100! önemli; kenar boşluğu: 50px 0px 50px 0px! önemli;
Kod css divi sütunu

Sütuna kişi modülü ekleme

İçerik ekle

Ekip üyeleri hakkında bilgi paylaşmak için Person modülünü kullanacağız. Birinci Kişi modülünü 1. sütuna ekleyin ve içindekiler De Chore Choix.

Divi kişi adı

Resmi Sil

Ardından görüntüyü silin. Bunun yerine sütunun arka plan resmini kullanıyoruz.

Divi görüntüsünü kaldır

Arka plan resmi

Daha sonra, modülün arka plan görüntüsü olarak bir görüntü bindirmesi ekleyeceğiz. Kullandığımız dosyayı, bu eğitimin başındaki klasörü indirerek bulabilirsiniz.

  • Arka Plan Resim Boyutu: Kapak
  • Arka plan resminin konumu: Merkez
Kişi modülü arka plan yapılandırması

Başlık metni ayarları

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

  • Başlık seviyesi: H3
  • Başlık yazı tipi: Quicksand
  • Başlık yazı tipi ağırlığı: kalın
  • Başlık metni rengi: #ffffff
  • Başlık metni boyutu:% 230
Divi modülü başlık özelleştirme

Gövde metni ayarları

Ayrıca 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,2 em
Divi gövde özelleştirme

Metin ayarlarını konumlandırma

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

  • Yazı Tipi Konumu: Açık Sans
  • Metin rengini konumlandır: # edf000
Divi konumu

aralık

Ve aralık ayarlarına özel dolgu değerleri ekleyerek modül ayarlarını tamamlayın.

  • Üst dolgu:% 70
  • Alt dolgu:% 10
  • Sol dolgu:% 10
  • Sağ dolgu:% 10
Divi kişi modülü aralığı

Kişi modülünü 4 kez çoğaltın

Kişi modülünü tamamladıktan sonra, tüm modülü dört kez klonlayabilirsiniz.

Geri kalan sütunlara kopyalar yerleştirin

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

Kullanıcı listesini özelleştir

Satırı Otomatik Kaydırma Karuseline Dönüştür

Satır # 2'nin boyutunu değiştirme

Şimdi bu satırı otomatik kaydırılan 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şliği ve maksimum genişliği değiştirmemiz gerekiyor.

  • Genişlik:% 180
  • Maksimum genişlik:% 220 (masa),% 100 (tablet ve telefon)
Satır divi değişiklik aralığı

2 numaralı satırın yatay hareketini ekleyin

Gelişmiş sekmedeki kaydırma efekti ayarlarına yatay hareket ekleyerek çizgi ayarlarını tamamlayın ve bitirdiniz!

  • Yatay hareketi etkinleştir: Evet
  • Başlangıç ​​ofseti:
    • Ofis: 2,5
    • Tablet ve telefon: 0
  • Ortalama ofset: 0 (% 40'de)
  • Bitiş ofseti:
    • Ofis: -25 (% 62'de)
    • Tablet ve telefon: 0
  • Hareket Efekti Tetikleyicisi: Elemanın Ortası
Divi kaydırma animasyonu yapılandırması

anket

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

ofis

Divi takım üyesini kaydır

Son düşünceler

Bu eğitimde, yerleşik kaydırma efektleriyle nasıl yaratıcı olabileceğinizi gösterdik. Divi. Özellikle, güzel bir otomatik kaydırmalı ekip üyesi atlıkarıncasını yeniden yarattık. Ne zaman ziyaretçi sayfayı kaydırdığınızda atlıkarıncanın başka bir kısmı görünür.