Squarespace Web Sitenize Müzik Ekleme

Ortam sesi ile Squarespace sitelerini statik sayfalardan sürükleyici bir marka deneyimine nasıl dönüştürdüğünü keşfedin. Bu rehber, ziyaretçilerinizi daha uzun süre meşgul etmek için uygulanabilir kurulum adımları, optimizasyon stratejileri ve platforma özel çözümler sunar.
ChatGPT’in ne düşündüğünü gör Canlı Uygulama Editörü’nü Açın
Tarafından
How to Add Music to Squarespace Website

MRC Data’ya göre, marka uyumlu arka plan müziği, müşterilerin yüzde 41’inin daha uzun süre kalmasını ve yüzde 39’unun bir işletmeye geri dönmesini teşvik ediyor.

Bir butik, portföy sitesi, restoran ya da yaratıcı bir ajans işletiyor olun; ortam sesi eklemek markanızla uyumlu bir atmosfer yaratır. Müzik duygusal tonu belirler, ziyaretçi davranışını yönlendirir ve durağan gezinti deneyimini unutulmaz bir şeye dönüştürür. Squarespace sahipleri için arka plan müziğini entegre etmek çevrimiçi varlığınızı farklılaştırabilir ve ziyaretçilerin içeriğinize daha uzun süre bağlı kalmasını sağlar.

Elfsight Background Music widget, Squarespace sitenize döngüsel ortam seslerini kod yazmadan eklemenize olanak tanır. Özelleştirilebilir çalma seçenekleri, birden çok ses kaynağı ve esnek oynatıcı düzenleriyle dakikalar içinde markanız için kusursuz bir ses manzarası yaratabilirsiniz.

Bu kılavuzda şu konuları keşfedeceksiniz:
  • Kod yazmadan Squarespace’te arka plan müziğini nasıl kurarsınız
  • Belirli sayfalara veya tüm sitenize müzik yerleştirme talimatları
  • Ziyaretçi etkileşimini artıran arka plan sesinin temel özellikleri
  • Squarespace’in yerleşik ses blokları da dahil alternatif çözümler
  • Squarespace’te müzik çalımını optimize etmek için en iyi uygulamalar

Hızlı Başlangıç: Squarespace’a Arka Plan Müziği Ekleme

Teori yerine uygulamayı tercih ediyorsanız, arka plan müziğinizi dakikalar içinde yayına almanızı sağlayan hızlı adımlar şu şekilde:

  1. Açın arka plan müziği düzenleyicisini açın ve bir şablon seçin.
  2. Şarkılarınızı ekleyin ve müzik oynatıcıyı özelleştirin.
  3. “Web Sitesine Ekle” düğmesini tıklayın ve gömme kodunu alın.
  4. Kodu web sitenizin arka ucuna yapıştırın ve yayımlayın.

🚀 Canlı düzenleyicide şimdi arka plan müzik oynatıcıyı oluşturun!

Squarespace Sitenize Arka Plan Müziği Neden Eklemelisiniz?

🎵 Sarmalayan bir marka atmosferi yaratın

Arka plan müziği, markanızın kişiliğini ve atmosferini anında iletir. Spa, butik veya yaratıcı bir stüdyo işletiyor olun, doğru ses manzarası görsel kimliğinizi güçlendirir ve ziyaretçilerin sunduğunuz tekliflerlerle duygusal bağ kurmasına yardımcı olur.

🕑 Sitenizde Daha Uzun Kalın

Ortam sesli web siteleri ziyaretçileri daha uzun süre meşgul eder. Müzik, keşfi teşvik eden konforlu bir tarama ortamı yaratır; bu da çıkış oranını düşürür ve dönüşüm olasılığını artırır.

🎉 Özel Günler İçin Atmosferi Belirleyin

Mevsimsel müzik web sitenizi tatiller, ürün lansmanları veya özel etkinlikler için dönüştürür. Noel dönemindeki neşeli parçalarından satış kampanyaları için enerjik ritimlere kadar, sesler statik içerik tek başına başaramadığı dinamik bir katman sağlar.

🎨 Kullanıcı Deneyimini Kesintiye Uğratmadan Geliştirin

