Wix’te Kodla Tasarımın Sınırlarını Aş

Wix’te Kod Gömerek Neler Yapabilirsiniz?

Wix’te bir site hazırlarken hazır tasarım seçenekleriyle sınırlı kalmak zorunda değilsiniz. Kod gömme alanını kullanarak sitenize markanıza özel galeriler, hareketli kartlar, animasyonlar ve etkileşimli tasarım ayrıntıları ekleyebilirsiniz.

“Ben kod yazmayı bilmiyorum, bunları nasıl yapacağım?” diye düşünüyorsanız, benim yöntemim basit: Beğendiğim bir tasarım örneğini veya kodu ChatGPT’ye veriyorum, Wix’te çalışacak hâle getirmesini istiyorum. Sonra istediğim değişiklikleri anlatıyorum. Birkaç denemeyle ortaya aklımdakinden bile daha çok beğendiğim bir tasarım çıkabiliyor.

Wix’te kod gömerek neler yapılabilir?

Kod gömme alanında, sayfanın içine yerleştirilen ayrı bir tasarım veya işlev oluşturabilirsiniz. Örneğin:

• Görsellerin otomatik ya da sürükleyerek ilerlediği galeriler

• Hareketli proje ve portfolyo kartları

• Hover veya tıklama ile tepki veren butonlar

• Hareketli yazılar, kelime bulutları ve görsel efektler

• Sayfaya özel arka plan ve animasyonlar

• Basit hesaplama araçları, sayaçlar veya mini etkileşimler

Buradaki imkânlar, kullanacağınız kodun ve efektin ihtiyaçlarına göre değişir. Wix’in HTML gömme alanı kodu bir iFrame içinde çalıştırır. Bu nedenle gömülü içerik kendi alanında görüntülenir; Wix sayfasının diğer bölümlerini doğrudan düzenlemez. Kodun tasarımı, stilleri veya çalışması için gereken JavaScript dosyaları eksikse örnek de beklediğiniz gibi görünmeyebilir.

Tasarım fikirleri için hangi kaynaklara bakıyorum?

Bir efekti sıfırdan düşünmek zorunda değilsiniz. İnternette farklı tasarım ve kod örneklerini deneyebileceğiniz kaynaklar var. Ben bunlara hazır tasarımı olduğu gibi almak için değil, fikir edinmek ve istediğim görünümü daha iyi tarif edebilmek için bakıyorum.

• GodUI — Liquid Image gibi görsel efektleri inceleyebileceğiniz laboratuvar örnekleri.

• Codrops — Yaratıcı web tasarımları, efekt demoları ve adım adım uygulama anlatımları.

• Uiverse — Buton, kart, yükleyici gibi arayüz parçalarının kod örnekleri. HTML/CSS örnekleri, Wix’e uyarlama için özellikle kullanışlı olabilir.

• CodePen — HTML, CSS ve JavaScript örneklerini çalışırken görüp inceleyebileceğiniz bir alan. Her örneğin kullanım koşulunu ayrıca kontrol etmek gerekir.

• React Bits ve Aceternity UI — Animasyon ve etkileşim fikirleri açısından zengin kaynaklar. Ancak örnekleri React, Tailwind veya ek kütüphaneler kullanabiliyor; bu kodlar Wix’in gömme alanına her zaman doğrudan yapıştırılamıyor.

Bir örneğin kodunu kullanmadan önce kaynak ve lisans koşullarına da bakın. Ayrıca React veya ek kütüphane gerektiren bir örneği Wix’te çalışacak hâle getirmek için kodun uyarlanması gerekebilir.

Ben kodu Wix’e nasıl uyarlıyorum?

Bir tasarım örneği bulduğumda görselini, bağlantısını veya kodunu ChatGPT’ye iletiyorum. Ardından ne istediğimi açıkça yazıyorum:

“Bunu Wix’in HTML kod gömme alanında çalışacak şekilde uyarla.”

Kodun Wix’te tek parça olarak çalışmasını istiyorsam bunu da belirtiyorum. Sonra tasarımda değiştirmek istediklerimi söylüyorum: görünüm, renk, boyut, hareket, mobil düzen veya galerinin nasıl kayacağı gibi.

Örneğin, istediğim yapı bir kayan galeriyse bunu yalnızca “galeri yap” diye bırakmıyorum. Görsellerin hangi yönde ilerlemesini, hareketin otomatik mi yoksa ziyaretçinin kontrolünde mi olmasını istediğimi tarif ediyorum. Çıkan kodu Wix’in HTML gömme alanına ekleyip önizlemede kontrol ediyorum; gerekirse ChatGPT’ye istediğim düzeltmeleri yeniden iletiyorum.

Sizin için birkaç denemede istediğiniz kodu (genelde aklınızda olmayan, yanlışlıkla yaptığı ama daha çok beğeneceğiniz tasarımı) yapacaktır.

Ana sayfadaki kayan galeri: gerçek bir örnek

Sanal Mimar ana sayfasında, Logo Tasarımı bölümünün altındaki kayan galeri bu yaklaşımın örneklerinden biri. Galeri, sayfanın hazır bir bölümünü seçmek yerine HTML kod gömme alanına eklenen özel bir tasarım olarak hazırlandı.

Ana sayfadaki bu örneğe ve diğer çalışmalara Sanal Mimar’ı inceleyerek bakabilirsiniz. Kayan galeri yazının tamamı değil; kodla hazırlanabilecek farklı tasarımları anlatırken kullanacağım örneklerden yalnızca biri.

Wix kod gömme alanında nelere dikkat etmeli?

Kodun editörde çalışması, her ekranda aynı görüneceği anlamına gelmez. Gömülü alanın genişliği ve yüksekliği içeriği kesebilir; bu yüzden masaüstü ve mobil görünümü ayrı ayrı kontrol etmek gerekir. Wix de gömülü içeriğin ölçülerini kontrol etmeyi ve kodun ihtiyaç duyduğu stiller ile JavaScript dosyalarının mevcut olduğundan emin olmayı öneriyor.

Ayrıca bazı efektler harici kütüphanelere veya tarayıcı özelliklerine ihtiyaç duyar. Wix’in iFrame alanında belirli kısıtlamalar bulunduğu için her efektin birebir çalışacağı garanti değildir. Örneği ChatGPT’ye verirken “Wix HTML gömme alanında çalışmazsa uygun bir alternatif oluştur” diye belirtmek de işe yarayabilir. Wix, kod gömme alanındaki bazı tarayıcı özelliklerinin ve otomatik çalışan işlevlerin sınırlanabileceğini açıklıyor.

Kısacası

Wix’te kod gömmek, hazır tasarımın üzerine markanıza özgü ayrıntılar eklemenin yollarından biri. İlham kaynaklarında bir efekt bulabilir, kodu ve örneği ChatGPT’ye iletip Wix’e uyarlamasını isteyebilir, istediğiniz değişiklikleri söyleyerek tasarımı geliştirebilirsiniz.

Benim için önemli olan, kodu yalnızca çalıştırmak değil; markanın görünümüne uydurmak ve telefonda da doğru görünmesini sağlamak. Başlangıçta aklınızdaki tasarım bile birkaç denemede değişebilir. Bazen “yanlışlıkla” çıkan tasarım, tam da aradığınız şey olur.

Okuyucuya küçük bir not

Bir web sitesi kurmak ilk adım; doğru kişilerin karşısına çıkmak ise başlı başına bir sanat. Bu yazı da SEO ve GEO düşünülerek, arayan kişiye ulaşsın diye hazırlandı. Eğer bu yazı senin önüne çıktıysa, tesadüf değil; hedeftir. 😉

Bütün bu işleri tek başına çözmek zorunda değilsin. Sanal Mimar’a WhatsApp’tan yaz; bütçene uygun, hem zevkine hem sektörüne göre SEO ve GEO uyumlu çalışmalarını birlikte planlayalım.

Bu içerikteki reklam fikrini nasıl buldunuz?

a) Bedava viral reklam fikrini sevdim.

b) Bana gösterilme amacına uygun; reklamı yerinde buldum.

c) Reklam mıydı bu? Tam anlayamadım… Acaba kaç kişi görecek?

d) Ben meraktan arada bir baktıkça görüntüleme artıyor; bu da başka bir reklam mı? 😉

e) Bu numaraları çok gördük.