Bir altbilgi nasıl tasarlanır (2025 öğretici)

Web sitenizin altbilgisi, telif hakkı bilgileri için bir yerden daha fazlasıdır; Marka güvenilirliğini artırmak, kullanıcı deneyimini geliştirmek ve hatta dönüşümleri yönlendirmek için değerli bir araç olabilir. Bu yazıda, sitenizde neden iyi tasarlanmış bir altbilgiye ihtiyacınız olduğunu açıklayacağız, bazı en iyi uygulamaları sergileyeceğinizi ve Divi WordPress temasını kullanarak bir altbilginin nasıl tasarlanacağını göstereceğiz.

Hadi dalalım.

Web sitesi altbilgisi nedir?

Bilmeyenler için, bir web sitesi altbilgisi, sitenizdeki her sayfanın en altında görünen bölümdür. Genellikle gözden kaçan ancak birkaç önemli işleve hizmet eden önemli bir alandır. Altbilgi genellikle iletişim bilgileri, telif hakkı ve yasal bilgiler ve sosyal medya bağlantıları gibi temel bilgileri içerir. Görünüşte küçük olsa da, altbilgi kullanıcı deneyimini artırmada, markanızın güvenilirliğini artırmada ve hatta arama motoru optimizasyonunuzu (SEO) artırmada önemli bir rol oynar.

Bir altbilgiye sahip olmak neden önemli?

Altbilgi, herhangi bir web sitesinin başarısında hayati bir rol oynamaktadır. Önemli bilgiler için bir merkez görevi görür ve kullanıcı deneyimine katkıda bulunurlar. Etkili bir altbilgiye sahip olmanızın birkaç nedeni vardır:

• Marka Takviyesi: Altbilgiler logonuzu, renklerinizi ve yazı tiplerinizi sürekli olarak görüntüler ve tüm sayfalarda marka kimliğini güçlendirir.
• İletişim Bilgileri: Altbilginin kolayca erişilebilir iletişim bilgileri, ziyaretçilerin sizinle hızlı ve kolay bir şekilde iletişim kurmasına olanak tanır.
• Yasal ve Gizlilik Bilgileri: Abbilolar, şeffaflık ve uyumluluk sağlayarak önemli yasal ve gizlilik bilgileri için merkezi bir yer sağlar.
• Geliştirilmiş Kullanıcı Deneyimi: İyi organize edilmiş altbilgiler, önemli sayfalara ve site haritalarına kolay erişim sağlayarak genel kullanılabilirliği artırarak kullanıcı navigasyonunu geliştirir.
• SEO Avantajları: İyi tasarlanmış altbilgiler, diğer web sitelerine (backlinks) değerli bağlantılar ve sosyal medya profilleri içerebilir, arama motoru sıralama sayfalarına (SERPS) ve SEO'ya yerleştirmeyi geliştirebilir.

Temel altbilgi öğeleri

İyi tasarlanmış bir altbilgi sadece bir dipnottan daha fazlasıdır. Temel bilgileri sağlayan, kullanıcı deneyimini geliştiren ve markanızın güvenilirliğini artıran değerli bir alandır.

1. İletişim bilgileri

Altbilgeriniz, ziyaretçilerin sizinle bağlantı kurması için uygun bir merkez olmalıdır. Ziyaretçileri aramaya teşvik etmek için telefon numaranızı, e -posta adresinizi veya sorularınız için bir form ve varsa fiziksel adresinizi ekleyin. Çekici ve görünür simgeler kullanarak sosyal medya profillerinize bağlantılar eklemeyi unutmayın. Bu, ziyaretçileri sizinle çeşitli şekillerde bağlantı kurmaya teşvik eder.

2. Telif Hakkı ve Yasal Bilgi

