Şablon Seçimi ve İlk Sayfanızı Düzenleme

Bu derste ne yapacağız?

Bu derste bir şablon seçecek, ardından metni, görselleri, renkleri ve yazı tipini kendi markanıza göre değiştireceksiniz. Sürükle-bırak düzenleyicinin temel araçlarını da uygulamalı olarak tanıyacaksınız. Dersin sonunda, kendi adınızı ve renklerinizi taşıyan bir ilk sayfanız olacak.

Ön koşul: Bir site kurucu hesabınızın açık olması ve yeni bir site projesi başlatabilmeniz gerekir. Önceki derslerde kurucuyu tanıyıp hesabınızı hazırlamıştınız. Bu ders o hazırlığın üzerine kurulur. Bir sonraki derste bu ilk sayfayı sitenin diğer parçalarıyla (ek sayfalar, menü ve formlar) birleştirmeye başlayacaksınız. Bu yüzden bugün yaptığınız düzenlemeleri kaydetmeyi unutmayın.

Not: Site kurucuların arayüzü zamanla ve sürüme göre değişir. Düğmelerin adı ya da yeri sizde biraz farklı olabilir. Burada anlatılan mantık hemen hemen her kurucuda aynıdır, bu yüzden benzer adlı düğmeyi arayın.

Kavram

Şablonu, hazır döşenmiş bir dükkân gibi düşünün. Raflar, kasa ve tabelanın yeri belli. Siz yalnızca ürünleri, tabelayı ve duvar rengini kendinize göre değiştiriyorsunuz. Sıfırdan duvar örmek zorunda değilsiniz.

Bir şablonun içinde şu parçalar bulunur:

• Bölüm (section): Sayfanın yatay şeritleridir. Örneğin en üstteki karşılama alanı, hizmetler şeridi ya da iletişim şeridi.
• Öğe (element): Bölümlerin içindeki metin, görsel, düğme gibi tek tek parçalar.
• Tema ayarları: Renk paleti ve yazı tipi gibi bütün siteyi etkileyen genel ayarlar.

Önemli bir fark: Bir öğeyi değiştirmek yalnızca o öğeyi etkiler. Tema ayarını değiştirmek ise bütün sayfaları aynı anda etkiler. Marka rengini tek tek her yerde boyamak yerine tema ayarından değiştirmek çok daha hızlıdır.

Adım adım uygulama

Aşağıdaki adımları sırayla izleyin. Adımları numarasıyla anıyorum.

