Ana İçeriğe Geç

Divi ile sabit bir altbilgi çubuğu nasıl oluşturulur

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

Sabit altbilgi çubukları, kullanıcı herhangi bir cihazda sayfa içeriğinizle etkileşimde bulunurken web sitenizle ilgili önemli bilgileri önde ve ortada tutmanın kullanışlı bir yolu olabilir. 

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 şablonun eklenmesi, Divi sitenizdeki varsayılan web sitesi şablonunun (varsa) yerini alacaktır. Canlı bir sitede hiçbir şeyi karıştırmamak için onu bir test sitesine eklemenizi öneririz.

Sabit altbilgi çubuğu şablonunu kendi web sitenize aktarmak için, JSON dosyasına erişmek üzere 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, önceden açtığınız JSON dosyasını seçin ve varsayılan web sitesi şablonunda önceden sahip olmadığınız bir şey olması durumunda, 'İçe aktarmadan önce yedeklemeyi indir' seçeneğini seçin. değiştirmek istemedi.

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.

Divi değişikliklerini kaydedin

Şimdi öğreticiye geçelim, tamam mı?

Bölüm 1: Global Altbilgi Ekleme

Divi tema oluşturucusu, varsayılan web sitesi şablonunu güncelleyerek varsayılan altbilgiyi yenisiyle değiştirmenize olanak tanır.

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.

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

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.

3 sıralı bölüm

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
Divi 1 bölüm yüksekliği yapılandırması

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
Hat ayarlarına erişim

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ğ
Divi bölümünü özelleştirin

Ö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;
CSS kodu ekleyin

Sabit konumlandırma

Çizgiyi ekranın alt kısmında yüzecek şekilde sabitlemek için alt orta konumda aşağıdaki gibi sabit bir konum vermemiz gerekir:

  • Pozisyon: sabit
  • Konum: alt merkez
Altbilgi konumu

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.

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

Wordpress menü seçimi

Menüyü seçin

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

Seçim menüsü wordpress modülü

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.

Logo ekleyin

Arkaplanı kaldırın

Ardından, varsayılan menü arka planını kaldırarak şeffaf olmasını sağlayın.

Arka planı sil

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
Yazı tipi rengini değiştirin

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.

Seçim modülü metin divi

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.

Seçim tarihi

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

  • önce:
  • 01Copyright ©
  • sonra:
  • 01| Tous Droits Reservés
  • Tarih Biçimi : görenek
  • Özel tarih biçimi : 20 yıl
Tarihi özelleştirin

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
Divi yazı tipi seçimi metin modülü

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 ağ izleme modülü ekle

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)
Personnalsier polis divi

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:

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

  • Arka Plan Rengi: #ffffff
  • Dolgu: 8 piksel sağda, 8 piksel solda
  • Yuvarlatılmış köşeler: 8px
sabit ayak çubuğu divi

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

Divi ile web sitenizi tasarlarken oluşturmanıza yardımcı olabilecek ek kaynakların bir listesi.

Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
3 hisseleri
hisse3
cıvıltı
Enregistrer