Divi'nin Fullwidth Header modülüyle nasıl Kahraman bölümü oluşturacağınızı bilmek ister misiniz?
Bir Kahraman bölümü oluşturmak, dikkat çekmenin harika bir yoludur. içindekiler sayfanız için önemlidir. Bu bir içindekiler Hikayenizi anlatmak, işinizle ilgili bilgileri paylaşmak veya bir ürün veya hizmeti vurgulamak için kullanabileceğiniz büyük boyut.
Divi'nin Tam Genişlikli Başlık modülü ile bir başlık, alt başlık, iki düğme, gövde metni, logo resmi ve başlık resmi ekleyebilirsiniz. Elbette, resimler, degradeler, renkler, desenler ve maskeler eklemek ve birleştirmek için arka plan seçeneklerini de kullanabilirsiniz.
Çoklu görüntü, metin ve düğme modülleri arasında geçiş yapmak zorunda kalmadan tüm bu ayarları modül ayarlarında değiştirebilirsiniz.
Bu eğitimde, Divi'nin Fullwidth Header modülünü kullanarak nasıl çekici ve göz alıcı bir Hero bölümü oluşturacağınızı göstereceğiz.
Hadi gidelim !
anket
İşte tasarlayacağımız şeyin bir önizlemesi.
Başlamak için neye ihtiyacınız var?
Başlamadan önce, bilgisayarınızda Divi'nin en son sürümüne sahip olduğunuzdan emin olun. Site Web.
Artık başlamaya hazırsınız!
Divi'nin Tam Genişlik Başlık Modülü ile Bir Kahraman Bölümü Nasıl Oluşturulur
Ayrıca okuyun: Divi: Resimlerinizi geliştirmek için "Gradient Builder" nasıl kullanılır?
Önceden tanımlanmış bir düzen ile yeni bir sayfa oluşturun
Divi kitaplığından önceden tanımlanmış bir düzen kullanarak başlayalım. Bu tasarım için ana sayfayı kullanacağız veteriner düzeni paketi.
Worpress kontrol panelinden, sayfanıza yeni bir sayfa ekleyin. Site Web
Bir başlık verin, ardından seçeneği seçin Divi Builder'ı kullanın.
Bu örnek için Divi kitaplığından önceden tanımlanmış bir düzen kullanacağız. bu yüzden seç Düzenlere Göz Atın.
Düzeni bulun ve seçin Köpek yetiştiricileri.
seçmek Bu Düzeni Kullan sayfanıza düzeni eklemek için.
Artık tasarlamaya hazırız.
Fullwidth Header modülünü ekleyin
Fullwidth Header modülünü kullanarak kahraman bölümünü yeniden oluşturacağız. Mevcut başlığın altına, sayfaya tam genişlikte yeni bir bölüm ekleyin.
Bölüme bir Tam Genişlik Üstbilgi modülü ekleyin.
Ardından, orijinal başlık bölümünü silin.
Fullwidth Header modülünü özelleştirin
İçerik ekle
Modül ayarlarını açın ve ekleyin içindekiler modülün yanında:
- Ünvan: Veteriner
- Altyazı: Divive. En iyi arkadaşlarımıza hizmet et
- Düğme #1: Tüm Hizmetler
- Düğme #2: Randevu alın
- Gövde: Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla quis lorem ut libero mensuada feugiat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta.
Ardından, bir başlık resmi ekleyin.
Degrade arka plan ayarları
Arka plan ayarlarına gidin. Orijinal arka plan rengini silin, ardından bir arka plan gradyanı ekleyin.
- %0: rgba(255,170,205,0.48)
- %40: rgba(110,66,255,0.24)
- %87: rgba(124,239,255,0.71)
- Gradyan Türü: Eliptik
- Gradyan Konumu: Sağ
Ardından sekmeyi seçin Arka Plan Maskesi ve bir arka plan maskesi ekleyin.
- Maske Arka Planı: Köşe Blobu
- Maske Rengi: #FFFFFF
- Dönüşüm: dikey
Metni özelleştir
Sekmeye geç Dizayn ve başlık ayarlarını değiştirin
- Başlık Yazı Tipi: Nunito
- Başlık Yazı Tipi Ağırlığı: Ultra Kalın
- Yazı Tipi Stili: TT (Büyük Harf)
- Başlık Metin Rengi: #a9cb6b
- Metin Boyutu: 14px
- Başlık Harf Aralığı: 2px
bölümüne git Gövde metni ve yazı tipini özelleştirin.
- Metin Rengi: #000000
- Gövde Metni Boyutu:
- Masaüstü: 18 piksel
- Telefon: 14 piksel
- Gövde Çizgisi Yüksekliği: 1.8em
Ayrıca bakınız: Divi: "Tam Genişlik Menüsü" modülünün sepet ve arama simgeleri nasıl özelleştirilir
Ardından, altyazı ayarlarını açın ve yazı tipini özelleştirin.
- Altyazı Fontu : Nunito
- Altyazı Yazı Tipi Ağırlığı: Kalın
- Metin Rengi: #000000
Son olarak, metnin boyutunu değiştirin
- Altyazı Metni Boyutu:
- Masaüstü: 56 piksel
- Hareketli: 32px
- Altyazı Satır Yüksekliği: 1.2em
1. Düğmeyi Özelleştir
Ardından, düğme stillerini özelleştireceğiz. Birinci düğme için özel stilleri etkinleştirerek başlayın, ardından metin boyutunu ayarlayın.
- Düğme İçin Özel Stilleri Kullan: EVET
- Düğme Bir Metin Boyutu: 14px
Düğmeye bir arka plan gradyanı ekleyin. Gradyan değerleri aşağıdaki gibidir:
- %58: #316EFF
- %100: #1D2B60
- Gradyan Yönü: 90deg
Ardından, kenarlık ayarlarını ve yazı tipi ayarlarını özelleştirin.
- Düğme Bir:
- Kenar Genişliği: 0px
- Sınır Yarıçapı: 80px
- Harf Aralığı: 2px
- Yazı Tipi: Nunito
- Yazı Tipi Ağırlığı: Ultra Kalın
- Tarz: TT (Büyük harfle yazılmış)
- Düğme Bir Simgeyi Göster: HAYIR
Ardından, masaüstü tasarımı için kenar boşluğu ve dolgu ayarlarını özelleştirin ve bir kutu gölgesi ekleyin.
- Düğme Bir Kenar Boşluğu
- Üst: 200 piksel
- Alt: 0 piksel
- Düğme Bir Dolgu:
- Üst: 16 piksel
- Alt: 16 piksel
- Sol: 2em
- Sağ: 50em
- Kutu Gölgesi: Görüntü Yakalama
Mobil cihazlarda farklı kenar boşluğu ve dolgu değerleri ayarlamak için duyarlı ayarları kullanın.
- Düğme Bir Kenar Boşluğu-Üst Mobil: 25px
- Düğme Bir Dolgu-Sağ-Mobil: 10em
2. Düğmeyi Özelleştir
İlk önce, 1 numaralı düğmeye sağ tıklayın ve tıklayın Düğme Bir Stilleri Kopyala.
Ardından, ikinci düğmeye sağ tıklayın ve stilleri 1 numaralı düğmeden yapıştırın.
Şimdi ikinci düğmeyi özelleştirebiliriz. Metin rengini değiştirin.
- Düğme İki Metin Rengi: #121F60
İkinci düğme için arka plan gradyanını özelleştirin.
- %30: rgba(0,229,198,0)
- %100: #00e5c6
Mobil cihazlar için arka plan gradyanını ayarlamak için duyarlı ayarları kullanın.
- %0: rgba(0,229,198,0)
- %100: #00e5c6
Ardından, masaüstü tasarımı için kenar boşluğunu ve dolguyu ayarlayın.
- Düğme İki Kenar Boşluğu:
- Üst: 0 piksel
- Alt: 0 piksel
- Sol: %30
- Düğme İki Dolgusu:
- Üst: 16 piksel
- Alt: 16 piksel
- Sol: 48em
- Sağ: 2em
Mobil tasarım için farklı kenar boşluğu ve dolgu değerleri ayarlamak için responsifq ayarlarını kullanın.
- Düğme İki Marj-Sol-Mobil: %5
- Düğme İki Dolgusu:
- Sol-Mobil: %35
- Sağ Mobil: %5
Özel CSS
Son olarak, tasarım çalışmasının büyük kısmı yapılır. Şimdi tasarımı tamamlamak için özel CSS eklememiz gerekiyor. Sekmeye geç gelişmiş ve bölümü aç özel CSS.
İlk olarak, başlık görüntüsü için CSS ile başlayalım. Bu CSS, başlık görüntüsünün düğmenin üzerinde görüntülenmesini sağlar.
z-index: 1;
position:relative;
Ardından, başlıkta özel CSS. Duyarlı ayarları kullanarak masaüstü ve mobil görünümler için farklı değerler belirleyeceğiz.
Masaüstü bilgisayar için:
padding-top:50px;
padding-bottom:30px;
Mobil için:
padding-top:5px;
padding-bottom:10px;
Son olarak, aşağıdaki CSS'yi birinci ve ikinci düğmelere ekleyin.
white-space: nowrap;
Nihai sonuç
İşte tam genişlikte başlık kahraman bölümümüzün son tasarımı.
Ayrıca Oku: Divi: Atlıkarınca olarak ekip üyeleri bölümü nasıl oluşturulur
DIVI'yı Şimdi İndirin !!!
Sonuç
Fullwith Header modülü, hizmetlerinizin reklamını yapmak için kolayca güzel bir Kahraman bölümü oluşturmanıza ve ziyaretçi ne hakkında konuşuyorsun Site Web.
Yerleşik ayarlar, başlığın her yönünü özelleştirmeyi kolaylaştırır ve hepsi tek bir yerdedir, bu nedenle Kahraman bölümünüzü oluşturmak için birden fazla modül arasında geçiş yapmanız gerekmez.
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, 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ş.
...
