Divi'nin Dönüştürme ve Gezinme Seçeneklerini Kullanan Yaratıcı Etkileşimli Bulanıklık Modülleri

Hepimiz yeni dönüştürme seçeneklerini sevdik. Harika tasarımlar yaratmamıza ve yaptığımız değişiklikleri gerçek zamanlı olarak görmemize yardımcı oluyorlar. Ve vurgulu seçenekleriyle birleştirildiğinde, kesinlikle bazı çarpıcı efektler yaratmayı başarabilirsiniz. Bu öğreticide, Divi'nin dönüştürme ve fareyle üzerine gelme seçeneklerini birleştirerek etkileşimli tanıtıcı modüllerin nasıl oluşturulacağını göstereceğiz. Oluşturması çok az zaman alan veya hiç zaman almayan ve istediğiniz herhangi bir web projesi için kullanabileceğiniz dört farklı örneği ele alacağız.

Hadi hadi bakalım!

Ön izleme

Öğreticiye dalmadan önce, sonuca hızlıca bir göz atalım.

Genel Adımlar

Yeni Bölüm Ekle

Bu yazının ilk bölümünde, yazının ilerleyen bölümlerinde dönüşüm tanıtım yazısı örneklerine odaklanmamıza yardımcı olacak bazı genel adımların üzerinden geçeceğiz. Yeni bir sayfa oluşturarak veya mevcut bir sayfayı açarak başlayın ve ona normal bir bölüm ekleyin.

1. Satır Ekle

Sütun Yapısı

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

boyutlandırma

Satır ayarlarını açın ve satırın ekranın tüm genişliğini kaplamasına izin vermek için tasarım sekmesinde boyutlandırma ayarlarını değiştirin.

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

aralık

Bazı özel üst ve alt dolguları da ekleyin.

• Üst Dolgu: 150 piksel
• Alt Dolgu: 150 piksel

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

İçerik Ekle

Bu eğitim boyunca ihtiyaç duyacağımız tek modül bir Blurb Modülüdür. Bulanıklık Modülünü özelleştirdikten sonra, gönderinin başında görebildiğiniz dört örneğin tümünü elde etmek için yeniden kullanacağız. Devam edin ve ilk sütuna bir Bulanıklık Modülü ekleyin ve istediğiniz içeriği girin.

Simge Seç

Bir simge seçerek devam edin.

Arka plan rengi

Ardından tamamen beyaz bir arka plan ekleyin.

• Arka Plan Rengi: #ffffff

Varsayılan Simge Ayarları

Ardından, tasarım sekmesindeki simge ayarlarını değiştirin.

• Simge Rengi: #7a69e6
• Daire Simgesi: Evet
• Daire Rengi: rgba(122,105,230,0.3)
• Resim/Simge Yerleşimi: Üst
• Simge Yazı Tipi Boyutunu Kullan: 32px

Fareyle Üzerine Gelme Simgesi Ayarları

Fareyle üzerine gelindiğinde hem simgeyi hem de daire rengini değiştirin.

• Simge Rengi: #ff758e
• Daire Rengi: rgba(255,117,142,0.29)

Başlık Metni Ayarları

Metin ayarlarını değiştirerek devam edin.

• Başlık Yazı Tipi: Roboto
• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Metni Hizalama: Orta
• Başlık Metin Boyutu: 18px
• Başlık Satırı Yüksekliği: 1.7em

Gövde Metni Ayarları

Ayrıca gövde metni ayarlarını da değiştirin.

• Gövde Yazı Tipi: Açık Sans
• Gövde Metni Hizalama: Orta
• Gövde Metin Boyutu: 14px
• Gövde Çizgisi Yüksekliği: 1.8em

boyutlandırma

Ayrıca modülün boyutunu farklı ekran boyutlarında biraz küçültüyoruz.

• Genişlik: %74 (Masaüstü), %85 (Tablet ve Telefon)
• Modül Hizalaması: Merkez

aralık

Ayrıca bazı özel dolgular da ekleyeceğiz.

• Üst Dolgu: 30 piksel
• Alt Dolgu: 40px
• Sol Dolgu: 20px
• Sağ Dolgu: 20px

Sınır

Blurb Module'ün her köşesine '10px' ekleyerek devam edin.

Varsayılan Kutu Gölgesi

Üstüne üstlük, ince bir kutu gölgesi ekleyin.

• Kutu Gölge Bulanıklığı Gücü: 70px
• Gölge Rengi: rgba(122,105,230,0.3)

Vurgulu Kutu Gölgesi

Vurgulu simgesi ve daire renkleri ile eşleşmesi için fareyle üzerine gelindiğinde kutu gölge rengini değiştirin.

• Gölge Rengi: rgba(255,117,142,0.29)

Blurb Modülünü İki Kez Klonla ve Kopyaları Kalan Sütunlara Yerleştir

Blurb Module'ü özelleştirmeyi tamamladığınızda, devam edip iki kez klonlayabilirsiniz. Kopyaları kalan iki sütuna yerleştirin.

2. Satır Ekle

Sütun Yapısı

Son örnek için ayrı bir satıra ihtiyacımız olacak. Aşağıdaki sütun yapısını seçin:

boyutlandırma

Henüz herhangi bir modül eklemeden, tasarım sekmesinde satır ayarlarını açın ve boyutlandırma ayarlarını değiştirin.

• Özel Genişlik Kullan: Evet
• Birim: PX
• Özel Genişlik: 1440 piksel
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

Blurb Modülünü Önceki Satırda Klonla ve Sütun 1'e Yerleştir

Ardından, önceki satırdaki Blurb Modüllerinden birini klonlayın ve kopyayı ikinci satırın ilk sütununa yerleştirin.

