Divi’de soyut yüzen etkiler için birkaç unsur nasıl değiştirilir
Şu anda bildiğiniz gibi, Divi’nin her bir divi öğesi (bölüm, çizgi veya modül) için benzersiz bir havuz efekti oluşturmanıza izin veren birçok tasarım ayarı vardır. Genellikle, sarkma etkisi sadece bir elemanda izole edilir. Örneğin, imleci yönlendirirken modüle bir dönüşüm özelliği eklerseniz, imleci modüle yönlendirirken dönme etkin olacaktır. Bununla birlikte, modülü içeren satıra ek bir havalı efekti eklerseniz, imleci modüle yönlendirirken başka bir havalı efektler katmanı ekler. Bazı benzersiz soyut havada uçma efektleri için kapıyı açar.
Bu öğreticide, Divi’nin varsayılan ayarlarını kullanarak soyut -yüzen efektler için bazı öğelerin nasıl değiştirileceğini araştıracağız. Ve bu tasarım için biraz farklı bir satır kullanacağımız için, galeride (isterseniz) bu vuruşun etkisini gösterebilmeniz için hattınız için nasıl bir kutu düzeni yapacağınızı göstereceğim. Başlayalım. Gizlice göz atma
Dosyayı indir
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Takip et ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve düzen paketine erişmek için İndir’i tıklayın. Başarılı bir şekilde abone oldunuz. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
Düzeni sayfanıza aktarmak için, ZIP dosyasını çıkarın ve JSON dosyasını Divi Builder’a sürükleyin.
Doğrudan öğreticiye mi gidiyorsunuz? Bu eğitim için YouTube kanalımıza abone olmaya başlayın, aşağıdakilere ihtiyacınız var:
Divi temaları yüklü ve aktif
Bazı fotoğraflar. Divi Builder’ın içinden erişilebilen önceden hazırlanmış düzenimizden görüntüler kullanıyorum
Hazır olduğunuzda, WordPress kontrol panelinizi açın. Ardından yeni bir sayfa oluşturun (sayfa> yeni ekle), sayfanızın başlığını verin ve Divi Builder’ı uygulayın. “Başından Uyan” seçeneğini seçin. Şimdi boş tuvaliniz bekliyor! İlk tasarım görüntüsü için soyut gelişim efektleri, fanning’in yüzerken görüntülerimiz üzerindeki etkisini oluşturmak için satır ve görüntü modülü üzerindeki Hover dönüşüm eğrisi etkisini birleştirecektir. Bu efekt, havalı görünmenin yanı sıra, kullanıcıların resimlere tıklayarak daha fazla resim göreceğinizi bilmesini sağlayan kullanışlı bir kullanıcı arayüzü etkileşimi de işlev görebilir. Böylece görüntüleri isterseniz galeri sayfanızın bağlantısı olarak kullanabilirsiniz.
İşte nasıl yapılacağı. İlk olarak, bir sütun satırı ile yeni bir düzenli bölüm oluşturun.
Ardından görüntü modülünü satıra ekleyin. Ardından, modüle yükleme ekleyin. Doğrudan Görüntü Modülünün Etkisini Ekleyin Şimdi, görüntüleri ölçeklendirecek, döndürecek ve yalın olacak görüntülere bazı dönüşümlü havada etkileri ekleyebiliriz. Bunu yapmak için aşağıdaki dönüşüm ve güncelleme seçeneklerini açın: X ve Y ekseni ölçeğinin dönüşümü:% 110 ASE Z’nin dönüşümü: 9deg X ve Y çarpım ekseninin dönüşümü: 3deg İşte burada! Oldukça kolay. Şimdi, imleci öğeye yönlendirirken aktif olacak diğer havalı efektler eklemek için çizgiyi ayarlamamız gerekiyor. Bu tasarım için satır ayarı çalışıyor, satırdaki resim ile aynı boyutta olmalıdır, böylece havada seri alanı her ikisi için de aynı olacak. Bu, imleci modüle (veya bu durumda resme) yönlendirirken aktif olacak modüllere ve satırlara farklı vites etkileri eklememizi sağlayacaktır. Bu işlev görür, çünkü imleci sıradaki modüle yönlendirir, imlecin etkisini imleci hatta yönlendirdiğiniz gibi etkinleştirecektir. Ve, modül üzerinde farklı bir havada farklı bir etkimiz olduğu için, imleci modüle yönlendirirken her iki vuruş efektleri de etkin olacaktır. Bu, bir kutu gölgesi, eğim dönüşümü ve sıralar ve modüllere dönüş dönüşümünü kullanarak soyut havuz efektlerinin bir kombinasyonunu kullanmamızı sağlar. Çizimlerimiz için zaten bir kayma modül efektimiz var, şimdi hatlarımızın boyutunu ayarlamamız gerekiyor. Görüntünün boyutuna bağlı olarak, modül, teknik olarak satırın genişliğini ayarlamaya gerek kalmayacak şekilde tam genişliği kapsamalıdır. Ancak bu örnek için, zammızın etkileri için yer vermek için çizgileri küçülteceğim. Satır ayarlarını aşağıdaki gibi güncelleyin: Maksimum genişlik: 400 piksel, satırlarımızın yüksekliğinin görüntüye uymasını istediğimiz için, üst ve alt dolguyu kaldırmamız gerekiyor Varsayılan: Özel Dolgu: 0px üst, 0px Aşağıda Arka plan eklememiz gerekir Row sütununa görüntüler. Bu arka plan görüntüsü, görüntü modülü eğimli ve dönen havada kayma etkisini her değiştirdiğinde görülecektir.
Sütun 1 Arka Plan Görüntü: [Görüntüyü girin]
Sırayı aşağıdaki gibi görünen kutunun gölgesiyle güncellemeye devam et: Gölge Kutusu: Ekrana bakın Yatay Konum Gölge Kutusu: 0px (varsayılan), -30px (nokta imleç) Dikey konum Gölge Kutusu: 0PX (varsayılan), – 15px (nokta imleç) Gölge Renk: #002F66 Bu kutunun gölgesi, arka plan görüntüsünün arkasında görünen, dönüşümün arka plan görüntülerini görünüme döndürecek ve eğilecek ve eğilecek şekilde görünecek başka bir görüntü efekti ekler. Son olarak, satırlara ek havada uçma efektleri eklemek için çarpık bir dönüşüm özelliği eklemeye hazırız.
Yır çarpması x ve y ekseninin dönüşümü: -3deg Buradaki nihai sonuç nihai sonuçtur. Ve hücreselde de iyi ölçekli olacak.
Bir satır sütunu ile yeni normal bölümler için satırlar ayarlamak için (Örnek 1) harekete geçecek davetiyeler için özet gelişim efektleri. Daha sonra satır ayarlarını aşağıdaki gibi güncelleyin: Sütun 1 Arka Plan Sol Renk Gradyanı: RGBA (34,43,58,0.71) Sütun 1 Sağ Renk Arka Plan Gradyan: #222B3A Arka Plan Görüntü: [Görüntü Enter] Maksimum genişlik: 400px dolgu özel: 0px üst , 0px Aşağıda Soyut Hover efektlerimizi biraz tamamlamak için satır ayarlarına geri döneceğiz, ancak şimdilik satıra eylem modülüne bir çağrı ekleyelim.
Düzeni sayfanıza aktarmak için, ZIP dosyasını çıkarın ve JSON dosyasını Divi Builder’a sürükleyin.
Doğrudan öğreticiye mi gidiyorsunuz? Bu eğitim için YouTube kanalımıza abone olmaya başlayın, aşağıdakilere ihtiyacınız var:
Divi temaları yüklü ve aktif
Bazı fotoğraflar. Divi Builder’ın içinden erişilebilen önceden hazırlanmış düzenimizden görüntüler kullanıyorum
Hazır olduğunuzda, WordPress kontrol panelinizi açın. Ardından yeni bir sayfa oluşturun (sayfa> yeni ekle), sayfanızın başlığını verin ve Divi Builder’ı uygulayın. “Başından Uyan” seçeneğini seçin. Şimdi boş tuvaliniz bekliyor! İlk tasarım görüntüsü için soyut gelişim efektleri, fanning’in yüzerken görüntülerimiz üzerindeki etkisini oluşturmak için satır ve görüntü modülü üzerindeki Hover dönüşüm eğrisi etkisini birleştirecektir. Bu efekt, havalı görünmenin yanı sıra, kullanıcıların resimlere tıklayarak daha fazla resim göreceğinizi bilmesini sağlayan kullanışlı bir kullanıcı arayüzü etkileşimi de işlev görebilir. Böylece görüntüleri isterseniz galeri sayfanızın bağlantısı olarak kullanabilirsiniz.
İşte nasıl yapılacağı. İlk olarak, bir sütun satırı ile yeni bir düzenli bölüm oluşturun.
Ardından görüntü modülünü satıra ekleyin. Ardından, modüle yükleme ekleyin. Doğrudan Görüntü Modülünün Etkisini Ekleyin Şimdi, görüntüleri ölçeklendirecek, döndürecek ve yalın olacak görüntülere bazı dönüşümlü havada etkileri ekleyebiliriz. Bunu yapmak için aşağıdaki dönüşüm ve güncelleme seçeneklerini açın: X ve Y ekseni ölçeğinin dönüşümü:% 110 ASE Z’nin dönüşümü: 9deg X ve Y çarpım ekseninin dönüşümü: 3deg İşte burada! Oldukça kolay. Şimdi, imleci öğeye yönlendirirken aktif olacak diğer havalı efektler eklemek için çizgiyi ayarlamamız gerekiyor. Bu tasarım için satır ayarı çalışıyor, satırdaki resim ile aynı boyutta olmalıdır, böylece havada seri alanı her ikisi için de aynı olacak. Bu, imleci modüle (veya bu durumda resme) yönlendirirken aktif olacak modüllere ve satırlara farklı vites etkileri eklememizi sağlayacaktır. Bu işlev görür, çünkü imleci sıradaki modüle yönlendirir, imlecin etkisini imleci hatta yönlendirdiğiniz gibi etkinleştirecektir. Ve, modül üzerinde farklı bir havada farklı bir etkimiz olduğu için, imleci modüle yönlendirirken her iki vuruş efektleri de etkin olacaktır. Bu, bir kutu gölgesi, eğim dönüşümü ve sıralar ve modüllere dönüş dönüşümünü kullanarak soyut havuz efektlerinin bir kombinasyonunu kullanmamızı sağlar. Çizimlerimiz için zaten bir kayma modül efektimiz var, şimdi hatlarımızın boyutunu ayarlamamız gerekiyor. Görüntünün boyutuna bağlı olarak, modül, teknik olarak satırın genişliğini ayarlamaya gerek kalmayacak şekilde tam genişliği kapsamalıdır. Ancak bu örnek için, zammızın etkileri için yer vermek için çizgileri küçülteceğim. Satır ayarlarını aşağıdaki gibi güncelleyin: Maksimum genişlik: 400 piksel, satırlarımızın yüksekliğinin görüntüye uymasını istediğimiz için, üst ve alt dolguyu kaldırmamız gerekiyor Varsayılan: Özel Dolgu: 0px üst, 0px Aşağıda Arka plan eklememiz gerekir Row sütununa görüntüler. Bu arka plan görüntüsü, görüntü modülü eğimli ve dönen havada kayma etkisini her değiştirdiğinde görülecektir.
Sütun 1 Arka Plan Görüntü: [Görüntüyü girin]
Sırayı aşağıdaki gibi görünen kutunun gölgesiyle güncellemeye devam et: Gölge Kutusu: Ekrana bakın Yatay Konum Gölge Kutusu: 0px (varsayılan), -30px (nokta imleç) Dikey konum Gölge Kutusu: 0PX (varsayılan), – 15px (nokta imleç) Gölge Renk: #002F66 Bu kutunun gölgesi, arka plan görüntüsünün arkasında görünen, dönüşümün arka plan görüntülerini görünüme döndürecek ve eğilecek ve eğilecek şekilde görünecek başka bir görüntü efekti ekler. Son olarak, satırlara ek havada uçma efektleri eklemek için çarpık bir dönüşüm özelliği eklemeye hazırız.
Yır çarpması x ve y ekseninin dönüşümü: -3deg Buradaki nihai sonuç nihai sonuçtur. Ve hücreselde de iyi ölçekli olacak.
Bir satır sütunu ile yeni normal bölümler için satırlar ayarlamak için (Örnek 1) harekete geçecek davetiyeler için özet gelişim efektleri. Daha sonra satır ayarlarını aşağıdaki gibi güncelleyin: Sütun 1 Arka Plan Sol Renk Gradyanı: RGBA (34,43,58,0.71) Sütun 1 Sağ Renk Arka Plan Gradyan: #222B3A Arka Plan Görüntü: [Görüntü Enter] Maksimum genişlik: 400px dolgu özel: 0px üst , 0px Aşağıda Soyut Hover efektlerimizi biraz tamamlamak için satır ayarlarına geri döneceğiz, ancak şimdilik satıra eylem modülüne bir çağrı ekleyelim.
Davet Modülünü Ayarla Davetiyenin Ayarlarını Açma İçeriği aşağıdaki gibi harekete geçirmek ve güncellemek için: Başlık: Metin Noktaları ile Seyahat Düğmesi: Buraya Tıklayın İçerik: Yalnızca sınırlı süreli URL bağlantısı Anahtarı: # (Yalnızca yalnızca sınırlı zaman için düğmeyi etkinleştirmek için şimdi) arka plan rengini kullanın: hayır
Ardından metin ve modül boşlukları için tasarım ayarlarını güncelleyin. Yazı Tipi Başlık: Yalnız Boyut Metin Anahtar Düğmesi: 16px Metin Renk Düğmesi: #FFB238 Renk Arka Plan Anahtar Düğmesi: RGBA (0.0,0,0) Genişlik Düğmesi Sınırı Sınırı: 0PX Dolgu Özel:% 20 Üst,% 20 Aşağıda Şimdi kenarlığı modüle ekleyin. Sınır Genişliği: 2px Renk Sınır: #222B3A Bu, varsayılan tasarımımızı işler. Şimdi eğlenceli bir parça zamanı. Unutmayın, çizgilerimiz ve modüllerimiz temelde aynı boyutta (yükseklik ve genişlik) olduğu için, sarkma alanı her ikisi için de aynı olacaktır. Başka bir deyişle, imleci öğeye yönlendirirken çizgiye ve modülüne eklediğimiz sarkma etkisi etkin olacaktır. Bu, bir kutu gölgesi, eğim dönüşümü ve sıralar ve modüllere dönüş dönüşümünü kullanarak soyut havuz efektlerinin bir kombinasyonunu kullanmamızı sağlar. Satırın gelişim etkisi ile başlayalım. İlk satır yönünü yönlendirmenin etkisi, gelgitte bir gölgenin gölgesini satırımıza ekleyebiliriz. Aşağıdaki satır ve güncelleme ayarlarını açın: Gölge Kutusu: Ekrana Bkz. Yatay Konum Gölge Kutusu: 0px (varsayılan), 90px (nokta imleç) Dikey konum Gölge Kutusu: 0px (varsayılan), 80px (nokta imleç) Gölge kutusunun gücü: Gölge kutusunun gücü: 0px (varsayılan), -40px (nokta imleç) Gölge Rengi: #FFB238 Kutunun gölgesinin bir sonraki ekleyeceğimiz dönüşüm seçeneğini de devralacağını unutmayın. Şimdi dönme özelliğini ve dönüşüm eğriliğini vurmaya ekleyelim. X -eksen dönerinin dönüşümü (imleci nokta): 10 eğrilik çarpık müzayede dönüşümü (İmleç Gezin: -4deg Dönüşümü Yetiştirme eğrimi (nokta imleç): -4deg Hover sıralarının etkisini işler. Şimdi, tasarımı tamamlayacak Eylem Çağrı modülüne Hover efektini eklememiz gerekiyor. Efektler Davet modülünü harekete geçirmeye yönlendirin Davet modülünün ayarlarını açın ve kutunun gölgesinin etkisini aşağıdaki gibi verin: Gölge Kutusu: Ekrana Bkz. Yatay konum Gölge Kutusu: 0px Dikey Konum Gölge Kutusu: 0px (varsayılan),,. 30px (nokta imleç) Renk Gölgesi: # ffffff Son olarak, ölçek ekleyin, döndürün ve eğri özelliklerini vurguya aşağıdaki gibi dönüştürün: Dönüşüm Ölçeği X ve Y ekseni (Hover): Z ekseninin% 115 dönüşümü (İmleci Noktalı): X şiş ekseninin 9deg dönüşümü (noktanın 9deg dönüşümü İmleç): 3deg dönüşümü y ekseni y eğik (imleci işaret): 3deg, imleci yönlendirirken bir ölçeği kullanarak modül boyutunu arttırma İmleçleri modül değil çizgi öğesine yönlendirme olasılığını en aza indirmeye yardımcı olacaktır. Soyut ve Hover modülü efektinin sarkma etkilerinin, soyut tasarım için yağsız öğelere nasıl etkinleştirildiğine dikkat edin. Cep telefonu üzerindeki gelişim etkisi gibi görünecek olan budur. Bununla birlikte, çoğu hücresel tarayıcının yüzen efekti etkinleştirmek için bir vuruşa ihtiyaç duyduğundan, modülü bağlantı olarak kullanırsanız kullanıcıların iki kez vurulmasını önlemek için hücresel yüzeysel efektleri devre dışı bırakmak isteyebilirsiniz. Soyut Hover Etkileri (Örnek 2) Bir sonraki soyut -yüzen etki ile tasarımı başlatmak için, ilk örneğimizi içeren parçayı iki katına çıkaralım. Şimdi yapmamız gereken, benzersiz tasarımlar için Hover’ın tasarımı ve etkisi konusunda bazı küçük ayarlamalar yapmak. İlk satır ayarlarını güncelleyin, satır ayarlarını aşağıdaki gibi güncelleyin: z ekseni dönerinin dönüşümü: -5deg x ve y ekseninin dönüşümü: -4deg Güncelleme Modülü Ayarlar Şimdi harekete geçme Davetiyesi Modül ayarlarını aşağıdaki gibi değiştirelim: İlk olarak, kenarlığı kaldırın … Sınır Genişliği: 0px Ardından kutunun gölgesini aşağıdaki gibi güncelleyin: Yatay Gölge Kutusu Konumu: 0px Dikey Konum Gölge Kutusu: 110px (Çoğalttığınız önceki tasarımdan miras alınan havza efektlerini emin olun ve devre dışı bırakın) Gölge Rengi: #FFB238 Şimdi efekti güncelleyebiliriz Dönüşüm mülkiyetimizin yanması. Burada temel olarak küçük bir ölçeği azaltıyoruz ve yüzerken zıt yönde elementleri taşımak için önceki dönme ve dönüşüm dönüşüm özelliklerine negatif değerler ekliyoruz. Aşağıdaki dönüşüm seçeneklerini güncelleyin: Dönüşüm Ölçeği X ve Y ekseni (Hover):% 110 Dönüştürme Döndürme Z Ekseni (Doğrudan İmleç): -9 Çöp Dönüşümü X Sarkı (nokta imleç): -3deg eğim (nokta imleç): – 3deg Satırınız için bir kutu düzeni yapın, bu tasarım modülü sarmak için bir üst hat gerektirdiğinden ve aynı yüksekliğe ve genişliğe sahip, gerçekten sütun düzenini her zamanki gibi yapma yeteneğine sahip değilsiniz, ancak Flex özelliğini kullanabilirsiniz. Hattınızı ızgara düzeninde hizalayın. Bunu yapmak için, bir kısımda üç satırınız olması için modülünüzü birkaç kez içeren ilk olarak yinelenen satırlar. Ardından her satıra özel bir marj ekleyin: özel kenar boşluğu: 50px üst, 50px aşağıda, bölüm ayarlarını açın ve sadece aşağıdaki özel CSS’yi ana öğeye ekleyin. Ekran: Flex; Flex-Wrap: sar; Artık tarayıcı boyutunuza yanıt verecek üç satır sütunu var.