Divi's Handyman Layout Pack'e Aranabilir Harita Mağazası Bulucu Nasıl Eklenir

Birden fazla mağaza konumunuz varsa, web sitenize bir mağaza bulucu eklemek kullanıcı deneyimini önemli ölçüde iyileştirebilir. Size en yakın mağazayı bulmanıza yardımcı olmak için bir mağazanın web sitesini ziyaret ederken bunları daha önce kullanmış olduğunuza eminim. Yakınlardaki yerleri ve bilgileri göstermek için etkileşimli bir haritası olan siteleri kişisel olarak takdir ediyorum. Bir mağaza konumu için basit bir Google araması, bu işlevin ne kadar yararlı olabileceği konusunda size bir fikir verecektir.

Bu kullanım örneği öğreticisi için, Divi's Handyman Layout Pack ile sitenize aranabilir bir harita mağazası bulucunun nasıl ekleneceğini göstereceğim. Kullanacağım eklentinin adı WP Store Locator. Bu ücretsiz eklenti, otomatik olarak oluşturulan yol tarifleri ve özel harita stilleri dahil olmak üzere bazı güçlü özelleştirilebilir özelliklere sahiptir. Mağaza bulucunuzu sayfada dağıtmak için nasıl mağaza ekleyeceğinizi ve kısa kodu nasıl kullanacağınızı gösterdikten sonra, Tamirci Düzenine uyacak şekilde Divi ile mağaza bulucunun stilini nasıl özelleştireceğinizi göstereceğim. Düzene daha fazla uyması için özel bir Google harita stili bile ekleyeceğim.

Hadi hadi bakalım.

Gizlice Bakış

İşte bugün inşa edeceğimiz şeye bir göz atalım.

Bu Kullanım Örneği Eğitimi için İhtiyacınız Olan Şey

• Divi Teması (yüklü ve aktif)
• Tamirci Düzen Paketi (bütün paket değil, yalnızca ana sayfa düzeni). Buna Divi oluşturucudan erişilebilir.
• WP Mağaza Bulucu Eklentisi (yüklü ve etkin)

WP Mağaza Bulucu Eklentisini Ayarlama

WP Mağaza Bulucu eklentisini kurmak için Mağaza Bulucu > Ayarlar'a gidin. Kendi siteniz için ayarlamalar yapmak üzere bu ayarlara bakmak için biraz zaman ayırmalısınız, ancak şimdilik aşağıdakileri kullanarak her şeyi hazır hale getirebilirsiniz:

Google Haritalar API Anahtarları: Google Haritalar'ın eklentiyle çalışmasına izin vermek için bir sunucu ve tarayıcı anahtarı oluşturun ve yapıştırın.

Harita bölümünün altında

Kullanıcıyı otomatik olarak bulmaya çalışın: kontrol edin
Başlangıç ​​Noktası: Houston, TX, ABD (otomatik bulma başarısız olursa bu başlangıç ​​noktası olacaktır; ne olduğunu biliyorsanız kendi konumunuzu girebilirsiniz)
Harita Stili: Buraya kodu yapıştırarak özel bir harita stili ekleyebilirsiniz (daha fazla bilgi için aşağıya bakın)

Kullanıcı Deneyimi Bölümü altında

Arama ve yarıçap etiketi genişliği: 115 piksel
Mağaza Bulucu şablonu: varsayılan (haritanın altında mağaza konumlarını gösterme seçeneğini de seçebilirsiniz)

işaretçiler

Konum İşaretçisini Başlat: koyu turuncu
Mağaza Konum İşaretçisi: koyu mavi

Değişiklikleri Kaydet

Google Haritanızı Stillendirin

Google haritanız için özel bir stil oluşturmak istediğinize karar verirseniz, ayarlar sayfasının Harita Stili bölümünün altında başlamanıza yardımcı olacak ayarlar sayfasında bazı yararlı bağlantılar vardır.

Ayarlar sayfasındaki harita stili giriş kutusuna yapıştırabileceğiniz aşağıdaki kodu oluşturmak için Mapstylr'ı kullandım (isterseniz kullanın):

