Divi Zanaatkar Düzeni Paketine Aranabilecek Harita Mağazası Konumu Arayıcı Nasıl Eklenir
Birkaç mağaza konumunuz varsa, web sitenize bir mağaza konumu arayan eklemek kullanıcı deneyimini büyük ölçüde artırabilir. Eminim, dükkanı size en yakın bulmanıza yardımcı olmak için mağaza web sitesini ziyaret ederken daha önce kullandınız. Ve en yakın konumu ve bilgileri göstermek için etkileşimli haritalara sahip siteleri kişisel olarak takdir ediyorum. Mağazanın konumu için basit bir Google araması size işlevinin nasıl olduğunun bir resmini verecektir. Bu kullanım vaka öğreticisi için, Sitenize Divi Tamirci Düzen Paketi ile aranabilecek bir harita mağazası konumu arayan nasıl ekleneceğinizi göstereceğim. Kullanacağım eklenti WP Store Locator olarak adlandırılır. Bu ücretsiz eklenti, otomatik olarak yapılmış yönlendirme ve özel harita stilleri de dahil olmak üzere birkaç gelişmiş gelişmiş özelliğe sahiptir. Bir mağaza ekleyeceğinizi ve dükkan arayanınızı sayfaya yaymak için kısa bir kod kullanmayı gösterdikten sonra, zanaatkarın düzenine uyacak şekilde divi ile mağaza arayan stilini nasıl ayarlayacağınızı göstereceğim. Düzenle daha uygun hale getirmek için özel bir Google harita stiline bile gireceğim.
Haydi Yapalım şunu. Aşağıdaki gizlice göz atma, bugün inşa edeceğimizden bir bakış.
Divi teması (yüklü ve aktif)
Craman düzeninin paketi (tüm paket değil, yalnızca ana sayfanın düzeni). Buna Divi Maker’dan erişilecektir.
WP Store Bulucu Eklentisi (Yüklü ve Etkin)
WP mağaza bulucu eklentisini ayarlamak için bir WP mağazası konum arama eklentisi hazırlayın, Mağaza Bulucu> Ayarları’na gidin. Kendi siteniz için ayarlamalar yapmak için bu ayarları görmek için zaman ayırmalısınız, ancak şimdilik aşağıdakilerle hazırlayabilir ve çalıştırabilirsiniz: Google Haritalar: Google Haritalar ile çalışmasına izin vermek için sunucu ve anahtar tarayıcı oluşturun ve yapıştırabilirsiniz. Eklentiler. Harita bölümü altında kullanıcının konumunu otomatik olarak bulmaya çalışır: başlangıç noktasını kontrol edin: Houston, TX, ABD (Otomatik arama başarısız olursa bu başlangıç noktası olacaktır; konumu biliyorsanız kendi konumunuzu girebilirsiniz) Harita stili: Burada, Genişlik Kullanıcı Etiketi Arama ve Yarıçapının Deneyim Bölümü altında kodu ekleyerek (daha fazla bilgi için aşağıya bakın) özel harita kuvveti ekleyebilirsiniz: 115px şablon Templat Mağazası Konumu: Varsayılan (ayrıca (ayrıca (ayrıca) haritanın altındaki mağaza)
Başlat Marker Konum İşaretleyicisi: Eski Turuncu İşaretçi Konum Mağazası: Koyu Mavi Kaydet Değişimi
Google harita stiliniz Google haritanız için özel bir stil oluşturmaya karar verirseniz, Ayarlar sayfasında Ayarlar sayfasındaki Harita Force bölümü altında başlamanıza yardımcı olacak bazı yararlı bağlantılar vardır.Ayarlar sayfasındaki harita giriş kutusuna koyabileceğiniz aşağıdaki kodu üretmek için Mapstyr’i kullanıyorum (isterseniz kullanın): [{“featureType”: “All”, “ElementType”: “Geometri.fill”, “Stylers “: [{” Color “:” #ddddddd “}]}, {” featureType “:” All “,” ElementType “:” Labels.text “,” Stylers “: [{” renk “:”#1476fb “} ]}, {“FeatureType”: “tümü”, “elementType”: “labels.text.stroke”, “stylers”: [{“görünürlük”: “kapalı”}]}, {“featureType”: “Yol”, “ElementType”: “geometri.stroke”, “stylers”: [{“color”: “#fc51f”}]}, {“özellikler”: “su”, “elementType”: “tüm”, “stiller”: [ {“Color”: “#1476fb”}]}, {“featureType”: “yol”, “elementType”: “geometri.fill”, “stylers”: [{“görünürlük”: “on”}, {“renk “:” #ffffff “}]}] Yeni bir mağaza ekleyin Ayarları güncelledikten sonra mağazanızı eklemeye başlamalısınız. Yeni bir mağaza eklemek için, bir mağaza arayan> yeni mağazaya gidin ve aşağıdakileri güncelleyin: Mağazanız için başlığınızı girin Açıklamalar/içerik ekleyin – Bu içerik yalnızca mağazanın “tam bilgi” bağlantısını görüntülemeyi seçerseniz görüntülenir. Ayarlar sayfasında kantin. Ve harita altındaki mağazaların bir listesini gösteren bir mağaza konumu arama şablonu da seçerseniz bu gerçekten daha iyi çalışır. Mağaza Ayrıntıları – Burada Konum Bilgileri (Haritada Bir Mağaza Göstermeniz Gerekir), Açılış Saatleri ve Diğer Ek Bilgiler (Telefon ve E -posta Numaraları gibi) ekleyebilirsiniz. Özel resimler – Dükkan dükkanına mini görüntüleri görüntülemek için üstün resimler ekleyin . Mağaza Kategorisi – İsterseniz, mağazanızı daha iyi yönetmek için bir kategori ekleyebilirsiniz. Mağazanızı yayınlayın. Yeni mağazanıza girdikten sonra, sayfanıza bir mağaza konumu araması eklemeye hazırsınız. Mağaza arama sayfalarınızı oluşturun, bu mağaza arayan için tamamen yeni bir sayfa yapmanıza gerek yok. Eklenti, sitenizin herhangi bir yerinde mağaza arayanları görüntülemek için kısa kodlar kullanır. Ancak bu örnek için, tamirci ana sayfasını kullanarak mağaza arayanlar için nasıl yeni bir sayfa oluşturacağınızı göstereceğim.
Yeni bir sayfa için veranda sayfalarının düzenini yeni bir sayfada kullanın ve bir görsel üreticiyi uygulayın. Ardından, Ayarlar menüsünü açarak, kütüphaneden yükleme simgesini tıklayarak ve daha önce açılır kutuda yapılan düzen sekmesinin altındaki düzeni seçerek, Tamirci Ana Sayfasının Düzenini sayfaya ekleyin. Referans tarzını kopyalayın.
Ardından stili ana başlık içeriğiyle üste yapıştırın. Üstteki düzenden ihtiyacınız olmayan her şeyi silin, modülü yapay paragraf içeriği içeren ilk satırda silin. Ardından CTA içeren parçadaki ikinci satırı silin. Şimdi başlığın yalnızca bir kısmı kalacak şekilde üstün altındaki her parçayı silin. Geçerli bölümün ayarlarını güncelleyin Aşağıdaki bölüm ayarlarını açın ve güncelleme: Arka planın sol arka plan renginin arka plan rengini kaldırın: #0072ff Sağ renk gradyan arka plan: RGBA (255,255,255.0.89) Başlangıç Pozisyonu: 0% nihai konum: 0 % Gradyanı arka planın üstüne yerleştirin.
Tasarım sekmesinin altında aşağıdakileri güncelleyin: Alt alt bölümün bir kısmını verin.
Bölücü: Bölücü kuvveti altında: Bkz. Yatay Bölücü Ekran görüntüsü Tekrar: 0.5x Devam: Yatay Özel Marj: 60 PX AŞAĞIDAKİ KAYDETLERİ KAYITLARI İÇİN METİN MODULLARINI İÇİN UYUMLULUĞU Başlıklar, metni “Yakınınızdaki Bir Tamirci Bul” olarak değiştirmek için bir satır düzenleyicisi kullanın. Bu bölümdeki yeni bir sütun satırı için mağazanın konumu için kısa kod arama kodu için yeni bir satır ve metin modülü oluşturun: Özel dolgu (masaüstü): 0px üst, 0px alt, 3 sol, 3 % Sağ dolgu özelliği (tablet):% 0 sağ dolgu sağ dolgu sağ sınır tasarımı için bir mesafe oluşturur. Ardından, yukarıdaki başlıktaki sol sınır tasarımına uyacak şekilde doğru sınırı ekleyin. Doğru Sınır sekmesini seçin. Sağ sınır genişliği: 10px sağ kenar renk: #fc551f Ayarları kaydedin.Ardından metin modülünü oluşturun ve içerik kutusuna aşağıdaki kısa kodu girin: [wpsl map_type = “roadmap” auto_locate = “true” start_mmarker = “dark-orange” store_marker = “koyu-mavi”] Eklentiyi kısa kullanabilirsiniz. İsterseniz arka uç makinesinden kod oluşturucu. Ardından arka plan metin modülünü verin. Sol renk gradyan arka plan: #fc551f sağ renk arka plan gradyanı: #ffffff başlangıç konumu:% 20 nihai konum:% 0
Bu gradyan, bir arama çubuğu (eklentiler tarafından üretilen) turuncu arka plan sağlamak için özel bir tasarım olarak işlev görecektir. Şimdi metin modülü için tasarım ayarlarını güncelliyoruz. Metin Boyutu: 18px Özel Dolgu:% 2 üst,% 2 daha düşük,% 3 sol,% 3 sağ Gölge Kutusu: Bakınız Ekran Dikey Konum Yakalama Gölge Kutusu: 14px Bulanık Kuvvet Gölge Kutusu: Kare Dağıtımın 40 Piksel Gücü: -13px Ayarları kaydedin. Arama düğmesi için CSS özelliği ekleyin. Renk: #fff; yazı tipi boyutu: 16px; Yazı tipi-ağırlık: kalın; Dolgu: 0.6EM 1.6EM; } CSS’nin sitenizdeki tüm sayfalara uygulanmasını istiyorsanız, kodu tema ayarındaki Ek CSS bölümüne ekleyebilirsiniz. Nihai sonuç şimdi sonucuna bakalım. Eklenti ayarlarının altındaki şablonu “haritanın altındaki mağazanın konumunu görüntüleyecek şekilde” değiştirirseniz, bir mağaza konumu arayıcısı gibi görünecek olan budur. İşte cep telefonundaki sayfa ekranı. Listenin yanındaki talimatların yönünü tıklarsanız, talimatları görürsünüz. Son zihnim, Divi ve WP mağaza bulucu eklentisini kullanarak mağaza arama işlevselliğini ne kadar hızlı ve kolay alabildiğimi görmek çok şaşırdı. Ayarlar oldukça kolaydır, ayarlamaları kolay ve mantıklı hale getirir. Ayrıca, özel harita stilleri, mağaza talimatları ve görünen ve mağazada daha fazla bilgi gösteren akıllı harita işaretleyicileri gibi ek özellikleri takdir ediyorum. Divi bu eklenti ile iyi çalışıyor gibi görünüyor ve Tamirci Düzen Paketi, mağaza konum arayana gerekli tasarım ayarı vermenizi kolaylaştırıyor. Ayrıca, bu eklenti sadece Niche Tamirci’nde değil, neredeyse tüm web siteleri için çalışacaktır. Eklenti (arama widget’ı gibi) eklentisi eklemekle ilgileniyorsanız, lütfen web sitelerini ziyaret edin. Aşağıdaki yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
