كيفية إنشاء تخطيط شبكة شهادة مع وحدة شهادة Divi

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

هيا بنا نبدأ!

معاينة

إليك نظرة على ما سنقوم به في هذا البرنامج التعليمي. أقوم بإنشاء قسم شهادة باستخدام أنماط التصميم من Print Shop Layout Pack المجانية المتوفرة داخل Divi.

نتائج تخطيط الشبكة التزكية

نتائج تخطيط الشهادة البديلة

إنشاء أول تخطيط للشبكة

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

قم بإنشاء صف

أولاً ، قم بإنشاء صف جديد وحدد تخطيطًا من 3 أعمدة .

بعد ذلك ، افتح إعدادات الصف بالنقر فوق رمز الترس الخاص به.

حدد علامة تبويب التصميم وقم بتمكين Use Custom Gutter Width واضبط Gutter Width على 1.

• استخدام العرض المخصص: نعم
• عرض الحضيض: 1

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

• الحشو: 0 بكسل أعلى وأسفل

أضف وحدة شهادة

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

إعدادات محتوى وحدة الشهادة

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

• المؤلف: اسم المؤلف
• المسمى الوظيفي: لقب الشخص
• الشركة: اسم الشركة
• محتوى الجسد: الشهادة
• الصورة: الصورة المميزة

إعدادات تصميم نموذج الشهادة

بعد ذلك ، حدد علامة تبويب التصميم.

رمز الاقتباس

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

• اللون: # fd335a
• لون الخلفية: #ffffff

صورة

بعد ذلك ، قم بالتمرير لأسفل إلى الصورة . اضبط عرض حدود الصورة على 4 بكسل وقم بتغيير لون الحدود إلى # 000645. سيتطابق الحد مع حد الوحدة لكل وحدة. سنقوم بتغييرها بشكل فردي.

• عرض حدود الصورة: 4 بكسل
• لون حدود الصورة: # 000645

نص أساسي

بعد ذلك ، قم بالتمرير لأسفل إلى Body Text واختر Roboto Mono. اترك باقي الإعدادات في إعداداتها الافتراضية.

• خط الجسم: روبوتو مونو

نص المؤلف

بعد ذلك ، قم بالتمرير لأسفل إلى نص المؤلف . قم بتغيير الخط إلى Oswald ، وحدد Semi Bold للوزن ، و TT للنمط ، وقم بتغيير اللون إلى # fd335a.

• الخط: أوزوالد
• النمط: شبه جريء
• النمط: TT
• لون النص: # fd335a

نص المركز

بعد ذلك ، قم بالتمرير إلى نص الموضع (المسمى الوظيفي) وقم بتغيير الخط إلى Roboto Mono. اترك باقي الإعدادات في إعداداتها الافتراضية.

• خط الموضع: Roboto Mono

نص الشركة

بعد ذلك ، قم بالتمرير لأسفل إلى نص الشركة واختر Roboto Mono للخط. اترك الإعدادات على الإعدادات الافتراضية.

• خط الشركة: Roboto Mono

حدود

أخيرًا ، قم بالتمرير لأسفل إلى Border . قم بتغيير العرض إلى 24 بكسل ولون الحدود إلى # 000645 لمطابقة حدود الصورة. أغلق إعدادات الوحدة. سيتغير لون الحد أيضًا لكل وحدة.

• العرض: 24 بكسل
• اللون: # 000645

قم بتكرار نموذج الشهادة

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

صمم وحدة الشهادة الثانية

افتح إعدادات وحدة الشهادة الثانية وقم بتغيير المحتوى.

صورة

بعد ذلك ، حدد علامة تبويب التصميم وانتقل لأسفل إلى الصورة . قم بتغيير لون الحدود إلى # acf8f5.

• لون حدود الصورة: # acf8f5

حدود

أخيرًا ، قم بالتمرير لأسفل إلى Border . قم بتغيير لون الحدود إلى # acf8f5 لمطابقة حدود الصورة. أغلق إعدادات الوحدة. أغلق إعدادات الوحدة.

