كيفية إنشاء لافتة عائمة في Divi (بدون مكون إضافي)

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

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

كيفية إنشاء الشعار العائم في Divi استنادًا إلى سلوك التمرير (بدون مكون إضافي)

الخطوة 1: إنشاء أو تحرير قالب نص مخصص

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

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

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

بمجرد دخولك إلى محرر قالب النص المخصص، قم بإنشاء قسم جديد لصفحتك. لجعل عنصر الشعار العائم يبدو متناسبًا وليس كبيرًا جدًا على صفحتك، قمنا بتعيين حجم القسم على عرض 25٪ .

الخطوة 2: إضافة محتوى الشعار العائم

إضافة وحدة

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

تخصيص الوحدة

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

• أضف فئة CSS

بعد ذلك، قم بإضافة فئة CSS مخصصة تسمى " floating-banner-content " في علامة التبويب المتقدمة الخاصة بالوحدة.

بمجرد الانتهاء من تصميم محتوى البانر العائم، لا تنس حفظ جميع التغييرات.

الخطوة 3: أضف مقتطف CSS وJavaScript المخصص

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

أضف CSS المخصص

انتقل إلى خيارات سمة Divi وحدد Custom CSS (لوحة تحكم WordPress -> Divi -> خيارات سمة Divi -> عام -> CSS مخصص ). بعد ذلك، انسخ مقتطف CSS أدناه والصقه في الحقل المتاح.

 شاشة @media فقط و (min-width: 768px) { .floating-banner-content {
  الموقف: ثابت؛
  أعلى: 130 بكسل؛
  اليسار: 80%؛
  تحويل: TranslateX(-50%);
  ظل الصندوق: 0 2px 4px rgba(0, 0, 0, 0.2);
  مؤشر z: 9999؛
  العتامة: 0؛
  الرؤية: مخفية؛
  الانتقال: العتامة 0.3 ثانية لسهولة الدخول والخروج، والرؤية 0.3 ثانية لسهولة الدخول والخروج؛
}
}

شاشة الوسائط فقط و ( الحد الأدنى للعرض: 768 بكسل ) { .floating-banner-content.active {
  العتامة: 1؛
  الرؤية: مرئية؛
}
} 

أضف كود جافا سكريبت

في صفحة Divi Them Options، انتقل إلى علامة التبويب Integration . بعد ذلك، الصق مقتطف JavaScript أدناه في رمز الإضافة إلى < head > في حقل مدونتك .

 <النص البرمجي>
مسج (مستند).جاهز (وظيفة($) {
    varbanner = $('.floating-banner-content');

    $(نافذة).التمرير(وظيفة() {
        فار التمريرTop = $(this).scrollTop();
        إذا (scrollTop >= 400) {
            banner.addClass('active');
        } آخر {
            banner.removeClass('active');
        }
    });
});
</script> 

بمجرد إضافة مقتطفات CSS وJavaScript المخصصة، قم بتطبيق التغييرات بالنقر فوق الزر Save Changes .

لرؤية النتيجة، يمكنك معاينة إحدى منشوراتك أو صفحاتك (اعتمادًا على المكان الذي تضع فيه عنصر الشعار العائم).

ماذا فعلت كود CSS وجافا سكريبت؟

انهيار كود CSS

• @media only screen and ( min-width: 768px ) :
  • يستهدف استعلام الوسائط هذا على وجه التحديد الأجهزة التي يبلغ الحد الأدنى لعرض الشاشة فيها 768 بكسل (أي الأجهزة اللوحية والأكبر). فهو يضمن أن اللافتة العائمة مصممة خصيصًا للأجهزة التي يمكنها عرضها بشكل مريح.
• .floating-banner-content :
  • يستهدف هذا المحدد العناصر ذات الفئة "floating-banner-content"، والتي يتم تطبيقها على الوحدة التي تحتوي على محتوى الشعار.
• أنماط .floating-banner-content :
  • position: fixed; : سيظل في مكانه حتى عندما يقوم المستخدم بتمرير الصفحة.
  • top: 130px; : يضبط الموضع العلوي للشعار على 130 بكسل من أعلى إطار العرض.
  • left: 80%; : يضع اللافتة بنسبة 80% من عرض إطار العرض من الحافة اليسرى.
  • transform: translateX(-50%); : لتوسيط الشعار أفقيًا عن طريق ترجمته بنسبة 50% إلى اليسار.
  • box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); : يضيف ظلًا خفيفًا إلى الشعار لزيادة العمق.
  • z-index: 9999; : يضمن ظهور الشعار أعلى العناصر الأخرى في الصفحة.
  • opacity: 0; : يقوم في البداية بإخفاء الشعار عن طريق ضبط درجة التعتيم على 0.
  • visibility: hidden; : يخفي محتوى الشعار حتى يصبح مرئيًا.
  • transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; : يطبق تأثير انتقال سلس عندما تتغير عتامة الشعار وإمكانية رؤيته.
• .floating-banner-content.active :
  • يستهدف هذا المحدد العناصر ذات الفئة " floating-banner-content " والتي تحتوي أيضًا على الفئة " active ". تتم إضافة هذه الفئة إلى الشعار عندما يكون مرئيًا.
• أنماط العنصر .floating-banner-content.active :
  • opacity: 1; : يجعل اللافتة مرئية عن طريق ضبط التعتيم على 1.
  • visibility: visible; : يعرض محتوى الشعار.

ملخص كود جافا سكريبت

يتحكم كود JavaScript هذا بشكل فعال في رؤية اللافتة العائمة بناءً على موضع تمرير المستخدم.

يصبح الشعار مرئيًا عندما يقوم المستخدم بالتمرير لأسفل بعد حد معين ( 400 بكسل في هذه الحالة).

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

الخط السفلي

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

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