Önce ve sonra bölümü iki görseli bir ayırıcıyla üst üste koyar. Alışverişçiler bir görselin veya diğerinin daha fazlasını görmek için ayırıcıyı sürükler. Sonuçlar (öncesi ve sonrası), iki renk veya bir ürünün iki farklı yüzeyi için kullanın.
Bölümü ekleyin
- Oluşturucuyu açın ve istediğiniz sayfaya gidin. Ana sayfa, ürün, açılış, koleksiyon ve koleksiyonlar sayfalarında, sayfa başına en fazla 3 tane çalışır.
- Bölümler sekmesinde Yeni bölüm ekle'ye tıklayın ve İçerik grubundan Önce ve sonra'yı seçin.
- İçindeki Önce ve sonra bloğuna tıklayıp iki görselinizi seçin, sonra Yayınla'ya tıklayın.
Önce ve sonra bloğu
Bu blok iki görseli barındırır. Bölümde her zaman bulunur ve kaldırılamaz.
- Öncesi görseli ve Sonrası görseli: iki fotoğraf. Hizalı dursunlar diye aynı açıdan çekilmiş fotoğraflar kullanın.
- Öncesi etiketi ve Sonrası etiketi: her görselin köşesinde "Önce" ve "Sonra" veya "Siyah" ve "Beyaz" gibi kısa bir etiket. Etiketi gizlemek için boş bırakın.
- Yön: Yatay, alışverişçilerin sola ve sağa sürüklediği bir ayırıcı kullanır. Dikey, alışverişçilerin yukarı ve aşağı sürüklediği bir ayırıcı kullanır.
- Oran: çerçevenin şekli. Otomatik öncesi görselini izler, ya da Dikey, Kare veya Yatay seçin. İki görsel de aynı çerçeveye göre kırpılır.
- Ayırıcı konumu: ayırıcının başladığı yer, %5 ile %95 arası. %50'de alışverişçiler her görselin yarısını görür.
- Ekranda göründüğünde ipucu göster: ayırıcı kendiliğinden biraz hareket eder, böylece alışverişçiler onu sürükleyebileceklerini anlar.
- Bilgisayarda fareyi takip et: bilgisayarlarda ayırıcı tıklamadan fareyi takip eder. Telefonlarda alışverişçiler her zaman sürükler.
- Ana renk şemasını kullan: ayırıcı, tutamaç ve etiketler bölümün renklerini kullanır. Başka bir Renk şeması seçmek için kapatın.
Bölüm ayarları ve başlık
Bir başlık ve kısa bir metin için en fazla 2 Metin bloğu, 1 Ayırıcı ve 1 Grup ekleyin.
- Yön: Dikey başlığı görsellerin üstüne, Yatay yanına koyar.
- Mobilde dikey yığın: varsayılan olarak açıktır, böylece görseller telefonun tüm genişliğini korur.
- Konum ve Hizalama, Bölüm genişliği, Renk şeması, Dolgu ve bir Özel CSS sekmesi.
Ürün sayfasında
Aynı Önce ve sonra bloğu Ürün bilgisi ve Açılış bilgisi bölümlerinin ve açılır sekmelerin içine de konabilir, böylece karşılaştırma satın al düğmesinin yanında durur. Bkz. Ürün sayfama açılır sekmeleri, teslimat tarihlerini, beden rehberini, rozetleri veya öncesi ve sonrası görsellerini nasıl eklerim?
Bilmekte fayda var
- Canlı mağazanızda karşılaştırma yalnızca iki görsel de seçildiğinde görünür. O zamana kadar oluşturucu örnek görseller gösterir.
- Alışverişçiler ayırıcıyı klavyeyle de hareket ettirebilir.
- Cihazında hareketi azaltmayı açmış alışverişçiler ipucu hareketini görmez.
- Görseller kesik mi görünüyor? Fotoğraflarınıza en yakın Oran'ı seçin ya da aynı şekilde fotoğraflar kullanın.
- Yalnızca gerçek sonuçların gerçek fotoğraflarını kullanın.