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

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

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

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

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

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

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

إلى جانب التصميم ، أردت استكشاف إمكانات الخلفية شبه الشفافة لـ Divi أكثر قليلاً لإنشاء شيء فريد.

هيا بنا نبدأ.

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

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

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

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

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

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

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

ثم أضف وحدة Divider مباشرةً أسفل وحدة الفيديو.

في إعدادات Divider ، أسفل ملف ، اضبط ارتفاع الحاجز على 20.

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

أولاً ، دعنا نكرر وحدة الفيديو التي أنشأتها للتو وسحبها أسفل وحدة التقسيم في العمود الأول.

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

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

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

لون الخلفية: # 333333

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

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

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

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

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

ألوان تدرج الخلفية: rgba (255،255،255،0.58) و # b684e8
اتجاه التدرج: 360 درجة
العمود 1 لون الخلفية: rgba (0،0،0،0.69)
العمود 2 لون الخلفية: rgba (255،255،255،0.45)
العمود 1 لون الخلفية: rgba (0،0،0،0.85)

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

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

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

حان الوقت الآن لإضافة الصف الثاني. استمر وأضف صف هيكل آخر 1/4 1/2 1/4 (3 أعمدة) أسفل الصف الأول.

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

الآن ، بالنسبة لإعدادات صفك ، كل ما تحتاج إلى تحديثه هو خيارات المحتوى على النحو التالي:

تدرج الخلفية: لا شيء (امسح الذي تم نسخه)
العمود 1 لون الخلفية: rgba (0،0،0،0.69)
العمود 2 لون الخلفية: rgba (0،0،0،0.0) - هذا هو نفسه بلا أو شفاف
العمود 3 لون الخلفية: rgba (0،0،0،0.35)

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

بالنسبة للعمود الأوسط ، أضف وحدة blurb وقم بتحديث الإعدادات على النحو التالي:

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

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

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

لون النص: فاتح
اتجاه النص: الوسط
خط الرأس: PT Sans
حجم خط الرأس: 52 بكسل
تباعد حرف الرأس: 1 بكسل
خط الجسم: PT Sans
حجم خط الجسم: 20 بكسل

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

استمر وأضف صف هيكل 1/4 1/4 1/4 1/4 (4 أعمدة) أسفل الصف السابق.

كما فعلت من قبل ، انسخ تصميم الصف السابق والصقه في الصف الحالي لمنحك بداية بسيطة في التصميم.

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

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

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

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

الحشو المخصص للعمود 4: 20 بكسل 20 بكسل 20 بكسل 20 بكسل

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

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

تحقق من تخطيط الشبكة الجديد ...

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

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

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

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

لون الخلفية: rgba (0،0،0،0.12)

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

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

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

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

لون النص: غامق

هذا سيفعل ذلك! تحقق من النسخة الخفيفة.

يمكنك تغيير التصميم بسهولة باستخدام خيارات خلفية القسم

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

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

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

قادم…

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

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

يتمتع!