için genel bir başlık oluşturmanız gerekiyor web sitesi Divi'yle mi?
Ekranınızın her yerinde genel bir başlık görünecektir. Site Web, bir sayfaya veya gönderiye farklı bir başlık atamadıysanız.
Hadi başlayalım!
anket
İşte tasarlayacağımız genel başlığın bir önizlemesi.
Ana menünüzü yapılandırın
WordPress sitenizin görünüm ayarlarında menünüzü oluşturarak başlayın.
Divi altındaki Tema Oluşturucu seçeneğine erişin
seçeneklerinde Divi teması, Tema Oluşturucu'yu tıklayın. Orada bir kez fark edeceksiniz web sitesi şablonu Varsayılan.
Genel bir başlık ekleyin ve oluşturun
Le web sitesi şablonu varsayılan, özel genel başlığınızı, genel gövdenizi ve genel altbilginizi oluşturmaya başlayabileceğiniz yerdir. "Global Başlık Ekle"ye tıklayın ve işleme başlamak için "Global Başlık Oluştur"a tıklayarak devam edin.
Bölüm ayarları
boyutlandırma
Sayfada bulacağınız bölüm ayarlarını açın, Style sekmesinde farklı ekran boyutlarında boyutları değiştirin.
- Maksimum genişlik: %100
- Maksimum genişlik: 1280 piksel (PC ve tablet için), %100 (mobil için)
aralık
Tüm üst ve alt iç kenar boşluklarını kaldırın
- İç Kenar Boşluğu Tepe Noktası: 0px
- Alt İç Kenar Boşluğu: 0px
sınır
Şimdi bölümün sol ve sağ alt köşelerine bir kenarlık yarıçapı ekleyin.
- Sol alt: 50 piksel
- Sağ alt: 50 piksel
Gölge kutusu
Ayrıca ince bir kutu gölgesi ekleyelim.
- Kutu Gölge Bulanıklığı Gücü: 60px
- Altyazı yazı tipi rengi: rgba(0,0,0,0.13)
görünürlük
- Yatay taşma: Görünür
- Dikey taşma: Görünür
Başlığa yeni bir satır ayırın
Genel bölüm ayarlarını tamamladığımıza göre artık satır eklemeye başlayabiliriz. Toplamda iki satıra ihtiyacımız olacak; biri başlığa ayrılmış ve diğeri menü öğelerinin görüntülenmesine izin veriyor. Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek başlıkla başlayacağız:
Satır Parametreleri
Arka Plan Ayarları
Hatta herhangi bir modül eklemeden hat ayarlarını açın ve arka plan rengini değiştirin.
- Arka plan: #38383F
boyutlandırma
Ardından satır boyutlandırma parametrelerini değiştirin.
- Özel Oluk Genişliğini Kullan: EVET
- Sütun aralığı: 1
- Maksimum genişlik: %100
- Maksimum genişlik: %100
Görüntüleme
Şimdi bu CSS kod satırını ana satır öğesine ekleyerek sütunların daha küçük ekranlarda yan yana görünmesini sağlayalım.
01
display: flex;
1. sütuna resim modülü ekleyin
Logoyu indir
Satır ayarlarını tamamladıktan sonra modül eklemeye başlama zamanı. 1. sütuna bir resim modülü ekleyin ve logonuzu yükleyin.
hizalanma
Stil sekmesine gidin ve resmi sola hizalayın.
boyutlandırma
Ayrıca modülün Genişliğini de değiştirin.
aralık
Ayrıca özel kenar boşluğu değerleri ekleyin.
2. sütuna sosyal medya takip modülünü ekleyin
Sosyal ağlar ekleyin
Gelelim ikinci sütuna. Orada bir sosyal medya takip modülüne ihtiyacımız olacak. Seçtiğiniz sosyal ağları ekleyin. İstediğiniz kadar sosyal medya ekleyebilirsiniz.
Sosyal ağ arka plan rengi
Ardından, her bir sosyal ağı ayrı ayrı açın ve arka plan rengini tamamen şeffaf bir renge değiştirin.
- Arka plan rengi: rgba (0,0,0,0)
hizalanma
Normal modül ayarlarına geri dönün ve ardından modülün tam hizalamasını değiştirin.
ikon
Simge ayarlarını da değiştirin.
- Simge Rengi: #FFFFFF
- Özel simge boyutunu kullan: Evet
- Simge yazı tipi boyutu: 16px (PC ve tablet), 12px (telefon)
aralık
Bir üst kenar boşluğu ekleyin.
Düğme modülünü sütun 3'e ekleyin
Üçüncü sütuna gidin ve seçtiğiniz bir metni içeren bir Düğme modülü ekleyin.
hizalanma
Stil sekmesinde düğmenin hizalamasını değiştirin.
Düğme Ayarları
Düğme ayarlarını aşağıdaki gibi özelleştirin:
- Düğme için özel stiller kullanın: Evet
- Düğme Metin Boyutu: 12px (masaüstü), 10px (tablet), 8px (telefon)
- Düğme metin rengi: #ffffff
- Arka plan düğmesi: #ffae25
- Düğme Kenar Genişliği: 0 piksel
- Kenar Yarıçapı düğmesi: 0 piksel
- Düğme harf aralığı: 5 piksel (masaüstü), 3 piksel (tablet ve telefon)
- Yazı Tipi Düğmesi: Hiçbirini Aç
- Yumuşak Işık düğmesi: Kalın metin
- Düğme stilini kopyala: TT
aralık
Kenar boşluğu değerlerini özelleştirin.
Menü çubuğuna yeni bir satır ayırın
Global başlığa ayrılmış satırı doldurduktan sonra, hemen altına başka bir satır ekleyebilirsiniz.
Satır Parametreleri
boyutlandırma
Henüz herhangi bir modül eklemeden hat ayarlarını açın ve Stil sekmesinde boyutlandırma ayarlarını değiştirin.
aralık
Ardından tüm alt ve üst kenar boşluklarını kaldırın.
Sütuna bir Menü modülü ekleyin
Seçim Menüsü
Ardından, sütuna bir Menü modülü ekleyin ve bu öğreticinin ilk bölümünde oluşturduğunuz menüyü seçin.
hüküm
Stil sekmesine geçin ve düzen ayarlarını aşağıdaki gibi değiştirin:
Bağlantıları
Ayrıca Stil sekmesinde aktif bağlantının rengini değiştirin.
- Aktif bağlantı rengi: #ffae25
Açılır menü
Açılır menü ayarlarındaki açılır menü çizgisi rengi için de aynısını yapın.
- Açılır satır rengi: #ffae25
ikon
- Hamburger menü simgesi rengi: #ffae25
Menü metni
Menü metin ayarları ile.
- Menü yazı tipi: Prata
- Menü metin rengi: #000000
Başlık ve menü çubuğunun üstte kalmasını sağlayın
Bölüm ayarlarını aç
İkinci satırı tamamladıktan sonra tek yapmanız gereken bölümün sayfalarımızın ve gönderilerimizin en üstünde kalmasını sağlamak. Bunu yapmak için bölüm ayarlarını tekrar açacağız.
Ana öğeye özel CSS ekleyin
Ardından, gelişmiş sekmesine gideceğiz ve bölümün ana öğesine birkaç satır CSS kodu ekleyeceğiz.
01
position: fixed;02
top: 0;03
left: 0;04
right: 0;
Genel başlık ve tema oluşturucu seçeneklerini kaydedin
Genel başlık tasarımının tamamını tamamladıktan sonra, şablon düzeninden çıkmadan önce tasarımı kaydettiğinizden emin olun. Şablon düzeninden çıktığınızda, tüm tema oluşturucu değişikliklerinizi kaydedin ve işiniz bitti!
anket
Tüm adımların üzerinden geçtik, şimdi sonuca son bir göz atalım.
Sonuç
Bu makalede, Divi'nin yeni tema oluşturucusuyla nasıl özel bir genel başlık oluşturulacağını gösterdik. Bu eğitim, güzel başlıklar oluşturmanın ve bunları tüm sayfanıza uygulamanın ne kadar kolay olduğunu gösterir. Site Web veya belirli özel gönderi türleri.
Web sitenizi Tema Oluşturucu ile özelleştirmenize yardımcı olacağını umuyoruz.
Herhangi bir sorunuz veya öneriniz varsa, lütfen bize yorum bırakın yorumlar bölümü Aşağıda.
...
