Portföy etkisi ile kart oluşturmayı öğrenmek ister misiniz? Bu yeni öğreticide, bunu nasıl yapacağınızı göstereceğiz. Elementor.
Bugün ne hakkında konuşmak istediğimiz hakkında hiçbir fikriniz yoksa, sizi aşağıdaki videoyu izlemeye davet ediyoruz:
O zaman neden burada olduğumuza dönelim.
Bu öğreticiyi tamamlamak için ihtiyacınız olacak Elementor'un Pro sürümü, çünkü yalnızca bu sürüm tarafından desteklenen özel CSS kodunu kullanacağız.Elementor.
Ayrıca Oku: Elementor ile bir görüntünün üzerindeki metin nasıl görüntülenir?
3 sütun yapısı ile yeni bir bölüm oluşturalım, ardından panelde tanımlayalım. Yükseklik uzeri Minimum Yükseklikve sonra Minimum yükseklik hadi tıklayalım VH ve kaydırıcıyı ayarlayın 100.
Ortadaki sütunu seçelim ve bu sütuna Dahili Bölüm Widget'ı. Dahili Bölüm widget'ı varsayılan olarak 2 sütunla yapılandırılır. 2 sütunun altına widget'ı bırakalım Başlık başlık ile restoran, Seçme H4 HTML etiketi için ve Merkez hizalama için.
Sekmede gelişmiş Başlık widget'ına girelim 30 özellikle hedefiniz Üst boşluk
Bir kez daha Dahili Bölümümüzü seçelim. Panelde, onu değiştirelim Yükseklik uzeri Minimum Yükseklik ve Minimum yükseklik hadi imleci ayarlayalım 380. Ardından Dahili bölümün sağ veya sol sütununu silelim
bırak onu Resim widget'ı Dahili Bölümde ve kitaplığımızdan bir resim ekleyin. hadi seçelim Tüm için Görüntü boyutu et Merkez için hizalama.
Not: Bizimki gibi eksiksiz sayfalara sahip olmak istiyorsanız, sizi GoFullPage Chrome uzantısının yardımıyla sayfaları yakalamaya davet ediyoruz, ancak başka bir tane de kullanabilirsiniz.
Ayrıca keşfedin: Elementor ile bir resim galerisi nasıl oluşturulur
Daha sonra Sekmede stil, tıklamak PX de Genişlik, kaydırıcıyı ayarlayalım 260 et les sınır ışınları uzeri 10
Ardından, Blur'u 40'a ve Diffuse'ı -10'a değiştirerek Box Shadow'u değiştirelim.
Gelişmiş sekmesinde, bölümünde konumlandırma, Seçme kesin özellikle hedefiniz Pozisyon, Yatay Yönlendirme uzeri Patavatsız olarak da adlandırılan dekalaj uzeri 0, L 'Dikey Yönlendirme uzeri Bas.
Görüntü widget'ımızı iki kez çoğaltalım. Kaçınılmaz olarak hepsi üst üste gelecek. Navigator'ı açalım, böylece ilki tarafından gizlenen diğer widget'lara erişebiliriz.
İkinci Widget'ın ve Sekmesindeki görüntüyü değiştirelim gelişmiş, onları değiştirelim alt kenar boşlukları et Patavatsız Girerek 30 her biri için. Şimdi hafif bir gecikme göreceksiniz,
Üçüncü Görüntü Widget'ı için de aynısını yapın, ancak kenar boşluklarını uygulayın. 60 Alt ve Sol kenar boşlukları için. Artık 3 Görüntü widget'ının tümüne ilişkin bir genel bakışa sahip olmalısınız.
Dahili Bölüm widget'ımızı seçelim, Sekmesine gidelim gelişmiş ve bölümde özel CSS, aşağıdaki kod parçacığını kopyalayıp yapıştırın:
selector .elementor-widget-image{
transition: ease-in-out 0.6s;
}
selector:hover .elementor-widget-image{
transform: scale(.65);
}
selector:hover .front-img{
transform-origin: center left;
}
selector:hover .mid-img{
transform-origin: center top;
}
selector:hover .last-img{
transform-origin: bottom right;
}(Bu bölüme sahip değilseniz Pro sürümünüz yoktur, devam etmek istiyorsanız sürümünüzü yükseltmeniz gerekir)
Şimdi haritamızın üzerine gelirseniz, bir yakınlaştırma animasyonuna sahip olacaksınız.
İlk Görsel Widget'ımızı (en düşük olanı) ve Sekmesinde seçelim gelişmiş, hadi kapalım ön-img için CSS sınıfları.
İkinci Resim Widget'ı için şunu yazalım orta resim CSS Sınıfları için.
Üçüncü Resim Widget'ı için şunu yazalım son görüntü CSS Sınıfları için.
Ayrıca bakınız: Elementor ile Sekmeli Resim Galerisi Nasıl Oluşturulur
Şimdi sütunumuzun üzerine geldiğimizde muhteşem bir animasyon göreceğiz. içindekiler İç Bölümümüzden.
Sayfamızı tablet modunda gösterelim resimlerin düzgün görüntülenmediğini göreceğiz.
İlk Görüntü widget'ını seçin, Stil sekmesinde, PC'ye tıklayarak ve ardından genişlik olarak 150 girerek genişliği değiştirelim. Aynısını diğer 2 Görüntü widget'ı için de yapalım.
Kendi bölümünde Dahili Bölümümüzü seçelim içindekiler, hadi değiştirelim Minimum yükseklik uzeri 225.
Sayfamızı Akıllı Telefon modunda da görüntüleyelim, önceden herhangi bir sorun teşkil etmez. Ama eğer varsa onun bölümünden Dahili Bölümümüzü seçelim. içindekilerMinimum Yüksekliği değiştirelim.
Şimdi ortadaki sütunumuzu 2 kez çoğaltalım, ardından diğer 2 boş sütunu silelim.
Bu sütunların Başlıklarını değiştirelim, ardından görüntüleri değiştirelim
İşte sonuçları olan muhteşem bir bölüme sahip olmanız gerekecek:
İşte, bu görevi kolayca yaptınız.
Elementor Pro'yu Hemen Alın!
Sonuç
İşte burada ! Portföy etkisi ile bir kartın nasıl oluşturulacağını gösteren bu makale bu kadar. Oraya nasıl gideceğinizle ilgili herhangi bir endişeniz varsa, bize içinde bildirin. Yorumlar.
Ancak, ayrıca 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ş.
...
