Divi ile Gösteri Durduran Kahraman Bölümleri Nasıl Oluşturulur

Kahraman bölümleri; her türlü amaca hizmet ederler. Ziyaretçilerin web sitenizi ziyaret ettiklerinde gördükleri ilk şeylerdir, web sitenizin stilini hemen gösterirler ve ziyaretçilerinizin sitenizde nasıl hissettiklerini ve nasıl davrandıklarını etkilerler. Her türlü kahraman bölümüne zaten alışkınız, ancak çoğu bir kahraman resmi, bir slogan ve harekete geçirici mesaj içeriyor. Yine de başka olasılıklar da var. Bu gönderide, size kahraman bölümleriyle ilgili başka bir yaklaşım göstereceğiz ve bunu Divi kullanarak yeniden oluşturabileceğiniz bir örnekle takip edeceğiz.

Örnek

Size Divi ile nasıl yeniden oluşturacağınızı göstereceğimiz örnek masaüstünde şöyle görünür:

Ve mobilde şöyle:

Kahraman Bölümünüzü Nasıl Öne Çıkarırsınız

Örneği nasıl yeniden oluşturacağınızı size göstermeden önce, bu kahraman bölümünü diğerlerinden ayıran bazı faktörlere bir göz atalım.

1. Büyük, Açıklayıcı ve Merkezi Logo

Örneğimizde kahraman bölümümüzü öne çıkarmaya yardımcı olmak için kullandığımız ilk şey, varsayılan yerine ortalanmış bir başlık biçimidir. Bununla birlikte, menü öğelerinin kahraman bölümü tasarımıyla örtüşmesine yardımcı olacak şeffaf bir menü de kullanıyoruz. Logo, menü ve web sitesi arasındaki bağlantı, şeffaf bir arka plan kullanıldığında daha nettir, çünkü kahraman bölümünde bir daha az bölüm vardır.

2. Yazılı İçeriği Konsantre Edin

Kahraman bölümünüzü öne çıkarmak için yapabileceğiniz bir diğer şey, sahip olduğunuz yazılı içeriğe konsantre olmaktır. Bu şekilde, ziyaretçilerin dikkatini ekranda tek bir yere çekeceksiniz ve bu da onu okuma şansını artıracaktır. Öte yandan, yazılı içeriği kahraman bölümünüzün tamamına bölüyorsanız, değişikliklerin getirmeye çalıştığınız mesajın bir bölümünü kaçırmaları daha olasıdır.

3. Benzersiz Satış Tekliflerini Vurgulayın

Genellikle bir kahraman bölümü, bir ürün veya şirketin sloganını paylaşan normal Metin Modülleri içerir. Ancak, Blurb Modüllerini kahraman bölümünde de kullanabilirsiniz. Ürününüzün veya hizmetinizin benzersiz satış tekliflerini hemen paylaşmak istiyorsanız, bu Blurb Modülleri mükemmeldir. Bunun da ötesinde, hemen harekete geçirici mesajlar eklemek isteyip istemediğinizi de seçebilirsiniz. Örneğimizde, bu harekete geçirici mesajlar, tanıtıcı modüllerin kendisinde yerleşiktir.

4. Temiz Ürün Resmi

Tamamlamak ve sağladığınız yazılı içeriği dengelemek için, kahraman bölümü arka plan resminiz olarak temiz bir ürün resmi kullanmanızı öneririz. Kahraman imajınızın, tüm kahraman bölümünü ele geçirmeden olabildiğince kaliteli ve açıklayıcı olmasını istiyorsunuz.

Divi ile Gösteri Durduran Kahraman Bölümleri Nasıl Oluşturulur

Youtube Kanalımıza Abone Olun

Divi ile Örneği Yeniden Oluştur

Artık teorik tarafı gözden geçirdiğimize göre, onu yeniden yaratmaya başlamanın zamanı geldi.

Başlık Formatı

Yapmanız gereken ilk şey, WordPress Panonuz > Özelleştir > Başlık ve Gezinme > Başlık Biçimi > Başlık Stili olarak 'Ortalanmış'ı seçerek Başlık Stili olarak 'Ortalanmış'ı seçmektir.

Birincil Menü Çubuğu Ayarları

Ardından, Başlık ve Gezinme > Birincil Menü Çubuğu > seçeneğine geri dönün ve aşağıdaki ayarlamaları yapın:

• Menü Yüksekliği: 211px
• Logo Maksimum Yüksekliği: 100px
• Metin Boyutu: 16
• Harf Aralığı: 2
• Yazı Tipi: Lato Işık
• Yazı Tipi Stili: Büyük Harf
• Metin Rengi: #FFFFFF
• Aktif Bağlantı Rengi: #FFFFFF
• Arka Plan Rengi: rgba(255,255,255,0)
• Açılır Menü Arka Plan Rengi: rgba(255,255,255,0)

Yeni Bölüm Ekle

Tamamlandığında, yeni bir sayfa ekleyin, Divi Builder'ı etkinleştirin, Visual Builder'ı etkinleştirin ve yeni bir standart bölüm ekleyin.

Degrade Arka Plan

Bu bölüm için aşağıdaki gradyan arka planını kullanın:

• İlk Renk: #e2e2e2
• İkinci Renk: rgba(255,255,255,0)
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 180deg
• Başlangıç ​​Konumu: %40
• Bitiş Konumu: %40

Arka plan görüntüsü

Ardından, arka plan görüntüsünü yükleyin ve Arka Plan Görüntüsü Karışımı olarak 'Çarp'ı seçin.

İki Sütunlu Satır Ekle

Arka plan rengi

