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

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

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

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

معاينة

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

سطح المكتب

متحرك

قم بتنزيل The Hovered Blurb Module Layout مجانًا

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

قم بتنزيل الملفات

تنزيل مجاني

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

تحميل

لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!

لنبدأ في إعادة التكوين!

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

لون الخلفية

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

• خلفية كور: #eaeaea

تباعد

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

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

الحدود

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

• جميع الزوايا: 20 بكسل

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

هيكل العمود

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

تحجيم

بدون إضافة أي وحدات بعد ، افتح إعدادات الصف وقم بتغيير إعدادات التحجيم. سيساعد تمكين خيار "Equalize Column Heights" في الخطوة التالية التي تعمل على محاذاة محتوى العمود.

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

العنصر الرئيسي

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

align-items: center;

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

إضافة محتوى

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

حدد أيقونة

حدد رمزًا بعد ذلك.

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

بعد ذلك ، استخدم خلفية متدرجة عند التمرير فقط.

• اللون 1: #ffffff
• اللون 2: # 0f1bff
• نوع التدرج: خطي
• موقف البداية: 20٪
• موضع النهاية: 20٪

إعدادات الرمز الافتراضية

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

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

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

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

• لون الرمز: # 0f1bff
• لون الدائرة: # f7f7f7

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

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

• خط العنوان: Source Sans Pro
• وزن خط العنوان: غامق
• نمط خط العنوان: أحرف كبيرة

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

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

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

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

التالي هو إعدادات النص الأساسي.

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

تحوم إعدادات النص الأساسي

استخدم لون نص تحوم أبيض.

• لون النص الأساسي: #ffffff

تباعد

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

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

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

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

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

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

تغيير لون الظل عند المرور فوق.

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

فئة CSS

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

• فئة CSS: blurb-item

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

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

استنساخ صف كامل

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

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

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

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

هيكل العمود

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

تباعد

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

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

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

أدخل JQuery & CSS Code

أضف وحدة Code Module إلى عمود الصف وأدخل بعض كود 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');

});
});

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

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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