Çoğu web sitesinde artık kendini kanıtlaması gerekmeyen bir “Kahramanlar” bölümü bulunur. Rolü sadece öne çıkmak değil, aynı zamanda mevcut eylem çağrısını güçlendiren çeşitli unsurlara bölünmektir. Kahraman bölümleri içindekiler Anlaşılması kolay yapısıyla split çok popülerdir ve farklı web sitesi türleri tarafından sıklıkla kullanılır.
Ve kahraman bölümleri oluşturmanıza rağmen içindekiler Ofis için bölünmek basit görünebilir, görünüşe her zaman güvenmemelisiniz. Bu eğitimin kullanışlı olacağı yer burasıdır. Yalnızca mobil cihazlarda harika görünmekle kalmayacak, aynı zamanda ekran boyutundan bağımsız olarak son derece etkileşimli bir mobil bölünmüş kahraman bölümünü yeniden oluşturacağız. Ayrıca 2019 tasarım stiline mükemmel uyum sağlayacak mükemmel animasyonları da birleştiriyoruz. Bu eğitimin size kendi mobil kahraman bölümlerinizi oluşturma konusunda ilham vereceğini umuyoruz. içindekiler bölmek.
Gidelim!
anket
Öğreticiye dalmadan önce, bu öğreticiyi tamamladıktan sonra neler alabileceğinize bir göz atalım.
Arayüz tasarımı
Yeni bölüm ekle
aralık
Yeni bir sayfa oluşturarak veya mevcut bir sayfayı açarak başlayın. Yeni bir normal bölüm ekleyin, aralık ayarlarına gidin ve tüm varsayılan üst ve alt dolgu kenar boşluklarını kaldırın.
- En iyi dolgu malzemesi: 0px
- Dolgu Tabanı: 0px
Yeni bir satır ekle
Sütunun yapısı
Yeni bir satır eklemeye ve aşağıdaki sütun yapısını kullanmaya devam edeceğiz:
Arka plan rengi
Daha fazla modül eklemeden hat ayarlarını açın ve tamamen siyah bir arka plan rengi ekleyin.
- Arka plan rengi: #000000
Sütun 1 Arka Plan Rengi
Ayrıca ilk sütuna siyah arka plan rengi ekleyin.
- Sütun 1 Arka Plan Rengi: #000000
Sütun 2 Arka Plan Rengi
İkinci sütun için aynı şey.
- Sütun 2 Arka Plan Rengi: #000000
boyutlandırma
Ardından boyutlandırma ayarlarına gidin ve satır ve sütunlarının ekranın tüm genişliğini kaplamasına izin verin.
- Bu satırı tam genişlik yap: Evet
- Özel bir oluk genişliği kullanın: Evet
- Oluk genişliği: 1
- Sütun yüksekliklerini eşitle: Evet
aralık
Ayrıca çizginin tüm varsayılan üst ve alt kenar boşluklarını da kaldırırız.
- Üstte doldurma: 0px
- Dolgu Tabanı: 0px
- Döşeme Sağ: 1vw
ekran
Son olarak, iki sütunun daha küçük ekranlarda yan yana görünmesini sağlayacağız. Bunu yapmak için, satırın Gelişmiş sekmesine tek bir CSS kodu satırı eklememiz gerekecek.
display: flex; |
1. sütuna bir görüntü modülü ekleyin
Görüntü alanını boş bırakın
Artık ihtiyacımız olan tüm modüllere sahibiz! İlk sütundaki görüntü modülüyle başlamalısınız. Resim alanına bir resim yüklemek yerine, resmi sonraki adımlarda arka plan ayarlarına yükleyeceğiz, bu nedenle varsayılan olarak eklenen resmi kaldırmamız gerekiyor. Böylece, görüntünün konumlandırılma şekli ve sıramızda ne kadar yer kapladığı ile oynayabiliriz.
Arka plan rengi ekle
Görüntü modülünün arka plan ayarlarına gidin ve bir arka plan rengi ekleyin. Bir sonraki adımda, bu arka plan rengini ve bir arka plan görüntüsünü, görüntüyü koyulaştırmak için bir karışım efekti kullanarak birleştireceğiz.
- Arka plan rengi: #686868
Arka plan resmi ekle
İstediğiniz bir arka plan görüntüsünü ekleyin ve arka plan ayarlarını uygun şekilde değiştirin:
- Arka Plan Resim Boyutu: Kapak
- Arka plan resminin konumu: merkez
- Arka plan resmini tekrarla: Tekrar yok
- Arka plan resmi karışımı: çarpma
boyutlandırma
Üzerinde çalıştığımız satır için eşit büyüklükte iki sütun kullandık, ancak sonuç aynı değil. Eklenen her modülün boyutunu, farklı bir sütun yapısı kullanıyormuşuz gibi görünmesi için manuel olarak değiştireceğiz. Bunu yapmamızın nedeni (sadece başka bir sütun yapısı seçmek yerine) her şeyi duyarlı hale getirmektir.
Küçük ekranlarda. Görüntü modülünün boyutlandırma parametrelerine erişin ve genişliğini değiştirin.
- Genişlik:% 88
- Modülün hizalanması: sol
aralık
Şimdi boşluk ayarlarında resmimizin boyutuna karar vermemiz gerekiyor. Ayrıca, ekran boyutundan bağımsız olarak tasarımımızın tamamen duyarlı kalmasını sağlamak için bu değerler için bir ekran birimi kullanıyoruz.
- Üst dolgu: 26.3vw (masaüstü), 48vw (tablet), 72vw (telefon)
- Altta Döşeme: 26.3vw (masaüstü), 48vw (tablet), 72vw (telefon)
Animasyon
Son olarak, Resim modülüne bir slayt animasyonu ekleyeceğiz. Animasyonu uyguladıktan sonra, görüntünün ilk sütuna girene kadar görünmeye başlamayacağını fark edeceksiniz. İkinci sütunun arka plan rengi, sola sürüklenirken Görüntü Modülünün üst kısmında kalır.
- Animasyon Stili: Slayt
- Animasyonu Tekrarla: Bir Kez
- Animasyon yönü: sol
- Animasyon Süresi: 1450ms
- Yoğunluk Animasyonu:% 60
- Animasyon Başlangıç opaklığı:% 100
1 sütununa bir düğme modülü ekleyin
Bir kopya ekle
1. sütunda ihtiyacımız olan bir sonraki modül, bir düğme modülüdür. Seçtiğiniz bir kopyasını girin.
Düğme ayarları
Ardından Tasarım sekmesine gidin ve düğme ayarlarını değiştirin.
- Düğme için özel stiller kullan: Evet
- Düğme metni boyutu: 1.5vw (masaüstü), 2.5vw (tablet), 4vw (telefon)
- Düğme metni rengi: #ffffff
- Düğme arka plan rengi: #e02b20
- Düğme kenarlığının genişliği: 0px
- Düğmenin kenarlığının yarıçapı: 1px
- Düğme Yazı Tipi: Poppins
- Yazı tipi ağırlığı: Kalın
aralık
Ayrıca aralık değerlerini de değiştirin.
- Üst marj: -3.3vw (masaüstü), -6vw (tablet), -9.1vw (telefon)
- Sol Dolgu: 8vw
- Döşeme Sağ: 8vw
Gölge kutusu
Ve sayfada derinlik oluşturmak için ince bir gölge ekleyin.
- Kutu Gölge Bulanıklığı Gücü: 20px
- Gölge rengi: rgba (0,0,0,0.3)
1 metin modülünü 2 sütununa ekle
H1 içeriği ekle
İkinci sütunda! İhtiyacımız olan ilk modül bir metin modülüdür. Seçtiğiniz herhangi bir H1 içeriğini ekleyin.
H1 Metin Ayarları
Ardından Tasarım sekmesine gidin ve H1 metin ayarlarını değiştirin.
- Yazı tipi: Poppins
- Başlık metni rengi: #ffffff
- Metin Başlığı Boyutu: 4vw (masaüstü), 5vw (tablet), 6vw (telefon)
aralık
Aralık değerlerini de değiştirin.
- Üst kenar boşluğu: 12vw
- Sol kenar boşluğu: -20vw
- Sağ kenar boşluğu: 17vw (masaüstü), 15vw (tablet), 1vw (telefon)
Animasyon
Ve ince bir animasyon ekleyin.
- Animasyon Stili: Slayt
- Animasyonu Tekrarla: Bir Kez
- Animasyon Yönü: Aşağı
- Animasyon Süresi: 1450ms
- Yoğunluk Animasyonu:% 10
- Animasyon Başlangıç opaklığı:% 100
2 sütununa bir bölme modülü ekleme
görünürlük
İkinci sütunda ihtiyacımız olan bir sonraki modül, bir bölme modülüdür. "Ayırıcıyı göster" seçeneğinin etkinleştirildiğinden emin olun.
- Bölücüyü Göster: Evet
Renk
Ardından Tasarım sekmesine gidin ve ayırıcının rengini değiştirin.
- Renk: #e02b20
Animasyon
Daha sonra bölme modülüne bir animasyon ekleyin.
- Animasyon Stili: Slayt
- Animasyonu Tekrarla: Bir Kez
- Animasyon Yönü: Sağ
- Animasyon Süresi: 1450ms
- Yoğunluk Animasyonu:% 83
- Animasyon Başlangıç opaklığı:% 100
2 metin modülünü 2 sütununa ekle
İçerik ekle
İkinci sütunda ihtiyacımız olan bir sonraki ve son modüle geçelim! Seçtiğiniz bir açıklama ekleyin.
Metin ayarları
Ardından Tasarım sekmesindeki metin ayarlarına gidin ve buna göre bazı değişiklikler yapın:
- Metin Yazı Tipi: Poppins
- Metnin yazı tipi ağırlığı: Işık
- Metin rengi: #919191
- Metin boyutu: 0.9vw (masaüstü), 1.8vw (tablet), 2.2vw (telefon)
- Metin harflerinin aralığı: 0.1vw
- Metin satırının yüksekliği: 2.2em
aralık
Ayrıca aralık değerlerini de değiştirin.
- Üst marj: 9vw (masaüstü), 19vw (tablet), 23vw (telefon)
- Alt kenar boşluğu: 12vw (masaüstü), 19vw (tablet), 23vw (telefon)
- Sol kenar boşluğu: -3vw
- Sağ kenar boşluğu: 20vw (masaüstü), 6vw (tablet), 3vw (telefon)
Animasyon
Ve sonunda, modüle soluk bir animasyon ekleyin; işiniz bitecek!
- Animasyon Stili: Solmaya
- Animasyonu Tekrarla: Bir Kez
- Animasyon Süresi: 1400ms
- Animasyon gecikmesi: 1000 ms
- Animasyon Başlangıç opaklığı:% 0
Son düşünceler
Bu eğiticide, harika bölünmüş içerik kahraman bölümlerinin nasıl oluşturulacağını gösterdik. Divi. Bölünmüş içerikli kahraman bölümleri çok popülerdir ve web'de sıklıkla kullanılır, ancak bunların çok hızlı yanıt vermelerini sağlamak da önemlidir. Herhangi bir sorunuz veya öneriniz varsa, yorum bırakmayı ve sosyal medyada paylaşmaktan çekinmeyin!
