Divi ile hücresel ayrı bir hücre kahramanı nasıl yapılır
Kahramanın önemli bir parçası yapmak çok önemlidir. Ve sadece öne çıkmalı, aynı zamanda harekete geçme davetini güçlendiren çeşitli unsurlara ayrılmalıdır. Kolayca anlaşılan bölünmüş-içerik kahramanı bölümü onu çok popüler hale getirir ve genellikle çeşitli web siteleri arasında kullanılır. Ve masaüstü için kahramanların ayrı bir bölümünü yapmak kolay olsa da, daha küçük ekran boyutları için yapamayabilir. Bu öğretici burada faydalı olacaktır. Sadece hücreselde değil, aynı zamanda tüm farklı ekran boyutlarında da iyi görünecek çok etkileşimli bir hücresel bölünmüş kahraman bölümü oluşturacağız. Ayrıca, tasarım stilini 2019 ile mükemmel hale getirmek için bazı harika animasyonları da birleştiriyoruz. Bu öğretici, kendi hücre kahramanınızın ayrı bir bölümünü yaratmanıza ilham verir.
Haydi Yapalım şunu! Önizleme Öğreticiyi girmeden önce, sonuçlara çeşitli ekran boyutlarında bakalım. Hücresel
Üst dolgu: 0px
Aşağıda dolgu: 0px Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin: Herhangi bir modül eklemeden arka plan rengi, satır ayarlarını açın ve arka planın tam bir arka plan rengi ekleyin.
Arka plan rengi: #000000 Sütun Rengi Sütun 1 Siyah arka plan rengini ilk sütuna da ekleyin.
Sütun Renk Sütunu 1: #000000 Arka Plan Rengi Sütun 2 İkinci sütun için aynı şey.
Sütun 2 Arka Plan Rengi: #000000 Ek Ardından, boyut ayarlarını açın ve satırdan çıkın ve sütun ekranın tüm genişliğini karşılıyor. Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Yüksek sütunu eşitleyin: evet
Mesafemiz ayrıca varsayılanın tüm üst ve alt dolgusunu satırdan kaldırır. Üst dolgu: 0px
Aşağıda dolgu: 0px
Doğru dolgu: 1VW
Son olarak gösterilen ancak en az değil, iki sütunun yan yana daha küçük bir ekran boyutunda görünmesini sağlayacağız. Bunu yapmak için, hattın gelişmiş sekmesine bir satır CSS kodu eklememiz gerekir. Ekran: Flex;
Görüntü modülünü Sütun 1’e ekleyin Boş resim kutusunun ihtiyacımız olan tüm farklı modülleri eklemesine izin verin! İlk sütunda görüntü modülü ile başlayın. Çizim kutusuna resim yüklemek yerine, gelecekte arka plan ayarlarına görüntü yükleyeceğiz. Bu, görüntünün nasıl konumlandırıldığı ve hattımızda ne kadar alana ihtiyaç duyulduğunu oynamamıza izin verecektir. Arka plan rengini ekleyin, görüntü modülünün arka plan ayarlarını açın ve arka plan rengini ekleyin. Bir sonraki adımda, bu arka plan rengini ve arka plan görüntülerini karanlık görüntüler için bir karışım kullanarak birleştireceğiz. Arka plan rengi: #686868
Arka plan görüntüsü ekleyin Seçtiğiniz bir arka plan görüntüsü ekleyin ve uygun arka plan ayarlarını değiştirin: Arka Plan Görüntü Boyutu: Kapak
Arka Plan Görüntü Pozisyonu: Orta
Arka plan görüntüsünün tekrarlanması: Tekrar yok
Arka plan görüntü karışımı: çarpın
Yapıştırıcımız üzerinde çalıştığımız sıra için aynı boyutta iki sütun kullandı, ancak sonuçlar böyle görünmüyor. Farklı bir sütun yapısı kullanıyormuş gibi görünmek 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çmekle kalmaz), her şeyin daha küçük ekran boyutlarına iyi ve duyarlı görünmesini sağlamaktır. Görüntü modülünün boyut ayarlarını açın ve genişliği değiştirin. Genişlik:% 88 Modül hizalaması: sol
Mesafemiz artık uzay ayarlarındaki görüntümüzün boyutuna karar verebilir. Ayrıca, tasarımımızın tüm ekran boyutlarında tamamen duyarlı kalmasını sağlamak için bu değer için ViewPort ünitesini de kullanıyoruz.
Üst Dolgu: 26.3VW (masaüstü), 48VW (tablet), 72VW (Telefon) Dolgu Alt: 26.3VW (Masaüstü), 48VW (Tablet), 72VW (Telefon)
Son fakat en az değil, görüntü modülümüze slayt animasyonu ekleyeceğiz. Animasyonu uyguladıktan sonra, görüntünün yalnızca ilk sütuna girerken görünmeye başlayacağını göreceksiniz. İkinci sütunun arka plan rengi, sola kaydırıldığında görüntü modülünün üzerinde kalır.
Animasyon Stili: Slayt Animasyon tekrarlama: bir kez
Animasyonlu Yön: Sol
Animasyon Süresi: 1450ms
Animasyon yoğunluğu:% 60
Animasyon Opaklık Başlar:% 100
Düğme Modülünü Sütun 1’e Ekleyin Sütun 1’de ihtiyacımız olan bir sonraki modülün bir kopyasını ekleyin Düğme Modülü. Seçtiğiniz bazı kopyaları girin.
Düğmeyi ayarlayın Ardından, Tasarım sekmesini açın ve düğme ayarlarını değiştirin.
Düğmeler için özel bir stil kullanın: evet
Metin Boyutu Düğmesi: 1.5VW (Masaüstü), 2.5VW (Tablet), 4VW (Cep Telefonu)Metin Renk Düğmesi: #fffffff
Arka Plan Renk Düğmesi: #E02B20
Sınır Sınır Genişliği: 0pxradius Sınır Sınır: 1 piksel
Yazı tipi düğmesi: Poppins
Mektup Ağırlığı: Ağırlık
Mesafe ayrıca boşluk değerini değiştirir.
Üst kenar: -3.3vw (masaüstü), -6vw (tablet), -9.1vw (telefon)
Sol dolgu: 8vw Doğru dolgu: 8vw
Kutunun gölgesi ve sayfada biraz derinlik sağlamak için pürüzsüz bir kutu gölge ekleyin.
Bulanık Güç Gölgesi Kutusu: 20px
Gölge Rengi: RGBA (0.0,0,0.27) Sütun 2’ye Metin Modülü #1 ekleyin İkinci sütuna H1 içeriği ekleyin! İhtiyacımız olan ilk modül metin modülü. Seçtiğiniz bazı H1 içeriğini ekleyin.
H1 Metin Ayarları Ardından, Tasarım sekmesini açın ve H1 metin ayarlarını değiştirin.
Yazı Tip Başlığı: Poppins Başlık metin rengi: #ffffff Başlık Metin Boyutu: 4VW (Masaüstü), 5VW (Tablet), 6VW (Telefon)
Uzay değerinin etrafındaki mesafeyi de 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 güzel animasyon ekleyin.
Animasyon Stili: Slayt
Animasyon tekrarlama: bir kez Animasyonlu yön: aşağıda
Animasyon Süresi: 1450ms
Animasyon yoğunluğu:% 10
Animasyon Opaklık Başlar:% 100
Bölme modülünü, ikinci sütunda ihtiyacımız olan bir sonraki modülün Sütun 2 görünürlüğüne ekleyin. ‘Ekran göster’ seçeneğinin etkinleştirildiğinden emin olun.
Divisor göster: evet
O zaman renk tasarım sekmesini açın ve bölücünün rengini değiştirin. Renk: #E02B20
Animasyon Bir sonraki bölücü modülüne animasyon ekleyin. Animasyon Stili: Slayt
Animasyon tekrarlama: bir kez Animasyonlu yön: doğru
Animasyon Süresi: 1450ms
Animasyon yoğunluğu:% 83
Animasyon Opaklık Başlar:% 100
2 #2 metin modülünü sütun 2’ye ekleyin, içeriği bir sonrakine ekleyin ve son olarak ikinci sütunda ihtiyacımız var! Seçtiğiniz açıklamayı ekleyin.
Metin Ayarları Ardından, Tasarım sekmesindeki metin ayarlarını açın ve bazı uygun değişiklikler yapın: Metin Yazı Tipi: Poppins
Metin yazı tipi ağırlığı: ışık Metin rengi: #919191 Metin Boyutu: 0.7VW (Masaüstü), 1.8VW (Tablet), 2.2VW (Telefon)
Uzay metin mektubu: 0.1vw
Yüksek çizgi metin: 2.2em
Mesafe ayrıca boşluk değerini değiştirir.
Üst kenar: 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)
Son animasyon, FADE animasyonunu modüle ekleyin ve bitti!
Animasyon Stili: Fades
Animasyon tekrarlama: bir kez
Animasyon Süresi: 1450ms Animasyon gecikmesi: 1000ms
Opaklık Başlangıç Animasyonu:% 0
Önizleme Şimdi tüm adımlardan geçtik, nihai sonuçlara farklı ekran boyutlarında bakalım. Hücresel
Masaüstü
Bu yazıdaki son zihin, size Divi’yi kullanarak şaşırtıcı olan ayrı içerik oluşturmayı nasıl göstereceğinizi gösterdik. Ayrı içeriğe sahip kahramanlar çok popülerdir ve genellikle web’de kullanılır, ancak bunların da çok duyarlı olmalarını sağlamak önemlidir. Bu öğretici, oluşturduğunuz yaklaşan web sitesi için ayrı bir hücre kahramanı bölümü oluşturmanıza yardımcı olacağını umuyoruz! Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
