Ana içeriğe geç

WordPress - Yeni sayfa oluşturucu öğeleriyle A/B testi

Son güncelleme: 22 Nis 20261 dk okuma süresi
İçindekiler

Kısaca​

WordPress'te sınırsız test imkanı: CMS'de (örneğin Elementor ile) yeni bloklar, bölümler, navigasyonlar veya diğer öğeler oluştur, onlara benzersiz bir ID ver ve A/B testinde CSS kullanarak gizle. Varify ile öğe, test versiyonunda tekrar görünür hale gelir - böylece sayfayı yeniden oluşturmak zorunda kalmadan yeni içerikleri test edebilirsin. Bannerlar, bölümler veya tekil öğeler için idealdir.

WordPress sayfasına yeni öğe ekleme​

WordPress'te Elementor ile tüm bölümleri veya blokları kolayca oluşturabilirsin. Yeni öğeler oluşturabilir veya istediğin bir öğeyi (örneğin metin, resim veya buton) sayfanın mevcut alanlarına sürükleyip bırakabilirsin. Ardından içeriği ve tasarımı ihtiyaçlarına göre özelleştirebilirsin.

Bu örnekte, sayfanın üst bölümüne sorun giderme alanı için bir kutucuk eklendi.

Canlı sayfa ve Elementor editörü yan yana; bir ok, editörde eklenen yeni öğeyi işaret ediyor

Yeni öğeye CSS ID atama​

Varify kullanarak daha sonra göstermek istediğin öğeyi seç - bu yeni bir blok, bir sütun veya sadece tek bir öğe olabilir. Öğeye tıkla ve Elementor menüsündeki "Advanced" sekmesine git. Orada "CSS ID" alanını bulacaksın. Buraya benzersiz bir ID gir, örn. "new-element".

Gizli konteyner için "new-element" CSS ID'sinin girildiği Elementor "Advanced" sekmesi

Öğeyi gizle​

"Advanced" sekmesinde, "Responsive" bölümüne geç. Öğeyi masaüstü, tablet ve akıllı telefonda gizlemek için oradaki üç anahtarı etkinleştir. Bu, kullanıcılar öğeyi henüz görmeden özelleştirmelerini yayınlamanı sağlar.

Öğenin masaüstü, tablet ve mobilde gizlendiği "Responsive" bölümünün vurgulandığı Elementor "Advanced" sekmesi

Deneme aracılığıyla öğeyi göster​

  1. Varify'de yeni bir deneme oluştur.
  2. Ardından CSS alanına gitmek için sağ üstteki kod simgesine tıkla.
  3. Bu kodu oraya girebilirsin (farklı bir isim atadıysan ID'yi buna göre ayarla):
#new-element{
display: block !important;
}
  1. "new-element" ifadesini Elementor'da atadığın ID ile değiştir. # karakteri bunun bir ID olduğunu gösterir. Bu kaldırılmamalıdır.
  2. Varyantı kaydet.
  3. Her şeyin istediğin gibi çalışıp çalışmadığını görmek için denemeyi test et.
  4. Denemeyi başlat
Sayfa hedeflemesi açıkken Varify "Split-URL-Test": mağaza URL'si "Simple Match" ile eşleştirilir

Opsiyonel: Diğer öğeyi gizle​

Mevcut bir öğenin bir varyasyonunu test ediyorsanız ve bu öğe sayfada iki kez bulunuyorsa, yeni öğe görüntülenir görüntülenmez orijinal öğeyi gizlemelisiniz.

Prosedür:

  1. CMS'de orijinal öğeye benzersiz bir ID atayın.
  2. Varify varyantının CSS'sine uygun kodu ekleyin, örneğin:
#original-element{
display: none !important;
}

Bu, test varyantında yalnızca yeni öğenin görünür olmasını sağlar.

Bu sayfada