هل ترغب في إنشاء قسم الشهادات على شكل شبكة على صفحتك على الويب باستخدام وحدة Divi Testimonial؟
تخطيطات الشبكة مثالية للمحتوى الذي يتطلب تجميعًا مترابطًا. شهادات العملاء مثال رائع على ذلك. في 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 التالية. إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.
يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى المزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت.
لا تتردد في الاطلاع أيضاً على دليلنا حول وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...