Mobil sürümü düzenleme

WordPress siteleri hızlı tasarım kullanır, düzenleyecek ayrı bir mobil sürüm yoktur. Bu kılavuzda, içeriğinizin mobil cihazlarda nasıl görüneceğini blok ayarları ve CSS ile nasıl özelleştireceğinizi öğreneceksiniz.

Gezinme bloku, mobil menü düğmesinin ayarlarını içerir (“hamburger” simgesi olarak bilinir). Mobil cihazlarda menünüzü özelleştirmek için:

1. Sitenizin panonuzdan Görünüm → Düzenleyici‘ye gidin.
2. Gezinme menünüzü içeren şablon veya şablon bölümünü seçin.
3. Liste Görünümünü açın ve mevcut Gezinme blokunu seçin.
4. Blok ayarları kenar çubuğunda ayarlar simgesine (dişli simgesi) tıklayın.

5. Görüntüleme bölümünde:
   • Hamburger simgesini kullanmak veya “Menü” metnini göstermek için “Simge düğmesini göster” seçeneğini açın.
   • Simge stilinizi (iki veya üç satır) seçin ve hamburger simgesinin ne zaman görüneceğini Kaplama Menüsü ayarları ile seçin.

Sitenizin menülerini biçimlendirme hakkında daha fazla bilgi edinin.

Bazı düzen blokları, içeriğin mobil ekranlarda dikey olarak yığılıp yığılmadığını kontrol etmenizi sağlar. Varsayılan olarak WordPress, içeriği okunabilir halde tutmak için içeriği otomatik olarak daha küçük ekranlara yığar.

Yığın davranışını ayarlamak için şu adımları izleyin:

1. Sitenizin panonuzdan Görünüm → Düzenleyici‘ye gidin.
2. Ayarlamak istediğiniz bloku içeren sayfa veya şablonu düzenleyin.
3. Liste Görünümünü açın ve bloku seçin.
4. Blok ayarlarında, “Mobilde yığınla” seçeneğini açın veya kapatın.

“Mobil cihazda yığın” ayarına sahip bloklar:

• Sütunlar
• Ortam ve metin
• En Son Instagram Gönderileri

Düğmeler ve menüler, tüm içeriği tek bir satıra sabitlemek yerine birden fazla satırı sardığında daha okunaklı hale gelir. Varsayılan olarak, birden fazla satırı kaydırma ayarı kapalıdır.

Kaydırmayı etkinleştirmek için şu adımları izleyin:

1. Sitenizin panonuzdan Görünüm → Düzenleyici‘ye gidin.
2. Ayarlamak istediğiniz bloku içeren sayfa veya şablonu düzenleyin.
3. Liste Görünümünü açın ve bloku seçin.
4. Blok ayarlarında, “Birden çok satıra kaydırmaya izin ver ” seçeneğini açın.

“Birden fazla satıra kaydırmaya izin ver” ayarına sahip bloklar:

• Düğmeler
• Paylaşım Düğmeleri
• Gezinme
• Sosyal Medya Simgeleri
• Yorumlar
• Satır ve Yığın

Piksel (px) olarak boyutlandırılmış metin tek boyutta kilitli kalır. Em veya rem olarak boyutlandırılan metin, ziyaretçinizin ayarlarına ve ekran boyutuna göre ayarlanarak sitenize daha erişilebilir ve farklı cihazlarda okunması kolaylaştırılır.

Metni piksellerden ilgili birimlere değiştirmek için şu adımları izleyin:

1. Yeniden boyutlandırmak istediğiniz metinle bloka tıklayın.
2. Blok ayarlarında, Tipografi bölümünü bulun.
3. Yazı Tipi boyutunun altında, özel boyut simgesine tıklayın (noktaları olan iki yatay çizgi).
4. px birimini em veya rem olarak değiştirmek için tıklayın.
5. Sayısal bir değer girin ve gerektiği gibi ayarlayın.

Em ve rem arasında seçim yapmak:

• em — Metin, kapsayıcısına göre ölçeklenir (belirli blokların içindeki altyazılar, etiketler veya metin için yararlıdır)
• rem — Metin tüm sitenizde tutarlı kalır (metin gövdesi, başlıklar ve düğmeler için yararlıdır)

Ayrıca tek tek blokları ayarlamak yerine yazı tipi boyutunu site çapında özelleştirebilirsiniz.

Kılavuzun bu bölümü, WordPress.com Premium, Kurumsal ve Ticaret paketlerimizi ve eski Pro paketimizi kullanan siteler için geçerlidir. Ücretsiz veya Kişisel paketlerine sahip sitelerde bu özelliğe erişmek için paketinizi yükseltin.

CSS sınıflarını kullanarak masaüstü veya mobil cihazlarda belirli blokları gizleyebilirsiniz. Bunları ayarlamak için şu adımları izleyin:

1. Gizlemek istediğiniz bloku içeren sayfayı, gönderiyi veya şablonu düzenleyin.
2. Bloka tıklayarak veya Liste Görünümünde seçerek seçin.
3. Blok ayarlarında Gelişmiş‘e tıklayın.
4. “Ek CSS sınıfları” kutusuna hide-desktop veya hide-mobile yazın:

5. Sitenizin özel CSS ayarlarına gidin:
   • Blok temaları: Görünüm → Düzenleyici → Stiller → ⋮ → Ek CSS
   • Klasik temalar: Görünüm → Özelleştir → Ek CSS
6. Şu kodu yapıştırın ve Kaydet‘e tıklayın:

/* mobilde öğeleri gizle*/
@media (maks-genişlik: 768px) {
 .hide-mobile { display: none !important; }
}
/* masaüstünde öğeleri gizle*/
@media (min-genişlik: 769px) {
 .hide-desktop { display: none !important; }
}

CSS kodunu bir kez sitenize ekleyin. Bundan sonra, hide-mobile veya hide-desktop sınıfını herhangi bir bloka ekleyebilirsiniz ve CSS bu sınıfı belirtilen cihazda otomatik olarak gizler.