Divi'de Özel Görüntü Bindirmeleri Nasıl Tasarlanır

Web tasarımında görüntü bindirmeleri uzun süredir var. Görüntünün üzerine gelindiğinde ek içerik ve tasarım öğelerini ortaya çıkararak ziyaretçilerin ilgisini çekmek için harikadırlar. Bu çok popüler bir tasarım özelliği olduğundan, görüntü bindirmeleri oluşturmaya adanmış birçok eklenti var. Bununla birlikte, eklentiye bağlı olarak, oldukça sınırlayıcı olabilirler veya ihtiyaç duyabileceğiniz şeyler için biraz abartılı olabilirler. Bu nedenle, bunları Divi'de kendiniz inşa etmek için gereken bilgi birikimine sahip olmak yardımcı olur.

Bu eğitimde, size Divi'de nasıl özel görüntü bindirmeleri tasarlayacağınızı göstereceğiz. Bu bindirmeler, görüntünün üzerine gelindiğinde öğeleri değiştirecek ve ortaya çıkaracaktır. En iyi yanı, Divi'nin yerleşik tasarım seçeneklerini kullanarak görüntü bindirmelerinizin tasarımı üzerinde tam kontrole sahip olmanızdır. Ayrıca, birkaç özel CSS parçacığıyla, sitenizi bir sonraki düzeye taşımak için muhteşem görüntü katmanlarına sahip olabilirsiniz. Hiçbir eklenti gerekli değildir.

Başlayalım!

Gizlice Bakış

İşte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış.

Divi Görüntü Bindirmeleri 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!

Bölüm düzenini Divi Kitaplığınıza aktarmak için Divi Kitaplığına gidin.

İçe Aktar düğmesini tıklayın.

Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin.

Ardından içe aktar düğmesini tıklayın.

Tamamlandığında, bölüm düzeni Divi Builder'da mevcut olacaktır.

Hadi öğreticiye geçelim, olur mu?

Başlamak için Gerekenler

Başlamak için aşağıdakileri yapmanız gerekir:

1. Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
2. WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
3. “Sıfırdan Oluştur” seçeneğini seçin.

Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.

Divi'de Özel Görüntü Bindirmeleri Oluşturma

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

Başlamak için varsayılan bölümün içinde üç sütunlu bir satır oluşturun.

Bölüm ayarlarını açın ve aşağıdaki arka plan rengini ekleyin:

• Arka Plan Rengi: #3a0ca3

Ardından, 1. sütun için ayarları açın ve aşağıdakileri güncelleyin:

• CSS Sınıfı: et-overlay-container
• Yatay Taşma: Gizli
• Dikey Taşma: Gizli

Oluşturacağımız bindirme öğelerinin vurgulu etkilerini tetiklemek için CSS Sınıfı gereklidir. Görüntüyü sütun kabının ötesine ölçeklendiren bir vurgulu efektimiz olacağından, gizli taşma gereklidir.

Resmi Ekleme

Bölüm, satır ve sütun hazır olduğuna göre, devam edin ve sütun 1'e yeni bir görüntü modülü ekleyin. Bu, kaplama tasarımlarımızın arkasındaki ana görüntü olacaktır.

Manzaradan çok portre olan bir resim yükleyin. Yaklaşık 800 piksele 1050 piksel olan bir tane kullanıyorum. Tüm tarayıcı boyutlarında sütunun tüm genişliğini kaplayacak kadar geniş olduğundan emin olun.

(NOT: Manzara resimleri kullanabilirsiniz ancak örtüşmemeleri için kaplama öğelerinin konumlarını buna göre ayarlamanız gerekebilir.)

Tasarım sekmesi altında aşağıdakileri güncelleyin:

• Kenar boşluğu: 0 piksel alt

Gelişmiş sekmesinin altına aşağıdaki CSS Sınıfını ekleyin:

• CSS Sınıfı: et-overlay-image

Bölücü Modül Kullanarak Görüntü Bindirme Rengini Ekleme

Görüntü bindirme rengini oluşturmak için bir ayırıcı modül kullanacağız. Buradaki fikir, ayırıcının sütunun tam yüksekliğine ve genişliğine yayılmasını sağlayarak görüntünün üzerine mükemmel bir şekilde oturması için görüntünün üzerinde bir kapak oluşturmaktır. Pozisyona girdikten sonra, istediğimiz kaplama rengini elde etmek için bölücü modülün arka plan rengini ayarlayabilirsiniz.

İlk önce görüntünün altına bir ayırıcı modül ekleyin.

Ardından, ayırıcıyı görüntünün üstüne oturacak şekilde mutlak olarak konumlandırın:

• Pozisyon: Mutlak

İçerik sekmesi altında aşağıdakileri güncelleyin:

• Bölücüyü Göster: HAYIR
• Arka Plan Rengi: rgba(247,37,133,0.8)

Ardından bölücünün yüksekliğini ve genişliğini güncelleyin:

• Genişlik: %100
• Yükseklik: %100

Tasarım yerleştirildikten sonra, ayırıcıya aşağıdaki CSS Sınıfını ekleyin:

• et-bindirme-öğesi

(NOT: Bu sınıf, yalnızca üzerine gelindiğinde göstermek istediğiniz tüm kaplama tasarım öğelerine eklenmelidir. Öğenin başlangıçta gizlenmesini istemiyorsanız, dışarıda bırakın.)

Tasarım öğelerini/modüllerini takip etmeye yardımcı olmak için katmanlar modunu açın ve bölücü modülü etiketleyin (“overlay color”).

Bindirme Başlık Metni Ekleme

Ayırıcı modülün altına yeni bir metin modülü ekleyin. Bu, fareyle üzerine gelindiğinde görüntünün üstünde görünecek olan bindirme başlık metnimiz olarak hizmet edecektir.

İçeriği bir H2 başlığıyla güncelleyin:

<h2>Coaching</h2>

Ardından, daha sonra başvurmak üzere metin modülünün etiketini güncelleyin.

Metin tasarımı ayarları altında aşağıdakileri güncelleyin:

• Metin Hizalama: Merkez
• Metin Rengi: Açık

• Başlık 2 Yazı Tipi: Karabatak Garamond
• Başlık 2 Yazı Tipi Ağırlığı: Kalın
• Başlık 2 Metin Boyutu: 40px

• Genişlik: %100
• Maksimum Genişlik: %85

Gelişmiş sekmesi altında, konumu aşağıdaki gibi güncelleyin:

• Pozisyon: Mutlak
• yer: üst merkez
• Dikey Ofset: %10

(NOT: Resmin en boy oranının boyutuna bağlı olarak dikey ofsetin ayarlanması gerekebilir. Örneğin, yatay tip bir resim daha az ofset gerektirebilir)

Ardından, metin modülüne aşağıdaki CSS Sınıflarını ekleyin:

• CSS Sınıfı: et-bindirme öğesi aşağı kaydırma

“et-overlay-item” sınıfına ek olarak, fareyle üzerine gelindiğinde başlığı biraz aşağı hareket ettirmek için özel CSS kullanmak için ek bir “move-down” sınıfı ekliyoruz.

Kaplama Gövde Metni Oluşturma

Kaplama gövde metnini oluşturmak için kaplama başlığı için kullanılan metin modülünü çoğaltabiliriz. Kopya için ayarları güncellemeden önce, etiketi "yer paylaşımı gövdesi" olarak değiştirin.

Yeni metin modülü için metin ayarlarını açın ve gövde içeriğini birkaç cümle paragraf metni ile güncelleyin.

Gelişmiş sekmesi altında, modülün mutlak konumunu merkeze değiştirin.

Bunun üzerine gelindiğinde hareket etmesini istemediğimizden (yalnızca görünür), CSS Sınıfını yalnızca aşağıdakileri içerecek şekilde güncelleyin:

• CSS Sınıfı: et-bindirme öğesi

Kaplama Düğmesini Oluşturma

Bu görüntüdeki son bindirme öğesi düğme olacaktır. Düğmeyi oluşturmak için “gövde metni” metin modülünün altına yeni bir düğme modülü ekleyin.

Tasarımı değiştirmeden önce düğmenin konumunu aşağıdaki gibi güncelleyin:

• pozisyon: mutlak
• Dikey Ofset: %10

Şimdi düğme görüntünün alt kısmında ortalanmalıdır.

Gelişmiş sekmesindeyken, CSS Sınıfını güncelleyin ve Ana Öğeye aşağıdaki gibi özel bir CSS parçacığı ekleyin:

• CSS Sınıfı: et-bindirme öğesi taşıma
• Ana Öğe CSS'si:

  min-width: 15em

Fareyle üzerine gelindiğinde hafifçe yukarı hareket ettirmek için düğmeye ek bir sınıf eklendiğine dikkat edin. Bu, fareyle üzerine gelindiğinde başlık metninin aşağı doğru hareketine iltifat etmek içindir.

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

• Düğme Hizalama: Merkez
• Düğme Metin Boyutu: 14px
• düğme Arka Plan Rengi: #4361ee
• düğme Kenarlık Genişliği: 0px
• Düğme Harf Aralığı: 0.1em
• Düğme Yazı Ağırlığı: Kalın
• Düğme Yazı Tipi Stili: TT
• Dolgu: 0,8em üst, 0,8em alt, 0 piksel sol, 0 piksel sağ

Kod Modülü ile Özel CSS Ekleme

Bu bindirme tasarımının birkaç başka sürümünü oluşturmadan önce, bindirme vurgulu efektleri için gereken özel CSS'yi ekleyelim. Bunu yapmak için düğmenin altına bir kod modülü ekleyin.

Ardından aşağıdaki CSS'yi kod içeriğinin içine yapıştırın. Kodu gerekli komut dosyası etiketlerine sarmayı unutmayın.

<style>
 @media all and (min-width: 981px) {
  
  .et-fb-root-ancestor .et-overlay-item {
    opacity: 1; /*shows hidden overlay items when using the visual Divi Builder*/
  }
  .et-overlay-item {
    opacity: 0; /*hides overlay items by default*/
    margin-bottom: 0px;
  }
  .et-overlay-item, .et-overlay-image {
    transition: all 400ms !important; /*sets transition speed of all overlay items*/
  }
  .et-overlay-container:hover .et-overlay-item {
    opacity: 1; /*reveals hidden overlay items on hover*/
  }
  .et-overlay-container:hover .et-overlay-image {
    /*add new styles here to change image on hover*/
  }
  .et-overlay-container:hover .et-overlay-image.et-scale {
    transform: scale(1.2); /*adjust scale of image here*/
  }
  .et-overlay-container:hover .et-overlay-image.et-rotate {
    transform: scale(1.4)
    rotateZ(10deg)!important; /*adjust rotation of image and scale needed for rotation here*/
  }  
  .et-overlay-container:hover .et-overlay-item.move-up {
    margin-bottom: 15% !important; /*adjust how far you want the overlay item to move up*/
  }
  .et-overlay-container:hover .et-overlay-item.move-down {
    margin-top: 10%; /*adjust how far you want the overlay item to move down*/
  }

}
</style>

Kod, CSS'yi gerektiği gibi nerede ayarlayabileceğinizi anlayabilmeniz için yorumlanmıştır.

Daha Fazla Tasarım için Sütunu Çoğaltmak

Çalışmak için zaten iki ek boş sütunumuz olmasına rağmen, tüm sütunu çoğaltarak ilk sütundaki tüm modülleri ve tasarımı yeni bir sütuna aktarmak daha kolaydır. Bunu yapmak için, katmanlar modunu açın, iki boş sütunu silin ve ardından görüntü bindirme tasarımını içeren sütunu iki kez çoğaltın. Aynı tasarımlara sahip toplam üç sütununuz olmalıdır.

Görüntü Bindirme Tasarımı Oluşturma #2

Artık tüm tasarım öğelerini sütunların her birine yerleştirdiğimize göre, ek görüntü bindirmeleri oluşturmak için tasarımı değiştirebiliriz. Bu sonraki tasarım için düğmeyi görüntünün ortasına yerleştireceğiz (her zaman görünür). Ardından başlığı ve gövde metnini görüntünün üstünden ve altından görünüme taşıyacağız.

Gövde Metni Konumunu ve CSS Sınıfını Ayarlayın

2. sütundaki kaplama gövde metni modülünün ayarlarını açın ve konumu güncelleyin:

• Yer: Alt Merkez
• Dikey Ofset: %5

Ardından CSS Sınıfını aşağıdakilerle güncelleyin:

• CSS Sınıfı: et-bindirme öğesi taşıma

Düğme Konumunu ve CSS Sınıfını Ayarlayın

Ardından, 2. sütundaki düğmenin ayarlarını açın ve aşağıdaki konum konumunu güncelleyin:

• Yer: Merkez Merkez

Ardından, düğmeyi her zaman görünür tutmak istediğimiz için CSS Sınıfını çıkarın.

Ayırıcı modül (bindirme rengi) ayarlarını açın ve arka planı aşağıdaki gibi değiştirin:

• Arka Plan Rengi: rgba(67,97,238,0.8)

Ardından düğmenin ayarlarını açın ve arka plan rengini değiştirin:

• Düğme Arka Plan Rengi: #f72585

Görüntü ve CSS Sınıfını Ayarlayın

