Divi'nin Kaydırma Efektleri ile Harita Modülünüzü Kaydırmada Nasıl Genişletebilirsiniz?

Web sitenize bir harita eklemek, ziyaretçilerinize sizin veya işletmenizin nerede olduğunu göstermenin harika bir yoludur. Divi'nin yerleşik ayarlarıyla, harita modülünüzün tasarımı ve çevredeki tasarım öğeleri üzerinde tam yaratıcı kontrole sahipsiniz. Modülünüze kaydırma efektleri uygulayarak tasarımlarınızı başka bir düzeye taşıyın. Aralarından seçim yapabileceğiniz birkaç farklı efekt türü ve tam olarak istediğinizi elde edene kadar efektte ince ayar yapmak için ayarlarla, kaydırma efektlerini kullanmak, web sitesi modüllerinize göz alıcı hareketler eklemenize yardımcı olabilir. Bu yazıda, Divi'nin kaydırma efektleriyle harita modülünüzü kaydırmada nasıl büyüteceğinizi göstereceğiz.

Başlayalım!

Gizli Gözetleme

İşte ne tasarlayacağımızın bir önizlemesi.

Düzen 1

Düzen 2

Başlamak için Neye İhtiyacınız Var?

Başlamadan önce, Divi Temasını yükleyip etkinleştirin ve web sitenizde Divi'nin en son sürümünün bulunduğundan emin olun.

Şimdi başlamaya hazırsınız!

Divi'nin Kaydırma Efektleri ile Harita Modülünüzü Kaydırmada Nasıl Büyütürsünüz?

Düzen 1

Hazır Düzen ile Yeni Bir Sayfa Oluşturun

Divi kitaplığından hazır bir düzen kullanarak başlayalım. Bu tasarım için Acai Bowl Layout Pack'teki Acai Bowl Açılış Sayfasını kullanacağız.

Web sitenize yeni bir sayfa ekleyin ve ona bir başlık verin, ardından Divi Builder'ı Kullan seçeneğini belirleyin.

Bu örnek için Divi kitaplığından hazır bir düzen kullanacağız, bu nedenle Düzenlere Göz At'ı seçin.

Acai Bowl Açılış Sayfasını arayın ve seçin.

Düzeni sayfanıza eklemek için Bu Düzeni Kullan'ı seçin.

Artık tasarımımızı oluşturmaya hazırız.

Harita Modülünü Ekleyin

Açılış sayfasındaki “Gelin Bizi Ziyaret Edin” bölümüne harita modülünü ekleyeceğiz. Tek bir sütunla yeni bir satır ekleyerek başlayın.

Harita modülünü yeni satıra ekleyin.

Henüz yapmadıysanız, haritayı etkinleştirmek için Google API Anahtarınızı ekleyin. Ardından, haritaya bir merkez adresi ekleyin. Bu eğitim için adres San Fransisco, California olacaktır.

Ardından, yeni bir pin ekleyin.

Harita pin adresini ayarlayın. Bir kez daha, bu eğitim için bunu San Fransisco, California olarak ayarlayacağız.

Tasarım Ayarları

Tasarım sekmesine gidin ve boyutlandırma ayarlarını açın. Yüksekliği ayarlayın.

• Yükseklik: 300px

Ardından, kenarlık ayarlarını açın ve haritaya yuvarlatılmış köşeler ekleyin.

• Yuvarlatılmış Köşeler: 22 piksel

Kaydırma Efektlerini Ekleyin

Artık kaydırma efektlerini ekleyebilmemiz için harita modülümüzün tasarımı tamamlandı. Gelişmiş sekmesine gidin, ardından Kaydırma Efektleri'ne gidin. Kaydırma Dönüştürme Efektleri altında, yukarı ve aşağı ölçekleme sekmesini seçin.

Yukarı ve Aşağı Ölçeklendirmeyi Etkinleştirin. Bu, siz sayfayı aşağı kaydırdıkça harita modülümüzün boyutunun artmasını sağlayacaktır.

Ölçeklendirme ayarlarında ince ayar yapalım. Başlangıç, orta ve bitiş ölçeğini ayarlayın. Sayıları nispeten birbirine yakın tutarak daha ince bir ölçek efekti elde edebilirsiniz. Sayılar arasında büyük bir fark varsa, daha sert bir ölçek etkisi elde edersiniz.

• Başlangıç ​​Ölçeği: %80
• Orta Ölçek: %90
• Bitiş Ölçeği: %100

Son olarak, hareket efektini öğenin ortasında tetiklenecek şekilde ayarlayın.

• Hareket Efekti Tetikleyici: Öğenin Ortası

Son tasarım

İşte ilk yerleşimimizin son tasarımı.

Düzen 2

Hazır Düzen ile Yeni Bir Sayfa Oluşturun

İkinci düzen için, aynı Acai Bowl Düzen Paketindeki iletişim sayfası düzenini kullanacağız. Başlayalım.

Web sitenize yeni bir sayfa ekleyin ve ona bir başlık verin, ardından Divi Builder'ı Kullan seçeneğini belirleyin.

