WordPress Web Sitenize Video Arka Planı Nasıl Eklenir

Video arka planı, bir web sitesinin en muhteşem özelliklerinden biridir. Web sitenizi yalnızca canlı ve ilginç kılmakla kalmaz, aynı zamanda daha fazla resim ve bilgi görüntüleyebilir. Ancak, bahse girerim pek çok insan web sitelerine video arka planı eklemeyi bilmiyor. Bu nedenle, web sitenize bir video arka planı eklemek istiyorsanız bu nihai kılavuz yardımcı olacaktır.

Video Arka Planını Destekleyen Bir WordPress Teması Kullanın

Bazı WordPress temaları video arka planının görüntülenmesini destekler, bu nedenle temayı sergilemek için ayarlamanız yeterlidir.

Örneğin, bu Temiz Bloklar teması, başlık kapağı alanındaki video arka planını destekler. Ardından, Özelleştirici'ye giderek, Başlık Ortamı bölümünü bularak ve temanın gereksinimlerini takip ederek video eklemek için yalnızca birkaç basit adıma ihtiyacınız vardır.

Çoğu tema bir video yüklemenize izin verir. Ayrıca, çoğu yukarıda yaptığım gibi YouTube'dan gömülü bağlantıları destekleyecektir. Bu sadece daha hızlı, daha basit olmakla kalmayacak, aynı zamanda web sitesinin daha hafif olmasına yardımcı olacak ve böylece web sitesinin hızını optimize edecektir. Her tema farklı şekillerde özelleştirilecektir, bu nedenle talimatları dikkatlice okumanız gerekir.

Bununla birlikte, temalar yalnızca belirli bir alanda çalışan videoları destekleyebileceğinden, temaları kullandığınızda video arka plan alanı kısıtlanabilir. Başka bir alana video arka planı eklemek isterseniz ne olur? WordPress web sitenize video arka planı eklemek için bir eklenti kullanmanın zamanı geldi.

Web Sitesine Video Arka Planı Eklemek İçin Bir Eklenti Kullanın

Bu konuda size yardımcı olabilecek birçok eklenti var. Araştırdıktan sonra, Advanced WordPress Background (AWP) eklentisinin teknoloji hakkında fazla bilgisi olmayanlar için kullanımının çok kolay olduğunu buldum. Ayrıca video arka planınızın güzel bir şekilde görüntülenmesine yardımcı olur ve birçok özelleştirme seçeneği sunar.

Bu eklentinin yalnızca WordPress 5.0 sürümünde ve Gutenberg düzenleyicide çalıştığını unutmayın. Bu yüzden WordPress sürümünüzü güncellemeyi ve bu düzenleyiciyi kullanmayı unutmayın.

Adım 1: Eklentiyi Kurun

Bu eklentiyi wordpress.org adresinden indirebilir, ardından Gösterge Tablosu > Eklenti > Yeni Ekle > Eklenti Yükle seçeneğine gidin, yükleyin, kurun ve etkinleştirin.

Veya Pano > Eklenti > Yeni Ekle'de eklentiyi bulun ve Yükle > Etkinleştir'i tıklayın.

2. Adım: Video Arka Planı Ekleyin

Bir video arka planı eklemek, Gutenberg'e bir blok eklemeye benzer. Yani Gutenberg'e aşina iseniz, kolay. Değilse, Gutenberg'i kullanma talimatlarını okuyabilirsiniz.

Video arka planı eklemek istediğiniz bir sayfaya veya makaleye gidin, yeni bir blok ekleyin ve AWB'nin Arka Plan bloğunu bulmak için “awb” anahtar kelimesini arayın.

Bu bloğu yerleştirdikten sonra, ayarlamak için sağ kenar çubuğunda Blok sekmesini seçin. Arka plan için resim, renk ve video olmak üzere 3 seçenek vardır. Video arka planı eklemek için Video'yu seçin. Ardından 2 seçeneğiniz vardır: videoyu YouTube veya Vimeo URL'sinden ekleyin veya kendi kendine barındırılan videoları yükleyin.

İlk seçeneği seçerseniz, bağlantıyı Video URL bölümüne eklemeniz yeterlidir.

İkinci seçenek için Kendi Kendine Barındırılan bölümüne gidin. Yüklenecek 3 tür video formatı vardır:

İstediğiniz formatı seçin, ardından kitaplıkta mevcut bir videoyu seçin veya yeni bir tane yükleyin. Bu kadar.

3. Adım: Video Arka Planınızı Özelleştirin

Videoyu Tam Yükseklikte Görüntüleme ve Videoya Blok Ekleme

Videoyu yerleştirdikten sonra çerçevesi bu kadar küçük oluyor. Videoyu tam yükseklikte görüntülemek için bloğun araç çubuğunda Tam yükseklik bölümünü seçin.

