Divi'de Fan-Out Hover Efektleri ile ET'nin Düzen Paketi Önizlemelerini Yeniden Oluşturma

Elegantthemes.com'un yeni web sitesi tasarımının harika özelliklerinden biri, Divi ürün sayfasında önceden hazırlanmış düzen paketi önizlemeleridir. Bu tasarımı benzersiz kılan şey, her bir düzen paketinin, üzerine gelindiğinde yayılan üç ayrı görüntüyle nasıl öne çıkarıldığıdır.

Bugün size, Divi'deki aynı etkileyici yayma vurgulu efektiyle mizanpaj paketi önizlemelerimizin tasarımını nasıl yeniden oluşturacağınızı göstereceğiz. Tasarım biraz daha gelişmiş olduğu için Divi'nin yerleşik tasarım seçenekleriyle birlikte bazı özel CSS kullanacağız. Ama merak etmeyin, yapımı uzun sürmeyecek ve sonuç kesinlikle buna değer.

Başlayalım.

Gizlice Bakış

Burada, bir yaylanma vurgulu efektli mizanpaj paketi önizlemelerine bir göz atın. Alt satırın, fareyle üzerine gelindiğinde görüntüleri ayrı ayrı döndüren ikincil bir vurgulu efekti olduğuna dikkat edin.

Masaüstündeki üç sütun düzeni, tablet ve telefonda bir sütuna ayarlanacaktır.

Düzen Paketi Önizleme Fan-Out Hover Efekt Düzenini ÜCRETSİZ olarak indirin

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.

Dosyaları İndirin

Ü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.

İNDİRMEK

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?

Youtube Kanalımıza Abone Olun

Başlamak için Gerekenler

Başlamak için aşağıdaki kuruluma sahip olmanız gerekir:

1. Divi Teması yüklü ve etkin
2. Divi'nin ön uç (görsel) oluşturucusunda sıfırdan oluşturmak için oluşturulan yeni bir sayfa.
3. Sahte içerik için kullanılacak üç resim. En iyi sonuçlar için resimler yaklaşık 250 piksele 375 piksel olmalıdır. Bunlar web sayfalarının önizlemeleri olduğundan, herhangi bir sayfa tasarımının kendi ekran görüntülerini oluşturabilir ve ardından her görüntüyü buna göre kırpabilir/yeniden boyutlandırabilirsiniz.

Bundan sonra, Divi'de bazı vurgulu sekmeler oluşturmaya başlamak için boş bir tuvaliniz olacak.

Divi'de Fan-Out Hover Efektleri ile ET'nin Düzen Paketi Önizlemelerini Yeniden Oluşturma

Bölüm ve Satırı Oluşturma

Üç sütunlu bir satırla yeni bir normal bölüm oluşturun.

Herhangi bir modül eklemeden önce, satır ayarlarını açın ve boyut ve aralığı aşağıdaki gibi güncelleyin:

• Oluk Genişliği: 2
• Genişlik: %90
• Maksimum Genişlik: 1120 piksel (masaüstü), 400 piksel (tablet)

Ardından, mobil cihazlarda daha fazla boşluk bırakmak için tablette satıra biraz dolgu ekleyin.

• Sütun 1 Dolgusu: %20 alt
• Sütun 2 Dolgusu: %20 alt
• Sütun 3 Dolgusu: %20 alt

Resim Ekleme 1

Şimdi, mizanpaj paketi önizleme tasarımımızı oluşturacak üç resimden ilkini eklemeye hazırız. Devam edin ve sütun 1'e bir görüntü modülü ekleyin.

Ardından görüntüyü görüntü modülüne yükleyin (boyut olarak yaklaşık 250 piksele 375 piksel olmalıdır).

Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin:

• Görüntü Hizalama: merkez
• Genişlik: 220 piksel
• Dikey Taşma: gizli
• Z indeksi: 4

Görüntü kapsayıcısını (görüntünün kendisini değil) hedeflememiz gerektiğinden, özel CSS kullanarak özel bir yükseklik, kutu gölgesi ve kenarlık yarıçapı eklememiz gerekir. Ana Öğeye aşağıdaki CSS'yi ekleyin:

height: 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 üzerine gelme efektini eklediğimizde görüntünün, görüntü kabının ile ayarlanmasını sağlar. Şimdi görebileceğiniz gibi, 240 piksellik özel bir yüksekliğe sahip olduğumuz ve taşma "gizli" olarak ayarlandığı için görüntünün alt kısmı hafifçe kesilmiştir.

Resim 2 Ekleme

İkinci görüntüyü oluşturmak için 1. sütundaki ilk görüntü modülünün altına yeni bir görüntü modülü ekleyin. Ardından modüle yeni bir görüntü (250X350) yükleyin.

