Divi'nin Kaydırma Efektleriyle Adımları Aşamalı Olarak Bir İşleme Nasıl Hızlı Geçiş Yapabilirsiniz?

Şirketler, süreçlerine ilişkin adımların yararlı bir örneğini sunarak genellikle ziyaretçilerini hizmetleri hakkında eğitir. Örneğin, bir web tasarım ajansı web geliştirme sürecini gösterebilir veya bir fırın, mükemmel keki yaratma adımlarını gösterebilir.

Divi ile, yerleşik kaydırma efektlerini kullanarak “süreç adımlarını” tamamen farklı bir düzeye taşıyabiliriz. Bu öğreticide, kullanıcı sayfayı aşağı kaydırdıkça bir işlemin adımlarını aşamalı olarak flaş etmenin basit bir yolunu göstereceğiz. Bu, tasarıma, amaçlanan mesajı yaratıcı bir şekilde vurgulayan hoş bir etkileşimli destek verecektir.

Gizlice Bakış

Düzeni ÜCRETSİZ İndirin

Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İ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!

Düzeni sayfanıza aktarmak için zip dosyasını çıkarmanız ve JSON dosyasını Divi Builder'a sürüklemeniz yeterlidir.

Hadi öğreticiye geçelim, olur mu?

Başlamak için Gerekenler

Başlamak için aşağıdakileri yapmanız gerekir:

1. Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
2. WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
3. “Sıfırdan Oluştur” seçeneğini seçin.

Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.

Divi'nin Kaydırma Efektleriyle Adımları Aşamalı Olarak Bir İşleme Nasıl Hızlı Geçiş Yapabilirsiniz?

Kaydırmadaki bir işlemin adımlarını yanıp sönecek düzenimizi oluşturmak için yeni bir satır ekleyerek başlamalıyız.

Dört Sütunlu Satır Oluşturma

Başlamak için bölüme dört sütunlu bir satır ekleyin.

Sütunlara modül/içerik eklemeye başlamadan önce, satırın ayarlarını açın ve aşağıdakileri güncelleyin:

• Oluk Genişliği: 2
• Maksimum Genişlik: %80

Buraya kadar yeterince basit. Şimdi biraz içerik eklemeye başlayalım.

Her Sütuna İçerik (adımlar) Ekleme

Bu tasarım, bir işlemin adımlarını yanıp sönen bir kaydırma efekti içerdiğinden, sütunlarımızın her biri adımlardan birini içerecektir. Sütun 1, adım 1'i göstermek için içerik içerecektir. Sütun 2, adım 2 için içerik içerecektir.

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

Sütun 1'e yeni bir metin modülü ekleyin.

Metin Modülü İçeriği ve Tasarımı

Ardından metin içeriğini aşağıdaki gibi güncelleyin:

Tasarım sekmesini açın ve aşağıdaki ayarları güncelleyin:

• Metin Yazı Tipi: Lato
• Metin Yazı Tipi Ağırlığı: Kalın
• Metin Metin Rengi: #fc6d71
• Başlık 2 yazı tipi: Oswald
• Başlık 2 Yazı Tipi Ağırlığı: Hafif
• Başlık 2 Metin Boyutu: 32px
• Başlık 2 Harf Aralığı: 1px
• Başlık 2 Çizgi Yüksekliği: 1.3em
• Kenar boşluğu: 0 piksel alt
• Dolgu: %10 üst, %10 alt
• Kenar Genişliği: 1px
• Kenar Rengi: rgba(166,166,166,0.16)

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

Metin modülü yerleştirildikten sonra, sütun 1'deki metin modülünün altına bir görüntü modülü ekleyin.

Ardından görüntü kenar boşluğunu aşağıdaki gibi güncelleyin:

Sütun 1 İçeriğini Kopyala ve Yapıştır

Tasarım sürecini hızlandırmak için, 1. sütundaki iki modülü seçmek için çoklu seçimi kullanabilir ve ardından bunları kalan dört sütunun her birine yapıştırabiliriz.

