Divi Tam Genişlikli Başlık Modülünüzde Bir Görüntüye Nasıl Stil Verilir

Divi'nin Tam Genişlik Başlık Modülü, Divi kullanıcılarının başlıkları için güzel görüntüler ve düzenler oluşturmasına olanak tanıyan birçok görüntü stili seçeneği içerir. Başlık görüntüsü, ilginç düzenler ve tasarımlar oluşturmak için birçok şekilde şekillendirilebilir. Çeşitli metin ve düğme tasarımları ile birleştiğinde daha da ilginç hale geliyor. Bu gönderide, Divi Fullwidth Header Module'ünüzde bir görüntünün nasıl stillendirileceğini göreceğiz ve Fullwidth Header Module'ünüzü tasarlamanıza yardımcı olacak üç örnek paylaşacağız.

Başlayalım!

Ön izleme

Desktop Fullwidth Header Image Örnek Bir

Phone Fullwidth Header Image Örnek Bir

Masaüstü Tam Genişlik Üstbilgi Resmi Örneği İki

Telefon Tam Genişlik Üstbilgi Resmi Örneği İki

Masaüstü Tam Genişlikli Başlık Resmi Örneği Üç

Telefon Tam Genişlik Başlık Resmi Örneği Üç

Tam Genişlik Başlığınıza Bir Resim Ekleyin

İşte bu örnekte kullanacağımız tam genişlikte başlık. İlk olarak, nasıl inşa edileceğine bakalım. Divi'de bulunan ücretsiz Flower Farm Layout Pack'teki görüntüleri ve tasarım sıralarını kullanıyoruz.

Divi Fullwidth Header modülünü sayfanıza eklemek için tek sütunlu bir satıra sahip yeni bir bölüm kapsayıcısına ihtiyacınız olacak. Bunu aldıktan sonra, Tam Genişlik Başlık Modülünü satırınızın sütununa ekleyin.

Tam Genişlik Başlık Metni

Ardından, Başlığınızı, Altyazınızı, Birinci Düğme metnini, İkinci Düğme metnini ve İçeriğinizi ekleyin.

• Başlık: Divi Çiçek Çiftliğine Hoş Geldiniz
• Altyazı: Hakkımızda
• Birinci Düğme: Daha Fazla Bilgi
• İkinci Düğme: Alışveriş
• İçerik: metniniz

Başlık görüntü

Görüntüler seçeneğine ilerleyin, Başlık Görüntüsü'nü seçin ve görüntünüzü ekleyin.

Arka fon

Ardından, Arka Plan seçeneğine ilerleyin, Degrade sekmesini seçin ve dört Degrade Durağı ekleyin:

• Gradyan Durdurma 1: %0, #000000
• Dur 2: %25, rgba(0,0,0,0.8)
• Gradyan 3: %75, rgba(0,0,0,0.8)
• Gradyan 4: %100, #000000

Ardından, Gradyanı Arka Plan Resminin Üstüne Yerleştir'i etkinleştirin. Diğer ayarları varsayılanlarında bırakın.

• Gradyanı Arka Plan Resminin Üstüne Yerleştir: Evet

Arka Plan Resmi sekmesini seçin ve resminizi ekleyin. Ardından, Tam Genişlik Başlık Modülünü şekillendireceğiz.

Başlık Metni

Tasarım sekmesini seçin ve Başlık Metni'ne gidin. H1'i seçin ve Yazı Tipi için Italiana'yı seçin. Hizalamayı Sola ayarlayın ve Renk için beyazı seçin.

• Başlık Seviyesi: H1
• Yazı Tipi: İtalyanca
• Hizalama: Sol
• Renk: #ffffff

Masaüstü Boyutunu 80 piksele, tablet Boyutunu 40 piksele ve telefon Boyutunu 32 piksele ayarlayın.

• Boyut: 80px Masaüstü, 40px Tablet, 32px Telefon

Gövde metni

Ardından, Gövde Metni'ne gidin . Hizalamayı Sola ayarlayın, Yazı Tipi için Roboto'yu seçin ve Rengi beyaz olarak değiştirin.

• Hizalama: Sol
• Yazı Tipi: Roboto
• Renk: #ffffff

Masaüstü Boyutunu 18 piksel, tablet Boyutunu 16 piksel ve telefon Boyutunu 14 piksel olarak değiştirin.

• Metin Boyutu: 18px Masaüstü, 16px Tablet, 14px Telefon

Altyazı Metni

Ardından, Altyazı Metni seçeneğine ilerleyin. Yazı Tipi için Roboto'yu seçin ve Ağırlığı Ağır olarak ayarlayın. Stil için TT'yi seçin, Hizalamayı Sola ayarlayın ve Rengi #b5a68f olarak değiştirin.

• Yazı Tipi: Roboto
• Ağırlık: Ağır
• stil: TT
• Hizalama: Sol
• Renk: #b5a68f

