Görsel Editör

Metin, renkler, boşluklar, yazı tipleri ve daha fazlasını düzenlemek için öğelere tıklayın. Küçük değişiklikler için idealdir; daha büyük değişiklikler için sohbeti kullanın.

Görsel Editör, öğelere tıklayarak ve özelliklerini doğrudan düzenleyerek uygulamanın arayüzünü değiştirmeni sağlar. Etkinleştirmek için builder araç çubuğunda Visual moduna geç.

Nasıl çalışır?

Visual moduna geç — bu, araç çubuğundaki Preview modunun bir alt modudur (araç çubuğunun iki bölümü Preview ve Admin’dir)
Önizlemedeki öğelerin üzerine gel — bir katmanla vurgulanırlar
Seçmek için bir öğeye tıkla
Kenar çubuğu panelinde özellikleri düzenle: metin, renkler, boşluklar, yazı tipleri, kenarlıklar, görseller, efektler

Değişiklikler anında önizlemeye uygulanır ve kaynak dosyalarına yazılır. Son özellik değişikliğini geri almak için kenar çubuğundaki Reset last edit düğmesini kullan.

Ne düzenleyebilirim?

Metin — İçeriği doğrudan düzenle
Yazı tipi boyutu — xs, sm, base, lg, xl vb.
Yazı tipi kalınlığı — thin, light, normal, medium, semibold, bold, extrabold
Yazı tipi ailesi — Geist, Inter, Montserrat, Noto Serif, Geist Mono, Fira Code, JetBrains Mono
Yazı tipi stili — İtalik geçiş düğmesi
Metin hizalaması — left, center, right, justify
Metin rengi — Herhangi bir Tailwind rengi
Arka plan rengi — Herhangi bir Tailwind rengi
Boşluklar — Tüm kenarlar için padding ve margin
Kenarlık — Genişlik, renk ve yuvarlaklık (metin içeriği olmayan kapsayıcı öğelerde kullanılabilir)
Görsel — Stok fotoğraf aramasıyla değiştir veya kendi görselini yükle (img öğelerine ve arka plan görsellerine uygulanır)
Efektler — Gölge ve opaklık

Geri Al / Yinele

Değişiklikleri geri almak için Cmd+Z (Mac) veya Ctrl+Z (Windows) kısayolunu kullan. Yinelemek için Cmd+Shift+Z / Ctrl+Shift+Z.

Sayfa paleti

Görsel Editör, sayfanı inceleyerek halihazırda kullanımda olan tüm Tailwind renklerini ve CSS özel özelliklerini yüzeye çıkarır. Seçili öğe için renk seçiciyi açtığında, hex kodlarını tahmin etmek yerine mevcut tasarım sistemin ile tutarlı kalmak için bu sayfa paletinden seçim yapabilirsin.

Seçili bir öğe hakkında yapay zekaya sor

Özellik editörünün ifade edemediği değişiklikler için kenar çubuğunun alt kısmındaki Ask AI giriş alanına kısa bir istem yaz. Seçili öğe bağlam olarak iletilir; bu sayede “bu kartı daha kompakt hale getir” veya “hafif bir yükselme efektiyle hover durumu ekle” gibi istemler, hangi öğeyi kastettiğini açıklamana gerek kalmadan çalışır.

Statik ve Dinamik Öğeler

Görsel Editör, className ve metin içeriğinin JSX’te dize sabitleri olduğu statik öğelerde en iyi şekilde çalışır. Dinamik öğelerde (hesaplanmış className’ler, koşullu render, ifadeler) editör otomatik olarak yapılandırılmış bir istemle AI sohbetine geri döner.

Görsel Editörü ne zaman kullanmalıyım?

Görsel Editör, küçük ve hızlı değişiklikler için en uygun araçtır:

Yazım hatası düzeltme
Boşluk ayarlama
Renk değiştirme
Düğme metnini güncelleme

Daha büyük değişiklikler için (yeni bölümler, düzen yeniden yapılandırmaları, yeni özellikler) AI sohbetini kullan.

Değişikliklerimi nasıl kaydederim?

Bir özelliği düzenlediğinde değişiklikler otomatik olarak kaydedilir. Dosya çalışma ortamına yazılır ve değişiklik, commit eden bir sonraki builder turunda sürüm geçmişine eklenir.

SSS

Görsel düzenlemeleri geri alabilir miyim?

Evet. Geri almak için Cmd+Z / Ctrl+Z kısayolunu kullan. Görsel Editör kendi geri al/yinele yığınını tutar.

Neden bazı öğeleri düzenleyebiliyorum, bazılarını düzenleyemiyorum?

Statik metin ve className nitelikleri doğrudan düzenlenebilir. Dinamik veya hesaplanmış değerler (şablon sabitleri, üçlü ifadeler, fonksiyon çağrıları) otomatik olarak AI sohbetine geri döner.

Görsel Editörü AI sohbeti yerine ne zaman kullanmalıyım?

Araç	En iyi kullanım alanı
Visual Editor	Tıklayarak hızlı özellik değişiklikleri (metin, renkler, boşluklar)
AI Chat	Karmaşık değişiklikler, yeni özellikler, hata ayıklama

Uygulamanı değiştirmenin yalnızca bu iki yolu vardır — kod editörü bulunmaz. Bkz. Kodunuzu Düzenleme ve Erişme.