Divi Sayfa Şablonunuza Sabit Harita Geçişi Nasıl Eklenir

Fiziksel bir mağaza işletiyorsanız ve bunun için bir web sitesi oluşturuyorsanız, birçok kişi adresiniz gibi pratik bilgiler almak için web sitenizi ziyaret edebilir. Tabii ki, iletişim sayfanızın kullanışlı olduğu yer burasıdır, ancak iletişim bilgilerini ziyaretçilerinizle sorunsuz bir şekilde paylaşmanın tek yolu bu değildir. Şirketinizin adresini paylaşmanın yaratıcı bir yolunu arıyorsanız, bu öğreticiyi beğeneceksiniz. Divi's Theme Builder'ı kullanarak her sayfaya dinamik olarak nasıl sabit bir harita geçişi ekleyeceğinizi gösteriyoruz. Yeni bir sayfa şablonu oluşturarak başlayacağız. Ardından, şablonun gövdesinin yanına dinamik sayfa içeriğini ekleyeceğiz ve dinamik sayfa içeriğinin üstüne sabit bir harita geçişi ekleyeceğiz. Şablon JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

masaüstü

Mobil

Sayfa Şablonunu ÜCRETSİZ İndirin

Ellerinizi ücretsiz sayfa şablonuna koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

1. Divi Tema Oluşturucu İçinde Sayfa Şablonu Oluşturun

Divi Tema Oluşturucu'ya gidin ve Yeni Sayfa Şablonu Ekleyin

Bu eğitime Divi Tema Oluşturucu'ya giderek ve yeni bir sayfa şablonu ekleyerek başlayacağız.

Şablonun Gövde Alanını Girin

Ardından, “Özel Gövde Oluştur” seçeneğini seçerek şablonun gövdesini girin.

2. Gövde Alanına Dinamik Sayfa İçeriği Ekleyin

Bölüm Ayarları

aralık

Şablon düzenleyicinin içine girdikten sonra bir bölüm göreceksiniz. Bölüm ayarlarını açın ve tüm varsayılan üst ve alt dolguyu kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

1. Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:

boyutlandırma

Henüz modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:

• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Sonraki tüm varsayılan üst ve alt dolguyu kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Sütuna Gönderi İçeriği Modülü Ekle

Her sayfanın içeriğinin dinamik olarak görünmesini sağlamak için bu satırın içindeki İçerik Sonrası Modülünü kullanacağız.

3. Sabit Harita Pimi Tasarımı Oluşturun

2. Satırı Bölüme Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanan bir sonraki satıra geçin:

boyutlandırma

Satır ayarlarını açın, tasarım sekmesine gidin ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:

• Genişlik: %90
• Maksimum genişlik:
  • Masaüstü: 600 piksel
  • Tablet ve Telefon: %100

aralık

Sonraki tüm varsayılan üst ve alt dolguyu kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Sütun 1 Ayarları

Arka plan rengi

Ardından, sütun 1 ayarlarını açın ve siyah bir arka plan rengi kullanın.

• Arka Plan Rengi: #000000

Arka plan görüntüsü

Daha sonra seçtiğiniz bir arka plan resmini yükleyin. Arka plan resmini bu eğitimin başında indirebileceğiniz sıkıştırılmış klasörde bulabilirsiniz.

Ana Eleman CSS

Aşağıdaki CSS kod satırlarını da sütunun ana öğesine ekleyin:

width: 80% !important;
max-height: 80vh;

görünürlük

Ardından, dikey taşmayı otomatik olarak ayarlayın. Bu, önceki adımdaki maksimum yükseklikle birlikte, sütun 80vh yüksekliğini aştığında bir kaydırma çubuğunun görünmesini sağlar.

• Dikey Taşma: Otomatik

Sütun 2 Ayarları

Ana Eleman CSS

Sonraki sütun 2 ayarlarını açın ve aşağıdaki CSS kodu satırını ana öğeye uygulayın:

width: 12% !important;

1. Sütun'a Harita Modülü Ekle

Sütun 1'deki Harita Modülü ile başlayarak modül ekleme zamanı. Seçtiğiniz bir harita raptiyesini ekleyin.

boyutlandırma

Modülün tasarım sekmesine gidin ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:

• Genişlik: %88
• Modül Hizalaması: Merkez

aralık

Sonraki varsayılan alt kenar boşluğunu kaldırın.

• Alt Kenar Boşluğu: 0px

Sütun 1'e Blurb Modülü Ekle

İçerik Ekle

Sütun 1'deki Harita Modülünün altına bir Bulanıklık Modülü ekleyin. İstediğiniz içeriği kullanın.

Simge Seç

Sonraki bir simge seçin.

Görüntü/Simge Ayarları

Tasarım sekmesine gidin ve simge ayarlarını aşağıdaki gibi değiştirin:

• Simge Rengi: #ffffff
• Resim/Simge Yerleşimi: Sol

Başlık Metni Ayarları

Sonraki başlık metnine stil verin.

• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Metin Rengi: #ffffff
• Başlık Metin Boyutu: 16px
• Başlık Satırı Yüksekliği: 1,6em

