نظرة عامة على المكونات - مساعدة Webflow

استخدم المكونات لإدارة التخطيطات والمحتوى المتكرر بكفاءة أكبر عبر موقعك.

تمنحك المكونات القدرة على إنشاء كتل قابلة للتخصيص من العناصر والعناصر الفرعية للحفاظ على سير عمل تصميم متسق وفعال وقابل للتوسع. يمكنك إعادة استخدام هذه الكتل عبر موقعك وتعديلها في مكان واحد لتجنب مراجعة كل تخطيط متكرر بشكل فردي.

كيفية إنشاء مكون

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

يمكنك إنشاء مكون من عنصر أو مجموعة من العناصر، واختيار ما إذا كان كل مثيل متطابقًا عبر موقعك أو يسمح بتغييرات في محتواه أو تخطيطه أو نمطه:

• محتوى وتصميم متطابق لكل مثيل — أنشئ مكونًا للتخطيطات المتكررة (مثل القوائم العلوية والتذييلات) لإعادة استخدامها عبر موقعك. أي تغييرات في المحتوى أو التصميم تحدث تحديثًا تلقائيًا لكل مثيل من المكون.
• محتوى فريد لكل مثيل — أنشئ مكونًا بتخطيط وتصميم متسق، ولكن اسمح لكل مثيل بأن يحتوي على محتوى مختلف، (مثل تخطيط قسم البطل الذي يمكن أن يحتوي على نصوص أو صور أو فيديوهات فريدة لكل مثيل) باستخدام خصائص المكونات والفتحات.
• أنماط مختلفة لكل مثيل — أنشئ مكونًا بخيارات نمط وتخطيط محددة مسبقًا، (مثل الأزرار الصلبة والمخططة، أو تخطيطات البطاقات الأفقية والعمودية). تتيح لك أنماط المكونات تخصيص تصميم كل مثيل دون الحاجة إلى إنشاء مكونات منفصلة.

لإنشاء مكون:

1. حدد العنصر الذي تريد تحويله إلى مكون
2. افتح لوحة المكونات، لوحة الأنماط أو لوحة إعدادات العنصر
3. انقر على أيقونة “إنشاء مكون” في أعلى اللوحة
4. أعطِ مكونك اسمًا ووصفًا اختياريًا وانقر على إنشاء

يمكنك أيضًا تكرار مكون موجود عن طريق تحديد المكون، والنقر على النقاط "المزيد من الخيارات"، واختيار تكرار.

ستكون داخل المكون الرئيسي بعد إنشاء مكون — مما يعني أن أي تغييرات على المكون الرئيسي يتم تحديثها عبر جميع مثيلات ذلك المكون. في أي وقت، يمكنك الدخول إلى المكون الرئيسي على أي مثيل مكون عن طريق:

• النقر المزدوج على مثيل المكون
• النقر بزر الماوس الأيمن على المثيل والنقر على تحرير المكون
• تحديد المثيل والنقر على أيقونة "القلم" في التسمية
• تحديد المثيل والنقر على أيقونة "المفتاح" في الزاوية العلوية اليمنى من اللوحة اليمنى

تعرف على المزيد حول تحرير المكون الرئيسي.

كيفية استخدام وإعادة استخدام مكون

بمجرد إنشاء مكون، يمكنك إعادة استخدامه في أي مكان على موقعك:

1. افتح لوحة المكونات
2. مرر فوق مكون لعرض معاينة
3. انقر واسحب المكون المطلوب إلى أي صفحة في موقعك
4. أسقط مثيل المكون مباشرة على اللوحة أو في المتصفح

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

لعرض تسلسل عناصر المكون في لوحة المتصفح، اضغط مع الاستمرار على Option + انقر مزدوج (على Mac) أو اضغط مع الاستمرار على Alt + انقر مزدوج (على Windows) على المكون، أو انقر على أيقونة "تحرير المكون الرئيسي". ستتمكن فقط من رؤية تسلسل عناصر المكون من المكون الرئيسي (وليس داخل مثيل المكون).

كيفية تعديل المكون

دعونا نستعرض الطرق المختلفة التي يمكنك من خلالها التفاعل مع وتعديل مكون:

• تعديل المكون الرئيسي
• خصائص المكون، الفتحات، وأنماط التصميم
• إنشاء أنماط تصميم للمكون
• إدارة خاصية النمط
• تغيير نمط مثيل المكون
• إعادة ترتيب، إعادة تسمية، تكرار، أو حذف أنماط تصميم المكون
• الخروج من المكون الرئيسي
• تعديل المكونات في المحرر
• تغيير اسم أو وصف المكون
• تجميع المكونات
• حذف مكون

تعديل المكون الرئيسي

