Divi'de Soyut Vurgulu Efektler için Birden Çok Öğe Nasıl Dönüştürülür
Yayınlanan: 2019-05-18Şimdiye kadar zaten bildiğiniz gibi, Divi, herhangi bir Divi öğesi (bölümler, satırlar veya modüller) için benzersiz vurgulu efektler oluşturmanıza olanak tanıyan bir dizi tasarım ayarına sahiptir. Genellikle, bir vurgulu efekti yalnızca bir öğeye izole edilir. Örneğin, üzerine gelindiğinde bir modüle dönüştürme döndürme özelliği eklerseniz, bu döndürme, modülün üzerine gelindiğinde etkinleşir. Ancak, modülü içeren satıra ek bir vurgulu efekti eklerseniz, bu, modülün üzerine geldiğinizde başka bir vurgulu efekt katmanı ekler. Bu, bazı benzersiz soyut vurgulu efektlerin kapısını açar.
Bu öğreticide, Divi'nin yerleşik ayarlarını kullanarak soyut vurgulu efektler için birden çok öğenin nasıl dönüştürüleceğini keşfedeceğiz. Ve bu tasarım için satırları biraz farklı kullanacağımızdan, bu vurgulu efektleri bir galeride sergileyebilmeniz için (isterseniz) satırlarınız için nasıl bir ızgara düzeni oluşturacağınızı göstereceğim.
Başlayalım.
Gizlice Bakış
Hover Düzeninde Birden Çok Öğeyi Dönüştür'ü Ü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.
Ü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.
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ı çıkarın ve json dosyasını Divi Builder'a sürükleyin.
Hadi öğreticiye geçelim mi?
Başlarken
Youtube Kanalımıza Abone Olun
Bu eğitim için aşağıdakilere ihtiyacınız olacak:
- Divi Teması yüklü ve etkin
- Birkaç resim. Divi Builder'ın içinden erişilebilen hazır düzenlerimizden görüntüleri kullanıyorum
Hazır olduğunuzda, WordPress Kontrol Panelinize gidin. Ardından yeni bir sayfa oluşturun (Sayfalar > Yeni Ekle), sayfanıza bir başlık verin ve Divi Builder'ı dağıtın. “Sıfırdan Oluştur” seçeneğini seçin.
Şimdi boş tuvaliniz sizi bekliyor!
Bir Görüntü için Soyut Vurgulu Efektler
Bu ilk tasarım, fareyle üzerine gelindiğinde görüntümüze bir yelpaze efekti oluşturmak için satırdaki çarpık dönüşüm vurgulu efektlerini ve görüntü modülünü birleştirecektir. Bu efekt, havalı görünmenin yanı sıra, kullanıcının resme tıklayarak daha fazla resim göreceğini bilmesini sağlayan yararlı bir UI etkileşimi olarak da hizmet edebilir. Böylece, isterseniz resmi galeri sayfanıza bir bağlantı olarak kullanabilirsiniz.
İşte nasıl yapılacağı.
Önce tek sütunlu bir satırla yeni bir normal bölüm oluşturun.
Ardından satıra bir görüntü modülü ekleyin.
Ardından, modüle bir resim yükleyin.
Görüntü Modülü Vurgulu Efektleri Ekleyin
Şimdi, görüntüyü döndürmeyi ve eğriltmeyi ölçeklendirecek görüntüye birkaç dönüşüm vurgulu efekti ekleyebiliriz. Bunu yapmak için dönüştürme seçeneklerine gidin ve aşağıdakileri güncelleyin:
Ölçeği X ve Y eksenini dönüştür: %110
Dönüştür Döndür Z ekseni: 9deg
Skew X ve Y eksenini dönüştür: 3deg
Bu kadar! Oldukça basit. Şimdi, öğelerin üzerine gelindiğinde etkinleşecek başka bir vurgulu efekti eklemek için satırı özelleştirmemiz gerekiyor.
Satır Ayarları
Bu tasarımın çalışması için, satırın içindeki görüntü ile aynı boyutta olması gerekir, böylece fareyle üzerine gelme alanı her ikisi için de aynı olur. Bu, hem modül hem de modül (veya bu durumda görüntü) üzerine gelindiğinde etkinleşecek olan satır için farklı vurgulu efektleri eklememize izin verecektir. Bu işe yarar, çünkü bir satırın içindeki bir modülün üzerine gelindiğinde, fareyle üzerine gelindiğinde olduğu gibi vurgulu efektleri etkinleştirilir. Ve modül üzerinde farklı bir vurgulu efektimiz olduğu için, modül üzerine gelindiğinde her iki vurgulu efekt de etkinleşir. Bu, hem satıra hem de modüle kutu gölgesi, skew dönüşümü ve transform döndürme kullanarak soyut vurgulu efektlerin bir kombinasyonunu kullanmamıza izin verir.
Görüntümüz için modül vurgulu efektlerimiz zaten var, şimdi satırımızın boyutunu ayarlamamız gerekiyor. Resmin boyutuna bağlı olarak, modül zaten satırın tüm genişliğini kapsamalıdır, bu nedenle teknik olarak satırın genişliğini ayarlamaya gerek yoktur. Ancak bu örnekte, vurgulu efektlerimize yer açmak için satırı küçülteceğim.
Satır ayarlarını aşağıdaki gibi güncelleyin:
Maksimum genişlik: 400 piksel
Satırımızın yüksekliğinin içindeki görüntüyle eşleşmesini istediğimizden, varsayılan üst ve alt dolgudan kurtulmamız gerekiyor:
Özel Dolgu: 0 piksel üst, 0 piksel alt
Şimdi satır sütununa bir arka plan resmi eklememiz gerekiyor. Bu arka plan görüntüsü, görüntü modülü dönüşüm vurgulu efekti eğrildiğinde ve döndüğünde görüntülenecektir.
Sütun 1 Arka Plan Resmi: [resmi girin]
Fareyle üzerine gelindiğinde satırı aşağıdaki gibi bir kutu gölgesiyle güncellemeye devam edin:
Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölgesi Yatay Konumu: 0px (varsayılan), -30px (vurgulu)
Kutu Gölgesi Dikey Konumu: 0px (varsayılan), -15px (vurgulu)
Gölge Rengi: #002f66
Bu kutu gölgesi, arka plan görüntüsünü döndürecek ve eğriltirecek dönüşüm vurgulu efektlerimizi eklediğimizde görünecek olan satır arka plan görüntüsünün arkasında görünen başka bir görüntünün efektini ekler.
Son olarak, satır için ek bir vurgulu efekti eklemek için bir skew transform özelliği eklemeye hazırız.
Skew X ve Y eksenini dönüştür: -3deg
Son sonuç
İşte nihai sonuç.
Ve mobilde de güzel bir şekilde ölçeklenecek.
Harekete Geçirici Mesaj için Soyut Fareyle Üzerine Gelme Efektleri (örnek 1)
Satır Ayarları
Bir sütun satırıyla yeni bir normal bölüm oluşturun.
Ardından satır ayarlarını aşağıdaki gibi güncelleyin:
Sütun 1 Arka Plan Gradyanı Sol Renk: rgba(34,43,58,0.71)
Sütun 1 Arka Plan Gradyanı Sağ Renk: #222b3a
Arka Plan Resmi: [resim ekle]
Maksimum Genişlik: 400 piksel
Özel Dolgu: 0 piksel üst, 0 piksel alt
Soyut vurgulu efektlerimizi birazdan tamamlamak için satır ayarlarına dönüyor olacağız, ancak şimdilik Eylem Modülü çağrımızı satıra ekleyelim.
Harekete Geçirici Mesaj Modülü Ayarları
Harekete Geçirici Mesaj Modülü ayarlarını açın ve içeriği aşağıdaki gibi güncelleyin:
Başlık: Puanlarla Seyahat Edin
Düğme Metni: Buraya Tıklayın
İçerik: Yalnızca sınırlı bir süre için
Düğme Bağlantı URL'si: # (şimdilik düğmeyi etkinleştirmek için)
Arka Plan Rengini Kullan: HAYIR
Ardından, modülün metni ve aralığı için tasarım ayarını güncelleyin.
Başlık Yazı Tipi: Gilda Ekranı
Düğme Metin Boyutu: 16px
Düğme Metin Rengi: #ffb238
Düğme Arka Plan Rengi: rgba(0,0,0,0)
Düğme Kenar Genişliği: 0px
Özel Dolgu: %20 üst, %20 alt
Şimdi modüle bir kenarlık ekleyin.
Kenar Genişliği: 2px
Kenar Rengi: #222b3a
Bu, varsayılan tasarımımızla ilgilenir. Şimdi eğlenceli kısım zamanı. Unutmayın, satırımız ve modülümüz temelde aynı boyutta (yükseklik ve genişlik) olduğundan, fareyle üzerine gelme alanı her ikisi için de aynı olacaktır. Diğer bir deyişle, satıra ve modüle eklediğimiz fareyle üzerine gelme efektleri, öğelerin üzerine gelindiğinde her ikisi de etkinleşecektir. Bu, hem satıra hem de modüle kutu gölgesi, skew dönüşümü ve transform döndürme kullanarak soyut vurgulu efektlerin bir kombinasyonunu kullanmamıza izin verir.
Satır vurgulu efektleriyle başlayalım.
Satır Vurgulu Efektler
İlk olarak, satırımıza fareyle üzerine gelindiğinde bir kutu gölgesi ekleyebiliriz. Satır ayarlarını açın ve aşağıdakileri güncelleyin:
Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölgesi Yatay Konumu: 0px (varsayılan), 90px (vurgulu)
Kutu Gölgesi Dikey Konumu: 0px (varsayılan), 80px (vurgulu)
Kutu Gölge Yayılma Gücü: 0px (varsayılan), -40px (vurgulu)
Gölge Rengi: #ffb238
Kutu gölgesinin, daha sonra ekleyeceğimiz dönüştürme seçeneklerini de devralacağını unutmayın.
Şimdi fareyle üzerine gelindiğinde bir döndürme ve eğriltme dönüştürme özelliği ekleyelim.
Dönüştür X eksenini döndür (fareyle üzerine gelin): 10deg
Eğri X eksenini dönüştür (fareyle üzerine gelin): -4deg
Skew Y eksenini dönüştür (vurgu): -4deg
Bu, satır vurgulu efektleriyle ilgilenir. Şimdi tasarımı tamamlayacak Çağrı Modülüne vurgulu efekti eklememiz gerekiyor.
Harekete Geçirici Mesaj Modülü Vurgulu Efektler
Harekete geçirici mesaj modülü ayarlarını açın ve aşağıdaki gibi bir kutu gölge vurgusu efekti verin:
Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölgesi Yatay Konumu: 0px
Kutu Gölgesi Dikey Konumu: 0px (varsayılan), 30px (vurgulu)
Gölge Rengi: #ffffff
Son olarak, fareyle üzerine gelindiğinde aşağıdaki gibi bir ölçekleme, döndürme ve eğriltme dönüştürme özelliği ekleyin:
Ölçeği X ve Y Eksenini Dönüştür (fareyle üzerine gelin): %115
Dönüştür Döndür Z ekseni (vurgulu): 9deg
Skew X eksenini dönüştür (vurgu): 3deg
Skew Y eksenini dönüştür (vurgu): 3deg
Fareyle üzerine gelindiğinde ölçeği kullanarak modülün boyutunu artırmak, kullanıcının modül yerine yalnızca satır öğesinin üzerine gelme olasılığını en aza indirmeye yardımcı olacaktır.
Son sonuç
İşte soyut vurgulu efektin nihai sonucu. Soyut bir tasarım için öğeleri eğmek için fareyle üzerine gelindiğinde hem satır vurgulu efektlerinin hem de modül vurgulu efektlerinin nasıl etkinleştirildiğine dikkat edin.
İşte fareyle üzerine gelme efektinin mobilde nasıl görüneceği. Bununla birlikte, çoğu mobil tarayıcı, vurgulu efekti etkinleştirmek için bir dokunuş gerektirdiğinden, modülü bir bağlantı olarak kullanıyorsanız kullanıcının iki kez dokunmasını önlemek için mobil cihazlarda vurgulu efekti devre dışı bırakmak isteyebilirsiniz.
Harekete Geçirici Mesaj için Soyut Fareyle Üzerine Gelme Efektleri (örnek 2)
Tasarımı hızlı bir şekilde başlatmak için bu sonraki soyut vurgulu efekti, ilk örneğimizi içeren bölümü çoğaltalım. Şimdi tek yapmamız gereken tasarımda bazı küçük ayarlamalar yapmak ve benzersiz bir tasarım için fareyle üzerine gelme efektlerini yapmak.
Satır Ayarlarını Güncelle
İlk olarak, satır ayarlarını aşağıdaki gibi güncelleyin:
Dönüştür Z eksenini döndür: -5 derece
Skew X ve Y eksenini dönüştür: -4deg
Harekete Geçirici Mesaj Modülü Ayarlarını Güncelleyin
Şimdi modül ayarlarını aşağıdaki gibi değiştirelim:
Önce sınırı çıkar...
Kenarlık genişliği: 0px
Ardından kutu gölgesini aşağıdaki gibi güncelleyin:
Kutu Gölgesi Yatay konumu: 0px
Kutu Gölge Dikey Konumu: 110 piksel
(çoğalttığınız önceki tasarımdan devralınan vurgulu efektin olduğundan emin olun ve devre dışı bırakın)
Gölge Rengi: #ffb238
Artık transform özelliği vurgulu efektlerimizi güncelleyebiliriz. Burada temel olarak ölçeği biraz azaltıyoruz ve öğeyi üzerine gelindiğinde zıt yönde hareket ettirmek için önceki döndürme ve eğriltme dönüştürme özelliklerimize negatif değerler ekliyoruz.
Aşağıdaki dönüştürme seçeneklerini güncelleyin:
Ölçeği X ve Y Eksenini Dönüştür (fareyle üzerine gelin): %110
Dönüştür Döndür Z ekseni (vurgulu): -9deg
Skew X eksenini dönüştür (fareyle üzerine gelin): -3deg
Eğri Y eksenini dönüştür (fareyle üzerine gelin): -3 derece
Satırlarınız için Izgara Düzeni Oluşturma
Bu tasarım, üst satırın modülün etrafına sarılmasını ve aynı yüksekliğe ve genişliğe sahip olmasını gerektirdiğinden, normalde yaptığınız gibi bir sütun düzeni oluşturma olanağına sahip değilsiniz, ancak, satırlarınızı hizalamak için flex özelliğini kullanabilirsiniz. ızgara düzeninde yatay olarak.
Bunu yapmak için önce modülünüzü içeren satırı birkaç kez çoğaltın, böylece bir bölümde üç satırınız olur.
Ardından, satırların her birine özel bir kenar boşluğu ekleyin:
Özel Kenar Boşluğu: 50 piksel üst, 50 piksel alt
Ardından bölüm ayarlarını açın ve aşağıdaki özel CSS'yi Ana Öğeye ekleyin.
display: flex; flex-wrap: wrap;
Artık tarayıcı boyutunuzla yanıt verecek üç sütun satırınız var.
Son düşünceler
Fareyle üzerine gelindiğinde birden çok öğeyi dönüştürmek, keşfedebileceğiniz başka bir yaratıcılık düzeyi sağlar. Bu eğitimdeki örnekler, size neyin mümkün olduğunu göstermeyi amaçlamaktadır, ancak kendi projeniz için tasarımları değiştirmekten çekinmeyin. Tahmin edebileceğiniz gibi, isterseniz oldukça tuhaf olabilirsiniz. Ancak bu eğitimdeki görüntü modülü örneği gibi ince bir etkileşim tasarım öğesi oluşturmak için biraz daha tutucu olabilirsiniz.
Yorumlarda sizden haber bekliyorum.
Şerefe!