Dikkatli uygulanırsa, arka plan müziği içeriğinizi tamamlar; rekabet etmez. Ziyaretçiler oynatmayı kontrol edebilir, sesi ayarlayabilir veya sesi duraklatabilir; böylece deneyim kullanıcı dostu ve erişilebilir kalır.

Arka Plan Müziği Widget’ının Temel Özellikleri

Aşağıda widget’in temel yetenekleri ve her özelliğin Squarespace sitenizde nasıl pratik işlevselliğe dönüştüğünün açıklaması yer almaktadır.

ÖzellikPratik Kullanım
Birden çok ses kaynağıDosyaları doğrudan yükleyin veya SoundCloud, YouTube, Vimeo, Google Drive, Amazon S3 ve daha fazlasından parçaları bağlayın
Sınırsız parçalarSürekli döngüye alınan veya çeşitlilik için karıştırılan kapsamlı çalma listeleri oluşturun.
Otomatik Oynatma SeçeneğiZiyaretçiler sayfana geldiğinde müziği otomatik olarak başlatın (tarayıcı izinlerine bağlı olarak)
Yüzen ve Gömülü TasarımlarOyuncuyu köşeye gizli konumda konumlandırın veya sayfa içeriğinize sorunsuzca entegre edin
Özelleştirilebilir Oynatıcı KontrolleriTasarım tercihlerine göre çalma listesini, ilerleme çubuğunu, parça bilgisini ve oynatma düğmelerini gösterip gizleyin.
Koyu ve açık temalarOynatıcı görünümünü Squarespace sitenizin renk şemasına uygun şekilde önceden hazırlanmış temalarla veya özel renklerle eşleşecek şekilde ayarlayın
Döngü ve KarıştırMüziğin sürekli çalmasını sağlayın veya dinleme deneyimini dinamik hâle getirmek için parçaların sırasını rastgele yapın.
Mobil UyumluOynatıcıyı tüm cihazlarda ve ekran boyutlarında sorunsuz çalışır durumda tutun

Tam özellik kümesini incelemek için arka plan müziği özellikler sayfasını ziyaret edin.

Adım Adım: Squarespace’e Arka Plan Müziği Ekleme

Şimdi, Elfsight düzenleyicisinde müzik oynatıcıyı yapılandırmaktan Squarespace sitenize eklemeye kadar tam kurulum sürecini adım adım inceleyelim.

Adım 1: Arka Plan Müziği düzenleyicisine erişin

Elfsight Background Music widget düzenleyicisine gidin ve şablon galerisini inceleyin. Web sitenizin estetiğine ve hedeflerine uygun önceden tasarlanmış bir şablon seçin ve özelleştirmeye başlamak için “Bu şablonla devam et” seçeneğine tıklayın.

Choose music player template

Adım 2: Ses parçalarınızı ekleyin

Ses dosyalarını cihazınızdan doğrudan yükleyin veya harici platformlardan URL’leri yapıştırın. Elfsight, MP3, M4A, WAV, AAC vb. tüm standart ses formatlarını destekler ve SoundCloud, YouTube, Vimeo, Google Drive, Amazon S3, Dropbox ve Shoutcast/Icecast akışlarıyla entegrasyon sağlar. İhtiyacınız olan kadar parçayı ekleyerek çalma listenizi oluşturun.

Upload or add your tracks
💡 Profesyonel İpucu: Çalma listenizi stratejik olarak düzenleyin. En önemli veya temsil niteliğindeki parçayı ilk sıraya yerleştirin; otomatik oynatma açıksa hemen başlayacaktır. Parça uzunluklarını ve temposunu karıştırarak uzun tarama oturumları boyunca dinleyicinin ilgisini sürdürün.

Adım 3: Oynatıcı düzeninizi seçin

İki tasarım seçeneği arasından birini seçin: Yüzen veya Gömülü. Yüzen düzen, ziyaretçiler kaydırırken görünür kalan kompakt bir oynatıcı oluşturur ve rahatsız etmeyen arka plan sesi için idealdir. Gömülü düzen ise sayfa içeriğinize doğrudan entegre olur, tam parça bilgilerini ve albüm kapağını daha belirgin bir sunum için gösterir.

Select music player layout

Adım 4: Oynatma ayarlarını yapılandırın

Otomatik oynatma, döngü ve karıştırma seçeneklerini tercihlerine göre etkinleştir veya devre dışı bırak. Çalma listesi görünür mü yoksa gizli mi olacağına karar ver. Hangi oynatıcı kontrollerinin görüneceğini özelleştir; örneğin oynat/duraklat, ileri/geri atlama, ses seviyesi ve çalma listesi geçişi.

Configure playback settings
💡 Pro İpucu: Modern tarayıcılar kullanıcı deneyimini iyileştirmek için sesli otomatik oynatmayı engelleyebiliyor. Oynatmanın nasıl çalıştığını görmek için sitenizi farklı tarayıcılarda (Chrome, Safari, Firefox) test edin. Otomatik oynatma kısıtlıysa ziyaretçilere oynat’a tıklamalarını teşvik eden bir hoş geldiniz mesajı veya görsel ipucu eklemeyi düşünün.

Adım 5: Oyuncu görünümünü özelleştirin

Önceden hazırlanmış Koyu veya Açık temalardan seçim yapabilir veya Squarespace sitenizle uyumlu özel bir renk şeması oluşturabilirsiniz. Özel bir arka plan resmi yükleyin, öğe renklerini (arka plan, vurgu, metin) ayarlayın ve oyuncunun görsel ayrıntılarını ince ayar yapın. Tasarımınıza göre sanatçı adı, şarkı adı ve ilerleme çubuğu gibi parça bilgilerini gizleyin veya gösterin.

Customize music player style

Adım 6: Gömme kodunu üretin ve kopyalayın

Kurulum kodunu üretmek için “Web Sitesine Ekle” düğmesine tıklayın. HTML parçacığını panonuza kopyalayın. Bir sonraki adımda bu kodu Squarespace sitenize yapıştıracaksınız.

Copy the music widget embed code

Adım 7: Oyuncuyu Squarespace’e Gömün

Yöntem 1 — Belirli sayfa (Squarespace 7.1):

Core, Plus ve Advanced planlarda mevcut (daha önce Business ve Commerce olarak biliniyordu):

  1. Sol menüden Web Sitesi → Sayfalar öğesine tıklayın ve hedef sayfayı seçin.
  2. Widget’i eklemek istediğiniz bölümün üstündeki Düzenle düğmesine tıklayın.
  3. Blok Ekle düğmesini tıklayın ve Kodu seçin.
  4. Düzenle simgesine tıklayın ve kurulum kodunu İçerik açılır penceresine yapıştırın.
  5. Kaydet / Yayınla düğmelerine tıklayın.

Yöntem 2 — Tüm Sayfalar (site genelinde arka plan müziği):

  1. Sol menüsünden Web Sitesi → Sayfalar öğesine tıklayın.
  2. Özelleştirmek istediğiniz sayfa için Ayarlar (dişli simgesi) bölümüne gidin; tüm site çapında kurulum için Site Araçları → Kod Enjeksiyonu bölümüne gidin.
  3. Kodu Kod Enjeksiyonu → Başlık veya Altbilgi yoluyla ekleyin.
  4. Tıkla Kaydet ve Yayınla.

Sorun Giderme Hızlı Kontrolü

  • Oyuncu görünmüyor: Kod bloğu kullandığınızdan emin olun (Zengin Metin değil). Yapıştırma sırasında gömme kodunun kesilmediğini veya değiştirilmediğini doğrulayın. Squarespace planınızın özel kod desteğini sağladığından emin olun (Temel planlar sınırlamalara sahiptir).
  • Oyuncunun altındaki ekstra boşluk: Squarespace’in Fluid Engine editörü bazen istenmeyen boşluklar ekler. Kurulum kodundan önce bu CSS snippet’i ekleyin: <style>.sqs-block-code { margin-bottom: 0 !important; }</style> veya bu bölüm için Klasik Düzenleyici’ye geçin. Squarespace dolgu düzeltme kılavuzunu inceleyin.
  • Otomatik oynatma çalışmıyor: Tarayıcı otomatik oynatma politikaları varsayılan olarak sesi olan autoplay’i engeller. Kullanıcılar önce sayfayla etkileşime girmelidir (tıklama, dokunma vb.). Farklı tarayıcılarda test edin ve “Oynatmak için tıklayın” görsel ipucunu eklemeyi düşünün.
  • Oynatıcı yalnızca sayfa yenilemesinden sonra görünür: Bu durum Squarespace’in SPA (Tek Sayfa Uygulaması) mimarisi nedeniyle oluşur. Kurulum kodunun ilk satırını (platform betiğini) Kod Enjeksiyonu → Başlık bölümüne ekleyin. Bu sorun giderme makalesine bakın.
  • Sayfalar arasında gezinirken müzik durur: Tek bir sayfaya gömdüyseniz, gezinme sırasında ses sıfırlanır. Tüm web sitenizde kesintisiz çalma için site çapında kurulum yöntemini kullanın (Kod Enjeksiyonu).

