Divi: كيفية إبراز وحدة "Blurb" عند التمرير وطمس الآخرين

تريد أن تعرف كيفية وضع وحدة Blurb من Divi تسليط الضوء أثناء تعتيم الآخرين؟

بغض النظر عن نوع موقع انترنت أنت تبني ، فمن المحتمل أنك سترغب في وقت ما في رؤية قائمة بالخدمات والمراحل المختلفة والمزيد. 

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

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

دعونا نذهب.

مسح

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

حاسوب مكتب

اصدار المحمول

لنبدأ التصميم مع Divi

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

لون الخلفية

ابدأ بإضافة قسم عادي إلى صفحة جديدة أو إلى الصفحة التي تعمل عليها. 

يمكنك أيضًا استشارة: Divi: كيفية إنشاء قسم لأعضاء الفريق كمنصة دائرية

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

• الخلفية: #eaeaea

التباعد

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

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

الحدود

أكمل معلمات القسم بإضافة نصف قطر حد.

• الزوايا الدائرية: 20 بكسل

أضف سطرًا جديدًا

هيكل العمود

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

التحجيم

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

• معادلة ارتفاعات العمود: نعم
• العرض: 90٪
• العرض الأقصى: 1 بكسل
• الحد الأدنى للارتفاع: 500 بكسل (سطح المكتب) ، تلقائي (الجهاز اللوحي والهاتف)

CSS مخصص (عنصر رئيسي)

اصطف عليه محتويات العمود عن طريق إضافة سطر واحد من كود CSS إلى العنصر الرئيسي للصف.

align-items: center;

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

إضافة محتوى

الوحدة الوحيدة التي نستخدمها خلال هذا البرنامج التعليمي هي الوحدة النمطية Blurb.

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

أضف وحدة Blurb الأولى إلى العمود 1 وأدخل محتويات دي VOTRE CHOIX.

حدد الرمز

ثم حدد رمزًا.

• استخدام الأيقونة: نعم
• الرمز: انظر لقطة الشاشة

تدرج الخلفية (تحوم)

ثم استخدم تدرج الخلفية فقط عند التمرير.

• توقف متدرج
  • 20٪: #ffffff
  • 80٪: # 0f1bff
• نوع التدرج: خطي

إعدادات الرمز (سطح المكتب)

التبديل إلى علامة التبويب تصميم من الوحدة وتغيير إعدادات الرمز على النحو التالي:

• لون الأيقونة: #ffffff
• الزوايا الدائرية للصورة / الأيقونة: 50 بكسل
• عرض حدود الصورة / الرمز: 5 بكسل
• لون الحدود: #ffffff
• وضع الصورة / الرمز: علوي
• محاذاة الصورة / الرمز: يسار

إعدادات رمز التمرير

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

• لون الرمز (التمرير): # 0f1bff
• لون خلفية الصورة / الرمز (تحوم): # f7f7f7

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

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

• خط العنوان: Source Sans Pro
• وزن الخط: عريض
• نمط خط العنوان: TT (أحرف كبيرة)

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

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

• لون نص العنوان: #ffffff

إعدادات نص الوصف (سطح المكتب)

فيما يلي إعدادات النص الأساسي.

• خط النص الأساسي: Open Sans
• ارتفاع خط الجسم: 2em

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

استخدم لون النص عند التمرير.

• لون النص الأساسي (تحوم): #ffffff

التباعد

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

• الحشو (أعلى ، أسفل ، يسار ويمين): 50 بكسل

بوكس شادو (سطح المكتب)

نستخدم أيضًا ظل الصندوق.

• مربع قوة طمس الظل: 80 بكسل
• قوة انتشار الظل المربع: -20 بكسل
• لون الظل: rgba (255,255,255,0.18،XNUMX،XNUMX،XNUMX)

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

قم بتغيير لون ظل التحويم.

• لون الظل: rgba (0,0,0,0.18،XNUMX،XNUMX،XNUMX)

فئة CSS

ولكي يحدث تأثير التمويه ، سنحتاج إلى تخصيص فئة CSS لوحدة Blurb الخاصة بنا. لاحقًا في المقالة ، سنستخدم فئة CSS هذه في كود JQuery.

• فئة CSS: blurb-item

استنساخ الوحدة النمطية Blurb مرتين وضع التكرارات في الأعمدة المتبقية

بمجرد إكمال وحدة Blurb في العمود 1 ، يمكنك استنساخها مرتين ووضع التكرارات في الأعمدة المتبقية من الصف.

استنساخ الصف بأكمله

يمكنك استنساخ الصف عدة مرات كما تريد ، اعتمادًا على عدد وحدات Blurb النمطية التي تريد عرضها على صفحتك.

تخصيص وحدات Blurb بشكل فردي

بالطبع ، سوف تحتاج إلى تعديل المحتوى الفردي لكل وحدة Blurb.

أضف سطرًا جديدًا

هيكل العمود

أضف صفًا آخر إلى القسم باستخدام بنية العمود التالية:

التباعد

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

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

أضف وحدة التعليمات البرمجية إلى العمود

أدخل كود JQuery و CSS

أضف وحدة Code إلى عمود الصف وأدخل بعض أكواد JQuery و CSS لإحداث التأثير. 

لا تنس وضع كود JQuery بين علامات البرنامج النصي ورمز CSS بين علامات النمط كما ترى في شاشة الطباعة أدناه.

jQuery(function($){
$('[class*="blurb-item"]').hover(function() {
var selector = $(this);
 
$('[class*="blurb-item"]').addClass('blur');
selector.removeClass('blur');
},
function() {
$('[class*="blurb-item"]').removeClass('blur');
 
});
});

اقرأ أيضا: Divi: كيفية إنشاء قسم الشهادات في شكل شبكة

.blur {
-webkit-filter: blur(3px); /* Safari */
filter: blur(3px);
}

مسح

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

حاسوب مكتب

اصدار المحمول

تحميل DIVI Now !!!

وفي الختام

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

على وجه التحديد ، أوضحنا لك كيفية تمييز وحدة Blurb عند التمرير من خلال تعتيم الوحدات الأخرى التي قمت بعرضها. 

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

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

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

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

...