Gönderiler widget'ındaki öğelere fareyle üzerine gelme efekti eklemeyi öğrenmek istiyorsanızElementor?
Kullanan bir WordPress kullanıcısıysanız Elementor seninkini oluşturmak için Site Web, vurgulu efekti özelliğine aşina olmalısınız. Bu özelliği esas olarak her bir widget ayarında bulabilirsiniz. Elementor.
Fareyle üzerine gelme efekti, öğelerinizi çekici hale getirebilir, bu nedenle, cihazınızdaki kullanıcı deneyimini iyileştirmenin etkili bir yoludur. web sitesi.
Fareyle üzerine gelme efektinden bahsetmişken, bu makale size ikincisini widget'taki ayrı ayrı gönderi öğelerine nasıl ekleyeceğinizi gösterecek Elementor Elementor'un özel CSS'sini, özellikle de yakınlaştırma vurgulu efektini kullanan gönderiler.
Bu öğreticiyi sizin için hazırlamamızın iki nedeni var:
- Varsayılan olarak, bir gönderiye Elementor gönderileri widget'ından fareyle üzerine gelme efekti ekleyebilirsiniz. Ancak, vurgulu etkisi çok temel/standart olacaktır.
- Varsayılan olarak Elementor, Gönderiler widget'ına (sekme gelişmiş -> Transformatör –> ECHELLE). Ancak fareyle üzerine gelme efekti, tüm (bireysel değil) gönderi widget öğelerini etkileyecektir.
Elementor'un gönderiler widget'ından tek tek gönderilere fareyle üzerine gelme efekti ekleme adımları
Öğreticiye başlamadan önce, bu öğreticinin Elementor'un Özel CSS özelliğini kullandığını size bildirmek istiyoruz. Bu özellik yalnızca Elementor Pro; sürümünüzü yükselttiğinizden emin olun.
1. Adım: Gönderiler Widget'ı ekleyin
Elementor düzenleyicinize gidin, her şeye sıfırdan başlayacağız, bu nedenle tek sütunlu bir bölüm oluşturun.
Ayrıca Oku: MailChimp ile Elementor nasıl entegre edilir
Ardından, widget panelinden Gönderiler widget'ını seçin, ardından düzenleme alanına sürükleyip bırakın. Gönderiler pencere öğesini ekledikten sonra, pencere öğesini tercihlerinize göre düzenleyebilir ve biçimlendirebilirsiniz.
Not: Lütfen sitenizde zaten makaleler yayınladığınızdan emin olun. web sitesi.
2. Adım: CSS snippet'ini ekleyin
Gönderiler widget'ını düzenledikten ve stilini belirledikten sonra, basit CSS pasajını ekleyerek tek bir gönderiye fareyle üzerine gelme efekti ekleyeceğiz. Gönderiler widget ayarlarında Sekme'ye gidin gelişmiş -> Özel CSS. Lütfen aşağıdaki CSS snippet'ini kopyalayın ve ardından alana yapıştırın Özel CSS.
selector .elementor-post:hover{
transition: all .50s ease-in-out;
transform: scale(1.1);
cursor: pointer;
z-index: 1;
}
Yukarıdaki kod, seçiciyi kullanarak Gönderiler widget'ındaki tek tek gönderi öğesini seçecektir. .élémentor-post ve CSS dönüşümünü uygulayın.
Kullanılan vurgulu efektten memnunsanız, bu şekilde tutabilir ve dilerseniz projenizi kaydedebilirsiniz. Ancak, geçiş hızı ve dönüşüm ölçeği değerini özelleştirmek istiyorsanız, CSS snippet'indeki değeri değiştirebilirsiniz.
Not: Dönüştür/yakınlaştır, web sitelerinde kullanılan yaygın ve popüler bir efekttir. Vurgulu efektleri dönüştürmenin diğer yöntemleri hakkında daha fazla bilgi edinmek istiyorsanız, burayı ziyaret edebilirsiniz. Kanal.
Ayrıca şunu keşfedin: aşağıdaki makaledeki tüm Elementor widget seçicileri
Şimdi Elementor Pro'yu Alın !!!
Sonuç
Bu makale, özel CSS kullanarak Elementor'un gönderiler widget'ındaki tek tek gönderi öğelerine fareyle üzerine gelme efekti eklemenin ne kadar kolay olduğunu gösterir.
Bu efekt için kullandığımız teknik, 2B ve bazı sözde dönüştürülmüş öğeleri içeren (yakınlaştırma) tekniğidir. Web siteniz için en iyi vurgulu efekti bulana kadar tüm vurgulu efekt stillerini özelleştirin ve bunlarla oynayın.
Burada! için en iyi araçları size tanıttık. pazarlama Elementor için e-posta yoluyla. Bunları nasıl kullanacağınızla 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ş.
...
