Ana İçeriğe Geç

Divi öğreticisi: Harita modülü nasıl kullanılır?

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

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!

harita divi apercu.png

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.

API Google.jpg kaydettirin

Ardından projenize isim vermeniz istenecektir. Projeye istediğiniz adı verebilirsiniz. Bu örnekte, ben sadece "Kartlar" adını verdim. API anahtarınız için yetkili olduğundan emin olmak için web sitenizin alan adını da girebilirsiniz (www.domain.com ve domain.com'dan erişime izin veriyorsanız önüne bir * ekleyin).

Google API.jpg adlı projeye ad vermek

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

bir Google harita uygulaması oluşturun credentials.jpg

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ü eklemeden önce Divi Builder'a geçmelisiniz. Divi teması web sitenize yüklendikten sonra 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.

divi oluşturucu

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 yerini iletişim sayfanızda göstermenin harika bir yoludur. Ve farklı konumları ve şirket bilgilerini göstermek için haritanıza birden çok raptiye ekleme yeteneği, kullanışlı ve çekici bir özelliktir.

Bu örnek için, haritaya özel bir raptiye ekleyerek konumu ve şirket bilgilerini göstermek için bir harita modülü ekleyeceğim.

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

tanıtım haritası google map company.jpg

Hatırlatma : Divi temasının Seçenekler paneline geçerli bir Google API anahtarının girildiğinden emin olun. Kart 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.

bir seçenek haritası ekle divi.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]

bir yer için bir adres girin precis.jpg

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.

pin divi modülü card.jpg

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çerik modülü map.png

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

+ 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ı gerektirir. Harita modülünü kullanmadan önce, API anahtarınızı Divi temasının Seçenekler paneline eklediğinizden emin olun.

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.

modül haritası ongle design.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ş 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.

sekme ilerleme modülü 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.

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

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

yakın divi.png seçeneği

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.

Diğer Divi öğreticiler

Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
15 hisseleri
hisse8
cıvıltı1
Enregistrer6