Yeni oluşturduğunuz bölüme iki sütunlu bir satır ekleyin ve arka plan rengi olarak '#b7afa1' kullanın.

Sütun 1 Gradyan Arka Planı

Aşağı kaydırın ve ilk sütun için aşağıdaki gradyan arka planını kullanın:

• İlk Renk: rgba(255,255,255,0.43)
• İkinci Renk: rgba(255,255,255,0)
• Sütun 1 Gradyan Türü: Radyal
• Sütun 1 Degrade Yönü: Sol Üst
• Sütun 1 Başlangıç ​​Konumu: %49
• Sütun 1 Bitiş Konumu: %49

Sütun 2 Gradyan Arka Planı

Ve ikinci sütun için aşağıdaki gradyan arka planını kullanın:

• İlk Renk: rgba(255,255,255,0.43)
• İkinci Renk: rgba(255,255,255,0)
• Sütun 2 Gradyan Türü: Radyal
• Sütun 2 Radyal Yön: Sağ Alt
• 2. Sütun Başlangıç ​​Konumu: %49
• Sütun 2 Bitiş Konumu: %49

boyutlandırma

Tasarım sekmesine gidin, 'Özel Cilt Payı Genişliğini Kullan' seçeneğini etkinleştirin ve Cilt Payı Genişliği için '1'i kullanın.

aralık

Aralık alt kategorisini açın ve aşağıdaki dolgu ve kenar boşluğunu kullanın:

• Üst Dolgu: 0px (Masaüstü), 20px (Tablet ve Telefon)
• Sağ Dolgu: 25px
• Alt Dolgu: 20px
• Sol Dolgu: 25px
• Alt Kenar Boşluğu: 200 piksel

İlk Blurb Modülü

Simgeyi Etkinleştir

Satırın ilk sütununa bir Blurb Modülü ekleyin, 'Simge Kullan' seçeneğini etkinleştirin ve bir simge seçin.

Simge Ayarları

Ardından Tasarım ayarlarına gidin ve Görüntü ve Simge alt kategorisinde aşağıdaki değişiklikleri yapın:

• Simge Rengi: #FFFFFF
• Resim/Simge Yerleşimi: Sol
• Simge Yazı Tipi Boyutunu Kullan: Evet
• Simge Yazı Tipi Boyutu: 40px

Başlık Metni Ayarları

Ardından, Başlık Metni alt kategorisine aşağıdaki ayarları uygulayın:

• Başlık Yazı Tipi: Roboto Light
• Yazı Tipi Stili: Kalın
• Başlık Yazı Tipi Boyutu: 25px
• Başlık Metni rengi: #FFFFFF
• Başlık Çizgisi Yüksekliği: 1.5em

Gövde Metni Ayarları

Gövde Metni alt kategorisi için aşağıdaki değişiklikler gerekecektir:

• Gövde Yazı Tipi: Lato Işık
• Gövde Yazı Tipi Boyutu: 13px
• Gövde Metni Rengi: #FFFFFF

boyutlandırma

Ardından, İçerik Genişliği olarak '300px'i kullanın.

aralık

Son olarak, Blurb Modülü için aşağıdaki kenar boşluğunu ve dolguyu kullanın:

• Üst Kenar Boşluğu: -50px (Masaüstü), 0px (Tablet ve Telefon)
• Üst Dolgu: 100 piksel
• Sağ Dolgu: 10px
• Bototm Dolgusu: 30px
• Sol Dolgu: 10px

Blurb Modülünü Klonla ve İkinci Sütundaki Yeri

Daha önce yapılmış Blurb Modülünü klonlayıp diğer sütuna da yerleştirerek devam edin.

Arka Plan Rengini Değiştir

Bu klonlanmış Blurb Module'de değiştirmeniz gereken ilk şey arka plan rengidir. 'rgba(89,60,31,0.5)' olarak değiştirin.

Simgeyi Değiştir

Değiştirmeniz gereken bir sonraki ve son şey, içerik sekmesindeki simgedir.

Ekstra: Divi'nin Yeni Kutu Gölge Seçeneğini Satıra Ekleme

Son güncelleme ile artık satırlara, modüllere ve bölümlere kutu gölgeleri de ekleyebilirsiniz. Bu örnek için, satıra bir kutu gölgesi ekleyeceğiz. Bu, biraz derinlik yaratmaya ve kahraman bölümümüzde yazılı içeriği vurgulamaya yardımcı olacaktır.

• Kutu Gölgesi Yatay Konumu: -3px
• Kutu Gölge Dikey Konumu: 31px
• Kutu Gölge Bulanıklığı Gücü: 79px
• Kutu Gölge Yayılma Gücü: -4px
• Gölge Rengi: #424242
• Kutu Gölge Konumu: Dış Gölge

Sonuç

Bu gönderiyi takip ettikten sonra masaüstünde elde etmeniz gereken sonuca başka bir hızlı sonuç alalım:

Ve mobilde:

Son düşünceler

Bu gönderide, size kahraman bölümlerinde farklı bir yaklaşım gösterdik. Divi ile önceden yaptığımız bir örneği nasıl yeniden oluşturacağınızı göstererek size bazı ipuçları verdik ve bu ipuçlarını ayrıntılı bir şekilde açıkladık. Herhangi bir sorunuz veya öneriniz varsa; Aşağıdaki yorum bölümünde bir yorum bıraktığınızdan emin olun!

Büyük bir duyuruyu, faydalı ipucunu veya Divi freebie'sini asla kaçırmamak için e-posta bültenimize ve YouTube kanalımıza abone olmayı unutmayın!

Ellagrin / Shutterstock.com tarafından Öne Çıkan Görsel