Divi Web Sitenize Gerçek Zamanlı Ajax Arama Nasıl Eklenir?

Ajax, Divi'ye canlı arama eklemenin harika bir yoludur. Ajax ile, kullanıcılara arama sonuçlarını göstermek için sayfanın yeniden yüklenmesi gerekmez. Bu, ziyaretçilerinizin sonuçları çok daha hızlı görmelerini sağlar ve bu da onların sayfalarınızda daha uzun süre kalmasına yardımcı olur. Sonuç, daha temiz görünen ve daha sorunsuz çalışan bir web sitesidir.

Ajax araması Divi'de yerleşik değildir, ancak üçüncü taraf bir eklenti kullanılarak kolayca eklenebilir. Bu eğitimde, Divi'ye Ajax aramayı nasıl ekleyeceğinizi ve aramayı web sitenizin tasarımına uyacak şekilde nasıl şekillendireceğinizi göreceğiz.

Eğitime devam.

Gizlice Bakış

Başlamadan önce, işimiz bittiğinde Ajax aramamızın nasıl görüneceğine bir bakalım. Bu, Masaüstü görünümüdür. Bir WooCommerce mağazasına bir Ajax araması ekleyeceğim. Çevrimiçi Mağaza düzen paketindeki gösteri sayfasını kullanıyorum. Ayrıca, aramayı düzene uyacak şekilde biçimlendireceğiz. Tabii ki burası bir test sitesi olduğu için hile yapıyorum ve WooCommerce test ürünlerini kullanıyorum. Sonuçlar herhangi bir ürünle aynı şekilde çalışacaktır.

İşte aynı tasarımın bir telefonda nasıl göründüğü.

Divi Web Sitenize Gerçek Zamanlı Ajax Arama Nasıl Eklenir?

Youtube Kanalımıza Abone Olun

1. Divi Ajax Search'ü Yükleme

İlk olarak, Divi Marketplace'ten Divi Ajax Search'ü satın alın. Normalde 29 ABD dolarıdır ve sınırsız kullanım ve bir yıllık destek ve güncelleme içerir. Divi Ajax Search, sayfaları, gönderileri, projeleri ve WooCommerce ürünlerini aramanıza olanak tanır. Bu yazı türlerinin her biri ile aynı şekilde çalışır. Başlık, alıntı ve öne çıkan görseli arayabilir ve ayarlarınıza göre görüntüleyebilir.

Eklentiyi yüklemek için Eklentiler > Yeni Ekle'ye gidin ve Eklenti Yükle'yi seçin.

Dosya Seç'i seçin ve dosyanın bilgisayarınızdaki konumuna gidin ve onu seçin. Şimdi Yükle 'yi tıklayın.

Eklenti yüklendikten sonra Eklentiyi Etkinleştir öğesini seçin.

2. Divi Web Sitenize Ajax Arama Ekleyin

İşte orijinal düzene bir bakış. başlığı, başlık resmiyle örtüşen kategorileri ve ürünleri görüntülemek için WooCommerce modülünü içerir. Ajax arama özelliğini mağaza modülünün üstüne ekleyeceğim. Ayrıca düzenin öğelerine uyacak şekilde biçimlendireceğim.

Düzene Divi Ajax Araması Ekleme

Modül modunu açmak için mağaza modülünün altındaki simgeye tıklayın. Divi Ajax Search'e gidin veya arayın ve onu düzene ekleyin. Tel çerçeve görünümünü gösteriyorum, ancak görünümlerin herhangi biri aynı şekilde çalışıyor.

Modülü mağaza modülünün üzerine sürükleyip bırakın.

Arama Kutusunu Yapılandırma

Seçenekleri açmak için dişliye tıklayın. Değişikliklerimi canlı görebilmek için masaüstü görünümüne geçtim.

İlk olarak, yer tutucu metnini ayarlayacağız. Varsayılan yer tutucu metin, Arama sözcüğünü kullanır. Bu iyi, ancak kullanıcının blog gönderileri veya diğer içerik yerine mağazada arama yaptığını bilmesi için bunu Ürünlerimizde ara olarak değiştiriyorum. Sıralama Ölçütü , Sıralama ve Sonuç Yok Metnini varsayılan değerlerinde bırakacağım.

• Yer tutucu metni – Ürünlerimizi arayın
• Arama sonucu – 10
• Tarihe göre sırala
• Sipariş – açıklama
• Sonuç metni yok – Sonuç bulunamadı

Arama Sonuçlarında Neyin Görüntüleneceğine Karar Verin

Arama Alanı adlı bölümün altında, neyi aramak istediğinizi seçin. Başlık, İçerik ve Alıntıyı içeren varsayılan ayarlarda bırakıyorum.

Ardından, gönderi türlerini seçin. Gönderileri, Sayfaları, Projeleri, Ürünleri veya yukarıdakilerin tümünü aramasını sağlayabilirsiniz. Ürünleri seçiyorum.

Araştır:

• Başlık
• İçerik
• Alıntı

Yazı Tipleri:

• Ürün:% s

Ne Görüntüleneceğini Seçin

Sonuçların nasıl görüntüleneceğini seçmek için Görüntüleme alanına gidin. Arama simgesi, başlık, alıntı ve öne çıkan görsel için varsayılan ayarları koruyorum. Ayrıca ürün fiyatını etkinleştirdim, sütun sayısını 4 olarak değiştirdim ve duvar kullanmayı seçtim. Bu bana istediğim düzeni verecek.

Arama Simgesini Göster:

• Evet

Ekran Alanları:

• Başlık
• Alıntı
• Özellikli resim
• Ürün fiyatı

