تسليط الضوء على البرنامج المساعد Divi - وحدة الخط الزمني Divi

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

تضيف وحدة Divi Timeline Module ، وهي مكون إضافي تابع لجهة خارجية بواسطة Tortoise IT عبر Elegant Marketplace ، عدة وحدات جديدة (الوحدة النمطية الرئيسية وثلاث وحدات مرافقة) إلى Divi Builder لإنشاء نوعين مختلفين من الجداول الزمنية سريعة الاستجابة:

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

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

تثبيت البرنامج المساعد Divi Timeline Module

التثبيت بسيط. ما عليك سوى تحميل المكون الإضافي وتنشيطه كما تفعل مع أي مكون إضافي. ليس هناك أي إعداد آخر مطلوب.

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

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

الخط الزمني عمودي

أضف Timeline - Vertical module إلى صف عمود واحد.

في الإعدادات العامة ، يمكننا إضافة عنصر جدول زمني جديد ، وتوفير عنوان للخط الزمني ، واختيار لون الخط الزمني. انقر فوق إضافة عنصر مخطط زمني جديد لإنشاء كل عنصر من عناصر المخطط الزمني.

يؤدي النقر فوق إضافة عنصر مخطط زمني جديد إلى فتح محرر محتوى مكتمل بالنص والوسائط والتسمية وإظهار المزيد من الأزرار والأيقونة ولون الأيقونة ولون الخلفية والرسوم المتحركة للصورة / الأيقونة. يتضمن أيضًا جميع إعدادات التصميم المتقدمة القياسية بالإضافة إلى CSS المخصص .

أضف العديد من عناصر المخطط الزمني كما تريد. يمكنك أن ترى هنا أنني أضفت خمسة عناصر وغيرت لون الخط المركزي إلى اللون الأخضر. ضمن عناصر المخطط الزمني ، اخترت الرموز والألوان لكل عنصر.

النتيجة العمودية للمخطط الزمني

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

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

يعد هذا خيارًا رائعًا لخطوات التعليمات المرقمة ، والسيرة الذاتية ، وقائمة المنتجات ، والمحفظة ، وما إلى ذلك.

بعد الجدول الزمني

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

ستحتاج إلى القيام بأمرين:

1. قم بإنشاء تخطيط
2. قم بإنشاء الصفحة واختر هذا التخطيط

يتم تضمين كافة الوحدات المطلوبة لإنشاء التخطيط والصفحة. لنقم بإنشاء مثال باستخدام نماذج منشورات المدونة.

قم بإنشاء تخطيط

أولاً ، قم بإنشاء تخطيط. في لوحة القيادة ، انتقل إلى Divi و Divi Library وحدد Add New . امنح التخطيط اسمًا منطقيًا بالنسبة لك (اخترت Post Timeline Layout). حدد التخطيط كنوع القالب . اترك Global دون تحديد . انقر فوق إرسال .

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

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

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

ملاحظة - لا يتم استخدام هذه الوحدات داخل صفحة مثل معظم وحدات Divi Builder. من المفترض استخدامها داخل تخطيط سيتم استدعاؤه بواسطة المخطط الزمني (المنشورات) - الوحدة النمطية الرأسية .

هذا هو التخطيط كما يبدو في Divi Builder. كما هو متوقع ، كل من هذه الوحدات لها خياراتها الخاصة بما في ذلك الإعدادات العامة ، وإعدادات التصميم المتقدمة ، و CSS المخصص .

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

بمجرد وضع الوحدات النمطية الخاصة بك واختيار جميع الإعدادات الخاصة بك ، حدد تحديث في اليمين أسفل نشر .

دعونا ننظر عن كثب في كل وحدة.

وحدة الصور المميزة

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

أنا أختار حجم صورة متوسط ​​وأوقف الرسوم المتحركة.

وحدة عنوان المشاركة

تتيح لك وحدة عنوان المنشور الارتباط بالمحتوى وتغيير تسمية المسؤول وتعيين إعدادات CSS. أوصي بترك إعداد الارتباط إلى المحتوى مضبوطًا على نعم . تركت الباقي على الإعدادات الافتراضية.

وحدة المحتوى

تتيح لك وحدة المحتوى اختيار إظهار الخبراء أو المحتوى وعرض زر " قراءة المزيد" . لقد قمت بتعيينه لإظهار مقتطف وزر قراءة المزيد.

قم بإنشاء الصفحة

قم بإنشاء صفحة جديدة باستخدام Divi Builder وقم بإسقاط الجدول الزمني (المنشورات) - الوحدة النمطية العمودية في تخطيط عمود واحد.

إعدادات الوحدة النمطية العمودية للمخطط الزمني (المنشورات)

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

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

بمجرد الانتهاء من جميع اختياراتك ، انشر الصفحة.

نتيجة الجدول الزمني للنشر

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

مثال على مدونة

يمكن استخدام المخطط الزمني ضمن تخطيطات أخرى. كنت أرغب في إنشاء تخطيط مدونة يعرض بعض المنشورات في الأعلى ثم الباقي ضمن مخطط زمني.

لقد أنشأت تخطيطًا في عمود واحد مع الصورة في الأعلى ، والمحتوى في المنتصف ، والعنوان في الأسفل.

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

نتيجة صفحة المدونة

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

افكار اخيرة

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

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

نود أن نسمع منك. هل استخدمت Divi Timeline Module؟ أخبرنا عن تجربتك في التعليقات.

صورة مميزة عبر Ollie The Designer / shutterstock.com