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

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

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

دعنا نذهب اليها!

معاينة

قبل أن نتعمق في البرنامج التعليمي ، دعنا نلقي نظرة على النتيجة النهائية.

إضافة قسم جديد

هيا بنا نبدأ! أضف صفحة جديدة أو افتح صفحة موجودة وأضف قسمًا عاديًا جديدًا.

أضف صفًا جديدًا 1

هيكل العمود

تابع بإضافة صف جديد باستخدام بنية العمود التالية:

تحجيم

بدون إضافة أي وحدات بعد ، افتح إعدادات الصف وقم بتغيير إعدادات التحجيم.

• جعل هذا الصف بعرض كامل: نعم
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1

تباعد

أضف بعض قيم التباعد المخصصة أيضًا.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل
• العمود 2 ، الحشوة اليسرى: 2vw (سطح المكتب) ، 3vw (الكمبيوتر اللوحي والهاتف)
• الحشوة اليمنى للعمود 2: 11vw (سطح المكتب) ، 3vw (الكمبيوتر اللوحي والهاتف)

أضف وحدة الصورة النمطية إلى العمود 1

تحميل الصور

حان الوقت لبدء إضافة الوحدات المختلفة! ابدأ بوحدة صورة في العمود الأول. قم بتحميل صورة شخصية من اختيارك.

محاذاة الصورة

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

• محاذاة الصورة: يسار

تحجيم

قم بتغيير إعدادات التحجيم بعد ذلك.

• العرض: 78٪ (سطح المكتب) ، 70٪ (الجهاز اللوحي والهاتف)
• محاذاة الوحدة: يسار

أضف وحدة نص تداخل التمرير إلى العمود 1

إضافة محتوى

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

الخلفية الافتراضية

تابع بإضافة لون الخلفية.

• لون الخلفية: rgba (255،255،255،0)

تحوم الخلفية

أضف لون خلفية آخر عند التمرير.

• لون الخلفية: # 0f1bff

الإعدادات الافتراضية للنص

ثم قم بتغيير إعدادات النص.

• لون النص: #ffffff
• حجم النص: 0 بكسل
• ارتفاع خط النص: 0 بكسل

تحوم إعدادات النص

قم بإجراء بعض التعديلات على إعدادات النص عند التمرير.

• حجم النص: 19 بكسل
• ارتفاع خط النص: 2em

الإعدادات الافتراضية لنص العنوان

يجب تعديل إعدادات نص العنوان أيضًا.

• وزن خط العنوان 3: غامق للغاية
• نمط خط العنوان 3: أحرف كبيرة
• لون نص العنوان 3: #ffffff
• حجم نص العنوان 3: 0 بكسل
• عنوان ارتفاع الخط 3: 0em

تحوم إعدادات نص العنوان

أضف قيمًا مختلفة عند التمرير.

• حجم نص العنوان 3: 35 بكسل
• ارتفاع سطر العنوان 3: 1.1em

تباعد

بعد ذلك ، انتقل إلى إعدادات التباعد وأضف بعض القيم.

• الهامش العلوي: -100 بكسل
• الهامش الأيسر: 50 بكسل
• الهامش الأيمن: 50 بكسل
• الحشوة العلوية: 40 بكسل
• الحشو السفلي: 60 بكسل

تغيير اتجاه النص

ارجع إلى إعدادات النص وقم بتغيير اتجاه النص.

• اتجاه النص: الوسط

ظل المربع الافتراضي

ثم قم بإضافة ظل مربع افتراضي إلى وحدة النص. سيكون ظل الصندوق هذا جزءًا من التصميم العام.

• مربع الظل الأفقي: 1000 بكسل
• مربع الظل الوضع الرأسي: -400 بكسل
• مربع قوة طمس الظل: 0 بكسل
• قوة انتشار الظل المربع: 250 بكسل
• لون الظل: rgba (175،175،175،0.13)

تحوم مربع الظل

لإنشاء تأثير تداخل التمرير الخاص ، أضف ظل مربع التمرير أيضًا.

• مربع الظل الوضع الأفقي: -73 بكسل
• الوضع الرأسي لمربع الظل: -49 بكسل
• مربع قوة طمس الظل: 0 بكسل
• قوة انتشار الظل المربع: 10 بكسل
• لون الظل: rgba (255،182،12،0.53)

الانتقالات

لإنشاء انتقال سلس ، قم بتغيير مدة الانتقال في علامة التبويب خيارات متقدمة.

• مدة الانتقال: 1000 مللي ثانية

أضف وحدة نص الشهادة إلى العمود 2

إضافة محتوى

في العمود الثاني ، أول شيء سنحتاجه هو وحدة نص العنوان. انطلق وأضف ملخصًا للشهادة.

إعدادات نص العنوان

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

• خط العنوان 3: Goudy Bookletter 1911
• العنوان 3 محاذاة النص: يسار
• حجم نص العنوان 3: 3.5vw (سطح المكتب) ، 40 بكسل (الجهاز اللوحي) ، 30 بكسل (الهاتف)
• العنوان 3 ارتفاع الخط: 1.1em

تباعد

تابع بإضافة بعض قيم التباعد المخصصة.

• الهامش العلوي: 7vw (سطح المكتب) ، 100 بكسل (جهاز لوحي) ، 50 بكسل (هاتف)

أضف وحدة نص الوصف إلى العمود 2

إضافة محتوى

أضف وحدة نصية أخرى مع الشهادة بأكملها أسفل عنوان وحدة النص مباشرةً.

إعدادات النص

بعد إضافة الشهادة ، امض قدمًا وقم بتغيير إعدادات النص.

• ارتفاع خط النص: 2.2em
• اتجاه النص: يسار

تباعد

أضف بعض الهامش العلوي المخصص أيضًا.

• الهامش العلوي: 4vw (سطح المكتب) ، 50 بكسل (الجهاز اللوحي والهاتف)

أضف صفًا جديدًا

هيكل العمود

الآن بعد أن انتهينا من الصف الأول ، دعنا نضيف الصف الثاني باستخدام بنية العمود التالية:

تحجيم

افتح إعدادات الصف وقم بتغيير إعدادات التحجيم.

• جعل هذا الصف بعرض كامل: نعم
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1

تباعد

أضف بعض قيم التباعد المخصصة بعد ذلك.

• الهامش الأعلى: 100 بكسل
• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل
• العمود 1 ، البطانة اليسرى: 11vw (سطح المكتب) ، 3vw (الكمبيوتر اللوحي والهاتف)
• الحشوة اليمنى للعمود 1: 2vw (سطح المكتب) ، 3vw (الكمبيوتر اللوحي والهاتف)

نسخ وحدات النص من الصف السابق ومكان في العمود 1

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

تغيير اتجاه النص

تغيير اتجاه النص لكلا الوحدتين.

• اتجاه النص: صحيح

أضف وحدة الصورة النمطية إلى العمود 2

تحميل الصور

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

محاذاة الصورة

قم بتغيير محاذاة الصورة للوحدة النمطية.

• محاذاة الصورة: صحيح

تحجيم

تابع عن طريق تغيير إعدادات التحجيم.

• العرض: 78٪ (سطح المكتب) ، 70٪ (الجهاز اللوحي والهاتف)
• محاذاة الوحدة: صحيح

تباعد

أضف بعض قيم التباعد المخصصة أيضًا.

• الهامش العلوي: 50 بكسل (الجهاز اللوحي والهاتف)

أضف وحدة نص تراكب التمرير إلى العمود 2

إضافة محتوى

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

الخلفية الافتراضية

ثم أضف صورة خلفية إلى الوحدة النمطية.

• لون الخلفية: rgba (255،255،255،0)

تحوم الخلفية

قم بتغيير لون الخلفية عند التمرير.

• لون الخلفية: # 690cff

الإعدادات الافتراضية للنص

قم بتغيير إعدادات النص بعد ذلك.

• لون النص: #ffffff
• حجم النص: 0 بكسل
• ارتفاع خط النص: 0 بكسل
• اتجاه النص: الوسط

تحوم إعدادات النص

قم بإجراء بعض التعديلات على التمرير.

• حجم النص: 19 بكسل
• ارتفاع خط النص: 2em

الإعدادات الافتراضية لنص العنوان

قم بتغيير إعدادات نص العنوان أيضًا.

• وزن خط العنوان 3: غامق للغاية
• لون نص العنوان 3: #ffffff
• حجم نص العنوان 3: 0 بكسل
• العنوان 3 ارتفاع الخط: 0em

تحوم إعدادات نص العنوان

مع بعض التعديلات الصغيرة على التحويم.

• حجم نص العنوان 3: 35 بكسل
• ارتفاع سطر العنوان 3: 1.1em

تباعد

تابع بالذهاب إلى إعدادات التباعد وإضافة بعض القيم المخصصة.

• الهامش العلوي: -80 بكسل
• الهامش الأيسر: 50 بكسل
• الهامش الأيمن: 50 بكسل
• الحشوة العلوية: 40 بكسل
• الحشو السفلي: 60 بكسل

ظل المربع الافتراضي

إضافة ظل مربع افتراضي إلى وحدة النص.

• مربع الظل الوضع الأفقي: -1000 بكسل
• مربع الظل الرأسي: -420 بكسل
• مربع قوة طمس الظل: 0 بكسل
• قوة انتشار الظل المربع: 250 بكسل
• لون الظل: rgba (175،175،175،0.13)

تحوم مربع الظل

وتغيير مربع الظل على تحوم.

• مربع الظل الوضع الأفقي: -73 بكسل
• الوضع الرأسي لمربع الظل: -49 بكسل
• مربع قوة طمس الظل: 0 بكسل
• قوة انتشار الظل المربع: 10 بكسل
• لون الظل: rgba (12،255،238،0.53)

الانتقالات

أخيرًا وليس آخرًا ، قم بإنشاء انتقال سلس عن طريق تغيير مدة الانتقال.

• مدة الانتقال: 1000 مللي ثانية

معاينة

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة النهائية!

افكار اخيرة

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