[{"featureType":"all","elementType":"geometry.fill","stylers":[{"color":"#dddddd"}]},{"featureType":"all","elementType":"labels.text","stylers":[{"color":"#1476fb"}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"color":"#fc551f"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#1476fb"}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#ffffff"}]}]

Yeni Mağazalar Ekle

Ayarları güncelledikten sonra mağazalarınızı eklemeye başlamanız gerekecektir. Yeni bir mağaza eklemek için Mağaza Bulucu > Yeni Mağaza'ya gidin ve aşağıdakileri güncelleyin:

Mağazanız için Başlık Girin
Açıklama/İçerik Ekle – Bu içerik yalnızca ayarlar sayfasındaki mağaza listelerinde bir "Daha fazla bilgi" bağlantısı göstermeyi seçerseniz görüntülenecektir. Ve bu, haritanın altında mağaza listesini gösteren Mağaza Bulucu şablonunu da seçerseniz gerçekten daha iyi çalışır.

Mağaza Ayrıntıları – Buraya konum bilgilerini (mağazanın haritada gösterilmesi zorunludur), çalışma saatlerini ve ek bilgileri (telefon numarası ve e-posta gibi) ekleyebilirsiniz.

Öne Çıkan Görsel – mağaza girişinde bir küçük resim görüntülemek için öne çıkan bir görsel ekleyin.

Mağaza Kategorisi – İsterseniz mağazalarınızı daha iyi organize etmek için bir kategori ekleyebilirsiniz.

Mağazanızı yayınlayın.

Yeni mağazalarınıza girdikten sonra mağaza bulucuyu sayfanıza eklemeye hazırsınız.

Mağaza Bulucu Sayfası Oluştur

Aslında bu mağaza bulucu için tamamen yeni bir sayfa oluşturmanız gerekmez. Eklenti, mağaza bulucuyu sitenizin herhangi bir yerinde görüntülemek için bir kısa kod kullanır. Ancak bu örnekte, Tamirci Ana sayfa düzenini kullanarak mağaza bulucu için nasıl yeni bir sayfa oluşturacağınızı göstereceğim.

Tamirci Ana Sayfa Düzenini Yeni Bir Sayfada Kullanma

Yeni bir sayfa oluşturun ve görsel oluşturucuyu dağıtın. Ardından ayarlar menüsünü açıp kitaplıktan yükle simgesine tıklayarak ve açılır kutuda önceden hazırlanmış düzenler sekmesi altındaki düzeni seçerek Tamirci Ana Sayfası düzenini sayfaya ekleyin.

Referans bölümünün stilini kopyalayın.

Ardından stili, ana başlık içeriğiyle üst bölüme yapıştırın.

İhtiyacınız Olmayan Her Şeyi Düzenden Silin

Üst bölümde, sahte paragraf içeriğini içeren ilk satırdaki modülü silin.

Ardından, o bölümdeki CTA'yı içeren ikinci satırı silin.

Şimdi üst bölümün altındaki her bölümü silin, böylece yalnızca bir başlık bölümü kalır.

Bölüm İçin Ayarları Güncelle

Şimdi bölüm ayarlarını açın ve aşağıdakileri güncelleyin:

Arka Plan Rengini Sil
Arka Plan Gradyanı Sol Renk: #0072ff
Arka Plan Gradyanı Sağ Renk: rgba(255,255,255,0.89)
Başlangıç ​​Konumu: %50
Bitiş Konumu: %0
Gradyanı Arka Plan Resminin Üstüne Yerleştir: EVET

Yeni bir arka plan resmi ekleyin (yaklaşık 1920 piksele 1100 piksel)
Arka Plan Resmi Boyutu: sığdır
Arka Plan Resmi Konumu: Alt Orta

Tasarım sekmesi altında aşağıdakileri güncelleyin:

Bölümünüze bir alt bölücü verin.

Bölücüler: Alt
Bölücü Stili: ekran görüntüsüne bakın
Bölücü Yatay Tekrar: 0,5x
Bölücü Çevirme: yatay

Özel Kenar Boşluğu: 60 piksel Alt

Ayarları kaydet

Başlığı Güncelle

Sayfanın başlığını içeren metin modülü için satır içi düzenleyiciyi kullanarak metni “Yakınınızda Bir Tamirci Bulun” diyecek şekilde değiştirin.

Mağaza Bulucu Kısa Kodu için Yeni Satır ve Metin Modülü Oluşturun

Bölümde yeni bir sütun satırı oluşturun, ona aşağıdaki gibi bazı özel boşluklar verin:

Özel Dolgu (masaüstü): 0px Üst, 0px Alt, 0px Sol, %3 Sağ
Özel Dolgu (tablet): %0 Sağ

Doğru dolgu, sağ kenarlık tasarımı için boşluk oluşturur.

Ardından, yukarıdaki başlıktaki sol kenarlığın tasarımına uygun bir sağ kenarlık ekleyin.

Sağ kenarlık sekmesini seçin.
Sağ kenarlık genişliği: 10px
Sağ Kenar Rengi: #fc551f

Ayarları kaydet.

Ardından bir metin modülü oluşturun ve içerik kutusuna aşağıdaki kısa kodu girin:

[wpsl map_type="roadmap" auto_locate="true" start_marker="dark-orange" store_marker="dark-blue"]

İsterseniz eklentinin kısa kod oluşturucusunu arka uç oluşturucu içinden de kullanabilirsiniz.

Ardından metin modülüne bir arka plan verin.

Arka Plan Gradyanı Sol Renk: #fc551f
Arka Plan Gradyanı Sağ Renk: #ffffff
Başlangıç ​​Konumu: %20
Bitiş Konumu: %0

Bu degrade, arama çubuğuna (eklenti tarafından oluşturulan) turuncu bir arka plan vermek için özel bir tasarım görevi görecektir.

Şimdi metin modülünün tasarım ayarlarını güncelliyoruz.

Metin Metin Boyutu: 18px
Özel Dolgu: %2 Üst, %2 Alt, %3 Sol, %3 Sağ

Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölge Dikey Konumu: 14px
Kutu Gölge Bulanıklığı Gücü: 40px
Kutu Gölge Yayılma Gücü: -13px

Ayarları kaydet.

Arama Düğmesi için Özel CSS Ekle

Arama düğmesinin varsayılan stilini mizanpajınızın tasarımına uyacak şekilde değiştirmek isterseniz, Gelişmiş Sekmesi altındaki Sayfa Ayarlarına aşağıdaki özel CSS'yi ekleyebilirsiniz.

#wpsl-search-btn {background: #393e4a; color: #fff; font-size: 16px; font-weight: bold; padding: 0.6em 1.6em; }

CSS'nin sitenizdeki tüm sayfalara uygulanmasını istiyorsanız, kodu tema özelleştirici içindeki Ek CSS bölümüne ekleyebilirsiniz.

Son sonuç

Şimdi nihai sonucu kontrol edelim.

Eklenti ayarları altında şablonu "haritanın altındaki mağaza konumlarını göster" olarak değiştirirseniz mağaza bulucunun nasıl görüneceği aşağıda açıklanmıştır.

İşte sayfanın mobilde nasıl göründüğü.

Bir listenin yanındaki yol tarifi bağlantısını tıklarsanız, yol tariflerinin göründüğünü göreceksiniz.

Haritada bir mağaza konumu simgesine tıklarsanız daha fazla bilgi görünecektir.

Son düşünceler

Divi ve WP Mağaza Bulucu Eklentisini kullanarak mağaza bulma işlevini ne kadar hızlı ve kolay bir şekilde elde edebildiğime şaşırdım. Ayarlar oldukça basittir ve özelleştirmeyi kolay ve mantıklı hale getirir. Ayrıca özel harita stilleri, mağaza yönergeleri ve açılan ve mağaza hakkında daha fazla bilgi gösteren akıllı harita işaretçileri gibi ek özellikleri de takdir ediyorum.

Divi, bu eklenti ile iyi çalışıyor gibi görünüyor ve Tamirci Düzen paketi, mağaza bulucunuza ihtiyaç duyduğu tasarım ayarlamalarını vermeyi kolaylaştırıyor.

Ayrıca, bu eklenti sadece Tamirci nişindekiler için değil, hemen hemen her web sitesi için çalışacaktır.

Eklentiye premium eklentiler eklemekle ilgileniyorsanız (arama widget'ı gibi), web sitelerine göz atmaktan çekinmeyin.

Aşağıdaki yorumlarda sizden haber bekliyorum.

Şerefe!