كيفية إنشاء جدول زمني في العنصر (الجدول الزمني الرأسي والأفقي واللاحق)

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

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

ما تفعله أداة Elementor Timeline

المخطط الزمني عبارة عن قائمة مرتبة ترتيبًا زمنيًا يتم تحويلها إلى تخطيط مرئي. يقع كل إدخال على خط مركزي، مميز بنقطة (نقطة أو رمز)، مع بطاقة تحتوي على التاريخ والعنوان والمحتوى الخاص بك. تمنحك أداة Master Addons Timeline طريقتين لملء هذه الإدخالات وطريقتين لوضعها.

الاثنان أنواع الجدول الزمني هل الجدول الزمني المخصص والجدول الزمني للنشر. مخصص يعني أنك تكتب كل إدخال يدويًا، وهو ما يناسب المحتوى الثابت مثل سجل الشركة أو خريطة الطريق. يقوم Post Timeline بسحب منشورات WordPress الخاصة بك تلقائيًا، بحيث يصبح المنشور الجديد إدخال جدول زمني جديد بدون أي عمل يدوي.

الاثنان أنماط الجدول الزمني عمودية وأفقية. يتم إدخال المكدسات الرأسية أسفل الصفحة بنمط يسار/يمين متناوب. يضعها أفقيًا جنبًا إلى جنب كدوامة قابلة للتمرير مع أسهم التنقل. يمكنك التنقل بين أي منها من خلال منسدلة واحدة، وهذا هو سبب بقاء هذه الأداة في مجموعتي جنبًا إلى جنب مع الأخرى 80+ الحاجيات والإضافات في الإضافات الرئيسية.

قبل البدء: قم بتثبيت الإضافات الرئيسية

تأتي أداة Timeline مع الإضافات الرئيسية المجانية لـ Elementor. الجدول الزمني المخصص وكلا نمطي التخطيط مجانيان. يحتاج Post Timeline، المغطى بالأسفل، إلى Master Addons Pro.

1. في لوحة تحكم WordPress الخاصة بك، انتقل إلى المكونات الإضافية > إضافة جديد.
2. ابحث عن إضافات “Master لـ Elementor” وانقر ثبت الآنإذن تفعيل. يمكنك أيضا تحميل الإضافات الرئيسية مباشرة من WordPress.org.
3. افتح أي صفحة باستخدام Elementor وابحث في لوحة عناصر واجهة المستخدم عن “Timeline.”

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

كيفية إضافة جدول زمني في العنصر (خطوة بخطوة)

سنبدأ بجدول زمني عمودي مخصص. إنها الأسرع في لف رأسك، وكل شيء آخر يتفرع منها.

الخطوة 1: اسحب عنصر واجهة المستخدم للمخطط الزمني إلى الصفحة

قم بتحرير صفحتك باستخدام Elementor، وابحث عن “Timeline” في لوحة عناصر واجهة المستخدم، واسحبها إلى قسم. فهو يأتي مع ثلاثة نماذج من الإدخالات مملوءة بالفعل، بحيث ترى جدولًا زمنيًا للعمل على الفور بدلاً من مربع فارغ. شيء صغير، لكنه يوفر عليك تخمين ما يفعله كل حقل.

الخطوة 2: اضبط نوع ونمط الجدول الزمني

في ال محتوى علامة التبويب، افتح قسم الجدول الزمني. تقوم نقطتان منسدلتان بمعظم العمل هنا نوع الجدول الزمني (مخصص أو بريدي) و نمط الجدول الزمني (عمودي أو أفقي). اترك النوع على “ الجدول الزمني المخصص ونمط “Vertical Timeline” في الوقت الحالي.

الخطوة 3: تحرير عناصر الجدول الزمني الخاص بك

تحت عناصر، يظهر كل إدخال كصف مكرر (العينات مؤرخة في 2 فبراير 2014، و10 مايو 2015، و21 يونيو 2016). انقر فوق صف لتوسيعه وتحرير التاريخ (أو التسمية المخصصة) والمحتوى والصورة والرابط. لا يوجد حقل عنوان منفصل، لذا أضف عنوانًا في أعلى مربع المحتوى. إضافة عنصر يقوم بإنشاء إدخال جديد، وتقوم الأيقونة المكررة بنسخ إدخال موجود، ويمكنك إعادة ترتيبها عن طريق سحب الصفوف.