Daha sonra resmi resim 1'in arkasına ve biraz soluna yerleştirmemiz gerekiyor. Bunu yapmak için dikey taşma gizli olacak şekilde özel bir genişlik ve yükseklik eklememiz gerekecek (1. resimde yaptığımız gibi). Buradaki temel fark, görüntü 1'in arkasındaki sütunun sol üst köşesinde görüntülenmesi için görüntüye mutlak bir konum vermemiz gerektiğidir.

Bunu yapmak için aşağıdakileri güncelleyin:

• Genişlik: 180 piksel
• Dikey Taşma: gizli

Ardından aşağıdaki özel CSS'yi Ana Öğeye ekleyin:

position: absolute !important;
top: 12px;
left: 25px;
height: 200px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

Resim 3 Ekleme

Şimdi, yerleşim paketi önizlemesini tamamlamak için üçüncü resmi eklemeye hazırız. Bu noktada, görsel oluşturucuyu kullanmayı zorlaştıran bazı örtüşmelere sahip olduğumuz için tel kafes görüntüleme modunu kullanmak mantıklıdır. Tel kafes modunu dağıtın ve görüntüyü çoğaltın 2.

Görüntüyü çoğalttık çünkü görüntü 2 için kullandığımız ayarların çoğunu taşımak istiyoruz. Tek fark (yeni bir görüntü dışında) görüntüyü sol yerine sağa konumlandırmamız gerektiğidir.

Çoğaltılan görüntüyü açın (resim 3) ve görüntü modülünü yeni bir görüntü (250×375) ile güncelleyin.

Ardından, left konum özelliğini bir right konum özelliğiyle değiştirerek özel CSS'yi güncelleyin. CSS'de başka bir değişiklik gerekli değildir.

İsterseniz, mevcut CSS'yi değiştirmek için aşağıdaki CSS'yi Ana Öğeye kopyalayıp yapıştırabilirsiniz.

position: absolute !important;
top: 12px;
right: 25px;
height: 200px;
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, çok iyi

İşte şimdiye kadarki nihai sonuç.

Tasarım aslında olduğu gibi gerçekten güzel, ama haydi bir fan-out vurgulu efekti ile bir çentik atalım.

Fan-Out Hover Efekti CSS'sini Ekleme

Normalde, yalnızca bir görüntüyle uğraşıyor olsaydık, yerleşik Divi seçeneklerini kullanarak vurgulu efektleri kolayca ekleyebilirdik. Ancak bu yayma vurgulu efekti, üst sütunun üzerine gelirken birden çok alt öğenin (görüntü) vurgulu durumunu aynı anda devreye sokmamızı gerektirir. Fareyle sütunun üzerine gelindiğinde, aşağıdakilerin resimlerde aşağıdaki ayarlamaları gerçekleştirmesini istiyoruz.

1. Fareyle üzerine gelindiğinde yumuşak bir geçiş için her görüntüye bir geçiş süresi ekleyin.
2. Görüntü 1'i 180 piksel genişliğe ve 240 piksel yüksekliğe sahip olacak şekilde ayarlayın. Bu, görüntünün daha fazlasını göstermek için görüntü kabının daha uzun ve daha dar olmasına neden olur.
3. Görüntü 2 ve 3'ü 160 piksel genişliğe ve 220 piksel yüksekliğe sahip olacak şekilde ayarlayın. Bu aynı zamanda görüntünün daha fazla görünmesi için görüntülerin daha uzun ve daha dar olmasına neden olur.
4. Resim 2'yi saat yönünün tersine 5 derece döndürecek ve hafifçe sola hareket ettirecek şekilde ayarlayın. Bunu transform:rotate özelliğine -5 derecelik bir değer ekleyerek ve left position özelliğinin değerini 0'a ayarlayarak yapabiliriz.
5. Resim 3'ü saat yönünde 5 derece döndürecek ve hafifçe sağa hareket edecek şekilde ayarlayın. Bunu transform:rotate özelliğine 5 derecelik bir değer ekleyerek ve right position özelliğinin değerini 0'a ayarlayarak yapabiliriz.

Bu vurgulu efektler için gereken özel CSS'yi eklemek için görüntüleri içeren satıra özel bir CSS sınıfı eklememiz gerekiyor. Bu, özel CSS'yi yalnızca belirli bir satırdaki resimlere uygulamamıza izin verecektir.

Satır ayarlarını açın ve aşağıdaki CSS Sınıfını ekleyin.

• CSS Sınıfı: yayma görüntüleri

Sayfaya özel CSS eklemek için sayfa ayarlarını açın ve Gelişmiş sekmesinin altına aşağıdaki Özel CSS'yi ekleyin.

