كيفية إنشاء تخطيطات شبكة مذهلة باستخدام وحدة فيديو Divi (الجزء 4)

مرحبًا بك في نشر 4 من 5 في مسلسلاتنا المصغرة كيفية إنشاء تخطيطات شبكة مذهلة باستخدام وحدة فيديو Divi. في هذه السلسلة ، سنطلعك على كيفية إنشاء تخطيطات شبكة مذهلة من البداية باستخدام Divi Visual Builder. وإذا كنت قلقًا بشأن كون هذا الأمر معقدًا للغاية ، ففكر مرة أخرى! يمكن إنشاء كل هذه التخطيطات وتصميمها باستخدام Visual Builder دون الحاجة إلى تعليمات برمجية إضافية.

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

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

هذا هو الشكل الذي ستبدو عليه النتيجة النهائية

المفهوم والإلهام

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

هيا بنا نبدأ.

تنفيذ التصميم مع Divi

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

أولاً ، أضف قسمًا عاديًا بهيكل كامل العرض (عمود واحد).

بعد ذلك ، أضف وحدة نصية إلى العمود. سيكون هذا بمثابة عنوان أو عنوان لقسم الصفحة.

قم بتحديث إعدادات النص كما يلي:

خيارات المحتوى
المحتوى: [أدخل نصًا للعنوان]

خيارات التصميم

لون النص: فاتح
خط النص: Arimo
حجم خط النص: 56 بكسل
تباعد حروف النص: 1 بكسل
ارتفاع خط النص: 1em

احفظ التغييرات

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

ألوان تدرج الخلفية: # 121212 ، #ffffff
نوع التدرج: خطي
اتجاه التدرج: 198 درجة
موقف البداية: 45٪
موضع النهاية: 45٪

بعد ذلك ، قم بتحديث إعدادات الصف للصف الذي أضفته للتو كما يلي:

خيارات التصميم

اجعل هذا الصف بعرض كامل: نعم
استخدام عرض مزراب مخصص: نعم
عرض المزراب: 4
معادلة ارتفاعات العمود: نعم
حشوة مخصصة: 1٪ أعلى ، 5٪ يمين ، 5٪ أسفل ، 5٪ يسار

احفظ التغييرات

أضف الآن صفًا آخر بهيكل ⅔ ⅓ (عمودان) مباشرة أسفل الصف الذي أنشأته للتو.

بعد ذلك ، أضف وحدة فيديو إلى العمود الأيسر.

قم بتحديث إعدادات الفيديو كما يلي:

خيارات المحتوى

فيديو MP4 / URL: [أدخل عنوان URL للفيديو الخاص بك]
عنوان URL لتراكب الصورة: [أدخل عنوان URL للصورة المتراكبة]

احفظ التغييرات

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

قم بتحديث محتوى مقاطع الفيديو لتضمين عناوين URL الصحيحة وصور الغلاف.

انطلق وأضف وحدة Blurb Module أسفل وحدتي الفيديو في العمود الأيمن. يمكن أن يكون هذا بمثابة وصف لمقاطع الفيديو داخل هذه الشبكة.

قم بتحديث إعدادات Blurb كما يلي:

خيارات المحتوى

العنوان: [أدخل العنوان]
المحتوى: [أدخل المحتوى أو الوصف]

خيارات التصميم

لون النص: فاتح

احفظ التغييرات

الآن قم بتحرير إعدادات الصف للصف الذي يحتوي على مقاطع الفيديو التي أنشأتها للتو على النحو التالي:

خيارات المحتوى

ألوان تدرج الخلفية: # 4999c1 ، # 121212
نوع التدرج: خطي
اتجاه التدرج: 198 درجة
موقف البداية: 45٪
موضع النهاية: 45٪

خيارات التصميم

اجعل هذا الصف بعرض كامل: نعم
استخدام عرض مزراب مخصص: نعم
عرض المزراب: 4
معادلة ارتفاعات العمود: نعم
حشوة مخصصة: 5٪ أعلى ، 5٪ يمين ، 5٪ أسفل ، 5٪ يسار

رائعة! لقد انتهيت من القسم الأول. نحن على وشك الإنتهاء. تحقق من التقدم حتى الآن.

لإنشاء القسم التالي ، قم بتكرار القسم بأكمله الذي قمت بإنشائه للتو بالنقر فوق زر القسم المكرر ..

قم بتحديث إعدادات القسم الجديد كما يلي:

خيارات المحتوى

ألوان التدرج في الخلفية: #ffffff ، # 121212 (هذه الألوان بالترتيب المعاكس للقسم الأول)

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

خيارات التصميم

لون نص النص: # 333333

احفظ التغييرات

لإكمال هذا القسم ، قم بتحديث إعدادات الصف التي تحتوي على مقاطع الفيديو الخاصة بك بما يلي:

خيارات المحتوى

ألوان التدرج في الخلفية: # 121212 ، # 4999c1 (بشكل أساسي تقوم بتبديل ترتيب الألوان بحيث تكون في الترتيب المعاكس للقسم الأول)

احفظ التغييرات

الآن دعنا نتحقق من النتيجة بعد إضافة القسم الثاني ...

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

هذا ما سيبدو عليه بعد إضافة القسم الثالث:

هذا كل شيء! انتهى كل شيء.

مستجيب؟

يبدو هذا التصميم في الواقع أفضل على الهاتف المحمول دون أي تعديلات. تحقق من ذلك!

مزيد من التخصيص

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

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

يمكنك أيضًا إضافة Video Slider Module إلى الشبكة الموجودة في العمود الأيسر.

قادم…

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

حتى ذلك الحين ، أتطلع إلى الاستماع منك في التعليقات.

يتمتع!