Divi ile Hareketli Mobil Bölünmüş İçerik Kahraman Bölümü Nasıl Oluşturulur

Öne çıkan bir kahraman bölümü oluşturmak gerçekten önemlidir. Ve sadece öne çıkmamalı, aynı zamanda oradaki eylem çağrısını güçlendiren birden çok öğeye bölünmelidir. Bölünmüş içerikli kahraman bölümlerinin anlaşılması kolay yapısı, onları gerçekten popüler hale getirir ve farklı web siteleri arasında sıklıkla kullanılır.

Ve masaüstü için bölünmüş içerikli kahraman bölümleri yapmak basit olsa da, onları daha küçük ekran boyutları için yapmak olmayabilir. Bu eğitimin kullanışlı olacağı yer burasıdır. Yalnızca mobilde değil, tüm farklı ekran boyutlarında iyi görünecek, son derece etkileşimli, mobil bölünmüş bir kahraman bölümünü yeniden oluşturacağız. Tasarım stilinin 2019'a mükemmel şekilde uyması için bazı harika animasyonları da birleştiriyoruz. Bu öğreticinin, kendi mobil bölünmüş içerik kahraman bölümlerinizi oluşturmanız için size ilham vermesini umuyoruz.

Hadi hadi bakalım!

Ön izleme

Öğreticiye dalmadan önce, farklı ekran boyutlarındaki sonuca bir göz atalım.

Mobil

masaüstü

Yeniden Yaratmaya Başlayalım!

Yeni Bölüm Ekle

aralık

Yeni bir sayfa oluşturarak veya mevcut bir sayfayı açarak başlayın. Buna yeni bir normal bölüm ekleyin, boşluk ayarlarına gidin ve tüm varsayılan üst ve alt dolguyu kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:

Arka plan rengi

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve tamamen siyah bir arka plan rengi ekleyin.

• Arka Plan Rengi: #000000

Sütun 1 Arka Plan Rengi

İlk sütuna da siyah bir 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ın ve sütunlarının ekranın tüm genişliğini kaplamasına izin verin.

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet

aralık

Ayrıca satırın tüm varsayılan üst ve alt dolgularını kaldırıyoruz.

• Üst Dolgu: 0px
• Alt Dolgu: 0px
• Sağ Dolgu: 1vw

Görüntülemek

Son olarak, her iki sütunun da daha küçük ekran boyutlarında 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;

Sütun 1'e Görüntü Modülü Ekle

Görüntü Kutusunu Boş Bırak

İhtiyacımız olan tüm farklı modülleri ekleme zamanı! İlk sütundaki Görüntü Modülü ile başlayın. Resim kutusuna resim yüklemek yerine, ilerleyen adımlarda resmi arka plan ayarlarına yükleyeceğiz. Bu, görüntünün nasıl konumlandırıldığı ve sıramızda ne kadar yer kapladığı ile oynamamıza izin verecektir.

Arka Plan Rengi Ekle

Görüntü Modülünün arka plan ayarlarına gidin ve bir arka plan rengi ekleyin. Sonraki adımda, görüntüyü koyulaştırmak için bir karışım efekti kullanarak bu arka plan rengini ve arka plan görüntüsünü birleştireceğiz.

• Arka Plan Rengi: #686868

Arka Plan Resmi Ekle

Seçtiğiniz bir arka plan resmi ekleyin ve arka plan ayarlarını buna göre değiştirin:

• Arka Plan Resmi Boyutu: Kapak
• Arka Plan Resmi Konumu: Merkez
• Arka Plan Resmi Tekrarı: 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ç öyle görünmüyor. Farklı bir sütun yapısı kullanıyormuşuz gibi görünmesi için eklediğimiz her modülün boyutunu manuel olarak değiştireceğiz. Bunu yapmamızın nedeni (sadece başka bir sütun yapısı seçmek yerine), daha küçük ekran boyutlarında da her şeyin iyi ve duyarlı görünmesini sağlamaktır. Görüntü Modülünün boyutlandırma ayarlarına gidin ve genişliği değiştirin.

• Genişlik: %88
• Modül Hizalama: Sol

aralık

Şimdi boşluk ayarlarında resmimizin boyutuna karar veriyoruz. Tasarımımızın tüm ekran boyutlarında tamamen duyarlı kalmasını sağlamak için bu değerler için bir görüntü alanı birimi de kullanıyoruz.

• Üst Dolgu: 26.3vw (Masaüstü), 48vw (Tablet), 72vw (Telefon)
• Alt Dolgu: 26.3vw (Masaüstü), 48vw (Tablet), 72vw (Telefon)

Animasyon

