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!

Tam Kısa-haritası-overview.png

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.

bir Google.jpg API anahtarı oluşturun

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).

project.jpg dosyasına bir API anahtarı ekleyin

Adlandırılmış bir proje oluşturduktan sonra, kullanabileceğiniz bir API anahtarı göreceksiniz.

resim dokümanları

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.

divi oluşturucu kullanın

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.

tam bölüm divi builder.png

Yeni bir sayfaya başlıyorsanız, önce sayfanıza tam genişlikte bir bölüm eklemeyi unutmayın.

tam harita screen.png

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.

tam genişlikli bir harita ekle divi builder.jpg

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.

bir harita ekle divi example.jpg

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]

ayrıntılar ekle tam genişlikli harita divi.jpg

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.

sonuç tam genişlikli harita divi.jpg

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.

seçenek içeriği divi oluşturucu tam genişlik haritası module.png

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.

seçenek tasarım modülü tam genişlik map.png

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.

bölüm avans modülü tam genişlikte kart divi.png

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

pin parametre modülü kartı full width.png

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