Harita modülleri, sayfanızın herhangi bir yerine özel Google Haritalar'ı entegre etmeyi kolaylaştırır. Hatta haritaya sınırsız raptiye ekleyebilir ve özel bir başlangıç konumu belirleyebilirsiniz. Kart modülleri ayrıca tam genişlikte bir formatta gelir, bu yüzden bunu da kontrol ettiğinizden emin olun!
Google Maps API anahtarı
Bir API anahtarı Gereksinimler Harita modülünü kullanmak için. Bir API anahtarı almak için şurada oturum açın: Google Developers Console, size süreç boyunca rehberlik edecek ve Google Haritalar JavaScript API'sini ve tüm ilişkili hizmetleri otomatik olarak etkinleştirecektir. Sizden ilk sorulacak şey yeni bir proje oluşturmak olacaktır.
Ardından, projenizi adlandırmanız istenecektir. Projeye istediğiniz ismi verebilirsiniz. Bu örnekte, onu basitçe "Haritalar" olarak adlandırdım. Ayrıca etki alanı adı API anahtarınızın yetkilendirildiğinden emin olmak için web sitenizin (www.domain.com ve domain.com'dan erişime izin veriyorsanız önüne bir * ekleyin).
Adlandırılmış bir proje oluşturduktan sonra, kullanabileceğiniz bir API anahtarı göreceksiniz.
Bir API anahtarı edindikten sonra, aşağıdakilere giderek tema seçenekleri paneline kopyala / yapıştırmanız gerekir: Divi >> Tema seçenekleri >> Genel ayarlar >> Google Haritalar API anahtarı
Sayfanıza bir harita modülü nasıl eklenir
Sayfanıza bir harita modülü ekleyebilmeniz için önce Divi Builder'a atlamanız gerekir. Bir kere Divi teması web sitenize yüklediğinizde bir düğme göreceksiniz Divi Builder'ı Kullan yeni bir sayfa oluşturduğunuzda yayın düzenleyicisinin üzerinde. Divi Builder'ı etkinleştirmek ve tüm Divi Builder modüllerine erişmek için bu düğmeye tıklayın. Ardından düğmeye tıklayın Visual Builder'ı kullan Jeneratörü görsel modda başlatmak için. Düğmeye de tıklayabilirsiniz Visual Builder'ı kullan WordPress panonuza bağlıysanız, web sitenizi ön planda tuttuğunuzda.
Visual Builder'a girdikten sonra, sayfanıza yeni bir modül eklemek için gri artı düğmesini tıklayabilirsiniz. Yeni modüller yalnızca satırların içine eklenebilir. Yeni bir sayfaya başlıyorsanız, önce sayfanıza bir satır eklemeyi unutmayın.
Harita modülünü modül listesinde bulun ve sayfanıza eklemek için üzerine tıklayın. Modül listesi aranabilir, yani "harita" kelimesini de yazabilir ve ardından harita modülünü otomatik olarak bulup eklemek için enter'a tıklayabilirsiniz! Modül eklendiğinde, modül seçenekleri listesi tarafından karşılanacaksınız. Bu seçenekler üç ana gruba ayrılmıştır: içindekiler , Gebe kalma et gelişmiş .
Kullanım örneği örneği: Bir iletişim sayfasına bir harita modülü ekleyin
Harita modülü, işletmenizin konumunu iletişim sayfanızda sergilemenin harika bir yoludur. Farklı konumları ve işletme bilgilerini vurgulamak için haritanıza birden çok iğne ekleme yeteneği de kullanışlı ve çekici bir özelliktir.
Bu örnek için, haritaya özel bir iğne ekleyerek konum ve işletme bilgilerini sergilemek için bir harita modülü ekleyeceğim.
Hatırlatma : Seçenekler paneline geçerli bir Google API anahtarının girildiğinden emin olun. Divi teması. Harita modülü onsuz çalışmayacaktır.
Visual Builder'ı kullanarak, iletişim sayfasının altına standart bir bölüm ekleyin. Ardından, Harita modülünü yeni bölümünüze ekleyin. Kart ayarlarının İçerik sekmesinde, Kart merkezi adresi seçeneğinin altına şirket adresinizi girin. Harita merkezi adresi, haritanın merkez noktasıdır.
Ardından tıklayın + Yeni bir öğe ekle ilk pininizi oluşturmak için. Aşağıdakileri güncelleyin:
Başlık: [konumunuzun başlığını girin]
İçerik: [Pininizin içeriğini girin (adres ve telefon numarası)]
Harita adresi: [bu belirli konumun adresini girin]
Ayarları kaydet
Bu kadar. Artık, iletişim sayfasının alt kısmında, şirket bilgilerini görüntüleyen tıklanabilir bir pinin bulunduğu dinamik bir harita modülünüz var.
Harita modülü içerik seçenekleri
İçerik sekmesinde, modülün metin, resimler ve simgeler gibi tüm içerik öğelerini bulacaksınız. Tüm kontroller ce qui modülünüzde beliren her zaman bu sekmede bulunur.
+ Yeni bir makale ekle
Bu, kart modülünüze yeni pimler (veya yuvalar) eklediğiniz yerdir. "Yeni öğe ekle" üzerine tıklamak, yeni pininiz için tamamen yeni bir tasarım ayarları listesi (içerik, tasarım, gelişmiş dahil) açacaktır. Bireysel pim ayarları için aşağıya bakın.
İlk pininizi ekledikten sonra, pin başlığınızın etiket olarak göründüğü gri bir çubuk göreceksiniz. Gri çubukta ayrıca raptiyeyi düzenlemenize, çoğaltmanıza veya silmenize olanak tanıyan üç düğme vardır.
Google API anahtarı
Haritalar modülü Google Haritalar API'sini kullanır ve çalışması için geçerli bir Google API anahtarı gerekir. Harita modülünü kullanmadan önce API anahtarınızı ekranın Seçenekler paneline eklediğinizden emin olun. Divi teması.
Harita Merkezi Adresi
Haritanın merkez noktası için bir adres girin, adres coğrafi kodlanacak ve aşağıdaki haritada görüntülenecektir. Bu, birden fazla iğneniz varsa ve haritanın belirli ve daha kesin bir konumda büyütülmesini istiyorsanız kullanışlıdır. "1235 Sunny Road, Some City, State, 88343" gibi standart formatta bir adres yazabilirsiniz.
Yönetici Etiketi
Bu, kolay tanımlama için yapıcıdaki modül etiketini değiştirecektir. WireFrame görünümünü Visual Builder'da kullandığınızda, bu etiketler Divi Builder arayüzünün modül bloğunda görünür.
Harita modülü tasarım seçenekleri
Tasarım sekmesinde yazı tipleri, renkler, boyutlandırma ve aralık gibi tüm modül stil seçeneklerini bulacaksınız. Bu, modülünüzün görünümünü değiştirmek için kullanacağınız sekmedir. Her Divi modülünde, istediğinizi değiştirmek için kullanabileceğiniz uzun bir tasarım ayarları listesi vardır.
Fare tekerleği Zoom
Burada yakınlaştırma seviyesinin fare tekerleği ile kontrol edilip edilmeyeceğini seçebilirsiniz. Çoğu zaman, bu seçeneği kapatmak en iyisidir, böylece ziyaretçiler sayfayı aşağı kaydırırken ve fare tekerleğini harita iframe'ine takarken rahatsız olmazlar. Bu özellikle tam genişlikte kart modülleri için geçerlidir.
Sürüklenebilir Zum
Kart taşınabilir aygıtlara taşınabilirse buradan seçebilirsiniz.
Gri tonlamalı filtreyi kullan
Bu seçeneğin etkinleştirilmesi, haritanızı gri tonlamalı bir resme dönüştürür.
Gelişmiş harita seçenekleri
Gelişmiş sekmesinde, özel CSS ve HTML özellikleri gibi daha deneyimli web tasarımcılarının yararlı bulabileceği seçenekler bulacaksınız. Burada, modülün birçok öğesinden herhangi birine özel CSS uygulayabilirsiniz. Ayrıca, alt temanızın style.css dosyasında modülü özelleştirmek için kullanılabilen modüle özel CSS sınıfları ve kimlikleri de uygulayabilirsiniz.
CSS Kimliği
Bu modül için kullanmak üzere isteğe bağlı bir CSS Kimliği girin. Kimlik, özel bir CSS stili oluşturmak veya sayfanızın belirli bölümlerine bağlanmak için kullanılabilir.
CSS sınıfı
Bu modül için kullanmak üzere isteğe bağlı CSS sınıflarını girin. Özel CSS stili oluşturmak için bir CSS sınıfı kullanılabilir. Bir boşlukla ayırarak birden çok sınıf ekleyebilirsiniz. Bu sınıflar, Divi alt temanızda veya Divi tema seçeneklerini veya Divi Builder sayfa ayarlarını kullanarak sayfanıza veya web sitenize eklediğiniz özel CSS stil sayfasında kullanılabilir.
Özel CSS
Özel CSS, modüle ve modülün herhangi bir dahili bileşenine de uygulanabilir. Özel CSS bölümünde, her öğeye doğrudan özel CSS stil sayfaları ekleyebileceğiniz bir metin alanı bulacaksınız. Bu ayarlardaki CSS girişleri zaten stil etiketlerine sarılmıştır. Bu yüzden CSS kurallarını noktalı virgülle ayırarak girin.
görünürlük
Bu seçenek, modülünüzün göründüğü cihazları kontrol etmenizi sağlar. Modülünüzü tabletlerde, akıllı telefonlarda veya masaüstlerinde ayrı ayrı devre dışı bırakmayı seçebilirsiniz. Bu, farklı cihazlarda farklı modlar kullanmak istiyorsanız veya sayfadan belirli öğeleri kaldırarak mobil tasarımı basitleştirmek istiyorsanız kullanışlıdır.
Bireysel kart pin seçenekleri
Başlık
Yeni bir pin oluştururken bir başlık atayabilirsiniz. Haritadaki raptiyenin üzerine gelindiğinde bu başlık kutuda görünecektir.
içindekiler
Yeni bir pin oluştururken, bir içerik metin bloğu atayabilirsiniz. Bu metin, harita üzerindeki raptiyenin üzerine gelindiğinde kutuda görünecektir.
Harita adresi
Bu, haritada yeni iğnenizin görüneceği noktadır. Adresi standart bir biçimde girebilirsiniz.
[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”genişletilmiş” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DIVI TEMASINI İNDİRİN [/vcex_button][/vc_column][vc_column width=” 1 /2"][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”genişletilmiş” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]YÜKLE ŞABLONLARI DIVI[/vcex_button][/vc_column][/vc_row]
Diğer Divi öğreticiler
- restoran kullanımı Divi tema için 5 siteleri
- Bir Divi WooCommerce ürününe metin ekleme
- Divi sayfaları arasındaki menü rengini değiştirme
- Bir blog'un ızgaralarını Divi ile kişiselleştirme
- Nasıl WordPress üzerinde rol Divi editörü kullanımı
- Tam ekran Divi sürgüsü nasıl oluşturulur
- Divi sayfaları arasındaki menünün rengi nasıl değiştirilir
- Divi hakkında muhtemelen bilmediğiniz özellikler
- WordPress üzerinde Divi Builder nasıl kullanılır
- Divi video kaydırma modülü nasıl kullanılır
- Divi Builder Flip modülü nasıl kullanılır
- Divi Builder'da referans modülü nasıl eklenir?
- Divi metin modülü nasıl kullanılır?
- Divi'de kaydırıcı nasıl oluşturulur
- Divi kullanıcı rolü nasıl düzenlenir
- Divi Sosyal Medya modülü nasıl kullanılır?
- WordPress Divi konulu mağaza modülü nasıl kullanılır?
- Divi kenar çubuğu modülü nasıl kullanılır
- Divi Fiyat Tablosu Modülünün Kullanımı
- Divi yayınlarının başlık modülünü nasıl kullanırım
- Divi video modülü nasıl eklenir
- Makale navigasyon modülü nasıl kullanılır
- Divi arama modülü nasıl kullanılır?
- Divi cüzdan modülü nasıl kullanılır?
- Divi Builder'da kişi modülünün kullanımı
- Divi filtreli cüzdan modülü nasıl kullanılır
- Tam genişlikte sürgü modülü nasıl kullanılır
- Divi Builder Görüntü Modülü nasıl kullanılır?
- Divi Builder'ın tam genişlikli gezinme modülünü nasıl kullanırım?
- Resim galerisi modülü nasıl kullanılır?
- Divi Builder Tam Genişlik Kart Modülü nasıl kullanılır?
- Divi Tam Genişlik Portföy Modülü nasıl kullanılır?
- Divi tam genişlikli başlık modülü nasıl kullanılır?
- Divi Sayaç Modülünün Kullanımı
- Divi Builder'daki makaleler sürgüsünü kullanma
- Divi Email Optin modülü nasıl kullanılır?