Squarespace’e Ses Eklemenin Yerel Çözümleri

Elfsight Arka Plan Müziği widget’ı en kapsamlı özelleştirme seçeneklerini sunarken, Squarespace ses eklemek için birkaç yerleşik yönteme sahiptir. Her yaklaşımın sundukları ve sınırlamaları şu şekilde.

Squarespace Ses Bloğu

Squarespace’in yerel Ses Bloğu, tek bir ses dosyasını doğrudan sayfa içeriğinize gömmenize olanak tanır.

  1. Ses eklemek istediğiniz sayfaya gidin.
  2. Yeni bir blok eklemek için + simgesine tıklayın.
  3. Blok menüsünden Ses öğesini seçin.
  4. Bilgisayarınızdan bir MP3 veya M4A dosyası yükleyin veya bulut depolama platformundan bir URL ekleyin.
  5. Oyuncunun görünümünü özelleştirin ve Kaydet düğmesine tıklayın.
📌 Ana Sınırlama: Ses Bloğu tek seferde yalnızca bir parçayı işler ve çalma listesi özelliğine sahip değildir. Birden çok parçayı döngüye alamaz, çalma sırasını karıştırmaz veya sayfalar arasında kesintisiz bir ses deneyimi oluşturamazsınız. Oynatıcı tasarımı da özel widget’lerle karşılaştırıldığında sınırlıdır.

SoundCloud Bloğu (Otomatik Oynatma)

SoundCloud’ta barındırılan parçalar için Squarespace’in SoundCloud bloğunu kullanarak otomatik oynatmayı etkinleştirebilirsiniz.

  1. SoundCloud parçasına gidin ve PaylaşGöm sekmesini tıklayın.
  2. Embed ayarlarında Otomatik oynatmayı etkinleştirin.
  3. Gömme kodunu kopyala.
  4. Squarespace’te sayfanıza bir Kod bloğu ekleyin.
  5. SoundCloud gömme kodunu yapıştırın ve kaydedin.
📌 Temel Sınırlama: Sadece SoundCloud parçalarıyla çalışır. Otomatik oynatma tarayıcı kısıtlamalarına tabidir ve tüm cihazlarda çalışmayabilir. Oynatıcı’nın görünümünü önemli ölçüde özelleştiremezsiniz ve SoundCloud ekosistemine bağlıdır.

Manuel HTML/CSS ile Ses Uygulaması

Geliştiriciler, Squarespace’in Kod Enjeksiyonu veya Kod Bloğu ile özel HTML Ses Oynatıcılar ekleyebilir.

  1. Özel HTML5 Ses Oynatıcı kodunuzu oluşturun.
  2. Site genelinde uygulanması için Ayarlar → Gelişmiş → Kod Enjeksiyonu bölümüne gidin.
  3. Özel kodunuzu Başlık veya Altbilgi bölümüne yapıştırın.
  4. Kaydet ve yayımla.
📌 Ana Sınırlama: Kodlama bilgisi gerekir (HTML, CSS, JavaScript). Tarayıcılar arası uyumluluk, mobil uyumluluk ve ses dosyası barındırma yönetimi sizde. Güncellemeler ve bakım tamamen size ait.

Elfsight Ses Oynatıcı Widget’ı

İndirme düğmeleri ve ayrıntılı meta verilerle bireysel parça sunumunu daha ayrıntılı kontrol etmek isterseniz, Background Music’in alternatifi olarak Elfsight Audio Player widget’ını düşünün.

Audio Player Widget alternative

