كيفية إنشاء جدول زمني في WordPress مع Elementor
نشرت: 2025-05-26توفر الجداول الزمنية طريقة بصرية لعرض الأحداث أو المعالم أو الخطوات بترتيب زمني. إنها تساعد في تقديم المعلومات في تدفق خطي يسهل على الزائرين والمستخدمين فهم تسلسل الأحداث أو العمليات. باستخدامها ، يمكنك عرض رحلة شركتك أو خريطة طريق للمشروع أو قصة شخصية مع وضوح.
يمكن أن تؤدي إضافة جدول زمني إلى WordPress إلى تعزيز تجربة المستخدم عن طريق جعل المحتوى أكثر جاذبية وأسهل متابعة. هذا هو السبب في أن استخدام الجداول الزمنية أصبح اتجاهًا على العديد من مواقع الويب. يعد Elementor مكونًا إضافيًا سهل الاستخدام بحيث يمكنك استخدامه لإنشاء وإضافة جداول زمنية إلى منشورات WordPress والصفحات ذات المستوى القصير من التخصيص.
في هذه المقالة ، سنعرض لك دليلًا خطوة بخطوة حول كيفية إنشاء جدول زمني في WordPress مع Elementor. قبل ذلك ، سنغطي بعض الأجزاء النظرية فيما يتعلق بموضوع اليوم.
أنواع الجداول الزمنية وحالات استخدامها
هناك نوعان من الجداول الزمنية - الأفقية والرأسية. كل واحد لديه حالات استخدام محددة تضيف قيمة إلى موقع ويب بشكل مختلف. دعنا نستكشفهم وحالات استخدامهم في المناقشة أدناه.
1. الجدول الزمني العمودي
يعرض الجدول الزمني العمودي الأحداث والمعلومات من أعلى إلى أسفل ، عادة على طول اليسار أو وسط الصفحة. إنه تنسيق صديق للتمرير يعمل بسلاسة على كل من أجهزة سطح المكتب والأجهزة المحمولة. بينما يقوم المستخدمون بالتمرير لأسفل في الصفحة ، يتبعون الترتيب الزمني في تصميم نظيف وقابل للقراءة.
استخدام حالات الجداول الزمنية الرأسية:
- تاريخ الشركة أو رحلة النمو
- استئناف أو أبرز ما في الوظيفي
- سلسلة نشر المدونة أو تقدم المقالة
- تفسيرات العملية خطوة بخطوة
- معالم تطوير المنتجات
2. الجدول الزمني الأفقي
يعرض الجدول الزمني الأفقي الأحداث من اليسار إلى اليمين ، بعد تنسيق تمرير جانبي أو انزلاق. عادة ما يتم استخدامه حيث تكون المساحة أوسع مما هو طويل. هذا التنسيق هو الأفضل للجداول الزمنية الأقصر أو عندما ترغب في إظهار عدد قليل من الأحداث المهمة في تصميم واسع وسهل المشاهدة.
استخدام حالات الجداول الزمنية الأفقية:
- خرائط طريق المشروع أو مراحل التخطيط
- جداول الحدث
- حملات التسويق أو إطلاق المنتجات
- عروض محفظة
- الجداول الزمنية التعليمية أو نظرة عامة تاريخية
كيفية إنشاء جدول زمني في WordPress مع Elementor
كما قيل سابقًا ، فإن Elementor عبارة عن مكون إضافي لشراء صفحات السحب والإفلات. لكن الأخبار الحزينة هي أنه لا يشمل أي عنصر واجهة مستخدم لإنشاء الجداول الزمنية. ومع ذلك ، يحتوي المكون الإضافي على الكثير من الإضافات التي يمكنك من خلالها توسيع وظائف البرنامج المساعد Core Elementor.
Happyaddons هو واحد منهم. يأتي مع 130+ عناصر واجهة مستخدم و 22+ الميزات التي يمكن أن تتغلب على العديد من أوجه القصور في Elementor. لذلك ، عن طريق تثبيت البرنامج المساعد HappyAddons ، يمكنك تمكين المزيد من ميزات التصميم على موقعك. في كثير من الحالات ، لن تحتاج حتى إلى Elementor Pro إذا كان لديك Happyaddons.
دعونا الآن نستكشف كيفية إنشاء الجداول الزمنية في WordPress مع Elementor و Happyaddons.
كيفية إنشاء جدول زمني أفقي في WordPress
آمل أن تعرف بالفعل ما هو الجدول الزمني الأفقي. HappyAddons لديه عنصر خط الزمني أفقي ، وهو مجاني تمامًا للاستخدام. لذلك ، تحتاج إلى تثبيت الإضافات التالية وتفعيلها أولاً على موقع الويب الخاص بك.
- عنصر
- Happyaddons
بمجرد تثبيت المكونات الإضافية وتفعيلها على موقعك ، ابدأ باتباع الخطوات الموضحة في البرنامج التعليمي أدناه.
الخطوة 01: إنشاء قسم على قماش Elementor
افتح منشورًا أو صفحة مع Elementor. قم بإنشاء قسم مع بنية الأعمدة Flexbox المطلوبة لإنشاء جدول زمني.
الخطوة 02: أضف أداة الجدول الزمني الأفقي إلى القماش
ابحث عن أداة الجدول الزمني الأفقي على لوحة Elementor. بمجرد العثور عليه ، قم بسحب عنصر واجهة المستخدم إلى القماش.
سترى إضافة عنصر واجهة المستخدم الزمني الأفقي إلى القماش مع تخطيط افتراضي.
الخطوة 03: حدد مسبقًا للضغوط
الإعداد المسبق هو نمط أو تصميم محدد مسبقًا يمكنك تطبيقه على الفور على عنصر واجهة مستخدم للتخصيص السريع. إذا كنت لا ترغب في تصميم عنصر واجهة مستخدم من نقطة الصفر ، فيمكنك تحديد إعداد مسبق. ويأتي أداة الجدول الزمني الأفقي مع ستة مسبقات.
حدد مسبقًا تريده للعناصر واجهة المستخدم.
الخطوة 04: أضف محتوى إلى أداة الجدول الزمني الأفقي
توسيع قسم الجدول الزمني . هنا ، ستحصل على خيارات لإضافة محتوى إلى عنصر واجهة المستخدم. بشكل افتراضي ، ستحصل على أربع علامات تبويب. انقر فوق أي علامة تبويب لتوسيعها. سيؤدي ذلك إلى فتح العديد من الحقول التي يمكنك وضعها وإضافة معلوماتك المطلوبة.
بمجرد توسيع علامة التبويب ، يمكنك إضافة تاريخ الحدث ، والأيقونة ، والصورة ، ودقة الصورة ، والعنوان ، والوصف إلى علامة التبويب المعنية.
يمكنك أن ترى أننا أضفنا محتوى إلى القسم المعني من القطعة الأفقية.
بنفس الطريقة ، أضف محتوى إلى جميع علامات التبويب الجدول الزمني. يمكنك أن ترى أننا قمنا بذلك في الصورة المرفقة أدناه.
لإضافة المزيد من علامات التبويب إلى عنصر واجهة المستخدم ، انقر فوق الزر "إضافة عنصر" ضمن علامة التبويب "الجدول".
الخطوة 05: تكوين الإعدادات للعناصر الزمنية الأفقية
بمجرد الانتهاء من جزء المحتوى ، قم بتوسيع قسم الإعدادات ضمن علامة التبويب المحتوى. يمكنك تكوين TITLE HTML TAB ، محاذاة المحتوى ، إخفاء سهم المحتوى ، تمكين Lightbox ، سرعة الرسوم المتحركة ، عدد الشرائح للعرض ، أيقونة ، وأكثر من ذلك.
هذه سهلة التكوين. نأمل أن تتمكن من فعلها بمفردك بنفسك.
الخطوة 06: قم بتصميم أداة الجدول الزمني الأفقي
لتسمية عنصر واجهة المستخدم ، انتقل إلى علامة التبويب النمط على لوحة Elementor.
أولاً ، قم بتوسيع قسم الجدول الزمني .
ستحصل على خيارات لتخصيص سمك الخط ، لون الخط ، تباعد التاريخ ، طباعة التاريخ ، اللون ، الرمز ، دائرة نصف قطرها الحدود ، نوع الحدود ، عرض الحدود ، لون الخلفية ، إلخ.
استكشفهم وقم بالتخصيصات اللازمة.
يمكنك أن ترى أننا أجرينا بعض التغييرات على الجدول الزمني الأفقي.
ثم ، قم بتوسيع قسم الأسهم . من هنا ، يمكنك تخصيص أيقونات الأسهم ومواقفها وأحجامها وعرض الحدود ونصف قطرها وأكثر من ذلك .
بنفس الطريقة ، قم بتوسيع قسم المحتوى في علامة التبويب النمط. يمكنك تخصيص دائرة نصف قطرها الحدودية ، الحشو ، المساحة بين المحتويات ، نوع الحدود ، عرض الحدود ، اللون ، الظل ، الطباعة ، والمزيد من القطعة.
هل التغييرات اللازمة.
الخطوة 07: معاينة أداة الجدول الزمني الأفقي
انتقل إلى صفحة المعاينة وتحقق مما إذا كان كل شيء يعمل بشكل جيد أم لا. يمكنك أن ترى أن الجدول الزمني الأفقي التجريبي الخاص بنا يعمل بشكل جيد دون أي مواطن.
كيفية إنشاء جدول زمني رأسي في WordPress
بينما تتيح لك Happyaddons إنشاء جدول زمني أفقي مجانًا ، يجب عليك الترقية إلى الإصدار المميز من المكون الإضافي لإنشاء جدول زمني رأسي. لذلك ، تأكد من توفر الإضافات التالية على موقعك.
- عنصر
- Happyaddons
- Happyaddons Pro
بمجرد توفرها على موقعك ، ابدأ باتباع البرنامج التعليمي الموضح أدناه.
الخطوة 01: السحب والإفلات من عنصر واجهة المستخدم الزمني إلى لوحة العنصر
اكتب الجدول الزمني في مربع البحث. حدد أداة الجدول الزمني بخلاف الجدول الزمني الأفقي. اسحبها على قماشية Elementor.
سيتم إنشاء جدول زمني عمودي على القماش مع تخطيط افتراضي.
الخطوة 02: حدد إعدادًا مسبقًا لعنصر أداة الجدول الزمني العمودي
آمل أن تعرف بالفعل ماهية الإعداد المسبق ، كما ناقشنا بالفعل أعلاه. حدد مسبقًا إذا كنت لا ترغب في تصميم الجدول الزمني العمودي من نقطة الصفر.
الخطوة 03: أضف محتوى إلى الجدول الزمني العمودي
توسيع قسم الجدول الزمني . بشكل افتراضي ، سترى علامات تبويب. قم بتوسيع أي علامة تبويب بالنقر فوقها كما أظهرنا لك أعلاه.
آمل ألا تحتاج إلى التحدث كثيرًا هنا. لأنه يمكنك إضافة نفس النوع تقريبًا من المحتوى إلى الجدول الزمني للقرار كما يمكنك القيام به في حالة الجدول الزمني الأفقي.
يمكنك إضافة أيقونة ، وتغيير نوع الرمز ، وتحديد الوقت ، وتعيين عنوان ، وإضافة صورة ، وما إلى ذلك ، لكل قسم جدول زمني. افعل الأشياء الجديدة بنفسك.
أكمل إضافة المحتوى إلى الجدول الزمني. يمكنك حتى إضافة المزيد من العناصر إلى الجدول الزمني بالنقر فوق العنصر + إضافة كما هو موضح أعلاه.
الخطوة 04: تكوين الإعدادات للعناية الزمنية العمودية
قم بتوسيع قسم الإعدادات . يمكنك تكوين ما إذا كنت تريد إظهار التاريخ والوقت وسهم المحتوى وشجرة التمرير . يمكنك أيضًا تغيير علامة العنوان ، ومحاذاة مربع الرمز ، ومحاذاة الأشجار ، ولون الخلفية .
هل الإعدادات الجديدة بنفسك. لكن بالنسبة لنا ، تبدو المحاذاة الافتراضية جيدة. لذلك ، سوف نلتزم به للبرنامج التعليمي.
الخطوة 05: قم بتصميم عنصر واجهة المستخدم الزمني العمودي
تعال إلى علامة التبويب النمط على لوحة Elementor. يمكنك تخصيص جميع أنواع المحتوى والعناصر المرئية على عنصر واجهة المستخدم من علامة التبويب هذه.
أولاً ، قم بتوسيع مربع المحتوى . يمكنك تخصيص الطباعة واللون ولون السهم ونوع الخلفية ونوع الحدود وعرض الحدود من هنا. افعل هذا.
بنفس الطريقة ، قم بتوسيع قسم صندوق الرمز . يمكنك تغيير العرض والارتفاع ومساحة الصندوق والخيارات الأخرى المتعلقة بالرموز الموجودة على عنصر واجهة المستخدم من هنا. إذا كنت راضيًا عن الأسلوب الافتراضي ، فلا تلمس أي شيء.
قم بتصميم عنوان القطعة إذا كان ضروريًا. يمكنك أن ترى أننا قمنا بتغيير الطباعة لدينا.
بنفس الطريقة ، قم بتخصيص مظهر الوقت والتاريخ . لقد غيرنا لونه ووزنه والطباعة.
أخيرًا ، قم بتوسيع قسم الزر . يمكنك تصنيف لون الخلفية ، ونسخ الطباعة ، وغيرها .
الخطوة 06: معاينة أداة الجدول الزمني العمودي
تعال إلى صفحة المعاينة وتحقق مما إذا كان الجدول الزمني لـ Verticle يعمل بشكل جيد أم لا. افعل ذلك عن طريق تمرير القطعة. نأمل أن تعمل بشكل جيد في نهايتك كأنك.
وبالتالي ، يمكنك إنشاء أنواع مختلفة من أقسام الجدول الزمني على موقع الويب الخاص بك لتقديم محتوى مختلف بشكل رائع.
الأشياء التي يمكنك القيام بها أكثر مع Happyaddons
Happyaddons بصراحة هو البرنامج المساعد الشامل. من المؤكد أنك ستقع في حب هذا البرنامج المساعد بعد استخدامه لمرة واحدة. ألقِ نظرة على الأشياء التالية التي يمكنك القيام بها مع المكون الإضافي.
أ. استخدم منشئ السمة المجاني
لدى Elementor أيضًا منشئ موضوع. لكنها مخصصة فقط للمستخدمين الممتازين. ولكن في حالة Happyaddons ، فهي مجانية تمامًا في الاستخدام. باستخدام منشئ السمات HappyAddons ، يمكنك إنشاء رؤوس وتذييلات وقوالب نشر المدونة وصفحات الأرشيف. تحقق من كيفية إنشاء قالب نشر المدونة مع HappyAddons مجانًا.
ب. WooCommerce صديقة
يأتي HappyAddons مع تسع أجهزة تعاملات قوية من WooCommerce الصديقة لتعزيز موقع التجارة الإلكترونية. هذه الحاجيات هي شبكة المنتج ، كاروسيل المنتج ، شبكة فئة المنتج ، فئة المنتجات ، منتج واحد ، عربة صغيرة ، عربة ، سحف ، وشريط الشحن.
ج. نسخ النطاقات عبر المجال
باستخدام هذه الميزة ، يمكنك نسخ مباشرة نفس الحاجيات والأقسام والصفحات من موقع ويب إلى مجال آخر. هذا يمكن أن يوفر لك وقتًا ثمينًا حيث لا تضطر دائمًا للبدء من الصفر. يشرح الفيديو التالي ميزة ملصق النسخ عبر المجال للمكون الإضافي.
د. تصميم المحتوى الإبداعي
من خلال أجهزة التحكم الخاصة بها مثل تحوم الصور ، والرابط المتحرك ، وعامل المرح ، ومجموعة مكدس الصور ، ومكدس الصور ، وزر الإبداعي ، والتمرير النصية ، و Lord Icon ، يمكنك إنشاء محتوى إبداعي جذاب لربط المستخدمين.
ه. إظهار المعلومات الإحصائية
على عكس العديد من إضافات Elementor الأخرى ، يوفر هذا البرنامج المساعد العديد من مصادر المخططات التي يمكنك من خلالها عرض المعلومات الإحصائية وإنشاء منشورات وصفحات الرسم البياني. تعلم كيفية إنشاء صفحة infographic مع Elementor.
بالإضافة إلى كل هذه الأشياء ، هناك العديد من الأشياء التي يمكنك القيام بها مع البرنامج المساعد HappyAddons.
الأفكار النهائية!
إنشاء الجداول الزمنية ليس شيئًا إلزاميًا لجميع مواقع الويب. لكنها قد تصبح ضرورية لأنها قد تكون خيارًا مثاليًا لعرض بعض المعلومات والمحتوى. لذا ، كلما شعرت بالحاجة إلى إنشاء جدول زمني ، نأمل أن يصل هذا المنشور التعليمي إلى استخدامك.
إذا كنت قد أحببت هذا المنشور ، نطلب منك إخبارنا من خلال مربع التعليق أدناه. علاوة على ذلك ، إذا كان لديك أي استفسارات بخصوص البرنامج المساعد HappyAddons ، فيمكنك ترك رسالة في مربع الدردشة. سيأتي وكيل الدعم المباشر الخاص بنا للرد عليك في أقرب وقت ممكن.
شكرا لوجود معنا حتى النهاية. نتمنى لك يوم سعيد في المستقبل.