Ana İçeriğe Geç

Divi Eğitimi: Divi Tam Ekran Kart 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]

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, projenize bir ad vermeniz istenecektir. Projeye istediğiniz ismi verebilirsiniz. Bu örnekte, ona sadece “Kartlar” adını verdim. API anahtarınızın yetkilendirildiğinden 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 * 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 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 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

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]

Modüller listesinde tam genişlikli harita modülünü bulun ve sayfanıza eklemek için üzerine tıklayın. Modüllerin listesi aranabilir, yani "tam ekran harita" kelimesini yazıp ardından tam genişlikte harita modülünü otomatik olarak bulmak ve eklemek için enter'a tıklayabilirsiniz! Modül eklendiğinde, modül seçenekleri listesi ile karşılaşacaksınız. Bu seçenekler üç ana gruba ayrılı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şlikli bir 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 tam genişlikte bir harita modülü ekleyeceğim.

tam genişlikli bir harita ekle divi builder.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 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

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]

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ı 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 olarak 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 bir biçimde 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.

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

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.

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üş
18 hisseleri
hisse10
cıvıltı3
Enregistrer5