الأكورديون المتقدم
كتل طويلة من النص تطغى، لكن الإجابات المخفية محبطة. يجد الأكورديون التوازن المثالي عندما يتم تصميمه بعناية. يمنحك Master Addons Advanced Accordion Element تحكمًا كاملاً في هذه الأداة التفاعلية الكلاسيكية. اختر بين سلوك الأكورديون النظيف (واحد مفتوح في كل مرة) أو سلوك التبديل المرن (متعدد الفتح). املأ العناصر بالنص أو الصور أو حتى القوالب المحفوظة بالكامل. ثم قم بتصميم كل حالة على حدة: العنوان العادي، والتحليق، والعنصر المفتوح النشط، ومنطقة المحتوى نفسها. لا يقتصر الأمر على الأسئلة الشائعة فحسب؛ إنه مخصص لقوائم الميزات أو مواصفات المنتج أو المحافظ أو أي محتوى يستفيد من عرض تقديمي نظيف يتم الكشف عنه عند الطلب.
أوضاع السلوك المزدوج والمحتوى الديناميكي
ابدأ بتحديد كيفية تصرف الأكورديون الخاص بك. حدد نوع الأكورديون: الأكورديون التقليدي لتدفق مركّز ومفتوح لعنصر واحد، أو قم بالتبديل للحصول على نمط قائمة مرجعية أكثر مرونة حيث يمكن للمستخدمين فتح عناصر متعددة. ثم قم ببناء العناصر الخاصة بك. لكل علامة تبويب، قم بتعيين عنوان واختر نوع المحتوى. تجاوز النص البسيط، استخدم estcent للنص والوسائط الغنية، أو اختر من القسم المحفوظ أو الأداة المحفوظة أو قالب الصفحة المحفوظة لإدراج كتل المحتوى المصممة مسبقًا بالكامل. وهذا يجعلها أداة قوية لبناء الصفحات المعيارية وإعادة استخدام التخطيطات المعقدة.
- نموذجان للتفاعل: الأكورديون (فتح فردي) للعمليات المتدرجة، والتبديل (فتح متعدد) لقوائم المراجعة أو الميزات.
- مصادر المحتوى الغنية: قم بملء عناصر الأكورديون بنصوص أو صور بسيطة أو أقسام وقوالب Elementor المحفوظة بالكامل.
- العنصر النشط الافتراضي: قم بتعيين أي عنصر ليكون نشطًا كعنصر افتراضي عند تحميل الصفحة.
- إدارة سهلة: إضافة العناصر وإزالتها وإعادة ترتيبها باستخدام زر + إضافة عنصر ومكرر بديهي.
تصميم وهيكل العنوان على أساس الدولة
شريط العنوان هو ما ينقر عليه المستخدمون، مما يجعل كل حالة مرئية مقصودة. قم بتصميم العنوان بشكل منفصل لحالاته العادية والتحويمية والنشطة (المفتوحة). لكل حالة، حدد نوع الخلفية الفريد (اللون والتدرج) ولون النص والطباعة. تحكم في محاذاة العنوان والحشو والحدود ونصف قطر الحدود وإضافة ظل مربع. يتيح لك هذا المستوى من التفاصيل إنشاء رحلة مرئية واضحة: افتراض محايد، وتحويم جذاب، وحالة “open” مميزة تؤكد إجراء المستخدم.
- تصميم الحالة الثلاثية: قم بتطبيق أنماط مميزة على أشرطة العناوين العادية والتحويمية والنشطة.
- الخلفيات المتقدمة: استخدم الألوان الصلبة أو التدرجات لحالات مختلفة لإنشاء العمق.
- التحكم الكامل في الصندوق: اضبط الحشو والحدود وظل الصندوق لجعل كل شريط عنوان مكونًا مصممًا.
أيقونات تبديل قابلة للتخصيص مع الحالات المزدوجة
تجاوز أيقونة المثلث العامة. قم بتمكين الرمز المخصص لاختيار أي رمز من المكتبة لكل من إجراءات التوسيع (الحالة المغلقة) والطي (الحالة المفتوحة). ضع الأيقونة على اليسار أو اليمين. ثم قم بتصميم هذه الرموز بشكل مستقل للحالات العادية والتحويمية والنشطة، مع تغيير اللون والحجم والخلفية. اضبط تباعد الأيقونات والحشو حول الأيقونة للحصول على محاذاة مثالية. يؤدي هذا إلى تحويل المؤشر الوظيفي إلى جزء متماسك من لغة التصميم الخاصة بك.
- الرموز المزدوجة: قم بتعيين أيقونات مختلفة لحالتي “plus” (توسيع) و“minus” (طي).
- تصميم الأيقونة الخاص بالحالة: قم بتغيير لون الأيقونة وخلفيتها عند تحريك العنصر أو تنشيطه.
- المحاذاة بشكل صحيح: محاذاة رمز التحكم والموضع والتباعد بالنسبة لنص العنوان.
منطقة المحتوى وتصميم الحاويات
المحتوى الذي ينزلق للأسفل يستحق دراسة التصميم الخاصة به. قم بتصميم منطقة المحتوى بلون الخلفية الخاص بها ولون النص والطباعة والحشوة الداخلية. أضف ظل نص لسهولة القراءة إذا لزم الأمر. بعد ذلك، قم بتصميم حاوية العناصر الشاملة التي تحتوي على جميع أقسام الأكورديون: اضبط التباعد بين العناصر، والحدود العامة، ونصف قطر الحدود، وظل الصندوق. وهذا يضمن أن تبدو الأداة بأكملها وكأنها مكون موحد ومصقول، كما أن المحتوى المفتوح سهل وممتع للقراءة.
- تصميم منطقة المحتوى: قم بتصميم الخلفية والنص للمحتوى المنسدل للحصول على سهولة القراءة المثالية.
- طلاء على مستوى الحاوية: قم بتطبيق Border Radius وBox Shadow على مجموعة الأكورديون بأكملها.
- تباعد العناصر: التحكم في التباعد (الهامش) بين كل عنصر أكورديون للحصول على مظهر نظيف ومنفصل.
الأسئلة المتداولة للأكورديون المتقدم
ما الفرق العملي بين نوع “Accordion” ونوع “Toggle”؟
الأكورديون: يمكن فتح عنصر واحد فقط في كل مرة. يؤدي فتح عنصر جديد إلى إغلاق العنصر السابق تلقائيًا. الأفضل لصفحات الأسئلة الشائعة أو التعليمات التسلسلية حيث تريد تقليل التمرير وتركيز الانتباه.
التبديل: يمكن فتح عناصر متعددة في وقت واحد. يمكن للمستخدمين توسيع عدة عناصر لمقارنة المعلومات أو جمعها. الأفضل لقوائم مراجعة الميزات أو قوائم مواصفات المنتج أو المحتوى حيث يحتاج المستخدمون إلى رؤية أقسام متعددة في وقت واحد.
هل يمكنني فتح عنصر واحد عند تحميل الصفحة؟
نعم. عند تحرير عنصر فردي في علامة التبويب "المحتوى"، ستجد خيارًا نشطًا كخيار افتراضي. اضبط هذا على نعم للعنصر الذي تريد فتحه مسبقًا. يجب أن يحتوي عنصر واحد فقط على هذه المجموعة من نوع الأكورديون لتجنب التعارض.
ما هي "القسم المحفوظ" أو "قالب الصفحة المحفوظة" كأنواع محتوى؟
هذه ميزات Elementor Pro قوية. إذا كان لديك قسم (مثل ملف تعريف الفريق) أو قالب صفحة كامل (مثل نموذج الاتصال) محفوظ في مكتبة Elementor الخاصة بك، فيمكنك تحديده ليظهر داخل عنصر الأكورديون. يتيح لك ذلك تضمين تخطيطات معقدة ومصممة مسبقًا داخل الأكورديون الخاص بك.
كيف تعمل حالات التحويم والحالات النشطة على الهاتف المحمول؟
على الأجهزة التي تعمل باللمس، غالبًا ما يؤدي النقر الأول إلى تشغيل كل من حالتي Hover وActive في تتابع سريع (مع فتح العنصر). يعد التصميم الذي تطبقه على الحالة النشطة هو الأكثر أهمية بالنسبة للجوال، لأنه سيُظهر العنصر المفتوح حاليًا. قد لا يُنظر إلى حالة Hover كخطوة منفصلة.
هل يمكنني التحكم في سرعة الرسوم المتحركة للفتح والإغلاق؟
نعم. في علامة التبويب "المحتوى"، ستجد Toggle Speed (ms). القيمة بالمللي ثانية (على سبيل المثال، 300). الرقم الأقل (مثل 200) يجعله أسرع وأكثر سرعة؛ الرقم الأعلى (مثل 500) يجعله أبطأ وأكثر تعمدًا.
هل يمكن الوصول إلى الأكورديون للتنقل على لوحة المفاتيح وقارئات الشاشة؟
يجب أن يكون الوصول إلى عنصر واجهة مستخدم الأكورديون المشفر بشكل صحيح. يساعد استخدام علامات HTML للعنوان الدلالي (مثل <div>، <h3>) في تنظيم المحتوى. عادةً ما يتم التعامل مع الحالات التفاعلية وسمات ARIA للحالات الموسعة/المنهارة بواسطة عنصر واجهة المستخدم لضمان قدرة قارئات الشاشة على الإعلان عن التغييرات.
عناصر واجهة المستخدم والملحقات الشائعة
إنشاء مواقع متطورة في وقت أقل.
التشكل الزجاجي
إضافات الحاويات
أنماط
ناسخ البريد/الصفحة