• Adım 1 – Şablon galerisini açın. Yeni site oluştururken ya da panelden şablon değiştirme bölümüne girerken Şablonlar (bazı kurucularda Temalar ya da Tasarım seç) ekranı açılır. Üstte genellikle kategori filtreleri bulunur.
• Adım 2 – Kategoriyi seçin. Sitenizin amacına en yakın kategoriye tıklayın: kişisel portfolyo, küçük işletme, blog, çevrimiçi mağaza gibi. Amaca uygun şablon daha az düzenleme gerektirir.
• Adım 3 – Üç şablonu karşılaştırın. Her şablonun küçük resminin üzerine gelince Önizle benzeri bir düğme çıkar. Üç şablonu önizleyin ve şunlara bakın: Metin okunaklı mı? Görsel yerleri sizin içeriğinize uygun mu? Menü yeterince sade mi? Süslü ama içeriğinize uymayan şablonu elemek, sonradan çok zaman kazandırır.
• Adım 4 – Şablonu uygulayın. Seçtiğiniz şablonda Bu şablonu kullan (ya da Düzenle) düğmesine tıklayın. Düzenleyici açılır. Ortada sayfanın kendisi, solda ya da üstte araç çubuğu bulunur.
• Adım 5 – Düzenleyiciyi tanıyın. Sayfada bir metne tek tıklayın. Etrafında bir çerçeve ve küçük bir mini araç çubuğu belirir. Bir görsele tıklayınca da benzer bir çerçeve çıkar. Bu çerçeve, o öğenin seçili olduğunu gösterir. Sol tarafta genellikle Ekle (artı simgeli) düğmesi vardır. Yeni bölüm, metin ya da görsel buradan eklenir.
• Adım 6 – Metni değiştirin. Karşılama alanındaki başlığa çift tıklayın ve içindeki örnek yazıyı silin. Kendi işinizi anlatan kısa bir başlık yazın. İyi bir başlık, kim olduğunuzu ve ne sunduğunuzu tek cümlede söyler. Altındaki açıklama metnini de aynı şekilde değiştirin. Hiçbir örnek (yer tutucu) metin sitede kalmasın.
• Adım 7 – Görseli değiştirin. Ana görsele tıklayın ve çıkan mini araç çubuğunda Görseli değiştir (ya da kalem veya resim simgesi) seçeneğini bulun. Yükle sekmesinden kendi fotoğrafınızı seçin. Yalnızca kullanım hakkına sahip olduğunuz görselleri kullanın. Kurucunun kendi ücretsiz görsel kütüphanesi de güvenli bir seçenektir. Yüklenince görselin alt metnini (alternatif metin) kısa bir cümleyle doldurun. Bu, ekran okuyucu kullananlara yardım eder.
• Adım 8 – Renkleri markanıza uyarlayın. Araç çubuğunda ya da panelde Tasarım, Stil veya Renkler başlığını bulun. Hazır paletlerden birini seçebilir ya da ana rengi elle belirleyebilirsiniz. Renk kutusuna tıkladığınızda renk seçici açılır. Orada bir renk kodu (örneğin #1F6FEB biçiminde) yazabilirsiniz. Kendi logonuz varsa, onun ana rengini kullanın. Genel kural: bir ana renk, bir vurgu rengi ve bir de nötr (beyaz ya da açık gri) renk yeterlidir.
• Adım 9 – Yazı tipini seçin. Aynı Tasarım bölümünde Yazı tipleri (Fonts) ayarını açın. Başlıklar için bir, gövde metni için bir yazı tipi seçin. En fazla iki yazı tipi kullanın. Fazlası siteyi dağınık gösterir. Gövde metni için sade ve okunaklı bir tip seçmek iyi bir tercihtir.
• Adım 10 – Düğmeyi düzenleyin. Karşılama alanındaki düğmeye tıklayın. Düğme yazısını “Bize ulaşın” ya da “Hizmetleri gör” gibi net bir eylem çağrısına çevirin. Bağlantı ayarında düğmenin nereye gideceğini belirleyin. Henüz sayfa yoksa şimdilik sayfa içindeki bir bölümü seçebilirsiniz.
• Adım 11 – Bölümleri düzenleyin. Gereksiz bir bölüme tıklayın ve Sil (çöp kutusu simgesi) ile kaldırın. Bölümleri yukarı ve aşağı oklarıyla ya da sürükleyerek yeniden sıralayabilirsiniz. Yeni bir bölüm gerekirse Ekle menüsünden uygun bir bölüm seçin. Yanlış bir işlem yaparsanız Geri al okuna ya da Ctrl+Z kısayoluna basın.
• Adım 12 – Telefon görünümünü kontrol edin. Üstte bulunan bilgisayar, tablet ve telefon simgelerinden telefon simgesine tıklayın. Metinlerin taştığı ya da görsellerin kesildiği yer olup olmadığına bakın. Ziyaretçilerin büyük kısmı siteye telefondan girebilir, bu yüzden bu kontrolü atlamayın.
• Adım 13 – Kaydedin ve önizleyin. Kaydet düğmesine basın, ardından Önizleme ile sayfayı ziyaretçi gözüyle gezin. Henüz yayına almak zorunda değilsiniz. Yayın işlemini sonraki aşamada yapacaksınız.

Sık karşılaşılan sorunlar

Mini görev

Hayali ya da gerçek küçük bir işletme için (örneğin bir fotoğrafçı, bir ev yapımı pasta atölyesi ya da kişisel bir portfolyo) tek sayfalık bir ilk sayfa hazırlayın. Süre: yaklaşık 20 dakika.

• Üç şablonu önizleyip birini seçtim.
• Karşılama başlığını ve açıklamasını kendi metnimle değiştirdim.
• Ana görseli kendi görselimle değiştirdim ve alt metin yazdım.
• Tema ayarından ana rengi belirledim.
• En fazla iki yazı tipi kullandım.
• Düğme metnini net bir eyleme çevirdim.
• Kullanmayacağım en az bir bölümü sildim.
• Telefon görünümünü kontrol ettim ve gerekli düzeltmeyi yaptım.
• Sayfayı kaydettim ve önizlemeyle gezdim.
• Sayfada yer tutucu (örnek) metin kalmadı.

Kendini sına

• Soru 1: Bölüm (section) ile öğe (element) arasındaki fark nedir?
• Soru 2: Marka rengini tüm sitede aynı anda değiştirmek için nereyi kullanmalısınız?
• Soru 3: Bir sitede neden en fazla iki yazı tipi kullanmanız önerilir?
• Soru 4: Görselin alt metni ne işe yarar?
• Soru 5: Yanlışlıkla yaptığınız bir değişikliği nasıl geri alırsınız ve yayına almadan önce hangi görünümü kontrol edersiniz?

Cevaplar

• Cevap 1: Bölüm, sayfanın yatay bir şerididir. Öğe ise bölümün içindeki tek tek metin, görsel ya da düğme gibi parçalardır.
• Cevap 2: Tek tek öğeleri boyamak yerine tema ayarlarını (Tasarım, Stil ya da Renkler bölümünü) kullanmalısınız. Böylece değişiklik bütün sayfalara yayılır.
• Cevap 3: Fazla yazı tipi siteyi dağınık ve profesyonellikten uzak gösterir. Bir başlık, bir gövde yazı tipi okunaklılık ve tutarlılık sağlar.
• Cevap 4: Alt metin, ekran okuyucu kullanan kişilere görseli anlatır. Görsel yüklenmediğinde de yerine gösterilebilir.
• Cevap 5: Geri al okuna ya da Ctrl+Z kısayoluna basarsınız. Yayından önce telefon görünümünü ve önizlemeyi kontrol edersiniz.

Tebrikler! İlk sayfanız artık kendi markanızı taşıyor. Bir sonraki derste bu sayfanın üzerine yeni içerik ve bölümler ekleyerek siteyi büyütmeye devam edeceksiniz.