Divi genel başlığına dinamik bir site başlığının ve bir sloganın nasıl ekleneceğini bilmek, Divi web siteleri oluştururken faydalı olacaktır. Ve bunu yapmak için birkaç iyi neden var. Bir yandan, tüm sitelerin bir logosu yoktur. Site başlığı, iyi bir logo değişimidir. Diğer bir neden, sitenize herkesin göreceği hayati bilgileri dahil ederek markanızı güçlendirmektir.
Bu eğitimde, Divi global başlığına nasıl dinamik site başlığı ve sloganı ekleyeceğinizi göstereceğiz. Bu çözüm, site başlığını ve etiket satırını WordPress arka ucundan dinamik olarak çıkaracaktır. Ayrıca, başlığı ve sloganı istediğiniz gibi özelleştirmek için Divi'nin tüm güçlü tasarım seçeneklerine sahip olacaksınız!
Olası Sonuç
İşte bu eğitimde yapacağımız tasarımın bir önizlemesi.
Dinamik olarak görüntülenen üst ortadaki site başlığına ve sloganına dikkat edin.
Bedava indir
Divi Newlsetter'a katılın ve size Divi Ultimate Açılış Sayfası Düzen Paketinin bir kopyasını ve daha fazlasını e-posta ile gönderelim kaynakların bulunduğu, ücretsiz ve harika Divi ipuçları ve püf noktaları. Takip edin ve kısa sürede Divi Master olacaksınız. Zaten abone olduysanız, e-posta adresinizi aşağıya girin ve düzen paketine erişmek için indir'i tıklayın.İNDİR
Şablonu içe aktarmak için Divi> Tema oluşturucu'ya gidin.
Sayfanın sağ üst köşesindeki taşınabilirlik simgesine tıklayın.
Taşınabilirlik açılır penceresinde, içe aktar sekmesini seçin ve bilgisayarınızdan indirilecek dosyayı seçin.
Ardından içe aktar düğmesine tıklayın.
Tamamlandığında, genel başlık şablonu Divi Theme Builder'da mevcut olacaktır.
Takip eden bölümde tasarıma geçeceğiz.
WordPress'teki sitenin başlığı ve sloganı
Her WordPress sitesinin bir site başlığı ve bir sloganı vardır. Site başlığı, temelde sitenin adıdır ve slogan, genellikle ne olduğunu açıklayan kısa bir ifadedir.
WordPress'i kurarken site başlığını eklemek ve unutmak alışılmadık bir durum değildir.
Ve bazı insanlar, bırakın güncellemek için zaman ayırmayı, sloganın varlığından bile haberdar değiller. Ek olarak, kullanırken Divi teması, site başlığı ve kısa açıklama sitenizde varsayılan olarak görünmez, bu nedenle bunları gözden kaçırmak kolaydır. Ancak, site başlığı ve kısa açıklama web sitesinin temel unsurlarıdır ve arama motorları tarafından tanınacaktır.
WordPress panosuna gidip Ayarlar> Genel'e giderek site başlığını ve sloganını WordPress'te istediğiniz zaman bulabilir ve güncelleyebilirsiniz.
Veya genel ayarlar altında site başlığını güncellemek için tema özelleştiriciyi kullanarak başka bir rotaya gidebilirsiniz.
Artık site başlığı ve sloganın WordPress arka ucunda nerede olduğunu bildiğimize göre, bunları bir Divi başlığına nasıl ekleyebileceğimizi keşfedelim!
Divi'de küresel bir başlığa dinamik site başlığı ve sloganı ekleme
Önceden tasarlanmış genel başlık şablonunu içe aktarma
Bu eğitimde, sıfırdan tam bir başlık oluşturmak yerine dinamik site başlığını ve sloganını mevcut bir başlığa nasıl ekleyeceğimize odaklanacağız. Size zaman kazandıracak ve netliği artıracaktır. Bu yüzden, bu başlık tasarımına başlamak için, önceden tanımlanmış bir genel başlık şablonunu dördüncü tema üreteci paketi .
Bir kez sahip olduğunuzda paketini indirdi oluşturulması tema , dosyayı açın ve JSON dosyasını bulun. web sitesi şablonu Varsayılan.
Ardından Divi> Tema Oluşturucu'ya gidin.
Sağ üstteki taşınabilirlik simgesine tıklayın. Açılır taşınabilirlik penceresinde, JSON dosyasını seçin. web sitesi şablonu varsayılan ve İçe Aktar düğmesine tıklayın.
Şablon, tema oluşturucuya eklendikten sonra, altbilgi şablonunu silin ve genel başlığı düzenlemek için tıklayın.
Başlığa dinamik site başlığı ve kısa açıklama ekleme
Şablon düzen düzenleyicisinin içinde, önceden tasarlanmış başlığı göreceksiniz. Özelleştirmelerimizi hemen yapmaya başlayabiliriz.
Logoyu taşı
Başlamak için, logoyu (dinamik olarak) görüntüleyen görüntü modülünü üst satırın orta sütunundan üst satırın sol sütununa sürükleyin.
Site başlığını ve sloganını görüntülemek için bir harekete geçirici mesaj modülü ekleyin
Ardından, üst satırın (logonun bulunduğu yer) orta sütununa yeni bir Harekete Geçirici Mesaj modülü ekleyin.
Site başlığını ve sloganını görüntülemek için Harekete Geçirici Mesaj modülünü kullanacağız.
Ancak içerik eklemeye başlamadan önce, arka plan rengini kullanmak için önce HAYIR'ı seçin.
Dinamik bir site başlığı ekleyin
İçerik ayarları altında, başlık giriş kutusunun üzerine gelin ve "Dinamik içerik kullan" simgesini tıklayın. Ardından listeden "Site Başlığı" nı seçin.
Dinamik bir site sloganı ekleyin
Ardından, fareyi vücut alanının üzerine getirin ve "Dinamik içerik kullan" simgesini seçin. Ardından listeden "Site Etiketi" ni seçin.
Dinamik bir ana sayfa bağlantısı ekleyin
Site başlığının, özellikle logoyu değiştiriyorsanız, tıklandığında ana sayfaya yönlendirilmesi yaygındır. Tüm kursu ana sayfaya yeniden yönlendirmek için, ana sayfa bağlantısını kurs bağlantısı URL'sine dinamik içerik olarak ekleyin.
Başlık metninin ve sitenin sloganının tasarımı
Artık site başlığı ve kısa açıklama, başlıkta dinamik olarak görüntülenir. Şimdi tek yapmamız gereken biraz stil eklemek. Unutmayın, site başlığını tasarlamak için başlık metnini ve sloganı tasarlamak için gövde metnini özelleştirmemiz gerekir.
Tasarım sekmesine atlayın ve aşağıdakileri güncelleyin:
- Başlık Yazı Tipi: Heebo
- Başlık Yazı Tipi Ağırlığı: Kalın
- Başlık Yazı Tipi Stili: TT
- Başlık Metin Boyutu: 32 piksel (masaüstü), 24 piksel (tablet ve telefon)
- Başlık Mektubu Aralığı: 0.3em
- Gövde Yazı Tipi: Roboto
- Gövde Yazı Tipi Stili: italik
- Gövde Metin Rengi:
- Gövde Metin Boyutu: 13 piksel
- Gövde Mektubu Aralığı: 0.1em
- Gövde Hattı Yüksekliği: 1em
Merkezlemeye yardımcı olması için, Promo Açıklaması'na aşağıdaki özel CSS'yi ekleyerek gövde metninin altındaki varsayılan dolguyu çıkarın:
dolgu alt: 0 piksel
Ek Tasarım Ayarları
Eğiticinin bu son kısmı için, öğelerin her sütunda dikey olarak ortalanmış kaldığından emin olmak ve düğmeye benzersiz bir tasarım vermek için başlığa bazı ek tasarım ayarlamaları yapacağız. Ayrıca slogana dalgalı bir çizgi öncesi ve sonrası satır ekleyeceğiz (sadece vuruşlar için).
Sütunları / İçeriği Dikey Olarak Ortalama
Şu anda en üst satır, flex özelliğini kullanan “Sütun Yüksekliklerini Eşitle” etkin. Tüm sütunların satır içinde dikey olarak ortalanmış olduğundan emin olmak için küçük bir css snippet'i ekleyerek bundan yararlanabiliriz. Bunu yapmak için, üst satırın ayarlarını açın ve Ana Öğeye aşağıdaki CSS'yi ekleyin:
hizalama ögeleri: orta;
Sütunu Düğmeyle Güncelleme
Ardından, üst satırdaki sütun 3 ayarlarını açın ve arka plan rengini ve dolguyu çıkarın.
Düğme Arka Planını Güncelleme
Ardından düğme modülü ayarını açın ve arka planı aşağıdaki gibi yeni bir arka plan gradyanıyla güncelleyin:
- Degrade arka plan Sol renk: #ffffff
- Sağ arka plan gradyan rengi: # 1dbf73
- Gradyan Yönü: 135deg
- Başlama Konumu:% 10
- Bitiş Pozisyonu:% 0
Slogana karakter öncesi ve sonrası ekleme
Her dinamik içerik öğesi, dişli simgesine tıklanarak değiştirilebilir. Sloganın önüne ve arkasına karakter eklemek için, sloganı içeren harekete geçirici mesaj modülünün ayarlarını açın ve site sloganının dinamik içeriğindeki düzenle simgesine tıklayın. Daha sonra karakterleri girişlerden önce ve sonra ekleyin.
Nihai sonuç
Sonucu görmek için sitenizdeki herhangi bir sayfayı açın. Dinamik site başlığının ve sloganının güzelce görüntülendiğini görmelisiniz!
Son düşünceler
Dinamik bir site başlığı ve sloganla genel bir başlığı özelleştirebilmeniz gerçekten güzel. Bu, birçok site için faydalı olacak bir şey gibi görünüyor. Markanın daha güçlü bir şekilde temsil edilmesi için logoya ek olarak site başlığını ve sloganını dahil etme fikrini de seviyorum.
Kaynak: Zarif Tema
