WordPress sitenizde görsel olarak sürükleyici ve ilgi çekici bölümler oluşturmak, konu ziyaretçilerinizin dikkatini çekmeye geldiğinde uzun bir yol kat edebilir. Genel olarak sitenizin bir bütün olarak görsel olarak daha çekici ve etkileşimli görünmesini sağlamanın harika bir yolu, sayfalarınıza fareyle üzerine gelme efektleri eklemektir. Fakat bu etkilerden gerçekten en iyi şekilde yararlanmak ve site ziyaretçilerinizin takdir edeceği bazı etkileşimler sunmak için, flipbox kaplama efekti kullanmanızı öneririz.
Bu sefer, bir eklenti kullanarak WordPress sayfalarınıza flipbox kaplamaları ve fareyle üzerine gelme efektlerini nasıl kolayca oluşturabileceğinizi ve ekleyebileceğinizi göstereceğiz. Fakat başlamadan önce, flipbox’ın gerçekte ne olduğunu ve sitenize nasıl fayda sağlayabileceğini açıklayacağız. Şunlar hakkında konuşurken okumaya devam ettiğinizden emin olun:
-
Flipbox Nedir ve Nasıl Yararlıdır?
-
WordPress’te Flipbox Oluşturma ve Kurma
-
Flipbox’ınızın Önünü ve Arkasını Şekillendirme
-
Flipbox’ınızın İçeriğini Düzenleme
-
WordPress Sitenize Flipbox Ekleme
Flipbox Nedir ve Nasıl Yararlıdır?
Flipbox, adından da anlaşılacağı gibi, üzerine gelme animasyon efekti olan ve genellikle çeşitli öğelerle dolu bir kutudur. Bu fareyle üzerine gelme efekti, kutunun dönmesini sağlar veya daha doğrusu, farenizle üzerine geldiğinizde kutuyu “çevirir”. Flipbox vurgulu animasyon efekti birçok farklı sayfa öğesinde ve bölümünde kullanılabilir ve genellikle resimlere, çeşitli metin kutularına vb. eklenir. Bu efekti eklemek için kullandığınız araca bağlı olarak görüntü ve/veya diğer öğeler (hangi hızda, hangi yönde vb.) dönecektir. Hatta farklı renkler ayarlayabilecek, ek giriş ve/veya çıkış animasyonları ekleyebilecek ve diğer şeylerin yanı sıra düğmeler ve simgeler gibi öğeler ekleyebileceksiniz.
Çoğunlukla statik öğeler içeren bir web sitesine daha fazla etkileşim eklemek istiyorsanız, bir flipbox efekti özellikle yararlı olabilir. Kitlenizin dikkatini eğlenceli ve çekici bir şekilde çekmek ve genel kullanıcı deneyimlerini artırmak istiyorsanız da harika olabilir. Örneğin markanız ve/veya şirketinizle ilgili çeşitli farklı görseller sunmak için bir flipbox görsel bindirme efekti kullanabilirsiniz. Resim ters çevrildiğinde, ekranda işinizle ilgili çeşitli bilgiler içeren farklı bir resim görünebilir. Bu etkiyi, belirli ürün ve/veya hizmetlerin fiyatlandırma bilgilerini ortaya çıkarmak, önemli bağlantıları ve/veya harekete geçirici mesaj düğmelerini veya ziyaretçileriniz için faydalı olacak diğer bilgileri ortaya çıkarmak için de kullanabilirsiniz. Kısacası, bu efekti kullanabileceğiniz yollar sınırsızdır.
Daha fazla uzatmadan, WordPress’te flipbox kaplamalarını nasıl oluşturabileceğiniz ve ekleyebileceğiniz aşağıda açıklanmıştır.
WordPress’te Flipbox Oluşturma ve Kurma
Flipbox görüntü bindirmeleri ve üzerine gelme efektleri oluşturmak ve eklemek için kullanabileceğiniz harika bir eklenti Flipbox – Harika Flip Boxes Image Overlay’dir. Bu eklenti, kutu içindeki çeşitli öğeleri çevirecek ve sergileyecek bir kutu oluşturarak sayfalarınıza harika flipbox resim bindirmeleri eklemenizi sağlar. Esasen eklenti, bilgi kutusunu ve harekete geçirici mesaj öğesini birleştirerek, flipbox’ın normal bir bilgi kutusu gibi görünmesini sağlar. Fakat kullanıcı fareyle üzerine geldiğinde, kullanıcının harekete geçmesini sağlayacak çeşitli unsurları ortaya çıkarır. Resimlerin yanı sıra, sitenizin bir bütün olarak daha ilgi çekici ve profesyonel görünmesine yardımcı olmak için videolar, haritalar, düğmeler, simgeler vb. dahil her türden öğeyi flipbox’ınıza ekleyebilirsiniz.
Renkleri ayarlama yeteneği, 20’den fazla şablona erişim, 100’den fazla farklı efekt ve profesyonel destek gibi daha da fazla özellik istiyorsanız, Flipbox Awesome Flip Boxes Image Overlay eklentisinin premium sürümüne yükseltebilirsiniz. Temel plan için fiyatlandırma 19,99 dolardan başlıyor.
Eklentiyi yükleyip etkinleştirdikten sonra, eklentinin bazı temel seçeneklerini ayarlamak için Flip Box >> Ayarlar sayfasına gidebilirsiniz.
Orada, eklentiyi düzenleyebilecek bir kullanıcı rolü (Yönetici, Editör, Yazar vb.) seçebilecek ve Font Awesome, Google Font ve PreLoader desteğini etkinleştirmek isteyip istemediğinizi seçebileceksiniz. Bu seçeneklerden birini veya daha fazlasını devre dışı bırakmak, flipbox’larınızı daha hızlı yüklemenizi sağlar, bu nedenle bunlardan bazılarına ihtiyacınız yoksa devre dışı bırakmanızı öneririz.
Flipbox’ınızı oluşturmaya başlamak için Yeni Oluştur sekmesine basın.
Varsayılan olarak beş farklı stil arasından seçim yapabileceğinizi göreceksiniz. Şablon özelleştirmenize başlamak için Stil Oluştur’a tıklayın.
Mevcut üç düzenden birini seçme seçenekleriyle (stil başına üç farklı düzen kullanılabilir) yeni bir kutu açılır ve flipbox’ınızın adını girer (bu, kısa kodunuzun adı olacaktır). Flipbox’ınızın stilinin seçtiğiniz şablona en yakın görüneceğini unutmamalısınız, bu nedenle vizyonunuza en uygun olanı seçtiğinizden emin olun.
İşiniz bittiğinde Kaydet düğmesine basın.
Daha fazla stile erişmek istiyorsanız, eklentinin ücretsiz sürümü ayrıca Şablonları İçe Aktar seçeneğini kullanmanıza ve beş ek şablon stilinden birini içe aktarmanıza olanak tanır.
Flipbox’ınızın Önünü ve Arkasını Şekillendirme
Şimdi, Flipbox Awesome Flip Boxes Image Overlay eklentisinin ücretsiz sürümüyle, üç farklı sekme kullanabileceksiniz – Genel, Ön ve Arka Uç.
Diğer iki sekme – Özel CSS ve Destek – eklentinin premium sürümüne yükseltirseniz kullanılabilir hale gelir.
Genel sekmesine geri dönün – isterseniz burada Çevirme Türü ve Çevirme Efektleri ile ilgili seçenekleri değiştirebileceksiniz. Bu seçenekler, flipbox’ınızın fareyle üzerine gelindiğinde nasıl ters döneceğini belirleyecektir. Hatta satır başına öğe sayısını ayarlayabilir (en fazla altı öğeye sahip olabilirsiniz) ve flipbox’ınızın genişliğini, yüksekliğini ve dolgularını ayarlayabilirsiniz.
Hatta flipbox’ınızın görünümünü başka bir seviyeye taşımak istiyorsanız, mevcut birçok giriş ve/veya çıkış animasyonu arasından seçim yapabilirsiniz.
Değişiklikleri flipbox’ınıza kaydetmek için Gönder düğmesini tıklamanız gerekir.
Değişikliklerinizi önizlemek isterseniz, sayfanın altında bulunan Önizleme bölümünü bulmanız yeterlidir.
Örneğin “rotateInUpLeft” animasyonunu seçtiğimizde flipbox önizlememiz şöyle görünür:
Hatta “Alttan Yukarı Çevir” çevirme türünü seçtik ve “easing_easeOutBack” adlı efekti seçtik. İşte göründüğü gibi:
Tabii ki, tüm bu ayarları kendi tercihlerinize göre ayarlamaktan çekinmeyin.
Ön sekmesinde, üzerine gelmediğiniz zamanlarda flipbox’ınızın görünümüyle ilgili tüm ayarları yapabileceksiniz.
Burada görüntü yüksekliğini, dolguyu, kenarlık rengini ve boyutunu değiştirme ve ayarlama, Simgeyi (boyut, genişlik ve kenarlık yarıçapı) ve Başlık ayarlarını (metninizle ilgili, yani yazı tipi boyutu, yazı tipi stili) ayarlama seçeneklerini bulacaksınız. , yazı tipi ağırlığı vb.).
Arka plan ve kenarlık renklerini, simge rengini ve simge arka planını değiştirme ve başlık rengini ve yazı tipi ailesini seçme gibi buradaki seçeneklerden bazıları yalnızca eklentinin Pro sürümünde kullanılabilecektir.
Değişikliklerin geçerli olması için bir kez daha Gönder düğmesine basmanız gerekir.
Arka Uç sekmesi, üzerine geldiğinizde flop kutunuzun nasıl görüneceğine ilişkin seçenekleri ayarlamanıza olanak tanır. Ve böylece, dolgu ve kenarlık boyutunu değiştirmek, yazı tipi boyutunu, stilini, ağırlığını vb. değiştirmek ve ayrıca düğme ayarlarını tüm ayrıntılarıyla ayarlamak için bu sekmeyi kullanacaksınız.
Bir kez daha, buradaki özelleştirme seçeneklerinden birkaçı (arka plan ve kenarlık renkleri, düğme ve metin renkleri vb.) yalnızca pro sürümde mevcuttur.
Flipbox’ınızın İçeriğini Düzenleme
Şimdi, flipbox’ınızın arka plan resmi, simgesi ve özel metni (her iki tarafta) gibi şeyleri değiştirmek için Önizleme bölümünde bulunan Düzenle düğmesine basmanız gerekir. Flipbox önizlemesinin üzerine geldiğinizde Düzenle düğmesini bulacaksınız:
Bunu yaparak, ön ve arka metninizi girmenize, arka plan resminizi değiştirmenize vb. izin verecek yeni bir pencereyi tetikleyeceksiniz.
Ön Ayarlar bölümünde Ön Başlığı, Ön Simgeyi değiştirebilecek ve Ön Görüntünüzü yükleyebileceksiniz. Arka Uç Ayarları bölümü, flipbox’ınız “ters çevrildiğinde” etkinleştirilecek içeriği düzenlemenizi sağlar. Burada, Arka Uç Bilgilerinizi, Arka Uç Düğme Metnini, Bağlantınızı (düğmenizin) ve Arka Uç Arka Plan Resmini ekleme seçeneklerini bulabileceksiniz.
İşiniz bittiğinde Gönder düğmesine bastığınızdan emin olun.
Birden fazla flipbox oluşturmak istiyorsanız, Add New Flip Boxes (sağda) adlı meta kutuda bulunan “+” simgesini seçmeniz yeterlidir.
Bunu yaptığınızda, yukarıda bahsettiğimiz özelleştirme seçenekleriyle yeni bir açılır pencere açacaksınız.
WordPress Sitenize Flipbox Ekleme
Flipbox’ınızın ayarlarını düzenlemeyi bitirdikten sonra, onu WordPress sitenize eklemeye devam edebilirsiniz.
Bunu, ayarlar ekranınızın sağ tarafında oluşturulan kısa kodu kullanarak yapabilirsiniz. Kısa kodu, Kısa Kod meta kutusunun altında bulacaksınız:
Bu kısa kodu kopyalamalısınız. Daha sonra seçtiğiniz sayfaya/yazıya gidin ve kısa kod bloğunu kullanarak kısa kodu yapıştırın. Bunu yapmak için editörünüzdeki (+) veya “Blok Ekle” simgesine basın ve Kısa Kod bloğunu bulup ekleyin.
Kısa kodu bloğa yapıştırın, Yayınla/Güncelle düğmesine basın ve hazırsınız.
Flipbox’ınızın sayfanızda/gönderinizde canlı olarak nasıl görüneceğini görmek için Önizleme düğmesine tıklayabilirsiniz. Hatta sayfanızın mobil ve tablet ekranlarında nasıl göründüğünü görmek için Tablet ve Mobil sekmelerini kullanabilirsiniz.
İsterseniz, seçtiğiniz herhangi bir widget alanına bir flipbox widget’ı da ekleyebilirsiniz (tabii ki, söz konusu widget alanı kullandığınız temada mevcutsa).
Görünüm >> Widget’lara gidin ve Flipbox – Harika Flip Boxes Image Overlay adlı blok widget’ını ekleyin. Widget’ı istediğiniz widget alanına sürükleyip bırakmanız yeterlidir.
Daha sonra eklenti sayfasında (Flip Box sekmesi) bulabileceğiniz stil kimliğini girmeniz gerekir.
Güncelle düğmesine basın ve bu kadar. Flipbox’ınızı eklediğiniz widget alanına eriştiğinizde, flipbox widget’ınızı çalışırken görebileceksiniz.
WordPress’te blok widget kullanımı hakkında her şeyi öğrenmek için, aynı konudaki makalemize göz atmanızı öneririz.
Konunun Özeti
Flipbox’lar, ziyaretçilerinizin genel kullanıcı deneyimini geliştirmek için WordPress sitenize ekleyebileceğiniz oldukça pratik ve görsel olarak sürükleyici öğelerdir. Kurulumu oldukça kolay olduğundan ve flipbox’ınızın görünümünü ihtiyaçlarınıza göre tamamen özelleştirmek ve stilize etmek için gereken tüm özelliklerle birlikte geldiğinden, Flipbox – Harika Flip Boxes Image Overlay eklentisini kullanmanızı öneririz. Bu durum farklı döndürme efektleri kullanmayı, bu ekstra güç için bazı ek animasyon efektleri kullanmayı, yazı tiplerinin, düğmelerin ve simgelerin stilini ayarlamayı ve daha fazlasını içerir. Devam etmenizi ve WordPress sitenizin etkileşimini gerçekten zenginleştirmek için marka kimliğinize ve vizyonunuza en uygun flipbox’lar oluşturmanızı öneririz.