Squarespace'e özel buton nasıl eklenir

Harekete geçirici mesaj (CTA) butonu, bir açılış sayfasındaki en değerli öğedir; çünkü ödeme sayfasına, iletişim formuna veya indirilebilir bir kaynağa yönlendirdiğiniz her ziyaretçinin oraya ulaşmak için bu butona tıklaması gerekir. Etrafındaki bölümden kendine özgü rengi, simgesi veya üzerine gelme efektiyle ayrışan bir buton ise arka plana karışan bir butona kıyasla belirgin şekilde daha yüksek tıklama oranı elde eder.

Squarespace’in yerleşik bir Buton Bloğu bulunur; ancak bu butonu doğrudan seçerek değil, genel Site Stilleri panelinden biçimlendirirsiniz. Butonlar üç türde gelir: birincil, ikincil ve üçüncül. Her tür sitenizin tamamında aynı şekilde biçimlendirilir, yani toplamda üç buton tasarımınız olur. Birincil bir butonu yeniden biçimlendirdiğinizde bu değişiklik sitenizdeki tüm birincil butonlara uygulanır; aynı durum ikincil ve üçüncül türler için de geçerlidir. Üstelik ayarlar kendi başlarına oldukça sınırlıdır — simge, üzerine gelme efekti veya gradyan seçenekleri yoktur.

Sitenizdeki diğer tüm butonları değiştirmeden tek bir butona kendine özgü bir tasarım kazandırmanın iki yolu vardır. Özel CSS yazabilir veya satın alabilir ve bunu Özel CSS panelinize yapıştırarak ilgili bloğu hedefleyebilirsiniz; ya da ücretsiz barındırılan bir widget kullanarak butonu görsel bir oluşturucuda biçimlendirebilir ve gömme kodunu bir kod bloğuna yapıştırabilirsiniz.

Squarespace site sahibi, pazarlamacı veya tasarımcıysanız ve CSS yazmadan ya da bir geliştiriciye kod parçası için ödeme yapmadan Squarespace sitenize özel bir CTA butonu eklemek istiyorsanız, bu rehber her iki yöntemi kullanarak Squarespace’e nasıl buton ekleyeceğinizi adım adım açıklar — önce CSS yöntemiyle, ardından widget yöntemiyle.

Seçenek 1: Yerleşik blokları özel CSS kod parçacıklarıyla kullanın

Bir Squarespace sayfasında benzersiz bir buton tasarımı elde etmenin standart yolu, yerleşik buton bloğunu eklemek ve ardından kendi CSS’inizle stilini geçersiz kılmaktır. Squarespace’in bunun için bir Özel CSS paneli bulunur ve tek bir bloğu ID’siyle hedeflemek, değişikliği o türdeki tüm butonlar yerine yalnızca tek bir butonla sınırlı tutar.

Squarespace’e özel CSS ile buton eklemenin adımları şöyledir:

1. Düzenleyicide sayfayı açın, butonu eklemek istediğiniz bölümün üzerine gelin, Blok Ekle‘ye tıklayın ve Buton‘u seçin.

2. Kalem simgesine tıklayın veya butona çift tıklayarak metninizi ve bağlantınızı ayarlayın. Birincil, ikincil veya üçüncül seçeneklerinden birini belirleyin ve ardından sol üst köşedeki Kaydet‘e tıklayın.

3. Ardından blok ID’sini bulun. Squarespace sayfasındaki her bloğun benzersiz bir ID’si vardır ve bu ID’yi CSS’inizin başına eklediğinizde değişiklik, o türdeki tüm butonlara uygulanmak yerine yalnızca o tek butonla sınırlı kalır. Blok ID’sini bulmak için tarayıcınızda sayfayı inceleyebilir, bloğa sağ tıklayıp İncele‘yi seçebilir veya ücretsiz Squarespace ID bulucu tarayıcı eklentilerinden birini kullanabilirsiniz. 

4. Düzenleyicinin dışında, kenar çubuğundan Web Sitesi‘ne gidin, Sayfalar‘a tıklayın, ardından Özel Kod‘u ve Özel CSS‘yi seçin.

5. Kurallarınızı yazın ve kaydedin — ilgili blok ID’sini hedefleyin ve ardından Kaydet‘e tıklayın. Squarespace’in kendi stilleri yeterince spesifik olduğundan, kurallarınızın etkili olması için genellikle !important eklemeniz gerekir. Kaydettikten sonra yalnızca o buton istediğiniz şekilde görünürken sitenizdeki diğer tüm butonlar olduğu gibi kalır.

Hedeflemeyi yanlış yapmak en sık karşılaşılan sorundur; çünkü başında blok ID’si olmadan “.sqs-block-button-element” için yazılmış bir kod parçacığı, başlık CTA’nız ve ödeme butonlarınız dahil sitenizdeki tüm yerleşik butonların stilini değiştirir. Bir diğer yaygın sorun ise mobil görünümdür — masaüstünde düzgün görünen sabit genişlikler ve büyük yazı tipi boyutları, butonu telefon ekranının dışına itebilir veya metni tek harflik satırlara bölebilir.

