WordPress'te bir ışık kutusu nasıl oluşturulur

Yüksek kaliteli fotoğraflarınız, videolarınız, bilgi grafikleriniz ve hatta mutlaka görülmesi gereken bir grafiğiniz varsa, bunları web sitenizde bir ışık kutusuyla tüm ihtişamıyla gösterin!

Birisi bir resme tıkladığında, ışık kutusu onlara medya dışı sayfa öğelerinin karartıldığı yüksek kaliteli, tam boyutlu bir sürüm sağlar. Sonuç? Ziyaretçileriniz, minimum dikkat dağıtıcı ve artık gözlerini kısarak küçük resimlere bakmadan çok daha iyi bir izleme deneyimi yaşar (mobil tarama için gerçek bir bonus).

Lightbox'lar kesinlikle ziyaretçinizin dikkatini anında çekmenin bir yoludur ve bu kısa eğitim ile WordPress siteniz için birkaç dakika içinde bir lightbox oluşturabileceksiniz.

Işık Kutusu nedir?

Işık kutusu, daha küçük bir resmi tam boyutta göstermek için gönderilerde ve sayfalarda görünen bir kaplama veya açılır penceredir. Tıklandığında, medya ekranınızda görünür ve arka plan (medya dışı öğeler) bulanıklaşır veya koyulaşır. Tüm görsel dikkat dağıtıcılar kaldırıldığında, ışık kutusu açılır penceresi öne çıkar ve bunun yerine ana odağı görüntüye veya mesajınıza değiştirir.

Lightbox kullanmanın en yaygın yolu, blogunuzda yüksek kaliteli resimleri tam boyutlarında görüntülemektir. Bunlar zariftir ve uygulanması kolaydır ve web sitenize hoş, profesyonel bir görünüm ve his verir. Ayrıca, ziyaretçilerinizi mevcut sayfada tutuyorlar çünkü artık ayrılmalarına gerek yok!

Bir ışık kutusu ne zaman kullanılır?

Işık kutuları ağırlıklı olarak görüntüleri sergilemek içindir, ancak başka birçok nedenden dolayı kullanışlıdırlar. E-ticaret sitelerinin ürünleri sunması ve satışları artırması için harika bir yoldur. Veya bir e-kitabın birkaç sayfasının önizlemesini vermek veya e-posta ve haber bülteni kayıtlarını toplamak için bir tercih formu eklemek için.

Yaratıcı olmak istiyorsanız, site dışı projelere ve video içeriğine bağlantı vermek için bir ışık kutusu galerisi de kullanabilirsiniz. Evet, bir lightbox kullanarak web sitenize orijinal içeriğin yanı sıra küratörlüğünü de eklemek mümkündür.

WordPress Web Sitenize Işık Kutuları Ekleyin

WordPress'teki çoğu şeyde olduğu gibi, bu şovu yola çıkarmanın en hızlı yolu bir eklenti kullanmaktır. Bir ışık kutusu kurmak için birçok özel WordPress ışık kutusu eklentisi vardır. Basit olması için, bu demo için dFactory'nin basit (ve ücretsiz) Duyarlı Işık Kutusu ve Galeri eklentisini kullanacağız.

Duyarlı Işık Kutusu ve Galeri'yi öneriyoruz çünkü şu anda mevcut olan ücretsiz WordPress ışık kutusu eklentileri arasında en yüksek puana sahip olanı. Çeşitli ışık kutusu tasarımları ile birlikte gelir ve herhangi bir mobil ekrana uyacak şekilde yapılmıştır – böylece içeriğinizi farklı cihazlarda görüntüleyen insanlar hakkında endişelenmenize gerek kalmaz.

Lightbox'ınızı Oluşturun

Başlamak için eklentiyi kurun ve etkinleştirin. Şimdi, kısa (ama etkileyici bir şekilde kapsamlı) bir izlenecek yol ile ilgileniyorsanız, Turu Başlat'ı tıklayın.

Şimdi galerinize bazı resimler ekleme zamanı. Karışıklığı önlemek için Lightbox ayarları sekmesini açık bırakıp aşağıdaki ekran görüntüsünde gösterildiği gibi Galeri sekmesini açıyoruz:

Sonraki birkaç adımda, temel bir ışık kutusunun nasıl oluşturulacağını anlatacağız.

• Galerinize anlamlı bir ad vererek başlayın. Bu örnek için Puppies stok fotoğraflarını kullandığımız için “Puppies” kullanıyoruz.

• Aşağıdaki metin kutularına bakın ve resimlerinizi çekmek için dört seçenek göreceksiniz. Bu demo için, tıpkı yerel WordPress Galerisi gibi çalışan “Medya Kitaplığı” kullanıyoruz. Web sitenizin Medya Kitaplığından aynı anda birden fazla resim seçebilir veya yenilerini yükleyebilirsiniz.

• Nereden resim çizeceğinize karar verdikten sonra, WordPress medya kitaplığınızdan yeni resimler yüklemek veya mevcut resimleri eklemek için Resim seç'e tıklayın.

