Görsel düzenleme ve önizleme

Görsel düzenleme doğrudan Uygulama Görüntüleyici içinde çalışır. Öğeleri seçmek, metni düzenlemek, görselleri değiştirmek, bir tema uygulamak ve yayınlamadan önce değişikliklerinizi önizlemek için önizlemenin altındaki araç çubuğunu kullanın.

Yapay zeka destekli değişiklikler için Select element seçeneğini, doğrudan metin değişiklikleri için Edit Text'i ve renkler, yazı tipleri ve efektler gibi genel stiller için Theme'i kullanın.

Görsel düzenleme nasıl çalışır

AI agent'ları bir görevi tamamladığında, projenin üst kısmında Uygulama Görüntüleyici görünür. Görsel düzenleme araç çubuğu önizlemenin altında yer alır.

• Select element, bir veya daha fazla öğe seçmenize ve agent'lardan bunları değiştirmesini istemenize olanak tanır.
• Edit Text, metni doğrudan önizleme içinde düzenlemenize olanak tanır.
• Theme, genel stiller için tema denetimlerini açar.

İhtiyacınız olmadığında araç çubuğu daraltılabilir.

Başlamadan önce

Düzenlemeye başlamadan önce şunlardan emin olun:

• Projenizde tamamlanmış bir build var. Görsel düzenleme araçları, agent'lar bir görevi bitirdikten sonra Uygulama Görüntüleyici içinden kullanılabilir.
• Değişikliklerin siz yayınlayana kadar canlı olmadığını biliyorsunuz. Güncellenmiş sürümü yayınlayana kadar herkese açık URL'niz etkilenmez.
• Bir temanın yalnızca paylaşılan stillere ulaştığını biliyorsunuz. Sabit değerlerle oluşturulmuş öğeler, tema değişikliğinden sonra eski görünümlerini korur. Aşağıdaki Bir tema doğru görünmüyorsa bölümüne bakın.

Theme ile genel stilleri ayarlayın

Tema, projenizin tasarım sistemidir. Tek bir öğedeki ayarlar yerine, tüm uygulamanız genelinde geçerli olan genel değişkenleri — paletler, tipografi ve aralıklar — tanımlar.

Theme en iyi, oluşturmaya başlamadan önce hazırlık aşamasında kullanılır. Erken uygulanması, agent'ların ürettiği her şeyin en baştan buna uymasını sağlar.

Bir tema seçin

Uygulama Görüntüleyici altındaki araç çubuğundan Theme seçeneğini seçin. Theme paneli bir Search Themes alanı içerir ve temaları bölümlere ayırır:

• Current Theme — projenizin şu anda kullandığı tema. Herhangi bir şey uygulamadan önce burada No theme applied yet yazar ve yanındaki + düğmesi yeni bir tema oluşturur.
• Featured Theme — tasarımcılar tarafından seçilmiş 15 hazır tema. Her biri, onunla oluşturulmuş bir sayfanın önizlemesi, adı ve paletini gösteren bir renk örneği satırı ile gösterilir. Bunlar silinemez.
• Your Theme — oluşturduğunuz veya özelleştirdiğiniz temalar. Bunlar yeniden adlandırılabilir ve silinebilir.

Her tema, onunla oluşturulmuş bir sayfanın önizlemesi, adı ve paletini gösteren bir renk örneği satırı ile görünür; böylece uygulamadan önce yönünü değerlendirebilirsiniz.

Theme sekmesi; üstte uygulanmış bir tema, altında ise kaydedilmiş temalarınız bulunur.

Birini uygulamak için:

1. İstediğiniz temayı seçin.
2. Atoms "Do you want to apply theme name?" diye sorar.
3. Onaylamak için Apply, geri dönmek için Cancel seçeneğini seçin.
4. Önizlemeyi kontrol edin.

Beklenen sonuç: önizleme seçtiğiniz temaya güncellenir ve artık Current Theme altında görünür.

Not: Kaydedilmemiş metin veya görsel değişiklikleriniz varsa, Atoms yeni bir tema uygulamadan önce bunları kaydetmenizi veya silmenizi ister.

Uygulanmış bir temayı güncelleyin

Theme sekmesindeki bir nokta, uygulanmış temanızın daha yeni bir sürümünün mevcut olduğu anlamına gelir.

Bunu almak için mevcut temanızda Update seçeneğini seçin ve Do you want to re-apply theme name? istemini onaylayın. Ardından projeniz daha yeni sürümü kullanır.

Güncellemek zorunda değilsiniz. Olduğu gibi bırakırsanız, projeniz uyguladığınız sürümü kullanmaya devam eder.

Not: Not: Uygulamanız seçtiğiniz tema gibi görünmüyorsa, tek tek öğelerde temayı geçersiz kılan stiller olabilir. Bu geçersiz kılmalar belirli içeriği hedefler ve tema değişikliğinden sonra da kalır.

Theme Manager içinde tema oluşturun veya düzenleyin

Sıfırdan bir tema oluşturmak için Current Theme yanındaki + seçeneğini seçin ya da değiştirmek için mevcut bir temayı açın. Her iki işlem de, canlı önizleme karşısında bir temayı ince ayar yaptığınız Theme Manager'ı açar.

Ayarları üç sekmede bulunur:

• Color — uygulamanızın kullandığı renk rolleri; kullanım amacına göre gruplandırılmıştır: Base Colors, Card, Popover, Primary, Secondary ve daha fazlası. Her rolün kendi değeri vardır; bu nedenle Primary değerini değiştirmek, onu kullanan her öğeye yansır.
• Fonts — Serif, Sans-serif ve Mono yazı tipleriniz.
• Effects — köşe Radius ve renk, opaklık, blur, spread ve offset ile kontrol ettiğiniz bir Shadow.

Yanlarındaki önizleme gerçek bileşenlerden oluşturulmuştur — oturum açma formları, düğmeler, giriş alanları, gövde metni ve monospace metin — böylece tahmin etmek yerine bir değişikliği hemen değerlendirebilirsiniz. Her ikisini de kontrol etmek için altındaki açık/koyu geçişini kullanın; çünkü açık yüzeylerde iyi çalışan bir palet, koyu yüzeylerde kontrastını kaybedebilir.

Önizlemenin altında ayrıca değişiklikleriniz arasında ilerlemek için Undo ve Redo, temayı başladığı hâline döndürmek için Reset bulunur.

Theme Manager. Bir değeri değiştirdiğinizde önizleme güncellenir ve altındaki denetimler geri al, yinele, dışa aktar, içe aktar ve sıfırlamayı kapsar.

Bir tema kaydedin

1. Save seçeneğini seçin.
2. Bir Theme Name verin veya önerileni koruyun.
3. Onaylamak için Save seçeneğini seçin.

Beklenen sonuç: temanız, Theme sekmesinde My Theme altında paleti renk örnekleri olarak gösterilerek görünür. Diğer tüm temalar gibi aynı şekilde uygulayın.

Not: Düzenlemeler siz kaydedene kadar korunmaz. Kaydedilmemiş değişiklikler varken farklı bir tema uygulamaya çalışırsanız, Atoms sizi durdurur ve kaydetme veya silme seçeneği sunar.

Bir temayı projeler arasında yeniden kullanın

Theme Manager, önizlemenin altında Export ve Import seçeneklerine sahiptir. Bir temayı dosyaya aktarın, ardından aynı tasarım yönünü yeniden kullanmak için başka bir projeye içe aktarın veya projesi sizinkiyle eşleşsin diye bir takım arkadaşınıza verin.

Bir tema doğru görünmüyorsa

Tema uygulamak bir uyumluluk kontrolü değildir, bu nedenle normalde başarısız olmaz. Tema, uygulamanızın üzerine kurulu olduğu paylaşılan stil değerlerini değiştirir; bu da seçicideki herhangi bir temanın genellikle herhangi bir projeye uygulanabileceği anlamına gelir.

Bunun yerine görebileceğiniz şey, başarıyla uygulanan ancak her şeye ulaşmayan bir temadır. Bunun için hata mesajı yoktur — yalnızca yanlış görünür.

Uygulamanızın bir kısmı eski görünümünü korur. Bu en yaygın sorundur. Sabit bir değer verilen, uygulamanızın paylaşılan stillerinden biri yerine doğrudan belirli bir renk veya yazı tipi atanmış bir öğeye tema değişikliği ulaşamaz; bu nedenle önceki görünümünü korur ve çevresindeki her şeyle çakışabilir. Etkilenen öğeyi seçin ve değişikliği proje sohbetinde açıklayın.

Metnin okunması zorlaşır. Açık yüzeyler için tasarlanmış bir düzene koyu tema uygulandığında, metin çok düşük kontrastla kalabilir. Etkilenen öğeleri Görsel Düzenleyici içinde ayarlayın veya mevcut tasarımınıza daha yakın bir tema seçin.

Atoms, temanın uygulanamayacağını söylüyor. Bu nadirdir ve projenizin arayüzünün Atoms tema sistemi üzerine kurulmadığı anlamına gelir. Bunun yerine Görsel Düzenleyici'yi kullanın — her şey yine de öğe öğe yapılabilir.

Önemli: Mümkün olduğunda bir temayı erken seçin. Agent'lar, tema zaten uygulanmışken oluşturma yaptığında, en baştan onun paylaşılan stillerini kullanırlar; böylece daha sonra yapılacak tema değişikliğinin ulaşamayacağı sabit değerlere sahip daha az öğe olur.

Öğeleri Görsel Düzenleyici ile düzenleyin

1. Görsel düzenleme araç çubuğunun üzerine gelin ve Select element seçeneğini seçin.
2. Araç çubuğu Click to select, Ctrl/Cmd + Click for multiple mesajını gösterir.
3. Önizlemede bir öğe seçin. Birden fazla öğe seçmek için seçim yaparken Windows'ta Ctrl, Mac'te Cmd tuşunu basılı tutun.
4. Seçimleriniz proje sohbetine eklenir. Araç çubuğu, örneğin Edit 1 selection in chat window gibi seçilen sayıyı gösterir.
5. İstediğiniz değişikliği proje sohbetinde açıklayın ve mesajınızı gönderin.
6. Seçim modundan çıkmak için tekrar Select element seçeneğini seçin.

Düzen, renkler, aralık, stil veya birden fazla seçili öğeyi etkileyen değişiklikler için proje sohbetini kullanın.

Metni doğrudan düzenleyin

1. Uygulama Görüntüleyici altındaki araç çubuğundan Edit Text seçeneğini seçin.
2. Click text content to edit göründüğünde, değiştirmek istediğiniz metni seçin.
3. Metni doğrudan önizleme içinde düzenleyin.
4. Kaydetmeden önce birden fazla metin öğesini düzenleyebilirsiniz. Araç çubuğu, örneğin 1 text change veya 2 text changes gibi bekleyen düzenleme sayısını gösterir.
5. Bekleyen tüm metin değişikliklerini korumak için Save, kaldırmak için Discard seçeneğini seçin.

Doğrudan düzenlemeye başlamak için Select element kullanırken metne çift tıklayabilirsiniz.

Değişikliklerinizi kaydedin veya silin

Doğrudan metin ve görsel değişiklikleri siz kaydedene kadar uygulanmaz. Bekleyen değişiklikler olduğunda araç çubuğu, değişiklik sayısını Discard ve Save ile birlikte gösterir.

• Save tüm bekleyen doğrudan düzenlemeleri uygular.
• Discard bekleyen düzenlemeleri kaldırır ve etkilenen öğeleri önceki durumlarına döndürür.

Bekleyen değişiklikler varken düzenleme modundan çıkmaya çalışırsanız, Atoms şunu gösterir:

Kaydedilmemiş değişiklikler

Kaydedilmemiş değişiklikleriniz var. Lütfen düzenleme modundan çıkmadan önce değişiklikleri kaydedin veya silin.

Düzenlemeye devam etmek için Cancel, değişiklikleri korumadan çıkmak için Discard seçeneğini seçin.

Kaydetme, çalışma projesini günceller. Siz yayınlayana kadar canlı siteyi güncellemez.

Bir görseli değiştirin

1. Select element moduna girin.
2. Değiştirmek istediğiniz görseli seçin.
3. Görsel kitaplığından bir görsel seçin veya seçili görsel üzerindeki yükleme denetimini kullanın.
4. Önizlemede değişimi kontrol edin.
5. Görsel değişikliğini uygulamak için Save, kaldırmak için Discard seçeneğini seçin.

Proje sohbetine ayrıca bir talimat da girerseniz, görsel değişimi ve sohbet talimatı birlikte gönderilebilir.

Görsel kategorileri ve Popular Images içeren Library sekmesi.

Görsellerin geldiği yer

Image, yerleşik koleksiyondur. Belirli bir şey için Search assets kullanın veya bir kategoriye göz atın — Backgrounds, Nature, Education, Health, Fashion, Science, Feelings ve People; geri kalanı için More tags bulunur. Bir kategori seçildiğinde açılır; geri dönmek için geri okunu kullanın. Aşağıdaki Popular Images genel bir seçki gösterir. Herhangi bir görselin üzerine gelin ve uygulamak için Use asset seçeneğini seçin.

Generate, bir açıklamadan yeni bir görsel oluşturur ve Pro veya Max plan gerektirir. Describe the image you want to generate altında istediğinizi yazın ve Generate seçeneğini seçin. Sonuçlar alanın altında görünür. Öğenize uygulamak için tamamlanmış bir küçük görseli seçin.

Upload, sürükle-bırak, yapıştırma veya tıklama ile kendi dosyanızı ekler. Görseller JPEG, PNG, GIF, BMP, TIFF veya WEBP formatlarında ve en fazla 4 MB olabilir. Yüklenen görseller bırakma alanının altında görünür — uygulamak için birini seçin.

Not: Use asset yalnızca yerleşik görsellerde görünür. Oluşturduğunuz veya yüklediğiniz görseller ise bunun yerine küçük görselleri seçerek uygulanır.

Sohbette değişiklikleri açıklayın

Select element ile bir veya daha fazla öğe seçtikten sonra, istediğiniz sonucu proje sohbetinde açıklayın.

Örneğin:

• "Bu bölümü daha sakin yap, daha fazla boşluk ve daha küçük bir başlık kullan."
• "Bu düğmeleri fiyatlandırma sayfasındaki stille eşleştir."

Hedeflenen sonucu açıkça belirtin. "Daha iyi görünmesini sağla" gibi talimatlar öngörülemeyen sonuçlar üretebilir

Değişikliklerinizi önizleyin

Önizlemenin üstündeki araç çubuğunu kullanın:

• Device view — duyarlılığı test etmek için ekran boyutları arasında geçiş yapın. Masaüstünde doğru görünen tema ve tipografi değişiklikleri mobilde sık sık bozulur; bu nedenle yayınlamadan önce her zaman mobili kontrol edin.
• Page selector — uygulamanızın sayfaları arasında geçiş yapın.
• Refresh — güncel görünmüyorsa önizlemeyi yeniden yükleyin.
• Open in a new tab — uygulamayı ayrı bir tarayıcı sekmesinde tam genişlikte görüntüleyin.
• Console — bir şey yanlış göründüğünde günlük panelini açın.

Beklenen sonuç: değişiklikleriniz, desteklemeyi planladığınız her sayfada ve her cihaz genişliğinde görünür.

Bir önizleme sorunundan kurtulun

Önizleme güncel görünmüyorsa, yüklenmeye devam ediyorsa veya kırmızı hatalar gösteriyorsa, sorun görsel düzenlemelerinizden ziyade Uygulama Görüntüleyici ile ilgili olabilir. Sorun giderme adımları için Build and preview troubleshooting bölümüne bakın — Refresh, Console paneli, Resolve ve devam eden bir hatanın nasıl bildirileceği.

Doğrudan metin veya görsel düzenlemeleriniz kaybolmuş gibi görünüyorsa, onları kaydedip kaydetmediğinizi kontrol edin. Kaydedilmemiş değişiklikler, düzenleme modundan çıktığınızda silinebilir — Değişikliklerinizi kaydedin veya silin bölümüne bakın.

Değişikliklerinizi yayınlayın

Görsel düzenlemeler siz yayınlayana kadar çalışma projenizde kalır. Sağ üst köşedeki Publish seçeneğini ya da proje zaten canlıysa Update seçeneğini seçin.

Not: Projeniz Always Latest yerine Specify Sürüm kullanıyorsa, canlı site seçtiğiniz sürüme kilitli kalır ve yeni bir sürüm yayınlayana kadar tasarım değişiklikleriniz herkese açık olarak görünmez.

Agent'ların bir build sırasında bildirdiği hatalar için Sorun Bildir bölümüne bakın.