Ardından, Aralığı 0,2em ve Satır Yüksekliğini 1,7em olarak değiştirin. Yazı Tipi Boyutunu varsayılan değeri olan 18 pikselde bırakın.

• Aralık: 0.2em
• Çizgi Yüksekliği: 1.7em

Düğme Bir

Düğme Bir'e ilerleyin ve Düğme Bir için Özel Stilleri Kullan'ı seçin. Yazı Tipi Boyutunu 14 piksel, Metin Rengini #aa6a3c ve Arka Plan Rengini #f5f3ef olarak ayarlayın.

• Düğme Bir için Özel Stilleri Kullan: Evet
• Yazı Tipi Boyutu: 14px
• Metin Rengi: #aa6a3c
• Arka Plan Rengi: #f5f3ef

Kenar Rengini #aa6a3c olarak, Harf Aralığını 0.15em olarak, Yazı Tipini Roboto olarak, Ağırlığı Kalın olarak ve Stili TT olarak ayarlayın.

• Kenar Rengi: #aa6a3c
• Harf Aralığı: 0.15em
• Yazı Tipi: Roboto
• Ağırlık: Kalın
• stil: TT

Düğme Bir Doldurma seçeneğine ilerleyin. Üst ve Alt Dolguyu 20 piksel ve Sol ve Sağ Dolguyu 30 piksel olarak değiştirin.

• Dolgu: Üst, Alt 20 piksel, Sol, Sağ 30 piksel

Düğme İki

Ardından, Düğme İki'ye ilerleyin. İkinci Düğme için Özel Stilleri Kullan'ı seçin. Yazı Tipi Boyutunu 14 piksele, Metin Rengini beyaza ve Arka Plan Rengini rgba(255,255,255,0) olarak ayarlayın.

• İkinci Düğme için Özel Stilleri Kullan: Evet
• Yazı Tipi Boyutu: 14px
• Metin Rengi: #ffffff
• Arka Plan Rengi: rgba(255,255,255,0)

Kenar Rengini beyaza, Harf Aralığını 0.15em'e, Yazı Tipi'ni Roboto'ya, Ağırlığı Kalın'a ve Stili TT'ye ayarlayın.

• Kenar Rengi: #ffffff
• Harf Aralığı: 0.15em
• Yazı Tipi: Roboto
• Ağırlık: Kalın
• stil: TT

Düğme İki Dolgusu'na ilerleyin ve Üst ve Alt Dolguyu 20 piksele ve Sol ve Sağ Dolguyu 30 piksele ayarlayın. Fullwidth Header Module stili bu kadar. Şimdi, resme stil vermenin üç yolunu göreceğiz.

• Dolgu: Üst, Alt 20 piksel, Sol, Sağ 30 piksel

Tam Genişlikli Başlık Görüntü Stili Örnekleri

Başlangıç ​​noktası olarak düzenimizi kullanan üç örneğe bir göz atın. Örneklerin her biri için düzende bazı ayarlamalar yapacağım.

Tam Genişlikli Başlık Resmi Örneği Bir

İlk Tam Genişlikli Başlık Resmi örneğimiz için, kenarlıklı yuvarlak bir üst kısım oluşturacağız. Tasarım sekmesine gidin ve Görüntü'ye gidin. Değerlerin senkronizasyonunu kaldırın ve Üst Kenarlığı 400 piksel olarak değiştirin.

• Sağ Üst ve Sol Kenarlık: 400 piksel
• Alt Sağ ve Sol Kenarlık: 0px

Kenarlık Genişliğini 2 piksel ve Kenarlık Rengini beyaz olarak değiştirin.

• Genişlik: 2 piksel
• Renk: #ffffff

Ardından, ekrandaki yerleşimlerini ayarlamak için metin ve görüntünün Hizalamasını ayarlayacağız. Bu örnekte, resmi ve metni mevcut konumlarında bırakacağız, ancak metin ve düğmeler için dikey hizalamayı değiştireceğiz. Tam Ekran seçildiğinde, Metin seçeneklerinde Dikey Metin Hizalama için bir seçenek açılır.

İlk önce Tasarım sekmesine gidin. Düzen altında, Metin Hizalamasını sağa ayarlayın ve Tam Ekran Yap'ı etkinleştirin.

• Tam Ekran Yap: Evet

Son olarak, Metin seçeneğine ilerleyin. Artık Metin Dikey Hizalama etiketli bir seçenek göreceksiniz. Alt olarak ayarlayın. Modülü kapatın ve ayarlarınızı kaydedin.

• Metin Dikey Hizalama: Alt

Tam Genişlikli Başlık Resmi Örneği İki

Bu örnek için farklı bir düğme metni ve resmi kullanacağız. İlk olarak, Düğme Bir metnini Bilgi olarak değiştirin.

• Düğme Bir Metin: Bilgi

Ardından, Arka Plan'a gidin ve farklı bir resim seçin. Bu görüntü, ekranın genişliğinin yaklaşık 1/3'ünü alacaktır. Arka planla aynı resmi kullanıyorum.

