Divi Global Başlığına Dinamik Site Başlığı ve Etiket Satırı Nasıl Eklenir

Bir Divi Global Başlığına dinamik bir site başlığının ve etiket satırının nasıl ekleneceğini bilmek, Divi web siteleri oluştururken kullanışlı olacaktır. Ve birinin bunu yapması için birkaç iyi sebep var. Birincisi, her sitenin bir logosu yoktur. Bir site başlığı, iyi bir logo değişimidir. Diğer bir neden de, siteniz hakkında herkesin göreceği önemli bilgileri ekleyerek markanızı güçlendirmektir.

Bu öğreticide, bir Divi global başlığına nasıl dinamik site başlığı ve kısa açıklama ekleyeceğinizi göstereceğiz. Bu çözüm, site başlığını ve sloganı WordPress'in arka ucundan dinamik olarak çekecektir. 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!

Gizlice Bakış

İşte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış.

Dinamik olarak görüntülenen başlığın üst ortasındaki site başlığına ve slogana dikkat edin.

Dinamik Site Başlığı ve Tagline Divi Global Başlık Şablonunu ÜCRETSİZ olarak indirin

Bu öğreticiden genel başlık şablonuna el koymak için önce aşağıdaki düğmeyi kullanarak onu indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Şablonu içe aktarmak için Divi > Tema Oluşturucu'ya gidin.

Sayfanın sağ üst köşesindeki taşınabilirlik simgesini tıklayın.

Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin.

Ardından içe aktar düğmesini tıklayın.

Tamamlandığında, Global Başlık Şablonu Divi Tema Oluşturucu'da mevcut olacaktır.

Hadi öğreticiye geçelim, olur mu?

WordPress'te Site Başlığı ve Sloganı

Her WordPress sitesinin bir site başlığı ve sloganı vardır. Site Başlığı, esasen sitenin adıdır ve slogan, genellikle sitenin ne hakkında olduğunu açıklayan kısa bir cümledir.

WordPress'i kurarken site başlığını eklemek ve bunu unutmak nadir değildir.

Ve bazı insanlar, sloganın var olduğunun farkında bile değiller, güncellemek için zaman harcamaktan çok daha az. Ayrıca, Divi Temasını kullanırken, site başlığı ve sloganı varsayılan olarak sitenizde görünmeyecektir, bu nedenle göz ardı etmek kolaydır. Ancak, hem site başlığı hem de slogan, web sitesinin hayati unsurlarıdır ve arama motorları tarafından tanınacaktır.

WordPress Kontrol Paneli'ne giderek ve Ayarlar > Genel'e giderek WordPress'te site başlığını ve sloganı 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 WordPress'in arka ucunda site başlığının ve etiket satırının nerede olduğunu bildiğimize göre, bunları bir Divi başlığına nasıl ekleyebileceğimizi keşfedelim!

Divi'de Genel Başlığa Dinamik Site Başlığı ve Etiket Satırı Nasıl Eklenir

Hazır Genel Başlık Şablonunu İçe Aktarma

Bu eğitim için, sıfırdan eksiksiz bir başlık oluşturmak yerine dinamik site başlığını ve kısa açıklamayı mevcut bir başlığa nasıl ekleyeceğinize odaklanacağız. Bu, zamandan tasarruf etmenize ve netliği artırmanıza yardımcı olacaktır. Bu nedenle, bu başlık tasarımını hızlı bir şekilde başlatmak için, Dördüncü Tema Oluşturucu Paketimizden önceden hazırlanmış bir küresel başlık şablonunu içe aktaracağız.

Tema oluşturucu paketini indirdikten sonra dosyayı açın ve varsayılan web sitesi şablonu JSON dosyasını bulun.

Ardından Divi > Tema Oluşturucu'ya gidin.

Sağ üstteki taşınabilirlik simgesini tıklayın. Taşınabilirlik açılır penceresinin içinde, varsayılan web sitesi şablonu JSON dosyasını seçin ve içe aktar düğmesini tıklayın.

Şablon, tema oluşturucuya eklendikten sonra, altbilgi şablonunu silin ve Küresel Başlığı düzenlemek için tıklayın.

Başlığa Dinamik Site Başlığı ve Kısa Açıklama Ekleme

Şablon düzeni düzenleyicisinin içinde, önceden tasarlanmış hazır başlığı göreceksiniz. Özelleştirmelerimizi hemen yapmaya başlayabiliriz.

Logoyu Taşı

Başlamak için, logoyu (dinamik olarak) gösteren görüntü modülünü üst sıradaki orta sütundan üst sıradaki sol sütuna sürükleyin.

Site Başlığını ve Kısa Açıklamayı Görüntülemek için Harekete Geçirici Mesaj Modülü Ekleyin

Ardından, üst satırın orta sütununa (logonun olduğu yer) yeni bir Eylem Çağrısı modülü ekleyin.

Site başlığını ve sloganı 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 DEĞİL'i seçin.

Dinamik Site Başlığı Ekle

İçerik ayarları altında, başlık giriş kutusunun üzerine gelin ve "Dinamik İçeriği Kullan" simgesini tıklayın. Ardından listeden “Site Başlığı”nı seçin.

Dinamik Site Tanıtımı Ekle

Ardından, vücut alanının üzerine gelin ve “Dinamik İçeriği Kullan” simgesini seçin. Ardından listeden “Site Tanıtımı”nı seçin.

Dinamik Ana Sayfa Bağlantısı Ekle

Özellikle logoyu değiştiriyorsanız, site başlığının tıklandığında ana sayfaya yönlendirilmesi yaygındır. Tüm modülün ana sayfaya yönlendirilmesini sağlamak için ana sayfa bağlantısını Modül Bağlantısı URL'sine dinamik içerik olarak ekleyin.

Site Başlığı ve Kısa Açıklama Metin Tasarımı

Artık site başlığı ve sloganı başlıkta dinamik olarak görüntüleniyor. Ş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 gerekiyor.

Tasarım sekmesine geçin 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: 32px (masaüstü), 24px (tablet ve telefon)
• Başlık Harf Aralığı: 0.3em
• Gövde Yazı Tipi: Roboto
• Gövde Yazı Tipi Stili: italik
• Gövde Metni Rengi:
• Gövde Metni Boyutu: 13px
• Gövde Harf Aralığı: 0.1em
• Gövde Çizgisi Yüksekliği: 1em

Merkezlemeye yardımcı olması için, Promosyon Açıklamasına aşağıdaki özel CSS'yi ekleyerek gövde metninin altındaki varsayılan dolguyu çıkarın:

padding-bottom: 0px

Ek Tasarım Ayarlamaları

Eğitimin bu son bölümünde, öğelerin her sütunda dikey olarak ortalandığından emin olmak ve düğmeye benzersiz bir tasarım kazandırmak için başlıkta bazı ek tasarım ayarlamaları yapacağız. Ayrıca slogana önce ve sonra dalgalı bir satır ekleyeceğiz (sadece vuruşlar için).

Sütunları/İçeriği Dikey Olarak Ortalama

Şu anda en üst sıra, flex özelliğini kullanan “Sütun Yüksekliklerini Eşitle” aktifidir. Tüm sütunların satır içinde dikey olarak ortalandığından emin olmak için küçük bir css snippet'i ekleyerek bundan faydalanabiliriz. Bunu yapmak için, üst sıranın ayarlarını açın ve Ana Öğeye aşağıdaki CSS'yi ekleyin:

align-items: center;

Düğme ile Sütunu Güncelleme

Ardından, üst sıradaki sütun 3 için ayarları açın ve arka plan rengini ve dolguyu çıkarın.

Düğme Arka Planının Güncellenmesi

Ardından düğme modülü ayarını açın ve arka planı aşağıdaki gibi yeni bir arka plan gradyanı ile güncelleyin:

• Degrade Arka Plan Sol Renk: #ffffff
• Degrade Arka Plan Sağ Renk: #1dbf73
• Gradyan Yönü: 135deg
• Başlangıç ​​Konumu: %10
• Bitiş Konumu: %0

Etiket Satırına Önce ve Sonra Karakter Ekleme

Her dinamik içerik öğesi, dişli simgesine tıklanarak düzenlenebilir. Kısa açıklamadan önce ve sonra karakterler eklemek için, kısa açıklamayı içeren harekete geçirici mesaj modülünün ayarlarını açın ve site kısa açıklama dinamik içeriğindeki düzenle simgesini tıklayın. Ardından karakterleri girişlerin öncesine ve sonrasına ekleyin.

Son sonuç

Sonucu görüntülemek için sitenizdeki herhangi bir sayfayı açın. Dinamik site başlığının ve sloganın güzel bir şekilde görüntülendiğini görmelisiniz!

İşte tablet ve telefonda nasıl yığıldığı.

Son düşünceler

Dinamik bir site başlığı ve etiket satırı ile global bir başlığı özelleştirebilmek gerçekten güzel. Pek çok site için kullanışlı olacak bir şey gibi görünüyor. Ayrıca, daha güçlü marka temsili için logoya ek olarak site başlığı ve sloganı ekleme fikrini de seviyorum.

Yorumlarda sizden haber bekliyorum.

Şerefe!