إنتقل إلى المحتوى الرئيسي

العمل مع الطبقات

الطبقات (Layers) هي المكونات المرئية التي تُبنى منها معاينة المنتج على لوحة الرسم. كل طبقة تمثل عنصرًا — نصًا، صورة، أو منطقة ديناميكية — يظهر في موضع محدد على المنتج. بترتيب الطبقات وربطها بالحقول، تبني المعاينة التفاعلية التي يراها العميل.

أنواع الطبقات​

النوعالأيقونةالوظيفةمثال من كوراسا
طبقة نص (Text Layer)Aaموضع يظهر فيه النص الذي يكتبه العميلمكان اسم العميل على الكوب
طبقة صورة (Image Layer)🖼موضع تظهر فيه الصورة التي يرفعها العميلمكان الصورة الشخصية
هدف ديناميكي (Dynamic Target)🎯موضع يظهر فيه خيار الصورة المختار من حقل اختيار صورةمكان ظهور تسريحة الشعر
طبقة ثابتة (Static Layer) قريبًا📌صورة ثابتة لا تتغير باختيارات العميلشعار المتجر

إضافة طبقة​

  1. من الشريط الجانبي، اضغط "+ إضافة عنصر"
  2. اختر نوع الطبقة: طبقة نص، طبقة صورة، أو هدف ديناميكي (يُضاف تلقائيًا مع حقول اختيار الصورة)
  3. ستظهر الطبقة على لوحة الرسم في الموضع الافتراضي
  4. اسحبها إلى الموضع المطلوب

📸 Screenshot Needed

Dashboard Section: استوديو المنتجات > لوحة الرسم > إضافة طبقة نص جديدة UI State: لوحة الرسم تظهر كوبًا. طبقة نص جديدة أُضيفت للتو — يظهر مربع تحديد أزرق منقط حولها مع نص افتراضي "نص تجريبي". مقابض السحب في الزوايا. What to Capture: طبقة جديدة على لوحة الرسم مع مقابض التحديد. RTL Note: لوحة الرسم فنية. Size: 600×400px

ربط الطبقة بحقل​

الطبقة وحدها لا تعرض شيئًا ذا معنى حتى تربطها بحقل:

ربط طبقة نص​

  1. حدد الطبقة على لوحة الرسم أو من قائمة الطبقات
  2. في المفتش، اذهب إلى قسم "ربط بحقل"
  3. اختر الحقل النصي من القائمة المنسدلة (مثلاً: "الاسم على الكوب")
  4. الآن، عندما يكتب العميل اسمه، سيظهر في هذا الموضع

ربط طبقة صورة​

  1. حدد الطبقة
  2. في المفتش، اذهب إلى "ربط بحقل"
  3. اختر حقل رفع الملفات (مثلاً: "صورة شخصية")
  4. الصورة التي يرفعها العميل ستظهر في هذا الموضع

الأهداف الديناميكية​

الأهداف الديناميكية تُنشأ تلقائيًا عند إضافة حقل اختيار صورة:

  • كل خيار في الحقل = هدف ديناميكي واحد
  • عندما يختار العميل خيارًا، تظهر صورة هذا الخيار في الهدف
  • يمكنك تعديل موضع وحجم كل هدف على حدة

📸 Screenshot Needed

Dashboard Section: استوديو المنتجات > المفتش > إعدادات طبقة > ربط بحقل UI State: قسم "ربط بحقل" في المفتش. قائمة منسدلة تظهر: "بدون ربط"، "الاسم على الكوب"، "النص المخصص". "الاسم على الكوب" محدد. What to Capture: قسم الربط مع القائمة المنسدلة. RTL Note: RTL. Size: 400×200px

ترتيب الطبقات (Z-Index)​

الطبقات تُرسم بالترتيب — الطبقة الأولى في القائمة تُرسم أولاً (في الخلف)، والطبقة الأخيرة تُرسم أخيرًا (في الأمام).

تغيير ترتيب الطبقات​

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

مثلًا​

الطبقة ٣: النص المخصص      ← في الأمام (مرسومة أخيرًا)
الطبقة ٢: صورة شخصية        ← في الوسط
الطبقة ١: خلفية الكوب        ← في الخلف (مرسومة أولاً)

📸 Screenshot Needed

Dashboard Section: استوديو المنتجات > الشريط الجانبي > قائمة الطبقات > ترتيب UI State: قائمة طبقات مع ٤ طبقات مرتبة. الطبقة العليا (الأمام): "النص المخصص"، الأوسط: "صورة شخصية"، الأسفل (الخلف): "خلفية الكوب". أزرار الأسهم ظاهرة. What to Capture: قائمة الطبقات مع ترتيبها وأزرار التحكم. RTL Note: RTL. Size: 350×300px

إظهار وإخفاء الطبقات​

إخفاء طبقة​

  • اضغط على أيقونة العين (👁) بجانب الطبقة في القائمة
  • الأيقونة تصبح عينًا مشطوبة
  • الطبقة تختفي من لوحة الرسم (لكنها لا تُحذف)