Arka Plan Müziği’nden farklı olarak (ambiyanslı, sürekli çalma için tasarlanmıştır), Ses Oynatıcı, müzik koleksiyonlarını, podcast’leri, sesli kitapları veya kullanıcıların belirli parçalara aktif olarak etkileşimde bulunduğu ses kütüphanelerini öne çıkarmak üzere optimize edilmiştir. Öne çıkan albüm kapağı, ayrıntılı parça bilgileri ve yerleşik indirme/satın alma düğmeleri sunar—dinleyicilerin içerikle doğrudan etkileşime geçmesini isteyen müzisyenler, podcasterlar ve içerik üreticileri için mükemmel.

Kıyaslama: Elfsight ve Yerel Squarespace Çözümleri

Elfsight Arka Plan Müziği aracının, Squarespace’in yerel seçenekleri ve manuel kurulum karşısında en çok önemli özellikler açısından nasıl performans gösterdiğini aşağıda inceleyelim:

ÖzellikElfsight Arka Plan MüziğiSquarespace Ses BloğuSoundCloud BloğuHTML Kılavuzu
Birden çok parça için çalma listeleriEvetHayırTek ParçaKodlandıysa
Otomatik OynatmaEvetHayırSadece SoundCloudKodlandıysa
Döngü ve KarıştırEvetHayırHayırKodlandıysa
Özelleştirilebilir tasarımEvetSınırlıHayırTam Kontrol
Kodlama gerekmezEvetEvetEvetHayır
Tüm sayfalarda çalışırEvetHayırHayırYapılandırıldığında
Mobil UyumluEvetEvetEvetKoda bağlı
Birden çok ses kaynağıEvetSınırlıSadece SoundCloudKodlandıysa

Elfsight Arka Plan Müziği widget’ı, yerel blokların sadeliğini özel kodun gücü ve esnekliğiyle birleştirir; teknik karmaşıklık olmadan iki dünyanın da en iyisini sunar.

📝 Arka Plan Müzik Oynatıcınız İçin Optimizasyon İpuçları

Müzik oynatıcı yayına alındığında, bu en iyi uygulamalar etkileşimi maksimize ederken mükemmel kullanıcı deneyimi ve site performansını korumanıza yardımcı olur.

  1. Sesi orta seviyede tutun. Başlangıç sesini yüzde 20–30 olarak ayarlayın. Yüksek sesli ses rahatsız edici olabilir ve kullanıcıları hemen siteyi terk ettirebilir.
  2. Görünür oynatma kontrolleri sağlayın. Ziyaretçilere her zaman duraklatma, geçiş yapma veya ses seviyesini ayarlama seçeneğini sunun. Kontrolsüz, zorunlu sesler kullanıcı deneyimini olumsuz etkiler.
  3. Otomatik oynatmayı tarayıcılarda test edin. Chrome, Safari ve Firefox otomatik oynatmayı farklı şekilde ele alır. Uygulamanızı birden çok tarayıcı ve cihaz üzerinde test edin ve davranışı anlayın. Otomatik oynatma güvenilir değilse “Müziği başlatmak için tıklayın” düğmesi eklemeyi düşünün.
  4. Sesleri markanıza göre uyarlayın. Web sitenizin ruh hâlini ve amacını güçlendiren parçalar seçin. Bir spa için sakin, ortam müziği çalarken, bir fitness sitesi için enerjik ritimler kullanın. Tutarlılık marka kimliğini güçlendirir.
  5. Performans için dosya boyutlarını optimize edin. Büyük ses dosyaları sayfa yükleme sürelerini yavaşlatır. Arka plan müziği için ses dosyalarını 128–192 kbps’a sıkıştırın (ortam dinlemesi için daha yüksek bit hızlarına gerek yok). Bu, bant genişliği kullanımını azaltır ve sayfa hızını artırır.
  6. Mobil veri kullanımını düşünün. Oynatma otomatik olarak ses çalar ve mobil veri tüketir. Sınırlı veri planlarına sahip kullanıcıları göz önünde bulundurun. Mobil cihazlarda otomatik oynatmayı devre dışı bırakmayı veya sesin çalacağını açıkça bildiren bir uyarı sunmayı düşünün.

Sıkça Sorulan Sorular

Ücretli bir plan olmadan Squarespace’e müzik nasıl eklersiniz?

Squarespace’in Temel (Kişisel) planı sınırlı özel kod desteğine sahip. Tek parçalar için Squarespace’in yerleşik Ses Bloğu’nu kullanabilirsiniz, ancak Elfsight Arka Plan Müziği gibi özel widget’lar Core, Plus veya Advanced planlar gerektirir. Temel plan kullanıcıları için yükseltmeyi düşünün veya Squarespace’in yerleşik SoundCloud bloğunu alternatif olarak kullanın. Bu Temel plan kurulum kılavuzunu inceleyin.

Squarespace’in tüm sayfalarına arka plan müziği ekleyebilir miyim?

Evet. Başlık veya Altbilgi’ye kurulum kodunu eklemek için Squarespace’in Kod Enjeksiyonu özelliğini (Ayarlar → Gelişmiş → Kod Enjeksiyonu) kullanın. Bu, oyuncuyu tüm sitede yerleştirir ve ziyaretçiler sayfalar arasında gezinirken kesintisiz oynatımı sağlar.

Mobil cihazlarda arka plan müziği çalışır mı?

Evet, Elfsight Arka Plan Müziği widget’ı tamamen mobil uyumlu. Ancak mobilde otomatik oynatma, kullanıcı deneyimini ve veri tasarrufunu korumak için çoğu tarayıcı tarafından kısıtlanır. Ziyaretçiler, mobil cihazlarda sesi başlatmak için oynat düğmesine dokunmalıdır.

Kaç adet Ses Dosyasını Arka Plan Müziği Widget’ına Ekleyebilirim?

Çalma listenize sınırsız parça ekleyebilirsiniz. Widget, döngü ve rastgele oynatma seçenekleriyle geniş çalma listelerini destekler; saatlerce kesintisiz arka plan müziği oluşturmak için idealdir.

Elfsight hangi ses dosyası formatlarını destekliyor?

Elfsight tüm standart ses formatlarını destekler: MP3, M4A, MP4A, MPGA, MP2, MP2A, MP3, M2A, M3A, WAV, WEBA, AAC, OGA, SPX. Dosyaları doğrudan yükleyebilirsiniz (parça başına en fazla 100MB) veya harici kaynaklara bağlantı verebilirsiniz.

Arka Plan Müziği Sitenizin Yükleme Hızını Etkiler mi?

Ses dosyaları asenkron olarak yüklenir; bu, sayfanızın ilk yüklemesini engellemediği anlamına gelir. Ancak büyük ses dosyaları bant genişliğini tüketir. Arka plan müziği için kaliteyi korurken performans etkisini en aza indirmek amacıyla ses dosyalarınızı 128-192kbps seviyesine sıkıştırın.

Sonuç

Squarespace sitenize arka plan müziği eklemek, yalnızca metin içeriğiyle elde edilemeyen sürükleyici bir marka deneyimi yaratır. Mevsimsel promosyon için atmosfer oluşturuyor, bir portföy için ambiyans sağlıyor ya da online mağazanız için benzersiz bir hava katıyor olun; ambient sesler ziyaretçileri daha uzun süre meşgul eder ve marka kimliğinizi güçlendirir.

Elfsight Arka Plan Müziği widget’ı, Core, Plus ve Advanced planlarındaki Squarespace kullanıcıları için güçlü, kod yazmaya gerek olmayan bir çözüm sunar. Sınırsız parçalar, özelleştirilebilir düzenler ve esnek oynatma seçenekleriyle dakikalar içinde mükemmel bir ses ortamı yaratabilirsiniz. Sesin gücüyle Squarespace sitenizi bugün dönüştürmeye başlayın.

Kaynak belirtilmiştir: PR Newswire

Makale tarafından
Yapay Zeka İçerik Uzmanı
Kristina, Elfsight ve Beamtrace’de Yapay Zeka konularını ele alıyor: yapay zeka sohbet botları, LLM görünürlüğü ve Yapay Zeka’nın arama ile müşteri deneyimini nasıl yeniden şekillendirdiği üzerine yazıyor – gerçekten işe yarayacak çözümler arayan web sitesi sahipleri ve pazarlama ekipleri için pratik görüşlerle.