Kaydırma Efektleri ile Divi Zaman Çizelgesi Düzeni Nasıl Tasarlanır

Zaman çizelgesi düzeni, özellikle mobil cihazlarda harika görünüyorsa, bir web sitesindeki birçok farklı uygulama için kullanışlı olabilir. Bunu, bir sürecin adımlarını ve çok daha fazlasını içeren bir yaklaşık sayfasında bir dizi kilometre taşı sergilemek için kullanabilirsiniz. Ve Divi'nin kaydırma efektleriyle bir zaman çizelgesi tasarımını canlandırabilirsiniz!

Bu öğreticide, kaydırma efektleriyle eksiksiz bir Divi zaman çizelgesi düzenini nasıl tasarlayacağınızı göstereceğiz. Zaman çizelgesi düzeni çok yönlü, zarif ve duyarlı. Ve kaydırma efekti, kullanıcıyı zaman çizelgesinde aşağı doğru yönlendiren ve kullanıcı kaydırdıkça her olayı vurgulayan çalışan bir noktaya sahiptir.

Bunu kontrol et!

Gizlice Bakış

Divi Zaman Çizelgesi Düzenini ÜCRETSİZ olarak indirin

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.

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.
   
4. Ardından, hazır düzenler sekmesi altında Bira Fabrikası Düzen Paketi'ni arayın ve seçin. Ardından Bira Fabrikası Hakkında Sayfası düzenini seçin ve “Bu Düzeni Kullan” düğmesini tıklayın.
   

Bundan sonra Divi'de tasarım yapmaya hazırsınız.

Divi'de Kaydırma Efektleri ile Zaman Çizelgesi Düzeni Oluşturma

Bu zaman çizelgesi düzeni tasarımı iki ana bölümden oluşur – başlık bölümü ve zaman çizelgesi bölümü. Bira Fabrikası Hakkında Sayfası hazır düzenini kullanıyoruz, böylece düzeni ve kaydırma efektlerini tasarlamaya odaklanırken harika görünen tasarım öğelerini birleştirebiliriz.

Bu düzenin temel özellikleri, zaman çizelgesinde etkinlik öğeleri olarak tanıtım yazılarının yaratıcı şekilde konumlandırılmasını içerir. Ortalanmış çizgi aslında görünümün sağ yarısına konumlandırılan bir satırın sol kenarlığıdır. Kaydırma efektleri, kullanıcı sayfayı aşağı kaydırdıkça hassas ofsetlerle konumlandırılan ve hareket ettirilen renkli dairelere dönüştürülmüş çoklu bölücü modüllere eklenir.

Hadi hadi bakalım.

Bölüm 1: Başlık Bölümünü Oluşturma

İstenmeyen Bölümleri Silme

İlk olarak, Divi Builder'ı kullanarak Brewery Hakkında Sayfa Düzenini sayfaya başarıyla yüklediğinizden emin olun. Bu tasarım için, yalnızca sayfanın altına doğru bir zaman çizelgesi içeren bölümü kullanacağız. Bu bölümün üstündeki ve altındaki tüm bölümleri silin, böylece yalnızca o kalır.

Bu bölümün sol altında olması gerekir.

Yeni Bölüm Ekle

Şimdi hazır bölümün altına yeni bir bölüm ekleyin ve sayfanın en üstüne sürükleyin.

Satır ekle

Bölüme tek sütunlu bir satır ekleyin.

Hazır Bölümden Metin Modülünü Kopyala ve Yapıştır

Başlığı içeren hazır bölümün sol sütunundaki metin modülünü sürükleyin (veya kopyalayın). Ardından modülü yukarıdaki yeni sütuna yerleştirin (veya yapıştırın).

Bölüm Arka Planı

Metin yerleştirildikten sonra, üst bölümün ayarlarını açın ve aşağıdaki gibi bir arka plan ekleyin:

• Degrade Arka Plan Sol Renk: #ffffff
• Gradyan Arka Planı Sağ Renk: rgba(255,255,255,0)
• Gradyan Yönü: 90deg
• Başlangıç ​​Konumu: %50
• Bitiş Konumu: %0
• Gradyanı Arka Plan Resminin Üstüne Yerleştir: EVET

Bölüm Tasarımı

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

bölücü

• Üst Bölücü Stili: ekran görüntüsüne bakın
• Bölücü Rengi: rgba(238,238,238,0.7)
• Bölücü Yüksekliği: 50vh

Boyut ve Aralık

• Yükseklik: 50vh
• Dolgu: 20vh

Bölüm 2: Zaman Çizelgesi Bölümünü Oluşturma

Başlık bölümü yerleştirildikten sonra, düzenimizin ana bölümü olan zaman çizelgesine başlayabiliriz.

Bölüm ve Satır Ekle

Başlamak için, az önce oluşturduğumuz başlık bölümünün altına yeni bir normal bölüm ekleyin.

Ardından yeni bölüme tek sütunlu bir satır ekleyin.

Bölüm Arka Planı

Modül eklemeye başlamadan önce, yeni bölüm için ayarları açın ve arka plan tasarımı ve dolgusunu aşağıdaki gibi güncelleyin:

• Gradyan Arka Planı Sol Renk: rgba(255,255,255,0)
• Degrade Arka Plan Sağ Renk: #eeeeee
• Gradyan Yönü: 90deg
• Başlangıç ​​Konumu: %50
• Bitiş Konumu: %0
• Gradyanı Arka Plan Resminin Üstüne Yerleştir: EVET
• Dolgu: 0 piksel üst, 0 piksel alt

Satır Ayarları

Bölüm bittiğinde, satırın ayarlarını açın ve aşağıdakileri güncelleyin:

• Oluk Genişliği: 1
• Genişlik: %100
• Genişlik: %100
• Maksimum Genişlik: %50 (masaüstü), %90 (telefon)
• Satır Hizalama: Sağ
• Dolgu: 300 piksel üst

Sınır

• Sol Kenar Genişliği: 2px
• Sol Kenar Rengi: #333333

Kutu Gölge

• Kutu gölge Stili: ekran görüntüsüne bakın
• Kutu Gölgesi Yatay Konumu: 0px
• Kutu Gölge Yayılma Gücü: 0px
• Gölge Rengi: #333333

Kenarlık ve kutu gölge kombinasyonu, zaman çizelgesi için kullanılacak sayfada ortalanmış bir çizgi oluşturur.

Bina Bulanıklığı 1

Artık çizgimiz yerine oturduğuna göre, tanıtım yazılarımızı eklemeye başlayabiliriz.

Hazır Blurb Modülünü Kopyala ve Yapıştır

İlk tanıtım yazısını oluşturmak için aşağıdaki hazır bölümdeki ilk tanıtım yazısını yeni satıra sürükleyelim.

Bulanık İçeriği Güncelle

Tanıtım yazısı ayarlarını açın ve aşağıdaki içeriği gövdenin içine yapıştırın:

Founded
<ul>
<li>Your content goes here. Edit or remove this text inline or in the module Content settings. </li>
</ul>

Bulanık Liste Tasarımı

Ardından listenin tasarımını aşağıdaki gibi güncelleyin:

• Sırasız Liste Yazı Tipi: Açık Sans
• Sırasız Liste Yazı Tipi Ağırlığı: Yarı Kalın
• Sırasız Liste Metin Rengi: #888888
• Sırasız Liste Metin Boyutu: 16px
• Sırasız Liste Satır Yüksekliği: 1.5em
• Sırasız Liste Stili Türü: Yok
• Sırasız Liste Stili Konumu: İçeride
• Sırasız Liste Öğesi Girintisi: 1px

bulanıklık simgesi tasarımı

• Simge Rengi: #ffffff
• Daire Rengi: #333333
• Daire Kenarlık Rengi: #333333
• Resim/Simge Yerleşimi: Sol
• Simge Yazı Tipi Boyutu: 30px

Daire ve kenarlıkla birlikte simge yazı tipi boyutu tam olarak 50 piksele 50 piksel olmalıdır. Bu, simgeyi satır kenarlığı ve kutu gölgesi tarafından oluşturulan çizgi üzerinde ortalamak için yararlı olacaktır.

Bulanık Kenar Boşluğu

Simgeyi çizginin üzerine ortalamak için simgeyi 27 piksel sola taşımamız gerekiyor. 27 piksel, simgenin tam olarak yarısını (25 piksel) artı satırın yarısını (2 piksel) oluşturur.

Bulanık Boyutlandırma

Bu tasarım için, tanıtım yazımıza piksel uzunluk birimiyle bir yükseklik ayarı vermek önemlidir. Bu, aynı zamanda bir piksel uzunluğu birimine dayanan tahmin edilebilir kaydırma efekti ofset değerleri eklememize izin verecektir. Bir daireyi tanıtım yazısı modülünde 300 piksellik artışlarla aşağı doğru hareket ettireceğimiz için, bunu yapmak için bir yükseklik değerine ihtiyacımız var.

Animasyon Yok

Unutmadan, tüm tanıtıcı simgelere eklenen varsayılan animasyonu çıkaralım.

Bulanıklık Z Dizini

Ardından Z Dizini'ni 1'e ayarlayın. Bu, daha sonra eklediğimiz dairelerin tanıtım yazısı simgelerinin arkasına oturmasını sağlayacaktır.

Koşu Çember Bölücüyü Oluşturma

Bir sonraki adım, bir daire şeklinde olacak, kesinlikle konumlandırılacak ve ardından kaydırma sırasında bir tanıtım simgesinden diğerine (300 piksel) çizgi boyunca taşınacak bir ayırıcı oluşturmaktır.

Bölücü Ekle

Blurb 1'in altına yeni bir ayırıcı modül ekleyin.

bölücü arka plan

Ardından Show Divider altında NO'yu seçin ve Divider'a bir arka plan rengi verin:

• Arka Plan Rengi: #e94558

Bölücüyü Dairesel Yap

Ayırıcıyı dairesel yapmak için genişlik ve yüksekliği aynı değere (50 piksel) ve kenarlık yarıçapı/yuvarlak köşeleri %50'ye ayarlayın.

• Genişlik: 50 piksel
• Yükseklik: 50 piksel
• Yuvarlatılmış Köşeler: %50

Bölücü Konumu

Ardından, aşağıdakileri güncelleyerek ayırıcıyı tanıtım yazısı simgesinin arkasına yerleştirin:

• Pozisyon: Mutlak
• Yatay Ofset: -27px

Bölücü 1 Kaydırma Efektleri

Daire bölücü yerleştirildikten sonra, "koşan daire" hareketini oluşturacak kaydırma efektlerini ekleyebiliriz.

Dikey Hareket sekmesi altında…

• Dikey Hareketi Etkinleştir: EVET
• Başlangıç ​​Ofseti: 0 (%0 görünüm alanında)
• Orta Ofset: 0 (%50 görünüm alanında)
• Bitiş Ofseti: 3 (%75 görünüm alanında)

NOT: Bitiş Ofseti 3'tür ve 300 pikseli temsil eder, bu nedenle ayırıcı, tanıtım yazısının üstünden altına, tam olarak 300 piksel olan tanıtım yazısının tam yüksekliğine hareket edecektir.

Yukarı ve Aşağı Ölçekleme sekmesi altında…

• Yukarı ve Aşağı Ölçeklendirmeyi Etkinleştir: EVET
• Başlangıç ​​Ölçeği: %50 (%50 görünüm alanında)
• Orta Ölçek: %50 (%55-%70 görünüm alanında)
• Bitiş Ofseti: %90 (%75 görünüm alanında)

Hareket efekti tetikleyicisini Öğenin Üstü olarak ayarladığınızdan emin olun.

"Darbeli Vurgu" Bölücünün Oluşturulması

Oluşturmamız gereken bir sonraki bölücü, koşan daire ona ulaştığında veya simge görünümün %50'sine (orta) ulaştığında, tanıtım yazısı simgesine bir darbe vurgulama efekti ekleyecektir.

Yeni darbe bölücüyü oluşturmak için, katmanlar görünüm kutusunu açın ve az önce oluşturduğumuz bölücüyü çoğaltın.

“Darbeli ve Vurgulu” Kaydırma Efektini Ekleme

Ardından yinelenen bölücünün ayarlarını açın ve aşağıdaki kaydırma efektlerini güncelleyin:

Dikey Hareket sekmesi altında…

• Dikey Hareketi Etkinleştir: HAYIR

Yukarı ve Aşağı Ölçekleme sekmesi altında…

• Başlangıç ​​Ölçeği: %100 (%50 görünüm alanında)
• Orta Ölçek: %160 (%51-%54 görünüm alanında)
• Bitiş Ofseti: %130 (%55 görünüm alanında)

Bu, tanıtım yazısı simgesinden biraz daha büyük bir boyuta yerleşmeden önce daire ayırıcının kısa süreliğine %160'a ölçeklenmesine neden olur. Bu, darbe efektine ve ardından vurgu efektine neden olur.

İlk Üç Modülü Etiketleyin

Daha iyi bir organizasyon için, üç modülden oluşan ilk grubu aşağıdaki gibi etiketleyin:

• bulanık1
• koşucu1
• Darbe1

İlk Üç Modülü Çoğalt

Şimdi kaydırma efektleriyle zaman çizelgesine daha fazla olay öğesi oluşturmak için bu işleme devam etmemiz gerekiyor. Bunu yapmak için, ilk üç modülü kopyalayın ve orijinal sırayı koruduklarından emin olarak aşağıya yapıştırın (blurb 1, runner 1, pulse1).

Ardından yinelenen modülleri aşağıdaki gibi yeniden adlandırın:

• bulanık2
• koşucu2
• darbe2

Koşu Çemberi 2 Bölücü Konumunu Güncelle

Ardından, hareketli daire ayırıcıyı (koşucu 2) ikinci tanıtım modülünde başlayan, sayfanın tam olarak 300 piksel aşağısındaki yeni bir dikey kayma ile güncelleyin.

• Dikey Ofset: 300 piksel

Çalışan Daire Bölücü 2 Kaydırma Efektleri

Ardından kaydırma efektini aşağıdaki gibi güncelleyin:

Yukarı ve Aşağı Ölçekleme sekmesi altında…

• Başlangıç ​​Ölçeği: %100

Nabız Bölücü 2 Konumunu Güncelle

“Running 2” güncellendikten sonra, ikinci darbe bölücünün (darbe 2) ayarlarını açın ve dikey ofseti de güncelleyin.

• Dikey Ofset: 300 piksel

Bu bizim ikinci grubumuzla ilgilenir. Bir tane daha yapalım.

Üç Modülün İkinci Grubunu Çoğalt

Üçüncü modül grubumuzu oluşturmak için ikinci grubu (blurb2, runner2, pulse2) kopyalayın ve aynı sırayı koruyarak aşağıya yapıştırın.

Koşu Çember Bölücü 3 Konumunu Güncelle

Koşu çemberi bölücü 3'ü (koşucu3) bir sonraki tanıtım yazısı simgesinde başlayan yeni bir dikey kayma ile güncelleyin.

• Dikey Ofset: 600 piksel

Nabız Bölücü 3 Konumunu Güncelle

Ardından darbe bölücünün (darbe 3) ayarlarını açın ve ona aynı ofseti verin.

• Dikey Ofset 600px

Bu noktada, aşağıdaki üç adımı izleyerek zaman çizelgesine daha fazla öğe eklemeye devam edebilirsiniz:

• Üç modülden oluşan önceki grubu çoğaltın
• Runner Divider'ı Dikey Ofset 300 piksel artırılmış olarak güncelleyin
• Pulse Divider'ı Dikey Ofset 300 piksel artırılmış olarak güncelleyin

Ters Çevirme 2

Şu anda, tüm olaylar satırın içindeki satırın sağ tarafında yer almaktadır. Daha dengeli bir tasarım yaratmak için, ikinci tanıtım yazısını sağ tarafa oturacak şekilde çevirebiliriz. Bunu yapmak için, tanıtıcı ayarlarını açın ve aşağıdakileri güncelleyin:

• Metin Hizalama: Sağ (masaüstü), Sol (telefon)
• Çevir X Eksenini Dönüştür: -250px (masaüstü), 0px (telefon)

Özel CSS

Ardından, aşağıdaki özel CSS'yi Ana Öğeye ekleyin:

direction:rtl;

Ardından telefon sekmesinin altına aşağıdakileri ekleyin:

direction:rtl;

Ardından, Blurb Image'a aşağıdaki özel CSS'yi ekleyin:

padding-left: 15px

Telefon sekmesinin altına aşağıdakileri ekleyin:

padding-left: 0px

Daire Bölücü 1 Koşusunun Başlangıcını Uzatma

Son bir dokunuş olarak, ilk koşan daire ayırıcıyı (koşucu 1), ilk tanıtım yazısı simgesinin üzerinde başlayacak şekilde ayarlayalım. Bunu yapmak için, koşucu 1 ayarlarını açın ve aşağıdakileri güncelleyin:

• Başlangıç ​​Ofseti: -4

Son sonuç

Masaüstü ve mobil cihazlarda nihai sonuca göz atın.

Son düşünceler

Divi zaman çizelgesi düzeni, kullanıcıya canlandırıcı bir şekilde yardımcı olan kaydırma efektlerine sahip zarif bir tasarıma sahiptir. Ayrıca, tasarımın yeni efektleri keşfetmek için sonsuz sayıda olası varyasyonu var gibi görünüyor. Umarım, bu düzen bir sonraki projenizde kullanışlı olacaktır.

Yorumlarda sizden haber bekliyorum.

Şerefe!