Bir resim bin kelimeye bedelse (ki öyle değil, yoksa yararlı bilgiler edinmek için tüm bu makaleyi okumak yerine tek bir resme bakıyor olurdunuz), bir galerinin değeri nedir? Mantıklı bir şekilde seçilmiş bir galeri mi? Sağduyulu görüntü üzerine gelme efektleriyle doğru şekilde optimize edilmiş görüntülerden oluşan, akıllıca seçilmiş bir galeri mi? Muhtemelen çok. Fakat görüntü üzerine gelme efektleri tam olarak nedir ve WordPress bunları barındırıyor mu?
Görüntü üzerine gelme efektleri, resimlerinizden mümkün olan en iyi şekilde yararlanmanın bir yoludur. Resimlerinize ve resim galerilerinize daha fazla etkileşim ekleyerek ziyaretçileriniz için ilgi çekici deneyimler yaratmada size daha fazla özgürlük ve daha fazla seçenek sunar. Hatta kullanıcılarınıza bir öğenin tıklanabilir olup olmadığını bildirmek için de çok faydalıdırlar, bu nedenle genellikle gezinme öğeleri için kullanılırlar. Bunları, örneğin bir kullanıcı faresiyle üzerine geldiğinde bir sanat eserinin fiyatını ortaya çıkarmak gibi önemli bilgileri iletmek veya tamamen estetik efektler için de kullanabilirsiniz.
WordPress’te görüntü üzerine gelme efektleri eklemenin birkaç yolu vardır. İşte hakkında konuşacağımız şey:
-
Elementor Resim Galerisi İçin Bir WordPress Eklentisine Resim Hover Efektleri Nasıl Eklenir
-
Resim Yazısı Vurgu Efekti Nasıl Eklenir?
-
WordPress Görüntü Yakınlaştırma Efekti Nasıl Oluşturulur
Listemizdeki ilk eklenti, basit, zarif ve güzel galeriler düşünülerek tasarlanmış bir işlevselliğe sahip tescilli eklentimizdir. Fakat efekti isterseniz bir galeride tek bir görsel kullanmanıza engel hiçbir şey yoktur. İkincisi biraz daha gösterişlidir ve istediğiniz efekt buysa animasyonlu altyazılar ve metin kullanır. Üçüncüsü, web mağazaları tarafından çok aranan bir çözümdür: ürünlerinizin ayrıntılarını göstermek için bir yakınlaştırma efekti.
Elementor Resim Galerisi İçin Bir WordPress Eklentisine Resim Hover Efektleri Nasıl Eklenir
Elementor kullanıcısıysanız (ve neden olmayasınız; Elementor esnektir, öğrenmesi kolaydır, sezgiseldir, görseldir ve tamamen işlevsel ücretsiz bir sürümü vardır), şanslısınız. Tescilli eklentimiz WordPress Addons For Elementor, Elementor’un zaten önemli olan seçeneklerini 60 adet yepyeni, profesyonelce tasarlanmış pencere öğesiyle genişletiyor. Bu yüzden resim galerilerinizi öne çıkarmanın bir yolunu arıyorsanız, bakmak isteyebileceğiniz bir şey resim galerisi widget’ıdır.
Yapmanız gereken ilk şey, Elementor’un en son sürümünü yüklemek ve ardından WordPress Addons For Elementor’u yüklemek ve etkinleştirmektir. WordPress Eklentileri ücretsizdir ve Elementor’un ücretsiz sürümüyle gayet iyi çalışır, bu nedenle her şeyin size bir kuruşa mal olması gerekmez.
Diğer tüm WordPress Eklentileri widget’larında olduğu gibi, fareyle üzerine gelme efektlerine sahip bir galeri oluşturmak kelimenin tam anlamıyla sadece birkaç dakika sürer.
Basit bir gönderi ve bazı yer tutucu metinlerle başlayacağız. Sayfanıza galeri eklemek için Resim Galerisi öğesini istediğiniz yere sürüklemeniz gerekir.
Yer tutucu galeri öğesi ayarlandıktan sonra, onu bazı resimlerle doldurmanız gerekir. Genel sekmesinde, resim eklemek için Resimler altındaki artı işaretine tıklayın.
Medya kitaplığınızdan resimler seçebilir veya yükleyebilirsiniz ve yüklendiklerinde seçili olduklarından emin olun (onay işaretleriyle işaretlenmiştir), Yeni bir galeri oluştur’a tıklayın.
Bir galeri oluşturduktan sonra resimlerin sırasını değiştirebilir veya onlara başlıklar atayabilirsiniz. Mevcut ayarlarımızdan memnunuz, bu yüzden Galeri Ekle’ye tıklayacağız.
Ve galeriniz şimdi eklendi. Önizleme bölümünde farenizi üzerine getirirseniz, zaten varsayılan olarak bir fareyle üzerine gelme efektine sahip olduğunu göreceksiniz: animasyonda bir yakınlaştırma. Fakat galeriyi gerçekten öne çıkarmak için Galeri Ayarlarını ziyaret etmemiz gerekiyor.
Galeri Ayarları, fareyle üzerine gelme efektleri de dahil olmak üzere bir galeriyi şekillendirmek için tüm seçenekleri bulabileceğiniz yerdir. Gördüğünüz gibi, galeri widget’ı seçenekler konusunda yetersiz değil. Fakat bunlar bu eğitimin kapsamı dışında kalıyor. Kullandığımız ayarları tam olarak aşağıdaki görselde bulabilirsiniz.
En çok ilgilendiğimiz şey Image Hover kontrolleri. Burada Yakınlaştır, Uzaklaştır, Taşı ve Hiçbiri arasında seçim yapabilirsiniz. Uzaklaştır’ı seçeceğiz. Aşağıda Image Hover Zoom Origin kontrolü yer almaktadır. Merkez, Sol, Sağ, Üst ve Alt arasında seçim yapabilirsiniz. Bizimkini Alt olarak ayarlayacağız.
Son iki kontrol Overlay Color ve Overlay Hover Color’dır. Resimleriniz için renk kaplamaları ayarlamak için bunları kullanabilirsiniz. Ve fareyle üzerine gelindiğinde farklı bir renk kaplaması. Örneğin opak bir renk için bir görüntü bindirmesi ve şeffaf bir katman için vurgulu renk ayarlarsanız, görüntü yalnızca fareyle üzerine gelindiğinde ortaya çıkar. Gizli uzaklaştırma efektimizden memnunuz, bu yüzden onları kullanmayacağız.
Ve işte karşınızda, dakikalar içinde zarif bir galeri. Aynı çok yönlülüğü diğer iki galeri widget’ında da bulacaksınız: Masonry Image Gallery ve Pinterest Image Gallery widget’ları da.
Resim Yazısı Vurgu Efekti Nasıl Eklenir?
Image Hover Effects, altyazıları kullanarak çeşitli vurgulu efektler oluşturmanız için size bir araç seti sağlayan bir eklentidir. Eklentinin ücretsiz sürümünü kullanacağız, bu nedenle profesyonel özelliklerle ilgilenmeyeceğiz.
Eklentiyi yükleyip etkinleştirdikten sonra, WordPress kontrol panelinizden Görüntü Hover Efektleri/Görüntü Hover Efektleri’ne giderek ayarlarına erişin.
Altyazı düzenleyicisine yönlendirileceksiniz. Her biri birden fazla resim içeren resim grupları (Kategoriler) oluşturabilir ve ardından bu seti kısa kodlar kullanarak web sitenizde herhangi bir yere yerleştirebilirsiniz.
Size yol göstermesi için ekranın sağ tarafındaki geliştirici yönergelerini kullanabilirsiniz. Öncelikle, bir Kategori Adına ve Görüntü Adına ihtiyacınız olacak. Daha sonra kullanmak üzere kolayca hatırlayabilmeniz için bunları seçin. Kategori Adı, aynı kümedeki her görüntü için aynı olmalıdır, Görüntü Adı ise iç sekmedeki metindir. Bunlar kullanıcı deneyimi için çok önemli değil.
Sırada Resim Yükle düğmesi var. Sizi bir resim seçebileceğiniz veya bir gönderiye veya sayfaya resim eklerken yaptığınız gibi bir resim yükleyebileceğiniz medya kitaplığınıza götürecektir. Değişiklikleri Kaydet’e tıklayın ve aşağı kaydırın.
Altyazı Ayarları bölümünde, Altyazı Başlığını girin. Bu durum metnin fare üzerine gelindiğinde görünecek kısmıdır. Diğer küçük kısım olan Başlık Açıklamasını da girebilirsiniz. Başlık için Resim Başlığımız ve Açıklama için bazı yer tutucu metinlerle gittik.
Hatta görüntüye tıkladıklarında ziyaretçilerinizi çekebileceğiniz bir bağlantı olan bir Başlık Bağlantısı da ekleyebilirsiniz. Belirli bir bağlantı istemiyoruz, bu yüzden bir kare işareti (#) gireceğiz. Bağlantıyı Yeni Sekmede açıp açmamayı seçebilirsiniz. Fakat bir bağlantımız olmadığı için bu bizi etkilemez.
Sırada Renk Kontrolleri var. Bir onaltılık kod girebilir veya renk seçiciden seçim yapabilirsiniz. Resim Yazısı Başlığı için varsayılan beyazı seçtik, Resim Yazısı Açıklama Rengi için ise açık gri (#d3d3d3) kullandık.
Değişiklikleri Kaydet’e tıklayın ve tekrar aşağı kaydırın.
Son olarak Hover Ayarlarına geliyoruz. Bu eklenti dairesel veya kare resimlerle çalışır. Görüntü Şeklimiz için Kare’yi seçtik.
Görüntü Vurgu Efektleri, Vurgu Efekti Seç açılır menüsünden 20 farklı efekt arasından seçim yapmanızı sağlar. Nasıl göründüklerini geliştiricinin demosunda veya Tüm Efektleri Kontrol Et bağlantısında görebilirsiniz. Effect 13’ü seviyoruz.
Son olarak Satır Başına Görüntü kontrolü, her satırda kaç görüntü görüntüleneceğini seçmenize olanak tanır. Yalnızca bir görüntümüz olduğundan, bir taneye ihtiyacımız var. İstediğiniz kadar farklı efekt ve bağlantı içeren birçok görüntüye sahip olabilirsiniz.
Görüntü Ekle düğmesi, aynı şekilde çalışabileceğiniz başka bir görüntü ekler. Kategori Ekle düğmesi, yeni bir görüntü grubu oluşturmanıza olanak tanır. Bir önizleme için Önizleme’yi tıklatabilirsiniz ve Kısa Kod Al düğmesi, etkin Kategori için kısa koda sahip olmanızı sağlar.
Son olarak Değişiklikleri tekrar Kaydet.
Bu resmi bir gönderiye veya sayfaya eklemek için Kısa Kodu Al düğmesini tıklayın ve kısa kodu kopyalayın.
Gutenberg’de bir kısa kod eklemek için artı işaretine tıklayarak bir blok ekleyin ve kısa kod bloğunu arayın. Elementor ile çalışıyorsanız shortcode elemanına ihtiyacınız varken, klasik editörde çalışıyorsanız HTML’yi daha fazla kullanarak düzenlerken shortcode’unuzu istediğiniz yere yerleştirmeniz yeterli.
Kısa kodu bloğun kısa kod alanına yapıştırın, Gönderinizi kaydedin ve bitirdiniz.
Ve resimlerinizin hepsi ayarlandı.
WordPress Görüntü Yakınlaştırma Efekti Nasıl Oluşturulur
Özellikle online mağazalarda popüler olan bir diğer kullanışlı efekt ise ziyaretçilerinizin ürünlerinizi detaylı bir şekilde incelemesini sağlayan yakınlaştırma efektidir. Bunu başka bir ücretsiz eklenti kullanarak elde edebilirsiniz: WP Image Zoom eklentisi.
Bununla birlikte bu eklenti ile görüntü yakınlaştırma efektlerinin nasıl oluşturulacağını başka bir makalede ayrıntılı olarak ele aldık. Tavsiyemizin arkasındayız – sadece iyi bir ürün görselini neyin oluşturduğunu bildiğinizden emin olun ve yakınlaştırma aracınız için Vurguluyken kontrollerini kullanın.
Konu Özeti
Ve işte karşınızda, dakikalar içinde ayarlanabilen çok farklı üç vurgulu efekt. Tabii ki, bu, WordPress’te görüntü üzerine gelme efektlerini kullanabileceğiniz sayısız yola çok az değiniyor. İşinize yarayanları bulmak için deneyebileceğiniz birçok başka eklenti var. İster galerilerinize biraz daha yumruk eklemenin bir yolunu arıyor olun, ister animasyonlu bir görsel kullanarak kullanıcılarınızın dikkatini web sitenizin başka bir yönüne çekin, bu buzdağının sadece görünen kısmı. Olasılıklar kelimenin tam anlamıyla sonsuzdur. Fakat size iyi bir araç seti sağladığımızı düşünüyoruz.