Son olarak, Görüntü Modülümüze bir slayt animasyonu ekleyeceğiz. Animasyonu uyguladığınızda, görüntünün yalnızca ilk sütuna girdiği andan itibaren görünmeye başladığını fark edeceksiniz. İkinci sütunun arka plan rengi, sola kayarken Görüntü Modülünün üstünde kalır.

• Animasyon Stili: Slayt
• Animasyon Tekrarı: Bir kez
• Animasyon Yönü: Sol
• Animasyon Süresi: 1450ms
• Animasyon Yoğunluğu: %60
• Animasyon Opaklığı Başlatma: %100

Sütun 1'e Düğme Modülü Ekle

Kopya Ekle

Sütun 1'de ihtiyacımız olan bir sonraki modül bir Düğme Modülüdür. Seçtiğiniz bir kopyayı girin.

Düğme Ayarları

Ardından tasarım sekmesine gidin ve düğme ayarlarını değiştirin.

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Boyutu: 1.5vw (Masaüstü), 2.5vw (Tablet), 4vw (Telefon)
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #e02b20
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 1 piksel
• Düğme Yazı Tipi: Poppins
• Yazı Tipi Ağırlığı: Ağır

aralık

Boşluk değerlerini de değiştirin.

• Üst Marj: -3.3vw (Masaüstü), -6vw (Tablet), -9.1vw (Telefon)
• Sol Dolgu: 8vw
• Sağ Dolgu: 8vw

Kutu Gölge

Ve sayfada biraz derinlik yaratmak için ince bir kutu gölgesi ekleyin.

• Kutu Gölge Bulanıklığı Gücü: 20px
• Gölge Rengi: rgba(0,0,0,0.27)

Metin Modülü #1'i Sütun 2'ye ekleyin

H1 İçeriği Ekle

İkinci sütuna geç! İhtiyacımız olan ilk modül bir Metin Modülü. Seçtiğiniz bazı H1 içeriğini ekleyin.

H1 Metin Ayarları

Ardından tasarım sekmesine gidin ve H1 metin ayarlarını değiştirin.

• Başlık Yazı Tipi: Poppins
• Başlık Metni Rengi: #ffffff
• Başlık Metni Boyutu: 4vw (Masaüstü), 5vw (Tablet), 6vw (Telefon)

aralık

Aralık değerleri etrafında da değiştirin.

• Üst Marj: 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
• Animasyon Tekrarı: Bir kez
• Animasyon Yönü: Aşağı
• Animasyon Süresi: 1450ms
• Animasyon Yoğunluğu: %10
• Animasyon Opaklığı Başlatma: %100

Sütun 2'ye Bölücü Modülü Ekle

görünürlük

İkinci sütunda ihtiyacımız olan bir sonraki modül bir Bölücü Modül. 'Bölü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ı rengini değiştirin.

• Renk: #e02b20

Animasyon

Daha sonra Bölücü Modüle bir animasyon ekleyin.

• Animasyon Stili: Slayt
• Animasyon Tekrarı: Bir kez
• Animasyon Yönü: Sağ
• Animasyon Süresi: 1450ms
• Animasyon Yoğunluğu: %83
• Animasyon Opaklığı Başlatma: %100

Metin Modülü #2'yi Sütun 2'ye ekleyin

İç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
• Metin Yazı Tipi Ağırlığı: Hafif
• Metin Rengi: #919191
• Metin Boyutu: 0.7vw (Masaüstü), 1.8vw (Tablet), 2.2vw (Telefon)
• Metin Harf Aralığı: 0.1vw
• Metin Satırı Yüksekliği: 2.2em

aralık

Boşluk 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

Son olarak, modüle bir solma animasyonu ekleyin ve işiniz bitti!

• Animasyon Stili: Soluk
• Animasyon Tekrarı: Bir kez
• Animasyon Süresi: 1450ms
• Animasyon Gecikmesi: 1000ms
• Animasyon Opaklığı Başlatma: %0

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi sonuca farklı ekran boyutlarında son bir göz atalım.

Mobil

masaüstü

Son düşünceler

Bu gönderide, Divi'yi kullanarak nasıl çarpıcı bölünmüş içerikli kahraman bölümleri oluşturabileceğinizi gösterdik. Bölünmüş içerikli kahraman bölümleri gerçekten popülerdir ve web'de sıklıkla kullanılır, ancak bunların da son derece duyarlı olduklarından emin olmak önemlidir. Bu öğreticinin, yakında oluşturacağınız web siteleri için mobil bölünmüş içerikli kahraman bölümleri oluşturmanıza yardımcı olacağını umuyoruz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!