Bir sonraki divi projeniz için canlı bir bölüm başlığı nasıl yapılır
Çoğunuzun her zaman benzersiz yaptığınız bir web sitesi oluşturmanın yeni yollarını aradığını biliyoruz. Divi ile, web sitenizi diğerlerinden öne çıkarmanın birçok yolu vardır. Bugün size Divi varsayılan seçeneğinin inanılmaz bir bölümünü nasıl oluşturabileceğinizi göstereceğiz. Çarpıcı bir tasarım yapmak, genel sayfa yapısını korumak ve navigasyonu pürüzsüz tutmak istiyorsanız bu yaklaşım çok iyidir. Haydi Yapalım şunu! Önizleme Eğiticiye girmeden önce, farklı ekran boyutlarında elde etmek istediğimiz sonuçlara bakalım:
Yaratmaya başlayalım! Yeni bir sayfa açarak, görsel oluşturucuya geçip ilk parçanızı ekleyerek başlangıçın yeni normal kısmını ekleyin. Herhangi bir çizgi veya modül eklemeden, parçanın ayarlarını açın ve birkaç rulman ekleyin:Üst dolgu: 0px
Aşağıda dolgu: 0px Sütun yapısının yeni bir satırı ekleyin, aşağıdaki sütun yapısını kullanarak satır ekleyerek devam edin: Arka Plan Rengi Bir sonraki satır ayarlarını açın ve arka plan rengini tüm çizginize ekleyin:
Arka plan rengi: #f9f9f9 Sütun 1 gradyan arka planı, ilk sütununa arka plan ince degradeleri ekleyin. Bu, sütunlar arasında üst üste binen başlıklar oluşturulmasına yardımcı olacaktır.
Renk 1: #0031C4
Renk 2: #00AFF
Sütun 1 Degrade Yönü: 125deg Yapıştırıcı, tüm ekran genişliğini karşıladığından emin olmak için sıra alanınızı da değiştirin.
Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Yüksek sütunu eşitleyin: evet Son mesafe, alan ayarlarını farklı ekran boyutlarına göre değiştirin:
Üst dolgu: 0px
Alt dolgu: 0pxkolom 2 dolgu üst: 200px
Sütun 2 Dolgu Alt: 200px
Sol dolgu 2 sütun: 350px (masaüstü), 50px (tablet ve cep telefonu)
Sütun 2 Dolgu Sağ: 50px
Başlık Metin Modülü Bölümünü Sütun 1 H2 Metin Ayarlarına Ekleyin Şimdi zaten tüm satır ayarları var, modül eklemeye başlayabiliriz. İlk sütunla başlayacağız. Burada ihtiyacımız olan tek modül metin modülü. İçerik kutusuna H2 içeriği ekledikten sonra, metin ayarlarını devam ettirin ve H2: Başlık 2 Font Ağırlığı: Ultra Kalın
Başlık 2 yazı tipi stili: büyük harf
Başlık 2 Metin Seviyesi: Orta
Başlık 2 Renk Metni: #ffffff
Başlık 2 Metin Boyutu: 150px
POS 2 Sıra Yükseklik: 1.25EM
Başlık 2 Dikey Uzunluk Gölge Metin: -0,55EM
Başlık 2 Gölge Metin Rengi: RGBA (0.255,255.0.25)
Masaüstü, tablet ve cep telefonundaki farklı sütunlar arasındaki örtüşen mesafe. Çakmak için, metin modülümüzün boşluk ayarlarında bazı değişiklikler yapacağız: Üst kenar: 325px (masaüstü), 150 piksel (tablet ve cep telefonu)
Alt marj: 325px, -120px (tablet), -110px (telefon)
Sağ kenar boşluğu:% -100 (masaüstü), 0px (tablet ve cep telefonu)
Filtre son olarak, ancak en az değil, görünen metin için renk farklılıkları yapmak için bir karışım modu kullanacağız. Karışık Mod: Geniş
Başlık Metin Modülünü Sütun 2 H3 Metin Ayarlarına Ekleyin İkinci sütuna geçelim. Orada, ihtiyacımız olan ilk modül başlık metin modülü. H3 içeriğinizi ekledikten sonra H3 metin ayarlarını değiştirin: Başlık 3 Font Ağırlığı: Yarı Kalınlık
Başlık 3 Renk Metni: #00Aeff
Başlık 3 Metin Boyutu: 60px
Başlık alanı 3 harf: -3px
Bir sonraki alt kenar boşluğunu ekleyerek biraz boşluk için mesafe: Alt kenar boşluğu: 50 piksel
Bölücü modülünü sütun 2 renklerine ekleyin İhtiyacımız olan ikinci modülü böler. Renk ayarlarını açın ve rengi renk paleti tasarımına uyacak şekilde değiştirin: renk bölücü: #00ffff Yapıştırıcı Ardından, boyut ayarlarını değiştirin:
Yükseklik: 56 piksel
Genişlik:% 75
Açıklama metin modülünü Sütun 2 metin ayarlarına ekleyin Aşağıdaki metin ayarlarını kullanarak açıklama metin modülünü ekleyerek devam edin:
Metin Boyutu: 17 piksel
Metin Oryantasyonu: haklı çıkar
Yapışkan Değişiklik Ayarı Boyutu Sonraki:
Boyut:% 70 (masaüstü),% 100 (tablet ve cep telefonu) Mesafe Alt kenar boşluğunu kullanarak bu modülün altına biraz boşluk ekleyin:
Alt kenar boşluğu: 50 piksel Düğme Modülünü Sütun 2’ye Ekleyin Bu sütunda ihtiyacımız olan son modül düğmesini ayarlayın Düğme Modülü. CTA ekledikten sonra düğme ayarlarını değiştirin:
Düğmeler için özel bir stil kullanın: evet Metin Boyutu Düğmesi: 17 piksel
Metin Renk Düğmesi: #fffffff
Arka Plan Renk Düğmesi: #00Aeff
Düğmenin sınır genişliği: 0px
Yarıçap düğmesi sınırı: 100 piksel
Mektup Mesafe Düğmesi: -1px
Mektup Ağırlığı: Çok kalın
Yazı tipi stili: büyük harf
Mesafe ve düğmeye daha temiz bir görünüm ve his vermek için biraz dolgu ekleyeceğiz:
Üst dolgu: 10 piksel Dolgu Alt: 10 piksel
Sol dolgu: 30px
Sağ dolgu: 30px
Son ama -LEast kutusunun gölgesi, bölümümüze biraz derinlik katmak için pürüzsüz bir kutu gölgesi kullanacağız:
Bulanık Güç Gölgesi Kutusu: 54 piksel Kutunun gölgesinin dağılımının gücü: -8px
Gölge Rengi: RGBA (0.0,0,0,3)
Klon, ikinci kısmı yapmak için tüm kopyalarını değiştirir, sadece yaptığımız klon yaparız ve sonra tüm kopyaları değiştiririz.
Bu yeni parça için satırın arka plan rengini değiştirin, başka bir renk paleti kullanacağız. Satırınızın arka plan rengini değiştirerek başlayın. Arka plan rengi: #effefef Gradyan sütunu 1’in arka planını değiştirin, ardından diğer gradyanların arka planını da seçin. Renk 1: #5F00A8
Renk 2: #9000ff Gölgemizin renk kısmının başlığını değiştirin, metnin gölgesinin rengiyle yeni renk paletimizle eşleşir:
Başlık 2 Gölge Metin Rengi: RGBA (255,0,255.0.24)
Uzay alanı ayarlarını değiştirin, kullandığınız kopyanın uzunluğuna bağlı olarak, negatif bir sağ marjla oynamanız gerekir. Sağ kenar boşluğu:% -110 (masaüstü)
Metin Başlığı Modülü Renk Metinini Değiştir Sonra, Sütun 2’deki Metin Renk Başlığı Metin Modülünü Değiştirin. Başlık 3 Renk Metni: #9000ff
Bölücünün rengini de değiştirin, tasarıma göre bölmenin rengini yapın. Renk: #FF00FF
Düğmenin arka plan rengini değiştirin, tamamlamak için, düğme modülünün arka plan rengini değiştirmeniz gerekir. Arka Plan Renk Düğmesi: #9000ff
Önizleme Şimdi tüm adımlardan geçtik, nihai sonuçlara farklı ekran boyutlarında bakalım: Son Zihin Web tasarımınızı diğer web sitelerinden öne çıkarmanın birçok yolu vardır. Bu yazıda, sadece varsayılan Divi seçeneğini kullanarak, genel olarak nasıl inanılmaz bir parça başlığı ve parçaları nasıl yapacağınızı gösterdik. Sütun gradyanının arka planını, şaşırtıcı nihai sonuçlar oluşturmak için üst üste binen metin modülleri, metin gölgeleri ve karışık modlarla birleştirdik. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