Şeffaflık anahtardır, bu nedenle altbilginiz yasal ve gizlilik bilgilerinizi açıkça özetlemelidir. Orijinal içeriğinizi korumak için bir telif hakkı bildirimi ekleyin. Gizlilik politikanıza ve Hizmet Şartları sayfalarınıza bulması kolay bağlantılar sağlayın. Bu, ziyaretçilerinizle güven oluşturur ve verilerini nasıl ele aldığınızı anlamalarını sağlar. Mümkünse, belirli endişeleri veya sınırlamaları ele almak için bir feragat veya çerez politikası ekleyin.

3. Navigasyon

Web siteniz için bir altbilgi tasarlarken bir başka önemli bileşen bir menü dahildir. Gezinme, kullanıcıların web sitenizde gezinmesini kolaylaştırır ve ziyaretçilerin istedikleri bilgileri hızlı bir şekilde bulmasına yardımcı olur. Blogunuz da dahil olmak üzere sitenizdeki önemli sayfalara bağlantılar eklemeyi unutmayın (eğer bir tane almayı planlıyorsanız). Bu, web sitenizin kilit alanlarına kolay erişim sağlar.

4. Harekete Geçme Çağrısı (CTA)

Son olarak, altbilginize bir CTA eklemeyi düşünün. Özel güncellemeler ve teklifler almak için onları bülteninize abone olmaya teşvik edin. Belirli bir ürün veya hizmeti tanıtmak için bu alanı da kullanabilirsiniz. Alternatif olarak, ziyaretçileri bir sonraki adımı atmaya ikna etmek için bir e -kitap veya web semineri gibi değerli bir ücretsiz kaynak sunmayı düşünün.

Etkili altbilgiler için tasarım ilkeleri

Web siteniz için bir altbilgi tasarlamaya başladığınızda, sadece bilgileri listelemenin ötesinde düşünmeniz gerekir. Daha büyük bir amaca sahip olmanız ve etkili hale getirmek için bazı temel tasarım ilkelerini dahil etmeniz gerekir.

• Kısa tutun: Altbilginize büyük miktarda metin bırakmaktan kaçının, çünkü ziyaretçilerinizi bunaltabilir. Netliğe öncelik verin ve dağınıklıktan kaçının.
• Okunabilirliğe odaklanın: Açık, okunması kolay yazı tiplerini seçin. Elemanlar arasında yeterli boşluk kullanın ve yazı tipi boyutlarının kolay okuma için uygun olduğundan emin olun.
• Marka tutarlılığını koruyun: Altbilgeriniz web sitenizin geri kalanıyla aynı görünüme ve hissi olmalıdır. Marka kimliğinizi güçlendirmek için sürekli olarak renk, tipografi ve logo kullanın.
• Duyarlı olun: Web Tasarım İlkeleri, web sitelerinin sitenizin altbilgisi de dahil olmak üzere tüm ekran boyutları için uygun şekilde boyutlandırılması gerektiğini belirleyin.
• Erişilebilirlik Önemlidir: Altbilgerinizin engelli olanlar da dahil olmak üzere tüm kullanıcılar için tasarlandığından emin olun. Uygun başlık yapılarını, görüntüler için ALT etiketlerini ve yeterli renk kontrastını kullanın.

Web siteniz için bir altbilgi nasıl tasarlanır

Web siteniz için bir altbilgi tasarlamanın birçok yolu vardır. Figma, framer veya eskiz gibi web tasarım araçları, tasarımlarınız için bir prototipi ütülemek için mükemmeldir veya Divi gibi bir aletle dalabilir ve altbilginizi gerçek zamanlı olarak tasarlayabilirsiniz. Bu öğretici için, bir logo, sosyal medya simgeleri, e-posta seçme ve bazı önemli bağlantılar ile bir altbilgi tasarlamanın ne kadar kolay olduğunu göstermek için Divi'yi kullanacağız-hepsi sadece birkaç dakika içinde.

Divi nedir?

Divi, piyasadaki en güçlü WordPress temalarından biridir. Ön uç, kodsuz sayfa oluşturucu ve web sitenizin her yönünü tasarlama yeteneği ile Divi, hepsini yapmak için esneklik ve tasarım pirzolalarına sahiptir. Sezgisel görsel oluşturucu ile, herhangi bir kod yazmaya gerek kalmadan, altbilgiler de dahil olmak üzere çarpıcı ve benzersiz web siteleri oluşturabilirsiniz.