لإجراء نفس التغييرات عبر جميع مثيلات المكون، ستحتاج إلى تعديل المكون الرئيسي. يمكنك تعديل المكون الرئيسي على أي مثيل مكون عن طريق:

• النقر المزدوج على مثيل المكون على اللوحة
• الضغط على Option + النقر المزدوج (Mac) أو Alt + النقر المزدوج (Windows) على المثيل في المتصفح
• النقر بزر الماوس الأيمن على المثيل والنقر على تعديل المكون
• تحديد المثيل والنقر على أيقونة "تعديل المكون" في التسمية
• تحديد المثيل والنقر على أيقونة "تعديل المكون" في أعلى اللوحة اليمنى

التعديلات على المكون الرئيسي ستؤثر على كل مثيل للمكون (ما لم يكن لمثيل المكون خصائص مكون مطبقة على عناصر محددة داخل المكون). عند تعديل المكون الرئيسي، يمكنك تغيير الهيكل وترتيب العناصر للتأثير في نفس الوقت على جميع مثيلات المكون عبر موقعك.

خصائص المكون، الفتحات، وأنماط التصميم

خصائص المكون (props)، الفتحات، وأنماط التصميم تتيح لك إنشاء تكوينات فريدة على كل مثيل للمكون:

• الخصائص — ربط إعدادات العناصر الفردية في المكون الرئيسي (مثل النصوص، الروابط، الصور، أو الفيديوهات) بالخصائص. هذا يسمح لك بتخصيص هذه الإعدادات على كل مثيل دون تغيير الهيكل أو التصميم العام للمكون. يمكن أيضًا ربط الخصائص بحقول CMS لجلب المحتوى ديناميكيًا من مجموعات CMS الخاصة بك.
• الفتحات — الفتحات هي عناصر يمكنك وضعها في المكونات الحالية وتعمل كعناصر نائبة لمكونات أخرى. هذا يتيح لك بناء المكونات بشكل معياري، حيث يمكن لكل مثيل أن يتضمن مكونات مختلفة في الفتحة.
• أنماط التصميم — تحديد خيارات تصميم متعددة لمكون واحد، مما يتيح لك تكييف مظهره لاستخدامات مختلفة. على سبيل المثال، يمكنك تقديم أنماط تصميم مثل الأزرار الصلبة أو المحاطة، أو تخطيطات البطاقات الأفقية والعمودية.

إنشاء متغيرات نمط المكون

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

لإنشاء متغير نمط مكون:

1. قم بتحرير المكون الرئيسي
2. انتقل إلى لوحة النمط
3. انقر على أيقونة "متغيرات المكون" في محدد النمط
4. انقر على أيقونة "زائد"
5. أعط المتغير اسمًا فريدًا
6. اضغط على Enter/Return للتأكيد

إدارة خاصية المتغير

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

لتغيير اسم خاصية المتغير:

1. قم بتحرير المكون الرئيسي
2. انتقل إلى لوحة الخصائص
3. انقر على خاصية المتغير
4. أدخل اسم خاصية فريد
5. اضغط على Enter/Return للتأكيد

لإضافة خاصية المتغير إلى مجموعة خصائص:

1. قم بتحرير المكون الرئيسي
2. انتقل إلى لوحة الخصائص
3. انقر على خاصية المتغير
4. اختر مجموعة أو أدخل اسمًا فريدًا لإنشاء مجموعة جديدة
5. انقر على إنشاء أو اضغط على Enter/Return للتأكيد

تعيين متغير افتراضي لمكون:

1. قم بتحرير المكون الرئيسي
2. انتقل إلى لوحة الخصائص
3. انقر على خاصية المتغير
4. اختر متغيرًا من القائمة المنسدلة الافتراضية

تغيير متغير حالة مكون

مثل خصائص المكونات الأخرى، يمكنك اختيار متغير النمط لكل حالة من حالات المكون. لتغيير متغير حالة مكون:

1. انقر مرة واحدة على المكون لفتح لوحة الخصائص
2. اختر المتغير لهذه الحالة من القائمة المنسدلة للمتغيرات

إعادة ترتيب أو إعادة تسمية أو تكرار أو حذف أنماط مكونات المتغيرات

في وضع التصميم، يمكنك إدارة أنماط مكونات المتغيرات (إعادة الترتيب، إعادة التسمية، التكرار، أو الحذف).

لإعادة ترتيب متغيرات المكون:

1. قم بتحرير المكون الرئيسي
2. انتقل إلى لوحة الأنماط
3. انقر على أيقونة "متغيرات المكونات" في محدد الأنماط
4. انقر واسحب المتغير لنقله إلى موضع جديد

لإعادة تسمية متغير:

1. قم بتحرير المكون الرئيسي
2. انتقل إلى لوحة الأنماط
3. انقر على أيقونة "متغيرات المكونات" في محدد الأنماط
4. مرر فوق المتغير وانقر على أيقونة "المزيد من الخيارات"
5. انقر على إعادة تسمية
6. أدخل اسم متغير جديد وفريد
7. اضغط على Enter/Return للتأكيد

لتكرار متغير:

1. قم بتحرير المكون الرئيسي
2. انتقل إلى لوحة الأنماط
3. انقر على أيقونة "متغيرات المكونات" في محدد الأنماط
4. مرر فوق المتغير وانقر على أيقونة "المزيد من الخيارات"
5. انقر على تكرار
6. أدخل اسم متغير جديد وفريد
7. اضغط على Enter/Return للتأكيد

لحذف متغير:

1. قم بتحرير المكون الرئيسي
2. انتقل إلى لوحة الأنماط
3. انقر على أيقونة "متغيرات المكونات" في محدد الأنماط
4. مرر فوق المتغير وانقر على أيقونة "المزيد من الخيارات"
5. انقر على حذف
6. انقر على حذف في النافذة المنبثقة للتأكيد

الخروج من المكون الرئيسي

بمجرد الانتهاء من تحرير المكون الرئيسي، يمكنك الخروج من المكون الرئيسي عن طريق:

• النقر على سهم "العودة" في الزاوية العلوية اليسرى من المصمم
• النقر خارج المكون على اللوحة
• الضغط على Escape على لوحة المفاتيح

تحرير المكونات في المحرر

إذا قمت بدعوة محرري المحتوى لتحديث محتوى موقعك في المحرر، فإن أي تغييرات يقومون بها على عناصر المكونات التي لم يتم تعديلها بخصائص المكون وتكون متسقة عبر جميع الحالات، ستنطبق على جميع الحالات الأخرى.

بدلاً من ذلك، إذا قام محرر المحتوى بإجراء تغييرات على عناصر المكونات التي تم تعديلها عبر خاصية المكون، فإن تلك التغييرات ستنطبق فقط على الحالة التي يقومون بتحريرها.

تغيير اسم أو وصف المكون

لتغيير اسم أو وصف المكون:

1. افتح لوحة المكونات
2. مرر فوق اسم المكون وانقر على النقاط "المزيد من الخيارات" التي تظهر
3. انقر على تحرير الإعدادات
4. قم بإجراء التغييرات واحفظ

إعادة تسمية حالة المكون

يمكنك إعادة تسمية حالات المكونات الفردية لتسهيل التعرف عليها — وهذا مفيد بشكل خاص عند إعادة استخدام نفس المكون عدة مرات في الصفحة.

لإعادة تسمية حالة المكون:

• في المتصفح أو في أعلى اللوحة اليمنى:

1. انقر نقرًا مزدوجًا على اسم المكون
2. اكتب الاسم الجديد
3. اضغط على Enter أو انقر بعيدًا لحفظ الاسم المخصص

• على اللوحة:

1. انقر بزر الماوس الأيمن على حالة المكون
2. انقر على إعادة تسمية
3. اكتب الاسم الجديد
4. اضغط على Enter أو انقر بعيدًا لحفظ الاسم المخصص

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

تجميع المكونات

لتنظيم مكوناتك في مجموعات:

1. افتح لوحة المكونات
2. مرر فوق اسم المكون وانقر على النقاط "المزيد من الخيارات" التي تظهر
3. اختر تحرير الإعدادات
4. اختر مجموعة موجودة من القائمة المنسدلة للمجموعة، أو اكتب لإنشاء مجموعة جديدة

لتغيير اسم مجموعة المكونات أو فك تجميعها، مرر فوق عنوان المجموعة وانقر على نقاط "المزيد من الخيارات".

حذف مكون

لحذف مكون بالكامل:

1. إزالة أو فك ارتباط جميع مثيلات المكون من موقعك
2. فتح لوحة المكونات
3. مرر فوق اسم المكون وانقر على نقاط "المزيد من الخيارات" التي تظهر
4. اختر تحرير الإعدادات
5. انقر على حذف وقم بالتأكيد

كيفية فك ارتباط مثيل مكون من مكونه الرئيسي

لفك ارتباط مثيل مكون وإجراء تغييرات عليه بشكل مستقل عن المكون الرئيسي:

1. انقر بزر الماوس الأيمن على أي عنصر مكون في المثيل الذي تريد فك ارتباطه
2. انقر على فك ارتباط المثيل

بمجرد فك الارتباط، إذا قمت بتحرير أي مثيل مرتبط آخر لهذا المكون في تصميمك، فلن يتغير المثيل غير المرتبط.

مشاركة المكونات عبر المواقع باستخدام المكتبات

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

العودة إلى مساعدة ويب فلو