الوجبات السريعة الرئيسية
- لا يحتوي Elementor وElementor Pro على عنصر واجهة مستخدم للمخطط الزمني، لذا يحتاج المخطط الزمني الأفقي للمكون إلى عنصر واجهة مستخدم إضافي أو صف من الحاويات المصممة يدويًا مع CSS مخصص.
- يتم تبديل أداة المخطط الزمني لـ Master Addons من الوضع الرأسي إلى الأفقي باستخدام عنصر تحكم واحد، وهو نمط المخطط الزمني، الموجود في علامة التبويب المحتوى ضمن قسم المخطط الزمني.
- المخطط الزمني الأفقي في أداة Master Addons عبارة عن دائري، ويوفر التحكم في التنقل ستة خيارات: الأسهم والنقاط، والأسهم والكسر، والأسهم، والنقاط، والتقدم، ولا شيء.
- تتضمن إعدادات Carousel في عنصر واجهة المستخدم Timeline تخطيط Carousel أو Coverflow، والتشغيل التلقائي بسرعة افتراضية تبلغ 5000 مللي ثانية، والإيقاف المؤقت عند التمرير، والشرائح للتمرير، والشريحة المركزية، والحلقة.
- يعمل التخطيط الأفقي مع عناصر المخطط الزمني المخصص فقط، لأن المخطط الزمني للنشر المبني من منشورات المدونة يظل عموديًا.
يحدد المخطط الزمني الأفقي لـ Elementor التواريخ من اليسار إلى اليمين، مع وجود نقطة على الخط فوق كل بطاقة وأسهم للتحرك على طولها. العنصر لا يحتوي على عنصر واجهة مستخدم للمخطط الزمني خاص به، لذلك يستخدم هذا الدليل عنصر واجهة المستخدم الجدول الزمني في الإضافات الرئيسية، حيث يكون التخطيط الأفقي عبارة عن قطرة واحدة.
تبدأ الخطوات الست أدناه من جدول زمني رأسي عادي وتنتهي بدوامة عمل. تأتي كل لقطة شاشة من Elementor 4.3 مع الأداة الموجودة في صفحة الاختبار. إذا لم تكن قد وضعت جدولًا زمنيًا بعد، فإن البرنامج التعليمي للجدول الزمني الكامل يغطي الأساسيات أولا.
جدول المحتويات
عندما يكون الجدول الزمني الأفقي هو الخيار الأفضل
استخدم مخططًا أفقيًا عندما يكون لديك سلسلة قصيرة من الخطوات ومساحة رأسية محدودة. يمكن أن يستغرق المخطط الزمني الرأسي الذي يحتوي على ثلاث بطاقات أكثر من ملء الشاشة للتمرير. تتناسب نفس البطاقات الثلاث جنبًا إلى جنب مع صف واحد، ولهذا السبب تظهر التخطيطات الأفقية على الصفحات الرئيسية والصفحات المقصودة، بينما تناسب التخطيطات الرأسية الصفحات الطويلة.
| عامل | الجدول الزمني الأفقي | الجدول الزمني العمودي |
|---|---|---|
| أفضل طول | من 3 إلى 8 عناصر | أي طول |
| الفضاء الذي يحتاجه | صف واحد | ينمو مع كل عنصر |
| كيف يتحرك الزوار | الأسهم أو النقاط أو التمرير | تمرير الصفحة |
| الاستخدام النموذجي | خطوات العملية، وخريطة طريق المنتج، وأبرز الأحداث السنوية | تاريخ الشركة، سجل التغيير، قصة طويلة |
| المصدر في الإضافات الرئيسية | عناصر الجدول الزمني المخصصة | العناصر المخصصة أو منشورات المدونة |
الجدول الزمني الأفقي هو نوع من دائري. إذا لم تكن متأكدًا من المصطلحين الذي يناسب تصميمك، دائري مقابل المنزلق في العنصر يشرح الفرق.
كيفية إنشاء جدول زمني أفقي في Elementor
تحتاج إلى تثبيت Elementor وMaster Addons، ثم ست خطوات في المحرر. لا شيء أدناه يحتاج إلى CSS مخصص.
الخطوة 1: إضافة عنصر واجهة المستخدم للمخطط الزمني
افتح صفحتك باستخدام Elementor، وابحث في لوحة عناصر واجهة المستخدم الجدول الزمني واسحبه إلى الصفحة. يصل كجدول زمني عمودي يحتوي على ثلاثة نماذج من العناصر. يترك نوع الجدول الزمني على الجدول الزمني المخصص، لأن التخطيط الأفقي متاح فقط للعناصر المخصصة.
الخطوة 2: قم بتبديل نمط الجدول الزمني إلى الأفقي
في علامة التبويب المحتوى، افتح الجدول الزمني القسم والتغيير نمط الجدول الزمني من الجدول الزمني العمودي إلى الجدول الزمني الأفقي. تنتقل البطاقات إلى صف واحد، ويمر الخط عبر الجزء العلوي، وتقع كل نقطة فوق بطاقتها مع التاريخ فوقها. يظهر قسمان جديدان في اللوحة: إعدادات التنقل والدوامة.
الخطوة 3: تحرير العناصر
انقر فوق صف أدناه عناصر لفتحه. يحتوي كل عنصر على ثلاث علامات تبويب صغيرة: المحتوى والوسائط والأسلوب.
- يعرض يقرر ما هو أعلى من النقطة: تاريخ أو علامة مخصصة مثل “Phase 1”.
- تاريخ و تنسيق التاريخ حدد التاريخ وكيفية كتابته.
- وصلة يجعل البطاقة بأكملها قابلة للنقر عليها.
- يحمل محرر المحتوى العنوان والوصف. لا يوجد حقل عنوان منفصل، لذا فإن السطر الأول هو العنوان.
- ال وسائط تضيف علامة التبويب صورة إلى البطاقة.
الصور العريضة تعمل بشكل أفضل من الصور الطويلة هنا. ثلاث صور طويلة تدفع النص بعيدًا إلى أسفل الشاشة.
الخطوة 4: اختر التنقل
افتح ال ملاحة قم بالقسم واختيار كيفية تحرك الزوار عبر الجدول الزمني. يحتوي القائمة المنسدلة للتنقل على ستة خيارات.
| خيار التنقل | ما يراه الزوار | جيد ل |
|---|---|---|
| السهام والنقاط | الأسهم السابقة والتالية بالإضافة إلى نقطة لكل شريحة | معظم الجداول الزمنية |
| السهام والكسر | الأسهم بالإضافة إلى عداد مثل 2/6 | جداول زمنية طويلة حيث تزاحم النقاط |
| السهام | السهام فقط | تخطيطات نظيفة |
| النقاط | النقاط فقط | تصميمات اللمس أولاً |
| تقدم | شريط يملأ مع تقدم الكاروسيل | خطوات العملية |
| لا أحد | اسحب أو تشغيل تلقائي فقط | شرائط زخرفية |
أسفل القائمة المنسدلة يمكنك تشغيلها الرصاص الديناميكي؟، أضف شريط التمرير باستخدام إظهار شريط التمرير؟، اضبط الموضع، وقم بتبديل الرمزين التالي والسابق. إخفاء السهم على الهاتف المحمول؟ يتم تشغيله افتراضيًا، مما يترك لزوار الهاتف تمريرة ونقاط.
الخطوة 5: ضبط سلوك الكاروسيل
يفتح إعدادات دائري للتحكم في كيفية تحرك الجدول الزمني.
- تخطيط: دائري للصف المسطح، أو Coverflow لتأثير ثلاثي الأبعاد مع عناصر التحكم في التدوير والتمدد والعمق.
- التشغيل التلقائي و سرعة التشغيل التلقائي: السرعة الافتراضية هي 5000 مللي ثانية، لذا قم بشريحة جديدة كل خمس ثوانٍ.
- وقفة على تحوم: يوقف التشغيل التلقائي أثناء تجاوز المؤشر للمخطط الزمني.
- الشرائح للتمرير: كم عدد البطاقات التي تتحرك لكل نقرة، مضبوطة لكل جهاز.
- الشريحة المركزية, الاستيلاء على المؤشر و اسحب الوضع الحر لإحساس السحب.
- حلقة: يعود إلى العنصر الأول بعد العنصر الأخير.
- سرعة الرسوم المتحركة (مللي ثانية): كم من الوقت يستغرق كل انتقال للشريحة، 500 افتراضيًا.
للحصول على جدول زمني حقيقي، فكر مرتين في التشغيل التلقائي. التواريخ لها أمر، والبطاقة التي تنزلق بعيدًا أثناء قراءتها أمر مزعج. يعد التشغيل التلقائي مع الإيقاف المؤقت أثناء التحويم حلاً وسطًا عادلاً.
الخطوة 6: قم بتصميم الأسهم والنقاط والبطاقات
قم بالتبديل إلى علامة التبويب "النمط". يحتوي على عشرة أقسام: عناصر الكاروسيل والتخطيط والصور والمشاركات والبطاقات والسهم والتواريخ والخط والنقاط والملاحة.
- بطاقات: الحشو ونصف قطر الحدود وألوان العنوان والمحتوى، بالإضافة إلى مظهر منفصل للبطاقة المركزة.
- التواريخ: طباعة ولون التاريخ أو الملصق فوق كل نقطة.
- خط: لون المسار وسمكه.
- نقاط: نقطة عادية أو أيقونة أو صورة بالحجم والألوان.
- ملاحة: الألوان والأحجام للأسهم والنقاط وشريط التمرير.
انشر الصفحة واختبرها على الهاتف. يتم إسقاط البطاقات لكل صف على شاشات أصغر، لذا تأكد من أن النص لا يزال مناسبًا.
هل تريد التخطيط الرأسي أيضًا؟ ال عنصر واجهة المستخدم الجدول الزمني تسرد الصفحة كل خيار تخطيط ومحاذاة ونمط في مكان واحد.
فيديو تعليمي
يقوم هذا الفيديو بإنشاء جدول زمني من صفحة فارغة وتحويله إلى الرف الدائري الأفقي في الساعة 3:44.
أربعة أشياء تسوء
تأتي معظم المشكلات المتعلقة بالجدول الزمني الأفقي من التعامل معه كجدول رأسي.
- الكثير من العناصر. بعد الساعة الثامنة أو نحو ذلك، يتوقف الزوار عن النقر. استخدم جدولًا زمنيًا رأسيًا أو قم بتقسيم القصة حسب السنة.
- ارتفاعات البطاقة غير متساوية. وصف واحد طويل يمتد الصف. قم بقص النص أو قم بتشغيل الارتفاع التلقائي في إعدادات الكاروسيل.
- الأسهم فوق البطاقة الأولى. إذا كانت الأسهم موجودة أعلى المحتوى، فقم بتغيير الموضع في قسم التنقل.
- توقع مشاركات المدونة. نوع Post Timeline عمودي. بالنسبة للمشاركات المتتالية، استخدم القطعة المدونة في وضع دائري.
اقرأ أيضا: 20 قوالب منزلق Elementor، والتي تتضمن تصميم شريط تمرير الجدول الزمني.
الأسئلة المتداولة
هل يمكنني إنشاء جدول زمني أفقي في Elementor بدون Elementor Pro؟
نعم. لا يتضمن Elementor Pro عنصر واجهة مستخدم للمخطط الزمني أيضًا، لذلك لا يحدث Pro أي فرق هنا. أضف عنصر واجهة مستخدم للمخطط الزمني من ملحق مثل Master Addons، وقم بتعيين نمط المخطط الزمني على المخطط الزمني الأفقي، وتصبح العناصر دائرية.
كيف يمكنني إضافة أسهم إلى جدول زمني أفقي في Elementor؟
افتح قسم التنقل في علامة التبويب المحتوى واختر الأسهم والنقاط أو الأسهم والكسر أو الأسهم. يمكنك بعد ذلك تعيين موضع السهم واستبدال الأيقونات التالية والسابقة من نفس القسم.
هل يمكن التشغيل التلقائي للجدول الزمني الأفقي؟
نعم. قم بتشغيل التشغيل التلقائي ضمن إعدادات Carousel وقم بتعيين سرعة التشغيل التلقائي بالمللي ثانية. الافتراضي هو 5000، أي خمس ثوانٍ لكل شريحة. توقف مؤقتًا أثناء القراءة.
هل يستجيب الجدول الزمني الأفقي؟
نعم. إنه دائري، لذا فهو يعرض عددًا أقل من البطاقات على الأجهزة اللوحية والهواتف ويقوم الزوار بالتمرير للتحرك. تحتوي الشرائح المراد تمريرها على قيم منفصلة لكل جهاز.
هل يمكنني عرض منشورات المدونة في جدول زمني أفقي؟
ليس مع نوع Post Timeline، وهو عمودي فقط. أضف المشاركات يدويًا كعناصر جدول زمني مخصص، أو استخدم دائري البريد.
الأفكار النهائية
يتلخص المخطط الزمني الأفقي لـ Elementor في إعداد واحد وقسمين: تم ضبط نمط المخطط الزمني على المخطط الزمني الأفقي، ثم التنقل بخياراته الستة وإعدادات الكاروسيل للتشغيل التلقائي والحلقة والسرعة. احتفظ بها على ثلاث إلى ثماني بطاقات قصيرة واختبرها على الهاتف.
ال صفحة القطعة الجدول الزمني يحتوي على عروض توضيحية حية لكلا التخطيطين، بما في ذلك أ عرض خريطة الطريق الأفقية.
القراءة ذات الصلة
2 ردود
من السهل تفويت النقطة التي مفادها أن التخطيط الأفقي يعمل فقط مع عناصر المخطط الزمني المخصص، وليس المخطط الزمني للنشر، وقد يؤدي ذلك إلى كسر البناء متأخرًا. قبل تبديل نمط المخطط الزمني، تأكد من أن كل عنصر مخصص، نظرًا لأن الجداول الزمنية المستندة إلى التدوين تظل عمودية. تعديل عملي: اضبط التنقل على الأسهم والنقاط، ثم اختبر عرض الهاتف الضيق، لأن الأسهم الدائرية يمكن أن تزاحم البطاقات والنقاط تجعل التمرير أكثر وضوحًا للقراء.
شكرا لك على مشاركة هذه النصائح المفيدة! أنت على حق تمامًا في أن التحقق من نوع عنصر المخطط الزمني واختبار التخطيط على شاشات أصغر يمكن أن يساعد في تجنب المشكلات غير المتوقعة. نحن نقدر لك الإشارة إلى ذلك ومساعدة مستخدمي Master Addons الآخرين على إنشاء جداول زمنية أفضل وأكثر استجابة. شكرا لكونك جزءا من مجتمعنا!