İnce Hareket Şekilleriyle Yeni Bir Divi Bölümü Nasıl İşaretlenir

Ziyaretçilerinizi sayfanızdaki başka bir bölüme geçtiklerinden haberdar etmenin birçok yolu vardır. Divi'de, hemen kullanabileceğiniz çok çeşitli bölüm ayırıcılar vardır. Ancak bunu netleştirmek için daha hareketli bir yol arıyorsanız, bu öğreticiyi seveceksiniz. İnce hareket şekillerini kullanarak yeni bir Divi bölümünü nasıl işaretleyeceğinizi göstereceğiz. Bu şekilleri Divi'nin yerleşik seçenekleriyle oluşturacağız ve onlara Divi'nin kaydırma efektleriyle hareket katacağız. Olasılıklar sonsuzdur, ancak hemen kullanabileceğiniz üç tasarım örneğini paylaşacağız. JSON dosyaları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.

Örnek 1

masaüstü

Mobil

Örnek #2

masaüstü

Mobil

Örnek 3

masaüstü

Mobil

İnce Hareket Şekilleri Düzenlerini ÜCRETSİZ İndirin

Ellerinizi ücretsiz ince hareket şekilleri düzenlerine 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!

Genel Adımlar

Sanat Galerisi Açılış Sayfası Düzeni Yükle

Bu eğitim için Art Gallery Layout Pack'i kullanacağız, ancak bu tekniği, oluşturduğunuz her tür web sitesine uygulayabilirsiniz. Yeni bir sayfa ekleyin ve düzen paketinin açılış sayfasını yükleyin.

Bölüm #1'in En Altına Yeni Satır Ekle

Sütun Yapısı

Şimdi, bu öğreticinin başında gösterilen üç örneğin tümü için geçerli olan bazı temel adımlardan geçeceğiz. İlk olarak, aşağıdaki sütun yapısını kullanarak sayfanızın ilk bölümünün altına yeni bir satır ekleyin:

boyutlandırma

Satır ayarlarını açın ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Kenar boşluğunu ve dolgu değerlerini de değiştirin.

• Üst Marj: 10vw
• Üst Dolgu: 0px
• Alt Dolgu: 0px

Bölüm #1 Alt Dolguyu Kaldırın

Satırın ve hareket şekillerinin bölümün altında göründüğünden emin olmak için bölümün alt dolgusunu kaldırmamız gerekecek.

• Alt Dolgu: 0vw

Örnek 1'i Yeniden Oluştur

Bölücü Modül #1 Ekle

görünürlük

Genel adımları tamamladıktan sonra, ilkinden başlayarak farklı örnekleri yeniden oluşturmaya başlamanın zamanı geldi. İlk Bölücü Modülünü ekleyin ve 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

• Bölücüyü Göster: Evet

Hat

Modülün tasarım sekmesine gidin ve çizgi rengini değiştirin.

• Çizgi Rengi: #ffa100

boyutlandırma

Modülün boyutlandırma ayarlarını da değiştirin.

• Bölücü Ağırlığı: 50px
• Yükseklik: 50 piksel

aralık

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

• Sol Kenar Boşluğu: -200px (Yalnızca Tablet ve Telefon)
• Sağ Kenar Boşluğu: -200px (Yalnızca Tablet ve Telefon)
• Sol Dolgu: 15vw
• Sağ Dolgu: 15vw

Eğriliği Dönüştür

Ayrıca dönüştürme ayarlarına bir alt eğrilik değeri ekleyerek modülü biraz dönüştüreceğiz.

• alt: 60 derece

Yatay Hareket Kaydırma Etkisi

Modülümüze farklı kaydırma efektleri ekleme zamanı! İlk olarak, biraz yatay hareket ekleyeceğiz.

