Divi'deki tam ekran harita modülleri, sayfanızın her yerinde kişiselleştirilmiş Google Haritalar'ın entegrasyonunu kolaylaştırır. Hatta haritaya sınırsız raptiye ekleyebilir ve özel bir başlangıç konumu belirleyebilirsiniz. Modül haritaları da Normal Genişlik formatındadır, bu yüzden bunu da kontrol ettiğinizden emin olun!
Google Maps API anahtarı
Bir API anahtarı Gereksinimler Haritalar 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ı
Divi Tam Ekran Kartı modülü nasıl eklenir
Sayfanıza tam ekran harita modülü eklemeden ö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 Görsel Oluşturucu'yu etkinleştir 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 tam genişlikli modüller yalnızca tam genişlikli bölümlerin içine eklenebilir.
Yeni bir sayfaya başlıyorsanız, önce sayfanıza tam genişlikte bir bölüm eklemeyi unutmayın.
Modüller listesinde tam genişlikte kart modülünü bulun ve sayfanıza eklemek için üzerine tıklayın. Modların listesi aranabilir, yani "tam ekran harita" kelimesini de yazabilir ve ardından tam genişlikli 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ş .
Örnek kullanım örneği: Bir iletişim sayfasına tam genişlikli bir harita modülü ekleyin
Tam genişlikte bir 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 ekleyebilme özelliği de kullanışlı ve çekici bir özelliktir.
Bu örnek için, haritaya özel bir raptiye ekleyerek konum ve işletme bilgilerini sergilemek için tam genişlikte 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 bir Tam Genişlik bölümü ekleyin. Ardından Tam Genişlik Harita modülünü yeni bölümünüze yerleştirin. Tam genişlikte 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: [PIN kodunuzun 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ında, şirket bilgilerini görüntüleyen tıklanabilir bir pim ile tam genişlikte bir dinamik harita modülünüz var.
Tam genişlikli 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.
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önetim 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.
Tam genişlikte harita 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, herhangi bir şeyi 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ş tam genişlikli 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.
Tam genişlikli harita içeriği 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?