كيفية تحويل وحدة شهادة Divi الخاصة بك مثبتة

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

معاينة

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

مثال على الوحدة النمطية اللاصقة لشهادة ديفي

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

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

أنشئ عنوان قسم الشهادات اللاصقة

أولاً ، أنشئ قسمًا جديدًا وأضف صفًا أحادي العمود . سيحمل هذا الصف العنوان الذي سيتم توسيطه.

وحدة نص العنوان

بعد ذلك ، أضف وحدة نصية للعنوان.

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

• النص: العنوان 3
• المحتوى: عملاء سعداء

إعدادات التصميم

بعد ذلك ، انتقل إلى علامة تبويب التصميم . قم بتعيين محاذاة النص على توسيط.

• محاذاة النص: توسيط

حدد H3 لنص العنوان . اختر شقرا بيتش للخط. اضبط الوزن على غامق واللون إلى الأسود.

• الخط: شقرا بيتش
• الوزن: جريء
• اللون: # 000000

أخيرًا ، اختر رمز الجهاز اللوحي لحجم النص واضبط حجم سطح المكتب على 50 بكسل ، وحجم الجهاز اللوحي على 28 بكسل ، وحجم الهاتف على 20 بكسل. أغلق إعدادات الوحدة.

• الحجم: سطح المكتب 50 بكسل ، الجهاز اللوحي 28 بكسل ، الهاتف 20 بكسل

أضف صفًا للشهادة الأولى

بعد ذلك ، أضف صفًا 2/3 ، 1/3 أسفل العنوان. هذا الصف سيحمل الشهادة الأولى.

إعدادات الصف

افتح علامة تبويب التصميم وقم بتمكين Equalize Column Heights .

• معادلة ارتفاعات العمود: نعم

إعدادات العمود

افتح إعدادات العمود الأول بإعدادات الصف.

قم بالتمرير لأسفل إلى Border Styles وحدد Top Border Style. قم بتغيير العرض إلى 2 بكسل واللون إلى # ffd600. أغلق إعدادات الصف. سيضيف هذا خطًا أصفر فوق الشهادة مثل الشهادة الأصلية التي استبدلناها.

• أنماط الحدود: أعلى
• لون الحد العلوي: # ffd600
• العرض: 2 بكسل

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

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

أدخل محتوى شهادتك في محرر المحتوى.

بعد ذلك ، انتقل إلى علامة تبويب التصميم . اختر شقرا بيتش للخط. اضبط الوزن على غامق واللون على الأسود. بالنسبة إلى حجم النص ، اختر 30 بكسل لسطح المكتب و 14 بكسل للكمبيوتر اللوحي. سيتبع إعداد الهاتف الجهاز اللوحي تلقائيًا ، لذا لن نحتاج إلى تغييره. اضبط ارتفاع سطر النص على 2em. هذا يخلق شهادة مطبوعة عملاقة من شأنها أن تلفت الانتباه.

• الخط: شقرا بيتش
• الوزن: جريء
• لون أسود
• الحجم: سطح المكتب 30 بكسل ، الجهاز اللوحي 14 بكسل
• ارتفاع الخط: 2em

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

• المحاذاة: توسيط

إعدادات وحدة الشهادة

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

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

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

• مؤلف
• مسمى وظيفي
• شركة
• صورة

قم بالتمرير لأسفل إلى الخلفية واضبطها على الأبيض.

• الخلفية: #ffffff

بعد ذلك ، حدد رمز Pin . هذه هي النسخة اللاصقة من الخلفية والتي ستسمح للخلفية بتغيير لونها عندما تصبح الوحدة لزجة. اختر الأسود للون الخلفية.

• لون الخلفية اللاصق: # 000000

رمز الاقتباس

بعد ذلك ، انتقل إلى علامة تبويب التصميم . اختر # ffd600 للون رمز الاقتباس.

• # ffd600

صورة

قم بالتمرير لأسفل إلى الصورة واضبط العرض والارتفاع على 150 بكسل. قم بتغيير الزوايا الدائرية إلى 0 بكسل.

• عرض الصورة: 150 بكسل
• الزوايا الدائرية: 0 بكسل

نص

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

• محاذاة النص: توسيط

نص المؤلف

ضمن نص المؤلف ، اختر Chakra Petch للخط وقم بتعيين الوزن إلى غامق ومتمركز للمحاذاة. اختر الأسود للون العادي. حدد رمز الدبوس واضبط اللون اللاصق على # ffd600. اضبط حجم سطح المكتب على 20 بكسل وحجم الجهاز اللوحي على 14 بكسل.

• الخط: شقرا بيتش
• لون النص العادي: أسود
• لون النص المثبت: # ffd600
• الحجم: سطح المكتب 20 بكسل ، قرص 14 بكسل

نص المركز

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

• الخط: Exo
• لون النص العادي: # 000000
• لون النص المثبت: #ffffff

نص الشركة

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

• الخط: Exo
• لون النص العادي: # 000000
• لون النص المثبت: #ffffff

مربع الظل

قم بالتمرير إلى Box Shadow وحدد الخيار الأول.

• Box Shadow: خيار الظل الأول

تأثيرات التمرير

أخيرًا ، انتقل إلى علامة التبويب خيارات متقدمة وانتقل لأسفل إلى تأثيرات التمرير . حدد سطح المكتب واختر Stick to Top for the Sticky Position. اضبط Sticky Top Offset على 50 بكسل. عيّن العنصر اللاصق السفلي على العمود. هذا يخبر الوحدة كيف وأين تلتصق.

• موقف مثبت: التمسك بالأعلى
• الإزاحة العلوية اللاصقة: 50 بكسل
• العنصر اللاصق السفلي: العمود

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

• موقف مثبت: لا تلتصق

الآن ، عند التمرير ، تلتصق وحدة الشهادة بأعلى الشاشة وتغير لونها.

بمجرد أن تصطف الوحدة مع الجزء السفلي من العمود ، فإنها تقوم بالتمرير مع العمود.

ضاعف الصف الأول من الشهادة

بعد ذلك ، سننشئ الصف الثاني عن طريق نسخ الصف الأول وإجراء التغييرات. مرر مؤشر الماوس فوق الصف وانقر فوق الرمز المكرر.

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

نتائج

خواطر ختامية

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

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