• Yatay Hareketi Etkinleştir: Evet
• Başlangıç ​​Ofseti: 0
• Orta Ofset: 0 (%80'de)
• Bitiş Ofseti:
  • Masaüstü: 20 (%85'te)
  • Tablet ve Telefon: 5 (% 85'te)

Solma ve Kaydırma Efekti

İçeri ve dışarı solma efekti de ekleyeceğiz.

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

Yukarı ve Aşağı Kaydırma Etkisi Ölçekleme

Ve bir ölçek büyütme ve küçültme efekti ekleyerek modül ayarlarını tamamlayacağız.

• Yukarı ve Aşağı Ölçeklendirmeyi Etkinleştir: Evet
• Başlangıç ​​Ölçeği: %20
• Orta Ölçek: %50 (%69'da)
• Bitiş Ölçeği: %100 (%73'te)

Klon Bölücü Modül #1

Bölücü Modülü tamamladıktan sonra onu klonlayabilirsiniz.

Çizgi Rengini Değiştir

Yinelenen modülün ayarlarını açın ve çizgi rengini değiştirin.

• Çizgi Rengi: #24252d

Aralığı Değiştir

Modülün boşluk değerlerini de değiştirin.

• Sol Kenar Boşluğu: -200px (Yalnızca Tablet ve Telefon)
• Sağ Kenar Boşluğu: -200px (Yalnızca Tablet ve Telefon)
• Sol Dolgu: 25vw
• Sağ Dolgu: 25vw

Yatay Hareket Kaydırma Efektini Değiştir

Ardından, gelişmiş sekmesindeki kaydırma efektlerine gidin ve yatay hareket kaydırma efektinin bitiş ofsetini değiştirin.

• Bitiş Ofseti:
  • Masaüstü: -20
  • Tablet & Telefon: -5

Örnek 2'yi Yeniden Oluştur

Bölücü Modül #1 Ekle

görünürlük

İkinci örneği yeniden oluşturmayı tercih ederseniz, devam edin ve bölümünüzün son satırına ilk Bölücü Modülü ekleyin. 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

• Bölücüyü Göster: Evet

Hat

Daha sonra modülün çizgi rengini değiştirin.

• Çizgi Rengi: #ffa100

boyutlandırma

Boyutlandırma ayarlarını da değiştirin.

• Bölücü Ağırlığı: 200px
• Genişlik: 200 piksel
• Modül Hizalaması: Merkez
• Yükseklik: 200 piksel

Sınır

Ardından, bir sınır yarıçapı ekleyerek modülü bir daireye çevireceğiz.

• Tüm Köşeler: 200 piksel

Yatay Hareket Kaydırma Etkisi

Kaydırma efektleri ekleme zamanı! Kullandığımız ilk etki yatay harekettir.

• Yatay Hareketi Etkinleştir: Evet
• Başlangıç ​​Ofseti: -2
• Orta Ofset: 0
• Bitiş Ofseti:
  • Masaüstü: 20
  • Tablet & Telefon: 5

Yukarı ve Aşağı Kaydırma Etkisi Ölçekleme

Ardından, yukarı ve aşağı ölçekleme efektini de etkinleştireceğiz.

• Yukarı ve Aşağı Ölçeklendirmeyi Etkinleştir: Evet
• Başlangıç ​​Ölçeği: %20
• Orta Ölçek: %100
• Bitiş Ölçeği: %100

Klon Bölücü Modülü

Devam edin ve tüm Bölücü Modülünü klonlayın.

Çizgi Rengini Değiştir

Kopyayı açın ve çizgi rengini değiştirin.

• Çizgi Rengi: #24252d

Aralığı Değiştir

Biraz üst kenar boşluğu da ekleyin.

• Üst Kenar Boşluğu: -200px

Yatay Hareket Kaydırma Efektini Değiştir

Ardından, yatay hareket kaydırma efekti ayarlarına gidin ve bitiş ofsetini değiştirin.

• Bitiş Ofseti:
  • Masaüstü: -20
  • Tablet & Telefon: -5

Örnek 3'ü Yeniden Oluştur

Satır Dolgusu Ekle

Bir sonraki ve son örneğe geçelim! Bu öğreticinin genel adımlarında oluşturduğunuz satırı açarak başlayın ve boşluk ayarlarında dolgu değerlerini değiştirin.

• Üst Dolgu: 50px
• Alt Dolgu: 50px

Bölücü Modül #1 Ekle

görünürlük

Bölümünüzün son satırına yeni bir Bölücü Modül ekleyin ve bölücüyü gizleyin.

• Bölücüyü Göster: Hayır

Degrade Arka Plan

Ardından bir degrade arka planı ekleyin.

• Renk 1: #ffa100
• Renk 2: #f77f00
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 121deg

boyutlandırma

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

• Genişlik: 200 piksel
• Modül Hizalaması: Merkez
• Yükseklik: 0 piksel

aralık

Sırada bazı özel üst ve alt dolgular ekliyoruz.

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

Yatay Hareket Kaydırma Etkisi

Şimdi, farklı ekran boyutlarında yatay hareketlerle başlayarak kaydırma efektleri ekleme zamanı.

• Yatay Hareketi Etkinleştir: Evet
• Başlangıç ​​Ofseti: -1 (%30'da)
• Orta Ofset: 0
• Bitiş Ofseti:
  • Masaüstü: 20
  • Tablet & Telefon: 5

Döner Kaydırma Etkisi

Dönen bir kaydırma efekti ekleyerek modül ayarlarını tamamlayacağız.

• Döndürmeyi Etkinleştir: Evet
• Başlangıç ​​Dönüşü: 0° (%46'da)
• Orta Dönüş: 50° (%75'te)
• Bitiş Dönüşü: 90°

Klon Bölücü Modülü

Devam edin ve tüm modülü klonlayın.

Degrade Arka Planını Değiştir

Kopyanın ayarlarını açın ve degrade arka plan renklerini değiştirin.

• Renk 1: #24252d
• Renk 2: #16161c

Aralığı Değiştir

Negatif üst kenar boşluğu ekleyin.

• Üst Kenar Boşluğu: -100px

Yatay Kaydırma Efektini Değiştir

Ve kaydırma efektleri ayarlarında yatay hareketin bitiş ofsetini değiştirin.

• Bitiş Ofseti:
  • Masaüstü: -20
  • Tablet & Telefon: -5

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

Örnek 1

masaüstü

Mobil

Örnek #2

masaüstü

Mobil

Örnek 3

masaüstü

Mobil

Son düşünceler

Bu gönderide, hareketli şekilleri nasıl oluşturacağınızı ve bunları Divi sayfanızda yeni bir bölümü işaretlemek için nasıl kullanacağınızı gösterdik. Bu tekniği kullanmak, ziyaretçilerin sayfanızdaki başka bir bölüme geçtikleri gerçeğinin daha da farkına varmalarına yardımcı olacaktır. Yeniden yarattığımız hareket efektleri inceliklidir ve web sitenize zahmetsiz bir şekilde etkileşim katar. JSON dosyaları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.