Fullwidth Header modülüyle bir Hero Divi bölümü oluşturmak mı yoksa kendiniz tasarlamak mı istiyorsunuz?
Bir kahraman bölümü oluşturun Site Web sıfırdan veya Divi Fullwith Header modülünü kullanmak, göz alıcı bir tasarım yaratmanın iki yoludur. web sitesi.
Bu makalede, Divi ile kendi Hero bölümünüzü oluşturmaya karşı Fullwidth Header modülü kullanmanın artılarını ve eksilerini inceleyeceğiz.
Gidelim!
Web Sitesi Kahraman Bölümlerinin Önemi
Bir Kahraman bölümü, oluşturduğunuz ilk bölümdür. ziyaretçi bak sana ne zaman varacaklar Site Web. Bu genellikle tam genişlikte bir banner'dır ve aynı zamanda Kahraman Başlığı olarak da adlandırılabilir. Kalıcı bir ilk izlenim bırakma gücüne sahip olduğundan web sitenizde göze çarpan bir yerdir.
Ayrıca Oku: Divi: Fullwidth Header modülü tam ekranda nasıl görüntülenir?
Bu nedenle, göz alıcı ve ilgi çekici olmasına rağmen okunması kolay olacak şekilde tasarlanması önemlidir. Web Sitesi Kahramanı bölümleri önemlidir çünkü potansiyel müşterilerin dikkatini çekebilir, bir sayfayı hızlı bir şekilde tanımlayabilir ve ek etkileşime ve potansiyel potansiyel müşterilere yol açabilirler. Kahraman bölümleri markalı olmalı, H1 başlığı ve CTA içermelidir.
Sıfırdan bir Kahraman bölümü oluşturun
Hero bölümünü sıfırdan tasarlamak, tasarım üzerinde tam kontrole sahip olmanızı sağlar ve içindekiler. Durumunuza ve ihtiyaçlarınıza bağlı olarak bu, web siteniz için harika bir çözüm olabilir.
Bu yaklaşımın artılarına ve eksilerine bir göz atalım.
Bu yaklaşımın faydaları
İlk olarak, Divi kullanarak sıfırdan bir web sitesi Hero bölümü oluşturmanın faydalarına bakalım.
- Tam tasarım kontrolü
- Herhangi bir Divi modülünü kullanın
Bu yaklaşımın dezavantajları
Şimdi sıfırdan bir kahraman bölümü oluşturmanın dezavantajlarına bakalım.
- sıfırdan inşa etmek zorundasın
- Birden fazla mod gerektirir
Divi Fullwidth Header modülüyle bir Kahraman bölümü oluşturun
Divi Fullwidth Header modülünü kullanarak bir kahraman bölümü oluşturmak, birkaç dakika içinde göz alıcı, mobil uyumlu bir tasarım oluşturmayı kolaylaştırır.
Bu yaklaşımın artılarına ve eksilerine bir göz atalım.
Bu yaklaşımın faydaları
Divi Fullwidth Header modülü ile bir Hero bölümü oluşturmanın faydalarına bir göz atalım.
- Hepsi senin içindekiler tek bir modüldedir
- Tasarım zaten optimize edildi
Bu yaklaşımın dezavantajları
Şimdi Divi Fullwidth Header modülü ile Hero bölümü tasarlamanın dezavantajlarını değerlendirelim.
- Tasarımla daha az esneklik
Divi Tam Genişlik Başlık modülü aşağıdaki seçeneklerle birlikte gelir: içindekiler önceden tanımlanmış olsa da, modülde bulunmayan bir içerik parçası eklemek istiyorsanız çoğu sınırlanabilir. Bu, genel tasarımda daha az esnekliğe sahip olacağınız anlamına gelir.
Adım adım iki Kahraman bölümünün yapımı
Artık her iki yaklaşımın artılarını ve eksilerini anladığınıza göre, her bir yaklaşımın tam olarak nasıl çalıştığını görebilmeniz için her bir Kahraman bölümünü oluşturalım.
Divi Builder ile yeni bir sayfa oluşturun
Başlamak için aşağıdakileri yapmanız gerekir:
- Divi'yi yükleyin WordPress web sitenizde.
- Bir sayfa ekleyin ve ona bir başlık verin.
- Görsel oluşturucuyu etkinleştir
Kahraman bölümünüzü sıfırdan oluşturun
Artık sayfamız kurulduğuna göre, sıfırdan bir kahraman bölümü oluşturmaya başlayalım.
DIVI'yı şimdi indirin!!!
"Divi Builder"ı etkinleştirin
Divi'nin sürükle ve bırak oluşturucusunu kullanmak için, düğmesine tıklayarak Görsel Oluşturucuyu etkinleştirmemiz gerekecek. "DiviBuilder'ı kullanın". Bu, Divi Visual Builder'ı kullanarak sayfayı yeniden yükleyecektir.
Seçin: Sıfırdan oluşturun
Sayfanız görsel oluşturucu etkinken yeniden yüklendiğine göre, "seçeneklere tıklayın. SIFIRDAN YAPI Böylece tasarım yaparken kullanacağımız boş bir sayfamız olur.
Satır ekleyin ve sütunları yapılandırın
Aşağıdaki sütun yapısına sahip bir satır oluşturun.
mod ekle
Şimdi ihtiyacımız olacak içerik modüllerini ekleyelim.
- 2 Metin Modülü, ayırıcı, sol sütunda bir düğme
- Orta sütunda 1 Görüntü Modülü
- Sağ sütunda 1 Görüntü Modülü
Stil bölümü
Şimdi bölüm ayarlarını yapılandıralım.
Bir bölüm ekleyin, ardından aşağıdaki ayarları yapılandırın:
- Arkaplan: #1d1d25
Başlık metin stili
Başlık metnini özelleştirin:
- Başlık 1:
- Yazı Ağırlığı: Yarı Kalın
- Metin Rengi: #ffffff
- Metin Boyutu: 90px
- Satır Yüksekliği: 1,1 em
ayırıcı
Ayırıcı ayarlarını yapılandırın:
- Çizgi Rengi: rgba(255,255,255,0.3)
- Bölücü Ağırlığı: 10px
- Maksimum Genişlik: 260 piksel
gövde metni
Gövde metnini özelleştirin:
- Metin Rengi: rgba(255,255,255,0.7)
- Metin Boyutu: 13px
- Satır Yüksekliği: 1,8 em
Bouton
Şimdi butonu özelleştirelim.
Düğme sekmesinde:
- Düğme İçin Özel Stiller Kullan: Evet
- Düğme Metin Boyutu: 14px
- Metin Rengi: #ffffff
- Düğme Arka Planı:
- Kenarlık Genişliği: 0 piksel
- Sınır Yarıçapı: 0 piksel
Aralık sekmesinde:
- Üst ve Alt: 40 piksel
- Sol ve Sağ: 20px
Resim ekle
Görüntü modüllerine görüntüleri ekleyin.
Hat ayarlarını yapın
Hat parametreleri:
- Marj (Sol): 15vw
2. sütunu ayarla
İkinci sütunda şu ayarları yapılandırın:
Özel CSS
Aşağıdaki kodu ana öğenin kod bölümüne yapıştırın:
argin-right: -15vw!important;
z-index: 100!important;aralık
100 piksel üst dolgu ekleyin.
İşte burada ! Artık tamamen tasarlanmış özel bir Kahraman bölümünüz var.
DIVI'yı şimdi indirin!!!
Divi'nin Fullwidth Header modülü ile Kahraman bölümünüzü oluşturun
Şimdi Divi'nin Fullwidth Header modülünü kullanarak bu Hero bölümünü nasıl yeniden oluşturacağımızı görelim.
DIVI'yı şimdi indirin!!!
Bir sayfa ekleyin ve Sıfırdan Oluştur'u seçin
Yeni bir sayfa ekleyin, ona bir başlık verin, ardından Divi Builder'ı Kullan'a tıklayın ve ardından Sıfırdan Oluştur'u seçin.
Tam genişlikte bir bölüm ve tam genişlikte bir başlık ekleyin
Bölüm ekle Tam genişlik, ardından seçin Tam Genişlik Üstbilgisi modül kitaplığında.
içindekiler
Metinsel içeriği Metin sekmesinde modüle ekleyin.
Fotoğraflar
Görüntü sekmesindeki görüntüleri ekleyin.
Arka plan rengini değiştir
Arka plan sekmesinde aşağıdaki ayarı yapılandırın:
- Arkaplan: #1D1D25
Başlık metni
Başlık metni ayarlarını yapılandırın:
- Başlık Yazı Tipi Ağırlığı: Kalın
- Metin Boyutu: 90px
gövde metni
Gövde metni ayarlarını yapılandırın:
- Gövde Metin Rengi: rgba(255,255,255,0.55)
altyazı metni
Altyazı metni ayarlarını yapılandırın:
- Altyazı Yazı Tipi Ağırlığı: Kalın
- Metin Rengi: #4C594C
- Harf Aralığı: 3px
düğmeler
Şimdi iki düğmeyi özelleştirelim.
düğme bir
Düğme Bir sekmesinde aşağıdaki ayarları yapılandırın:
- Düğme Bir İçin Özel Stilleri Kullan: Evet
- Düğme Bir
- Arka plan: #4c594c
- Kenarlık Genişliği: 0 piksel
- Sınır Yarıçapı: 0px
- Simgeyi Göster : EVET
- Simgeyi Yalnızca Üzerine Geldiğinde Göster: Hayır
- Dolgu: 25 piksel (Üst ve Alt); 25px(Sol), 50px(Sağ)
Düğme İki
Düğme İki sekmesinde aşağıdaki ayarları yapılandırın:
- İkinci Düğme İçin Özel Stilleri Kullan: EVET
- Düğme İki Kenar Genişliği: 0 piksel
- Sınır Yarıçapı: 0px
- Dolgu: 25px (Üst, Alt, Sol ve Sağ)
- Düğme Kutusu Gölgesi: 4.
- Kutu Gölgesi Yatay Konumu: 0px
- Kutu Gölge Dikey Konumu: 2px
- Gölge Rengi: #ffffff
İşte burada ! Artık Divi Fullwidth Header modülünü kullanarak tamamen tasarlanmış bir Kahraman bölümünüz var.
Ayrıca bakınız: Divi: Öğeler arasında arka plan geçişleri nasıl oluşturulur?
DIVI'yı şimdi indirin!!!
Sonuç
Divi ile bir Kahraman bölümü oluşturmak, ister sıfırdan oluşturuyor olun, ister Fullwith Header modülünü kullanıyor olun, kolaydır. Her iki seçenek de, ilginizi çeken çarpıcı başlık tasarımları oluşturmanıza olanak tanır. ziyaretçi.
Benzersiz ihtiyaçlarınıza bağlı olarak, her iki seçenek de Kahraman bölümünüzü şekillendirirken göz önünde bulundurmanız gereken harika bir seçenektir.
Her ikisinin de artılarını ve eksilerini okuduktan sonra Kahraman bölümünüzü nasıl tasarlarsınız?
Bu eğitimin bir sonraki Divi projeleriniz için size ilham vereceğini umuyoruz. 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ş.
...
