ویرایشگر بصری
روی عناصر کلیک کنید تا متن، رنگها، فاصلهگذاری، فونتها و موارد دیگر را ویرایش کنید. برای تغییرات کوچک بهترین گزینه است؛ برای تغییرات بزرگتر از چت استفاده کنید.
ویرایشگر بصری به شما امکان میدهد رابط کاربری اپتان را با کلیک روی عناصر و ویرایش مستقیم ویژگیهای آنها تغییر دهید. برای فعال کردن آن، در نوار ابزار builder به حالت Visual سوییچ کنید.
چطور کار میکند
Section titled “چطور کار میکند”- در نوار ابزار به حالت Visual سوییچ کنید (در کنار Preview، Code و Dashboard)
- روی عناصر موجود در preview نگه دارید — با یک overlay هایلایت میشوند
- روی یک عنصر کلیک کنید تا انتخاب شود
- ویژگیها را در پانل sidebar ویرایش کنید: متن، رنگها، فاصلهگذاری، فونتها، حاشیهها، تصاویر، افکتها
تغییرات بلافاصله در preview اعمال میشوند و در فایلهای منبع شما نوشته میشوند. از دکمه Reset last edit در sidebar استفاده کنید تا آخرین تغییر ویژگی را برگردانید.
چه چیزی میتوانم ویرایش کنم؟
Section titled “چه چیزی میتوانم ویرایش کنم؟”- متن — محتوای متنی را مستقیماً ویرایش کنید
- اندازه فونت — xs، sm، base، lg، xl و غیره
- ضخامت فونت — thin، light، normal، medium، semibold، bold، extrabold
- خانواده فونت — Geist، Inter، Montserrat، Noto Serif، Geist Mono، Fira Code، JetBrains Mono
- سبک فونت — تاگل ایتالیک
- تراز متن — left، center، right، justify
- رنگ متن — هر رنگ Tailwind
- رنگ پسزمینه — هر رنگ Tailwind
- فاصلهگذاری — padding و margin در تمام جهات
- حاشیه — عرض، رنگ و شعاع (برای عناصر container بدون محتوای متنی در دسترس است)
- تصویر — با جستجوی عکس stock جایگزین کنید یا تصویر خودتان را آپلود کنید (برای عناصر img و تصاویر پسزمینه اعمال میشود)
- افکتها — سایه و شفافیت
بازگشت / پیشرفت
Section titled “بازگشت / پیشرفت”از Cmd+Z (Mac) یا Ctrl+Z (Windows) برای بازگشت تغییرات استفاده کنید. برای پیشرفت هم Cmd+Shift+Z / Ctrl+Shift+Z.
پالت صفحه
Section titled “پالت صفحه”ویرایشگر بصری صفحه شما را بررسی میکند و تمام رنگهای Tailwind و custom propertyهای CSS که در حال استفاده هستند را نمایش میدهد. وقتی color picker را برای عنصر انتخابشده باز میکنید، میتوانید از این پالت صفحه انتخاب کنید تا با سیستم طراحی موجودتان هماهنگ بمانید و نیازی به حدس زدن کدهای hex نداشته باشید.
پرسش از هوش مصنوعی درباره یک عنصر انتخابشده
Section titled “پرسش از هوش مصنوعی درباره یک عنصر انتخابشده”برای تغییراتی که ویرایشگر ویژگی نمیتواند اعمال کند، یک دستور کوتاه در کادر Ask AI در پایین sidebar تایپ کنید. عنصر انتخابشده به عنوان context ارسال میشود، بنابراین دستوراتی مثل «این کارت را فشردهتر کن» یا «یک hover state با بلند شدن ظریف اضافه کن» بدون نیاز به توضیح اینکه کدام عنصر را میخواهید، کار میکنند.
عناصر استاتیک در مقابل دینامیک
Section titled “عناصر استاتیک در مقابل دینامیک”ویرایشگر بصری روی عناصر استاتیک که className و محتوای متنی آنها در JSX به صورت string literal هستند، بهترین عملکرد را دارد. برای عناصر دینامیک (className های محاسبهشده، رندرینگ شرطی، عبارات)، ویرایشگر به طور خودکار به AI chat با یک دستور ساختاریافته برمیگردد.
چه زمانی باید از ویرایشگر بصری استفاده کنم؟
Section titled “چه زمانی باید از ویرایشگر بصری استفاده کنم؟”ویرایشگر بصری برای تغییرات کوچک و سریع بهترین گزینه است:
- رفع غلط تایپی
- تنظیم فاصلهگذاری
- تغییر رنگ
- بهروزرسانی متن دکمه
برای تغییرات بزرگتر (بخشهای جدید، تغییر ساختار layout، ویژگیهای جدید)، از AI chat استفاده کنید.
چطور تغییرات را ذخیره کنم؟
Section titled “چطور تغییرات را ذخیره کنم؟”تغییرات هنگام ویرایش یک ویژگی به طور خودکار ذخیره میشوند. فایل در runtime شما نوشته شده و هنگامی که هوش مصنوعی یا شما یک commit ایجاد میکنید، commit میشود.
سوالات متداول
Section titled “سوالات متداول”آیا میتوانم ویرایشهای بصری را برگردانم؟
بله. از Cmd+Z / Ctrl+Z برای بازگشت استفاده کنید. ویرایشگر بصری stack مستقل خودش را برای undo/redo نگه میدارد.
چرا میتوانم برخی عناصر را ویرایش کنم ولی برخی دیگر را نه؟
متن استاتیک و attributeهای className میتوانند مستقیماً ویرایش شوند. مقادیر دینامیک یا محاسبهشده (template literal ها، عبارات ternary، فراخوانی توابع) به طور خودکار به AI chat برمیگردند.
تفاوت بین ویرایشگر بصری و Code Editor چیست؟
| ابزار | بهترین کاربرد |
|---|---|
| Visual Editor | تغییرات سریع ویژگیها (متن، رنگها، فاصلهگذاری) با کلیک |
| Code Editor | ویرایش کامل سورس کد با VS Code |
| AI Chat | تغییرات پیچیده، ویژگیهای جدید، دیباگ |