Transform & amp;Doğrudan divi
Hepimiz yeni dönüşüm seçeneğini seviyoruz. Olağanüstü tasarımlar yapmamıza ve yaptığımız değişiklikleri gerçek zamanlı olarak görmemize yardımcı olurlar. Ve Hover seçeneği ile birleştirildiğinde, bazı şaşırtıcı efektler yapmak için kesinlikle ayarlayabilirsiniz. Bu öğreticide, Dönüştürme ve Divi Hover seçeneklerini birleştirerek etkileşimli bir açıklama modülünün nasıl oluşturulacağını göstereceğiz. Bunu yapmak için biraz zaman veya zaman gerektiren ve istediğiniz web projesi için kullanabileceğiniz dört farklı örneği ele alacağız. Haydi Yapalım şunu!
Önizleme Eğiticiye girmeden önce, önce sonuçları görelim.
Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evet
Talang genişliği: 1 Mesafe Biraz özel üst ve alt yatak ekleyin.
Üst dolgu: 150px
Dolgu Alt: 150 piksel Blurb modülünü sütun 1’e ekleyin, bu öğretici boyunca ihtiyacımız olan tek modülün içeriğini bulanık modül ekleyin. Bulanıklık modülünü ayarladıktan sonra, yazının başında görebileceğiniz dört örneğe ulaşmayı yeniden kullanacağız. Lütfen ve Blurb modülünü ilk sütuna ekleyin ve istediğiniz içerikten bazılarını girin. Simgeyi seçin. Arka plan rengi bir sonraki beyaz arka plan ekler. Arka plan rengi: #ffffff
Varsayılan simge ayarları Daha sonra, tasarım sekmesindeki simge ayarlarını değiştirin. Renk simgesi: #7A69E6
Çember simgesi: evet
Çember rengi: RGBA (122,105,230.0.3)
Resim Yerleştirme/Simge: Üst
Simge yazı tipi boyutunu kullanın: 32px
Simge ayarlarına gidin, imlecleri işaret ederken dairenin simgesini ve rengini değiştirin. Renk simgesi: #ff758e
Çember rengi: RGBA (255,117,142.0.29)
Başlık metin ayarları metin ayarlarını değiştirerek devam eder. Yazı tipi başlığı: Roboto
Ağır yazı tipi başlığı: kalın
Hizalama Metin Başlığı: Orta
Başlık Metin Boyutu: 18px
Hat yüksekliği başlığı: 1.7em
Gövde metnini ayarlayın ve içerik metin ayarlarını da değiştirin. Gövde yazı tipi: açık sans
Vücut metninin hizalanması: orta
Vücut Metin Boyutu: 14 piksel
Vücut Hattı Yüksekliği: 1.8EM
Yapıştırıcımız ayrıca çeşitli ekran boyutlarındaki modülün boyutunu biraz azalttı. Genişlik:% 74 (masaüstü),% 85 (tablet ve cep telefonu)
Modül hizalaması: merkez
Mesafe ve ayrıca bazı özel pedler ekleyeceğiz. Üst dolgu: 30px
Dolgu Alt: 40 piksel
Sol dolgu: 20px
Doğru dolgu: 20 piksel
Sınır, bulanık modülün her köşesine ’10px’ ekleyerek devam edin. Varsayılan kutunun gölgesi ve tamamlamak için kutunun pürüzsüz bir gölgesi ekleyin. Bulanık Güç Gölgesi Kutusu: 70px
Gölge Rengi: RGBA (122,105,230,0.3) Geri gelmedeki kutunun gölgesinin rengini değiştirmek için gölgede gezin.
Gölge Renk: RGBA (255,117,142.0.29) Klon Blurb Modülünü iki kez iki kez yerleştirin ve bulanıklık modülünü ayarlamayı bitirdikten sonra kalan sütuna yinelenen yerleştirin, devam edebilir ve iki kez klonlayabilirsiniz. Kalan iki sütuna yinelenen yerleştirin.
ROWS #2 Sütun Yapısı Ekle Son örnek için ayrı bir satıra ihtiyacımız var. Aşağıdaki sütun yapısını seçin: Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve tasarım sekmesindeki boyut ayarlarını değiştirin. Özel genişlik kullanın: evet Birim: PX
Özel genişlik: 1440px
Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Önceki satırda klon bulanık modülü ve daha sonra sütun 1’e yerleştirilir, önceki sıradaki bulanıklık modüllerinden birini klonlar ve kopyasını ikinci sıranın ilk sütununa yerleştirmiştir.
Yeni bulanık modülünüzün boyutunu ayarlarken genişliğin boyutunu değiştirin ve bunu yaptıktan sonra genel adımları tamamlayacaksınız! Genişlik:% 100 (masaüstü),% 85 (tablet ve cep telefonu)
Bir örnek #1 yap
Varsayılan Dönüşüm Ölçeği Şimdi tüm genel adımlardan geçtikten sonra, dönüşüm ve doğrudan divi seçeneklerini kullanarak bunları başarmanın çeşitli örneklerine ve yollarına odaklanmaya başlayabiliriz. İlk örnek, yukarıdaki GIF’de görebileceğiniz gibi, yüzerken modülün boyutunu artırın. Bunu başarmak için, Dönüşüm Ölçeği değerinin tüm ekran boyutlarında ‘%100’ kaldığından emin olun.
Dönüşüm Ölçeğini Yönlendirin İmleci bir genişleme etkisi yaratmaya yönlendirirken dönüşüm ölçeği değerini değiştirin.
Aşağıda:%132 Doğru:%132 Yeni bir örnek #2 yap
Varsayılan dönüşümü ikinci örneğe çevirin! Yukarıdaki GIF’de görebileceğiniz gibi yatay bir ters etkisi yaratacağız. Bunu yapmak için, döndürme bir dönüşüm değeri ile oynamalıyız. Rotasyon 0 dereceye değişmeden önce ‘en yüksek’ değeri kullanırız. Bu, tersine dönmenin etkisine izin verecektir.
Sağ: 359.9 derece Doğrudan Dönüşüm Oynama Dönüşüm Rotary seçeneği için imleci işaret etme seçeneğini etkinleştirin ve ‘0deg’ ekleyin. Temel olarak yaptığımız şey, modülün 360 derece çevirmesine izin vermektir (teknik olarak, 359.9). Doğru: 0 derece
Geçişimiz ayrıca sorunsuz bir geçiş yapmak için Gelişmiş sekmesindeki geçiş süresini artıracaktır. Geçiş süresi: 1000ms
Bir örnek #3 yap Üçüncü örnek için varsayılan dönüşümü oynayın, önceki örnekte olduğumuzla neredeyse aynı olan şeyleri yapacağız, ancak yatay flip yapmak yerine dikey flip yapıyoruz.
Orta: 359.9 derece Dönüşüm dönüşü Gezinme İmleçi yönlendirirken değiştirdiğiniz değeri ‘0deg’ olarak değiştirdiğinizden emin olun. Merkez: 0deg
Geçiş ve bir kez daha geçiş düzenlemesindeki geçiş süresini artırın. Geçiş süresi: 1000ms
Bir örnek #4 Varsayılan dönüşüm ölçeği bir sonraki ve son örneğe! Modül ölçeğini değiştirerek başlayın, ancak modülün daha küçük bir ekran boyutunda sağlam kaldığından emin olun.
Aşağıda:% 150 (masaüstü),% 100 (tablet ve cep telefonu) Sağ:% 150 (masaüstü),% 100 (tablet ve cep telefonu) Dönüşüm Ölçeğini Yönlendirin İmleci, modülün masaüstündeki yerine dönmesine izin verecek şekilde dönüşüm ölçeğini değiştirin.
Aşağıda:% 100
Doğru:% 100 Döndürme Dönüşüm Değerini değiştirerek varsayılan dönüşüm devam edin. Bir kez daha, modülün değerini değiştirerek daha küçük bir ekran boyutunda sağlam kaldığından emin olun.
Sağ: 59 derece (masaüstü), 0 derece (tablet ve cep telefonu)
Gezinme dönüşü dönüşü, eklediğiniz değeri ‘0deg’ ile değiştirerek yüzerken modülün yerine düşmesine izin verin. Sol: 0deg
Doğru: 0deg
Varsayılan eğimin dönüşümü de çarpık dönüşümün değerini değiştirir. Aşağıda: 22 derece (masaüstü), 0 derece (tablet ve cep telefonu)
Sağ: 22 derece (masaüstü), 0 derece (tablet ve cep telefonu)
Ortamın Dönüşümünü Yönlendirin İmleci yönlendirirken varsayılan değeri geri yükleyin. Aşağıda: 0deg
Doğru: 0 derece
Son fakat en az değil, geçiş düzenlemesindeki geçiş süresini artırın. Geçiş süresi: 500ms
Sütun 1’deki klon bulanıklık modülü dört kez ve kalan sütuna kopya yerleştirme ayarlarını tamamladıktan sonra, bulanık modülünü dört kez devam edip klonlayabilirsiniz. Kalan ve bitmiş sütuna kopya yerleştirin!
Bu öğreticideki son zihin, Divi Transform ve Hover seçeneklerini birlikte kullanmanın yaratıcı bir yolunu gösterdik. Daha spesifik olarak, daha küçük ekran boyutlarında da istenen sonuçları korurken, bir bulanıklık modülünün nasıl daha etkileşimli hale getirileceğini gösteren dört farklı örnek aldık. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