İpucu : Kendi fotoğrafınız yoksa PixaBay'den ücretsiz resimler ekleme seçeneği de vardır. Hayvan temasına bağlı kalarak, galerinize eklemek için "İnekler"in ücretsiz, kaliteli resimleri için örnek bir arama burada.

• Seçiminizden memnun kaldığınızda "Bu resimleri kullan"ı seçin.

• Resimleriniz artık Galeri Resimleri bölümünde mevcuttur. Siparişten memnun değilseniz, istediğiniz pozisyonlara sürükleyip bırakın.

• Görüntüleri düzenlemek veya silmek için, birkaç yeni seçeneği ortaya çıkarmak için üzerine gelin. Bir resme başlık, alt yazı, alternatif metin veya açıklama eklemek isterseniz, Resmi düzenle seçeneğini tıklayın. Resimleri kaldırmak için resmin sağ üst köşesindeki ilgili seçeneğe tıklayın.

• Bu noktada bir ışık kutusu oluşturdunuz. Gerçekten bu kadar basit. Değişikliklerinizi kaydedebilir ve yayınlarınıza veya sayfalarınıza ışık kutunuzu eklemek için sonraki bölüme geçebilirsiniz. Alternatif olarak, eklentinin kişiselleştirme odası sayesinde bazı benzersiz şeyler yapabilirsiniz.

Lightbox'ınızı Özelleştirin

Tasarım öğeleri ve özelleştirme eklemek için eklentiden en iyi şekilde yararlanmak için mevcut sekmelere göz atın. Her sekmede tam olarak nelerin mümkün olduğuna dair daha fazla ayrıntı için resmi belgelere göz atmanızı tavsiye ederim. İşte hızlı bir geçiş:

Yapılandırma sekmesi — İstediğiniz galeri stilini seçin. Dört seçeneğiniz var: Genel (Temel Izgara), Temel Izgara, Temel Kaydırıcı veya Temel Duvarcılık.

Tasarım sekmesi — Galerinizin tasarım efektleri ve renkleri ile yaratıcı olun.

Sayfalama sekmesi — Bu sekme ile sayfalandırma türünü, sayfa başına görüntülenen resim sayısını ve konumlarını tanımlayabilirsiniz.

Lightbox sekmesi – Burada resim boyutunu ayarlamanın yanı sıra bir başlık ve başlık eklersiniz.

Çeşitli sekmesi — Bazı ekstra ayarları yapılandırın ve özel sınıflar ve bir Galeri açıklaması ekleyin.

Son olarak, bir Öne Çıkan resim atayabilirsiniz. Bunu yapmak için ilk sekmeye (resimler) geri dönün.

Lightbox'ınızı ekleyin

Galerinizi tasarladıktan sonra, onu bir lightbox olarak yazılarınıza veya sayfalarınıza eklemenin zamanı geldi. En basit yol, kısa kodu şu şekilde düzenleme ekranınıza yapıştırmaktır:

• WordPress yöneticinizden Galeri > Tüm Galeriler'e tıklayın
• Kısa kodu Kısa Kod sütunundan kopyalayın

• Lightbox'ı içeren sayfayı veya gönderileri açın ve aşağıdaki örnekte olduğu gibi kısa kodu doğrudan metin düzenleyici bloğuna yapıştırın.

Değişikliklerinizi kaydedin ve yeni ışık kutunuzu kontrol edin. İşte bizimki nasıl çıktı:

• Sayfada dikkat dağıtıcı başka hiçbir görünür şey olmadan tam boyutta nasıl göründüğünü görmek için bir resme tıklamayı deneyin. Açılır ekrandan çıkmak veya sonraki tam boyutlu galeri görüntüsüne geçmek için gezinme seçeneklerine dikkat edin.

Eğlenmeyi Unutmayın!

Lightbox ile ziyaretçilerinize içeriğinizi görüntülerken çok daha iyi bir deneyim sunabilirsiniz. Artık resimleriniz, kimsenin mobil cihazlarında pikselli sürümlere yakınlaştırmak zorunda kalarak gözlerini kısmasına veya rahatsız hissetmesine gerek kalmadan hak ettikleri ilgiyi görüyor.

Bu kolay öğreticiyi izleyerek, kullanıma hazır WordPress'te temel bir lightbox oluşturma ve bir eklentiyle daha gelişmiş bir şey oluşturma becerisine sahip olursunuz. Şimdi onunla biraz eğlenme zamanı! Duyarlı Işık Kutusu ve Galeri eklentisi, ışık kutunuzu özelleştirmek ve onu WordPress siteniz için gerçekten benzersiz bir şeye dönüştürmek için bolca kapsam sunar.

Harika lightbox'ların nasıl yapılacağına dair ipuçlarınız ve püf noktalarınız var mı? Belki de favori bir lightbox eklentiniz var? Aşağıdaki yorumlarda bize bildirin!