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

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

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

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

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

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

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

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

هيا بنا نبدأ.

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

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

أولاً ، أضف قسمًا عاديًا بهيكل 1/2 1/2 (عمودين).

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

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

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

فيديو MP4 / URL: [أدخل عنوان URL للفيديو]
عنوان URL لتراكب الصور: [تحميل صورة مخصصة لمقطع الفيديو الخاص بك أو إنشاء صورة تلقائيًا من الفيديو]

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

لون أيقونة التشغيل: rgba (255،255،255،0.87)

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

بعد ذلك ، أضف وحدة Blurb Module في العمود الأيمن بجوار وحدة الفيديو التي أنشأتها للتو.

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

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

العنوان: [أدخل عنوان الفيديو]
المحتوى: [أدخل وصف الفيديو]
الرابط: [يمكنك إدخال عنوان url لصفحة أخرى إذا كنت تريد]
استخدام الأيقونة: نعم
الرمز: [رمز التحديد]

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

لون الأيقونة: # 666666
لون النص: فاتح
اتجاه النص: الوسط
خط الرأس: Roboto
حجم خط الرأس: 52 بكسل
تباعد حرف الرأس: 1 بكسل
خط النص الأساسي: Open Sans
حجم خط الجسم: 20 بكسل
لون النص الأساسي: #dddddd
المساحة المتروكة المخصصة على سطح المكتب: 5٪ أعلى (قد تحتاج إلى تعديل هذا بناءً على مقدار النص الموجود في وصفك)
حشوة مخصصة على الجهاز اللوحي والهاتف الذكي: 20 بكسل للأعلى ، 20 بكسل في الأسفل

خيارات متقدمة

الرسوم المتحركة للصورة / الأيقونة: من اليمين إلى اليسار (ستؤدي هذه الرسوم المتحركة جنبًا إلى جنب مع رمز السهم إلى جذب مزيد من الانتباه إلى الفيديو على اليسار.

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

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

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

صورة الخلفية: [أدخل صورة الخلفية (2000 × 2200)]

استخدام تأثير المنظر: نعم
طريقة المنظر: المنظر الحقيقي

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

الحشو المخصص: 0 بكسل أعلى ، 0 بكسل أسفل

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

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

العمود 2 لون الخلفية: rgba (0،0،0،0.69)

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

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

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

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

الآن عليك فقط تحديث محتوى وحدة الفيديو لتضمين عنوان URL الجديد للفيديو وصورة الغلاف الجديدة. بالنسبة إلى Blurb Module ، ستحتاج إلى تحديث الرأس والمحتوى الذي يتوافق مع الفيديو الخاص بك. وستحتاج أيضًا إلى ضبط أيقونة الدعاية الدعاية إلى سهم يشير إلى اليمين (إذا استخدمت نفس الرمز الذي استخدمته) وتبديل الرسوم المتحركة للصورة / الرمز إلى "من اليسار إلى اليمين".

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

العمود 1 لون الخلفية: rgba (0،0،0،0.69)
العمود 2 لون الخلفية: لا شيء

نحن نحقق بعض التقدم. لنرى الآن كيف يبدو أول صفين لدينا ...

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

في هذا المثال ، أضفت صفين آخرين ليصبح المجموع أربعة صفوف. تحقق من النتيجة النهائية.

إنشاء النسخة الخفيفة

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

بالنسبة لهذه التعديلات ، قد يكون استخدام عرض الإطار السلكي أسهل قليلاً.

تحديث إعدادات القسم على النحو التالي:

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

صورة الخلفية: [أدخل صورة خلفية فاتحة]

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

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

العمود 2 لون الخلفية: rgba (255،255،255،0.68)

قم بتحديث إعدادات الوحدة النمطية للصف الأول كما يلي:

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

لون الايقونة: # 333333
لون النص: غامق
لون نص الرأس: # 444444
خط الجسم: Roboto
لون النص الأساسي: # 666666

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

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

العمود 1 لون الخلفية: rgba (255،255،255،0.45)

استخدم خيارات النقر بزر الماوس الأيمن لنسخ تصميم وحدة blurb في الصف الأول ولصقه في وحدة blurb في الصف الثاني.

هذا كل شيء! تحقق من النتيجة النهائية.

مستجيب؟

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

قادم…

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

أتمنى أن تكون قد استمتعت بالمسلسل حتى الآن. أتطلع إلى الاستماع منك في التعليقات.

هتافات!