Sayfanızda birden çok harekete geçirici mesaj gösterilirken, farklı öğeleri birleştiren etkileşimli bir kaydırma efekti oluşturmak faydalı olabilir. Çözümlerden biri, modülleri kolon konteynerlerinde hareket ederken sabit elemanlara dönüştürmektir. Bugünün eğitiminde, size bu tekniği kullanan güzel bir tasarımın nasıl oluşturulacağını göstereceğiz. Ayrıca JSON dosyasını ücretsiz olarak indirebileceksiniz!
Gidelim.
anket
Eğiticiye geçmeden önce, farklı ekran boyutlarıyla nasıl çalıştığına son bir göz atalım.
Rekreasyona başlayalım!
Yeni bölüm ekle
Üzerinde çalıştığınız sayfaya düzenli bir bölüm ekleyerek başlayın.
aralık
Bölüm ayarlarını açın ve farklı ekran boyutları için alt ve üst kenar boşluklarını değiştirin.
- Döşeme üstü: 7vw (masaüstü), 10vw (tablet), 15vw (telefon)
- Altta Döşeme: 20vw (masaüstü), 7vw (tablet), 10vw (telefon)
Yeni bir satır ekle
Sütun yapısı
Aşağıdaki sütun yapısını kullanarak yeni bir satır eklemeye devam edin:
boyutlandırma
Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve bölümün tüm genişliğini kaplamasına izin verin. o da çok önemli 'Sütun Yüksekliklerini Eşitle' seçeneğini etkinleştirin. Bunu yaparak, sabit modüllerin sayfayı kaydırırken serbestçe hareket etmesini sağlayacak şekilde sütunlarda boş alan oluşturacaksınız.
- Özel bir oluk genişliği kullanın: Evet
- Oluk genişliği: 1
- Sütun yüksekliklerini eşitle: Evet
- Genişlik:% 100
- Maksimum genişlik:% 100
Kolon 2 Üst Dolgu
Ardından, 2 sütununun ayarlarını açın ve masaüstüne bir miktar üst dolgu ekleyin.
- Üst dolgu: 20vw (masaüstü), 0vw (tablet ve telefon)
Kolon 3 Üst Dolgu
Ayrıca üçüncü sütuna özel bir üst dolgu değeri ekleyin.
- En iyi dolgu malzemesi: 40vw (masaüstü), 0vw (tablet ve telefon)
Kolon 4 Üst Dolgu
Ayrıca, 4 sütununa daha yüksek bir dolgu değeri ekleyerek satırın parametrelerini tamamlayın.
- Üst dolgu: 60vw (masaüstü), 0vw (tablet ve telefon)
1 sütununa CTA ekle
İçerik ekle
Modül eklemeye başlamanın zamanı geldi! 1. sütunda ihtiyacımız olan ilk modül bir CTA (Harekete Geçirici Mesaj) modülüdür. Sokmak içindekiler De Chore Choix.
Ihtiyati haciz
Ayrıca düğmeye bir bağlantı ekleyin. Bu, düğmenin tasarımda görüntülenmesine izin verecektir.
- Düğmenin bağlantısının URL’si: #
Arka plan rengi
Ardından modülün arka plan rengini değiştirin.
- Arka plan rengi: #ffffff
Metin ayarları
Tasarım sekmesine geçin ve genel metin ayarlarını değiştirin.
- Metnin hizalanması: orta
- Metin rengi: koyu
Başlık metni ayarları
Ayrıca başlığın metin ayarlarını da değiştirin.
- Başlık Başlık Seviyesi: H3
- Metin Başlığı: Spektral
- Renk metni: # 000000
- Metin Başlığı Boyutu: 2vw (masaüstü), 4vw (tablet), 6vw (telefon)
Gövde metni ayarları
Metin gövdesinin parametreleri ile.
- Gövde Yazı Tipi: Fira Sans
- Yazı tipinin ağırlığı: Işık
- Gövde renkli metin: # 000000
- Gövde metin boyutu: 1vw (masaüstü), 2vw (tablet), 3vw (telefon)
- Gövde yüksekliği: 1.8em
Düğme ayarları
CTA modül düğmenize de stil vermeyi unutmayın.
- Düğme için özel stiller kullan: Evet
- Düğme metni boyutu: 1vw (masaüstü), 2vw (tablet), 3vw (telefon)
- Düğme metni rengi: #ffffff
- Düğme arka plan rengi: #444eff
- Düğme kenarlığının genişliği: 0px
- Düğmenin kenarlığının yarıçapı: 50vw
- Düğme Yazı Tipi: Fira Sans
- Üst dolgu: 1vw (masaüstü), 2vw (tablet), 3vw (telefon)
- Altta Döşeme: 1vw (masaüstü), 2vw (tablet), 3vw (telefon)
- Sol doldurma: 3vw (masaüstü), 7vw (tablet), 13vw (telefon)
- Sağdaki Döşeme: 3vw (masaüstü), 7vw (tablet), 13vw (telefon)
aralık
Ardından aralık ayarlarına gidin ve özel iç ve alt kenar boşlukları ekleyin.
- Üst Dolgu: 8vw
- Alt doldurma: 8vw
Sınır
Ayrıca, modüle yuvarlatılmış açılar ekleyin.
- Yuvarlak köşeler: 1vw (tüm köşeler)
Gölge kutusu
İnce bir kutu gölgesi ekleyerek modül tasarımını bitirin.
- Kutunun Gölgesi Yatay Konum: 10px
- Kutu Gölge Bulanıklığı Gücü: 50px
- Gölge rengi: rgba (0,0,0,0,08)
CSS sınıfı
Şimdi, yapışkan kaydırma efektinin çalışması için, bu eğitimin sonuna birkaç satır CSS kodu eklememiz gerekecek. Hazırlık olarak, CTA modülüne bir CSS sınıfı ekleyeceğiz.
- CSS sınıfı: yapışkan-cta
1. sütuna bir görüntü modülü ekleyin
Fotoğraf yükleniyor
Bir görüntü modu olan 1. sütunda ihtiyacımız olan bir sonraki ve son moda geçelim. Seçtiğiniz bir PNG resmini yükleyin.
hizalanma
Daha sonra görüntü hizalamasını değiştirin.
- Görüntü Hizalama: Merkez
boyutlandırma
Modül üzerindeki tüm genişliği de zorladığınızdan emin olun.
- Tam Genişliği Zorla: Evet
aralık
Aralık ayarlarına gidip farklı ekran boyutları için özel aralık değerleri ekleyerek modül ayarlarını tamamlayın.
- Üst kenar boşluğu: -5vw (tablet ve telefon)
- Alt kenar boşluğu: -12vw (masaüstü), 5vw (tablet ve telefon)
- Sol doldurma: 3vw (masaüstü), 10vw (tablet), 25vw (telefon)
- Sağdaki Döşeme: 3vw (masaüstü), 10vw (tablet), 25vw (telefon)
İki modülü üç kez klonlayın ve kalan sütunları yerleştirin
Her iki modülü de 1 sütununda tamamladıktan sonra, bunları üç kez çoğaltabilir ve kopyaları satırın kalan sütunlarına yerleştirebilirsiniz.
Görüntüleri Değiştir
Her bir yinelenen görüntü modülündeki görüntüyü değiştirdiğinizden emin olun.
CTA'nın içeriğini ve düğmelerin arka plan renklerini değiştirin
Ayrıca değiştir içindekiler Düğme arka plan renklerine sahip CTA.
- CTA Modülü #2: #89ffb4
- CTA Modülü #3: #ff89f1
- CTA Modülü #4: #ffd389
1., 2. ve 3. sütunlarda resim modüllerine CSS sınıfı ekleyin
Şimdi, yapışkan efektin resimler üzerinde de çalıştığından emin olmak için, 1., 2. ve 3. sütunlardaki resim modüllerine bir CSS sınıfı eklememiz gerekecek.
- CSS sınıfı: yapışkan görüntü
2 satırını ekle
Sütun yapısı
Geriye kalan tek şey CSS kodunu eklemektir. Bunu yapmak için yeni bir satır ekleyin.
CSS kodlu bir kod modülü ekleyin
Satıra bir kod modülü ekleyin, aşağıdaki CSS kodunu ekleyin ve işlem tamamdır!
<style>@media only screenand (min-width: 980px) {.sticky-cta {position: sticky;position: -webkit-sticky;top: 8vw !important;}.sticky-image {position: sticky;position: -webkit-sticky;top: 28vw !important;}}</style>
anket
Artık tüm adımlar atıldığına göre, farklı ekran boyutlarında neler olduğuna son bir göz atalım.
Son düşünceler
Bu makalede, modüllerin sütun kaplarında nasıl sabit tutulacağını gösterdik. Bu tekniği kullanmak, sayfanızdaki farklı eylem çağrılarını vurgulamanıza olanak tanıyan çarpıcı kaydırma efektleri oluşturabilir. JSON dosyasını ücretsiz olarak da indirebilirsiniz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorumlar bölümüne yorum yapmaktan çekinmeyin.
