Satış Odaklı Landing Sayfaları Oluşturun – Adım Adım Rehber

Giriş

Tek bir satır kod yazmadan güzel, duyarlı landing sayfası bölümleri tasarlamak istediniz mi? ChatGPT içindeki Selldone Eklentisi ile bu hayal gerçeğe dönüşüyor.

Bu rehberde, ilham görüntüsünden Selldone’un Page Builder içinde canlı, tamamen duyarlı bir bölüme nasıl adım adım geçeceğinizi öğreneceksiniz — tümü yapay zeka tarafından destekleniyor.

Sonunda Selldone sitenizde yayınlamaya hazır, profesyonel görünümlü bir bölümünüz olacak.

💡 Not: Selldone’un Page Builder’ı Vuetify (Vue 3) üzerine kuruludur — dolayısıyla eklenti tarafından oluşturulan her bölüm Selldone’un modern, duyarlı ön yüz çerçevesiyle tamamen uyumludur.

Adım 1 – İlhamınızı Hazırlayın

Başlamak için sizi etkileyen bir bölüm tasarımı bulun. Bu öğreticide referans olarak Trendyol ana sayfasından bir bölümü kullanıyoruz — temiz, modern bir düzen; öne çıkan ürünleri güçlü görseller ve net çağrı-metodlarıyla sergiliyor.

O Trendyol bölümünün bir ekran görüntüsünü alın; bu görseli Selldone Eklentisi ile özel tasarımımızı üretirken ChatGPT’ye görsel referans olarak yükleyeceğiz.

💡 İpucu: Yapısı belirgin ve görsel olarak dengeli bir bölüm seçin. Tasarım ne kadar netse ChatGPT onu analiz edip yeniden oluşturmayı o kadar iyi yapar.

⚠️ Adil Kullanım Notu: Burada gösterilen Trendyol ekran görüntüsü yalnızca eğitim ve görsel ilham amaçlı kullanılmaktadır. Tüm ticari markalar, görseller ve düzenler Trendyol A.Ş.'ye aittir — bu öğretici Trendyol ile bağlantılı değildir ve onaylı değildir.

Adım 2 – Selldone Eklentisiyle ChatGPT’yi Açın

ChatGPT’de Selldone Eklentisi’nin etkin olduğundan emin olun:

1. ChatGPT → Ayarlar → Beta Özellikler → Eklentiler bölümüne gidin ve eklentileri etkinleştirin.
2. Plugin Store'a gidin ve Selldone Eklentisi'ni yükleyin.
3. Eklenti etkin şekilde yeni bir sohbet başlatın.

Sohbet kutunuzun yanında Selldone logosunu görmelisiniz — bu, eklentinin hazır olduğu anlamına gelir.

Adım 3 – Referans Tasarımınızı Yükleyin

Ekran görüntünüzü yükleyin ve net bir istem (prompt) yazın, örneğin:

Üst menüden en son ChatGPT sürümünü kullandığınızdan emin olun.

“Bu görsel gibi bir bölüm oluşturmak istiyorum; duyarlı yazı boyutları, özelleştirilebilir yazı ve kart renkleri olsun; kartlar dairesel veya yuvarlatılmış kare şeklinde olabilir.”

ChatGPT (Selldone ile) görseli analiz edecek ve Selldone’un Page Builder’ı ile tamamen uyumlu Vuetify (Vue 3) tabanlı kod üretecektir.

Selldone’da Yeni Bir Landing Sayfası Oluşturun

Özel bölümünüzü eklemeden önce, Selldone içinde kullanılacak ham bir landing sayfası oluşturalım.

1. Mağaza üst menüsünden Sayfalar → Landing → Yeni Landing Ekle yolunu izleyin.
   
2. Bu ekranda üç varsayılan landing sayfası şablonu göreceksiniz.
3. Birini seçip Landing Page Designer’a girin. Tasarımcı içinde sol paneli açın, “Kod” öğesini bulun ve Page Builder alanına sürükleyin. Bu “Kod” öğesi, ChatGPT (Selldone Eklentisi) ile üretilen bölümü yapıştıracağınız veya içe aktaracağınız yerdir.
4. Kod kutusuna tıklayarak araç çubuğunu etkinleştirin — üstte sıkça kullanacağımız bir araç çubuğu belirecek.

- İlk simge (<>) Kod Editörünü açar, burada ChatGPT tarafından üretilen HTML ve Vue tabanlı bölüm kodunu yapıştırabilir veya düzenleyebilirsiniz.- İkinci simge Özellikleri açar, burada bölümün düzenini, boşluklarını ve görsel ayarlarını ayarlayabilirsiniz.

Adım 4 – ChatGPT’nin İlk Kodunu Editöre Yapıştırın

Yanlış Versiyon Olabilir

Şimdi ChatGPT’nin sizin için oluşturduğu ilk kod sürümünü kopyalamanız gerekiyor.
Ekran görüntüsünde de görüldüğü gibi, sonuç referans görüntünüzden farklı görünüyor olabilir — bu, ChatGPT’nin yanlış bir sürüm ürettiği anlamına gelir. Bu tamamen normaldir, endişelenmeyin.Bunu düzeltmek için referans görseli yeniden gönderin ve tekrar isteyin, örneğin şöyle deyin:

“Yukarıda gönderdiğim görsele odaklan. Görseli tekrar gönderiyorum.”

Şimdi ChatGPT baştan başlayacak ve yeni kod üretecek. Bu sürüm son sürüm olmayabilir; muhtemelen daha fazla istekte bulunup düzeltmeler yapacaksınız.Şimdi, kodu kopyalayıp kod editörüne yapıştırın ve Uygula butonuna basın:

Önemli Not: Kod editörünün varsayılan modu HTML’dir. Vue seçeneğine geçmelisiniz — aksi takdirde boş bir sonuçla karşılaşırsınız.

Artık ChatGPT tarafından oluşturulan bölümün ilk doğru sürümünü görüyorsunuz. Araç çubuğundaki ikinci öğeye basın (daha önce bahsedildiği gibi) ve Özellikler menüsünü açın. Görüldüğü gibi, bu bölümü işletmenize göre özelleştirmenize yardımcı olacak birçok ayar mevcut.

DEFAULT (SIFIRLA) seçeneği:

Bazen güncellenmiş bir kod yapıştırdığınızda görünür bir değişiklik göremeyebilirsiniz. Bu, düzenlemeler temel düzeydeyse olabilir. Böyle durumlarda Varsayılana Sıfırla seçeneğine tıklamanız gerekir. Bu seçeneğin kullanılması, metinler, renkler, yazı tipi boyutları ve yüklenmiş görseller dahil tüm özel ayarlarınızı kaldırır — temelde fabrika ayarlarına döner 🙂.Yani, değişiklikler düzgün uygulanmıyorsa bu seçeneği yalnızca gerektiğinde kullanın.

Adım 5 – Bölümü Ayarlayın

ChatGPT, bu yöntemi kullanarak bölüm inşa eden diğer kullanıcılardan öğrendiklerine dayanarak daha kapsamlı düzenler üretiyor — yani her öğeyi tek tek istemenize gerek yok. Bu, onunla daha çok sohbet etmenin gerçek faydasıdır: konuşmanız ne kadar uzun ve açıklayıcı olursa, ChatGPT tasarım tercihlerinizi o kadar iyi anlar ve daha eksiksiz, doğru sonuçlar verir.Varsayılan olarak oluşturulan kod zaten oldukça duyarlı, ancak yine de detayları yazı boyutları, yazı kalınlıkları, bölüm veya kart yükseklikleri, genişlikleri ve diğer görsel öğeler gibi tercihlere göre ayarlayabilirsiniz.
Örneğin burada, Selldone’u büyük masaüstü ekranlarda satır başına 8 kart, tabletlerde 4 kart ve mobil cihazlarda 2 kart gösterecek şekilde ayarlayabilirsiniz.
ChatGPT’nin bu ayarları nasıl yorumlayıp uyguladığını görelim — birkaç düzenleme veya ek istek yapmamız gerekebilir.Bu durumda, daha iyi bir düzen için Bölüm Maks. Genişliğini 1400px olarak değiştirmeniz gerekir. Ayrıca kart sayısını masaüstü, tablet ve mobil için sırasıyla 8, 4 ve 2 olarak ayarlayabilirsiniz.
Boşlukları iyileştirmek için Cards Gap (Desktop) değerini yaklaşık 12px’e düşürmeyi deneyin. Ayrıca kart yüksekliğini 180px’den 160px’e düşürebilir veya görsel boyutlarını tasarımınıza göre ayarlayabilirsiniz.

Bu ayarlarla oynayarak görünümü kolayca özelleştirebileceğinizi unutmayın — sayılarla deneme yapın ve stilinize en uygun olanı bulun.

Sonucu daha iyi görselleştirmek için kendi görsellerinizi yükleyebilirsiniz. Kart Arka Plan Rengi seçeneğinin tüm görsellerde eşit uygulanması için şeffaf arka plana sahip görseller kullanmanızı öneririz — bu, bölümünüze daha temiz ve profesyonel bir görünüm kazandırır.Görsellerinizi yükleyip metinleri düzenledikten ve her şeyi son haline getirdikten sonra Kaydet düğmesine tıklayın — ya da Windows’ta anında kaydetmek için Ctrl + S tuş kombinasyonunu kullanın.
Şimdi Canlı Sayfayı açıp bölümünüzü çalışırken görün.
Bunu canlı görmek için Canlı Önizleme seçeneğini kullanabilir veya landing sayfa adınızı gösteren düğmeye tıklayabilirsiniz — bu, sayfayı alıcı görünümünde açar, ziyaretçilerinizin göreceği şekilde gösterir. Ancak son sürümü kontrol etmek için Canlı Önizleme’yi kullanmanızı önermiyorum, çünkü farklı cihazlardaki tam duyarlılığı tam olarak yansıtmayabilir — bunu aşağıda daha detaylı konuşacağız.Bu, kodun sonucu. Şimdi her şeyin düzgün çalıştığından emin olmak için farklı ekran boyutlarında test etmemiz gerekiyor.
Windows tarayıcılarında Web Geliştirici Araçlarını açmak için F12 tuşuna basın.
Bu araç sayfayı çeşitli ekran boyutlarında önizlemenizi sağlar — mobil, tablet, dizüstü veya diğer cihazlarda ayrı ayrı test etmeye gerek kalmadan.Şimdi, üst menüden Responsive (Duyarlı) seçeneğini seçerek bölümünüzün farklı ekran boyutlarında nasıl göründüğünü önizleyin.Gördüğünüz gibi mobil versiyon temiz ve tamamen duyarlı görünüyor.Tablet görünümünde — — bizim ayarlarımız (tablet için satır başına 4 kart) uygulanmıyor ve yalnızca 2 gösteriliyor. Bu sorunu düzeltmesi için ChatGPT’den yeniden kodlamasını istemeliyiz.

Adım 6 – Yineleyin ve İnce Ayar Yapın

İlk sürümde durmayın — gerçek yaratıcılık burada başlar. ChatGPT ile sohbeti sürdürerek şu tür detayları ayarlayabilirsiniz:

• Bölümü tüm ekranlarda duyarlı hale getirme.
• Hover animasyonu ekleme.
• Gradyan butonlar kullanma.

Her tur bölümünüzü anında günceller.

💡 Profesyonel İpucu: Ne kadar çok sohbet edip ne istediğinizi detaylı anlatırsanız, ChatGPT tasarım stilinizi o kadar iyi anlar. Zamanla tercihlerinizi öğrenir ve daha doğru, yüksek kaliteli sonuçlar üretir.
Burada sorunu ChatGPT’ye net şekilde açıklamanız gerekir ki daha iyi anlasın.
Unutmayın, zihin okuyamaz — problemi detaylıca tarif etmelisiniz, örneğin şu yorum gibi:

Tablet boyutunda satır başına 4 Kart göstermek için 4 seçtim ama iPad Pro 11 inçte satır başına 2 Kart gösteriyor. Bunu düzelt. Mobil için satır başına 2 seçtim.

ChatGPT isteğinize yanıt verdiğinde, bazen yalnızca manuel olarak değiştirmeniz veya eklemeniz gereken spesifik kod değişikliklerini verir — aşağıdaki resimde olduğu gibi. 

İşi kolaylaştırmak için basitçe ona “Tam kodu gönder” demeniz yeterlidir.

Genellikle mesajının sonunda atlamış olabileceğiniz ek ayarlar önerir — bu örnekte olduğu gibi kartlara link eklemeyi tavsiye etmesi gibi, ki bu bölümümüz için önemlidir.

Neredeyse hazır! Güncellenmiş kodu kopyalayın, editöre yapıştırın, değişiklikleri kaydedin ve her şeyin doğru göründüğünden emin olmak için Canlı Modda görüntüleyin.
Gördüğünüz gibi, tablet versiyonunda artık satır başına 4 kart mükemmel şekilde görüntüleniyor.

Adım 7 – Kodu Son hâline Getirin ve Bölümü Kaydedin

Tasarımınız hazır olduğunda, Selldone’a bölümün yapısı ve gereksinimlerinin ayrıntılı bir açıklamasını vermek iyi bir fikirdir. Final kodu üretmesi için aşağıdaki istemi kullanın: