5 طرق رائعة يمكنك من خلالها تصميم وحدة شهادة ديفي
نشرت: 2019-01-02الشيء الوحيد الذي يبحث عنه الزوار دائمًا على موقع الويب هو الشهادات. إنها تمثل المصداقية وتؤثر على العملاء المحتملين لعملية اتخاذ القرار أو العملاء المحتملين عند زيارة موقع الويب الخاص بك. إلى جانب التأكد من أن لديك شهادات قوية لمشاركتها ، فإن جعلها جذابة بصريًا يلعب دورًا مهمًا أيضًا. في هذا المنشور ، سنعرض لك 5 طرق رائعة يمكنك من خلالها تصميم وحدة Divi Testimonial أثناء استخدام الخيارات المضمنة فقط.
دعنا نذهب اليها!
معاينة
قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة على النتيجة النهائية على أحجام الشاشات المختلفة.
سطح المكتب
متحرك
أعد إنشاء المثال رقم 1
اشترك في قناتنا على اليوتيوب
إضافة قسم جديد
لنبدأ بالمثال الأول! قم بإنشاء صفحة جديدة وإضافة قسم عادي.
أضف صفًا جديدًا
هيكل العمود
تابع بإضافة صف جديد باستخدام بنية العمود التالية:
تحجيم
بدون إضافة أي وحدات نمطية حتى الآن ، افتح إعدادات الصف وقم بإجراء بعض التغييرات على إعدادات التحجيم.
- جعل هذا الصف بعرض كامل: نعم
- استخدام عرض مزراب مخصص: نعم
- عرض الحضيض: 1
أضف وحدة الصورة النمطية إلى العمود 1
تحميل الصور
حان الوقت لبدء إضافة الوحدات! الوحدة الأولى التي سنحتاجها هي وحدة صورة في العمود 1. انطلق وقم بتحميل صورة مربعة من اختيارك.
المرشحات
بعد ذلك ، انتقل إلى إعدادات المرشحات والعب مع التأثيرات المختلفة.
- التشبع: 40٪
- التباين: 126٪
أضف وحدة الزر إلى العمود 1
أضف نسخة
الوحدة الثانية والأخيرة التي سنحتاجها في العمود 1 هي وحدة الأزرار. أضف نسخة من الاختيار.
إعدادات الزر
بعد ذلك ، انتقل إلى إعدادات الزر وقم بإجراء بعض التغييرات على مظهر الزر.
- استخدام الأنماط المخصصة للزر: نعم
- حجم نص الزر: 14 بكسل
- اللون 1: # 5400ff
- اللون 2: # 00fff6
- اتجاه التدرج: 100 درجة
- عرض حد الزر: 0 بكسل
- وزن الخط: عريض للغاية
- نمط الخط: أحرف كبيرة
تباعد
أضف بعض قيم التباعد المخصصة أيضًا.
- الحشوة العلوية: 10 بكسل
- الحشو السفلي: 10 بكسل
- الحشوة اليسرى: 30 بكسل
- الحشو الأيمن: 30 بكسل
مربع الظل
وانتهي بظل الصندوق الخفيف.
- مربع قوة طمس الظل: 80 بكسل
- لون الظل: rgba (0،0،0،0.3)
أضف وحدة الشهادة إلى العمود 2
إضافة محتوى
في العمود الثاني ، الوحدة الوحيدة التي سنحتاجها هي وحدة شهادة. أضف بعض المحتوى إلى الحقول المختلفة ومربع المحتوى.
لون الخلفية
بعد ذلك ، أضف لون خلفية شفافًا قليلاً.
- لون الخلفية: rgba (255،255،255،0.96)
إعدادات رمز الاقتباس
قم بتغيير إعدادات رمز الاقتباس أيضًا.
- لون رمز الاقتباس: # 0c0c0c
- لون خلفية رمز الاقتباس: rgba (245،245،245،0)
إعدادات النص الأساسي
بعد ذلك ، قم بتعديل إعدادات النص الأساسي.
- خط الجسم: Verdana
- ارتفاع خط الجسم: 1.7em
تباعد
تابع عن طريق إضافة قيم مخصصة مختلفة للهامش والحشو في إعدادات التباعد.
- الهامش العلوي: 15vw (سطح المكتب والكمبيوتر اللوحي) ، 0vw (الهاتف)
- الهامش السفلي: 50 بكسل (الجهاز اللوحي والهاتف)
- الهامش الأيسر: -10vw (سطح المكتب والكمبيوتر اللوحي) ، 0vw (الهاتف)
- الهامش الأيمن: 5vw
- الحشوة العلوية: 70 بكسل
- الحشو السفلي: 70 بكسل
- الحشو الأيسر: 50 بكسل
- الحشوة اليمنى: 50 بكسل
الحدود
أضف حدًا أيسر أيضًا.
- عرض الحد الأيسر: 7 بكسل
- لون الحد الأيسر: # 5400ff
مربع الظل
أخيرًا ، أضف ظل مربع دقيقًا لتشكيل وحدة Testimonial Module.
- مربع قوة طمس الظل: 80 بكسل
- قوة انتشار الظل المربع: -10 بكسل
- لون الظل: rgba (0،0،0،0.49)
استنساخ كلا الوحدتين ووضع التكرارات في العمود 3 و 4
بمجرد الانتهاء من تعديل الوحدات في العمود 1 و 2 ، يمكنك استنساخ الوحدات ووضع التكرارات في العمودين المتبقيين.
تغيير الصورة
لا تنس تغيير صورة شهادتك الثانية.
تغيير خلفية زر التدرج
تغيير خلفية زر التدرج كذلك.
- اللون 1: # ff001d
- اللون 2: # 3700ff
- اتجاه التدرج: 100 درجة
تغيير لون حدود الشهادة
وتطابق لون الحدود مع خلفية تدرج الزر الجديد.
- لون الحد الأيسر: # ff001d
أعد إنشاء المثال رقم 2
إضافة قسم جديد
إلى المثال الثاني! أضف قسمًا عاديًا جديدًا إلى صفحتك.
أضف صفًا جديدًا
هيكل العمود
بدون إجراء أي تغييرات على القسم ، أضف صفًا جديدًا باستخدام بنية العمود التالية:
تحجيم
استمر بفتح إعدادات الصف وإجراء بعض التغييرات على إعدادات التحجيم.
- جعل هذا الصف بعرض كامل: نعم
- استخدام عرض مزراب مخصص: نعم
- عرض الحضيض: 1
تباعد
بعد ذلك ، أضف بعض قيم المساحة المتروكة المخصصة إلى الصف والأعمدة.
- الحشو الأيسر: 200 بكسل (سطح المكتب) ، 30 بكسل (جهاز لوحي) ، 25 بكسل (هاتف)
- الحشو الأيمن: 200 بكسل (سطح المكتب) ، 30 بكسل (جهاز لوحي) ، 25 بكسل (هاتف)
- الحشوة اليسرى للعمود 1: 5 بكسل (سطح المكتب) ، 0 بكسل (الكمبيوتر اللوحي والهاتف)
- الحشوة اليمنى للعمود 1: 2.5 بكسل (سطح المكتب) ، 0 بكسل (الكمبيوتر اللوحي والهاتف)
- الحشوة اليسرى للعمود 2: 2.5 بكسل (سطح المكتب) ، 0 بكسل (الكمبيوتر اللوحي والهاتف)
- الحشوة اليمنى للعمود 2: 2.5 بكسل (سطح المكتب) ، 0 بكسل (الكمبيوتر اللوحي والهاتف)
- الحشوة اليسرى للعمود 3: 2.5 بكسل (سطح المكتب) ، 0 بكسل (الكمبيوتر اللوحي والهاتف)
- الحشوة اليمنى للعمود 3: 5 بكسل (سطح المكتب) ، 0 بكسل (الكمبيوتر اللوحي والهاتف)
أضف وحدة الفيديو إلى العمود 1
رابط الفيديو
الوحدة الأولى التي سنحتاجها في العمود 1 هي وحدة فيديو. اربط هذا الفيديو بشهادتك.
تراكب الصورة
أضف صورة تراكب كذلك.
أضف وحدة الشهادة إلى العمود 1
إضافة محتوى
الوحدة الثانية والأخيرة المطلوبة في العمود 1 هي نموذج شهادة. ابدأ بإضافة تفاصيل الشهادة.
تعطيل رمز الاقتباس
ثم قم بتعطيل رمز الاقتباس في إعدادات العناصر.
- إظهار رمز الاقتباس:
لون الخلفية
أضف خلفية بيضاء بعد ذلك.
- لون الخلفية: #ffffff
إعدادات النص الأساسي
قم بتعديل إعدادات النص الأساسي أيضًا.
- لون النص الأساسي: # 000000
- تباعد نص الرسالة: -0.5 بكسل
- ارتفاع خط الجسم: 1.7em
تباعد
وأضف بعض قيم الهوامش والحشو المخصصة في إعدادات التباعد.
- الهامش السفلي: 30 بكسل (الجهاز اللوحي والهاتف)
- الحشوة العلوية: 50 بكسل
- الحشو السفلي: 50 بكسل
- الحشوة اليسرى: 80 بكسل
- الحشو الأيمن: 80 بكسل
الحدود
نعطي أيضًا الوحدة النمطية السفلية اليسرى واليمنى الزوايا الدائرية "30 بكسل".
مربع الظل
وأخيرًا ، لخلق بعض العمق ، فإننا نعطي وحدة الشهادات ظل مربع دقيق.
- مربع قوة طمس الظل: 80 بكسل
- قوة انتشار الظل المربع: -10 بكسل
- لون الظل: rgba (0،0،0،0.3)
استنساخ الوحدات النمطية ثلاث مرات ووضع التكرارات في الأعمدة المتبقية
بمجرد الانتهاء من تعديل كلتا الوحدتين في العمود 1 ، قم بنسخهما مرتين ووضع التكرارات في العمودين المتبقيين.
تغيير روابط الفيديو والمحتوى وتراكبات الصور
لا تنس تغيير رابط الفيديو والمحتوى وتراكبات الصور لشهاداتك الجديدة.
أعد إنشاء المثال رقم 3
إضافة قسم جديد
إلى المثال الثالث! أضف قسمًا عاديًا جديدًا إلى صفحتك.
أضف صفًا جديدًا
هيكل العمود
تابع بإضافة صف جديد باستخدام بنية العمود التالية:
لون خلفية العمود 1
بعد ذلك ، انتقل إلى إعدادات الخلفية وأضف لونًا للخلفية إلى العمود الأول.
- لون خلفية العمود 1: # f9f9f9
لون خلفية العمود 2
سيحتاج العمود الثاني إلى خلفية بيضاء اللون.
- لون خلفية العمود 2: #ffffff
تحجيم
بعد ذلك ، انتقل إلى إعدادات التحجيم وقم بإزالة عرض الحضيض.
- استخدام عرض مزراب مخصص: نعم
- عرض الحضيض: 1
تباعد
أضف بعض قيم التباعد المخصصة بعد ذلك.
- الحشوة العلوية: 0 بكسل
- الحشو السفلي: 0 بكسل
- الحشوة اليسرى: 0 بكسل
- الحشوة اليمنى: 0 بكسل
- الحشوة العلوية للعمود 1: 100 بكسل
- الحشوة السفلية للعمود 1: 100 بكسل
- العمود 1 الحشوة اليسرى: 50 بكسل
- الحشوة اليمنى للعمود 1: 50 بكسل
- الحشوة العلوية للعمود 2: 100 بكسل
- الحشوة السفلية للعمود 2: 100 بكسل
- الحشوة اليسرى للعمود 2: 50 بكسل
- الحشوة اليمنى للعمود 2: 50 بكسل
الحدود
وأعط كل واحد من الحدود "20 بكسل".
مربع الظل
أخيرًا وليس آخرًا ، امنح صفك ظل مربع.
- مربع قوة طمس الظل: 80 بكسل
أضف وحدة الشهادة إلى العمود 1
إضافة محتوى
حان الوقت لبدء إضافة الوحدات! الوحدة الأولى التي سنحتاجها في العمود 1 هي نموذج شهادة. أضف المحتوى.
تحميل الصور
تابع عن طريق تحميل صورة في إعدادات الصورة.
تعطيل رمز الاقتباس
بعد ذلك ، قم بتعطيل رمز الاقتباس.
- إظهار رمز الاقتباس:
تعطيل لون الخلفية
قم بتعطيل لون الخلفية أيضًا.
- استخدام لون الخلفية: لا
إعدادات النص الأساسي
تابع بالانتقال إلى علامة تبويب التصميم وقم بإجراء بعض التغييرات على إعدادات النص الأساسي.
- خط الجسم: Abril Fatface
- لون النص الأساسي: # 000000
- حجم النص الأساسي: 20 بكسل
أضف وحدة نصية إلى العمود 1
إضافة محتوى
الوحدة الثانية التي سنحتاجها في العمود 1 هي وحدة نصية. أضف نسخة الشهادة إلى مربع المحتوى.
تباعد
بعد ذلك ، انتقل إلى علامة تبويب التصميم وأضف بعض الهامش العلوي والسفلي المخصص.
- الهامش الأعلى: 50 بكسل
- الهامش السفلي: 50 بكسل
أضف وحدة الصورة النمطية إلى العمود 1
تحميل شعار الشركة
الوحدة الثالثة والأخيرة التي سنحتاجها في العمود الأول هي وحدة صورة. يمكنك استخدام هذه الوحدة لإضافة شعار الشركة المتعلق بالشهادة.
استنساخ جميع الوحدات ووضع التكرارات في العمود 2
بمجرد الانتهاء من تعديل جميع الوحدات في العمود 1 ، يمكنك المضي قدمًا واستنساخها. بمجرد القيام بذلك ، ضع التكرارات في العمود الثاني.
تغيير صورة الشهادة ونسخها
تأكد من تغيير محتوى الشهادة مع الصور.
أعد إنشاء المثال رقم 4
إضافة قسم جديد
إلى المثال الرابع! أضف قسمًا جديدًا إلى صفحتك.
أضف صفًا جديدًا
هيكل العمود
تابع عن طريق إضافة صف جديد إلى القسم الخاص بك باستخدام بنية العمود التالية:
العمود 1 صورة الخلفية
افتح إعدادات الصف وأضف صورة خلفية إلى العمود الأول.
- تكرار صورة الخلفية للعمود 1: لا يوجد تكرار
العمود 3 صورة الخلفية
افعل الشيء نفسه بالنسبة للعمود الثالث.
- تكرار صورة الخلفية للعمود 3: لا يوجد تكرار
تحجيم
بعد ذلك ، انتقل إلى إعدادات التحجيم وقم بإجراء بعض التغييرات.
- جعل هذا الصف بعرض كامل: نعم
- استخدام عرض مزراب مخصص: نعم
- عرض الحضيض: 1
- معادلة ارتفاعات العمود: نعم
تباعد
قم بإزالة المساحة المتروكة العلوية والسفلية الافتراضية بعد ذلك.
- الحشوة العلوية: 0 بكسل
- الحشو السفلي: 0 بكسل
أضف وحدة الشهادة إلى العمود 1
إضافة محتوى
تابع بإضافة نموذج شهادة إلى العمود الأول. بمجرد القيام بذلك ، أضف تفاصيل الشهادة.
خلفية متدرجة
امنح الوحدة خلفية متدرجة أيضًا.
- اللون 1: # 8b32ff
- اللون 2: # ff35ae
- اتجاه التدرج: 120 درجة
إعدادات رمز الاقتباس
بعد ذلك ، قم بإجراء بعض التغييرات على إعدادات الرمز.
- لون رمز الاقتباس: # 000000
- لون خلفية رمز الاقتباس: #ffffff
إعدادات النص
وتغيير لون النص في إعدادات النص.
- لون النص: فاتح
تباعد
لإعطاء الوحدة شكلًا مربعًا ، سنضيف بعض الحشو المخصص في إعدادات التباعد.
- الحشوة العلوية: 100 بكسل
- الحشو السفلي: 100 بكسل
- الحشوة اليسرى: 100 بكسل
- الحشوة اليمنى: 100 بكسل
مربع الظل
ستحتاج أيضًا إلى إضافة بعض العمق إلى الشهادة باستخدام ظل مربع دقيق.
- مربع قوة طمس الظل: 80 بكسل
- قوة انتشار الظل المربع: -10 بكسل
- لون الظل: # ff35ae
عامل التصفية الافتراضي
الفكرة من وراء هذه الشهادة هي أنه بمجرد أن تحوم فوقها ، تختفي الشهادة وتظهر الصورة. لتحقيق هذا التأثير ، سنستخدم مرشح العتامة في إعدادات المرشحات. تأكد من أن التعتيم الافتراضي هو 100٪.
- العتامة: 100٪
مرشح التحويم
وإزالة كل التعتيم على تحوم.
- العتامة: 0٪
وحدة استنساخ الشهادة في العمود 3
بمجرد الانتهاء من تعديل وحدة الشهادة في العمود 1 ، قم بنسخها ووضع النسخة المكررة في العمود الثالث.
تغيير خلفية التدرج
قم بتغيير الخلفية المتدرجة للنسخة التالية.
- اللون 1: # 32b0ff
- اللون 2: # 89009e
- اتجاه التدرج: 120 درجة
صف استنساخ
واستنساخ الصف بأكمله.
إزالة خلفية الشهادة المتدرجة وتغيير لون الخلفية
الشيء التالي الذي ستحتاج إلى القيام به هو إزالة الخلفية المتدرجة لوحدات الشهادة واستخدام لون الخلفية الأبيض بدلاً من ذلك.
- لون الخلفية: #ffffff
تغيير إعدادات نص الشهادة
بمجرد إزالة الخلفية المتدرجة ، يمكنك تغيير لون النص في إعدادات النص.
- لون النص: غامق
أعد إنشاء المثال رقم 5
إضافة قسم جديد
إلى المثال التالي والأخير من هذا البرنامج التعليمي! أضف قسمًا عاديًا جديدًا إلى صفحتك.
لون الخلفية
تغيير لون خلفية القسم.
- لون الخلفية: #eded
أضف صفًا جديدًا
هيكل العمود
بعد ذلك ، أضف صفًا جديدًا باستخدام بنية العمود التالية:
تحجيم
قم بإجراء بعض التغييرات على إعدادات التحجيم أيضًا.
- جعل هذا الصف بعرض كامل: نعم
- استخدام عرض مزراب مخصص: نعم
- عرض المزراب: 2
أضف وحدة نصية إلى العمود 1
إضافة محتوى
تابع عن طريق إضافة وحدة نصية إلى العمود الأول. أضف نسخة الشهادة إلى مربع المحتوى.
لون الخلفية
وتغيير لون خلفية الوحدة.
- لون الخلفية: #ffffff
إعدادات النص
بعد ذلك ، انتقل إلى علامة تبويب التصميم وقم بتغيير اتجاه النص في إعدادات النص.
- اتجاه النص: الوسط
تباعد
أضف بعض قيم الهامش المخصصة أيضًا.
- الهامش الأيسر: 50 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 20 بكسل (الهاتف)
- الهامش الأيمن: 50 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 20 بكسل (الهاتف)
أضف وحدة الشهادة إلى العمود 1
إضافة محتوى
أسفل وحدة النص مباشرةً ، يمكنك المضي قدمًا وإضافة وحدة شهادة. املأ اسم المؤلف والمسمى الوظيفي واسم الشركة.
تحميل الصور
قم بتحميل صورة في إعدادات الصورة أيضًا.
خلفية متدرجة
وإضافة خلفية متدرجة.
- اللون 1: # 5b32ff
- اللون 2: # 32e5f2
- اتجاه التدرج: 100 درجة
إعدادات رمز الاقتباس
تابع بالانتقال إلى علامة تبويب التصميم وتغيير إعدادات رمز الاقتباس.
- لون رمز الاقتباس: # 000000
- لون خلفية رمز الاقتباس: #ffffff
إعدادات النص
قم بتغيير اتجاه النص في إعدادات النص أيضًا.
- اتجاه النص: الوسط
- لون النص: فاتح
إعدادات النص الأساسي
بعد ذلك ، العب مع إعدادات النص الأساسي.
- وزن خط الجسم: عريض للغاية
- نمط خط النص الأساسي: أحرف كبيرة
- حجم النص الأساسي: 15 بكسل
- تباعد نص الرسالة: -0.5 بكسل
- ارتفاع خط الجسم: 2.1em
تباعد
أضف بعض الهامش العلوي السلبي لإنشاء التداخل بين هذه الوحدة ووحدة النص.
- الهامش العلوي: -25 بكسل
مربع الظل
وانتهي من تصميم الشهادة بإعطاء وحدة التزكية ظل مربع دقيقًا.
- مربع قوة طمس الظل: 80 بكسل
- لون الظل: rgba (0،0،0،0.3)
استنساخ كلتا الوحدتين مرتين ووضع التكرارات في الأعمدة المتبقية
بمجرد الانتهاء من تعديل الوحدات في العمود 1 ، يمكنك استنساخها مرتين ووضع التكرارات في العمودين المتبقيين.
تغيير محتوى الشهادة والصور
تأكد من تغيير المحتوى والصور المستخدمة في الوحدات.
تغيير خلفيات التدرج الشهادة
جنبا إلى جنب مع الخلفيات المتدرجة.
- اللون 1: # a632ff
- اللون 2: # f7a131
- اللون 1: # 3281ff
- اللون 2: # 2cf483
معاينة
الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة النهائية على أحجام الشاشات المختلفة.
سطح المكتب
متحرك
افكار اخيرة
في هذا المنشور ، أظهرنا لك 5 طرق رائعة يمكنك من خلالها تصميم وحدة Divi Testimonial Module. لقد أرشدناك خلال البرنامج التعليمي خطوة بخطوة وأنشأنا شهادات يمكنك استخدامها بشكل أساسي في أي موقع ويب تعمل عليه. إذا كان لديك أي أسئلة أو اقتراحات ، فتأكد من ترك تعليق في قسم التعليقات أدناه.