Özel CSS aracılığıyla Elementor'da vurgulu efekti eklemeniz mi gerekiyor?

Elementor, bir öğeye vurgulu efekti eklemek için yerleşik bir özelliğe sahiptir (Bunu makalelerimizden birinde ele aldık. Bu özellik yeterince kullanışlı olsa da bir dezavantajı var. Buna yalnızca bir vurgulu efekti ekleyebilirsiniz. bir bölüm, bir sütun, bir Resim widget'ı, bir Düğme widget'ı ve bir Yazılar widget'ı.

Ayrıca okuyun: WordPress'te Elementor nasıl kurulur

Elementor'un yerleşik vurgulu efekti özelliği, Metin Düzenleyici widget'ı, Başlık widget'ı vb. gibi diğer widget'lara vurgulu efekti eklemenize izin vermez. Diğer bir dezavantaj, yalnızca çok temel bir vurgulu efekti ekleyebilmenizdir.

Elementor'da vurgulu efekti eklemek için başka bir seçenek var mı?

Evet var. Özel CSS aracılığıyla Elementor'a vurgulu efekti ekleyebilirsiniz. Ancak özel CSS eklemek için Elementor Pro'yu kullanmanız gerekir, çünkü özel CSS yalnızca Elementor Pro'da kullanılabilir.

Özel CSS aracılığıyla Elementor'da bir vurgulu efekti ekleme

Başlamadan önce, özel CSS ile oluşturulan fareyle üzerine gelme efektleri örneğine bir göz atalım.

Elementor'un yerleşik vurgulu efektinin aksine, Elementor'daki herhangi bir öğeye vurgulu efekti eklemek için bu yöntemi kullanabilirsiniz. Bir bölüm, sütun veya widget (tüm widget'lar) olup olmadığı.

Bu örnekte, bir sütuna nasıl nokta efekti ekleyeceğinizi göstereceğiz.

İlk olarak, sütun ayarları paneline geçmek için sütun tutamacına tıklayın. Bir kez orada, sekmeye gidin gelişmiş ve bloğu aç görenek CSS ve aşağıdaki CSS kodunu yapıştırın.

seçici: üzerine gelin {geçiş: tüm .2'ler içeri-dışarı kolaylığı; dönüştürme: ölçek (1.1); imleç: nokta; z-endeksi: 1; }

Voilà.

Yukarıdaki kodda CSS özelliğini kullanıyoruz dönüştürmek () vurgulu efekti eklemek için Bu örnekte kullandığımız dönüşüm türü, 1,1 saniye süreli ölçektir.

Kullanabileceğiniz 4 başka dönüşüm türü daha vardır:transform

  • Matris
  • çevirmek
  • Döndür
  • çarpık

Farklı bir dönüştürme stili kullanmak istiyorsanız, sadece değerini değiştirebilirsiniz. dönüştürmek Yukarıdaki CSS kodunda.

Okuyabiliyorsun cette sayfa CSS dönüşümü hakkında daha fazla bilgi edinmek için.

Diğer öğelere bir vurgulu efekti eklemek için aynı rotayı takip edebilirsiniz.

Bir bölüme nokta efekti eklemek için bölüm tutamacına tıklayıp sekmeye gidebilirsiniz. gelişmiş ve bloğu aç Özel CSS.

Özel CSS aracılığıyla Elementor'da vurgulu efekti ekleyin

Bir widget'a fareyle üzerine gelme efekti eklemek için widget'ın tutamacına tıklayıp sekmeye tekrar gidebilirsiniz. İleri, sonra bloğu aç Özel CSS.

Diğer ek premium WordPress eklentileri 

Diğerlerini de keşfedin WordPress eklentileri WordPress blogunuzun veya web sitenizin performansını optimize eden premium.

1. Canlı Satış Popup'u

Canlı Satış Popup'ı başka bir şey WordPress Plugin bir avantaja dönüştürebileceğiniz çeşitli güzellikler içeren bildirim. Her şeyden önce, o imkanı var açılır pencere göster birisi bir siparişi tamamladığında. Canlı satış pop-up eklentisi wordpress

İkinci olarak, gerçek zamanlı satış açılır penceresi, bir kişi sadece sepete bir ürün eklediğinde bir bildirim görüntüleyebilir. Üçüncüsü, bu aracı, makaleyi kaç ziyaretçinin görüntülediğini göstererek bir ürün için yutturmaca artırmak için kullanabilirsiniz.

En son web trendleriyle, Canlı Satış Açılır Penceresinin tüm cihazlarda ve tarayıcılarda güzel bir şekilde görüntülenmesini bekleyebilirsiniz. Pop-up düzenine gelince, onu en küçük ayrıntısına kadar özelleştirebilirsiniz.

oku: Nasıl WordPress blog bir güvenlik uyarısı düzeltmek için

Canlı Satış Popup'ın diğer özellikleri otuzdan fazla animasyon, ses, geri sayımlar ve kişiselleştirilmiş konumlandırma. Ayrıca sahte bildirimler için de çalışır ve yalnızca bildirimin görevini yerine getirmesini istediğiniz belirli sayfalar için ayarlamanıza izin verir.

Indir | gösteri | Web hosting

2. Foodify

Gıdalaştır müşterilerin bir mağazadan yiyecek sipariş etmelerinin en hızlı ve en kolay yoludur. Tamamen duyarlı ve görüntü gibi ek özellikler içerir, arama seçeneği, ürün bilgileri. WooCommerce için Foodlify Restaurant Yemek Menüsü

Ayrıca sepete düğmeler ekler. kullanıcı deneyimi. Bu WooCommerce uzantısı, herhangi bir WooCommerce web sitesine eklenebilecek hızlı, kapsamlı bir sipariş çözümüdür.

Senin için burada Kategori açıklamalarını ve etiketlerini optimize etmek için 5 WordPress eklentileri

WordPress dizininde bulunan birçok eklenti ile çok esnek ve uyumlu olma avantajına sahiptir.

Indir | gösteri | Web hosting

3. Mega Zoom ve Pan Resim Görüntüleyici

Mega Zoom & Pan Image Viewer eklentisi, büyük resimleri bilgisayarınızda görüntülemek için tamamen duyarlı bir düzene sahip harika bir resim görüntüleyici ve tarayıcıdır. WordPress blog.

Zoom için mega zoom pan wordpress eklentisi

Yakınlaştırması, işlevi sayesinde ürünleri (yüksek çözünürlüklü ürün resimleri. Örn: Giyim, arabalar, teknik diyagramlar vb.) Göstermek, haritaları ve diğer tüm resimleri görüntülemek için tasarlanmış güçlü bir araçtır. panoramik, gezinme kontrolleri, kaydırma çubuğuve son derece özelleştirilebilir işaretçiler / erişim noktaları.

İşte Görüntülerinizi ve videolarınızı korumak için 5 akıllı telefon uygulaması

Bu eklenti iOS'ta (iPad, iPhone) harika çalışıyor, Android ve Windows mobil vb. Ayrıca tüm modern tarayıcılarda ve IE7 veya IE8 gibi eski tarayıcılarda çalışır.

Indir | gösteri | Web hosting

Diğer önerilen kaynaklar

Ayrıca, web sitenizi ve blogunuzu daha iyi ele geçirmek ve kontrol altına almak için sizi aşağıdaki kaynaklara başvurmaya davet ediyoruz.

Sonuç

Burada ! Bu kılavuz için bu kadar. Bu makalenin, Elementor'da özel CSS aracılığıyla fareyle üzerine gelme efekti eklemenize yardımcı olduğunu umuyoruz. Ayrıca makalemizi okuyabilirsiniz. WordPress'te JavaScript ve CSS oluşturma engellemesi nasıl düzeltilir.

Bununla birlikte, ayrıca bize danışabilirsiniz kaynakların bulunduğuİ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ı.

Bir arkadaşınız veya yorumunuz varsa, lütfen bölüme bırakın. yorum. Çoğunlukla bu yazıyı farklı sosyal ağlarda paylaş.

...