• Başlık Resmi: Büyük Resim

Ardından, Gelişmiş sekmesine gidin ve Başlık Görüntüsü alanına gidin. Genişliği %150 ve Yüksekliği otomatik olarak ayarlamak için CSS ekleyin. Modülü kapatın ve ayarlarınızı kaydedin.

Başlık Resmi CSS'si:

max-width: 150%;
height: auto;

Şimdi resim ve düğme metni yerindeyken ayarlarımızı yapacağız. Ekrandaki yerleşimlerini ayarlamak için metin ve görüntünün Hizalamasını ayarlayabiliriz. İlk önce Tasarım sekmesine gidin. Düzen altında, Metin Hizalamasını Sola Bırakın ve Tam Ekran Yap'ı etkinleştirin.

• Tam Ekran Yap: Evet

Ardından, Başlık Metni'ne gidin ve Hizalamayı Ortaya ayarlayın.

• Başlık Metni Hizalama: Orta

Ardından, Gövde Metni'ne gidin . Metin Hizalamasını Orta olarak değiştirin.

• Hizalama: Merkez

Ardından, Altyazı Metni'ne gidin ve Hizalamayı Ortaya ayarlayın.

• Altyazı Metni Hizalama: Orta

Düğme Bir Kenar Boşluğu'na ilerleyin ve Sol Kenar Boşluğunu masaüstü bilgisayarlar için %29, tabletler için %18 ve telefonlar için %19 olarak değiştirin.

• Düğme Bir Sol Kenar Boşluğu: %29 masaüstü, %18 tablet, %19 telefon

Düğme İki Kenar Boşluğu'na ilerleyin ve Sol Kenar Boşluğunu tabletler için %30 ve telefonlar için %31 olarak değiştirin.

• Düğme İki Sol Kenar Boşluğu: %30 tablet, %31 telefon

Boyutlandırma'ya ilerleyin ve telefonlar için Genişliği %104 olarak ayarlayın. Bu, içeriği dar ekranlar için doğru şekilde ortalar.

• Genişlik: %104 telefon

Tam Genişlikli Başlık Resmi Örneği Üç

İlk önce Tasarım sekmesine gidin. Düzen altında, Metin Hizalamasını Sağa ayarlayın. Benim durumumda, metin sola hizalıdır, ancak hizalamayı belirtmediyseniz sizinki ortalanmış olabilir.

• Metin ve Logo Hizalama: Orta

Görüntü için aşağı kaydırın. Kenar Genişliğini 4 piksel ve Kenar Rengini #b5a68f olarak değiştirin.

• Kenar Genişliği: 4px
• Kenar Rengi: #b5a68f

Ardından, Başlık Metni'ne gidin ve Hizalamayı Ortalanmış olarak değiştirin.

• Başlık Metni Hizalama: Ortalanmış

Gövde Metni'ne gidin ve Hizalamayı Ortalanmış olarak değiştirin.

• Gövde Metni Hizalama: Ortalanmış

Ardından, Altyazı Metni'ne gidin ve Hizalamayı Ortalanmış olarak değiştirin.

• Altyazı Metni Hizalama: Ortalanmış

Ardından, İçerik sekmesine gidin ve Düğme Bir metnini yalnızca telefonlar için Bilgi olarak değiştirin.

• Telefonlar için Button One İçeriği: Bilgi

Tasarım sekmesine geri dönün ve Düğme İki'nin telefon sekmesine %5 Sağ Kenar Boşluğu ekleyin.

• Sağ Kenar Boşluğu: %5 telefon

Son olarak, Boyutlandırma'ya gidin ve İçerik Genişliğini masaüstü bilgisayarlar için %52'ye ve tabletler ve telefonlar için %100'e ayarlayın. Modülü kapatın ve ayarlarınızı kaydedin.

• İçerik Genişliği: %52 masaüstü, %100 tablet ve telefon

Sonuçlar

Desktop Fullwidth Header Image Örnek Bir

Phone Fullwidth Header Image Örnek Bir

Masaüstü Tam Genişlik Üstbilgi Resmi Örneği İki

Telefon Tam Genişlik Üstbilgi Resmi Örneği İki

Masaüstü Tam Genişlikli Başlık Resmi Örneği Üç

Telefon Tam Genişlik Başlık Resmi Örneği Üç

Biten Düşünceler

Divi Fullwidth Header Modülünüzü nasıl şekillendireceğinize bakışımız bu. Görüntüye stil vermek kolaydır ve modül içinde çeşitli yerlere yerleştirilebilir. Modülün çeşitli yerleşim seçenekleri size birçok tasarım olanağı sunar. En iyi kullanıcı deneyimini sağlamak için tasarımlarınızı tüm ekran boyutlarında test ettiğinizden emin olun.

Senden duymak istiyoruz. Resimlerinizi Divi'nin Tam Genişlikli Başlık Modülünde şekillendirdiniz mi? Yorumlarda deneyiminizi bize bildirin.