Divi Eklentisi Vurgulama – Genişletilmiş Harita Modülü

Divi Builder, Divi tasarımlarınızda Google Haritalar'ı görüntülemenizi sağlayan bir Harita modülüne sahiptir. Harika çalışıyor ve standart bir Google Haritası istiyorsanız iyi bir seçimdir, ancak stil için herhangi bir ayarlaması yoktur. Google Haritalarınıza stil vermek istiyorsanız Divi Map Extended gibi bir şeye ihtiyacınız olacak.

Divi Map Extended, Divi Builder tabanlı herhangi bir web sitesiyle çalışan Divi Builder'a yeni bir modül ekler. Çok sayıda harita stili ekler, harita türlerini seçmenize, kendi pin simgelerinizi yüklemenize, harita yüksekliğini ayarlamanıza ve kendi bilgi kutusu içeriğinizi oluşturmanıza olanak tanır.

Divi Map Extended şuradan edinilebilir: DiviWebDesign.com.

Genişletilmiş Harita modülüne bakmadan önce, karşılaştırma için standart Divi Harita modülüne bakalım.

Standart Divi Harita Modülü

Standart Divi modülü, Standart ve Özel bölümlerle birlikte kullanılabilir. Bunu kullanmak için bir Google API Anahtarına ihtiyacınız olacak. Kendi anahtarınızı oluşturma hakkında bilgi edinmek için Genel Ayarlar'da sağlanan bağlantıya tıklayın.

Genel Ayarlar

Genel Ayarlar içinde birden fazla pin yerleştirebilir, tam olarak görüntülemek istediğiniz adresi seçebilir, fare tekerleğini kullanarak yakınlaştırmayı etkinleştirebilir, mobilde sürüklemeyi etkinleştirebilir, telefon, tablet veya masaüstünde devre dışı bırakabilir ve yönetici etiketini değiştirebilirsiniz.

Pin Oluştur

İstediğiniz haritayı görüntülemek için Harita Merkezi adresini ekleyin. Bu haritaya, her biri farklı konum ve bilgiye sahip birden fazla iğne ekleyebilirsiniz. Haritanız için bir raptiye oluşturmak için harita modülünde Yeni Pin Ekle'yi seçin.

Burada pine bir başlık veriyorsunuz ve adresini seçiyorsunuz. Ziyaretçiler imleci pinin üzerine getirdiğinde başlık görünecektir. Adresi girerek veya raptiyeyi harita üzerinde istediğiniz yere sürükleyip bırakarak raptiyeyi yerleştirebilirsiniz. Pin, konumun ve adresin adını otomatik olarak görüntüler.

Ayrıca pinin bilgi kutusunun içeriğini de tanımlayabilirsiniz. Bu, varsayılan Google Harita bilgilerini kullanmak yerine özel içerik oluşturmanıza olanak tanır. Bilgi kutusunun içeriğini WYSIWYG düzenleyicisine ekleyin. Tıpkı WYSIWYG düzenleyicisiyle sayfalar ve gönderiler için içerik oluşturmak gibi, medya, metin veya diğer içerikleri yerleştirebilirsiniz. Bu örnekte, görüntülemek istediğim metni ve resmi ekledim.

Haritanın Divi kitaplığındaki Bize Ulaşın sayfasında nasıl göründüğü aşağıda açıklanmıştır. Bu örnekte bir pin yerleştirdim ve bilgi kutusunun içeriğini tanımladım.

Gelişmiş Tasarım Ayarları

Gelişmiş Tasarım Ayarları size gri tonlamalı bir filtre sağlar. İstediğiniz gri tonlamalı görünümü elde etmek için filtre miktarını seçebilirsiniz.

Gri tonlama, renginizi öne çıkarmak veya rengin tonunu azaltmak için kullanışlıdır. Renk, web sitenizin stiline uymuyorsa veya haritanın göze çarpmak yerine karışmasını istiyorsanız da yardımcı olabilir. Yukarıdaki örnekte iki pin yerleştirdim ve gri tonlamayı yaklaşık %70'e ayarladım.