Divi ayrıca, çok çeşitli altbilgi tasarımları da dahil olmak üzere büyük bir önceden hazırlanmış düzen kütüphanesi içerir. Bu önceden hazırlanmış düzenler, tasarımınız için bir başlangıç ​​noktası olarak hizmet edebilir, ilham sunar ve size değerli zaman kazandırır. Düzenlere ek olarak Divi, başlangıç ​​siteleri koleksiyonundan eksiksiz bir web sitesi oluşturmanın hızlı ve kolay bir yolunu sunan hızlı siteler sunar. Süreç, bir başlangıç ​​sitesi seçmeyi ve Divi'ye logonuz, marka renkleriniz ve yazı tipleriniz de dahil olmak üzere işletmeniz hakkında bilgi vermeyi içerir.

Hızlı sitelerin ürettiği her web sitesi, tüm temel web sayfaları, tema oluşturucu şablonları, tasarım modülü ön ayarları ve global stillerle birlikte gelir ve tasarımı tüm web sitesinde tutarlı tutar. Başlangıç ​​sitelerine ek olarak, Divi AI'nın izniyle AI tarafından oluşturulan bir web sitesi tercih edebilirsiniz. Divi AI ile siteniz, başlangıç ​​sitesinin yaptığı her şeyle birlikte gelir, ancak oluşturmak istediğiniz sitenin bir açıklamasını yazmak için bir metin istemini kullanmanıza olanak tanır. Ayrıca markanızı seçebilir veya Divi AI'nin üretmesine izin verebilirsiniz.

Divi al

Sıfırdan bir altbilgi nasıl tasarlanır

Etkili bir altbilgi oluşturmak için Divi AI veya Hızlı Siteler kullanabilmenize rağmen, görsel ve tema üreticilerinden sıfırdan bir tane tasarlayabilirsiniz.

Bir altbilgi tasarlamaya başlamadan önce, aşağıda resmedilen gibi bir marka yönergeleri şablonuna sahip olmak iyi bir fikirdir. Bu şablon, bir altbilgi tasarlarken size yardımcı olmak için logo yönergeleri, marka renkleri ve yazı tipleri ile başlamanıza olanak tanır. İleride, bu şablonu kılavuz olarak kullanacağız.

WordPress web sitenize giriş yapın ve Divi> Tema Oluşturucu'ya gidin.

Ardından, Global Footer Ekle'yi tıklayın, ardından Tema Oluşturucusunu başlatmak için Global Bookter oluşturun .

Tema oluşturucu başlatıldığında, boş bir sayfa ile karşılaşacaksınız. Altbilgiye bir satır eklemek için yeşil simgeyi tıklayarak başlayın.

Ardından, mevcut seçeneklerden üç sütunlu düzen seçin.

İçerik eklemeden önce bölümümüze bir arka plan rengi eklememiz gerekecek. Bunu yapmak için bölümün sol üst kısmındaki dişli simgesine (ayarlar) tıklayın.

Bölümümüz için bir arka plan rengi seçmek için + arka plan rengi ekleyin .

Renk olarak #406171 kullanın. Rengi küresel olarak kaydetmek için eklemek için + simgesini tıklayın. Bir arka plan rengi ekledikten sonra, kaydetmek için yeşil düğmeye tıklayın.

Bir logo ekle

Sıra yapımız mevcutken, biraz içerik ekleme zamanı. Görüntü modülünü satırın ilk sütununa ekleyerek başlayın.

Görüntü modülünün ayarları etkinken logonuzu yüklemek için + resim ekle seçin.

Logonuz yüklendikten sonra bazı değişiklikler yapmamız gerekir, bu yüzden başlamak için Tasarım sekmesini tıklayın.

