كيفية إضافة تأثيرات مرشح خلفية CSS إلى رأس مثبت في Divi

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

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

هيا بنا نبدأ!

نظرة خاطفة

فيما يلي نظرة سريعة على التصميم الذي سنقوم ببنائه في هذا البرنامج التعليمي.

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

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

قم بتنزيل نموذج Global Header مجانًا

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

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

تنزيل مجاني

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

تحميل

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

كيفية تحميل النموذج

انتقل إلى Divi Theme Builder

لتحميل القالب ، انتقل إلى Divi Theme Builder في الواجهة الخلفية لموقع WordPress الخاص بك.

تحميل قالب موقع الويب الافتراضي العام

بعد ذلك ، في الزاوية العلوية اليمنى ، سترى رمزًا به سهمان. انقر فوق الرمز.

انتقل إلى علامة التبويب "استيراد" ، وقم بتحميل ملف JSON الذي تمكنت من تنزيله في هذا المنشور وانقر فوق "استيراد قوالب Divi Theme Builder".

حفظ تغييرات Divi Theme Builder

بمجرد تحميل الملف ، ستلاحظ رأسًا وتذييلًا عامًا جديدين في قالب موقع الويب الافتراضي الخاص بك. احفظ تغييرات Divi Theme Builder بمجرد أن تريد تنشيط القالب.

دعنا نصل إلى البرنامج التعليمي ، أليس كذلك؟

إضافة CSS Backdrop Filter Effects إلى رأس موجود

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

1. أضف لون خلفية شبه شفاف إلى قسم الرأس
2. أضف مرشح الخلفية المخصص CSS إلى قسم الرأس
3. أضف موضع مثبت إلى قسم الرأس

إليك كيفية القيام بذلك في Divi.

تحرير الرأس في Theme Builder

انتقل إلى Theme Builder وانقر لتحرير قالب Header الحالي.

أضف لون خلفية شبه شفاف إلى القسم

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

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

إضافة مرشح الخلفية CSS مخصص

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

-webkit-backdrop-filter: saturate(200%) blur(10px);
backdrop-filter: saturate(200%) blur(10px);

تتشابه تأثيرات المرشح هذه مع تأثيرات المرشح المضمنة في جميع عناصر Divi. يتمثل الاختلاف الرئيسي في أن مرشح الخلفية يضيف التأثير إلى العنصر (العناصر) الموجودة خلفه ، بينما تضيف تأثيرات المرشح المدمجة لـ Divi التأثير إلى العنصر نفسه.

نحن هنا نستخدم مؤثرَي مرشح (تشبع وطمس) والذي سيطبق تأثير المرشح على أي عناصر تصميم خلف القسم.

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

• طمس ()
• سطوع()
• التباين()
• تدرج الرمادي ()
• هوى تدوير ()
• عكس()
• بني داكن()
• مشبع ()

أضف الموضع اللاصق إلى الرأس

أخيرًا ، تأكد من إعطاء قسم الرأس موضعًا ثابتًا.

النتيجة النهائية

هنا نظرة على النتيجة النهائية على صفحة مباشرة. لاحظ تأثيرات مرشح التمويه والتشبع المطبقة على العناصر الموجودة خلف الرأس أثناء التمرير.

إنشاء رأس باستخدام تأثيرات مرشح CSS Backdrop من Scratch

إذا كنت ترغب في إنشاء الرأس بالكامل باستخدام تأثيرات مرشح الخلفية CSS من البداية ، فإليك كيفية القيام بذلك.

قم ببناء رأس عام في منشئ القوالب

انتقل إلى مُنشئ القوالب وانقر لإنشاء رأس عام جديد.

إنشاء قسم مثبت باستخدام تأثيرات مرشح الخلفية في CSS

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

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

افتح إعدادات القسم. ثم أضف لون الخلفية شبه الشفاف التالي إلى القسم:

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

قم بتحديث المساحة المتروكة كما يلي:

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

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