Standart Harita modülü size bir harita tanımlama ve birden çok pin yerleştirme araçları sağlar. Bilgi kutusu için kendi içeriğinizi bile oluşturabilirsiniz. Haritalarınızla, haritayı, iğneleri veya içeriği özelleştirmek gibi daha fazlasını yapmak isterseniz ne olur? Harita Genişletilmiş modülüne bir göz atalım ve neler yapabileceğini görelim.

Harita Genişletilmiş Modülü

Genişletilmiş Harita modülü, standart Harita modülünü temel alır ve size haritalarınızı daha da özelleştirmeniz için araçlar sunar.

Kurulum

Eklentiyi kurmadan önce indirdiğiniz dosyayı açmanız gerekir. İçinde belgeleri ve sıkıştırılmış eklenti dosyasını bulacaksınız. Bu yükleyeceğiniz dosyadır. Bu dosyayı normal şekilde yükleyin ve kurun.

Divi Oluşturucu Modülü

Genişletilmiş Harita modülü, Divi Builder'a eklenir ve herhangi bir modülle aynı şekilde kullanılır. Modül parlak sarı olduğu için fark edilmesi kolaydır. Standart ve Özel bölümlerle birlikte kullanılabilir.

Genel Ayarlar

Genel Ayarlar, kontrollerin eklenmesi dışında standart Divi Harita modülüyle aynı şekilde çalışır. Bu, yakınlaştırma, harita türü ve yürüyüş rotaları gibi varsayılan denetimleri devre dışı bırakmanıza olanak tanır.

Kontrolleri devre dışı bırakmadığınız sürece, haritalar en azından Gelişmiş Tasarım Ayarlarına bakana kadar aynı şekilde çalışır.

Gelişmiş Tasarım Ayarları

Gelişmiş Tasarım Ayarları, iki modülün farklılık gösterdiği yerdir. Bu, harita seçenekleri, harita türleri, varsayılan görüntüleme seçenekleri, animasyonlar, harita yüksekliği ve birçok yazı tipi stili için seçenekler içerir.

Harita Seçenekleri

Bu modül, yalnızca gri tonlamalı bir seçenek yerine, Google Haritalar için farklı stiller sağlamak için Snazzy Haritalar verilerini kullanır. Başlangıçta tek seçeneğimiz olduğu yerde şimdi 70'in üzerinde seçeneğimiz var. Çoğu yeniden renklendirilmiş ancak bazıları etiketleri kaldırmış, vb. Hepsi haritaya yeni bir görünüm kazandırıyor. Bazıları diğerlerinden daha aşırıdır ve bazıları belirli harita türleriyle daha iyi çalışır. Birkaç örneğe bakalım.

Geceyarısı Komutanı

Buna Geceyarısı Komutanı denir. Tüm kara ve su koyu mavidir. Daha büyük yollar vurgulanır. Etiketler hafif bir bronzlukta ve güzel bir şekilde göze çarpıyor. Karanlık görünüme rağmen temiz ve gezinmesi nispeten kolay.

Mondrian

Buna Mondrian denir. Su açık mavi, yollar siyah, kara unsurları için mavi, kırmızı, sarı ve krem ​​kullanılmıştır. Bu, etiketleri göstermiyor.

Cladme

Cladme, suyu, toprağı, yolları ve etiketleri göstermek için yalnızca birkaç renk kullanır. Sadece birkaç renkle bile okumayı ve takip etmeyi kolay buluyorum.

turuncu

Turuncu, öncelikle su ve ana yollar için turuncu renge odaklanır. Tan, arazi için kullanılırken, daha küçük yollar açık ten rengidir.

Parlak ve Kabarcıklı

Bright and Bubbly, çok sayıda mavi, kırmızı, ten rengi, kahverengi ve yeşil kullanır. Siyah, küçük yol adları için kullanılırken, alanlar beyazla özetlenen kırmızı ile etiketlenmiştir.

Harita türü

Varsayılan harita türünü ayarlayabilirsiniz. Kontrolleri devre dışı bırakırsanız, okuyucularınız bunu değiştiremez. Seçilebilecek dört tür harita vardır:

• Yol Haritası
• Uydu
• hibrit
• Arazi

