Divi'nin Yapışkan Seçenekleriyle Görüntü Geçişlerini Tetikleme

Divi'nin yapışkan seçeneklerinin çok yönlülüğü, yalnızca yapışkan bir başlık için ayarları kullanmanın ötesine geçer. Tasarımınızdaki değişiklikleri tetiklemek için de kullanabilirsiniz. Bu öğreticide, örneğin, görüntü geçişini tetiklemek için Divi'nin yapışkan seçeneklerini kullanacağız. Görüntü geçişleri, ziyaretçiler kaydırmada görüntüye yaklaşır yaklaşmaz gerçekleşir. Sıfırdan iki farklı örneği yeniden oluşturacağız, ancak yaklaşımı edindikten sonra, yalnızca Divi'nin yerleşik seçeneklerini kullanarak kendi benzersiz görüntü geçişlerinizi oluşturabileceksiniz. JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım!

Ön izleme

Öğreticiye dalmadan önce, farklı ekran boyutlarındaki sonuca son bir göz atalım.

masaüstü

Mobil

Düzeni ÜCRETSİZ İndirin

Ellerinizi ücretsiz düzene koymak için önce aşağıdaki düğmeyi kullanarak bunları 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. Genel Adımlar

1. Bölüm Ekle

aralık

Eğitimin ilk bölümünde, tasarımımızın temelini oluşturacağız. Bu yerleştirildikten sonra, bu gönderinin önizlemesindeki iki örneğe ulaşmak için doğru ayarları uygulamaya odaklanabiliriz. Üzerinde çalıştığınız sayfaya yeni bir bölüm ekleyin, bölümün tasarım sekmesine gidin ve tüm varsayılan üst ve alt dolguyu kaldırın.

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

Yeni 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:

• Maksimum Genişlik: 1480 piksel
• Satır Hizalama: Merkez

aralık

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

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

Z İndeksi

Ve pozisyon ayarlarında az indeksi ayarlayın. Bu, satırın öğreticide daha sonra eklediğimiz bir sonraki satırın altında kalmasını sağlamamıza yardımcı olacaktır.

• Z İndeksi: 1

Sütun Taşmaları

Ardından, sütun ayarlarını açın ve taşmaları gizli olarak ayarlayın.

• Yatay Taşma: Gizli
• Dikey Taşma: Gizli

Sütuna Resim Modülü Ekle

Görüntü Kutusunu Boş Bırak

Bu satırda ihtiyacımız olan tek modül bir Görüntü Modülüdür. Görüntü kutusunu boş bırakın.

Arka plan görüntüsü

Ve bunun yerine seçtiğiniz bir arka plan resmini kullanın.

• Arka Plan Resmi Boyutu: Kapak
• Arka Plan Resmi Konumu: Merkez

aralık

Resmin görünmesine izin vermek için farklı ekran boyutlarında bazı özel dolgu değerleri kullanacağız.

• Üst Dolgu:
  • Masaüstü: 300 piksel
  • Tablet ve Telefon: 150 piksel
• Alt Dolgu:
  • Masaüstü: 300 piksel
  • Tablet ve Telefon: 150 piksel

2. Bölüm Ekle

aralık

Bir öncekinin hemen altına başka bir bölüm ekleyin. Bölüm ayarlarını açın ve boşluk ayarlarındaki varsayılan üst dolguyu kaldırın.

• Üst Dolgu: 0px

Yeni Satır Ekle

Sütun Yapısı

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

Z İndeksi

Bu satır için de az dizini ekleyin.

• Z İndeksi: 2

Harekete Geçirici Mesaj Modülünü Sütuna Ekle

İçerik Ekle

Bu satırda ihtiyacımız olan tek modül Harekete Geçirici Mesaj Modülüdür. Seçtiğiniz içeriği ekleyin.

Düğme Bağlantısı Ekle

Bir düğme bağlantısı ile birlikte.

Arka plan rengi

Ardından, beyaz bir arka plan rengi ekleyin.

• Arka Plan Rengi: #ffffff

Metin Ayarları

Tasarım sekmesine gidin ve metin ayarlarını değiştirin.

• Metin Hizalama: Sol
• Metin Rengi: Koyu

Başlık Metni Ayarları

Başlık metnine de stil verin.

• Başlık Yazı Tipi: Playfair Gösterimi
• Başlık Yazı Tipi Stili: İtalik
• Başlık Metin Boyutu
  • Masaüstü: 45 piksel
  • Tablet: 40 piksel
  • Telefon: 35 piksel
• Başlık Harf Aralığı: 1px

Gövde Metni Ayarları

Gövde metninin yanı sıra.

• Gövde yazı tipi: Karla
• Gövde Çizgisi Yüksekliği: 2em

Düğme Ayarları

Ardından, düğmeye stil verin.

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 18px
• Düğme Metin Rengi: #000000
• Gradyan Rengi 1: #ffffff
• Gradyan Rengi 2: #ffdc91
• Gradyan Türü: Doğrusal
• Başlangıç ​​Konumu: %50
• Bitiş Konumu: %50

• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 0px
• Düğme Yazı Tipi: Karla
• Düğme Yazı Tipi Stili: Büyük Harf
• Düğmeyi Göster: Evet

• Düğme Simge Yerleşimi: Sol
• Yalnızca Düğmenin Üzerine Geldiğinde Simgeyi Göster: Hayır
• Üst Dolgu: 10px
• Alt Dolgu: 10px
• Sol Dolgu: %15
• Sağ Dolgu: %15

boyutlandırma

Farklı ekran boyutlarında da boyutlandırma ayarlarını değiştiriyoruz.

• Genişlik:
  • Masaüstü: %65
  • Tablet: %80
  • Telefon: %100
• Modül Hizalaması: Merkez

aralık

Ardından, boşluk ayarlarına bazı özel kenar boşluğu ve dolgu değerleri ekleyeceğiz.

• Üst boşluk:
  • Masaüstü: -150 piksel
  • Tablet: -50 piksel
  • Telefon: 0px
• Alt Kenar Boşluğu: 50px
• Üst Dolgu: 150 piksel
• Alt Dolgu: 150 piksel

Kutu Gölge

Ve ince bir kutu gölgesi ekleyerek modül ayarlarını tamamlayacağız.

• Box Shadwo Bulanıklık Gücü: 30 piksel
• Gölge Rengi: rgba(0,0,0,0.11)

2. Satıra Yapışkan Efekt Uygulayın

Bölüm #1'deki Satırı Aç

Tasarımımızın temelini oluşturduğumuza göre, şimdi yapışkan efekti uygulama zamanı. Bu yapışkan efekt, insanlar öğeyi kaydırdıkça stilleri değiştirmemize yardımcı olacak. Yapışkan efektimizi ekleyeceğimiz öğe, ilk bölümdeki görüntünün bulunduğu satırdır.

Yapışkan Efekt Uygula

Alt yapışkan sınırın bölüm olarak ayarlandığından emin olmak önemlidir. Satırımızın başlangıç ​​ve bitiş noktaları bölümünkilerle aynıdır, bu da satırın gerçekten yapışkan olmamasını sağlar, ancak yapışkan stiller uygulanır. Yapışkan üst ofset, geçişin hangi noktada başlayacağını belirler. Örneğin, bu değer sıfır olsaydı, bu, geçişi başlatmak için tarayıcının üst kısmının satırın üst kısmına dokunması gerektiği anlamına gelirdi. Yapışkan üst ofseti "300 piksel" olarak ayarlayarak, bu geçişi daha önce oluşturuyoruz.

• Yapışkan Konum: En Üstte Yapış
• Yapışkan Üst Ofset: 300px
• Alt Yapışkan Limit: Bölüm
• Çevredeki Yapışkan Öğelerden Ofset: Evet
• Geçiş Varsayılanı ve Yapışkan Stiller: Evet

İlk Bölümün Üstünde Üst Ofset Eşit Olduğundan Emin Olun

Yapışkan üst ofseti “300 piksel” olarak ayarladığımızdan, bunun gerçekleşmesi için sayfamızın üst kısmındaki boşluğa ihtiyacımız var. Bu tasarımı sayfanızın ortasında bir yerde kullanıyorsanız, bu adım için endişelenmenize gerek yok. Ancak, bu yaklaşımı sayfanızın en üstünde kullanıyorsanız, ya yapışkan üst ofseti değiştirmeniz ya da üstte yeterli alan eklemeniz gerekir. Bu alanı oluşturmak için ilk bölümümüze bir miktar üst kenar boşluğu ekleyeceğiz.

• Üst Kenar Boşluğu: 400 piksel

3. Görüntü Modülüne Ken Burn Efekti Uygulayın

Artık satırımız yapışkan hale geldiğine göre, satıra ve tüm alt öğelerine yapışkan stiller uygulamaya başlayabiliriz. Olasılıklar sonsuz olsa da, size iki farklı örnek ve bunlara nasıl ulaşacağınızı gösteriyoruz. İki farklı örnekle oynamayı kolaylaştırmak için, her iki bölümü de birer kez klonlayacağız ve ilk bölümlerin altına yerleştireceğiz.

Örnek 1

Sabit Satır Ayarları

Kutu Gölge

Bu gönderinin önizlemesinde görebileceğiniz örnek 1'i yeniden oluşturmak için satır ayarlarını açın ve aşağıdaki kutu gölge ayarlarını uygulayın:

• Kutu Gölge Dikey Konumu: 0px
• Kutu Gölge Yayılma Gücü: 0px
• Gölge Rengi: rgba(0,0,0,0)

• Yapışkan Dikey Konum: 100 piksel
• Yapışkan Gölge Rengi: #ffdc91

Geçiş

Gelişmiş sekmeye de yumuşak bir geçiş ekleyin.

• Geçiş Süresi: 500ms
• Geçiş Hızı Eğrisi: Kolaylık

Yapışkan Görüntü Modülü Ayarları

Ölçeği Dönüştür

Ardından, Görüntü Modülünü açın ve yapışkan durumda bir dönüştürme ölçeği efekti uygulayın.

• Her ikisi de: %100

• Her ikisi de yapışkan: %130

Geçiş

Modülün geçiş ayarlarını uygun şekilde değiştirerek sorunsuz bir geçiş sağlayın:

• Geçiş Süresi: 1200ms
• Geçiş Hızı Eğrisi: Kolaylık

Örnek #2

Sabit Satır Ayarları

Dönüştür Çeviri

İkinci örneğe geçelim! Satır ayarlarını açın ve aşağıdaki dönüştürme çevirme ayarlarını uygulayın:

• Sağ: %20

• Sabit Sağ: 0%

Geçiş

Satırın geçiş ayarlarını da değiştirin.

• Geçiş Süresi: 500ms
• Geçiş Hızı Eğrisi: Kolaylık

Yapışkan Görüntü Modülü Ayarları

Filtreler

Ardından, Görüntü Modülünü açın ve filtrelerle varsayılan ve yapışkan durumda oynayın.

• Doygunluk: %0
• Parlaklık: %50

• Yapışkan Doygunluk: %100
• Yapışkan Parlaklık: %100

Geçiş

Geçiş ayarlarını aşağıdaki gibi değiştirerek modül ayarlarını ve bu öğreticiyi tamamlayın:

• Geçiş Süresi: 500ms
• Geçiş Hızı Eğrisi: Kolaylık

Ö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 yazıda, Divi'nin yapışkan seçenekleriyle nasıl yaratıcı olabileceğinizi gösterdik. Daha spesifik olarak, size görüntü geçişlerini nasıl tetikleyeceğinizi gösterdik. İnsanlar görüntüyü kaydırır kaydırmaz, görüntünün stilleri değişir ve bu da güzel bir geçişle sonuçlanır. İki farklı örneği ele aldık ama olasılıklar sonsuz. 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.