Aşağıda, metinlerle birlikte tam yükseklikte görüntülenen video arka planı bulunmaktadır. Kenar çubuğundaki Blok sekmesinde normal olarak metinler için boyutu, rengi, konumu vb. özelleştirebilirsiniz. Bu videoyu başlık kapağına veya harekete geçirici mesaj bölümüne koymak istiyorsanız bu kullanışlıdır.

Hatta metinleri herhangi bir blokla değiştirebilirsiniz. Bu, herhangi bir Gutenberg bloğu eklemeye benzer.

Video ayarları

Video sekmesinde, video arka planınızı uygun şekilde görüntülemek için bazı ana bölümleri aşağıdaki gibi ayarlamalısınız:

(1): mobil cihazlarda arka plan videosunu etkinleştirebilir veya devre dışı bırakabilirsiniz.
(2) ve (3): özellikle orijinal video çok uzun olduğunda istenen bölümü görüntülemek için videonun başlangıç ​​ve bitiş zamanını buraya girin.
(4): bittiğinde videoyu tekrarlayabilirsiniz. Videonun otomatik olarak yeniden oynatılmasını sağlamak için bu özelliği etkinleştirmeniz gerektiğini düşünüyorum.

Poster Resmi Ayarları

Aşağı kaydırdığınızda Poster Resmi bölümünü göreceksiniz. Burada seçtiğiniz fotoğraf, video görüntülenmeden 1 saniye önce görüntülenecektir. Aşağıdaki seçenekler, görüntünün uygun boyutunu ve stilini özelleştirmenize olanak tanır.

Poster resmini ekledikten sonraki sonuç.

Yer Paylaşımını Yükle

(1) video arka planının kaplama rengidir ve (2) kaplamanın şeffaflığıdır. Örneğin, turuncu, sitemin ana tonudur, bu yüzden videonun kaplamasını web tasarımıyla eşleştirmek için bu rengi seçtim.

Renk Paletine gelince, videoya bir alternatif. Başka bir deyişle, aslında bir video arka planından renkli arka plana geçersiniz. Bu renkli arka planı kaldırmak için Temizle düğmesini seçin.

Paralaks ve Fare Paralaks efektlerini yükleyin

Paralaks sekmesinde bu efektleri açıp kapatabilir ve farklı paralaks türlerini kolayca seçebilirsiniz. Bu çok güzel ve ilginç bir efekt, bu yüzden onu kullanmalı ve sitenize uygun bir stil seçmelisiniz.

Paralaks etkisi size tanıdık gelebilir, ancak fare paralaks etkisi size tanıdık gelmeyebilir. Fareyi videonun üzerine getirdiğinizde kolayca görülebilir, ardından video içindeki sahne de hareket edecektir.

Fare paralaksı > Etkinleştir bölümüne giderek bu efekti kullanabilirsiniz. Ardından Boyut ve Hızı ayarlayabilirsiniz. Hız ne kadar düşükse, video o kadar hızlı hareket eder. Boyut ne kadar küçükse, video o kadar çok hareket eder ve fareyi üzerinde hareket ettirirken videonun "sarsıntılı" olduğunu hissetmenizi sağlar.

İşte en düşük hızı ve boyutu seçtiğimde bir örnek.

Aralık Ayarları

Aralık sekmesinde, videodan sayfanın kenar boşluğuna olan mesafeyi özelleştirin, Kenar Boşluğu ve Dolgu bölümlerine mesafe parametrelerini girin. Örneğin, videonun tüm 4 tarafı için 10 dolgusunu ve 20 kenar boşluğunu girdim.

Gelişmiş Ayarlar

Gelişmiş bölümünün Ek CSS'sinde video arka planı için özel kod ekleyebilirsiniz. Ve HTML bağlantı bölümü, videodaki başlık için anahtar kelime bağlantısını kullanmanıza izin verir. Kısa kodlar hakkında hiçbir şey bilmiyorsanız, bu kısmı atlayabilirsiniz.

Ve bu nihai sonuçtur. Video oldukça güzel görünüyor değil mi?

Son sözler

Bu süper ayrıntılı makale sayesinde, ziyaretçileri çekmek için WordPress web sitenize bir video arka planı ekleyebileceğinizi umuyorum. AWB eklentileri hakkında, eStar gibi Gutenberg'i güçlü bir şekilde destekleyen bir tema ile kullanmalısınız. Burada, başlık kapağı için çekici bir video arka planına sahip olmak için eStar temasını ve AWB eklentisini kullandım.

Bu mükemmel kombinasyon, videonun daha büyüleyici görünmesini sağlayabilir, değil mi? WordPress ile ilgili daha fazla ipucu öğrenmek istiyorsanız, bu makalenin altında yorum yapmaktan ve düşüncelerinizi paylaşmaktan çekinmeyin.