قم بتنزيل قسم الجدول الزمني المجاني المصنوع من خيارات تحويل Divi

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

دعنا نذهب اليها!

معاينة

قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة سريعة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

قم بتنزيل مخطط قسم المخطط الزمني مجانًا

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

قم بتنزيل الملفات

تنزيل مجاني

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

تحميل

لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!

لنبدأ في إعادة التكوين!

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

إضافة قسم جديد

تباعد

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

• الحشوة العلوية: 12vw
• الحشو السفلي: 0vw

أضف الصف رقم 1

هيكل العمود

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

تحجيم

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

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• العرض: 100٪
• العرض الأقصى: 100٪

الرؤية

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

إضافة وحدة صورة

تحميل الرسم التوضيحي

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

تحجيم

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

• فرض عرض كامل: نعم

أضف الصف رقم 2

هيكل العمود

تابع بإضافة صف ثان إلى القسم ، باستخدام بنية العمود التالية:

تحجيم

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

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• العرض: 100٪
• العرض الأقصى: 100٪

تباعد

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

• الحشوة العلوية: 0px (سطح المكتب) ، 15vw (الكمبيوتر اللوحي والهاتف)
• الحشوة السفلية: 0 بكسل (سطح المكتب) ، 15 فولت (الكمبيوتر اللوحي والهاتف)

أضف الوحدة النمطية للدعاية إلى العمود 1

إضافة محتوى

حان الوقت لبدء إضافة الوحدات! أضف وحدة Blurb Module إلى العمود 1. أدخل بعض المحتوى الذي تختاره.

حدد أيقونة

تابع عن طريق تحديد رمز من اختيارك.

خلفية متدرجة

أضف خلفية متدرجة أيضًا.

• اللون 1: # a5c4ff
• اللون 2: #ffffff
• موقف البداية: 40٪
• موضع النهاية: 40٪

إعدادات الرمز

بعد ذلك ، انتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات الرمز.

• لون الأيقونة: #ffffff
• وضع الرمز: الأعلى
• استخدام حجم خط الأيقونة: نعم
• حجم خط الرمز: 5vw (سطح المكتب) ، 17vw (الجهاز اللوحي) ، 18vw (الهاتف)

إعدادات نص العنوان

انتقل إلى إعدادات نص العنوان وقم بتعديل الخيارات وفقًا لذلك:

• خط العنوان: Didact Gothic
• وزن خط العنوان: غامق
• محاذاة نص العنوان: الوسط
• حجم نص العنوان: 1.1vw (سطح المكتب) ، 2.7vw (جهاز لوحي) ، 4vw (هاتف)
• ارتفاع خط العنوان: 2.8em

إعدادات النص الأساسي

افعل نفس الشيء لإعدادات النص الأساسي.

• خط النص الأساسي: Open Sans
• محاذاة النص الأساسي: الوسط
• حجم نص الجسم: 0.7vw (سطح المكتب) ، 1.5vw (الجهاز اللوحي) ، 2.1vw (الهاتف)
• ارتفاع خط الجسم: 2em

تباعد

نضيف أيضًا بعض قيم الهوامش والحشو المخصصة والتي سنخصصها وفقًا لأحجام الشاشة المختلفة.

• الهامش الأيسر: 3vw
• الهامش الأيمن: 3vw
• الهامش السفلي: 5vw (جهاز لوحي) ، 7vw (هاتف)
• الحشوة العلوية: 2vw (سطح المكتب) ، 6vw (الجهاز اللوحي والهاتف)
• الحشو السفلي: 2vw (سطح المكتب) ، 6vw (الجهاز اللوحي والهاتف)
• الحشو الأيسر: 3vw (سطح المكتب) ، 9vw (الكمبيوتر اللوحي والهاتف)
• الحشو الأيمن: 3vw (سطح المكتب) ، 9vw (الجهاز اللوحي والهاتف)

الحدود

انتقل إلى إعدادات الحدود وأضف "20 بكسل" لكل زاوية من الزوايا.

مربع الظل

أخيرًا وليس آخرًا ، قم بإنشاء بعض العمق على الصفحة عن طريق إضافة ظل مربع دقيق إلى Blurb Module.

• مربع قوة طمس الظل: 80 بكسل
• لون الظل: rgba (0،0،0،0.1)

استنساخ وحدة Blurb ثلاث مرات ووضع التكرارات في الأعمدة المتبقية

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

تغيير خلفية التدرج لنسخ # 1

افتح أول نسخة مكررة (Blurb Module في العمود 2) وقم بتعديل اللون الأول لخلفية التدرج.

• اللون 1: # ffa5ae

تغيير خلفية التدرج لنسخ # 2

افعل نفس الشيء مع Blurb Module في العمود 3.

• اللون 1: # f7e3a0

تغيير خلفية التدرج للنسخ المكرر رقم 3

وقم بتعديل الخلفية المتدرجة لوحدة Blurb Module الأخيرة أيضًا.

• اللون 1: # caa5ff

أضف إعدادات التحويل إلى وحدات Blurb Modules

أضف Transform Translate إلى Blurb Module # 1

الآن بعد أن أصبح لدينا جميع عناصر التصميم التي نحتاجها ، يمكننا البدء في تغيير موضعها! للقيام بذلك ، سنستخدم خيار تحويل الترجمة. افتح الوحدة النمطية Blurb في العمود 1 وقم بتعديل القيم وفقًا لذلك:

• الجزء السفلي: 2vw (سطح المكتب) ، 0vw (الجهاز اللوحي والهاتف)
• اليمين: -106vw (سطح المكتب) ، 0vw (الجهاز اللوحي والهاتف)

أضف Transform Translate إلى Blurb Module # 2

انتقل إلى الوحدة النمطية الثانية Blurb Module وقم بتغيير قيم ترجمة التحويل وفقًا لذلك:

• أسفل: 16.6vw (سفلي) ، 0vw (كمبيوتر لوحي وهاتف)
• يمينًا: -78vw (يمين) ، 0vw (جهاز لوحي وهاتف)

أضف Transform Translate إلى Blurb Module # 3

افتح الوحدة النمطية Blurb في العمود 3 بعد ذلك ، واستخدم قيم ترجمة التحويل التالية:

• الجزء السفلي: 17vw (سطح المكتب) ، 0vw (الجهاز اللوحي والهاتف)
• اليمين: -46vw (سطح المكتب) ، 0vw (الجهاز اللوحي والهاتف)

أضف ترجمة التحويل إلى الوحدة النمطية رقم 4

افعل نفس الشيء مع الوحدة النمطية الأخيرة Blurb ، باستخدام القيم التالية:

• الجزء السفلي: -66vw (سطح المكتب) ، 0vw (الجهاز اللوحي والهاتف)
• اليمين: -24vw (سطح المكتب) ، 0vw (الجهاز اللوحي والهاتف)

أضف هامشًا سفليًا سلبيًا إلى الصف رقم 2

لن يؤدي استخدام خيار ترجمة التحويل إلى إزالة المساحة التي تشغلها وحدات Blurb النمطية في الصف في البداية. للتخلص من هذه المساحة ، يمكننا إضافة بعض الهامش السفلي السلبي إلى الصف وقد انتهينا!

• الهامش السفلي: -15vw (سطح المكتب) ، 0vw (الجهاز اللوحي والهاتف)

معاينة

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة.

سطح المكتب

متحرك

افكار اخيرة

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