Divi ile Scroll'da Görüntü Değiştirme Nasıl Oluşturulur

Etkileşimli tasarım oluşturmanın birçok avantajı vardır. Bunlardan biri, tek bir bölüme daha fazla görsel içerik sığdırabilmeniz ve ziyaretçileriniz gezinirken görsel içeriğin nasıl göründüğünü belirleyebilmenizdir. Ziyaretçilerin web sitenizde sahip olduğu genel kullanıcı deneyimini yükseltir ve web tasarım çabalarınızı bir sonraki seviyeye taşır. Bugünün eğitiminde, Divi'nin yeni kaydırma efektlerini kullanarak kaydırmada nasıl görüntü takası oluşturacağınızı göstereceğiz. Dört farklı görüntü arasında bir geçiş göreceğiz. 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

Kaydırma Efekti Düzeninde Görüntü Değiştirme'yi ÜCRETSİZ İndirin

Ellerinizi kaydırma efekti düzeninde görüntü takasına 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.

1. Eleman Yapısı Oluşturun

Yeni Normal Bölüm Ekle

Üzerinde çalıştığınız sayfaya yeni bir normal bölüm ekleyerek başlayın.

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:

boyutlandırma

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

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

Sütun 1 Ayarları

aralık

Ardından, sütun 1 ayarlarını açın ve farklı ekran boyutlarındaki boşluk değerlerini değiştirin.

• Üst Dolgu: 50px (Masaüstü), 0px (Tablet ve Telefon)
• Alt Dolgu: 50px (Masaüstü), %120 (Tablet), %140 (Telefon)

Sütun 2 Ayarları

aralık

İkinci sütuna da biraz dolgu ekleyin.

• Üst Dolgu: 12vw
• Alt Dolgu: 12vw
• Sol Dolgu: 5vw
• Sağ Dolgu: 5vw

Sütun 1'e Görüntü Modülü Ekle

Şeffaf Arka Planlı Resim Yükle

Sütun 1'deki ilk Metin Modülü ile başlayarak modül ekleme zamanı. 1: 1 oranına ve şeffaf arka plana sahip bir ürün resmi yükleyin.

Arka plan rengi

Ardından, arka plan ayarlarına gidin ve arka plan rengini değiştirin.

• Arka Plan Rengi: #b3485e

boyutlandırma

Sonraki boyutlandırma ayarlarında 'Tam Genişliğe Zorla' seçeneğini etkinleştirin.

• Tam Genişliği Zorla: Evet

aralık

Ve biraz üst ve alt dolgu ekleyerek modül ayarlarını tamamlayın.

• Üst Dolgu: 100 piksel
• Alt Dolgu: 100px

Klon Görüntü Modülü 3x

Sütun 1'deki ilk Görüntü Modülünü tamamladığınızda, tüm modülü üç kez klonlayabilirsiniz.

Resimleri Değiştir

Her yinelenen Görüntü Modülündeki görüntüyü değiştirin.

Arka Plan Renklerini Değiştir

Ve yeni görüntüleri seçtiğiniz arka plan renkleriyle eşleştirin.

• Arka Plan Rengi 1: #ffda60
• Arka Plan Rengi 2: #e6674d
• Arka Plan Rengi 3: #b4ff99

Metin Modülü #1'i Sütun 2'ye ekleyin

H2 İçeriği Ekle

İkinci sütuna geçin. Orada, ihtiyacımız olan ilk modül, bazı H2 içeriği içeren bir Metin Modülü.

H2 Metin Ayarları

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

• Başlık 2 Yazı Tipi: Anton
• Başlık 2 Metin Rengi: #000000
• Başlık 2 Metin Boyutu: 4vw (Masaüstü), 8vw (Tablet), 10vw (Telefon)
• Başlık 2 Çizgi Yüksekliği: 1.4em

Metin Modülü #2'yi Sütun 2'ye ekleyin

İçerik Ekle

Bir öncekinin hemen altına başka bir Metin Modülü ekleyin ve seçtiğiniz bir açıklama içeriğini girin.

Metin Ayarları

Tasarım sekmesine gidin ve metin ayarlarında bazı değişiklikler yapın.

• Metin Yazı Tipi: Sans'ı Aç
• Metin Boyutu: 0.9vw (Masaüstü), 2vw (Tablet), 2.5vw (Telefon)
• Metin Satır Yüksekliği: 2.6em

2. Sütun'a Düğme Modülü Ekle

Kopya Ekle

2. sütunda ihtiyacımız olan sonraki ve son modül bir Düğme Modülüdür. Seçtiğiniz bir kopyayı girin.

Düğme Ayarları

Ardından, düğmeyi buna göre biçimlendirin:

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 20px
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #000000
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 100 piksel

• Düğme Yazı Tipi: Anton

aralık

Boşluk ayarlarına da bazı özel dolgu değerleri ekleyin.

• Üst Dolgu: 50px
• Alt Dolgu: 50px
• Sol Dolgu: 33px
• Sağ Dolgu: 33px

2. Görüntülere Kaydırma Efektleri Uygulayın

Görüntü Modülü #1 İçeri ve Dışarı Soluyor

Her iki sütundaki modülleri de tamamladığınızda, sıra kaydırma efektlerini uygulamaya gelir. Eklediğimiz kaydırma efektleri, sütun 1'deki dört Görüntü Modülünün her biri için farklıdır. İlk Görüntü Modülünü açın ve bunun için aşağıdaki solma içeri ve dışarı kaydırma efektini kullanın:

• Soldurmayı ve Yavaşlamayı Etkinleştir: Evet
• Opaklığı Başlatma: %100
• Orta Opaklık: %100 (%0'dan %39'a)
• Bitiş Opaklığı: %0 (%40'ta)
• Hareket Efekti Tetikleyicisi: Elemanın Ortası

Görüntü Modülü #2 İçeri ve Dışarı Soluyor

Ardından, ikinci görüntüyü açın ve solma ve solma ayarlarını kullanın:

• Soldurmayı ve Yavaşlamayı Etkinleştir: Evet
• Opaklığı Başlatma: %0 (%40'ta)
• Orta Opaklık: %100 (%40'tan %49'a)
• Bitiş Opaklığı: %0 (%50'de)
• Hareket Efekti Tetikleyicisi: Elemanın Ortası

Görüntü Modülü #3 İçeri ve Dışarı Solması

Üçüncü Görüntü Modülüne de bir solma içeri ve dışarı kaydırma efekti ekleyin.

• Soldurmayı ve Yavaşlamayı Etkinleştir: Evet
• Opaklığı Başlatma: %0 (%50'de)
• Orta Opaklık: %100 (%50'den %59'a)
• Bitiş Opaklığı: %0 (%60'ta)
• Hareket Efekti Tetikleyicisi: Elemanın Ortası

Görüntü Modülü #4 İçeri ve Dışarı Soluk Solma

Ve sütununuzdaki son Görüntü Modülüne aşağıdaki solma ve azalan kaydırma efektini ekleyerek kaydırma efektlerini tamamlayın:

• Soldurmayı ve Yavaşlamayı Etkinleştir: Evet
• Opaklığı Başlatma: %0 (%60'ta)
• Orta Opaklık: %100 (%60'tan %100'e)
• Bitiş Opaklığı: %100

3. İlk Görüntüye Konum Ayarlarını Ekleyin ve Sütundaki Tüm Görüntülere Genişletin

Görüntü Modülü #1'e Mutlak Konum Ekleme

Şimdi, kaydırma sırasında görüntülerin birbiri ardına görünmesini sağlamak için Divi'nin konum seçeneklerini kullanarak Görüntü Modüllerini üst üste yerleştirmemiz gerekecek. İlk Görüntü Modülünü açın, gelişmiş sekmeye gidin ve mutlak bir konum kullanın.

• Pozisyon: Mutlak
• Konum: Sol Üst

Konum Ayarlarını Sütundaki Tüm Görüntülere Uzat

Konum stillerini sütundaki her Görüntü Modülüne genişleterek devam edin ve işiniz bitti!

• Kime: Tüm Resimler
• Boyunca: Bu Sütun

Ö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 gönderide, kaydırmada nasıl görüntü takası oluşturacağınızı gösterdik. Bu teknik, ziyaretçiler sayfayı aşağı kaydırırken bölümünüzde birden çok resim arasında geçiş yapmanızı sağlar. JSON dosyasını da ücretsiz olarak indirebildiniz! Herhangi bir sorunuz 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.