Yinelenen Modüller İçin İçeriği Güncelleyin

Yinelenen modüller yerleştirildikten sonra geri dönün ve metin içeriğini ve görüntüleri süreçteki dört adımın her birini yansıtacak şekilde güncelleyin.

Bir kez bittiğinde, tasarımınız şöyle görünmelidir.

Her Sütuna Kaydırma Efektleri Ekleme

Artık, kullanıcı sayfayı aşağı kaydırırken, sürecin her adımını yanıp sönecek kaydırma efektlerini eklemeye hazırız. Modüllerin her birine kaydırma efektleri eklemek yerine, efektin içerikteki tüm modüllere uygulanması için kaydırma efektini her sütuna ekleyeceğiz.

Yanıp sönen kaydırma efektini oluşturmak için, her sütun için Solma ve Soluk kaydırma efektini kullanacağız. Buradaki fikir, efekte %0 opaklıkla başlayıp %100 opaklığa devam ederek ve ardından %0'a geri dönerek başlamaktır.

Sütun 1 Kaydırma Efektleri

Satır ayarlarında, 1. sütunun ayarlarını açın ve aşağıdaki kaydırma efektini ekleyin:

Azalan ve Yavaşlayan seçenekler sekmesi altında:

• Soldurmayı ve Yavaşlamayı Etkinleştir: EVET
• Opaklığı Başlatma: %0 (%20 görünüm alanında)
• Orta Opaklık: %100 (%25-%45 görünüm alanında)
• Bitiş Opaklığı: %0 (%50 görünüm alanında)

Sütun 2 Kaydırma Efektleri

2. sütun için ayarları açın ve aşağıdaki kaydırma efektini ekleyin:

Azalan ve Yavaşlayan seçenekler sekmesi altında:

• Soldurmayı ve Yavaşlamayı Etkinleştir: EVET
• Opaklığı Başlatma: %0 (%35 görünüm alanında)
• Orta Opaklık: %100 (%40-60 görünüm alanında)
• Bitiş Opaklığı: %0 (%65 görünüm alanında)

Sütun 3 Kaydırma Efektleri

Sütun 4 Kaydırma Efektleri

Başlık Ekleme

Son bir dokunuş olarak mizanpajımıza bir başlık ekleyebiliriz. Bunu yapmak için, geçerli satırın altına yeni bir tek sütunlu satır ekleyin.

Ardından, aşağıdaki içeriğe sahip satıra bir metin modülü ekleyin:

Tasarım sekmesi altında aşağıdakileri güncelleyin:

• Metin Hizalama: Lato
• Başlık 2 Yazı Tipi Ağırlığı: Hafif
• Başlık 2 Yazı Tipi Stili: TT
• Başlık 2 Metin Rengi: #fc6d71
• Başlık 2 Metin Boyutu: 70px (masaüstü), 40px (tablet), 24px (telefon)
• Başlık 2 Harf Aralığı: 0,5em

Son sonuç

Canlı bir sayfada sonucu görmek için, kaydırma efektini baştan sona görmek için bölümün üstüne ve altına biraz ek boşluk eklemeniz gerekir. Bunu yapmanın kolay bir yolu, bölüme üst ve alt kenar boşluğu eklemektir.

İşte sonuç.

Son düşünceler

Bir işlemin adımlarını göstermek, statik bir görüntü veya grafikle sınırlı olmak zorunda değildir. Divi'nin kaydırma efektiyle, kullanıcı sayfayı aşağı kaydırdıkça her adımı kademeli olarak yanıp sönerek resme hayat verebilirsiniz. Ayrıca, her sütuna kaydırma efekti eklendiğinden, işlevselliği bozmadan her sütundaki modülleri/içeriği kolayca değiştirebilirsiniz. Umarım bu, tasarım araç kutunuza eklemek için yararlı bir teknik olacaktır.

Yorumlarda sizden haber bekliyorum.

Şerefe!