كيفية إنشاء جدول زمني مع وحدة Divi Blurb

في هذا المنشور ، سنعرض لك كيف يمكنك بسهولة إنشاء جدول زمني بسيط وأنيق مع Divi's Blurb Modules الخاصة بك. سنقوم بدمج الخيارات المختلفة التي توفرها الوحدات والصفوف لتحقيق النتيجة التي يمكنك عرضها أدناه. يعتمد المثال الذي سنشاركه على خيارات Divi المضمنة فقط ، مما يعني أنك لن تحتاج إلى إضافة أي كود CSS إضافي! نحن نتأكد أيضًا من أنها تبدو جيدة على سطح المكتب وكذلك على الهاتف المحمول.

نتيجة

يتم تحقيق ظهور الجدول الزمني من خلال عنصرين من عناصر التصميم ؛ الخط الذي يتقاطع مع جميع وحدات Blurb الثلاثة والأرقام. يبدو إصدار سطح المكتب كما يلي:

وإصدار الهاتف المحمول يبدو كالتالي:

هيا بنا نبدأ!

كيفية إنشاء جدول زمني مع وحدة Divi Blurb

اشترك في قناتنا على اليوتيوب

أضف قسم قياسي

لون خلفية القسم

ابدأ بإضافة قسم قياسي جديد واستخدام "rgba (0،0،0،0.12)" كلون للخلفية.

قسم الحشو

انتقل إلى علامة التبويب "تصميم" واستخدم حشوة علوية تبلغ 300 بكسل.

إضافة صف ثلاثي الأعمدة (مخطط زمني)

خلفيات العمود

بمجرد إنشاء القسم ، أضف صفًا من ثلاثة أعمدة إليه. ضمن علامة التبويب "المحتوى" لهذا الصف ، استخدم "# e09900" كلون خلفية العمود 1 ، و "# 0c71c3" كلون خلفية العمود 2 و "# 8300e9" كلون خلفية العمود 3.

تحجيم

انتقل إلى علامة التبويب التصميم واستخدم الإعدادات التالية لفئة التحجيم الفرعية:

• اجعل هذا الصف FulldWidth: نعم
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• معادلة ارتفاعات العمود: نعم

الهامش المخصص والحشو

بعد ذلك ، أضف الحشوة المخصصة والهامش المخصص التالي إلى الصف:

• الحشوة العلوية: 1 بكسل
• الحشو السفلي: 0 بكسل
• الهامش السفلي: -200 بكسل

وأضف "3 بكسل" إلى المساحة المتروكة العلوية والسفلية لكل عمود.

تعطيل على الجهاز اللوحي والهاتف

أخيرًا ، قم بتعطيل الصف على كل من الجهاز اللوحي والهاتف.

إضافة صف ثلاثي الأعمدة آخر (الوحدات النمطية للدعاية)

العمود التدرج الخلفية

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

• اللون الأول: # e09900 (العمود 1) ، # 0c71c3 (العمود 2) ، # 8300e9 (العمود 3)
• اللون الثاني: rgba (255 ، 255 ، 255 ، 0)
• نوع التدرج: خطي
• اتجاه التدرج: 180 درجة
• موقف البداية: 73٪
• مركز النهاية: 92٪

جعل الصف بعرض كامل

بعد ذلك ، انتقل إلى علامة التبويب "تصميم" وقم بتمكين خيار "Make This Row Fullwidth".

المساحة المتروكة المخصصة للصف

افتح فئة التباعد الفرعية واستخدم الحشو المخصص والهامش المخصص التالي للصف:

• الحشوة العلوية: 0 بكسل
• الحشوة اليمنى: 60 بكسل
• الحشو السفلي: 100 بكسل
• الحشوة اليسرى: 60 بكسل
• الهامش العلوي: -100 بكسل

أضف "5 بكسل" إلى المساحة المتروكة العلوية لكل عمود أيضًا.

الوحدة النمطية Blurb

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

قم بالتمرير لأسفل نفس علامة التبويب واستخدم "# f4f4f4" كلون للخلفية.