استخدامات الإخفاء​

  • إخفاء طبقة غير مكتملة أثناء العمل
  • إخفاء طبقة في منظر معين (راجع المناظر وأسطح الإخراج)
  • اختبار مظهر المنتج بدون طبقة معينة

إعدادات الطبقة في المفتش​

إعدادات طبقة النص​

الإعدادالوصف
الموضع (س، ص)إحداثيات الطبقة على لوحة الرسم
الأبعاد (عرض، ارتفاع)حجم منطقة النص
الدورانزاوية دوران الطبقة بالدرجات
الخطنوع الخط (Amiri، Cairo، Tajawal...)
حجم الخطحجم النص
المحاذاةيمين، وسط، يسار
اللونلون النص
الحجم التلقائيضبط الحجم تلقائيًا ليلائم المساحة

إعدادات طبقة الصورة​

الإعدادالوصف
الموضع (س، ص)إحداثيات الطبقة
الأبعاد (عرض، ارتفاع)حجم منطقة الصورة
الدورانزاوية الدوران
ملاءمة الكائن (Object Fit)كيف تتناسب الصورة مع الإطار: احتواء (Contain)، تغطية (Cover)، ملء (Fill)
القفلمنع تحريك الطبقة عن طريق الخطأ

إعدادات الهدف الديناميكي​

الإعدادالوصف
الموضع (س، ص)موضع ظهور صورة الخيار
الأبعاد (عرض، ارتفاع)حجم منطقة الصورة
الدورانزاوية الدوران
ملاءمة الكائنكيف تتناسب الصورة
قفل الهدفمنع تحريكه عن غير قصد

📸 Screenshot Needed

Dashboard Section: استوديو المنتجات > المفتش > إعدادات طبقة نص كاملة UI State: المفتش يعرض جميع إعدادات طبقة النص: الموضع (س=٢٠٠، ص=١٥٠)، الأبعاد (عرض=٤٠٠، ارتفاع=٨٠)، الدوران=٠، الخط=Amiri، حجم الخط=٢٤، المحاذاة=وسط، اللون=أبيض، الحجم التلقائي=مفعل، رابط بحقل="الاسم على الكوب". What to Capture: إعدادات الطبقة كاملة. RTL Note: RTL. Size: 400×700px

قفل الطبقات​

لمنع تحريك طبقة عن طريق الخطأ بعد ضبطها:

  1. حدد الطبقة
  2. في المفتش، فعّل مفتاح "قفل" (Lock)
  3. الطبقة تبقى مرئية لكن لا يمكن سحبها أو تحريكها
  4. لفك القفل، عطّل المفتاح

📸 Screenshot Needed

Dashboard Section: استوديو المنتجات > المفتش > مفتاح القفل UI State: مفتاح "قفل" في وضع التشغيل. بجانبه أيقونة قفل 🔒. What to Capture: مفتاح القفل. RTL Note: RTL. Size: 300×80px

نسخ وحذف الطبقات​

نسخ طبقة​

  1. حدد الطبقة في القائمة
  2. اضغط زر نسخ أو اختصار Ctrl + D
  3. تظهر نسخة مطابقة في نفس الموضع — اسحبها أو عدل إعداداتها

حذف طبقة​

  1. حدد الطبقة
  2. اضغط زر حذف أو مفتاح Delete
  3. أكد الحذف

⚠️ تحذير: حذف طبقة مربوطة بحقل لا يحذف الحقل نفسه، لكن النص/الصورة لن يظهر بعد الآن على الرسم.

مثال من كوراسا: طبقات كوب الأفاتار​

قائمة الطبقات (من الخلف للأمام):
┌─────────────────────────────────┐
│ ١. خلفية الكوب (صورة)           │ ← صورة الكوب الأساسية
│ ٢. هدف لون البشرة (ديناميكي)    │ ← يظهر لون البشرة المختار
│ ٣. هدف تسريحة الشعر (ديناميكي)  │ ← يظهر التسريحة المختارة
│ ٤. هدف الإكسسوارات (ديناميكي)   │ ← يظهر الإكسسوارات المختارة
│ ٥. طبقة الاسم (نص)              │ ← الاسم الذي يكتبه العميل
│ ٦. طبقة النص المخصص (نص)        │ ← رسالة إضافية
│ ٧. طبقة الصورة الشخصية (صورة)   │ ← الصورة التي يرفعها العميل
└─────────────────────────────────┘

نصائح وأفضل الممارسات​

  1. سمِّ الطبقات بوضوح: "طبقة الاسم" أفضل من "طبقة ١"
  2. اقفل الطبقات بعد ضبطها: يمنع التحريك غير المقصود
  3. تأكد من الربط: طبقة غير مربوطة = لا تظهر شيئًا مفيدًا
  4. اختبر جميع الخيارات: تأكد من ظهور جميع الصور/الألوان في أهدافها
  5. استخدم الحجم التلقائي للنصوص: يمنع النص من الخروج عن حدود الطبقة

مقالات ذات صلة​

آخر تحديث: 2026-05-17

آخر تحديث في