كتلة الأكورديون

الذهاب إلى قائمة الكتل

تتيح لك كتلة الأكورديون (Accordion block) عرض المحتوى في أقسام قابلة للطي بحيث يمكن للزوار توسيع الأجزاء التي يحتاجونها فقط. يُستخدم هذا عادةً للأسئلة الشائعة (FAQs)، أو الجداول الزمنية، أو أي صفحة طويلة تريد جعل تصفحها أسهل. يحتوي كل أككورديون على كتل عناصر الأكورديون (Accordion Item blocks). وكل عنصر يحتوي على:

• عنوان الأكورديون (Accordion Heading): العنوان القابل للنقر.
• لوحة الأكورديون (Accordion Panel): المحتوى الذي يتم توسيعه وتطويه. يمكنك إضافة أي كتل داخل اللوحة.

إضافة كتلة الأكورديون

لإضافة كتلة الأكورديون، انقر على زر + أداة إدراج الكتل (Block Inserter) في الزاوية العليا اليسرى للمحرر. ابحث عن كتلة الأكورديون وانقر عليها لإضافتها إلى الصفحة.

بدلاً من ذلك، يمكنك إضافة كتلة الأكورديون بسرعة عن طريق كتابة /accordion والضغط على مفتاح Enter.

إضافة، تحرير، وإعادة ترتيب عناصر الأكورديون

• إضافة عنصر جديد: انقر على زر + إضافة عنصر (+ Add item) داخل الكتلة (أو استخدم أداة الإدراج في نهاية القائمة).
• تحرير العنوان: انقر على عنوان الأكورديون واكتب عنواناً قصيراً وواضحاً.
• إضافة محتوى: انقر داخل لوحة الأكورديون وأضف أي كتل تحتاجها (فقرات، صور، قوائم، إلخ).
• إعادة ترتيب العناصر: استخدم مقابيض التحريك في شريط الأدوات أو اسحب العناصر في عرض القائمة (List View) لتغيير الترتيب.
• التوسيع/الطي أثناء التحرير: انقر على العنوان لتبديل حالة اللوحة بين الفتح والإغلاق حتى تتمكن من التركيز على عنصر واحد في كل مرة.

شريط أدوات الكتلة

التحويل إلى

انقر على زر التحويل (Transform button) لتحويل كتلة الأكورديون إلى كتلة أعمدة (Columns) أو تفاصيل (Details) أو مجموعة (Group).

أدوات تحريك الكتلة

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

احصل على مزيد من المعلومات حول تحريك الكتلة داخل المحرر.

المحاذاة

استخدم أداة تغيير المحاذاة لمحاذاة كتلة الأكورديون. اختر أحد الخيارات التالية:

• بلا (None) – يبقي الكتلة في عرض المحتوى الضيق.
• عرض واسع (Wide width) – يزيد عرض الكتلة متجاوزاً حجم المحتوى.
• عرض كامل (Full width) – يمدد الكتلة لتغطية العرض الكامل للشاشة.

يجب تمكين إعدادات المحاذاة ذات العرض الواسع والعرض الكامل بواسطة قالب ووردبريس الخاص بك.

المستوى

اختر مستوى العنوان الذي سيتم تطبيقه على كتل عناوين الأكورديون داخل كتلة الأكورديون.

إضافة عنصر

انقر على زر إضافة عنصر (Add Item button) لإضافة عنصر أككورديون جديد داخل كتلة الأكورديون.

المزيد من الخيارات

تمنحك قائمة "المزيد من الخيارات" الممثلة بثلاث نقاط عمودية في أقصى يمين شريط الأدوات ميزات إضافية مثل إمكانية تكرار الكتلة أو إزالتها.

اقرأ عن هذه الإعدادات وغيرها.

إعدادات الكتلة

تحتوي كل كتلة على خيارات محددة في الشريط الجانبي للمحرر بالإضافة إلى الخيارات الموجودة في شريط أدوات الكتلة. إذا لم ترى الشريط الجانبي، فانقر على زر الإعدادات (Settings button) بجوار زر الحفظ/النشر.

تنقسم لوحة إعدادات كتلة الأكورديون إلى ثلاث علامات تبويب – عرض القائمة (List View)، والإعدادات (Settings)، والأنماط (Styles).

عرض القائمة

تتيح لك علامة تبويب عرض القائمة (List view tab)، الممثلة بثلاث خطوط أفقية، إعادة ترتيب عناصر الأكورديون داخل كتلة الأكورديون.

تعرف على المزيد حول الخيارات والإعدادات المتاحة في عرض القائمة.

الإعدادات

عند تحديد علامة تبويب الإعدادات (Settings tab) الخاصة بكتلة الأكورديون، الممثلة بأيقونة ترس، سترى الإعدادات التالية في الشريط الجانبي:

الإعدادات

مفتاح الإغلاق التلقائي (Auto-close toggle) – عند التفعيل، سيؤدي هذا إلى إغلاق أقسام الأكورديون تلقائياً عند فتح قسم جديد.

مفتاح إظهار الأيقونة (Show icon toggle) – عند التفعيل، ستظهر أيقونة مع خيار إضافي لتحديد ما إذا كانت ستعُرض على الجانب الأيمن أو الأيسر.

زر موضع الأيقونة (Icon position button) – تحديد موضع الأيقونة إلى يسار أو يمين عنوان الأكورديون.

متقدم

توفر كتلة الأكورديون خيارات الإعدادات المتقدمة التالية: مرساة HTML، فئات CSS إضافية، CSS إضافي، والأنماط.

تعرف على المزيد حول الإعدادات المتقدمة

الأنماط

عند النقر على علامة تبويب الأنماط (Styles tab)، الممثلة بدائرة نصف ملئت، داخل الشريط الجانبي لإعدادات الكتلة، سترى الخيارات التالية:

الخطوط (Typography)

توفر كتلة الأكورديون إعدادات للخطوط لتغيير عائلة الخط، الحجم، المظهر، ارتفاع السطر، حالة الأحرف، تباعد الأحرف، والتزيين.

احصل على مزيد من التفاصيل حول تغيير إعدادات الخطوط.

الخلفية

تتيح لك إعدادات الخلفية تخصيص مظهر الكتل المدعومة باستخدام صور الخلفية، الألوان، والتدرجات.

للتفاصيل، راجع نظرة عامة على إعدادات الخلفية.

التخطيط

الكتل الداخلية تستخدم عرض المحتوى

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

الأبعاد

تُستخدم عناصر تحكم الأبعاد للتحكم في كيفية وضع مجموعات الكتل بجانب بعضها البعض، عن طريق تغيير قيم الحشو (padding)، الهوامش (margin)، والأبعاد الأخرى.

تعرف على المزيد حول عناصر تحكم الأبعاد.

الحدود والظل (Border & Shadow)

توفر كتلة الأكورديون خيارات إعدادات الحدود لإضافة لون الحد، العرض، النصف قُطر (radius) والظل. إذا كانت هناك إعدادات حدود مخصصة، ستكون الحدود المخصصة مرئية على عنصر نائب للصورة.

تعرف على المزيد حول إعدادات الحدود والظل.

الكتل الداخلية للأكورديون

تتكون كتلة الأكورديون من بعض الكتل لتجميع الميزة معاً:

• عنصر الأكورديون (Accordion item)
• لوحة الأكورديون (Accordion panel)

قد تتضمن هذه الكتل الداخلية عناصر تحكم أنماط إضافية بناءً على القالب الخاص بك (الألوان، الخطوط، المسافات). بالنسبة لعنصر الأكورديون، يمكنك اختيار مستوى العنوان الدلالي لعنوان العنصر (على سبيل المثال، H3، H4). استخدم المستويات التي تناسب مخطط صفحتك.

نصائح

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

إمكانية الوصول (Accessibility)

• تتبع كتلة الأكورديون الأنماط القابلة للوصول بحيث تعمل العناوين كأزرار وتعلن اللوحات عن حالة توسيعها/طيها لتقنيات ذوي الاحتياجات الخاصة.
• أفضل الممارسات:
  • استخدم عناوين معبرة وموجزة.
  • تجنب وضع عناصر تفاعلية (مثل الروابط أو الأزرار) داخل العنوان نفسه؛ ضعها في اللوحة.
  • اختر مستويات عناوين تتبع تسلسل هرمي لصفحتك.

عرض توضيحي (Demo)

الأسئلة الشائعة

ما الفرق بين الأكورديون (Accordion) والتفاصيل (Details)؟

• ينشئ عنصر التفاصيل (Details) قسمًا واحدًا قابلًا للطي. أما الأكورديون فهو قائمة من عناصر قابلة للطي مترابطة مع خيارات للسماح بفتح عنصر واحد أو عدة عناصر في نفس الوقت.

هل يمكنني فتح أكثر من عنصر في نفس الوقت؟

• نعم. قم بتفعيل خيار "السماح بتفتح عناصر متعددة" (Allow multiple items to be open) في إعدادات كتلة الأكورديون.

كيف أجعِل عنصرًا معينًا مفتوحًا افتراضيًا؟

• حدد عنصر الأكورديون، ثم قم بتفعيل "مفتوح مبدئيًا" (Initially open) في إعداداته.

هل يمكنني إضافة أي كتل داخل لوحة الأكورديون؟

• نعم. يمكن أن تحتوي اللوحات على أي كتل، بما في ذلك الصور، والقوائم، والمحتويات المضمنة.