Hizalama açılır menüsünün altında, görüntü hizalamasını masaüstünde sola ve tablet ve mobil merkezde ortalayın. Ardından, Boyutlandırma sekmesini tıklayın ve masaüstü ve tablet için genişliği % 50 ve mobil cihazlar için % 40 olarak ayarlayın.

Bittiğinde, modülü kaydetmek için Yeşil düğmeyi tıklayın.

Sosyal medya simgeleri ekleyin

Yeni bir modül eklemek için logonun altındaki Gri + simgesini tıklayın ve Sosyal Medya Takip Modülünü seçin.

Modül ayarları etkinken, seçtiğiniz sosyal medya platformlarını eklemek için +Yeni Sosyal Ağ Ekle düğmesini tıklayın. Bu eğitim için Facebook, X ve Instagram'ı ekleyeceğiz.

Her sosyal medya platformuna bir arka plan eklemek için, düzenlemek için dişli simgesini tıklayın.

Arka plan rengi için #ee8b22 kullanın. X ve Instagram simgelerini düzenlemek için bu adımları tekrarlayın.

Ardından, Tasarım sekmesine geçin ve aşağıdaki ayarları ekleyin:

• Modül hizalaması: sol (masaüstü), merkez (tablo ve mobil)
• Simge rengi: #ffffff
• Özel simge boyutunu kullanın: evet
• Özel simge boyutu: 20px
• Sınır Yuvarlak Köşeleri: 100 Piksel

Tamamlandığında, simgeleriniz aşağıdaki resme benzemelidir.

Bir Başlık Modülü Ekle

Ardından, ikinci sütunumuza bir başlık modülü ekleyeceğiz. Gri +simgesini tıklayın ve eklemek için başlık modülünü seçin. İletişim kutusu göründüğünde hizmetlerimizi başlık alanına yazın.

Tasarım sekmesini tıklayın ve aşağıdaki ayarları ekleyin:

• Başlık Seviyesi: H3
• Başlık Yazı Tipi: En şanslı adam
• Başlık Metin Hizalaması: Merkez
• Başlık Metin Rengi: #ffffff
• Başlık Metin Boyutu: 24 piksel
• Başlık Mektubu Boşluğu: 1 piksel

Tüm ayarlar uygulandıktan sonra, başlığınız aşağıdaki resme benzemelidir.

Bir Metin Modülü Ekle

Ardından, ikinci sütunumuzda önemli bağlantıları sergilemek için başlık modülünün altına bir metin modülü ekleyeceğiz. Divi varsayılan olarak modüle yer tutucu metin ekler, bu nedenle yeni metin eklemeden önce bunu silmeliyiz.

Burada bir menü modülü kullanabilmemize rağmen, bir metin modülü kullanmak ve her metin satırına bağlantılar eklemek daha mantıklıdır. Bir evcil hayvan gıda sitesi için bir altbilgi oluşturduğumuz için, evcil hayvan yiyecekleri ve ikramları, sağlık, oyuncaklar, tasmalar vb. Gibi kullanıcıya en faydalı olan iç sayfalara önemli bağlantılar eklemek isteyeceğiz. her bağlantı.

Bağlantılarınız yerinde olduğunda, Tasarım sekmesini tıklayın ve metin bağlantı menüsünün altına aşağıdaki ayarları ekleyin:

• Metin yazı tipi: inter
• Bağlantı metni hizalaması: sol (masaüstü), merkez (tablet ve mobil)
• Bağlantı metni rengi: #ee8b22
• Bağlantı Metin Boyutu: 16px
• Bağlantı hattı yüksekliği: 1.3em

Bir e-posta giriş modülü ekleyin

Üçüncü sütunumuza, kullanıcı verilerini yakalamak için bir e-posta giriş modülü ekleyeceğiz. Fikir, potansiyel müşterilerin yeni ürünler ve hizmetler hakkında güncellemeler almak için bir bültene kaydolmalarını sağlamaktır.

İçerik sekmesine aşağıdaki ayarları ekleyin:

• Başlık: Harika fırsatlar için kaydolun!
• Düğme: Şimdi kaydolun!
• Vücut: Paketimize katılın! Bültenimize kaydolun ve özel indirimler, yeni ürünlere erken erişim ve yaklaşan satışlarla ilgili güncellemeler alın. Ayrıca, sadece abone olmak için özel bir karşılama teklifi alın!
• E -posta hesabı: MailChimp, ActivECampaign, HubSpot ve daha fazlası dahil olmak üzere 20'den fazla e -posta sağlayıcısından birini seçin. Girişinizi yapılandırmak için yardıma ihtiyacınız varsa, bu gönderiye göz atın.
• Alanlar: geçiş evet için tek ad alanı kullanın
• Başarı Eylemi: Bir mesaj görüntülemeyi veya başka bir URL'ye yönlendirmeyi seçin.
• Arka plan: şeffaf

Tasarım sekmesine aşağıdaki düzen ayarlarını ekleyin:

• Düzen: üstte gövde, altta form
• Adı FullWidth: EVET ile geçiş yapın
• FullWidth adresine e -posta gönderin: evet

Alan Ayarları:

• Alanlar Arka Plan Rengi: #ffffff
• Alan Metni Rengi: #406171
• Alan Odak Arka Plan Rengi: #EE8B22
• Alan Odak Metni Rengi: #FFFFFF
• Fields Font: Inter
• Alanlar Yuvarlak Köşeler: 5 Piksel
• Alanlar sınır genişliği: 2px
• Sınır Rengi Alanlar: #EE8B22

Başlık Metin Ayarları:

• Başlık yazı tipi: Luckest Guy
• Başlık Metin Hizalaması: Sol
• Başlık metin rengi: #ffffff
• Başlık Metin Boyutu: 24 piksel
• Başlık mektubu aralığı: 1 piksel

Vücut metni ayarları:

• Vücut yazı tipi: inter
• Vücut metni hizalaması: sol
• Vücut metni rengi: #ffffff
• Vücut hattı yüksekliği: 1.3em

Düğme Ayarları:

• Düğme için özel stilleri kullanın: EVET ile geçiş yapın
• Düğme Metin Boyutu: 16px
• Düğme metin rengi: #ffffff
• Düğme arka planı: #ee8b22
• Düğme sınır genişliği: 0px
• Düğme sınır yarıçapı: 5px
• Düğme yazı tipi: inter
• Düğme yazı tipi ağırlığı: Semibold
• Göster düğme simgesi: hayır
• Düğme dolgu: 12 piksel (üst ve alt)

Yeni bir bölüm ekleyin

Son olarak, altbilgimize telif hakkı bilgileri ve Hizmet Şartları menümüz için yeni bir bölüm eklememiz gerekecek. Mevcut bölümün altındaki mavi simgeyi tıklayın ve normal bir bölüm seçin.

1/3 +/2/3 sütun satırı seçin.

Bölümün arka plan rengini #38A2DB olarak ve aralık (tasarım sekmesinde) üst ve alt kısmına ayarlayın ve ardından değişiklikleri kaydedin.

Sol sütuna bir metin modülü ekleyin. Gövdeye metin eklemek yerine dinamik içerik simgesini tıklayın. Telif hakkı bilgilerimizi buraya manuel olarak değiştirmeden her yıl güncelleyecek şekilde ekleyeceğiz.

İletişim kutusu göründüğünde, seçenekler listesinden geçerli tarihi seçin.

Metin iletişim kutusu göründüğünde, aşağıdaki ayarları girin:

• Önce: Telif Hakkı Sembolü (klavyenizde seçenek + g)
• Sonrası: İşletme Adınız. Metin girmeden önce bir alan bıraktığınızdan emin olun!
• Tarih Biçimi: Özel
• Özel Tarih Formatı: Y

Metninizi şekillendirmek için Tasarım sekmesine gitmeden önce değişiklikleri kaydedin. Tasarım sekmesinde, #FFFFFF metnini yapmak ve yazı tipi ailesini inter .

Bir Menü Modülü Ekle

Altbilgimize eklenecek son modül bir menü modülüdür. Yeni bölümümüzün doğru sütununa ekleyeceğiz. Görünüm> menülere giderek önceden bir menü oluşturmalısınız. Bu altbilgi menüsü, Sitenizde Gizlilik Politikası veya Şartlar ve Koşullar sayfası gibi yasal bilgiler içermelidir.

Menü modülünün ayarları etkinken, aşağıdaki seçenekleri seçin:

• Menü: Yasal Bilgi menünüzü seçin
• Arka plan: şeffaf

Tasarım ayarlarında aşağıdaki ayarları seçin:

Düzen:

• Stil: Sol Hizalanmış

Menü Metni:

• Aktif bağlantı rengi: #ffffff
• Menü yazı tipi: inter
• Menü metin rengi: #ffffff
• Metin Hizalaması: Doğru

Açılır menü ayarları:

Menünüzün alt menü bağlantıları olmadığı için burada değişecek sadece birkaç şey var. Bu ayarlar, kullanıcılar bir akıllı telefondan veya tabletten sitenizi görüntülediğinde menünüzün mobil sürümü için geçerlidir:

• Mobil Menü Arka Plan Rengi: #38A2DB
• Mobil menü metin rengi: #ffffff

Son olarak, simgeler sekmesinin altındaki Hamburger menü simgesi rengini #ffffff olarak değiştirin.

Son rötuşları eklemek

Altbilgi tasarımımız tamamlandığına göre, yapmamız gereken birkaç başıboş düzeltme var. Dikkat edeceğiniz gibi, e-posta giriş modülünün başlığı, komşu sütundaki Hizmet menüsü ile tam olarak hizalanmaz. Bunun nedeni, Divi'nin varsayılan olarak ona biraz dolgu eklemesidir. Bunu düzeltmek için e -posta seçeneği modülünün ayarlarını açın ve tasarım sekmesine gidin. Aralık açılır menüsünün altına, garip boşluğu çıkarmak için üst ve alt ve sol ve sağa 0px dolgu ekleyin.

Son olarak, telif hakkı bilgilerimiz ve yasal menümüz masaüstünde hizalanmış olsa da, daha küçük ekranlarda tam olarak sıralanmazlar.

Bunu düzeltmek için satır için Gelişmiş sekmesini tıklayın. Özel CSS altında ana öğeyi seçin ve duyarlı ayarlara gidin. CSS alanında, tablet için aşağıdakileri ekleyin:

display:flex;

Değişiklikleri tamamladıktan sonra, altbilginizi kaydetmek için Yeşil Kaydet düğmesini tıklayın.

Çıkmak için tema oluşturucunun sağ üst kısmındaki X'i tıklayın.

Son olarak, altbilginizi canlı hale getirmek için Değişiklikleri Kaydet düğmesini tıklayın.

Gördüğünüz gibi, Divi birkaç dakika içinde bir web sitesi altbilgisi tasarlamayı kolaylaştırır.

Web sitenizin altbilgisini divi ile yükseltin

İyi tasarlanmış bir web sitesi altbilgisi, sonradan düşünülenden daha fazlasıdır. Önemli bilgiler, marka takviyesi ve genel kullanıcı deneyimi için değerli gayrimenkul sunan herhangi bir başarılı web sitesinin önemli bir parçasıdır. Okunabilirlik, marka tutarlılığı ve SEO-zengin içerik gibi temel tasarım ilkelerini dahil ederek, ziyaretçilerinize etkili bir şekilde hizmet veren ve çevrimiçi varlığınızı artıran bir altbilgi tasarlayabilirsiniz. Divi gibi araçlarla güzel ve işlevsel bir altbilgi tasarlamak inanılmaz derecede kolaydır. Bu adımları izleyerek, ihtiyaçlarınızı karşılayan ve kitlenizde kalıcı bir izlenim bırakan bir altbilgi oluşturabilirsiniz.

Gerçek gücünü anlamanıza yardımcı olmak için Divi temasının tüm özelliklerini sergileyen kullanışlı bir tablo oluşturduk.