/**transition duration and speed curve**/
.fan-out-images .et_pb_image {
  -webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
  transition: 300ms all cubic-bezier(.4,0,.2,1);
}
/**Change width and height of image 1 on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:first-child {
  width: 160px;
  height: 240px;
}
/**Change width and height of image 2 and 3 on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(2), .fan-cards .et_pb_column:hover .et_pb_image:nth-child(3) {
  width: 160px;
  height: 220px;
}
/**Rotate image 2 counterclockwise and move to the left on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(2) {
  left: 0;
  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);
}
/**Rotate image 3 clockwise and move to the right on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(3) {
  right: 0;
  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);
}

Her birinin ne yaptığını size hatırlatmak için her css parçacığının üstüne bir yorum ekledim.

Bir kez işiniz bitti. Nihai sonucu kontrol edin.

Son sonuç

İsteğe Bağlı Vurgulu Efekt: Görüntü 1 ve 2'yi Vurgulu Üzerinde Ayrı Ayrı Döndürme

Düzen paketi önizleme görüntülerine başka bir etkileşim düzeyi eklemek için, görüntü 1 ve görüntü 2'nin dönüşünün ilk vurgulu efektinden ayrı olmasını sağlayabiliriz. Bu, kullanıcının görüntülerle benzersiz bir şekilde etkileşime girmesine izin verecektir. İsterseniz bu görüntülere ayrı bağlantılar veya ışık kutusu önizlemeleri bile ekleyebilirsiniz.

İşte bunu nasıl yapacağınız.

Sayfa Ayarları Özel CSS'sinden Dönüştürme Özelliklerini Çıkarma

İlk olarak, sütunun üzerine geldiğinizde görüntüyü döndüren iki özel CSS satırını çıkarmanız gerekir. Sayfa ayarları özel CSS'sini açın ve aşağıdakileri çıkarın:

  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);

  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);

Resim 2 için Fareyle Üzerine Geldiğinde Dönüştürme Özellikleri Ekleme

Ardından, görüntü 2 için görüntü modülü ayarlarını açın ve vurgulu durumu için daha önce sildiğimiz aynı dönüştürme döndürme değerini eklemek için Divi'nin yerleşik dönüştürme seçeneklerini kullanın.

• Dönüştür Döndür Z Ekseni (vurgulu): -5 derece
• Dönüştür X eksenini çevir (fareyle üzerine gelin): -20 piksel

Resim 3 için Fareyle Üzerine Geldiğinde Dönüştürme Özellikleri Ekleme

Ardından, transform döndürme özelliğini eklemek için görüntü 3 için görüntü modülü ayarlarını güncelleyin.

• Dönüştür Döndür Z Ekseni (vurgulu): 5deg
• Dönüştür X eksenini çevir (fareyle üzerine gelin): 20 piksel

Şimdi nihai sonucu kontrol edin.

Son sonuç

Resimlere Bağlantı Ekleme

Belirli bir düzen paketini veya sayfa tasarımını ayrı bir sayfada sergilemek için yeniden yönlendirme bağlantıları oluşturmak istiyorsanız, paketteki üç görüntünün tümüne aynı Bağlantı URL'sini eklemek en iyisidir. Bunu yapmak için, görüntü modüllerinin her birini açın ve bağlantı URL'sini ekleyin.

Diğer Sütunlara yeni Düzen Paketi Önizlemeleri Ekleme

Tasarımı bitirmek için 1. sütundaki üç resmi kopyalayıp 2. ve 3. sütuna yapıştırabiliriz.

Bundan sonra tek yapmanız gereken 2. ve 3. sütundaki resimlerin her birini yenileriyle güncellemek.

Bu kadar!

Son tasarım

İşte son tasarım. En üstteki satır, fareyle sütunun üzerine gelindiğinde fareyle üzerine gelindiğinde yayılma yayma efektini gösterir. İkinci satır, resim 2 ve 3'e ayrı ayrı eklenen ikincil yayma vurgulu efektini gösterir.

Masaüstündeki üç sütun düzeni, tablet ve telefonda bir sütuna ayarlanacaktır.

Son düşünceler

Yayılma vurgulu efekti, kendi web sitenizde sayfa düzenlerini öne çıkarmak için kullanabileceğiniz güzel ve ilgi çekici bir tasarım öğesidir. Bu eğitimde ele aldığımız özel CSS ve yerleşik Divi ayarlarının kombinasyonu sihirli bir şekilde çalışacaktır. Ve bu kurulum, Divi oluşturucuyu kullanarak daha fazla tasarımı keşfetmek için harika bir başlangıç ​​noktası görevi görecek. Umarım, bu size portföyünüzü bir sonraki seviyeye taşımak için biraz ilham verir.

Yorumlarda sizden haber bekliyorum.

Şerefe!