• اللون: # acf8f5

صمم وحدة الشهادة الثالثة

افتح إعدادات وحدة الشهادة الثالثة وقم بتغيير المحتوى.

صورة

بعد ذلك ، انتقل إلى علامة تبويب التصميم ، وانتقل لأسفل إلى الصورة وقم بتغيير لون الحدود إلى # fccaa0.

• لون حدود الصورة: # fccaa0

حدود

أخيرًا ، قم بالتمرير لأسفل إلى Border and Border Color إلى # fccaa0 لمطابقة حدود الصورة. أغلق إعدادات الوحدة.

• اللون: # fccaa0

كرر الصف

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

نمط وحدة التزكية الرابعة

افتح إعدادات وحدة الشهادة الثانية وقم بتغيير المحتوى.

صورة

بعد ذلك ، قم بالتمرير لأسفل إلى الصورة وقم بتغيير لون الحدود إلى # 6eea9d.

• لون حدود الصورة: # 6eea9d

حدود

أخيرًا ، قم بالتمرير لأسفل إلى Border وقم بتغيير لون Border إلى # 6eea9d لمطابقة حدود الصورة. أغلق إعدادات الوحدة.

• اللون: # 6eea9d

تصميم وحدة الشهادة الخامسة

افتح إعدادات وحدة الشهادة الخامسة وأضف محتواها.

صورة

بعد ذلك ، قم بالتمرير لأسفل إلى الصورة وقم بتغيير لون الحدود إلى # fff67f.

• لون حدود الصورة: # fff67f

حدود

أخيرًا ، قم بالتمرير لأسفل إلى Border and Border Color إلى # fccaa0 لمطابقة حدود الصورة. أغلق إعدادات الوحدة.

• اللون: # fff67f

صمم وحدة الشهادة السادسة

أخيرًا ، افتح إعدادات وحدة الشهادة السادسة واستبدل محتوى الشهادة.

صورة

بعد ذلك ، قم بالتمرير لأسفل إلى Image وقم بتغيير لون الحدود إلى # 593a94.

• لون حدود الصورة: # 593a94

حدود

أخيرًا ، قم بالتمرير لأسفل إلى Border and Border Color إلى 593a94 # لمطابقة حدود الصورة. أغلق إعدادات الوحدة.

• اللون: # 593a94

تخطيط شهادة بديل

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

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

قم بإنشاء صفوف بديلة

أولاً ، أضف صفًا مكونًا من عمودين يحتوي على عمود 1/3 على اليسار وعمود 2/3 على اليمين.

بعد ذلك ، افتح إعدادات الصف ، وانتقل إلى علامة تبويب التصميم ، وانتقل لأسفل إلى Sizing ، وحدد Use Custom Gutter Width. قم بتغيير عرض الحضيض إلى 1.

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1

بعد ذلك ، قم بالتمرير إلى Spacing . أدخل 0 بكسل للحشوة العلوية والسفلية. أغلق إعدادات الصف.

• الحشو: 0 بكسل أعلى ، أسفل

بعد ذلك ، قم بتكرار الصف.

حدد خيارات تخطيط الصف الثاني واختر التخطيط مع 2/3 على اليسار و 1/3 على اليمين.

أضف أربع وحدات شهادة

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

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

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

• ارتفاع: 100٪

نتائج

نتائج تخطيط الشبكة التزكية

إليك نظرة على تخطيط الشبكة الخاص بنا. يعمل هذا بشكل رائع إذا كانت الشهادات بنفس الحجم.

نتائج تخطيط الشهادة البديلة

ها هو التصميم البديل. إنه مثالي للمحتوى بأحجام متعددة.

خواطر ختامية

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

نريد أن نسمع منك. هل أنشأت شبكة شهادات باستخدام الطريقة التي ناقشناها هنا؟ أخبرنا عن تجربتك في التعليقات.