Eklenti olmadan WordPress'te üst bilgi oluşturma
Üst bilgi, her ziyaretçinin gördüğü tek bölümdür; temalar ise bu bölümü genellikle dokuz seçenekli bir ayar ekranının arkasına gizler. Canvas'ta üst bilgi, düzenleyicide bloklardan oluşturduğunuz bir kayıttır; bu yüzden bu rehber onay kutularında gezinmekten çok bir yapım sürecidir.
Adım 1: Canvas'ta üst bilgi nedir
Bir üst bilgi, WordPress yönetici alanında bir sayfa gibi listelenen ve aynı blok düzenleyicide düzenlenen bir kayıttır. Bu tek karar, üst bilgi eklentisini yazılım yığınınızdan çıkarmanızı sağlar.
Diğer temalar üst bilgiyi başka bir yerde oluşturur. Blocksy ve Astra, başlık oluşturucularını Özelleştirici'de tutar; bu, sitenin yanında yer alan bir ayar paneli olup sayfaları yazdığınız düzenleyiciden ayrıdır. Blocksy karşılaştırmamız iki yaklaşımı yan yana koyar.
İç içe yapı
Bir üst bilgi kaydı Header Root içerir. Root, Header Container içerir; bu container, üst bilginin kutulu mu, tam genişlikte mi olacağına ya da bir kırılma noktasında bir şekilde, diğerinde başka bir şekilde görüneceğine karar verir. Container, Header Zones barındırır; bir Header Zone, üst bilgi satırındaki bir hücredir. Logo birinde, navigasyon bir sonrakinde, arama simgesi ve sepet ise sonuncusunda yer alır.
Üst bilgi ailesinde toplam 22 blok var; tipik bir sitede bunlardan dört ya da beşini kullanacaksınız. Geri kalan bloklar, bir mağaza araması, dil bağlantısı ya da köşede çalışma saatlerini gösteren bir blok gerektiğinde işinize yarar.
Bu, ayrı bir düzenleyici değildir. WordPress'te sayfa düzenliyorsanız üst bilgiyi de düzenleyebilirsiniz; aynı geri alma, blok ayarları ve klavye kısayolları geçerlidir.
Adım 2: Üst bilgi kaydını oluşturun
Canvas menüsündeki Headers listesini açın ve yeni bir kayıt ekleyin. İki dürüst başlangıç noktanız var.
Bir desenden başlayın
Bir üst bilgi deseni ekleyin; size düzenlenmiş standart bloklar gelir ve bunları yeniden düzenleyebilir, yeniden adlandırabilir ya da silebilirsiniz. Üst bilgiler, toplam 183 desenden oluşan üründe en büyük desen kategorisidir; bu yüzden genellikle istediğinize yakın bir şey bulursunuz. Bu, en hızlı yoldur ve ilk tasarımda izlemeniz gereken yoldur.
Bir demodan başlayın
88 demo web sitesinden birini içe aktardıysanız, başlığı zaten sitenizde bir kayıt olarak bulunur. Açıp değiştirin ya da bir kopyasını oluşturup kopya üzerinde deneme yapın. Çalışan bir başlığı düzenlemek, boş bir tuvale kıyasla yapıyı daha hızlı öğretir.
Kayda ne için kullanıldığını söyleyen bir ad verin, örneğin Ana üst bilgi veya Açılış sayfası üst bilgisi. Bir ay içinde bunlardan üç tane olacak ve onları birbirinden ayırt etmek için elinizde yalnızca adları kalacak.
Adım 3: Bölgeleri düzenleyin
Bölgeler yerleşimi yönetir; bu sayede hizalama sınıflarıyla neredeyse hiç uğraşmazsınız.
- Bir bölgeyi kenara yaslayın. Logo için sol bölge, menü için orta bölge, eylemler için sağ bölge; çoğu sitenin sonunda vardığı düzen budur.
- Birbirine ait olanları bir arada tutun. Aynı bölgedeki bir arama simgesi, sepet ve düğme tek bir küme olarak kalır ve tek grup halinde aralıklandırılır.
- Kırılma noktası başına yeniden sıralayın. Masaüstünde üçüncü sırada yer alan bölge, ikinci bir üst bilgi kaydı olmadan telefonda birinci sırada yer alabilir.
- Bir bölgeyi bir cihaz kademesiyle sınırlayın. Bir bölgeye, yer olmayan cihazları atlamasını söyleyin; böylece sonradan CSS ile hiçbir şeyi gizlemeniz gerekmez.
- Kendi sınıflarınızı ekleyin, bir bölgeye kendi stil sayfanızdan ulaşmak istediğinizde.
Önce masaüstü düzenini oluşturun ve parçalar yerleşene kadar ona dokunmayın. Gerçek içerik satıra yerleştirildiğinde düzen kararları çok daha kolay verilir.
Adım 4: Parçaları ekleyin
Şimdi bölgeleri doldurun. Bunların her biri bir bloktur ve her birinin, o bloğun anladığı seçenekleri içeren bir ayarlar paneli vardır.
- Header Logo. Logonuz; sabitlenmiş durum ve koyu durum için ayrı dosyalarla. Böylece koyu bir fotoğrafın üzerindeki şeffaf üst bilgi için geçici bir çözüm gerekmez.
- Header Navigation. Açılır menüler ve Mega Menü panelleriyle birlikte ana menü. Bir WordPress menüsünü görüntüler, bu nedenle menünün kendisi yine beklediğiniz yerden yönetilir.
- Header Search. Tasarıma göre, bir alanı açan bir simge ya da her zaman açık duran bir alan.
- Header Button. Eylem çağrısı; her zamanki boyut, stil ve bağlantı ayarlarıyla. Bir tanesi ikna edicidir, üçü ise gürültüdür.
- Header Cart. Ürün sayısını ve açılır bir özeti içeren WooCommerce sepeti, mağazalar için.
- Header Icon Link, Header Social ve Header Info. Bir telefon numarası, sosyal profil satırı, küçük bir iletişim bilgileri bloğu, adres veya çalışma saatleri.
Liste yetmediğinde Mega Menüler
Bir mega menü ayrı bir kayıttır; bloklar olarak tasarlanır ve Mega Menu bloğu tarafından işlenir. Böylece bir menü öğesi, sütunlar, görseller ve düğmelerden oluşan tam genişlikte bir paneli açar. Mega Menu Column bu paneli bir ızgarada tutar. Bir kategorinin gerçekten yapısı olduğunda kullanın, küçük bir siteyi kalabalık göstermek için değil.
Adım 5: Yapışkan, şeffaf ve düzen ön ayarları
Davranış, tek tıklamayla uyguladığınız ve sonra ayarlayabileceğiniz yerleşim ayarları paketleri olan ön ayarlardan gelir. İstediğiniz davranışı seçin, sonrasında dilediğiniz her şeyi değiştirin.
- Şeffaf. Arka plan yok; bu nedenle üst bilginin arkasında ne varsa görünür. Logonun yazı tipi görünümünün okunabilir kalması için koyu veya açık logo varyantıyla birlikte kullanın.
- Yarı saydam. Arkadaki görseli görünür tutan ve metni okunabilir kılan yarı geçirgen bir arka plan. Genellikle yoğun bir fotoğrafa göre daha güvenli bir tercihtir.
- Yüzen, ve yarı saydam yüzen ya da küçük yüzen üst bilgi; üst bilgi, sayfanın içinde, çevresinde boşluk bırakılarak ve pencere kenarlarından uzakta durur.
- Tam genişlik yapışkan. Görüntü alanının tamamını kaplar ve sayfa kaydırıldıkça sabit kalır.
- Yukarı kaydırırken sabitlenir. Ziyaretçi aşağı kaydırdığında üstten ayrılır ve yukarı kaydırdığında geri döner; bu sayede uzun sayfalar alanını geri kazanır.
Bunların arkasındaki site genelindeki ayarlar
Üst bilgi seçenekleri, Tema Seçenekleri'ndeki en büyük bölümdür; 533 alanın 94 tanesi bu bölümdedir ve tek bir kaydın sahip olmaması gereken şeyleri taşır: varsayılan üst bilgi, yapışkan davranış, yükseklik, boşluklar ve mobil kırılma noktası. Bir demo içe aktarımı hepsini doldurur, siz de önemsediklerinizi değiştirirsiniz.
Adım 6: Telefon üst bilgisi
Ziyaretçilerin çoğu telefondan gelir, bu yüzden önce bunu kontrol edin. İyi haber, bunun aynı kayıt olmasıdır.
- Yeniden oluşturmak yerine yeniden sıralayın. Logoyu ortaya taşıyın, menü düğmesini sola ve bir arama düğmesini sağa koyun; hepsini bölge sıralamasıyla yapın.
- Sığmayanı çıkarın. İletişim bilgilerini veya sosyal medya satırını yalnızca daha büyük ekranlarda gösterin. Bunları bir telefona sıkıştırmanın kimseye faydası yok.
- Dokunma alanlarını büyük tutun. Yürürken insanların en çok dokunmaya çalıştığı iki öğe, menü düğmesi ve telefon simgesidir.
- Kırılma noktasını bilinçli olarak ayarlayın. Menünün daraldığı genişlik bir ayardır; bu nedenle uzun bir menü, kısa bir menüye göre daha erken daralabilir.
- Mobil menü için bir yan panel düşünün. Yan panel, ekranın kenarından kayarak açılan bir kayıttır; gerçek bir menü, arama alanı ve bir düğme için yer sunar.
Yayımlamadan önce düzenleyicide kontrol edin. Canvas, üst bilgiyi düzenleme tuvalinde, bir ziyaretçi için de üst bilgiyi oluşturan kodla oluşturur; bu nedenle telefon düzenine oluşturma sırasında bakarak karar verebilirsiniz.
Adım 7: Sitenin tamamına veya sayfa bazında atayın
Bir kayıt, ona bir şey işaret edene kadar hiçbir şey yapmaz. İki düzey vardır ve bu düzeyler, her üst bilgi ve alt bilgi öğesi için aynı şekilde çalışır.
Site genelindeki varsayılan
Tema Seçenekleri'nde varsayılan üst bilgiyi ayarlayın, her sayfa onu kullanır. Üst çubuk, Sayfa Başlığı tasarımı ve alt bilgi için de aynısını yapın. Yeni bir sayfayı yayımladığınız anda doğru görünmesini sağlayan ayar budur.
Sayfa bazında geçersiz kılma
Herhangi tek bir sayfa, bunların herhangi birini kendi ayarlarından geçersiz kılabilir. Bir kampanya açılış sayfası şeffaf bir üst bilgi kullanır ve üst çubuk içermez; iletişim sayfası ise standart olanı korur. Bunun için hiçbir şey çoğaltılmaz ve sonradan hatırlanması gereken bir şey olmaz, çünkü geçersiz kılma, etkilediği sayfada tutulur.
Üst çubuklar
Üst bar, kendi blokları olan ayrı bir kayıttır: telefon numarası, çalışma saatleri, dil değiştirici ve duyuru. Header Topbar bloğu bunu başlık satırının üstüne yerleştirir. Ayrı bir öğe olduğundan, bir tatil mesajı başlığı hiç açmadan tüm sitede değişir.
Kaynaklar
Bu kılavuz Canvas'ın kendisi dışında bir şey anlattığında, bunu belgeleyen resmî sayfalar aşağıdadır.
- Görünüm Menüleri Ekranıwordpress.org · WordPress menülerinin oluşturulduğu ve bir temanın sunduğu konumlara atandığı yer
- Başarı Ölçütü 2.5.8 Anlamak: Hedef Boyutu (Minimum)w3.org · Dokunma hedeflerinin neden en az 24 x 24 CSS piksel boyutunda olması gerektiği
Buradan sonra nereye gidebilirsiniz
Üst bilginin daha geniş sorunun cevabını neden belirlediğine dair iki rehber ve Başlık Oluşturucu'nun kendisi.
Sık sorulan sorular
Tüm SSS kalan soruları yanıtlar, belgeler ise her ayarı ayrıntılarıyla anlatır.
Mobil cihazlar için ikinci bir üst bilgi gerekir mi?
Genellikle gerekmez, çünkü tek bir Canvas üst bilgi kaydı telefona kendi başına uyum sağlar. Bölgeler kırılma noktasına göre yeniden sıralanır ve her biri bir cihaz kademesiyle sınırlandırılabilir; böylece tek bir kayıt logoyu telefonda ortalayabilir, iletişim bilgilerini kaldırabilir ve menüyü bir açma/kapama düğmesinin arkasına taşıyabilir. Yalnızca gerçekten farklı bir tasarım istediğinizde ikinci bir kayıt oluşturun, düzeni onarmak için değil.
Bir sayfada farklı bir üst bilgi olabilir mi?
Evet, her Canvas sayfasının kendi üst bilgisi olabilir. Üst bilgiler, üst çubuklar, sayfa başlıkları ve alt bilgilerin her biri site genelinde bir varsayılana ve sayfa bazında bir geçersiz kılmaya sahiptir. Bu sayede bir kampanya açılış sayfası, bir fotoğrafın üzerinde şeffaf bir üst bilgi taşıyabilirken diğer tüm sayfalar standart üst bilgiyi kullanmaya devam eder.
Bu bir widget alanı mı yoksa bir menü mü?
Canvas üst bilgisi bunlardan hiçbiri değildir: blok düzenleyicide tıpkı bir sayfa gibi düzenlediğiniz bir kayıttır; içindeki logo, gezinme, arama, sepet ve düğmeler kendi ayar panelleri olan bloklardır. WordPress menüleriniz hâlâ WordPress menüleridir; Header Navigation bloğu bunlardan birini görüntüler.
Lisansınızın süresi dolduğunda başlığınıza ne olur?
Siteniz bugün olduğu gibi görüntülenmeye devam eder. Duraklayan şey hizmettir: güncellemeler, demo içe aktarmaları, CanvasAI Engine ve premium blokların düzenlenmesi yenileyene kadar durdurulur; ayrıca lisans kontrolü sunucularımıza ulaşamazsa 14 günlük bir ek süre vardır.
Canvas ile bir sonraki web sitenizi oluşturun
Yeni başlayan, serbest çalışan ya da ajans olun, aynı bloklara ve aynı demolara sahip olursunuz. Tek bir siteyle başlayın ve aynı lisans kapsamında ihtiyacınız kadar site oluşturun.