Boyutlandırmayı Değiştir

Yeni Blurb Modülünüzün boyutlandırma ayarlarında genişliği değiştirin ve bunu yaptığınızda genel adımları tamamlamış olacaksınız!

• Genişlik: %100 (Masaüstü), %85 (Tablet ve Telefon)

Örnek 1'i Yeniden Oluştur

Varsayılan Dönüştürme Ölçeği

Artık tüm genel adımların üzerinden geçtik, farklı örneklere ve Divi'nin dönüştürme ve fareyle üzerine gelme seçeneklerini kullanarak bunları nasıl başaracağımıza odaklanmaya başlayabiliriz. İlk örnek, yukarıdaki GIF'de fark edebileceğiniz gibi, fareyle üzerine gelindiğinde modülün boyutunu artırıyor. Bunu başarmak için, tüm ekran boyutlarında dönüştürme ölçeği değerlerinin '%100' kaldığından emin olun.

• Alt: %100 (Masaüstü, Tablet ve Telefon)
• Sağ: %100 (Masaüstü, Tablet ve Telefon)

Hover Dönüşüm Ölçeği

Genişleyen bir efekt oluşturmak için fareyle üzerine gelindiğinde dönüştürme ölçeği değerlerini değiştirin.

• Alt: %132
• Sağ: %132

Örnek 2'yi Yeniden Oluştur

Varsayılan Dönüştür Döndür

İkinci örneğe geçelim! Yukarıdaki GIF'de görebileceğiniz gibi yatay bir çevirme efekti oluşturacağız. Bunu yapmak için, dönüşüm döndürme değerleriyle oynamamız gerekecek. Döndürme 0 dereceye dönmeden önce mümkün olan 'en yüksek' değeri kullanıyoruz. Bu, çevirme etkisinin gerçekleşmesine izin verecektir.

• Sağ: 359.9 derece

Hover Dönüştür Döndür

Dönüştürme döndürme seçeneği için fareyle üzerine gelme seçeneklerini etkinleştirin ve '0deg' ekleyin. Temel olarak yaptığımız şey, modülün 360 derecelik bir dönüş yapmasına izin vermektir (teknik olarak, 359.9).

• Sağ: 0 derece

geçişler

Ayrıca, sorunsuz bir geçiş oluşturmak için gelişmiş sekmede geçiş süresini artıracağız.

• Geçiş Süresi: 1000ms

Örnek 3'ü Yeniden Oluştur

Varsayılan Dönüştür Döndür

Üçüncü örnek için, önceki örnekte yaptığımızın hemen hemen aynısını yapacağız, ancak yatay çevirme yerine dikey bir çevirme oluşturuyoruz.

• Merkez: 359.9 derece

Hover Dönüştür Döndür

Fareyle üzerine gelindiğinde değiştirdiğiniz değeri tekrar '0deg' olarak değiştirdiğinizden emin olun.

• Merkez: 0 derece

geçişler

Ve yine geçiş ayarlarında geçiş süresini artırın.

• Geçiş Süresi: 1000ms

Örnek 4'ü Yeniden Oluştur

Varsayılan Dönüştürme Ölçeği

Bir sonraki ve son örneğe geçelim! Modülün ölçeğini değiştirerek başlayın, ancak modülün daha küçük ekran boyutlarında sağlam kaldığından emin olun.

• Alt: %150 (Masaüstü), %100 (Tablet ve Telefon)
• Sağ: %150 (Masaüstü), %100 (Tablet ve Telefon)

Hover Dönüşüm Ölçeği

Modülün masaüstünde yerine oturmasını sağlamak için fareyle üzerine gelindiğinde dönüştürme ölçeğini değiştirin.

• Alt: %100
• Sağ: %100

Varsayılan Dönüştür Döndür

Dönüştürme döndürme değerlerini değiştirerek devam edin. Yine, değerleri uygun şekilde değiştirerek modülün daha küçük ekran boyutlarında sağlam kaldığından emin olun.

• Sol: 322 derece (Masaüstü), 0 derece (Tablet ve Telefon)
• Sağ: 59deg (Masaüstü), 0deg (Tablet ve Telefon)

Hover Dönüştür Döndür

Eklediğiniz değerleri '0deg' ile değiştirerek modülün üzerine gelindiğinde yerine düşmesine izin verin.

• Sol: 0 derece
• Sağ: 0 derece

Varsayılan Dönüştürme Eğriliği

Dönüştürme eğrilik değerlerini de değiştirin.

• Alt: 22deg (Masaüstü), 0deg (Tablet ve Telefon)
• Sağ: 22deg (Masaüstü), 0deg (Tablet ve Telefon)

Hover Dönüştürme Eğriliği

Üzerine gelindiğinde varsayılan değerleri geri getirin.

• alt: 0 derece
• Sağ: 0 derece

geçişler

Son olarak, geçiş ayarlarında geçiş süresini artırın.

• Geçiş Süresi: 500ms

Bulanıklık Modülünü Sütun 1'de Dört Kez Klonla ve Kopyaları Kalan Sütunlara Yerleştir

Geçiş ayarlarını tamamladıktan sonra devam edip Blurb Module'ü dört kez kopyalayabilirsiniz. Kopyaları kalan sütunlara yerleştirin ve işiniz bitti!

Son düşünceler

Bu öğreticide, Divi'nin dönüştürme ve fareyle üzerine gelme seçeneklerini birlikte nasıl yaratıcı bir şekilde kullanacağınızı gösterdik. Daha spesifik olarak, daha küçük ekran boyutlarında da istenen sonucu korurken Blurb Modüllerini nasıl daha etkileşimli hale getirebileceğinizi gösteren dört farklı örneği yeniden oluşturduk. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!