-webkit-backdrop-filter: saturate(200%) blur(10px);
backdrop-filter: saturate(200%) blur(10px);

أخيرًا ، تأكد من إعطاء قسم الرأس موضعًا ثابتًا.

• موقف مثبت: التمسك بالأعلى

تحرير إعدادات الصف

الآن وقد انتهى القسم ، افتح إعدادات الصف وقم بتحديث ما يلي:

• عرض الحضيض: 1
• العرض: 95٪
• الحشو: 20 بكسل للأعلى ، 20 بكسل للأسفل

أضف صورة الشعار

بعد تحديث إعدادات الصف ، أضف وحدة صورة إلى الصف / العمود لإنشاء الشعار.

قم بتحميل صورة الشعار إلى وحدة الصورة.

يتم تحديث اعدادات تصميم الصور كالتالي:

• العرض: 50 بكسل
• الهامش: 0 بكسل يمين

إنشاء قائمة

بعد ذلك ، أضف وحدة قائمة ضمن وحدة الصورة.

ضمن علامة تبويب المحتوى ، حدد قائمة وامنح القائمة لون خلفية شفافًا.

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

ضمن علامة تبويب التصميم ، قم بتحديث إعدادات تصميم القائمة على النحو التالي:

• النمط: محاذاة إلى اليسار
• لون الارتباط النشط: #fff
• خط القائمة: مونتسيرات
• وزن خط القائمة: شبه عريض
• لون نص القائمة: #fff
• محاذاة النص: الوسط
• لون خلفية القائمة المنسدلة: # 333
• لون خط القائمة المنسدلة: #fff
• لون نص القائمة المنسدلة: #fff
• الرابط النشط للقائمة المنسدلة: #fff
• خلفية قائمة الجوال: # 333
• لون نص قائمة الجوال: #fff
• لون رمز عربة التسوق: #fff
• لون رمز البحث: #fff
• لون أيقونة قائمة همبرغر: #fff
• العرض: 80٪ (سطح المكتب والجهاز اللوحي)

إنشاء زر مع وحدة النص

لإنشاء الزر الصغير للرأس ، سنستخدم وحدة نصية. أضف وحدة نصية ضمن القائمة.

قم بتحديث محتوى الجسم بعمل “Shop”. ثم امنح وحدة النص لون خلفية بيضاء.

• النص الأساسي: "تسوق"
• لون الخلفية: #fff

ضمن علامة تبويب التصميم ، قم بتحديث ما يلي:

• خط النص: مونتسيرات
• وزن خط النص: شبه عريض
• لون نص النص: # 333
• ارتفاع خط النص: 2em
• محاذاة النص: الوسط
• العرض: 50 بكسل
• الزوايا الدائرية: 5 بكسل

هنا وحدة النص لها نفس عرض صورة الشعار. سيساعد هذا في محاذاة العناصر بشكل مثالي عندما نستخدم الخاصية flex في العمود باستخدام CSS المخصص.

محاذاة الوحدات النمطية في العمود باستخدام خاصية CSS Flex

بمجرد إضافة نحلة الشعار والقائمة والوحدة النصية إلى العمود ، افتح إعدادات العمود والصق CSS المخصص التالي في العنصر الرئيسي:

display:flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items:center;

حفظ تخطيط الرأس والقالب

بمجرد الانتهاء من ذلك ، تأكد من حفظ التخطيط والقالب.

النتيجة النهائية

هنا نظرة أخرى على التصميم النهائي. لاحظ تأثيرات مرشح التمويه والتشبع المطبقة على العناصر الموجودة خلف الرأس أثناء التمرير.

دعم المتصفح

لسوء الحظ ، لا تعمل خاصية CSS ذات مرشح الخلفية حاليًا بشكل جيد على IE و Firefox. ومع ذلك ، سيكون البديل هو لون الخلفية شبه الشفاف المعطى للقسم ، والذي لا يزال يعمل ويبدو رائعًا.

افكار اخيرة

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

أتطلع إلى الاستماع منك في التعليقات.

هتافات!