Yüksek kaliteli bir WordPress teması kullansanız bile, özelleştirme seçenekleri ile sınırlı hissedebilirsiniz. Flipbox’lar ve görsel gezdiriciler sitenize göz alıcı animasyonlu efektler ekler.
Bu yazımızda , WordPress web sitesine flipbox nasıl oluşturulur konusundan bahsedeceğiz.
Flipbox Nedir?
Flipbox, mausenizi üzerine getirdiğiniz zaman dönen bir kutudur. Bu vurgulu animasyon efektini, metin kutuları ve resimler dahil olmak üzere web sitenizin belirli bölümlerine ekleyebilirsiniz.
Terim, mause görüntünün üstüne geldiği zaman gerçekleşen “çevirme” özelliğinden gelmektedir. Görüntünün her iki tarafının bilgileri ve tasarımıyla birlikte görüntünün nasıl döndüğünü kontrol edebilirsiniz.
Web siteniz durağansa eğer, daha etkileşimli olmasını sağlamak için bir flipbox efekti kullanmanız web sitenizi dinamik bir görüntü elde etmesini sağlayacaktır.
Örnek verecek olursak, ürün fiyatlandırma sayfasına bir resim vurgulu flipbox ekleyerek, kullanıcılar fiyatlandırma katmanlarınızın üzerine geldiklerinde fiyatın görünmesini sağlayacaksınız.
Flipboxlar web sitenizin kullanıcı deneyimini geliştirebilir ancak aşırıya kaçmamak önemlidir.
Şimdi WordPress’te flipbox kaplamaları ve gezinmeleri nasıl oluşturulur bir göz atalım.
WordPress’te Flipbox Efektleri Nasıl Oluşturulur
Flipbox – Awesomes Flip Boxes Image Overlay eklentisini kullanarak oluşturulmaktadır. Bu eklenti kullanımı kolay ve esnektir. WordPress ‘in en iyi flipbox ve image hover eklentisidir.
Eklentinin ücretsiz sürümü size hız ve basitlik sunar. Eklenti yüklendikten sonra, sitenize hızlı bir şekilde güzel görünümlü çevirme kutuları ekleyebilirsiniz.
Daha fazla özelleştirme seçeneğine ihtiyacınız varsa, eklentinin premium sürümüne yükseltmek isteyebilirsiniz. Bu, flipbox’larınızın renklerini kontrol etmenizi ve özel CSS eklemenizi sağlar.
Sitenize eklendiğinde mevcut şablonların zaten harika göründüğünü fark edebilirsiniz, bu durumda yükseltmeye gerek yoktur.
Yapmanız gereken ilk şey Flipbox – Awesomes Flip Boxes Image Overlay eklentisini kurmak ve etkinleştirmektir.
Eklenti yükleyip etkinleştirildikten sonra, Flip Box »Yeni Oluştur kısmına giderek ilk flipbox’ınızı oluşturabilirsiniz .
Burada yer alan şablonlar yeterli değilse, kullanabileceğiniz daha fazla şablon için ‘Şablonları İçe Aktar’ menü seçeneğini tıklayabilirsiniz.
Eklentinin ücretsiz sürümü ile, aralarından seçim yapabileceğiniz 5 farklı şablon ve içe aktarabileceğiniz 10 şablon daha bulunmaktadır.
Yeni bir özelleştirilebilir şablonu içe aktarmak için Stil numarasının yanındaki ‘İçe Aktar’ butonuna tıklayın.
Şimdi, şablonunuzu seçip özelleştirmeye başlama zamanı.
İlk flipbox tasarımınızı yüklemek için ‘Stil Yarat’butonuna tıklamanız gerekiyor.
Bu yaptığınız işlem, flipbox’ınızı adlandırabileceğiniz ve özelleştirmek istediğiniz düzeni seçebileceğiniz bir açılır menü açar.
1., 2., 3. ‘Düzenler’ seçenekleri, yerleşimdeki bireysel flipbox’larla eşleşir. Seçimlerinizi yaptıktan sonra “Kaydet” butonuna tıklayın.
Son tasarımınızın flipbox şablonuyla yakından eşleşeceğini belirtmek önemlidir, bu nedenle web sitenizde nasıl görünmesini istediğinize benzeyen bir şablon seçmek en iyisidir.
Flipbox’ınızın görünümünü değiştirmek için kullanacağınız üç ana sekme vardır: ‘Genel’, ‘Ön’ ve ‘Arka Uç’.
Bu sekmelerin her birinde yazı tiplerini, dolguyu ve kenar boşluklarını değiştirebilirsiniz.
Ardından, flipbox’ın her iki tarafındaki metni değiştireceğiz.
Ekranın altındaki flipbox’ın üzerine gelin ve “Düzenle” butonuna tıklayın.
Bu işlem ön metni, arka metni ve arka plan resmini değiştirmenize izin veren bir açılır pencere açacaktır.
Başlığı değiştirmek için, ‘Ön Başlık’ metin kutusunu ve farklı bir simgenin görüntülenmesini istiyorsanız ‘Yazı Tipi Simgesi:’ kutusunu düzenleyin.
Bir arka plan resmi eklemek istiyorsanız, “Ön Resim” seçeneğinin sağında yer alan “Resmi Yükle” butonuna tıklayın.
Ardından, yeni bir resim yükleyin veya mevcut Medya kitaplığınızdan bir resim seçin.
Daha sonra, ‘Arka Uç Ayarları’nın altındaki flipbox’ın arkası için aynı adımlar dizisini takip edeceksiniz.
Burada, kart döndüğünde görüntülenen başlığı ve metni değiştirebilirsiniz.
Ayrıca ‘Arka Uç Butonu metni’ ve ‘Bağlantı’ alanlarını da değiştirebilirsiniz.
Bunlar, buton metnini ve kullanıcılarınızın tıklandığında nereye gideceklerini değiştirir.
Son olarak, flipbox’ın arkasındaki arka plan resmini değiştirmek için ‘Şimdi Yükle’ butonuna tıklayın.
Yukarıda gösterdiğimiz işlemin aynısı, bir resim yükleyebilir veya medya kitaplığınızdan birini seçebilirsiniz.
Düzenlemeyi bitirdiğinizde, değişikliklerinizi kaydetmek için ‘Sun’ butonuna tıkladığınızdan emin olun.
Yeni değişikliklerinizin hemen ‘Önizleme’ penceresinde görüneceğini fark edeceksiniz.
Tüm flipbox satırı oluşturmak istiyorsanız, ‘Yeni Çevir Kutuları Ekle’ meta kutusundaki ‘+’ simgesine tıklayın.
Bu işlem, ikinci flipbox’ınızı özelleştirmenize izin veren yukarıdakine benzer bir açılır kutu getirecektir.
Şimdiye kadar flipbox’larınızı oluşturdunuz ve özelleştirdiniz, bu yüzden onları WordPress sitenize eklemenin zamanı geldi.
Bunu yapmanın en kolay yolu, birlikte verilen kısa kodu kullanmaktır . Ekranınızın sağ tarafında, ‘Shortcode’ etiketli bir meta kutu bulunmaktadır, aşağıdaki resme benzeyen kısa kodu kopyalayın.
Ardından, flipbox eklemek istediğiniz bir sayfaya veya gönderiye gidin ve kısa kodunuzu yapıştırın.
Yayınınız zaten yayındaysa ‘Yayınla’ butonunu veya’ Güncelle’ butonunu tıklayın.
Yeni flipboxlarınız artık sitenizde yayında olacak.
Tarayıcı pencerenizi yeniden boyutlandırdığınızda, flipbox’ların %100 duyarlı olarak ayarlandığına dikkat edin.
Bu eklenti ayrıca, temanız tarafından desteklenen herhangi bir widget alanına ekleyebileceğiniz bir flipbox widget’ı içerir .
Bunu yapmak için Görünüm »Widget kısmına gidin ve ‘Flipbox – Awesomes Flip Boxes Image Overlay’ başlıklı widget’ı bulun.
Ardından, widget’ı tercih ettiğiniz konuma sürükleyip bırakabilirsiniz.
Son olarak, ana Flipbox eklenti menüsünde bulunabilen stil kimliğini girin ve ‘Kaydet’ butonuna tıklayın.
Bu yazımızın,WordPress web sitesine Flipbox eklemeyi öğrenmenize yardımcı olacağını umuyoruz.
Dilerseniz daha önce yazmış olduğumuz WordPress Web Sitesine Resim Galerisi Nasıl Oluşturulur ? yazımızı okuyabilirsiniz.
