من الأسهل قراءة المشاركات الطويلة عندما يتمكن الزوار من رؤية الشكل بأكمله مقدمًا والقفز مباشرة إلى الجزء الذي يريدونه. مجاني جدول المحتويات القطعة في الإضافات الرئيسية للعنصر يقرأ العناوين الموجودة على صفحتك ويحولها إلى فهرس مرتبط. لا توجد قائمة يدوية للبناء، ولا يوجد أي منها للمزامنة لاحقًا.
يمكنك إسقاط عنصر واجهة المستخدم، واختيار مستويات العنوان التي تريد تضمينها، ويملأ نفسه. ومن هناك يمكنك جعله قابلاً للطي، وإضافة زر التمرير إلى الأعلى، وتصميم كل شيء. يغطي هذا الدليل كل إعداد في عنصر واجهة المستخدم.
ما تفعله أداة جدول المحتويات #
تقوم الأداة بمسح الصفحة بحثًا عن العناوين وإنشاء قائمة متداخلة من الروابط منها. يشير كل عنصر إلى عنوانه، لذا تنتقل النقرة إلى هذا القسم. أضف عنوانًا لاحقًا وستلتقطه القائمة من تلقاء نفسها، وهو الجزء الذي يوفر أكبر قدر من الوقت.
علامتا تبويب قم بتشغيله. محتوى يحمل العنوان ومستويات العنوان والخيار القابل للطي وسلوك التمرير. أسلوب يتحكم في حشوة الحاوية والعنوان والفاصل وعناصر القائمة. توجد خيارات Elementor Advanced المعتادة بجانبها.
قبل أن تبدأ #
- ووردبريس مع العنصر مثبتة ونشطة.
- الإضافات الرئيسية للعنصر مثبت ونشط. جديد في البرنامج المساعد؟ انظر دليل التثبيت.
- صفحة أو منشور بعناوين حقيقية (H2، H3، وما إلى ذلك) لتقرأه الأداة.
كيفية إضافة عنصر واجهة المستخدم جدول المحتويات #
في محرر Elementor، افتح عناصر لوحة والبحث عن جدول المحتويات، أو قم بالتمرير إلى قسم الإضافات الرئيسية (تحمل الأدوات شارة MA أرجوانية). اسحبه إلى أعلى المحتوى الخاص بك، أو إلى الشريط الجانبي، ويملأ نفسه من عناوين الصفحة على الفور.
قم بتعيين العنوان والعناوين التي يجب تضمينها #
افتح ال محتوى علامة التبويب و جدول المحتويات قسم. هذا هو المكان الذي تقوم فيه بتسمية المربع واختيار نمط القائمة واختيار مستويات العناوين التي تظهر.
- أدخل نص العنوان: العنوان الموجود أعلى القائمة، مثل جدول المحتويات أو TOC.
- نمط القائمة: الافتراضي (بدون علامة)، الرصاص، أو الأرقام.
- تضمين / استبعاد: تحتوي علامة التبويب "تضمين" على علامات العناوين، وتشرح علامة التبويب "استبعاد" كيفية ترك العناوين الفردية للخارج.
- علامات العنوان: اختر المستويات المراد سحبها، مثل H2 وH3. أضف أو قم بإزالة العلامات للتحكم في مدى عمق القائمة.
هل تريد تخطي عنوان واحد؟ أضف jltma-toc-hide-heading قم بالفئة إلى علامة التبويب المتقدمة لهذا العنوان، في حقل فئات CSS، وتتركها الأداة. مفيد عندما يؤدي عنوان قسم واحد إلى تشويش القائمة.
اجعل القائمة قابلة للطي #
ال قابل للطي تتيح الخيارات للزائرين طي القائمة وصولاً إلى العنوان فقط. يساعد ذلك على الهاتف المحمول، أو في الشريط الجانبي حيث تكون المساحة ضيقة.
- جعل المحتوى قابلاً للطي: أضف تبديلًا حتى تفتح القائمة وتغلق.
- استمر في الانهيار في البداية: قم بتحميله مغلقًا بحيث يظهر العنوان فقط حتى يتم النقر عليه.
- حجم الأيقونة واللون: مظهر تبديل الانهيار.
قم بإعداد سلوك التمرير #
افتح ال يمرر قسم لكيفية تحرك الصفحة عندما يستخدم شخص ما الفهرس. يمكنك إضافة زر العودة إلى الأعلى وتشغيل التمرير السلس.
- انتقل إلى الأعلى: أضف سهمًا ثابتًا في الزاوية اليمنى السفلية. يظهر بمجرد أن يقوم الزائر بالتمرير لأسفل وإعادته إلى جدول المحتويات.
- انتقل إلى أعلى الإزاحة: موضع تمرير لإرسال القراء إليه بدلاً من جدول المحتويات.
- تمرير تأخير الرسوم المتحركة والتمرير السلس: يحدد التأخير المدة التي يستغرقها التمرير (500 مللي ثانية افتراضيًا). يؤدي تشغيل التمرير السلس إلى إضافة إزاحة التمرير السلس (px)، والتي تتوقف عند مسافة قصيرة من العنوان بحيث لا يغطيها الرأس الثابت.
قم بتصميم الحاوية والعنوان #
افتح ال أسلوب علامة التبويب. ال حاوية يقوم القسم بتعيين الحشو حول الصندوق بأكمله، و عنوان أنماط القسم العنوان فوق القائمة.
- حاوية: حشوة للمربع. أضف خلفية أو حدودًا أو نصف قطر من علامة التبويب "متقدم".
- عنوان: المحاذاة واللون والطباعة والتباعد السفلي للعنوان.
- فاصل: النمط واللون والسمك والتباعد السفلي للسطر الموجود أسفل العنوان. تم تصميم سهم التمرير إلى الأعلى في قسم التمرير.
نمط عناصر القائمة #
ال محتوى يتعامل القسم الموجود في علامة التبويب "النمط" مع الروابط نفسها. تحصل على الطباعة والتباعد بين العناصر وألوان منفصلة للحالات العادية والتحويمية والنشطة.
- الطباعة والتباعد: الخط والفجوة بين الصفوف.
- عادي / تحوم / نشط: لون لكل حالة. ينطبق Active على العنصر الذي نقر عليه القارئ آخر مرة.
- لون النص: لون الرابط للحالة التي حددتها.
حالات الاستخدام الشائعة #
- دروس وأدلة طويلة إعطاء القراء خريطة وقفزات سريعة.
- صفحات التوثيق حيث يكون كل عنوان عبارة عن قسم يبحث عنه الأشخاص.
- أشرطة جانبية مع فهرس قابل للطي بجانب المقالة.
- التقارير والقوائم حتى يتمكن الزوار من الانتقال إلى الإدخال الذي يريدونه.
- الصفحات القانونية والسياسية وهذا يحتاج إلى ركائز واضحة لكل بند.
نصائح للعمل مع أداة جدول المحتويات #
- استخدم هيكل عنوان نظيفًا. القائمة جيدة فقط مثل H2s وH3s، لذا اكتب العناوين التي تقرأ جيدًا من تلقاء نفسها.
- تشمل مستويين فقط. عادةً ما يشكل H2 وH3 مؤشرًا مرتبًا. اسحب H4 وما بعده وسيبدأ في إصدار أصوات صاخبة.
- طيها على الهاتف المحمول. حافظ على الانهيار في البداية يوفر الكثير من التمرير على الشاشات الصغيرة.
- قم بتشغيل التمرير السلس. يُقرأ الانزلاق إلى القسم بشكل أفضل من القفز الصعب، كما أن الإزاحة تبقي العناوين بعيدة عن الرأس اللزج.
- تخطي العناوين الضالة. استخدم فئة jltma-toc-hide-heading في العناوين التي لا تريدها في القائمة، مثل CTA أو عنوان الشريط الجانبي.
الأسئلة المتداولة #
ما هي أداة جدول المحتويات في الإضافات الرئيسية؟
إنها أداة Elementor مجانية تقرأ العناوين الموجودة على صفحتك وتقوم بإنشاء فهرس مرتبط منها تلقائيًا. ينتقل كل عنصر إلى القسم الخاص به عند النقر، وتتحكم في مستويات العناوين التي تظهر، وما إذا كانت القائمة تنهار، وكيف تبدو، كل ذلك من لوحة Elementor.
كيف تعرف الأداة العناوين التي يجب إدراجها؟
يمكنك اختيار علامات العناوين في علامة تبويب المحتوى، مثل H2 وH3، وتسرد الأداة كل عنوان مطابق في الصفحة. لتخطي مستوى كامل، اترك هذه العلامة خارجًا. لإسقاط عنوان محدد، أضف فئة عنوان jltma-toc-hide إليه في علامة التبويب "متقدم".
هل يمكنني جعل جدول المحتويات قابلاً للطي؟
نعم. تضيف الخيارات القابلة للطي تبديلًا حتى يتمكن الزائرون من طي القائمة إلى العنوان فقط. قم بتشغيل Keep Collapsed في البداية لتحميله مغلقًا، وهو ما يعمل بشكل جيد في الشريط الجانبي أو على الهاتف المحمول حيث تريد توفير المساحة الرأسية.
هل يتم تحديثه عندما أضيف عناوين جديدة؟
نعم. يتم إنشاء القائمة من عناوين الصفحة، لذلك عند إضافة عنوان أو إزالته أو إعادة تسميته، يعكس جدول المحتويات التغيير. لا توجد قائمة يدوية للمزامنة، وهذا هو السبب الرئيسي لاستخدام الأداة بدلاً من الأداة المصنوعة يدويًا.
هل يمكنني إضافة تمرير سلس وزر العودة إلى الأعلى؟
نعم. يؤدي النقر فوق عنصر إلى التمرير إلى القسم الخاص به، ويقوم Scroll Animation Delay بتعيين المدة التي يستغرقها ذلك. يضيف التمرير السلس إزاحة للرؤوس الثابتة. يضيف التمرير إلى الأعلى سهمًا في الزاوية اليمنى السفلية مع الإزاحة والحجم والألوان الخاصة به.
إلتحاق بالركب #
تقوم أداة جدول المحتويات بتحويل عناوينك إلى فهرس مرتبط دون أي صيانة يدوية: قم بإسقاطه، واختيار مستويات العناوين، وجعله قابلاً للطي، وتعيين سلوك التمرير، ثم قم بتصميمه ليتناسب. للحصول على نظرة عامة ومقارنة مع Elementor Pro، راجع عنصر واجهة المستخدم لجدول محتويات العنصر صفحة. للاطلاع على الأدوات ذات الصلة، راجع الجدول الزمني و قائمة التنقل، تصفح بالكامل عناصر واجهة المستخدم والإضافات الرئيسية، والتحقق من صفحة التسعير لما تتضمنه كل خطة.