Bu örnek için Divi kitaplığından hazır bir düzen kullanacağız, bu nedenle Düzenlere Göz At'ı seçin.

Acai Bowl İletişim Sayfasını arayın ve seçin.

Düzeni sayfanıza eklemek için Bu Düzeni Kullan'ı seçin.

Artık tasarımımızı oluşturmaya hazırız.

Satır Ayarlarını Değiştir

İlk olarak, harita modülünü içeren satırı adreslerin altındaki yukarıdaki bölüme taşıyın.

Ardından, satır düzenini iki sütun olarak değiştirin.

Satır ayarlarını açın, ardından sütun 1 ayarlarını açın.

Bir arka plan rengi ekleyin.

• arka plan: #442854

Son olarak, tasarım sekmesine gidin ve kenarlık ayarlarını açın. Alt sol ve sağ köşelere yuvarlatılmış köşeler ekleyin.

• Yuvarlatılmış Köşeler – sol alt: 300 piksel
• Yuvarlatılmış Köşeler – sağ alt: 300px

Bölüm Ayarlarını Değiştir

Harita modülünü içeren bölüm için bölüm ayarlarını açın. Arka plan ayarlarına gidin, ardından bir arka plan maskesi ekleyin.

• Arka Plan Maskesi: Köşe Damlası
• Maske Rengi: #FFFFFF
• Maske Dönüşümü: Dikey ve Ters Çevir

Resim eklemek

İlk olarak, harita modülünün yanındaki sütuna bir görüntü modülü ekleyin.

Ardından acai kasesinin şeffaf görüntüsünü modüle ekleyin. Düzen 1 için Acai Bowl açılış sayfası düzenini kullandıysanız, bunu medya kitaplığınızda acai-bowl-34.png olarak etiketlemiş olmanız gerekir.

Siz sayfayı aşağı kaydırdıkça acai kasesi görüntüsünün dönmesini istiyoruz. Gelişmiş sekmesine gidin, ardından Kaydırma Efektleri bölümünü açın. Döndürme sekmesini seçin ve döndürmeyi etkinleştirin.

Ardından, dönüşü ayarlayın.

• Başlangıç ​​Döndürme: 180
• Orta Dönüş: 90
• Bitiş Dönüşü: 0

Harita Tasarımı

Şimdi harita modülü ayarlarına geçin. Tasarım sekmesi altında harita ayarlarını açın. Gri tonlama filtresini etkinleştirin.

• Gri Tonlamalı Filtre Kullan: Evet
• Gri Tonlama Filtre Miktarı (%): 100

Ardından, Boyutlandırma sekmesinin altındaki yüksekliği değiştirin.

• Yükseklik: 600 piksel

Aralık ayarları altında, bazı kenar boşlukları ekleyin.

• Kenar Boşluğu: 5 piksel
• Kenar Boşluğu-Alt: 5px
• Kenar Boşluğu–Sol: 5 piksel
• Kenar Boşluğu-Sağ: 5px

Ardından sol alt ve sağ köşelere yuvarlatılmış köşeler ekleyin.

• Yuvarlatılmış Köşeler – Sol Alt: 300px
• Yuvarlatılmış Köşeler – Sağ Alt: 300px

Kaydırma Efektleri Ekle

Şimdi nihayet kaydırma efektlerini haritaya ekleyerek kaydırma sırasında genişlemesini sağlayabiliriz. Gelişmiş sekmesi altındaki Kaydırma Efektleri bölümünü açın. Ardından, yukarı ve aşağı ölçeklendirme sekmesini seçin ve yukarı ve aşağı ölçeklendirmeyi etkinleştirin.

Son olarak, ölçekleri özelleştirin.

• Başlangıç ​​Ölçeği: %90
• Orta Ölçek: %95
• Bitiş Ölçeği: %100

Son tasarım

İşte düzen 2 için son tasarım.

Son sonuç

Şimdi her iki mizanpajımıza da çalışırken bir göz atalım.

Düzen 1

Düzen 2

Son düşünceler

Divi'nin kaydırma efektlerini harita modülüne uygulayarak, sayfayı aşağı kaydırırken benzersiz bir etki elde edebilir ve haritanızın web sitesi ziyaretçilerinin dikkatini çekmesine yardımcı olabilirsiniz. Bu efektler web sitenizdeki herhangi bir modüle de uygulanabilir, bu nedenle biraz yaratıcılıkla başarabileceklerinizin sınırı yoktur! Harita modülüyle ilgili daha fazla eğitimle ilgileniyorsanız, Divi sayfa şablonunuza nasıl sabit bir harita geçişi ekleyeceğinizi öğrenmek için bu makaleye göz atın. Kaydırma efektlerini kullanarak daha fazla tasarım fikri istiyorsanız, bölüm arka planlarınıza kaydırma animasyonlu simgeleri nasıl ekleyeceğinizi öğrenmek için bu eğitime göz atın. Divi'nin kaydırma efektlerini web sitenize nasıl uyguladınız? Yorumlarda bize bildirin!