ديفي: أفضل موضوع وورد في كل العصور!

أكثر تنزيلات 901.000، Divi هو موضوع WordPress الأكثر شعبية في العالم. إنها كاملة وسهلة الاستخدام وتأتي مع أكثر من 62 قوالب مجانية.

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

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

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

دعونا نبدأ!

مسح

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

تخطيط الشبكة

وحدة شهادة Divi في شكل شبكة

ترتيب بديل

وحدة شهادة Divi في شكل شبكة

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

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

قم بإنشاء خط

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

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

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

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

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

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

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

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

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

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

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

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

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

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

رمز الاقتباس

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

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

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

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

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

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

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

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

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

  • خط الموضع: Roboto Mono
نص الشركة

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

بسهولة إنشاء موقع الويب الخاص بك مع Elementor

يتيح لك Elementor إنشاء ملفات بسهولة ومجانا أي موقع ويب أو تصميم مدونة بمظهر احترافي. توقف عن دفع الكثير مقابل موقع ويب يمكنك القيام به بنفسك.

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

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

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

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

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

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

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

صورة

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

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

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

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

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

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

صورة

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

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

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

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

سطر مكرر

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

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

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

صورة

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

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

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

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

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

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

صورة

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

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

هل تريد بيع منتجاتك على الإنترنت؟

قم بتنزيل WooCommerce مجانًا ، أفضل المكونات الإضافية للتجارة الإلكترونية لبيع منتجاتك المادية والرقمية على WordPress وإنشاء متجرك عبر الإنترنت بسهولة. مثالي للمبتدئين.

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

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

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

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

صورة

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

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

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

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

نتيجة

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

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

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

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

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

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

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

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

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

  • استخدام عرض مزراب مخصص: نعم
  • عرض الحضيض: 1
قم بإنشاء الخطوط البديلة

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

  • المساحة المتروكة (أعلى وأسفل): 0 بكسل
قم بإنشاء الخطوط البديلة

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

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

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

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

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

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

وحدة شهادة Divi في شكل شبكة

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

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

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

  • ارتفاع: 100٪
وحدة شهادة Divi في شكل شبكة

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

تخطيط الشبكة

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

وحدة شهادة Divi في شكل شبكة

ترتيب بديل

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

وحدة شهادة Divi في شكل شبكة

تحميل DIVI Now !!!

في الختام

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

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

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

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

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

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

...

%d المدونين مثل هذه الصفحة: