المحرر المرئي
انقر على العناصر لتعديل النصوص والألوان والمسافات والخطوط والمزيد. الأنسب للتعديلات الصغيرة؛ استخدم المحادثة للتغييرات الكبيرة.
يتيح لك المحرر المرئي تغيير واجهة مستخدم تطبيقك بالنقر على العناصر وتعديل خصائصها مباشرةً. بدّل إلى وضع Visual في شريط أدوات Builder لتفعيله.
كيف يعمل
Section titled “كيف يعمل”- بدّل إلى وضع Visual — وهو وضع فرعي من Preview في شريط الأدوات (يحتوي شريط الأدوات على قسمين: Preview وAdmin)
- مرّر المؤشر فوق العناصر في المعاينة — ستُبرز بإطار تمييزي
- انقر على عنصر لتحديده
- عدّل الخصائص في لوحة الشريط الجانبي: النصوص والألوان والمسافات والخطوط والحدود والصور والتأثيرات
تُطبَّق التغييرات فوراً على المعاينة وتُكتب في ملفات المصدر. استخدم زر Reset last edit في الشريط الجانبي للتراجع عن آخر تغيير في الخصائص.
ماذا يمكنني تعديله؟
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)
- محاذاة النص — left، center، right، justify
- لون النص — أي لون من Tailwind
- لون الخلفية — أي لون من Tailwind
- المسافات — الـ padding والـ margin على جميع الجوانب
- الحدود — العرض واللون ونصف القطر (متاح لعناصر الحاوية التي لا تحتوي على نص)
- الصورة — استبدالها بصورة من مكتبة الصور المجانية أو رفع صورتك الخاصة (يُطبَّق على عناصر
imgوصور الخلفية) - التأثيرات — الظل والشفافية
التراجع / الإعادة
Section titled “التراجع / الإعادة”استخدم Cmd+Z (Mac) أو Ctrl+Z (Windows) للتراجع عن التغييرات. وCmd+Shift+Z / Ctrl+Shift+Z للإعادة.
لوحة ألوان الصفحة
Section titled “لوحة ألوان الصفحة”يفحص المحرر المرئي صفحتك ويعرض جميع ألوان Tailwind وخصائص CSS المخصصة المستخدمة فعلياً فيها. عند فتح منتقي الألوان للعنصر المحدد، يمكنك الاختيار من لوحة ألوان الصفحة للحفاظ على الاتساق مع نظام التصميم الموجود لديك، بدلاً من تخمين أكواد الألوان الست عشرية.
اسأل الذكاء الاصطناعي عن عنصر محدد
Section titled “اسأل الذكاء الاصطناعي عن عنصر محدد”للتعديلات التي لا يستطيع محرر الخصائص التعبير عنها، اكتب مطالبة قصيرة في حقل Ask AI في أسفل الشريط الجانبي. يُمرَّر العنصر المحدد كسياق، لذا تعمل مطالبات مثل “اجعل هذه البطاقة أكثر إحكاماً” أو “أضف حالة hover مع رفع خفي” دون الحاجة إلى وصف العنصر الذي تقصده.
العناصر الثابتة مقابل الديناميكية
Section titled “العناصر الثابتة مقابل الديناميكية”يعمل المحرر المرئي بشكل أفضل مع العناصر الثابتة حيث يكون className ومحتوى النص عبارة عن سلاسل نصية حرفية في JSX. أما العناصر الديناميكية (الـ classNames المحسوبة، والعرض الشرطي، والتعبيرات)، فيتراجع المحرر تلقائياً إلى محادثة الذكاء الاصطناعي مع مطالبة منظَّمة.
متى يجب استخدام المحرر المرئي؟
Section titled “متى يجب استخدام المحرر المرئي؟”المحرر المرئي هو الأنسب لـالتعديلات الصغيرة والسريعة:
- تصحيح خطأ مطبعي
- ضبط المسافات
- تغيير لون
- تحديث نص زر
للتغييرات الكبيرة (أقسام جديدة، إعادة هيكلة التخطيط، ميزات جديدة)، استخدم محادثة الذكاء الاصطناعي.
كيف أحفظ التغييرات؟
Section titled “كيف أحفظ التغييرات؟”تُحفظ التغييرات تلقائياً عند تعديل أي خاصية. يُكتب الملف في بيئة التشغيل الخاصة بك، ويُدرج التغيير في سجل الإصدارات في الجولة التالية من Builder التي تُنفّذ عملية commit.
الأسئلة الشائعة
Section titled “الأسئلة الشائعة”هل يمكنني التراجع عن التعديلات المرئية؟
نعم. استخدم Cmd+Z / Ctrl+Z للتراجع. يحتفظ المحرر المرئي بسجل تراجع/إعادة خاص به.
لماذا يمكنني تعديل بعض العناصر دون غيرها؟
يمكن تعديل سمات النص الثابت وclassName مباشرةً. أما القيم الديناميكية أو المحسوبة (القوالب النصية، والتعبيرات الثلاثية، واستدعاءات الدوال)، فتتراجع تلقائياً إلى محادثة الذكاء الاصطناعي.
متى يجب استخدام المحرر المرئي بدلاً من محادثة الذكاء الاصطناعي؟
| الأداة | الأنسب لـ |
|---|---|
| Visual Editor | تغييرات الخصائص السريعة (النصوص والألوان والمسافات) بالنقر |
| AI Chat | التغييرات المعقدة والميزات الجديدة وتصحيح الأخطاء |
هاتان هما الطريقتان الوحيدتان لتغيير تطبيقك — لا يوجد محرر كود. راجع تعديل الكود والوصول إليه.