هذا جدول زمني مخصص كامل. بضع نقرات على “Add Item، و” تاريخًا وجملًا في كل منهما، وقمت بتوثيق تاريخ الشركة أو خارطة طريق المشروع.

الجدول الزمني المخصص مقابل الجدول الزمني اللاحق

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

الوصول إلى الجدول الزمني المخصص عندما يكون المحتوى ثابتًا وتحريريًا:

• تاريخ الشركة ومعالم التأسيس
• خرائط طريق المنتج أو الميزة
• سيرة ذاتية أو رحلة مهنية
• جداول الأحداث وجداول أعمال البرامج

الوصول إلى نشر الجدول الزمني عندما يكون المحتوى هو مدونتك ويجب أن يظل محدثًا

• أرشيف زمني للمقالات
• موجز الأخبار أو الإعلانات
• دراسات الحالة أو إدخالات المحفظة المنشورة كمشاركات

إنشاء جدول زمني للنشر من مدونتك

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

الإعدادات التي تستحق المعرفة:

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

يمكنك أيضًا تصفية المنشورات حسب الفئة أو العلامة أو المؤلف، واستبعاد منشورات محددة. قد يُظهر أحد الجداول الزمنية “ كل شيء في الأخبار، ويروج لمجموعة أخرى منتقاة بعناية. نظرًا لأنه يقرأ مباشرة من منشوراتك، فهو موجود جيدًا داخل ملف منشئ الموضوع أرشيف أو قالب واحد، حيث يتم تحديثه في كل مرة تضغط فيها على "نشر".

التبديل إلى الجدول الزمني الأفقي

يتغير نمط الجدول الزمني إلى “Horizontal Timeline” ويدور التخطيط. هذا الخيار مخصص للجداول الزمنية المخصصة، نظرًا لأن الجداول الزمنية اللاحقة تظل عمودية. توجد الإدخالات الآن جنبًا إلى جنب على طول خط مركزي أفقي، ولكل منها علامة النقطة الخاصة بها فوق البطاقة، وتسمح الأسهم لليسار/اليمين للزائرين بالتمرير من خلالها مثل دائري.

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

تصميم الجدول الزمني

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

الخط المركزي والنقاط

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

الحالات الافتراضية والتحويمية والمركزة

يحمل قسم النقاط ثلاث علامات تبويب للحالة: الافتراضي, تحوم، و ركز. الافتراضي هو المظهر الساكن، والتحريك هو المظهر الذي يتم وضعه بالماوس، والتركيز يسلط الضوء على العنصر النشط. هذا الأخير هو الأكثر أهمية في دائري أفقي، حيث يخبر الزائرين بالمدخل المتمركز حاليًا. التصميم الثلاثة هو ما يجعل المخطط الزمني يبدو تفاعليًا بدلاً من أن يكون مسطحًا.

البطاقات والتواريخ والطباعة

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

حالات الاستخدام العملي

بعض الطرق التي قمت بها بوضع عنصر واجهة المستخدم Timeline للعمل على مشاريع حقيقية:

• حول الصفحات: جدول زمني مخصص رأسي لمعالم الشركة، مقترنًا بـ القطعة المضادة للحصول على إحصائيات العناوين الرئيسية مثل سنوات العمل.
• صفحات المنتج: خارطة طريق أفقية توضح ما تم شحنه وما سيأتي بعد ذلك.
• المدونة والأخبار: جدول زمني للنشر كأرشيف زمني، يجلس بجوار أ القطعة Changelog لملاحظات الإصدار.
• المحافظ: دراسات الحالة كمدخلات مؤرخة مع صور مميزة.

نصائح لجدول زمني أفضل

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

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

الأسئلة المتداولة

إلتحاق بالركب

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

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

القراءة ذات الصلة: قم بإنشاء صفحة مدونة باستخدام Elementor · كيفية تسريع مواقع Elementor · تصفح كافة عناصر واجهة المستخدم الخاصة بـ Master Addons