Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor.

Fullwidth Header modülü ile bir Kahraman bölümünün nasıl oluşturulacağını bilmek ister misiniz? Divi ?

Bir Kahraman bölümü oluşturmak, sayfanızdaki önemli içeriğe dikkat çekmenin harika bir yoludur. Bu, hikayenizi anlatmak, işinizle ilgili bilgileri paylaşmak veya bir ürün veya hizmeti öne çıkarmak için kullanabileceğiniz büyük içeriktir.

Fullwidth Header modülü ile Divi, 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.

Divi'nin Fullwidth Header modülünü kullanarak bir Kahraman bölümü nasıl oluşturulur
Divi'nin Fullwidth Header modülünü kullanarak bir Kahraman bölümü nasıl oluşturulur

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

Divi

Bir başlık verin, ardından seçeneği seçin Divi Builder'ı kullanın.

Divi

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.

Elementor ile web sitenizi kolayca oluşturun

Elementor oluşturmanıza izin verir Kolay ve Ücretsiz profesyonel bir görünüme sahip herhangi bir web sitesi veya blog tasarımı. Kendiniz yapabileceğiniz bir web sitesi için çok fazla ödeme yapmayı bırakın.

Bölüme bir Tam Genişlik Üstbilgi modülü ekleyin.

Tam Genişlik Başlık modülü

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 aşağıdaki içeriği modüle ekleyin:

  • Ü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.

Web siteniz için en iyi araçları keşfedin

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

  • 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'nin Fullwidth Header modülünü kullanarak bir Kahraman bölümü nasıl oluşturulur
Divi'nin Fullwidth Header modülünü kullanarak bir Kahraman bölümü nasıl oluşturulur

DIVI'yı Şimdi İndirin !!!

Sonuç

İndirilecek 11 milyondan fazla araç

Envato Elements, web sitenizin tüm yönlerini oluşturmak ve geliştirmek için en iyi kaynakları sunar. Milyonlarca WordPress şablonu, grafiği, ses kaynağı ve çok daha fazlasını bulacaksınız. Yeni başlayanlar için mükemmel.

Fullwidth Header modülü, hizmetlerinizin reklamını yapmak ve ziyaretçilerinize web sitenizin ne hakkında olduğunu anlatmak için kolayca güzel bir Kahraman bölümü oluşturmanıza olanak tanır.

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ş.

...

%d bu sayfayı beğendi blogcular: