ویرایشگر بصری
روی عناصر کلیک کنید تا متن، رنگها، فاصلهگذاری، فونتها و موارد دیگر را ویرایش کنید. برای تغییرات کوچک بهترین گزینه است؛ برای تغییرات بزرگتر از چت استفاده کنید.
ویرایشگر بصری به شما امکان میدهد رابط کاربری اپتان را با کلیک روی عناصر و ویرایش مستقیم ویژگیهای آنها تغییر دهید. برای فعالسازی آن، در نوار ابزار builder به حالت Visual بروید.
نحوه عملکرد
Section titled “نحوه عملکرد”- به حالت Visual بروید — این حالت، یک زیرحالت از Preview در نوار ابزار است (نوار ابزار دو بخش دارد: Preview و Admin)
- ماوس را روی عناصر preview نگه دارید — آنها با یک overlay برجسته میشوند
- روی یک عنصر کلیک کنید تا انتخاب شود
- ویژگیها را در پنل sidebar ویرایش کنید: متن، رنگها، فاصلهگذاری، فونتها، border، تصاویر، افکتها
تغییرات بلافاصله در 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
- سبک فونت — تغییر حالت Italic
- تراز متن — چپ، وسط، راست، justify
- رنگ متن — هر رنگ Tailwind
- رنگ پسزمینه — هر رنگ Tailwind
- فاصلهگذاری — Padding و margin در همه طرفها
- Border — عرض، رنگ و radius (در عناصر container بدون محتوای متنی موجود است)
- تصویر — با جستجوی عکس stock یا آپلود تصویر خودتان جایگزین کنید (برای عناصر img و تصاویر پسزمینه اعمال میشود)
- افکتها — Shadow و opacity
بازگشت / بازانجام
Section titled “بازگشت / بازانجام”از Cmd+Z (Mac) یا Ctrl+Z (Windows) برای بازگشت تغییرات استفاده کنید. از Cmd+Shift+Z / Ctrl+Shift+Z برای بازانجام.
پالت رنگ صفحه
Section titled “پالت رنگ صفحه”ویرایشگر بصری صفحه شما را بررسی میکند و تمام رنگهای Tailwind و ویژگیهای سفارشی CSS که در حال استفاده هستند را نمایش میدهد. وقتی color picker را برای عنصر انتخابشده باز میکنید، میتوانید از این پالت رنگ صفحه انتخاب کنید تا با سیستم طراحی موجودتان هماهنگ باقی بمانید، به جای اینکه کدهای hex را حدس بزنید.
پرسش از هوش مصنوعی درباره عنصر انتخابشده
Section titled “پرسش از هوش مصنوعی درباره عنصر انتخابشده”برای تغییراتی که ویرایشگر ویژگیها نمیتواند بیان کند، یک prompt کوتاه در ورودی Ask AI در پایین sidebar تایپ کنید. عنصر انتخابشده به عنوان context ارسال میشود، بنابراین prompt هایی مانند «این کارت را فشردهتر کن» یا «یک حالت hover با یک بالاآمدن ظریف اضافه کن» بدون اینکه نیاز باشد توضیح دهید کدام عنصر را میخواهید، کار میکنند.
عناصر استاتیک در مقابل داینامیک
Section titled “عناصر استاتیک در مقابل داینامیک”ویرایشگر بصری بهترین عملکرد را روی عناصر استاتیک دارد، جایی که className و محتوای متنی در JSX به صورت رشتههای literal هستند. برای عناصر داینامیک (className های محاسبهشده، رندر شرطی، عبارات)، ویرایشگر به طور خودکار به چت هوش مصنوعی با یک prompt ساختاریافته بازمیگردد.
چه زمانی باید از ویرایشگر بصری استفاده کنم؟
Section titled “چه زمانی باید از ویرایشگر بصری استفاده کنم؟”ویرایشگر بصری برای تغییرات کوچک و سریع بهترین گزینه است:
- رفع یک غلط تایپی
- تنظیم فاصلهگذاری
- تغییر رنگ
- بهروزرسانی متن دکمه
برای تغییرات بزرگتر (بخشهای جدید، تغییر ساختار layout، ویژگیهای جدید)، از چت هوش مصنوعی استفاده کنید.
چطور تغییرات را ذخیره کنم؟
Section titled “چطور تغییرات را ذخیره کنم؟”تغییرات هنگام ویرایش یک ویژگی به طور خودکار ذخیره میشوند. فایل در runtime شما نوشته میشود و تغییر در اولین نوبت builder که commit میکند، وارد تاریخچه نسخه شما میشود.
سؤالات متداول
Section titled “سؤالات متداول”آیا میتوانم ویرایشهای بصری را برگردانم؟
بله. از Cmd+Z / Ctrl+Z برای بازگشت استفاده کنید. ویرایشگر بصری stack undo/redo مخصوص خودش را نگه میدارد.
چرا میتوانم بعضی عناصر را ویرایش کنم اما بعضی دیگر را نه؟
ویژگیهای متن استاتیک و className را میتوان مستقیماً ویرایش کرد. مقادیر داینامیک یا محاسبهشده (template literal ها، عبارات ternary، فراخوانی توابع) به طور خودکار به چت هوش مصنوعی بازمیگردند.
چه زمانی باید از ویرایشگر بصری به جای چت هوش مصنوعی استفاده کنم؟
| ابزار | بهترین کاربرد |
|---|---|
| Visual Editor | تغییرات سریع ویژگیها (متن، رنگها، فاصلهگذاری) با کلیک |
| AI Chat | تغییرات پیچیده، ویژگیهای جدید، رفع اشکال |
این دو تنها راه تغییر اپ شما هستند — هیچ code editor ای وجود ندارد. ویرایش و دسترسی به کد را ببینید.