ile özel görüntü bindirmeleri tasarlamayı öğrenmek ister misiniz? Divi ?
Görüntü bindirmeleri, web tasarımında uzun süredir kullanılmaktadır. Etkileşim için mükemmeller ziyaretçi açığa vurarak içindekiler Resmin üzerine geldiğinizde ek ve tasarım öğeleri.
Bu eğitimde, size özel görüntü bindirmelerini nasıl tasarlayacağınızı göstereceğiz. Divi. Bu bindirmeler, görüntünün üzerine geldiğinizde değişecek ve öğeleri ortaya çıkaracaktır.
Eklentilere gerek yok.
Başlayalım!
anket
İşte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış.
Divi Builder ile yeni bir sayfa oluşturun
WordPress kontrol panelinden şuraya gidin: Sayfalar> Yeni Ekle yeni bir sayfa oluşturmak için.
Size mantıklı gelen bir başlık verin ve tıklayın kullanım Divi inşaatçı
Ardından İnşaata Başla (Sıfırdan Oluşturun)
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ı tasarlayın
Başlamak için, varsayılan bölümde üç sütunlu bir satır oluşturun.
Bölüm ayarlarını açın ve aşağıdaki arka plan rengini ekleyin:
- Arkaplan: #3a0ca3
Ardından, sütun 1 ayarlarını açın ve aşağıdakileri güncelleyin:
- CSS Sınıfı: et-overlay-container
- Yatay Taşma: Gizli
- Dikey Taşma: Gizli
Resim eklemek
Bölüm, satır ve sütun hazır olduğuna göre, sütun 1'e yeni bir Görüntü modülü ekleyin. Bu, bindirme tasarımlarımızın arkasındaki ana görüntü olacaktır.
Manzaradan çok portreye benzeyen bir resim yükleyin. Tüm tarayıcı boyutlarında tam sütun 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.
Sekmenin altında Dizayn, aşağıdakileri güncelleyin:
- Kenar Boşluğu (Alt): 0px
Sekmenin altında gelişmiş, aşağıdaki CSS sınıfını ekleyin:
- CSS sınıfı: et-overlay-image
Bir "Bölücü" modülü kullanarak görüntü bindirme rengi ekleme
Görüntü bindirme rengini oluşturmak için bir Bölücü modülü kullanacağız.
İlk olarak, görüntünün altına bir Bölücü modülü ekleyin.
Ardından ayırıcıyı görüntünün üzerine yerleştirilecek şekilde mutlak olarak konumlandırın:
- Pozisyon: Mutlak
Sekmenin altında içerik, aşağıdakileri güncelleyin:
- Bölücüyü Göster: HAYIR
- Arka Plan Rengi: rgba(247,37,133,0.8)
Ardından ayırıcının yüksekliğini ve genişliğini güncelleyin:
- Genişlik: %100
- Yükseklik: %100
Tasarım yerindeyken, ayırıcıya aşağıdaki CSS sınıfını ekleyin:
- ve-bindirme-öğesi
NOT: Bu sınıf, yalnızca üzerine gelindiğinde görüntülemek 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 etmenize yardımcı olması için katmanlar kipini açın ve Modülü Bölücü olarak etiketleyin (“Kaplama Rengi”).
Bindirme başlık metni eklendi
Bölücü modülünü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 metni görevi görecektir.
Güncelleme içindekiler H2 başlığıyla:
<h2>Coaching</h2>Ardından, ileride başvurmak üzere metin modülü etiketini güncelleyin.
Sekmenin altında Dizayn, aşağıdakileri güncelleyin:
- Metin Hizalama: Ortalanmış
- Metin Rengi: Açık
- Yazı Tipi: Karabatak Garamond
- Yazı Ağırlığı: Kalın
- Metin Boyutu: 40px
- Genişlik: %100
- Maksimum Genişlik: %85
Sekmenin altında gelişmiş, konumu aşağıdaki gibi güncelleyin:
- Pozisyon: Mutlak
- yer: üst merkez
- Dikey Ofset: %10
NOT: Dikey ofsetin görüntünün en boy oranı boyutuna göre ayarlanması gerekebilir. Örneğin, yatay tipte bir görüntü 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
sınıfa ek olarak "ve bindirme öğesi", ek bir sınıf ekliyoruz "aşağı inmek" fareyle üzerine gelindiğinde başlığı hafifçe aşağı hareket ettirmek için özel CSS'yi kullanmak için.
Kaplamalı gövde metnini oluşturma
Gövde metni kaplamasını oluşturmak için başlık kaplaması için kullanılan Metin modülünü çoğaltabiliriz. Yinelenen parametreleri güncellemeden önce etiketi "Kaplama Gövdesi" olarak değiştirin.
Yeni Metin modülünün metin ayarlarını açın ve içindekiler birkaç cümlelik paragraf metni ile gövde.
Sekmenin altında gelişmiş, modülün mutlak konumunu merkeze değiştirin.
Bunun fareyle üzerine gelindiğinde (yalnızca görünür) hareket etmesini istemediğimizden, CSS sınıfını yalnızca aşağıdakileri içerecek şekilde güncelleyin:
- CSS Sınıfı: et-bindirme öğesi
Bindirme düğmesinin oluşturulması
Bu görüntüdeki son bindirme düğme olacaktır. Düğmeyi oluşturmak için ikinci 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.
Sekmede gelişmiş, 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 CSS öğesi:
min-width: 15em;Fareyle üzerine gelindiğinde hafifçe yukarı hareket ettirmek için düğmeye ek bir sınıf eklendiğini unutmayın. Bu, fareyle üzerine gelindiğinde başlık metninin aşağı doğru hareketini tamamlamak içindir.
Ardından, aşağıdaki tasarım ayarlarını güncelleyin:
- Düğme Hizalama: ortalanmış
- Düğme İçin Özel Stilleri Kullan: EVET
- Düğme Metin Boyutu: 14px
- Arka Plan Rengi: #4361ee
- Düğme Kenar Genişliği: 0 piksel
- Düğme Harf Aralığı: 0,1em
- Yazı Ağırlığı: Kalın
- Düğme Yazı Tipi Stili: TT
- Dolgu: 0,8em (Üst ve Alt), 0px (Sol ve Sağ)
Kod modülüyle özel CSS ekleme
Düğmenin altına bir Kod modülü ekleyin.
Ardından aşağıdaki CSS'yi kod içeriğ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 yorumlanmıştır, böylece CSS'yi ihtiyaçlarınıza göre nerede ayarlayabileceğinizi anlayabilirsiniz.
Daha fazla tasarım için sütunu çoğaltın
Kalıcı katmanı açın, önce iki boş sütunu silin.
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
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, üst ve gövde metnini görüntünün üstünden ve altından görünüme taşıyacağız.
Gövde metni yerleşimini ve CSS sınıfını ayarlayın
2. sütundaki kaplama gövde metni modülü 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üğme ayarlarını açın ve aşağıdaki konum konumunu güncelleyin:
- Yer: Merkez
Ardından, düğmenin her zaman görünür kalmasını istediğimiz için CSS sınıfını kaldırın.
Divider (overlay color) modül ayarlarını açın ve arka planı aşağıdaki gibi değiştirin:
- Arka plan: rgba(67,97,238,0.8)
Ardından düğme ayarlarını açın ve arka plan rengini değiştirin:
- Arka Plan Rengi: #f72585
Resmi ve CSS sınıfını ayarlayın
Ardından görüntü ayarlarını açın ve yeni bir görüntü yükleyin (istenirse).
Ardından resme aşağıdaki CSS sınıfını ekleyin:
- CSS Sınıfı: et-overlay-image et-ölçek
"et-overlay-image" sınıfına ek olarak, görüntünün boyutunu artıracak ve üzerine gelindiğinde yakınlaştırma etkisi yaratacak olan "et-scale" adlı ek bir sınıf olduğunu unutmayın.
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 içeriğini ve CSS sınıfını ayarlayın
Sütun 3'teki kaplama gövde metni modülü ayarlarını açarak başlayın. Ardından, paragraf metninin üzerine H2 başlığını ekleyin. Şimdi ikisi de bir modülün içinde olacak.
Ardından, metnin görüntünün üzerinde görünmesi için CSS sınıfını kaldırın.
Düğme ofsetini ve CSS sınıfını ayarlayın
Düğme modülü ayarlarını açın ve dikey konum ofsetini güncelleyin:
- Dikey Ofset: %5
Bindirme Başlığını Kaldır
Ardından, Overlay Header Text modülünü kaldırın.
Bindirme rengini ve CSS sınıfını ayarlayın
Bölücü (bindirme rengi) modül ayarlarını açın ve arka planı aşağıdaki şekilde güncelleyin:
- Sol arka plan degrade rengi: rgba(67,97,238,0.8)
- Sağ arka plan gradyan rengi: rgba(247,37,133,0.8)
- Başlangıç pozisyonu: %25
- Nihai konum: %75
Gradyan kaplamayı her zaman görünür tutmak istediğimiz için CSS sınıfını kaldırın.
Resmin CSS sınıfını ayarlayın
Son olarak, ana görüntüye, üzerine gelindiğinde görüntüyü yeniden boyutlandıracak ve döndürecek ek bir CSS sınıfı (“et-rotate”) ekleyeceğiz.
- CSS Sınıfı: et-overlay-image et-döndür
Son dokunuşlar
Nihai sonuçlarımızı kontrol etmeden önce bazı ayarlamalar yapmamız gerekiyor.
Tüm modüller için varsayılan alt kenar boşluğunu kaldırın
Kenar boşluğunu 0px'lik bir 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 seçin “Marjları Genişletin”.
Ardından, kenar boşluğunu sayfadaki Tüm modüllere genişletmeyi seçin.
Yinelenen kod modüllerini kaldırın
İlk sütun çoğaltmasından taşınan fazladan kod modüllerini kaldırdığınızdan emin olun. Sadece bir tane olmalı. Bunu modal katmanlardan 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 bir göz atalım.
DIVI'yı Şimdi İndirin !!!
Ve işte mobildeki tasarım. Yer paylaşımı üzerine gelme efektleri yalnızca masaüstünde geçerlidir. Bu nedenle, bindirmeler mobil cihazlarda görünmeye devam edecektir.
DIVI'yı Şimdi İndirin !!!
Sonuç
Özel görüntü bindirmeleri oluşturmak aslında çok eğlenceli. Divi Builder ile görsel olarak test edebileceğiniz sayısız tasarım var.
Bu eğitimin bir sonraki Divi projeleriniz için size ilham vereceğini umuyoruz. Herhangi bir endişeniz veya öneriniz varsa, bizi yorumlar bölümü bunu tartışmak için.
Ayrıca danışabilirsiniz kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.
Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.
...