Ardından, görüntü için ayarları açın ve yeni bir görüntü yükleyin (isterseniz).

Ardından, aşağıdaki CSS Sınıfını Görüntüye ekleyin:

• CSS Sınıfı: et-overlay-image et-ölçek

"et-overlay-image" sınıfına ek olarak, "et-scale" adı verilen ve görüntünün boyutunu büyütmesine neden olacak ve üzerine gelindiğinde yakınlaştırma etkisi yaratacak ek bir sınıf olduğuna dikkat edin.

Görüntü Bindirme Tasarımı Oluşturma #3

Şimdi 3. sütundaki üçüncü görüntü bindirme tasarımını oluşturma zamanı.

Kaplama Gövde Metni İçeriğini ve CSS Sınıfını Ayarlayın

3. sütundaki kaplama gövde metni modülünün ayarlarını açarak başlayın ve paragraf metninin üzerine H2 başlığını ekleyin. Şimdi ikisi, iki yerine bir modülün içinde olacak.

Ardından, metnin görüntünün üstünde görünmesi için CSS Sınıfını çıkarın.

Düğme Ofsetini ve CSS Sınıfını Ayarlayın

Düğme modülünün ayarlarını açın ve dikey ofset konumunu güncelleyin:

• Dikey Ofset: %5

Bindirme Başlığını Sil

Ardından, bindirme başlığı metin modülünü silin.

Kaplama Rengini ve CSS Sınıfını Ayarlayın

Ayırıcı modül (bindirme rengi) ayarlarını açın ve arka planı aşağıdakilerle güncelleyin:

• Arka Plan Gradyanı Sol Renk: rgba(67,97,238,0.8)
• Arka Plan Gradyanı Sağ Renk: rgba(247,37,133,0.8)
• Başlangıç ​​Konumu: %25
• Bitiş Konumu: %75

Gradyan kaplamayı her zaman görünür tutmak istediğimiz için CSS Sınıfını çıkarın.

Görüntü CSS Sınıfını Ayarla

Son olarak, ana görüntüye fareyle üzerine gelindiğinde görüntüyü hem ölçeklendirecek hem de döndürecek ek bir CSS Sınıfı (“et-rotate”) ekleyeceğiz.

• CSS Sınıfı: et-bindirme-görüntü et-döndür

Son dokunuşlar

Nihai sonuçlarımızı kontrol etmeden önce birkaç ayarlama yapmamız gerekiyor.

Tüm modüller için varsayılan alt kenar boşluğunu çıkarın

Varsayılan olarak, satır ayarlarındaki varsayılan oluk genişliği (3) nedeniyle her modül 30 piksellik bir alt kenar boşluğu ile gelir. Bu, kaplama tasarımımızda modüllerin konumlandırılmasını bozabilir. Bunları çıkarmak için tasarımdaki görüntülerden birinin görüntü modülü ayarlarını açın. Kenar boşluğunu 0px alt kenar boşluğu ile zaten güncellediğimiz için, bu kenar boşluğunu tüm modüllere genişletebiliriz.

Kenar boşluğu ayarına sağ tıklayın ve "marjı genişlet" seçeneğini seçin.

Ardından, kenar boşluğunu sayfadaki Tüm Modüllere genişletmeyi seçin.

Yinelenen Kod Modüllerini Sil

İlk sütunu çoğaltırken taşınan ek kod modüllerini sildiğinizden emin olun. Sadece bir tane olmalı. Bunu katmanlar modundan kolayca yapabilirsiniz.

Nihai sonuçlar

Artık üç tasarımımız da tamamlandığına göre, görüntü bindirme tasarımlarımızın nihai sonuçlarına bakalım.

Ve işte mobildeki tasarım. Üst üste bindirme efektleri, yalnızca kod modülündeki özel CSS ortam sorgusu aracılığıyla masaüstüne uygulanır. Bu nedenle bindirmeler her zaman mobilde görünür olacaktır.

Son düşünceler

Özel görüntü bindirmeleri oluşturmak aslında çok eğlenceli. Divi oluşturucu ile görsel olarak test edebileceğiniz sayısız tasarım vardır ve vurgulu efektleri uygulamak için yalnızca az miktarda özel CSS yeterlidir. Bindirme öğeleri için fareyle üzerine gelme efektleri özel CSS gerektirse bile, kaplama öğelerinin her birini ayrı ayrı hedeflemek için yerleşik fareyle üzerine gelme seçeneklerinden yararlanmaya devam edebilirsiniz.

Yorumlarda sizden haber bekliyorum.

Şerefe!