Divi ile İçeriği Vurgulamak için Animasyonlu Kenar Örtüşmeleri Nasıl Oluşturulur

Sayfanızın belirli bir bölümünü öne çıkarmanın benzersiz bir yolunu mu arıyorsunuz? Okumaya devam edin! Bugün size sayfanızdaki içeriği vurgulamak için animasyonlu kenarlık çakışmalarının nasıl oluşturulacağını göstereceğiz. App Developer Layout Pack'in açılış sayfasında üç farklı animasyonlu kenarlık çakışması oluşturacağız, ancak bu tekniği, oluşturduğunuz her tür web sitesi için kullanabilirsiniz. Kesinlikle sayfanıza ekstra bir boyut eklemenize yardımcı olacaktır. Bu öğreticinin, kendi alternatif animasyonlu kenarlık örtüşmelerinizi de oluşturmanız için size ilham vermesini umuyoruz.

Hadi hadi bakalım!

Ön izleme

Öğreticiye dalmadan önce, üç örneğin sonuçlarına hızlıca bir göz atalım. Daha küçük ekran boyutlarında da benzer bir sonuç bekleyebilirsiniz.

Örnek 1

Örnek #2

Örnek 3

Youtube Kanalımıza Abone Olun

Uygulama Geliştirici Düzen Paketinin Açılış Sayfasını Kullanarak Yeni Sayfa Oluşturun

Yapmanız gereken ilk şey, Uygulama Geliştirici Düzen Paketi'nin açılış sayfasını kullanarak yeni bir sayfa oluşturmaktır.

Klon Kahraman Bölümü

İlk iki örneğimiz kahraman bölümünde oluşturulmuştur. Her iki örneği de yeniden oluşturmak istiyorsanız, ikinci örneği yeniden oluşturmak için kopyaya geçebilmeniz için kahraman bölümünü klonlamanız önerilir.

Örnek 1'i Yeniden Oluştur

Kahraman Bölümüne Yeni Satır Ekle

Sütun Yapısı

İlk örneği yeniden oluşturmaya başlayalım! Aşağıdaki sütun yapısını kullanarak uzmanlık bölümüne yeni bir satır ekleyin:

Metin Modülü Ekle

İçerik Kutusunu Boş Bırak

Satıra yeni Metin Modülü ekleyin ve içerik kutusunu boş bıraktığınızdan emin olun. Modülü, yazılı içeriği görüntülemek için değil, yerleşik tasarım seçenekleri için kullanıyoruz.

aralık

Metin Modülünün boşluk ayarlarına gidin ve özel üst ve alt dolgu ekleyerek modüle bir şekil verin. Negatif üst kenar boşluğu da ekleyerek bu modül ile önceki modüller arasında örtüşme oluşturun.

• Üst Kenar Boşluğu: -480px
• Üst Dolgu: 223px
• Alt Dolgu: 223px

Sınır

Ardından, modülün kenarlık ayarlarına gidin ve istediğiniz bir kenarlığı ekleyin.

• Kenar Genişliği: 9px
• Kenar Rengi: #0ae2ff
• Kenar Stili: Başlangıç

Kutu Gölge

Bir kutu gölgesi de ekleyin.

• Kutu Gölge Bulanıklığı Gücü: 1 piksel
• Kutu Gölge Yayılma Gücü: 15px
• Gölge Rengi: rgba(10,226,255,0.59)

Animasyon

Ve içeriği öne çıkarmak için animasyon ayarlarıyla oynayın.

• Animasyon Stili: Çevir
• Animasyon Tekrarı: Bir kez
• Animasyon Yönü: Sağ
• Animasyon Süresi: 1500ms
• Animasyon Gecikmesi: 1500ms
• Animasyon Yoğunluğu: %500

Örnek 2'yi Yeniden Oluştur

Kahraman Bölümünü Çoğaltmak için Yeni Satır Ekle

İkinci örneğe geçelim! Aşağıdaki sütun yapısını kullanarak yinelenen kahraman bölümüne yeni bir satır ekleyin:

Metin Modülü #1 Ekle

İçerik Kutusunu Boş Bırak

Yine boş bir Metin Modülü kullanıyoruz.

aralık

Aralık ayarlarına gidin ve özel üst ve alt dolgu kullanarak modüle bir şekil verin. Negatif üst kenar boşluğu da ekleyerek önceki modüllerle örtüşmesini sağlayın.

• Üst Kenar Boşluğu: -480px
• Üst Dolgu: 223px
• Alt Dolgu: 223px

Sınır

Metin Modülüne bir kenarlık ekleyerek devam edin.

• Kenar Genişliği: 9px
• Kenar Rengi: #0ae2ff
• Bordür Stili: Çift

Animasyon

Ve bir yuvarlanma efekti oluşturmak için animasyon ayarlarıyla oynayın.

• Animasyon Tarzı: Rulo
• Animasyon Tekrarı: Bir kez
• Animasyon Yönü: Merkez
• Animasyon Süresi: 4500ms
• Animasyon Gecikmesi: 1500ms
• Animasyon Yoğunluğu: %100
• Animasyon Opaklığı Başlatma: %100

Klon Metin Modülü

İlk Metin Modülünü değiştirmeyi bitirdikten sonra devam edin ve kopyalayın.

Aralığı Değiştir

Kopyanın ayarlarını açın ve boşluk ayarlarında üst kenar boşluğu değerini değiştirin.

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

Kenarlığı Değiştir

