Divi Temanız için Sabit Bir Altbilgi Çubuğu Nasıl Oluşturulur

Sabit altbilgi çubukları, kullanıcı herhangi bir cihazda sayfa içeriğinizle etkileşime geçtiğinde web sitenizle ilgili önemli bilgileri ön planda tutmanın uygun bir yolu olabilir. Divi'de olduğu gibi, bir alt bilgi çubuğu genellikle ana alt bilgi içeriğinden sonra sayfanın en altında statik bir öğe olarak bulunur. Telif hakkı metni ve sosyal medya simgeleri gibi şeyleri içerirler. Ancak, sayfanın alt kısmındaki alt bilgi çubuğu içeriğini gizlemezseniz, kullanıcı kaydırdıkça ekranın altında kayan özel bir alt bilgi çubuğu oluşturabilirsiniz.

Bu derste, Divi'nin tema oluşturucusunu kullanarak tamamen özel bir sabit alt bilgi çubuğu tasarlayacağız. Bu, küçük ama önemli içerik parçalarını her zaman net bir şekilde görebilmeniz için kullanışlı olacaktır.

Başlayalım.

Gizlice Bakış

İşte tasarlayacağımız sabit altbilgi çubuğuna hızlı bir bakış.

Düzeni ÜCRETSİZ İndirin

Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İ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.

Sabit Altbilgi Çubuğu Şablonu İndirme Divi Sitenize Nasıl Eklenir

UYARI!: Bu şablonu eklemek, Divi sitenizdeki varsayılan web sitesi şablonunu (varsa) geçersiz kılar. Canlı bir sitede hiçbir şeyi karıştırmamak için bunu bir test sitesine eklemenizi öneririz.

Sabit alt bilgi çubuğu şablonunu kendi web sitenize aktarmak için JSON dosyasına erişmek için indirilen zip dosyasını açın.

Ardından WordPress Dashboard'a gidin ve Divi > Theme Builder'a gidin.

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

Taşınabilirlik açılır penceresinin içinde, az önce açtığınız JSON dosyasını seçin ve daha önce varsayılan web sitesi şablonunda geçersiz kılmak istemediğiniz bir şey olması durumunda, “İçe aktarmadan önce yedeği indir” seçeneğini seçin.

Ardından İçe Aktar düğmesini tıklayın.

Son olarak, Tema Oluşturucu değişikliklerini kaydedin ve sabit alt bilgi çubuğunu görmek için canlı bir sayfa görüntüleyin.

Şimdi öğreticiye geçelim, olur mu?

Bölüm 1: Genel Altbilgi Ekleme

Divi'nin Tema Oluşturucusu, Varsayılan Web Sitesi Şablonunu güncelleyerek varsayılan altbilgiyi yenisiyle değiştirmenize olanak tanır.

Genel bir alt bilgi oluşturmak için WordPress Kontrol Paneli'ne gidin ve Divi > Tema Oluşturucu'ya gidin. Ardından, Varsayılan Web Sitesi Şablonu içindeki "Genel Altbilgi Ekle" alanını tıklayın.

Ardından açılır menüden “Global Altbilgi Oluştur” seçeneğini seçin.

Bu, Oluşturmaya nasıl başlamak istediğinize ilişkin üç seçeneğin hemen sorulacağı Şablon Düzen Düzenleyicisini dağıtacaktır. "Sıfırdan Oluştur" seçeneğini seçin.

Bölüm 2: Sabit Altbilgi Çubuğu Oluşturma

Artık şablon düzeni düzenleyicisinden düzenleme yaptığımıza göre, sabit alt bilgi çubuğunu tasarlamaya başlayabiliriz. Tamamlandığında, içerik için hazır olan üç sütunlu sabit bir alt bilgi çubuğunuz olacaktır.

Satıra Üç Sütunlu Düzen Ekle

İlk olarak, satıra üç sütunlu bir düzen ekleyin.

Bölüm Yüksekliği

Üç sütun eklendikten sonra bölüme bir set yükseklik verelim. Bu, sayfanın alt kısmında, sabit satırın sonunda duracağı alanı oluşturmak için önemlidir. Ayrıca varsayılan üst ve alt dolguyu da çıkaracağız.

