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.
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)
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
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:
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
aralık
Ayrıca özel üst ve alt dolgu ekliyoruz.
- Üst dolgu: 100 piksel
- Alt doldurma: 100px
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.
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)
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
Hat
Ardından hat ayarlarında bazı değişiklikler yapın.
- Çizgi rengi: # edf000
- Çizgi stili: düz
- Çizgi Konumu: Üst
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
Satır # 2 ekle
Sütun yapısı
Bir sonraki sıraya! Aşağıdaki sütun yapısını kullanın:
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
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)
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.
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
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
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;
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.
Resmi Sil
Ardından görüntüyü silin. Bunun yerine sütunun arka plan resmini kullanıyoruz.
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
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
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
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
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
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.
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)
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ı
anket
Artık tüm adımları attığımıza göre, farklı ekran boyutlarında sonuca son bir göz atalım.
ofis
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.