Sabit alt bilgi çubukları, cihazınızla ilgili önemli bilgileri saklamanın uygun bir yolu olabilir. Site Web kullanıcı herhangi bir cihazda sayfanızın içeriğiyle etkileşim kurduğunda ön planda.
Divi'de olduğu gibi, bir altbilgi çubuğu genellikle ana altbilgi içeriğinden sonra sayfanın en altında statik bir öğe olarak bulunur. Telif hakkı metni ve sosyal medya simgeleri gibi şeyleri içerir.
Ancak, sayfanın altındaki altbilgi çubuğu içeriğini gizlemezseniz, kullanıcı ekranı kaydırırken ekranın altında kayan özel bir altbilgi çubuğu oluşturabilirsiniz.
Bu eğitimde, Divi tema oluşturucusunu kullanarak tamamen kişiselleştirilmiş bir sabit altbilgi çubuğu tasarlayacağız. Bu, bu küçük ama önemli içerik parçalarını her zaman gözünüzün önünde tutmanız için kullanışlı olacaktır.
Olası Sonuç
İşte tasarlayacağımız sabit altbilgi çubuğuna genel bir bakış.
Divi sitenize indirmek için sabit altbilgi çubuğu şablonu nasıl eklenir
UYARI!: Bu modelin eklenmesi, web sitesi şablonu varsayılan olarak (varsa) Divi sitenizde. Canlı bir sitede hiçbir şeyi karıştırmamak için onu bir test sitesine eklemenizi öneririz.
Sabit altbilgi çubuğu şablonunu kendi başınıza içe aktarmak için Site Web, JSON dosyasına erişmek için indirme zip dosyasını açın.
Ardından WordPress kontrol paneline gidin ve Divi> Tema Oluşturucu'ya gidin.
Ardından sayfanın sağ üst tarafındaki taşınabilirlik simgesine tıklayın.
Taşınabilirlik penceresinde, yeni açtığınız JSON dosyasını seçin ve daha önce bir şeyiniz olması ihtimaline karşı "İçe aktarmadan önce yedeklemeyi indir" seçeneğini seçin. web sitesi şablonu geçersiz kılmak istemediğiniz varsayılan.
Ardından İçe Aktar düğmesini tıklayın.
Son olarak, tema üreticisine değişiklikleri kaydedin ve sabit altbilgi çubuğunu görmek için canlı bir sayfa görüntüleyin.
Şimdi öğreticiye geçelim, tamam mı?
Bölüm 1: Global Altbilgi Ekleme
Divi'nin tema oluşturucusu, varsayılan altbilgiyi güncelleyerek yenisiyle değiştirmenize olanak tanır. web sitesi şablonu Varsayılan.
Global bir altbilgi oluşturmak için, WordPress kontrol paneline gidin ve Divi> Tema Oluşturucu'ya gidin. Ardından, Varsayılan Web Sitesi Şablonunun içindeki "Genel Altbilgi Ekle" alanına tıklayın.
Ardından açılır listeden "Özel bir altbilgi oluştur" seçeneğini seçin.
Bu, Model Yerleşim Düzenleyicisini dağıtacak ve burada, inşa etmeye nasıl başlamak istediğinize dair üç seçenek size hemen sorulacaktır. "Sıfırdan Oluştur" u seçin.
Bölüm 2: Sabit altbilgi çubuğunu oluşturma
Artık şablon düzen düzenleyicisinden düzenleme yaptığımıza göre, sabit altbilgi çubuğunu tasarlamaya başlayabiliriz. Tamamlandığında, içeriğe hazır üç sütunlu sabit bir altbilgi çubuğunuz olacak.
Satıra üç sütun düzeni ekleme
İlk olarak, satıra üç sütun düzeni ekleyin.
Bölüm yüksekliği
Üç sütun eklendikten sonra bölüme tanımlı bir yükseklik verelim. Bu, sabit hattın sonunda sona ereceği sayfanın alt kısmında alan oluşturmak için önemlidir. Ayrıca varsayılan üst ve alt dolguyu da kaldıracağız.
Yüksekliği ve dolguyu ayarlamak için bölüm ayarlarını açın ve aşağıdakileri güncelleyin:
- Yükseklik: 85px
- Dolgu: 0 piksel yüksek, 0 piksel düşük
Satır Parametreleri
Artık bölümümüz hazır olduğuna göre, satırı sabit bir altbilgi çubuğu olarak hizmet verecek şekilde özelleştirmeye hazırız. Satır ayarlarını açın ve ardından aşağıdakileri güncelleyin:
bağlam
- Arka Plan Rengi: # 1a1e36
Boyut ve aralık
- Oluk genişliği: 1
- Genişlik:% 100
- Maksimum genişlik:% 100
- Dolgu: 0 piksel yukarı, 0 piksel aşağı,% 3 sol,% 3 sağ
Özel CSS
Satır sabit olsa da, sayfanın altındaki boşluğun satırı doğru bir şekilde içermesi için satır yüksekliğinin üst bölümün yüksekliğiyle eşleşmesini istiyoruz. Ve satır içeriğinin dikey olarak hizalandığından emin olmak istiyoruz. Bunu yapmak için, aşağıdaki özel CSS'yi satırın ana öğesine ekleyin:
ofis
yükseklik: devralma! önemli; ekran: esnek; hizalama öğeleri: merkez;
telefon
yükseklik: devralma! önemli; görüntüleme: blok;
Sabit konumlandırma
Çizgiyi ekranın altında yüzecek şekilde sabit hale getirmek için, ona aşağıdaki gibi alt orta konumda sabit bir konum vermemiz gerekiyor:
- Pozisyon: sabit
- Konum: alt merkez
Bölüm 2: Sabit altbilgi çubuğunun içeriğini oluşturma
Bu noktada, içeriğe hazır sabit konumlu bir altbilgi çubuğumuz var. Üç sütunun her birine istediğimiz herhangi bir içeriği ekleyebiliriz. Ancak bu, 85 piksel yüksekliğiyle sınırlı bir altbilgi "çubuğu" olduğundan, içerik miktarını sınırlamamız gerekir. Bu nedenle, 4. sütuna dinamik bir logo ve 1 menü öğesi içeren küçük bir menü ekleyeceğiz. 2. sütunda, dinamik bir cari yıla sahip telif hakkı metni ekleyeceğiz. 3. sütunda, üç sosyal medya izleme simgesi ekleyeceğiz.
Sütun 1'e bir menü ekleyin
Sütun 1'e bir menü modülü ekleyin.
Menüyü seçin
Daha sonra cihazınızda önceden oluşturduğunuz menülerden birini seçin. Site Web. Menü öğelerini 4 veya daha az tuttuğunuzdan emin olun.
Site logosunu dinamik içerik olarak ekleyin
Logo menüsü için dinamik olarak site logosunu ekleyeceğiz. Logo ön izleme alanının üzerine gelerek "Dinamik içerik kullan" simgesine tıklayın. Ardından açılır listeden Site logosunu seçin.
Arkaplanı kaldırın
Ardından, varsayılan menü arka planını kaldırarak şeffaf olmasını sağlayın.
Menü Tasarımı
Bu noktada menüye biraz tasarım eklemeye hazırız. Bu tasarım için, onu basit ve küçük tutacağız. Aşağıdaki tasarım parametrelerini güncelleyin:
- Yazı tipi menüsü: Üstgeçit
- Menü metni rengi: # b59c61
- Sepya resmi:% 100
- Maksimum logo yüksekliği: 50 piksel
Sütun 2'ye telif hakkı metni ekleme
Menü yerleştirildikten sonra, telif hakkı metnini eklemek için 2. sütuna gidin.
Metin modülü ekle
Sütun 2'ye yeni bir metin modülü ekleyin.
Geçerli tarihi metinden önce ve sonra dinamik olarak ekleyin
Burada, cari yılı telif hakkı metninde göstermek için dinamik içerikle yaratıcı olacağız. Bu, yılın site ömrü boyunca otomatik olarak güncellenmesini sağlayacaktır.
Bunu yapmak için, "Dinamik içerik 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:
- 01
Copyright ©
- sonra:
- 01
| Tous Droits Reservés
- Tarih Biçimi : görenek
- Özel tarih biçimi : 20 yıl
Metni biçimlendirme
Metin tasarımını ve kenar boşluğunu aşağıdaki gibi güncelleyin:
- Metin yazı tipi: Üst geçit
- Metin rengi: # b59c61
- Metnin hizalanması: orta
- Kenar boşluğu (yalnızca telefon): üstte 10 piksel, altta 10 piksel
Bu, telif hakkı metnini destekler.
Sütun 3'e sosyal medya izleme simgeleri ekleme
3. sütuna bir sosyal medya izleme modülü ekleyin.
Sosyal ağlar ekleyin
İçerik sekmesinde, siteye gerekli sosyal ağları ekleyin. Bu tasarım için üç tane kullanıyoruz.
Sosyal medya izleme ayarları
Ardından, tüm sosyal medya izleme simgeleri için tasarım ayarlarını aşağıdaki gibi güncelleyin:
- Modül hizalama: düz (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 medya ayarlarını güncelleme
Bireysel sosyal ağ simgesinin 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ğda, 8 piksel solda
- Yuvarlatılmış köşeler: 8px
Sosyal medya ayarlarını herkese genişlet
Ardından ilk ağ için ek ayarlar menüsünü açın ve " Öğe Stillerini Genişlet " listede. Stilleri Genişlet açılır penceresinde, "içindeki Stilleri Genişletmeyi seçin" Bu sütun "Ve tıklayın uzatmak .
Bu, tasarımı sütundaki diğer simgelere genişletir.
Son düşünceler
Sabit bir altbilgi çubuğu eklemek bazı durumlarda anlamlıdır. Çubuğun yüksekliği, dikkat dağıtmayacak veya cep telefonunda çok fazla yer kaplamayacak kadar küçük. Daha iyi dönüşümler ve daha sorunsuz bir kullanıcı deneyimi için size önemli CTA'lar ekleme yeteneği sağlar.
Bu tasarım için, sayfanın alt kısmındaki boşluk, bölüm için sabit bir yükseklik ayarlanarak ve ardından sabit hattın bölümün yüksekliğini devralmasına izin verilerek (sabit olmasına rağmen) oluşturulur.
Diğer kaynaklar
İşte bir listesi kaynakların bulunduğu Divi ile web sitenizin tasarımında oluşturmanıza yardımcı olabilecek ek.
- Divi'de özel giriş sayfası nasıl oluşturulur
- Divi'ye tam genişlikte bir gezinme modülü nasıl eklenir
- Divi'de tam ekran kaydırıcı nasıl oluşturulur
- Divi'ye dairesel sayaç nasıl eklenir