Yüksekliği ve dolguyu ayarlamak için bölüm ayarlarını açın ve aşağıdakileri güncelleyin:

• Yükseklik: 85 piksel
• Dolgu: 0 piksel üst, 0 piksel alt

Satır Ayarları

Artık bölümümüz hazır olduğuna göre, satırı sabit alt bilgi çubuğu olarak hizmet verecek şekilde özelleştirmeye hazırız. Satır için ayarları açın ve ardından aşağıdakileri güncelleyin:

Arka plan

• Arka Plan Rengi: #1a1e36

Boyut ve Aralık

• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100
• Dolgu: 0 piksel üst, 0 piksel alt, %3 sol, %3 sağ

Özel CSS

Satır sabitlenecek olsa da, sayfanın altındaki boşluğun satırı yeterince içermesi için satırın yüksekliğinin üst bölümün yüksekliğiyle eşleşmesini istiyoruz. Ayrıca, satır içindeki içeriğin dikey olarak hizalandığından emin olmak istiyoruz. Bunu yapmak için satırın ana öğesine aşağıdaki özel CSS'yi ekleyin:

masaüstü

height: inherit !important;
display:flex;
align-items: center;

Telefon

height: inherit !important;
display:block;

Sabit Konumlandırma

Satırı ekranın altında yüzecek şekilde sabit hale getirmek için, ona aşağıdaki gibi alt orta konumda sabit bir konum vermemiz gerekir:

• Pozisyon: Sabit
• yer: alt merkez

Bölüm 2: Sabit Altbilgi Çubuğu İçeriğini Oluşturma

Bu noktada sabit konumda içeriğe hazır bir altbilgi çubuğumuz var. Üç sütunun her birine istediğimiz içeriği ekleyebiliriz. Ancak bu, 85px ile sınırlı bir yüksekliğe sahip bir altbilgi “çubuk” olduğundan, içerik miktarını sınırlamamız gerekiyor. Bu nedenle, 1. sütuna dinamik logolu küçük bir menü ve 4 menü öğesi ekleyeceğiz. 2. sütunda, dinamik bir cari yıla sahip telif hakkı metni ekleyeceğiz. 3. sütunda, üç sosyal medya takip ikonu ekleyeceğiz.

Sütun 1'e Menü Ekle

1. sütuna bir menü modülü ekleyin.

Seçim Menüsü

Ardından, web sitenizde oluşturduğunuz menülerden birini seçin. Menü öğelerini 4 veya daha az tuttuğunuzdan emin olun.

Dinamik İçerik Olarak Site Logosu Ekleyin

Logo menüsü için site logosunu dinamik olarak ekleyeceğiz. Logo önizleme alanının üzerine gelirken "Dinamik İçeriği Kullan" simgesini tıklayın. Ardından açılır menüden Site Logosu'nu seçin.

Arkaplanı kaldırın

Ardından, saydam olması için varsayılan arka planı menüden kaldırın.

Menü Tasarımı

Bu noktada menüye tasarım eklemeye hazırız. Bu tasarım için, onu basit ve küçük tutacağız. Aşağıdaki tasarım ayarlarını güncelleyin:

• Menü Yazı Tipi: Üst Geçit
• Menü Metin Rengi: #b59c61
• Görüntü Sepya: %100
• Logo Maksimum Yüksekliği: 50px

2. Sütun'a Telif Hakkı Metni Ekle

Menü yerine oturduğunda, telif hakkı metnini eklemek için 2. sütuna atlayın.

Metin Modülü Ekle

2. sütuna yeni bir metin modülü ekleyin.

Metin Öncesi ve Sonrası ile Dinamik Olarak Geçerli Tarihi Ekleyin

Burada, geçerli yılı telif hakkı metni içinde görüntülemek için dinamik içerikle yaratıcı olacağız. Bu, sitenin ömrü boyunca yılın otomatik olarak güncellenmesini sağlayacaktır.

Bunu yapmak için “Dinamik İçeriği Kullan” simgesine tıklayın ve listeden “Geçerli Tarih”i seçin.

