Ekip üyelerinizin bir atlıkarınca şeklinde sunulmasını ister misiniz? Divi ?
Hakkında sayfanızı oluştururken, muhtemelen ekip üyelerinizi de buraya dahil etmek isteyeceksiniz. Bunu yaparak, izin verirsiniz ziyaretçi işinizin arkasındaki insanlarla bağlantı kurmak için.
Takım üyelerinizin bölümlerini kaydırmada canlandırmanın bir yolunu arıyorsanız, bu öğreticiyi seveceksiniz.
Sizin gibi hareket eden güzel bir otomatik kaydırmalı ekip üyesi atlıkarıncasını yeniden yaratacağız. ziyaretçi sayfayı kaydır
Gidelim.
anket
Öğreticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.
Masaüstü bilgisayar
Mobil sürümü
Divi ile tasarlamaya başlayalım
Ayrıca Oku: Divi: Bölüm ayırıcının üzerine gelindiğinde içerik nasıl ortaya çıkar?
Yeni bölüm ekle
Dahili Büyücüler
Ü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.
- Dolgu (Üst ve Alt): 200px (Masaüstü), 100px (Tablet ve Telefon)
görünürlük
Tasarımımızda yatay kaydırma çubuklarının görünmemesini sağlamak 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ütunun yapısı
Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyerek devam edin:
Genişlik
Henüz herhangi bir modül eklemeden hat ayarlarını açın, sekmeye geçin Dizayn ve boyutlandırma ayarlarında genişliği ve maksimum genişliği değiştirin.
- Genişlik: %90
- Maksimum Genişlik: 1 piksel
aralık
Ayrıca özel üst ve alt dolgu ekliyoruz.
- Dolgu (Üst ve Alt): 100 piksel
Sütuna bir Metin modülü ekleyin
H2 boyutunda içerik ekle
İlk Metin modülünden başlayarak modül ekleme zamanı geldi. Gir içindekiler H2 boyutu sizin seçiminiz.
H2 metin ayarları
Sekmeye geç Dizayn modülü seçin ve H2 metin parametrelerini aşağıdaki gibi değiştirin:
- Yazı Tipi: Bataklık
- Yazı Ağırlığı: Yarı Kalın
- Metin Rengi: #000000
- Metin Boyutu: 70px (Masaüstü), 50px (Tablet), 40px (Telefon)
Sütuna bir "Bölücü" modülü ekleyin
görünürlük
Ardından bir modül ekleyin bölen. “Bölücüyü Göster” seçeneğinin etkinleştirildiğinden emin olun.
- Bölücüyü Göster: EVET
Hat
Ardından hat ayarlarında bazı değişiklikler yapın.
- Çizgi Rengi: #edf000
- stil: Katı
- Çizgi Konumu: Üst
Boyutlandırma
Ve boyutlandırma parametrelerini uygun şekilde değiştirerek modül parametrelerini tamamlayın:
- Bölücü Ağırlığı: 20px
- Genişlik: %11
- Hizalama modülü: sol
- Yükseklik: 20 piksel
2. satırı ekle
Sütunun yapısı
Sonraki sıra! 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
Boşluk (Yalnızca Tablet ve Telefon)
Ardından, yalnızca küçük ekran boyutlarına sol ve sağ dolgu ekleyin.
- Dolgu (Sol ve Sağ): %5 (Yalnızca Tablet ve Telefon)
Sütun parametreleri (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ı uygulayın.
Arka Plan Gradyanı
İlk olarak, her sütuna bir degrade arka planı ekleyin.
- Gradyan Durakları (%25): rgba(255,255,255,0)
- Gradyan Durakları (%86): rgba(0,0,0,0.84)
- Tür: Doğrusal
- Arka Plan Resminin Üzerinde Kare Gradyan: EVET
Arka plan görüntüsü
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 Resmi Boyutu : Kapak
- Arka Plan Resmi Konumu: Merkez
Özel CSS Eklendi (Yalnızca Tablet)
Ana öğeye özel CSS ekleyerek sütun ayarlarını tamamlayın (Görünüm için Tablet yalnızca) her sütunun.
Bu CSS kod satırları, sütunları yan yana koymak yerine tablette alt alta yerleştirmemize yardımcı olacaktır.
width: 100% !important;
margin: 50px 0px 50px 0px !important;
Sütuna bir 'Kişi' modülü ekleyin
İçerik ekle
Ekip üyesi bilgilerini paylaşmak için bir modül kullanacağız Kişi.
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ırız.
Arka plan görüntüsü
Ardından, modülün arka plan görüntüsü olarak bir görüntü yerleşimi ekleyeceğiz.
- Arka Plan Resmi Boyutu: Kapak
- Arka plan resmi konumu: merkez
Başlık metni ayarları
Sekmeye geç Dizayn modülünü seçin 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
- Yazı Ağırlığı: Kalın
- Başlık Metin Rengi: #ffffff
- Başlık Metin Boyutu: %230
Gövde metni ayarları
Ayrıca gövde metni ayarlarını da değiştirin.
- Gövde Yazı Tipi: Açık Sans
- Metin Rengi: #ffffff
- Satır Yüksekliği: 2,2 em
Ekip üyesi konumu metin ayarları
Ardından, ekip üyesi tarafından tutulan pozisyonun metin ayarlarında bazı değişiklikler yapın.
- Pozisyon Yazı Tipi: Açık Yok
- Konum Metni Rengi: #edf000
aralık
Ve aralık ayarlarına özel dolgu değerleri ekleyerek modül ayarlarını tamamlayın.
- Dolgu: %70 (Üst), %10 (Alt, Sol ve Sağ)
“Kişi” modülünü dört kez klonlayın
Kişi modülünü tamamladıktan sonra, tüm modülü dört kez klonlayabilirsiniz.
Kopyaları kalan sütunlara yerleştirin
Satırın kalan dört sütununa kopya modülleri yerleştirin.
Ayrıca değiştirdiğinizden emin olun. içindekiler.
Bir satırı otomatik kaydırmalı atlıkarınca haline getirin
Ayrıca bakınız: Divi: Fareyle üzerine gelindiğinde bir akışkan sütun ızgarası nasıl oluşturulur
2. satır boyutunu değiştir
Şimdi, bu çizgiyi otomatik kaydırmalı bir atlıkarıncaya dönüştürmek için, çizgi 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ıra yatay hareket ekle
Sekmede efekt ayarlarını kaydırmak için yatay hareket ekleyerek çizgi ayarlarını tamamlayın gelişmiş seçenek altında Kaydırma Efektleri ve işin bitti!
- Yatay Hareketi Etkinleştir: Evet
- Başlangıç Ofseti:
- Masaüstü: 2,5
- Tablet & Telefon: 0
- Orta Ofset: 0 (ila %40)
- Bitiş Ofseti:
- Masaüstü: -25 (%62'ye kadar)
- Tablet & 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.
Masaüstü bilgisayar
DIVI'yı Şimdi İndirin !!!
Mobil görünüm
DIVI'yı Şimdi İndirin !!!
Sonuç
Bu makalede, yerleşik kaydırma efektleriyle nasıl yaratıcı olabileceğinizi gösterdik. Divi.
Özellikle, otomatik kaydırma yapan ekip üyelerini içeren güzel bir atlıkarıncayı 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.
Bu eğitimin sonraki projeleriniz için size ilham vereceğini umuyoruz. Divi. Herhangi bir endişeniz veya öneriniz varsa, bizi yorumlar bölümü bunu tartışmak için.
Ayrıca danışabilirsiniz kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa.
Rehberimize de danışmaktan çekinmeyin. WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.
Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.
...