Divi'nin Kaydırıcı Modülü ile Mobil İzlenecek Yollar Nasıl Oluşturulur (Ücretsiz İndirin!)

Kaydırıcılar web tasarımında her zaman gerçekten popüler olmuştur. En büyük avantajlarından biri, ziyaretçilerin mobil cihazlarda bunları kaydırabilmeleridir. Günümüzde kaydırma, yeni tıklamadır, bu nedenle kaydırıcıları dahil etmenin, ziyaretçilerin web sitenizde sahip olduğu mobil kullanıcı deneyimini iyileştirmeye yardımcı olabileceğini söylemeye gerek yok. Divi ile bir web sitesi oluştururken, üzerinde çalıştığınız herhangi bir satıra veya bölüme kolayca Slider Modülü ekleyebilirsiniz. Biraz yaratıcılık ve deneme ile çarpıcı web tasarımları elde edebilirsiniz.

Yapabileceğiniz şeylerden biri, Slider Module ile bir mobil izlenecek yol oluşturmaktır. İstediğiniz kadar slayt ekleyebilirsiniz ve izlenecek yol, başlangıçta mobil cihazlar için tasarlanmış olmasına rağmen masaüstü ve tablette eşit derecede iyi görünecektir. Bu gönderide, sıfırdan çarpıcı bir örnek oluşturacağız ve sonunda indirme için bölümü sunacağız.

Hadi hadi bakalım!

Ön izleme

Öğreticiye dalmadan önce, farklı ekran boyutlarında yeniden oluşturacağımız sonuca hızlıca bir göz atalım.

Statik

GIF

Yeniden Yaratmaya Başlayalım!

Divi'nin Kaydırıcı Modülü ile Mobil İzlenecek Yollar Nasıl Oluşturulur

Youtube Kanalımıza Abone Olun

Yeni Bölüm Ekle

aralık

Haydi yaratmaya başlayalım! Yeni bir sayfa ekleyin veya mevcut bir sayfayı açın ve ona yeni bir normal bölüm ekleyin. Bölüm ayarlarını açın ve farklı ekran boyutlarıyla eşleşen bazı özel dolgu değerleri ekleyin.

• Üst Dolgu: 4vw (Masaüstü), 5vw (Tablet), 3vw (Telefon)
• Alt Dolgu: 4vw (Masaüstü), 5vw (Tablet), 3vw (Telefon)
• Sol Dolgu: 30vw (Masaüstü), 18vw (Tablet), 3vw (Telefon)
• Sağ Doldurma: 30vw (Masaüstü), 18vw (Tablet), 3vw (Telefon)

Yeni Satır Ekle

Sütun Yapısı

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

Degrade Arka Plan

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve radyal degrade arka planı ekleyin.

• Renk 1: #f9f9f9
• Renk 2: rgba(255,255,255,0)
• Gradyan Türü: Radyal
• Radyal Yön: Üst
• Başlangıç ​​Konumu: %40
• Bitiş Konumu: %40

boyutlandırma

Satırın boyutlandırma ayarlarına giderek devam edin ve sütunlar arasındaki tüm boşlukları kaldırın.

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

aralık

Ayrıca satıra biraz alt dolgu ekliyoruz.

• Alt Dolgu: 30px

Sınır

Ardından, kenarlık ayarlarındaki köşelerin her birine '20px' ekleyin.

Kutu Gölge

Son olarak, sayfada biraz derinlik oluşturmak için satıra ince bir kutu gölgesi ekleyin.

• Kutu Gölge Bulanıklığı Gücü: 80px
• Gölge Rengi: rgba(0,0,0,0.07)

Kaydırıcı Modülü Ekle

Arka Plan Rengini Değiştir

Satır ayarlarını değiştirmeyi bitirdikten sonra devam edip bir Sürgü Modülü ekleyebilirsiniz. Modülün ayarlarını açın ve arka plan rengini değiştirin. Tasarım sekmesinde yaptığınız tüm değişiklikler, sonradan eklediğiniz tüm slaytlara otomatik olarak uygulanacaktır.

• Arka Plan Rengi: rgba(255,255,255,0)

Metin Ayarları

Ardından tasarım sekmesine gidin ve metin ayarlarını değiştirin.

• Metin Yönü: Merkez
• Gölge Rengi: rgba(0,0,0,0)

Gövde Metni Ayarları

Sonraki gövde metni ayarlarını değiştirin.

• Gövde Yazı Tipi: Varsayılan (Açık Sans)
• Gövde Metni Boyutu: 0.6vw (Masaüstü), 1.5vw (Tablet), 2.4vw (Telefon)
• Gövde Çizgisi Yüksekliği: 2,2em (Masaüstü), 2,3em (Tablet), 2,4em (Telefon)

aralık

Bazı özel üst ve alt dolguları da ekleyin.

• Üst Dolgu: 2vw
• Alt Dolgu: 2vw

Düğme Özel CSS