انتقل إلى علامة التبويب تصميم وقم بإجراء التعديلات التالية على الفئة الفرعية للصورة والأيقونة:

• لون الأيقونة: # e09900
• وضع الصورة / الرمز: اليسار
• استخدام حجم خط الأيقونة: نعم
• حجم خط الأيقونة: 50 بكسل

ضمن فئة النص الفرعية ، تأكد من تمكين اتجاه النص الأيسر.

الخيارات الخاصة بالفئة الفرعية لنص العنوان هي كما يلي:

• خط الرأس: كريت دائري
• محاذاة نص الرأس: يسار
• حجم خط الرأس: 32 بكسل
• ارتفاع خط الرأس: 1em

بعد ذلك ، افتح الفئة الفرعية للنص الأساسي واستخدم الإعدادات التالية:

• محاذاة النص الأساسي: يسار
• حجم خط الجسم: 12 بكسل
• ارتفاع خط الجسم: 1.7em

سنستخدم أيضًا حدًا بالإعدادات التالية:

• استخدام الحدود: نعم
• لون الحدود: # 000000
• عرض الحدود: 2 بكسل
• نمط الحدود: منقط

بعد ذلك ، افتح فئة التحجيم الفرعية واستخدم "279 بكسل" لعرض المحتوى و "100٪" للعرض.

أخيرًا ، أضف "30 بكسل" إلى الحشوة العلوية واليمنى والسفلية واليسرى.

وحدة النص

بمجرد إضافة وتعديل Blurb Module ، امض قدمًا وأضف وحدة نصية أسفلها مباشرة. ستحتاج وحدة النص إلى خلفية متدرجة أيضًا:

• اللون الأول: # e09900
• اللون الثاني: rgba (255 ، 255 ، 255 ، 0)
• نوع التدرج: شعاعي
• اتجاه شعاعي: المركز
• موقف البداية: 20٪
• مركز النهاية: 24٪

انتقل إلى علامة التبويب التصميم واستخدم الإعدادات التالية لفئة النص الفرعية:

• حجم خط النص: 21 بكسل
• لون النص: #FFFFFF
• ارتفاع خط النص: 1.7em
• اتجاه النص: الوسط

افتح فئة التحجيم الفرعية ، واستخدم عرض "48٪" وحدد محاذاة الوحدة الصحيحة.

أخيرًا ، استخدم الهامش العلوي "-100 بكسل" وأضف "50 بكسل" إلى الحشوة العلوية والسفلية.

استنساخ Blurb ووحدة النص

بمجرد الانتهاء من العمود الأول ، يمكنك استنساخ كلتا الوحدتين ووضعهما في العمودين الآخرين. الأشياء الوحيدة التي سيتعين عليك تغييرها هي رمز الدعاية ، ولون الدعاية ولون التدرج الأول لوحدة النص إلى "# 0c71c3" للعمود الثاني و "# 8300e9" للعمود الأخير.

تعطيل على الجهاز اللوحي والهاتف

بمجرد الانتهاء من هذا الصف الثاني ، تأكد من تعطيله للهاتف والكمبيوتر اللوحي أيضًا.

استنساخ صف ثلاثي الأعمدة (الكمبيوتر اللوحي والهاتف)

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

أضف خلفية متدرجة للصف

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

• اللون الأول: rgba (0،0،0،0.7)
• اللون الثاني: rgba (255 ، 255 ، 255 ، 0)
• نوع التدرج: خطي
• اتجاه التدرج: 90 درجة
• موقف البداية: 1٪
• موقف النهاية: 0٪

مساحة الصفوف

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

تعطيل على سطح المكتب

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

نتيجة

بعد اتباع جميع الخطوات الواردة في المنشور ، يجب أن تكون قادرًا على تحقيق النتيجة التالية على سطح المكتب:

والنتيجة التالية على الجهاز اللوحي والهاتف:

افكار اخيرة

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

تأكد من الاشتراك في النشرة الإخبارية عبر البريد الإلكتروني وقناة YouTube حتى لا يفوتك إعلان كبير أو نصيحة مفيدة أو Divi freebie!