Gövde Metni Ayarları

Ardından, gövde metni ayarlarını uygun şekilde değiştirin:

• Gövde Metni Rengi: #ffffff
• Gövde Metni Boyutu:
  • Masaüstü: 16 piksel
  • Tablet: 14 piksel
  • Telefon: 13 piksel
• Gövde Çizgisi Yüksekliği: 1.8em

aralık

Aşağıdaki dolgu değerlerini de uygulayın:

• Üst Dolgu: 70px
• Alt Dolgu: 70px
• Sol Dolgu: %7
• Sağ Dolgu: %7

Animasyon

Ve animasyon ayarlarından varsayılan modül animasyonunu kaldırın.

• Resim/Simge Animasyonu: Animasyon Yok

Sütun 2'ye Blurb Modülü Ekle

İçerik Kutularını Boş Bırak

2. sütunda, içeriği olmayan bir Blurb Modülü ekleyeceğiz.

Simge Seç

Sonraki bir simge seçin.

Arka plan rengi

Ardından, arka plan rengini değiştirin.

• Arka Plan Rengi: #0045ff

Görüntü/Simge Ayarları

Tasarım sekmesine geçin ve simge ayarlarını buna göre şekillendirin:

• Simge Rengi: #ffffff
• Resim/Simge Yerleşimi: Üst
• Görüntü/Simge Hizalama: Merkez
• Simge Yazı Tipi Boyutunu Kullan: Evet
• Simge Yazı Tipi Boyutu: 25px

boyutlandırma

Sonraki boyutlandırma ayarlarını değiştirin.

• Genişlik: 70 piksel
• Yükseklik: 70 piksel

aralık

Ardından, varsayılan alt kenar boşluğunu kaldırın.

• Alt Kenar Boşluğu: 0px

Kutu Gölge

Bir kutu gölgesi de ekleyin.

• Kutu Gölgesi Yatay Konum: 6px
• Kutu Gölge Dikey Konumu: 6px
• Gölge Rengi: rgba(0,0,0,0.3)

Ana Öğe ve Bulanık Resim CSS'si

Ardından, gelişmiş sekmeye gidin ve ana öğe için aşağıdaki CSS kod satırlarını kullanın:

display: flex;
justify-content: center;
align-items: center;

Ve Blurb Image kutusunun içine bu CSS kodu satırını ekleyin:

margin-bottom: 0;

4. Geçiş İşlevselliği Ekle

2. Satıra CSS Sınıfı Ekle

Artık tüm unsurları yerine getirdiğimize göre, işlevselliğe odaklanma zamanı. İkinci satırı açıp aşağıdaki CSS sınıfını uygulayarak başlayın:

• CSS Sınıfı: harita geçiş satırı

Sütun 2'deki Blurb Modülüne CSS Sınıfı Ekleme

Sonraki sütun 2'deki Blurb Modülünü açın ve aşağıdaki CSS sınıfını kullanın:

• CSS Sınıfı: harita geçişi

2. Sütundaki Blurb Modülünün Altına Kod Modülü Ekle

Ardından, 2. sütundaki Blurb Modülünün altına bir Kod Modülü ekleyin.

Stil ve Komut Dosyası Etiketleri Ekle

Kod kutusunun içine bazı stil ve komut dosyası etiketleri yerleştirin.

CSS Kodu Ekle

Stil etiketlerinin içinde aşağıdaki CSS kodunu kullanıyoruz:

.map-toggle-row {
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}

.reveal-map{
left: 0 !important;
}

.map-toggle {
cursor: pointer;
}

JQuery Kodu Ekle

Ve komut dosyası etiketlerinin içindeki aşağıdaki JQuery kodu:

jQuery(function($){
$(document).ready(function(){

var toggleIcon = $('.map-toggle');
var toggleRow = $('.map-toggle-row');

toggleIcon.click(function(){
toggleRow.toggleClass('reveal-map');
});

});
});

2. Sıraya Yatay Ofset ile Sabit Konum Ekle

Son olarak, ikinci satırın konum ayarlarını buna göre değiştirmemiz gerekecek:

• Pozisyon: Sabit
• Konum: Sol Merkez
• Yatay Ofset:
  • Masaüstü: -500 piksel
  • Tablet & Telefon: -%72
• Z İndeksi: 11

5. Sayfa ve Tema Oluşturucu Değişikliklerini Kaydet

Tüm değişiklikler uygulandıktan sonra, tüm Divi Theme Builder değişikliklerini kaydedebilir ve sonucu web sitenizde görüntüleyebilirsiniz!

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

masaüstü

Mobil

Son düşünceler

Bu eğitimde, sayfa tasarımlarınıza işletmenizin adres ayrıntılarını yaratıcı bir şekilde nasıl ekleyeceğinizi gösterdik. Daha spesifik olarak, ziyaretçilerinizin işletmenizin konumuna her zaman erişebilmeleri için sabit bir harita geçişi içeren bir sayfa şablonunun nasıl oluşturulacağını gösterdik! Şablon JSON dosyasını da ücretsiz olarak indirebildiniz. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin.

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.