Harita stillerinin ve harita türlerinin çeşitli kombinasyonları bazı ilginç tasarımlar yaratabilir. En iyi sonucu veren kombinasyonu bulmak için deneme yapmanız gerekebilir. Dört harita türünün tümü ile Vintage harita seçeneğine bir göz atın.

Yol Haritası ile Vintage sadece yolları gösterir.

Bu Uydulu Vintage. Uydu, harita stilinden etkilenmez, bu nedenle ne olursa olsun aynı görünecektir.

Hibrit, yol verilerini uydu görüntülerinin üzerine yerleştirir. Bu, Hibrit harita üzerinde Vintage stilini kullanıyor.

Bu Arazi ile Vintage. Bu, yol görünümüne arazi ekler.

Yüklemede Bilgi Penceresini Göster

Harita yüklendiğinde bilgi kutusu otomatik olarak açılır. Bu örnek, Transport for London harita stilini kullanır.

İşaretleyici Pininde Sıçrama Animasyonu

Bu, pimlerin daha fazla öne çıkmaları için sıçramasını sağlar. Bu örnek, Decola harita stilini kullanır.

Harita için Yükseklik Tanımlayın

Haritayı istediğiniz yüksekliğe getirin ve masaüstü, tablet ve telefon arasında farklı şekilde ayarlayabilirsiniz. Bu örnekte haritayı 800 piksel yüksekliğinde yaptım. Uzun ve ince bir harita oluşturmak için dar sütunlarda bile kullanabilirsiniz. Bu harita, Flex harita stilini kullanır.

stil

Ayarlamaların geri kalanı, bilgi kutusundaki yazı tiplerini özelleştirmenize olanak tanır. Hem başlık hem de içerik için yazı tipi ve yazı tipi stilini, boyutunu, rengini, harf aralığını ve satır yüksekliğini seçebilirsiniz.

San Diego Hayvanat Bahçesini iğnelerimden biri olarak kullandığımdan beri, web sitelerindekilere benzer renkler ve yazı tipi stilleri seçtim. Ayrıca yazı tipi boyutunu, aralığını ve satır yüksekliğini de artırdım. Bu örnek, Parlak Tatlı harita stilini kullanır.

Özel Pin

Map Extended'ın bir başka avantajı da, oluşturduğunuz her pin için kendi pin simgenizi yükleme yeteneğidir. Pimin genişliğini ve yüksekliğini ayarlayabilirsiniz, böylece aynı simgeyi kullanırsanız, gerekirse boyutlarını değiştirebilirsiniz.

Örneğin, birden fazla konumu olan bir mağazanız varsa, en belirgin konumun simgesini diğerlerinden daha büyük yaparak buranın genel merkez, en büyük veya ilk konum olduğunu gösterebilirsiniz.

Bu, Limon Ağacı harita stili ve Arazi haritası türü ile iki ücretsiz simge kullanır. Üstteki simge dairesel olduğu için boyutu ayarlamam gerekiyordu yoksa çok dar görünürdü. Farkı göstermek için alt simgeyi varsayılan olarak bıraktım.

Örnekler

Standart harita modülünde yalnızca gri tonlamalı ayarlar bulunur, bu nedenle tasarım konusunda yapabileceğimiz pek bir şey yok. Haritalar sitede sadece orada, bazen de hiç uymuyor. Genişletilmiş Harita ile tüm harita stilleri ve yazı tipi stili seçenekleri, haritaları web sitesine uyacak şekilde biçimlendirmek için bize bazı iyi fırsatlar sunar. Birkaç örnek oluşturdum. Bu örnekler için resimler Unsplash.com'dan alınmıştır.

Plaj Düğünü

İşte bir plaj düğünü için bir web sitesi örneği. Düğün web siteleri belirli renkler ve yazı tipleri gerektirir ve ayrıca misafirlerinizin doğru yeri bulmasına yardımcı olmak için bir Google Haritasından da yararlanır. Haritayı şekillendiremezseniz, yerinde görünebilir. Bu, Açık Tek Renkli harita stilini kullanır. Yazı tipleri, sitenin geri kalanıyla aynı stili kullanır. Bilgi kutusu yükte açılacak şekilde ayarlanmıştır.

Restoran Dışı

Bu örnek, bir bindirmede metin, resim ve harita içeren bir paralaks arka planı kullanır. Harita stili PixMix'tir. Bilgi kutusunu yükte açılacak şekilde ayarladım. Bilgi kutusu beyaz bir arka plan gösteriyor ancak sitenin stiline uyması için daha koyu bir arka plan istedim. Bilgi kutusunun arka planını biçimlendirmek için satır içi CSS kullandım. Harita yüksekliğini 600 piksele ayarladım. Bunda ayrıca 32×32 piksel olarak ayarlanmış pim (bıçak ve çatallı bir plaka) için özel bir simge vardır.

Tam Genişlikli Harita

Standart Bize Ulaşın düzeni bir Tam Genişlikli Harita içerir. Tam Genişlik Haritası, Tam Genişlik bölümünde mevcuttur. Genişletilmiş Harita modülü, Tam Genişlik bölümüyle çalışmaz, ancak onu tam genişlikte yapmanın bir yolu vardır. Yukarıdaki Bize Ulaşın örneğinde standart bir bölüm kullandım. Orijinali gibi görünmesi için sayfayı yeniden oluşturmak istedim.

Tam Genişlikli Harita Modülü

İşte tam genişlik bölümünü ve Divi'nin Tam Genişlik Harita modülünü kullanan orijinal sayfaya bir bakış.

Genişletilmiş Modülü Tam Genişlikte Haritalayın

Bu, standart bir bölüm ve Genişletilmiş Harita modülü kullanılarak aynı etkidir. Satır ayarlarını tam genişliğe ayarladım, oluk genişliğini 0'a ayarladım ve üst, sağ, alt ve sol için 0 dolgu kullandım. Sonuç, tam genişlikteki haritayla aynı görünüyor. Bu, yol haritasına ayarlanmış varsayılan haritadır.

Ekstra

Ekstra ile harika çalışıyor. Modül, standart Harita modülüyle aynı şekilde tepki verir, böylece Divi veya Extra kullanmanızdan bağımsız olarak aynı şekilde kullanabilirsiniz.

Lisans, Güncellemeler, Destek ve Belgeler

Eklenti, siz ve müşterileriniz için sınırsız web sitesinde kullanılabilir. Bir yıllık güncelleme ve altı aylık destek içerir.

Belgeler indirme paketine dahildir. Bu, tarayıcınızda açılan ve modülün nasıl kurulacağını ve etkinleştirileceğini, harita stillerinin nasıl yükleneceğini, yüklendiğinde bilgi penceresinin nasıl açılacağını, animasyonun nasıl kullanılacağını, özel simgelerin nasıl kullanılacağını ve yazı tipi ayarlarının nasıl yapıldığını gösteren bir HTML dosyasıdır. Ayrıca, tam genişlikte bir bölüm kullanmadan tam genişlikte bir harita oluşturmak için modülün nasıl kullanılacağına dair ayrıntılı bilgiler içerir. Bilgiler, satır ayarlarını, satırı tam genişlikte yapma, özel bir oluk genişliği kullanma ve özel dolgu kullanma gibi bilgileri içerir.

Son düşünceler

Divi Map Extended, standart Divi Map modülünde bulunmayan birçok tasarım özelliği sunar. Birden fazla harita seçeneği ve türü arasından seçim yapın, kendi bilgi kutusu içeriğinizi oluşturun ve biçimlendirin, yükte bilgi kutusunu gösterin, kendi pinlerinizi ekleyin, pinleri canlandırın, harita yüksekliğini tanımlayın ve haritaları tam genişlikte yapın. Tüm özelliklerin ve ayarlamaların kullanımı sezgiseldir. Divi modüllerini kullanmakta rahatsanız, bu modülle kendinizi evinizde hissedeceksiniz. Divi tasarımlarınızda haritaları özelleştirmeniz gerekiyorsa, Divi Map Extended modülünü dikkate almaya değer.

Divi Map Extended şuradan edinilebilir: DiviWebDesign.com.

Divi Map Extended'ı kullandınız mı? Aşağıdaki yorumlarda düşüncelerinizi bize bildirin!

En iyi piksellere göre Öne Çıkan Görsel / Shutterstock.com