Divi’de Fan-Out Hover efektleri ile ET#39;
Yeni Elegantthemes.com web sitesinin tasarımının harika özelliklerinden biri, daha önce Divi ürün sayfasında yapılan düzen paketinin önizlemesidir. Bu tasarımı benzersiz kılan şey, her bir düzen paketinin yüzerken yayılan üç ayrı görüntü ile nasıl görüntülenmesidir. Bugün, Divi’de etkileyici bir fan-out havuzu efekti ile düzen paketimizin bir önizleme tasarımını nasıl yeniden yaratacağınızı göstereceğiz. Tasarım biraz daha gelişmiş olduğundan, Divi’nin varsayılan tasarım seçeneği ile birlikte bazı özel CSS kullanacağız. Ama endişelenmeyin, yapım uzun sürmez ve sonuçlar kesinlikle buna değer.
Başlayalım. Aşağıdaki Sneak Peek, Hover Fan-Out efektine sahip düzen paketinin bir önizleme ekranıdır. Alt sıraya dikkat edin, görüntüyü gelişimde ayrı olarak döndüren ikincil bir havada durma etkisine sahiptir.
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? YouTube kanalımıza abone Olmaya başlamanız gereken şeylere, aşağıdaki ayarlara sahip olmanız gerekir:
Divi temaları yüklü ve aktif
Yeni sayfa baştan beri oluşturucu (görsel) ön uç divi üzerinde oluşturuldu.
Yapay içerik için kullanılacak üç resim. En iyi sonuçlar için görüntü yaklaşık 250px kat 375 piksel olmalıdır. Bu, web sayfalarının bir önizlemesi olduğundan, herhangi bir sayfa tasarımından kendi ekran görüntüleri yapabilir ve ardından uygun her görüntünün boyutunu kesebilir/değiştirebilirsiniz.
Bundan sonra, Divi’de birkaç Hover sekmesi yapmaya başlamak için boş bir tuvaliniz olacak.
Divi yapı bölümlerinde ve üç sütunlu yeni düzenli bölümler için satırlarda fan çıkışında fan-çıkış efektleri olan ET’nin düzeni paketi önizlemelerini yeniden oluşturun.
Herhangi bir modül eklemeden önce satır ayarlarını açın ve boyut ve alanı aşağıdaki gibi güncelleyin: Talang genişliği: 2
Genişlik:% 90
Maksimum genişlik: 1120 piksel (masaüstü), 400 piksel (tablet)
Ardından cep telefonunda daha fazla alan için tabletteki satıra biraz dolgu ekleyin. Sütun 1 dolgu: her ikisi de% 20 Sütun 2 dolgu:% 20 aşağıda
Sütun 3 dolgu:% 20 aşağıda
Şekil 1 Ekle Şimdi, düzen paketimizin önizleme tasarımını oluşturacak üç görüntünün ilk resmini eklemeye hazırız. Lütfen ve görüntü modülünü sütun 1’e ekleyin.
Ardından görüntüyü görüntü modülüne yükleyin (boyut yaklaşık 250px kat 375px olmalıdır). Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin: Görüntü Uygulama: Orta Genişlik: 220 piksel
Dikey taşma: gizli
Dizin Z: 4
Görüntü kabını hedeflememiz gerektiğinden (resmin kendisi değil), özel yükseklik, gölge kutuları ve özel CSS kullanarak yarıçapı sınırlamamız gerekir. Aşağıdaki CSS’yi ana öğeye ekleyin: Yükseklik: 240px;
Box-Shadow: 0 10px 70px 0 RGBA (103,151,255, .22), 0 15px 105px 0 RGBA (103,151,255, .22); Border-Radius: 9px;
Bu, daha sonra Hover efektini eklediğimizde görüntülerin görüntü kapsayıcısına ayarlanmasına izin verecektir. Şu anda görebileceğiniz gibi, 240px özel yüksekliğe sahip olduğumuz ve taşma “gizli” olarak ayarlandığından görüntü altta biraz kesildi.
İkinci bir görüntü oluşturmak için Şekil 2’yi ekleyin, sütun 1’deki ilk görüntü modülü altına yeni bir görüntü modülü ekleyin. Ardından modüle yeni bir görüntü (250×350) yükleyin.
Sonra görüntüyü arkasına ve hafifçe sola konumlandırmamız gerekir. Bunu yapmak için gizli dikey bolluk ile özel bir genişlik ve yükseklik eklememiz gerekir (Şekil 1 ile yaptığımız gibi). Buradaki temel fark, mutlak bir konum görüntüsü vermemiz gerektiğidir, böylece Şekil 1’in arkasındaki sütunun sol üstte görüntülenir. Bunu yapmak için aşağıdakileri güncelleyin: Genişlik: 180px Dikey taşma: gizli Ardından ana öğelere aşağıdaki özel CSS ekleyin:
Pozisyon: Mutlak! Önemli;
Üst: 12 piksel;
Sol: 25px;
Yükseklik: 200px;
Box-Shadow: 0 10px 70px 0 RGBA (103,151,255, .22), 0 15px 105px 0 RGBA (103,151,255, .22);
Border-Radius: 9px;
Şekil 3 Ekle Şimdi, düzen paketinin önizlemesini tamamlamak için üçüncü bir resim eklemeye hazırız. Bu noktada, çerçeve görüntü görüntüleme modunu kullanmak mantıklıdır, çünkü görsel üreticilerin kullanımını zorlaştıran örtüşmelerimiz var. Çerçeveyi ve yinelenen görüntü modu uygulayın Şekil 2.
Resmi iki katına çıkarıyoruz çünkü Şekil 2 için kullandığımız ayarların çoğunu getirmek istiyoruz. Tek fark (yeni bir görüntü dışında) görüntüyü sağa, sola değil, konumlandırmamız gerektiğidir.
Yinelenen görüntüleri açın (Şekil 3) ve görüntü modülünü yeni bir görüntü (250 × 375) ile güncelleyin. Ardından, sol konum özelliğini doğru konum özelliğine dönüştürerek özel CSS’yi güncelleyin. Gerekli CSS’de başka değişiklikler yoktur. İsterseniz, geçerli CSS’yi değiştirmek için aşağıdaki CSS’yi ana öğelere kopyalayıp ekleyebilirsiniz. Pozisyon: Mutlak! Önemli;
Box-Shadow: 0 10px 70px 0 RGBA (103,151,255, .22), 0 15px 105px 0 RGBA (103,151,255, .22); Border-Radius: 9px;
Şimdiye kadar şu ana kadar nihai sonuç var.
Tasarım aslında çok güzel, ancak yaymanın yayılma etkisi ile gelişelim.
CSS efektleri ekleme fanın yönünü yönlendirir, genellikle sadece bir resimle uğraşırsak, Varsayılan Divi seçeneğini kullanarak Hover efektini kolayca ekleyebiliriz. Ancak yayılan bu yayılma etkisi, çocuğun birkaç elemanının (resim) yüzen durumunu kullanmamızı ve aynı zamanda imleci ana sütuna yönlendirmeyi gerektirir. İmleci sütuna yönlendirirken, aşağıdakilerin resimde aşağıdaki ayarlamaları tamamlamasını istiyoruz.
İmleçi yönlendirirken düzgün bir geçiş için her görüntüye geçiş süresini ekleyin.
Şekil 1’i 180 piksel genişliğe ve 240 piksel yüksekliğe sahip olacak şekilde ayarlayın. Bu, görüntü kabının daha fazla görüntü görüntülemek için daha uzun ve daha dar büyümesine neden olacaktır. 2 ve 3’ü 160 piksel ve 220px yüksekliğe sahip olacak şekilde ayarlayın. Bu aynı zamanda görüntülerin daha fazla görüntü görüntülemek için daha uzun ve daha dar büyümesine neden olacaktır.
Şekil 2’yi saat yönünün tersine 5 derece dönecek şekilde ayarlayın ve hafifçe sola hareket edin. Bunu dönüşüm özelliğine -5 derece ekleyerek yapabiliriz: Solun konumunun özellik değerini 0’a döndürün ve ayarlayın.
Resim 3’ü saat yönünde 5 derece dönecek şekilde ayarlayın ve hafifçe sağa doğru hareket ettirin. Bunu, Dönüşüm özelliğine 5 derecelik bir değer ekleyerek yapabiliriz: 0 ila 0 olan konumun özellik değerini döndürün ve ayarlayın.
Bu Hover efekti için gerekli özel bir CSS eklemek için, görüntüleri içeren bir satıra özel bir CSS sınıfı eklememiz gerekir. Bu, yalnızca belirli satırlardaki görüntüler için özel CSS uygulamamıza izin verecektir. Satır ayarlarını açın ve aşağıdaki CSS sınıfını ekleyin.
CSS Sınıfı: Fan-Out-Images
Sayfaya özel CSS eklemek için sayfa ayarlarını açın ve Gelişmiş sekmesinin altına aşağıdaki özel CSS ekleyin. /** Geçiş süresi ve hız eğrisi **/
.fan-out-images .et_pb_image {
-Webkit-Transition: 300ms Tüm Kübik Bozier (.4,0, .2,1);
Geçiş: 300ms Tüm kübik-bozier (.4,0, .2,1);
} /** Görüntü 1’in genişliğini ve yüksekliği değiştirme **/
.fan-out-images .et_pb_column: hover .et_pb_image: ilk çocuk {
Genişlik: 160px;
Yükseklik: 240 piksel;
}
/** Görüntü 2 ve 3’ün yüksekliğini ve yüksekliği değiştirme /*/
.fan-out-images .et_pb_column: hover .et_pb_image: nth-child (2), .fan-cards .et_pb_column: hover .t_pb_image: nth-child (3) {
Genişlik: 160px;
Yükseklik: 220px;
}
/** Görüntü 2’yi saat yönünün tersine döndürün ve gelişimde sola doğru hareket et **/
.fan-out-images .et_pb_column: hover .et_pb_image: nth-child (2) {
Sol: 0;
-Webkit-Transform: Rotate (-5deg);
Dönüşüm: döndür (-5deg);
}
/** Görüntüyü 3 saat yönünde döndürün ve gelişimde sağa doğru hareket et **/
.fan-out-images .et_pb_column: hover .et_pb_image: nth-child (3) {
Sağ: 0;
-Webkit-Transform: Rotate (5deg);
Dönüşüm: döndür (5deg);
}
Her CSS parçasının üzerine her birinin ne yapıldığını hatırlatmak için bir yorum ekledim. Bitirdikten sonra. Sonuç’a bakın. Nihai sonuç
Açılış yönünün etkileri: Görüntüler 1 ve 2’yi ayrı ayrı çalma Düzen paketinin önizleme görüntüsüne başka bir katılım seviyesi eklemeye yönlendirilirken, dönüş yapabiliriz Şekil 1 ve Şekil 2, başlangıç vuruş etkisinden ayrı olarak gerçekleşir. Bu, kullanıcıların görüntülerle benzersiz bir şekilde etkileşime girmesine olanak tanır. İsterseniz resme ayrı bağlantılar veya ışık kutusu önizlemeleri bile ekleyebilirsiniz. Bunu yaptığınız yol budur. Dönüştürme özelliklerini ilk özel CSS sayfa ayarlarından alarak, imleci sütuna yönlendirirken görüntüyü oynatan iki özel CSS satırını kaldırmanız gerekir. Özel CSS sayfa ayarlarını açın ve aşağıdakileri alın: -Webkit-Transform: Rotate (-5deg); Dönüşüm: Rotate (-5deg);
-Webkit-Transform: Rotate (5deg);
Dönüşüm: döndür (5deg);
Şekil 2 için GÖSTER’e Dönüştürme Özellikleri ekleyin, ardından Şekil 2 için görüntü modülü ayarlarını açın ve daha önce silen durum için sildiğimiz aynı dönüşüm dönüş değerini eklemek için Divi Varsayılan Dönüşüm seçeneğini kullanın. Dönüştürme z ekseni (nokta imleci): -5deg Dönüşüm X eksenini çevirin (nokta imleci): -20px
Dönüştürme Özellikleri Ekle Şekil 3 için Gemiye Ekle Sonra Dönüşüm Döndürme Özelliği eklemek için Şekil 3 için görüntü modülü ayarlarını güncelleyin.
Dönüştürme z ekseni (nokta imleci): 5deg
Dönüşüm X eksenini çevirin (nokta imleci): 20px Şimdi sonucuna bakın. Nihai sonuç
Resme Bağlantılar Ekleyin Bir Düzen Paketini veya belirli bir sayfanın tasarımını ayrı bir sayfada görüntülemek için bir aktarım bağlantısı yapmak istiyorsanız, paketteki üç görüntüyle aynı bağlantıyı eklemelisiniz. Bunu yapmak için her görüntü modülünü açın ve bir bağlantı URL’si ekleyin. Yeni düzen paketinin önizlemesini başka bir sütuna ekleyin Tasarımı tamamlamak için Sütun 1’e üç görüntüyü kopyalayabilir ve bunları sütun 2 ve sütun 3’e ekleyebiliriz.
Bundan sonra, tek yapmanız gereken sütun 2 ve 3’teki her görüntüyü yenisiyle güncellemektir. İşte burada! Son Tasarım Aşağıdakiler son tasarımdır. Üst sıra, imleci sütuna yönlendirirken Hover Fan-Out Hover efektini gösterir. İkinci sıra, Şekil 2 ve 3’e ayrı ayrı eklenen ikincil fan çıkış gelişim etkisini göstermektedir. Masaüstündeki üç sütunun düzeni, tablet ve cep telefonundaki bir sütuna ayarlanır.
Hover Fan-Out efektinin son zihni, sayfa düzenini kendi web sitenizde görüntülemek için kullanabileceğiniz güzel ve çekici bir tasarım öğesidir. Özel CSS kombinasyonu ve bu öğreticide tartıştığımız varsayılan Divi ayarları mucizevi bir şekilde çalışacaktır. Ve bu ayar, divi üreticileri kullanarak daha fazla tasarım keşfetmek için iyi bir başlangıç noktası olarak işlev görecektir. Umarım, bu size portföyünüzü bir sonraki seviyeye taşımanız için ilham verir. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
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? YouTube kanalımıza abone Olmaya başlamanız gereken şeylere, aşağıdaki ayarlara sahip olmanız gerekir:
Divi temaları yüklü ve aktif
Yeni sayfa baştan beri oluşturucu (görsel) ön uç divi üzerinde oluşturuldu.
Yapay içerik için kullanılacak üç resim. En iyi sonuçlar için görüntü yaklaşık 250px kat 375 piksel olmalıdır. Bu, web sayfalarının bir önizlemesi olduğundan, herhangi bir sayfa tasarımından kendi ekran görüntüleri yapabilir ve ardından uygun her görüntünün boyutunu kesebilir/değiştirebilirsiniz.
Bundan sonra, Divi’de birkaç Hover sekmesi yapmaya başlamak için boş bir tuvaliniz olacak.
Divi yapı bölümlerinde ve üç sütunlu yeni düzenli bölümler için satırlarda fan çıkışında fan-çıkış efektleri olan ET’nin düzeni paketi önizlemelerini yeniden oluşturun.
Herhangi bir modül eklemeden önce satır ayarlarını açın ve boyut ve alanı aşağıdaki gibi güncelleyin: Talang genişliği: 2
Genişlik:% 90
Maksimum genişlik: 1120 piksel (masaüstü), 400 piksel (tablet)
Ardından cep telefonunda daha fazla alan için tabletteki satıra biraz dolgu ekleyin. Sütun 1 dolgu: her ikisi de% 20 Sütun 2 dolgu:% 20 aşağıda
Sütun 3 dolgu:% 20 aşağıda
Şekil 1 Ekle Şimdi, düzen paketimizin önizleme tasarımını oluşturacak üç görüntünün ilk resmini eklemeye hazırız. Lütfen ve görüntü modülünü sütun 1’e ekleyin.
Ardından görüntüyü görüntü modülüne yükleyin (boyut yaklaşık 250px kat 375px olmalıdır). Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin: Görüntü Uygulama: Orta Genişlik: 220 piksel
Dikey taşma: gizli
Dizin Z: 4
Görüntü kabını hedeflememiz gerektiğinden (resmin kendisi değil), özel yükseklik, gölge kutuları ve özel CSS kullanarak yarıçapı sınırlamamız gerekir. Aşağıdaki CSS’yi ana öğeye ekleyin: Yükseklik: 240px;
Box-Shadow: 0 10px 70px 0 RGBA (103,151,255, .22), 0 15px 105px 0 RGBA (103,151,255, .22); Border-Radius: 9px;
Bu, daha sonra Hover efektini eklediğimizde görüntülerin görüntü kapsayıcısına ayarlanmasına izin verecektir. Şu anda görebileceğiniz gibi, 240px özel yüksekliğe sahip olduğumuz ve taşma “gizli” olarak ayarlandığından görüntü altta biraz kesildi.
İkinci bir görüntü oluşturmak için Şekil 2’yi ekleyin, sütun 1’deki ilk görüntü modülü altına yeni bir görüntü modülü ekleyin. Ardından modüle yeni bir görüntü (250×350) yükleyin.
Sonra görüntüyü arkasına ve hafifçe sola konumlandırmamız gerekir. Bunu yapmak için gizli dikey bolluk ile özel bir genişlik ve yükseklik eklememiz gerekir (Şekil 1 ile yaptığımız gibi). Buradaki temel fark, mutlak bir konum görüntüsü vermemiz gerektiğidir, böylece Şekil 1’in arkasındaki sütunun sol üstte görüntülenir. Bunu yapmak için aşağıdakileri güncelleyin: Genişlik: 180px Dikey taşma: gizli Ardından ana öğelere aşağıdaki özel CSS ekleyin:
Pozisyon: Mutlak! Önemli;
Üst: 12 piksel;
Sol: 25px;
Yükseklik: 200px;
Box-Shadow: 0 10px 70px 0 RGBA (103,151,255, .22), 0 15px 105px 0 RGBA (103,151,255, .22);
Border-Radius: 9px;
Şekil 3 Ekle Şimdi, düzen paketinin önizlemesini tamamlamak için üçüncü bir resim eklemeye hazırız. Bu noktada, çerçeve görüntü görüntüleme modunu kullanmak mantıklıdır, çünkü görsel üreticilerin kullanımını zorlaştıran örtüşmelerimiz var. Çerçeveyi ve yinelenen görüntü modu uygulayın Şekil 2.
Resmi iki katına çıkarıyoruz çünkü Şekil 2 için kullandığımız ayarların çoğunu getirmek istiyoruz. Tek fark (yeni bir görüntü dışında) görüntüyü sağa, sola değil, konumlandırmamız gerektiğidir.
Yinelenen görüntüleri açın (Şekil 3) ve görüntü modülünü yeni bir görüntü (250 × 375) ile güncelleyin. Ardından, sol konum özelliğini doğru konum özelliğine dönüştürerek özel CSS’yi güncelleyin. Gerekli CSS’de başka değişiklikler yoktur. İsterseniz, geçerli CSS’yi değiştirmek için aşağıdaki CSS’yi ana öğelere kopyalayıp ekleyebilirsiniz. Pozisyon: Mutlak! Önemli;
Üst: 12 piksel;
Sağ: 25px;
Box-Shadow: 0 10px 70px 0 RGBA (103,151,255, .22), 0 15px 105px 0 RGBA (103,151,255, .22); Border-Radius: 9px;
Şimdiye kadar şu ana kadar nihai sonuç var.
Tasarım aslında çok güzel, ancak yaymanın yayılma etkisi ile gelişelim.
CSS efektleri ekleme fanın yönünü yönlendirir, genellikle sadece bir resimle uğraşırsak, Varsayılan Divi seçeneğini kullanarak Hover efektini kolayca ekleyebiliriz. Ancak yayılan bu yayılma etkisi, çocuğun birkaç elemanının (resim) yüzen durumunu kullanmamızı ve aynı zamanda imleci ana sütuna yönlendirmeyi gerektirir. İmleci sütuna yönlendirirken, aşağıdakilerin resimde aşağıdaki ayarlamaları tamamlamasını istiyoruz.
İmleçi yönlendirirken düzgün bir geçiş için her görüntüye geçiş süresini ekleyin.
Şekil 1’i 180 piksel genişliğe ve 240 piksel yüksekliğe sahip olacak şekilde ayarlayın. Bu, görüntü kabının daha fazla görüntü görüntülemek için daha uzun ve daha dar büyümesine neden olacaktır. 2 ve 3’ü 160 piksel ve 220px yüksekliğe sahip olacak şekilde ayarlayın. Bu aynı zamanda görüntülerin daha fazla görüntü görüntülemek için daha uzun ve daha dar büyümesine neden olacaktır.
Şekil 2’yi saat yönünün tersine 5 derece dönecek şekilde ayarlayın ve hafifçe sola hareket edin. Bunu dönüşüm özelliğine -5 derece ekleyerek yapabiliriz: Solun konumunun özellik değerini 0’a döndürün ve ayarlayın.
Resim 3’ü saat yönünde 5 derece dönecek şekilde ayarlayın ve hafifçe sağa doğru hareket ettirin. Bunu, Dönüşüm özelliğine 5 derecelik bir değer ekleyerek yapabiliriz: 0 ila 0 olan konumun özellik değerini döndürün ve ayarlayın.
Bu Hover efekti için gerekli özel bir CSS eklemek için, görüntüleri içeren bir satıra özel bir CSS sınıfı eklememiz gerekir. Bu, yalnızca belirli satırlardaki görüntüler için özel CSS uygulamamıza izin verecektir. Satır ayarlarını açın ve aşağıdaki CSS sınıfını ekleyin.
CSS Sınıfı: Fan-Out-Images
Sayfaya özel CSS eklemek için sayfa ayarlarını açın ve Gelişmiş sekmesinin altına aşağıdaki özel CSS ekleyin. /** Geçiş süresi ve hız eğrisi **/
.fan-out-images .et_pb_image {
-Webkit-Transition: 300ms Tüm Kübik Bozier (.4,0, .2,1);
Geçiş: 300ms Tüm kübik-bozier (.4,0, .2,1);
} /** Görüntü 1’in genişliğini ve yüksekliği değiştirme **/
.fan-out-images .et_pb_column: hover .et_pb_image: ilk çocuk {
Genişlik: 160px;
Yükseklik: 240 piksel;
}
/** Görüntü 2 ve 3’ün yüksekliğini ve yüksekliği değiştirme /*/
.fan-out-images .et_pb_column: hover .et_pb_image: nth-child (2), .fan-cards .et_pb_column: hover .t_pb_image: nth-child (3) {
Genişlik: 160px;
Yükseklik: 220px;
}
/** Görüntü 2’yi saat yönünün tersine döndürün ve gelişimde sola doğru hareket et **/
.fan-out-images .et_pb_column: hover .et_pb_image: nth-child (2) {
Sol: 0;
-Webkit-Transform: Rotate (-5deg);
Dönüşüm: döndür (-5deg);
}
/** Görüntüyü 3 saat yönünde döndürün ve gelişimde sağa doğru hareket et **/
.fan-out-images .et_pb_column: hover .et_pb_image: nth-child (3) {
Sağ: 0;
-Webkit-Transform: Rotate (5deg);
Dönüşüm: döndür (5deg);
}
Her CSS parçasının üzerine her birinin ne yapıldığını hatırlatmak için bir yorum ekledim. Bitirdikten sonra. Sonuç’a bakın. Nihai sonuç
Açılış yönünün etkileri: Görüntüler 1 ve 2’yi ayrı ayrı çalma Düzen paketinin önizleme görüntüsüne başka bir katılım seviyesi eklemeye yönlendirilirken, dönüş yapabiliriz Şekil 1 ve Şekil 2, başlangıç vuruş etkisinden ayrı olarak gerçekleşir. Bu, kullanıcıların görüntülerle benzersiz bir şekilde etkileşime girmesine olanak tanır. İsterseniz resme ayrı bağlantılar veya ışık kutusu önizlemeleri bile ekleyebilirsiniz. Bunu yaptığınız yol budur. Dönüştürme özelliklerini ilk özel CSS sayfa ayarlarından alarak, imleci sütuna yönlendirirken görüntüyü oynatan iki özel CSS satırını kaldırmanız gerekir. Özel CSS sayfa ayarlarını açın ve aşağıdakileri alın: -Webkit-Transform: Rotate (-5deg); Dönüşüm: Rotate (-5deg);
-Webkit-Transform: Rotate (5deg);
Dönüşüm: döndür (5deg);
Şekil 2 için GÖSTER’e Dönüştürme Özellikleri ekleyin, ardından Şekil 2 için görüntü modülü ayarlarını açın ve daha önce silen durum için sildiğimiz aynı dönüşüm dönüş değerini eklemek için Divi Varsayılan Dönüşüm seçeneğini kullanın. Dönüştürme z ekseni (nokta imleci): -5deg Dönüşüm X eksenini çevirin (nokta imleci): -20px
Dönüştürme Özellikleri Ekle Şekil 3 için Gemiye Ekle Sonra Dönüşüm Döndürme Özelliği eklemek için Şekil 3 için görüntü modülü ayarlarını güncelleyin.
Dönüştürme z ekseni (nokta imleci): 5deg
Dönüşüm X eksenini çevirin (nokta imleci): 20px Şimdi sonucuna bakın. Nihai sonuç
Resme Bağlantılar Ekleyin Bir Düzen Paketini veya belirli bir sayfanın tasarımını ayrı bir sayfada görüntülemek için bir aktarım bağlantısı yapmak istiyorsanız, paketteki üç görüntüyle aynı bağlantıyı eklemelisiniz. Bunu yapmak için her görüntü modülünü açın ve bir bağlantı URL’si ekleyin. Yeni düzen paketinin önizlemesini başka bir sütuna ekleyin Tasarımı tamamlamak için Sütun 1’e üç görüntüyü kopyalayabilir ve bunları sütun 2 ve sütun 3’e ekleyebiliriz.
Bundan sonra, tek yapmanız gereken sütun 2 ve 3’teki her görüntüyü yenisiyle güncellemektir. İşte burada! Son Tasarım Aşağıdakiler son tasarımdır. Üst sıra, imleci sütuna yönlendirirken Hover Fan-Out Hover efektini gösterir. İkinci sıra, Şekil 2 ve 3’e ayrı ayrı eklenen ikincil fan çıkış gelişim etkisini göstermektedir. Masaüstündeki üç sütunun düzeni, tablet ve cep telefonundaki bir sütuna ayarlanır.
Hover Fan-Out efektinin son zihni, sayfa düzenini kendi web sitenizde görüntülemek için kullanabileceğiniz güzel ve çekici bir tasarım öğesidir. Özel CSS kombinasyonu ve bu öğreticide tartıştığımız varsayılan Divi ayarları mucizevi bir şekilde çalışacaktır. Ve bu ayar, divi üreticileri kullanarak daha fazla tasarım keşfetmek için iyi bir başlangıç noktası olarak işlev görecektir. Umarım, bu size portföyünüzü bir sonraki seviyeye taşımanız için ilham verir. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
