Sitenizin telefon ve tabletlerde doğru görünmesini sağlama
Mağazanızın tablet ve telefonlarda nasıl göründüğünü görün, blokları küçük ekranlarda gizleyin ve bir bloğun konumunu yalnızca tek bir ekran boyutu için ayarlayın.
Alışveriş yapanların çoğu mağazayı telefondan ziyaret eder, bu yüzden sayfalarınızın her boyutta çalışması gerekir. Bir kez tasarlarsınız ve Payly sayfayı tabletlere ve telefonlara uyarlar. Bu makale, kendiliğinden neler olduğunu ve bir bloğun küçük bir ekranda farklı davranmasını istediğinizde bunu nasıl değiştireceğinizi anlatır.
Düzeniniz nasıl uyum sağlar
Bloklar, sabit piksel konumlarında değil, 12 sütunlu bir ızgaranın hücrelerinde durur, dolayısıyla küçük bir ekranda üst üste binemez. Sayfa iki noktada düzen değiştirir:
- Tabletler (1024 pikselden dar ekranlar) aynı ızgarayı korur. Tablet için taşımadığınız sürece bir blok olduğu yerde kalır.
- Telefonlar (760 piksel veya daha dar) her bloğu kendi satırına, tam genişlikte yerleştirir. Bloklar, masaüstünde okuduğunuz sırayla, yani yukarıdan aşağıya, sonra soldan sağa dizilir.
Bazı bloklar daha da uyum sağlar. Üst bilgi bağlantıları bir menü düğmesinin arkasına katlanır, ızgaralar tek sütuna iner, galeriler ve logo şeritleri iki sütun gösterir. Sonuç, ek bir kurulum gerektirmeden telefonda çalışan bir mağazadır.
Ekran boyutları arasında geçiş yapın
- Düzenleyicinin üst çubuğunda Tablet veya Mobil'e tıklayın. Sayfa, o boyutta nasıl göründüğünü göstermek için daralır.
- Sayfada iyi okunmayan bir şey olup olmadığına bakın. Kaydırın ve blokları her zamanki gibi seçin.
- Tam boyutlu düzene dönmek için Masaüstü'ne tıklayın.
Bu düğmeler önizlemeden fazlasını yapar. Hangi düzeni düzenlediğinizi de seçerler. Tablet veya Mobil'e geçtiğinizde, bir mesaj değişikliklerin yalnızca o boyuta uygulanacağını hatırlatır. Orada yaptığınız hiçbir değişiklik masaüstü düzenine dokunmaz.
Bir bloğu küçük ekranlarda gizleyin
Büyük bir fotoğraf veya uzun bir süs bloğu telefonu kalabalıklaştırabilir. Onu küçük ekranlarda gizleyip masaüstünde tutabilirsiniz.
- Üst çubukta Mobil'e (veya Tablet'e) tıklayın.
- Bloğu seçin.
- Ayarlar panelinde Boyut ve konum'u açın.
- Mobilde gizle'yi (veya Tablette gizle'yi) açın. Blok o görünümden kaybolur ve yayındaki sayfada boş bir boşluk bırakmaz.
Tabletlerde gizlenen bir blok, Mobil'i görüntülerken anahtarı yeniden kapatmadığınız sürece telefonlarda da gizlidir. Bir bloğu her ekranda gizlemek için Masaüstü'nde Bu bloğu gizle'yi kullanın.
Bir bloğu tek bir boyutta farklı yerleştirin
- Üst çubukta Tablet veya Mobil'i seçin.
- Bloğu seçin ve Boyut ve konum'u açın.
- Başlangıç sütunu, Sütun genişliği, Başlangıç satırı veya Satır yüksekliği'ni değiştirin ya da Tüm genişliği doldur'a tıklayın. Bloğu sayfada sürükleyip yeniden boyutlandırabilirsiniz de.
Boyut ve konum bölümünün üstündeki çubuk, hangi düzeni düzenlediğinizi söyler. Blok daha büyük boyutu izlediği sürece Devralındı gösterir, bloğun kendine ait ayarları olduğunda ise bir Sıfırla düğmesi gösterir. Bloğun yeniden daha büyük boyutu izlemesi için Sıfırla'ya tıklayın. Geçerli düzeni tüm boyutlara kopyalamak için Bu düzeni tüm ekranlarda kullan'a tıklayın.
Üst çubuk ayrıca masaüstü düzeninden farklı olan blokları sayar, örneğin mobil ekranında 1 blok farklı. Bu bloklardan birinden diğerine geçmek için sayıya tıklayın.
Bir bloğu her ekranda aynı tutun
Bir bloğa her yerde tek bir düzen vermek için Boyut ve konum bölümünde Tüm ekranlarda aynı'yı açın. Tablet veya telefon için sahip olduğu ayarlar kaldırılır ve sonraki düzenlemeler tüm boyutlara aynı anda uygulanır.
Not: Bir bloğu başka bir bölüme taşımak onu tüm ekran boyutlarında değiştirir, bu yüzden Payly buna yalnızca Masaüstü'nde izin verir. Bir bloğu telefonlarda farklı yerleştirmek için onu her iki bölüme de ekleyin ve her boyutta istemediğinizi gizleyin.
Sonucu kontrol edin
Sayfalarınızı telefon ve tablet genişliklerinde gezmek için Önizleme'yi kullanın ve duyurmadan önce yayınlanmış mağazayı gerçek bir telefonda görüntüleyin. Bkz. Siteyi yayınlamadan önce önizleme.