Sütun sayısı:

• 4

Duvarcılık Kullanın:

• Evet

Kaydırma çubuğunu göster

Kaydırma çubuğu ayarlarına gidin ve kaydırma çubuğunu göstermeye veya gizlemeye karar verin. Kullanıcının kaydırma yapabileceğinin daha iyi farkında olması için kaydırma çubuğunu ekliyorum.

Kaydırma çubuğu:

• Göstermek

Divi Ajax Arama Sonucu

Bir arama terimi girmek, sonuçları arama alanının altında gösterir. Bu harika görünüyor, ancak web sitesinin içeriğinden farklı değil. Sitenin tasarımına uyacak ve ürün görselleriyle karışmayacak şekilde biçimlendireceğiz.

3. Modülü Web Sitenize Uyacak Şekilde Stillendirin

Arama kutusuna stil vermek için kullandığım düzendeki tasarım öğelerini kullanacağım. Çevrimiçi Mağaza düzeninin mağaza sayfasının alt kısmında birkaç tasarım öğesi bulunur. Biri ilginç bir e-posta tercih modülü. Bunu arka plan ve alan için ilham kaynağım olarak kullanacağım. Arama sonuçları için Şimdi Alışveriş Yap CTA'sının arka plan rengini de kullanacağım. Özellikle üç tasarım öğesine dikkat ediyorum:

• Bülten Arkaplan rengi – #757d79
• Alışveriş CTA Arkaplan rengi – #dcae83
• Her ikisi için de dolgu – 50px (üst, alt), 60px (sağ, sol)

Arama alanını şekillendirme

İçerik sekmesinde Arka Plan ayarlarını açın. Bu bölüm üç farklı arka plan alanına sahiptir. Sonuncuya git. Sadece Arka Plan denir. Rengi buraya girin.

• Arka plan rengi – #757d79

Tasarım sekmesinde, Aralık ayarlarına gidin ve dolguyu girin. Bu, sahanın etrafındaki alanı görmemizi sağlayacak, böylece sonuçları ilerledikçe daha iyi görebiliriz. Bu aynı zamanda arama kutusuna çevresinde düzendeki öğelerle eşleşecek çok fazla renk verir.

• Dolgu 50px (üst, alt), 60px (sağ, sol)

Arama Alanı ayarlarında, alan arka plan rengini ve alan metni rengini ekleyin. Alanı modülün arka planıyla eşleştirdim ve metin için sadece beyazı seçtim.

• Alan Arka Plan Rengi – #757d79
• Alan Metin Rengi – #ffffff

Aynı ayarlarda, Alan Kenarlığı Rengi'ne gidin ve beyazı seçin. Ayrıca sınırın kalınlığını ve yarıçapını da ayarlayabiliriz. Optin modülünün metin alanıyla eşleşmesi için kare bırakacağım.

• Alan Kenarlığı Rengi – #ffffff

Arama Simgesi ayarlarını açın ve beyazı seçin.

• Arama Simgesi Rengi – #ffffff

Yükleyici için ayarları açın ve Yükleyici Rengi için beyazı seçin. Yükleyici yalnızca anlık olarak görülecektir, ancak diğer öğelerle eşleşirse daha iyi görünecektir.

• Yükleyici Rengi – #ffffff

Sonuç alanını şekillendirme

İçerik sekmesinde Arka Plan ayarlarını açın ve rengi Arama Sonucu Kutusu ve Arama Sonucu Öğesi arka planlarına ekleyin. Bu, modülün stilini belirlerken görünmeyecektir, çünkü yalnızca arama sonuçlarını görüntülediğinde gösterilir.

• Arka plan rengi – #dcae83

Tasarım sekmesinde, Arama Sonucu Öğe Metni ayarlarını açın. Başlık sekmesinde, tamamı büyük harfli yazı tipi stilini seçin ve metin rengi olarak beyazı seçin. Diğer tüm başlık ayarlarını varsayılan olarak bırakıyorum.

• Başlık Yazı Tipi Stili – TT
• Başlık Metin Rengi – #ffffff

Alıntı sekmesini açın ve Alıntı Metin Rengi için beyazı seçin.

• Alıntı Metin Rengi – #ffffff

Fiyat sekmesini açın. Fiyat ağırlığı için Yarı Kalın, metin rengi için beyaz seçin.

• Fiyat Yazı Ağırlığı – Yarı Kalın
• Alıntı Metin Rengi – #ffffff

Sonuçlar

Benim stilimle Ajax Search'ün Masaüstünde nasıl göründüğü aşağıda açıklanmıştır. Arama sonuçları neredeyse anında görüntülenir. Zarif ve pürüzsüz görünüyor.

İşte Telefonda nasıl göründüğü. Sonuçlar yığınlanır ve ekrana sığacak şekilde ayarlanır.

Biten Düşünceler

Divi web sitenize Ajax arama eklemek, Divi Ajax Arama eklentisiyle hızlı ve kolaydır. Kullanımı kolay, web sitenize uyacak şekilde stil vermesi kolay ve sonuçlar hızlı ve harika görünüyor. Arayabileceği gönderi türleri ve sonuçlarda göstereceği içerik türleri için birçok seçeneğiniz var.

Artık Divi web siteniz, ziyaretçilerinizin beğeneceği, profesyonelce tasarlanmış bir Ajax arama özelliğine sahip olabilir!

Senden duymak istiyoruz. Divi web sitenize gerçek zamanlı bir Ajax araması eklediniz mi? Yorumlarda deneyiminizi bize bildirin.

Kroster / Shutterstock.com üzerinden Öne Çıkan Görsel