لوحة العناصر

من لوحة العناصر، يمكنك إضافة عناصر إلى صفحتك. انقر على العناصر أعلى الشريط الجانبي الأيسر لفتحها. تضم ثلاثة تبويبات: العناصر والتخطيطات والمكوّنات.

اسحب أي عنصر من اللوحة إلى مساحة التصميم لإضافته. يُضاف في الموضع الذي تفلته فيه.

العناصر

يضم تبويب العناصر عناصر بناء منفردة، موزعة في أقسام يمكنك فتحها وإغلاقها.

القسم	العناصر
الأساسيات	زر، حقل إدخال، عنوان، فقرة، حاوية، بطاقة
التخطيط والتنقل	قائمة، شريط جانبي، شبكة، أعمدة، صفوف، تبويبات، مسار التنقل، فاصل
النماذج والمدخلات	نموذج، مساحة نص، قائمة اختيار، مربع اختيار، مفتاح تبديل، زر اختيار، منتقي التاريخ، شريط بحث، رفع ملف، شريط نطاق
عرض البيانات	جدول، قائمة، شارة، خط زمني، بطاقة أسعار
الملاحظات والحالة	تنبيه، نافذة منبثقة، أقسام قابلة للطي
الوسائط	صورة، فيديو، YouTube، Vimeo، صوت، أيقونة
متقدم	نص منسّق، عارض شرائح
التكاملات	Stripe، Google Maps، Calendly، Typeform

التخطيطات

يضم تبويب التخطيطات أقسامًا جاهزة. تعرض كل بطاقة مخططًا مبسطًا لبنية القسم، لتختار حسب الشكل. اسحب أحدها إلى صفحتك، عادةً بين قسمين موجودين.

المجموعة	التخطيطات
القسم الرئيسي	في الوسط، تخطيط مقسّم، بسيط، محاذاة إلى اليمين، تقسيم معكوس، مع ميزات
الميزات	شبكة بطاقات، شبكة أيقونات، قائمة تحقق، تقسيم مع صورة، شبكة بسيطة، خطوات متناوبة
الإحصائيات	بسيط من 4 أعمدة، خلفية زرقاء، بطاقات بإطارات، كبير مع أوصاف، تقسيم مع صورة، مبسّط من 3 أعمدة
دعوة إلى إجراء	مربع بإطار، لافتة مع إحصائيات، محتوى فوق صورة
الأسعار	باقات في 3 أعمدة، شهري مقابل سنوي، باقة واحدة
الشهادات	شبكة من 3 أعمدة، اقتباس بارز، بطاقات في عمودين
تواصل	نموذج مع معلومات، بسيط في الوسط
التذييل	متعدد الأعمدة، بسيط في الوسط

كيف تتكيف العناصر المضافة مع صفحتك

لا تُضاف العناصر والتخطيطات بنمط ثابت. يكيّف WebTwizz كل عنصر مع موقعك أولًا:

• مظهر موقعك. يستخدم الألوان والخطوط والأزرار والبطاقات والمسافات الموجودة في صفحتك.
• الموضع الذي اخترته. يضبط حجمه ليناسب الموضع الذي أفلته فيه، مثل خلية في شبكة أو عمود في صف.
• صفحاتك ومحتواك. تُبنى القائمة أو الشريط الجانبي من محتوى موقعك: اسم علامتك التجارية وصفحاتك والروابط الموجودة في رأس الصفحة. يحتفظ التخطيط بالترتيب الذي اخترته، ويمكن أن تأتي عناصره من محتوى موجود في موقعك. تُملأ التبويبات والأقسام القابلة للطي وعارض الشرائح بمحتواك متى أمكن. ويعرض Google Maps عنوانك إذا كان مذكورًا في موقعك.
• البطاقة المجاورة. أفلت بطاقة أو زرًا بجوار عنصر مماثل موجود، وسيُبنى العنصر الجديد بالطريقة نفسها مع محتوى خاص به.
• نصوص وصور لموقعك. تُكتب النصوص المؤقتة وتُختار الصور والأيقونات بما يناسب موقعك فور إفلات العنصر.

تأخذ القائمة شكل الموضع الذي تفلتها فيه: رأس صفحة كامل في أعلى الصفحة، أو صف روابط داخل رأس الصفحة، أو عمود روابط في التذييل. وعند إفلات شريط جانبي على الصفحة نفسها، يظهر بجانب محتواك مع روابط لصفحاتك، أو لأقسام الموقع إذا كان من صفحة واحدة، ويتحول إلى زر قائمة على الهواتف. إذا كان موقعك يحتوي على رأس صفحة وأضفت رأسًا جديدًا، يظهر إشعار بذلك، لتتمكن من حذف ما لا تريده.

يزيل التراجع (⌘Z / Ctrl+Z) العنصر المضاف والمحتوى الذي مُلئ به في خطوة واحدة.

المكوّنات

المكوّنات هي أجزاء موقعك القابلة لإعادة الاستخدام، مثل شريط التنقل أو بطاقة الأسعار أو التذييل. يسرد تبويب المكوّنات كل ملفات المكوّنات في مجلد المكوّنات بمشروعك، باستثناء عناصر البناء الصغيرة المحفوظة في مجلد ui.

يعرض كل صف اسم المكوّن وملفه، مثل Button.tsx. استخدم البحث في المكوّنات لتصفية القائمة. اسحب مكوّنًا إلى مساحة التصميم لاستخدامه. تشير كل نسخة منه في موقعك إلى المكوّن نفسه، لذا يظهر أي تغيير عليه في كل موضع يُستخدم فيه.

إذا لم يكن مشروعك يحتوي على أي مكوّنات بعد، يعرض التبويب لا توجد مكوّنات.

إنشاء مكوّن

انقر بزر الماوس الأيمن على أي عنصر في مساحة التصميم أو في لوحة الطبقات، واختر تحويل إلى مكوّن، أو اضغط على ⌘⇧K / Ctrl+Shift+K.

في مربع حوار إنشاء مكوّن، اكتب اسمًا وانقر على إنشاء. لا تقبل الأسماء سوى الحروف والأرقام، ويُحوَّل الحرف الأول تلقائيًا إلى حرف كبير. ينتقل العنصر إلى ملف مكوّن خاص به، وتستخدم الصفحة المكوّن الجديد مكانه.

لا يظهر خيار تحويل إلى مكوّن للعنصر الذي هو مكوّن بالفعل.

إعادة تسمية المكوّنات وحذفها

انقر بزر الماوس الأيمن على مكوّن في تبويب المكوّنات، واختر إعادة تسمية أو حذف.

لا يتاح خيار حذف ما دام المكوّن مستخدمًا في أي موضع على موقعك.

أثناء عمل الذكاء الاصطناعي

تُغطّى اللوحة بإشعار الذكاء الاصطناعي يعدّل أثناء تعديل الذكاء الاصطناعي لموقعك، حتى لا تتعارض تعديلاتك مع تعديلاته. وتصبح متاحة مجددًا فور انتهائه.