Ayrıca, özellikle Slider Modülünün düğmesine bazı özel dolgu ve kenar boşluk değerleri eklememiz gerekecek. Bu öğe her slaytta farklı öğelerle birleştirildiğinden, gelişmiş sekmesinde CSS kodunu kullanarak dolgu ve kenar boşluğunu manuel olarak eklemeniz gerekir.

padding-left: 80px;
padding-right: 80px;
padding-top: 8px;
padding-bottom: 8px;
margin-bottom: 80px;

Aktif Kaydırıcıları Kaldır

Tüm genel slayt ayarlarını değiştirmeyi tamamladığınızda, devam edip zaten orada olan etkin slaytları kaldırabilirsiniz. Bunları kullanmak yerine, yazının sonraki bölümünde sıfırdan bir tane oluşturacağız. Bu, her şeyi daha hızlı değiştirmemize ve özelleştirmemize yardımcı olacaktır.

İlk Slaydı Özelleştir

İçerik Kutusundaki İçeriği Özelleştirin

Kaydırıcı Modülüne yeni bir slayt ekleyin ve içerik kutusundaki içeriği özelleştirmeye başlayın. Aşağıdaki yazdırma ekranlarında, görüntüyü görüntü ayarları yerine içerik kutusuna eklediğimizi fark edeceksiniz. Bu, resmi yazılı içeriğin üzerine yerleştirmemizi sağlayacaktır. Kullandığımız illüstrasyonları Graphic Illustrator Layout Pack gönderisine giderek ve sonundaki görselleri indirerek bulabilirsiniz. Ayrıca, tam olarak istediğimiz yerde görünmesini sağlamak için başlık alanı yerine içerik kutusuna bir H3 başlığı ekliyor ve stilini değiştiriyoruz.

Düğme Bağlantısı

Bağlantı ayarlarına giderek devam edin ve ziyaretçileri söz konusu slayt hakkında daha ayrıntılı bir sayfaya yönlendirecek düğmeye bir bağlantı ekleyin.

Degrade Arka Plan

Ardından, aşağıdaki ayarları kullanarak bir degrade arka planı ekleyin:

• Renk 1: #aacff
• Renk 2: rgba(255,255,255,0)
• Gradyan Türü: Radyal
• Radyal Yön: Üst
• Başlangıç ​​Konumu: %30
• Bitiş Konumu: %30

Navigasyon

Sonraki metin ayarlarını değiştirin.

• Oklar Özel Renk: #f4f4f4
• Dot Nav Özel Renk: #000000

Metin Ayarları

Ve slaydın metin ayarlarından metin rengini değiştirin.

• Metin Rengi: Koyu

Buton

Son olarak, tam olarak istediğiniz gibi görünmesi için düğmeyi değiştirin.

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Boyutu: 0.8vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #aacff
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 10px

Slaytı Gerektiği Kadar Kez Klonlayın

İlk slaydı oluşturup özelleştirmeyi tamamladığınızda, devam edip slaydı istediğiniz kadar çoğaltabilirsiniz. Kopyaların her birinde bazı manuel değişiklikler yapmanız gerekecek.

İçerik Kutusundaki İçeriği Değiştir

Değiştirmeniz gereken ilk şey, içerik kutusundaki içeriktir. Buna kullanılan resim/illüstrasyon dahildir. Bu eğitimde kullanılan her iki resmi de Graphic Illustrator Layout Pack gönderisine giderek ve sonundaki resimleri indirerek bulabilirsiniz.

Bağlantıyı Değiştir

Düğme bağlantısını da değiştirin.

Degrade Arka Planını Değiştir

İlk degrade rengini değiştirerek her yinelenen slaydın renk paletini de özelleştirebilirsiniz.

• Renk 1: #ffccaa

Düğme Arka Plan Rengini Değiştir

Düğme arka plan rengini değiştirmek için aynı rengi kullanın. Oluşturduğunuz kopyaların her biri için bu adımları tekrarlayın ve işiniz bitti!

• Düğme Arka Plan Rengi: #ffccaa

Mobil İlerleme Bölümünü ÜCRETSİZ olarak indirin

Ellerinizi ücretsiz mobil inceleme bölümüne 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!

Ön izleme

Öğreticiye dalmadan önce, farklı ekran boyutlarında yeniden oluşturacağımız sonuca hızlıca bir göz atalım.

Statik

GIF

Son düşünceler

Bu yazıda, muhteşem bir mobil örnek oluşturmak için Divi'nin Kaydırıcı Modülünü nasıl kullanacağınızı gösterdik. Başlangıçta mobil ekran boyutları için tasarlanmış olsa da, tablet ve masaüstünde eşit derecede iyi görünüyor. Web sitenizde her türlü slayt bölümü oluşturmak ve ziyaretçilerinizle sorunsuz bir şekilde etkileşim kurmak için bu yaklaşımı kullanabilirsiniz. Bu öğreticinin Divi's Slider Module ile yaratıcı olmanız için size ilham vereceğini umuyoruz. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!