Divi: كيفية إنشاء قسم الشهادات في شكل شبكة

هل ترغب في إنشاء قسم الشهادات على شكل شبكة على صفحة الويب الخاصة بك مع وحدة شهادة من Divi ?

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

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

دعونا نبدأ!

مسح

فيما يلي نظرة عامة على ما سنفعله في هذا البرنامج التعليمي.

تخطيط الشبكة

ترتيب بديل

تصميم أول تخطيط مع Divi

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

قم بإنشاء خط

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

ثم افتح ملف معلمات الخط من خلال النقر على رمز الترس الخاص به.

حدد علامة التبويب تصميم وتنشيط استخدم تخصيص Gutter Witdh وضبطه على 1.

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

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

• المساحة المتروكة (أعلى وأسفل): 0 بكسل

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

ثم أضف ملف وحدة الشهادة في العمود الأيسر.

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

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

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

معلمات تصميم الوحدة النمطية

ثم حدد علامة التبويب تصميم.

رمز الاقتباس

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

• لون رمز الاقتباس: # fd335a
• لون خلفية رمز الاقتباس: #ffffff

صورة

ثم قم بالتمرير لأسفل إلى صورة وقم بتغيير الإعدادات التالية:

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

نص الجسم

ثم قم بالتمرير لأسفل إلى نص أساسي وتغيير الخط

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

نص المؤلف

ثم قم بالتمرير لأسفل إلى نص المؤلف.

• خط المؤلف: أوزوالد
• وزن الخط: شبه عريض
• نمط الخط: TT
• لون النص: # fd335a

نص المركز

ثم قم بالتمرير لأسفل إلى نص المركز (المسمى الوظيفي) وتغيير الخط.

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

نص الشركة

ثم قم بالتمرير لأسفل إلى نص الشركة وتغيير الخط أيضًا.

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

الحدود

أخيرًا ، قم بالتمرير لأسفل إلى الحدود وتعديل الحدود كما يلي:

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

قم بنسخ وحدة التزكية

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

تخصيص وحدة التزكية الثانية

افتحها إعدادات من الوحدة التزكية الثانية وتحرير المحتوى.

صورة

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

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

الحدود

أخيرًا ، قم بالتمرير لأسفل إلى الحدود وتغيير اللون.

• لون الحدود: # acf8f5

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

افتحها إعدادات من الوحدة التزكية الثالثة وتحرير المحتوى.

صورة

ثم انتقل إلى علامة التبويب تصميم، انتقل إلى صورة وتغيير لون الحدود.

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

الحدود

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

• لون الحدود: # fccaa0

سطر مكرر

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

تخصيص وحدة التزكية الرابعة

افتحها إعدادات من الوحدة التزكية الثانية وتحرير المحتوى.

صورة

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

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

الحدود

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

• لون الحدود: # 6eea9d

تخصيص وحدة التزكية الخامسة

افتحها إعدادات شهادة التزكية الخامسة وتعديل محتواها.

صورة

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

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

الحدود

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

• لون الحدود: # fff67f

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

أخيرًا ، افتح ملف إعدادات من وحدة التزكية السادسة واستبدال المحتويات.

صورة

ثم قم بالتمرير لأسفل إلى صورة وتغيير لون الحدود إلى # 593a94.

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

الحدود

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

• لون الحدود: # 593a94

نتيجة

ها هي النتيجة التي حصلنا عليها حتى الآن.

تصميم التخطيط الثاني مع Divi

شبكة الشهادات التي أنشأناها تعمل بشكل رائع إذا كانت الشهادات بنفس الحجم تقريبًا. 

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

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

قم بإنشاء الخطوط البديلة

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

ثم افتح إعدادات الخط ، وانتقل إلى علامة التبويب تصميم، انتقل إلى التحجيم وحدد استخدم عرض مزراب مخصص. قم بتغيير عرض الحضيض إلى 1.

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

ثم قم بالتمرير لأسفل إلى التباعد .

• المساحة المتروكة (أعلى وأسفل): 0 بكسل

ثم، مكرر الخط.

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

أضف أربع وحدات نموذجية

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

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

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

كرر هذا لكل وحدة .

• ارتفاع: 100٪

النتائج النهائية

تخطيط الشبكة

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

ترتيب بديل

هنا هو التصميم البديل. إنه مثالي للشهادات ذات الأحجام المختلفة.

تحميل DIVI Now !!!

وفي الختام

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

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

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

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

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

ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.

...