Geçerli Tarih açılır penceresinde aşağıdakileri güncelleyin:

• Önce:

• Copyright ©

• Sonrasında:

•  | All Rights Reserved

• Tarih Formatı : Özel
• Özel Tarih Formatı : 20y

Metin Tasarımı

Metin tasarımını ve kenar boşluğunu aşağıdaki gibi güncelleyin:

• Metin Yazı Tipi: Üst Geçit
• Metin Metin Rengi: #b59c61
• Metin Hizalama: orta
• Kenar boşluğu (yalnızca telefon): 10 piksel üst, 10 piksel alt

Bu, telif hakkı metniyle ilgilenir.

3. Sütun'a Sosyal Medya Takip Simgeleri Ekle

3. sütuna bir sosyal medya takip modülü ekleyin.

Sosyal Ağlar Ekle

İçerik sekmesi altında, site için gereken sosyal ağları ekleyin. Bu tasarım için üç tane kullanıyoruz.

Sosyal Medya Takip Ayarları

Ardından, tüm sosyal medya takip simgeleri için tasarım ayarlarını aşağıdaki gibi güncelleyin:

• Modül Hizalaması: sağ (masaüstü ve tablet), merkez (telefon)
• Simge Rengi: #1a1e36
• Özel Simge Boyutunu Kullan: EVET
• Simge Yazı Tipi Boyutu: 16px (masaüstü ve tablet), 14px (telefon)

Sosyal Ağ Ayarlarını Güncelle

Bireysel sosyal ağ simgesi tasarımını güncellemek için ilk ağın ayarlarını açın ve aşağıdakileri güncelleyin:

• Arka Plan Rengi: #ffffff
• Dolgu: 8 piksel sağ, 8 piksel sol
• Yuvarlatılmış Köşeler: 8px

Sosyal Ağ Ayarlarını Herkese Genişletin

Ardından, ilk ağ için daha fazla ayar menüsünü açın ve listeden “ Öğe Stillerini Genişlet ” öğesini seçin. Stilleri genişlet açılır penceresinde, stilleri “ Bu Sütun ” boyunca genişletmeyi seçin ve Genişlet 'i tıklayın.

Bu, tasarımı sütundaki diğer simgelere genişletecektir.

Tablet ve Telefonda Sütun 1/Menü'yü Devre Dışı Bırak

Altbilgi çubuğunu mobil uyumlu hale getirmek için tablet ve telefon ekranında içeriği olan sütunlarımızdan birini devre dışı bırakmamız gerekiyor. Bu örnek için, telefon ve tablette 1. sütunu devre dışı bırakarak menünün gösterilmesini aşağıdaki gibi devre dışı bırakacağız:

Sonuçları Kaydet

Düzen düzenleyiciden çıkmadan önce düzeni kaydettiğinizden emin olun.

Ardından Divi Theme Builder için değişiklikleri kaydettiğinizden emin olun.

Son sonuç

Sonucu görüntülemek için sitenizde canlı bir sayfa açın. Event Layout Pack'i kullanan bir sayfada nasıl göründüğü aşağıda açıklanmıştır.

Altbilginin, sayfanın altındaki bölümün içinde durana kadar nasıl sabit kaldığını izleyin.

Son düşünceler

Sabit bir alt bilgi çubuğu eklemek bazı durumlarda mantıklıdır. Çubuğun yüksekliği yeterince küçüktür, böylece dikkati dağıtmaz veya mobil cihazlarda çok fazla yer kaplamaz. Ve size daha iyi dönüşümler ve daha sorunsuz kullanıcı deneyimi için önemli CTA'lar ekleme fırsatı verir.

Bu tasarım için, sayfanın altındaki boşluk, bölüme sabit bir yükseklik ayarlanarak ve ardından sabit sıranın bölüm yüksekliğini (sabit olmasına rağmen) devralmasına izin vererek oluşturulur. Ancak, ayarlanan yüksekliği sınırlayıcı veya yanıt vermiyor olarak bulursanız, bunun gibi şeyler için kap alanı oluşturmanın başka yolları da vardır.

Umarım işe yarar.

Yorumlarda sizden haber bekliyorum.

Şerefe!