Kod parçacıkları bulmak yeterince kolaydır; Squarespace tasarımcıları bloglarında birçoğunu ücretsiz olarak paylaşır, ancak daha gelişmiş üzerine gelme ve animasyon efektleri genellikle ücretli eklentiler olarak satılır. Her iki durumda da, kendinizin yazmadığı bir kodu sitenizin tamamını etkileyen bir panele yapıştırmış olursunuz ve bir şeyler yanlış görünürse hata ayıklama tamamen size kalır.

Seçenek 2: Ücretsiz, özelleştirilebilir bir buton widget’ı ekleyin (önerilen)

Butonu ayrı bir araçta oluşturmak, Squarespace’te özel CSS’e alternatif bir yöntemdir; çünkü yerleşik bir butonun stilini geçersiz kılmak yerine sayfaya yeni bir buton yerleştirmiş olursunuz. Burada butonu görsel bir oluşturucuda ayarlarsınız, gömme kodunu kopyalarsınız ve sayfanızdaki bir kod bloğuna yapıştırırsınız.

Başlamadan önce Squarespace planınızı kontrol edin. Bir kod bloğuna gömme kodu eklemek, Core planı veya daha üst bir plan gerektiren premium bir özelliktir. Giriş seviyesi planda kod blokta kalır ancak çalışmaz.

Hangi widget’ı kullanacağınıza gelince, Jotform’un Buton Widget’ı Squarespace için ücretsiz bir buton widget’ıdır ve yerleşik bloktan daha fazla görsel kontrol sunar. Arka plan, metin ve üzerine gelme renklerini bağımsız olarak özelleştirebilir, etiketin önüne veya arkasına simge ekleyebilir, köşe yarıçapını, yüksekliği, dolguyu, metin boyutunu ve gölgeyi ayarlayabilirsiniz. 

Widget kullanarak Squarespace’e buton eklemenin adımları şöyledir:

1. Jotform Çalışma Alanı sayfanızda Oluştur‘a tıklayın, Web Sitesi Widget’ı‘nı seçin, “Button” araması yapın ve ardından Widget’ı Kullan‘a tıklayın.

2. Genel sekmesinde butonun ne yapacağını seçin — bir web sayfası açma, e-posta başlatma veya WhatsApp sohbeti açma gibi — ardından bağlantı URL’nizi ve buton etiketinizi girin. Renkler, simgeler ve şekiller için Stil sekmesine, butonun satır içi mi yoksa sabit mi olacağını ve masaüstünde mi, mobilde mi yoksa her ikisinde mi görüneceğini belirlemek için Düzen sekmesine geçin.

3. Yayınla‘ya tıklayın ve ardından Gömme bölümündeki Kodu Kopyala‘ya tıklayın. 

4. Squarespace düzenleyicinizde Blok Ekle‘ye tıklayın, Kod‘u seçin, blok modunu HTML olarak ayarlayın, yer tutucu metni silin, kodunuzu yapıştırın ve Kaydet‘e tıklayın.

Buton, Özel CSS paneliniz yerine Jotform’da biçimlendirildiği için genel Site Stillerinizle çakışmaz ve yaptığınız değişiklikler sitenizdeki diğer butonları etkilemez. Farklı bir renk veya etiket denemek, blok ID’si arayıp kod parçacığını yeniden yazmak yerine widget’ı düzenlemek kadar basittir.

Squarespace sitenizi akıllı, sunucusuz widget’larla güçlendirin

Pazarlamacı, site sahibi veya tasarımcı olarak zamanınız, tek bir CTA’nın sitenizin geri kalanından farklı görünmesi için blok ID’si aramaya harcamak için fazla değerlidir. Bir buton widget’ı bu sorunu birkaç dakikada çözer ve daha sonra Özel CSS panelinize tekrar dokunmadan stilini değiştirebilirsiniz.

Buton, bir Squarespace sayfasına kod parçacığı veya ücretli eklenti olmadan ekleyebileceğiniz birçok öğeden yalnızca biridir. Jotform’un ücretsiz web sitesi widget’ları dizininde 150’den fazla seçenek bulunur; bunlar arasında şunlar yer alır:

• Bir lansman veya kayıt son tarihi için statik bir butonun sağlayamayacağı aciliyet duygusu yaratan bir geri sayım sayacı
• Aksi takdirde çalıştırmak için premium bir eklenti gerektireceğiniz kayıt teklifi için bir açılır pencere (popup)
• En son paylaşımlarınızı sayfada tutan bir sosyal medya akışı; böylece ara sıra güncellediğiniz bir site bile güncel görünür

Her biri, butonla aynı şekilde bir kod bloğu aracılığıyla gömülür. Bu da bir sayfaya her yeni öğe eklemek istediğinizde başka bir kod parçacığı veya eklenti satın almanıza gerek olmadığı anlamına gelir.

Hâlâ bir web sitesi oluşturma aşamasındaysanız veya yeniden tasarım planlıyorsanız, hangi parçaları daha sonra bir geliştirici olmadan ekleyebileceğinizi bilmekte fayda var. Jotform-Squarespace entegrasyonu formları sitenize aynı şekilde gömer; böylece insanları bir kayıt sayfasına yönlendiren bir buton, bilgilerini toplayan forma sorunsuzca bağlanabilir.

Hangi Squarespace harekete geçirici mesaj alternatifini seçerseniz seçin, öne çıkan bir buton sayfadaki diğer her şeyle uyumlu olan bir butondan çok daha değerlidir. Widget, tıklamayı kazanmanın daha hızlı ve daha uygun maliyetli bir yoludur.