Kenarlık rengini de değiştirin.

• Kenar Rengi: #eded

Animasyonu Değiştir

Ve bu gönderinin önizlemesinde gördüğünüz sonucu elde etmek için animasyon ayarlarını değiştirin.

• Animasyon Tekrarı: Döngü
• Animasyon Süresi: 5000ms
• Animasyon Gecikmesi: 2000ms

Örnek 3'ü Yeniden Oluştur

Sütun 2'deki Görüntü Modülünün Aralığını Değiştirin

Bir sonraki ve son örneğe geçelim! Sayfadaki işlem bölümüne gidin ve ortadaki büyük resmi içeren Görüntü Modülüne bir miktar üst dolgu ekleyin.

• Üst Kenar Boşluğu: 70px (Masaüstü), 0px (Tablet ve Telefon)

Mevcut Metin Modüllerine Arka Plan Rengi Ekleyin

Birinci ve üçüncü sütundaki Metin Modüllerinin her birine beyaz bir arka plan rengi ekleyerek devam edin.

• Arka Plan Rengi: #ffffff

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

İçerik Kutusunu Boş Bırak

Artık ilk animasyonlu kenar çakışmasını eklemeye başlayabiliriz! İlk sütuna yeni bir Metin Modülü ekleyin (yazdırma ekranına bakın) ve içerik kutusunu boş bıraktığınızdan emin olun.

aralık

Daha sonra Metin Modülünün boşluk ayarlarına gidin ve özel kenar boşluğu ve dolgu değerlerini kullanarak şekli ve örtüşmeyi oluşturun.

• Üst Kenar Boşluğu: -230px
• Sol Kenar Boşluğu: 80px
• Sağ Kenar Boşluğu: 100px
• Üst Dolgu: 120px
• Alt Dolgu: 120px

Sınır

Sonraki bir kenarlık ekleyin.

• Kenar Genişliği: 13px
• Kenar Rengi: #bcf5f3
• Bordür Stili: Çift

Animasyon

Paylaştığınız içeriği öne çıkarmanıza yardımcı olacak, seçtiğiniz bir animasyon ekleyerek devam edin.

• Animasyon Stili: Katlama
• Animasyon Tekrarı: Bir kez
• Animasyon Yönü: Sağ
• Animasyon Yoğunluğu: %100

Z İndeksi

Kenarlıkların içeriğin altında görünmesini sağlamak için, kenarlık ayarlarını içeren Metin Modülünün Z indeksi için negatif bir değer kullanacağız.

• Z İndeksi: -1

Klon Metin Modülü ve Sütun 1'in Sonundaki Yer

Metin Modülünü oluşturmayı ve değiştirmeyi bitirdikten sonra devam edin ve kopyalayın. Kopyayı ilk sütunun sonuna yerleştirin.

Kenarlığı Değiştir

Kenarlık rengini değiştirin.

• Kenar Rengi: #ffc0ec

Animasyonu Değiştir

Ve ayrıca bir animasyon gecikmesi ekleyin.

• Animasyon Gecikmesi: 1000ms

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

İçerik Kutusunu Boş Bırak

Üçüncü sütuna bir Metin Modülü ekleyerek devam edin (yazdırma ekranına bakın) ve içerik kutusunu boş bıraktığınızdan emin olun.

aralık

Aralık ayarlarına gidin ve özel kenar boşluğu ve dolgu değerleri kullanarak şekli ve örtüşmeyi oluşturun.

• Üst Kenar Boşluğu: -230px
• Sol Kenar Boşluğu: 100 piksel
• Sağ Kenar Boşluğu: -80px
• Üst Dolgu: 120px
• Alt Dolgu: 120px

Sınır

Daha sonra seçtiğiniz bir kenarlığı ekleyin.

• Kenar Genişliği: 13px
• Kenar Rengi: #7479ff
• Bordür Stili: Çift

Animasyon

Önceki iki Metin Modülüne verilenden daha yüksek bir animasyon gecikmesi içeren bir animasyonla birlikte.

• Animasyon Stili: Katlama
• Animasyon Tekrarı: Bir kez
• Animasyon Yönü: Sol
• Animasyon Gecikmesi: 2000ms
• Animasyon Yoğunluğu: %100

Z İndeksi

Negatif bir Z indeksi kullanarak modülün içeriğin altında göründüğünden emin olun.

• Z İndeksi: -1

Metin Modülünü Klonla ve 3. Sütun Sonundaki Yeri

Metin Modülünü eklemeyi ve değiştirmeyi bitirdikten sonra, kopyalayın ve kopyayı üçüncü satırın sonuna yerleştirin.

Kenarlığı Değiştir

Kopyanın kenarlık rengini değiştirin.

• Kenar Rengi: #b3d1ff

Animasyonu Değiştir

Ekstra animasyon gecikmesi ekleyin ve işiniz bitti!

• Animasyon Gecikmesi: 3000ms

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi bu eğitim boyunca yeniden oluşturduğumuz üç örneğin sonuçlarına son bir göz atalım.

Örnek 1

Örnek #2

Örnek 3

Son düşünceler

Bu gönderide, animasyonlu kenarlık çakışmaları kullanarak içeriğinizi nasıl öne çıkaracağınızı gösterdik. Bu, sayfanızın belirli bir bölümüne dikkat çekmek ve bunu zarif bir şekilde yapmak için harika bir tekniktir. Bu tekniği, oluşturduğunuz her türlü web sitesi için kullanabilirsiniz. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!