كيفية تغيير نمط العناصر المتعددة عند التمرير أو النقر فوق Divi

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

في هذا البرنامج التعليمي ، سوف نوضح لك كيفية تغيير نمط العناصر المتعددة عند التمرير أو النقر فوق Divi. أولاً ، سوف نستفيد من خيارات التصميم المضمنة في Divi لتصميم تخطيط القسم. بعد ذلك سنقدم مقتطفًا بسيطًا من jQuery يمكنك استخدامه مع CSS المخصص لضبط نمط أي عنصر في هذا القسم عند التمرير أو النقر فوق زر. قد يبدو هذا معقدًا (خاصة للمبتدئين) ولكن قد تفاجأ بمدى سهولة إنجازه.

هيا بنا نبدأ!

نظرة خاطفة

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

هنا يتم تغيير تصميم تخطيط القسم عند التمرير فوق الزر.

وهنا يتم تغيير تصميم تخطيط القسم نفسه بالنقر فوق الزر. لاحظ أن نص الزر يتغير أيضًا عند النقر.

قم بتنزيل Layout مجانًا

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

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

تنزيل مجاني

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

تحميل

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

لاستيراد تخطيط القسم إلى مكتبة Divi الخاصة بك ، انتقل إلى مكتبة Divi.

انقر فوق الزر "استيراد".

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

ثم انقر فوق زر الاستيراد.

بمجرد الانتهاء من ذلك ، سيكون تخطيط القسم متاحًا في Divi Builder.

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

ما تحتاجه للبدء

للبدء ، سوف تحتاج إلى القيام بما يلي:

1. إذا لم تكن قد قمت بذلك بعد ، فقم بتثبيت وتفعيل Divi Theme.
2. قم بإنشاء صفحة جديدة في WordPress واستخدم Divi Builder لتحرير الصفحة على الواجهة الأمامية (منشئ مرئي).
3. اختر الخيار "البناء من الصفر".

بعد ذلك ، سيكون لديك لوحة فارغة لبدء التصميم في Divi.

الجزء 1: تصميم مخطط القسم

للبدء ، أنشئ صفًا جديدًا من عمودين.

إعدادات القسم

قبل إضافة أي وحدات نمطية ، افتح إعدادات القسم ، وقم بتحديث ما يلي:

• لون الخلفية: #ffffff

• نمط الفاصل العلوي: انظر الصورة
• لون الحاجز العلوي: #ffffff
• ارتفاع الحاجز العلوي: 5vw

• نمط الحاجز السفلي: نفس
• لون الحاجز السفلي: #ffffff
• ارتفاع الحاجز السفلي: 5vw

• الحشو: 6vw أعلى ، 6vw أسفل

قبل الصورة

في العمود الأيمن من الصف المكون من عمودين ، أضف وحدة صورة جديدة.

ثم قم بتحميل الصورة التي تريد عرضها. في هذا البرنامج التعليمي ، نستخدم صورة من حزمة تخطيط إدارة التعلم (LMS) والتي تبلغ 800 بكسل × 550 بكسل تقريبًا.

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

• محاذاة الصورة: المركز
• فرض عرض كامل: نعم

بعد الصورة

بعد ذلك ، سننشئ صورة أخرى نعرضها عندما نمرر / نضغط على زر.

لإنشاء الصورة ، قم بتكرار وحدة الصورة السابقة.

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

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

• الموقف: مطلق

ضمن علامة التبويب Design ، قم بتغيير العتامة أسفل خيارات المرشح بحيث تكون الصورة غير مرئية تمامًا.

• العتامة: 0٪

أضف عنوان نصي

في العمود الأيمن ، أضف وحدة نصية جديدة.

ثم الصق HTML التالي في منطقة محتوى النص:

<h3><span>Design</span> Anything You Want <span>with Divi</span></h3>

لاحظ أن بعض الكلمات في النص ملفوفة بعلامات امتداد. هذا حتى نتمكن من استهداف هذه الكلمات وتصميمها لاحقًا باستخدام بعض CSS المخصص.

ضمن علامة تبويب التصميم ، قم بتحديث خيارات نمط H3 على النحو التالي:

• خط العنوان 3: مونتسيرات
• وزن خط العنوان 3: غامق للغاية
• نمط خط العنوان 3: TT
• حجم نص العنوان 3: 65 بكسل (سطح المكتب والجهاز اللوحي) ، 40 بكسل (الهاتف)
• العنوان 3 تباعد الأحرف: 0.8em
• ارتفاع سطر العنوان 3: 1.3em

هذا يعتني بتخطيط القسم الذي يحتوي على عناصر التصميم التي سنغيرها عند التمرير / النقر فوق زر. في هذا القسم التالي ، سنضيف الزر الذي سنستخدمه لبدء تغييرات النمط.

إنشاء قسم للزر

قم بإنشاء قسم عادي جديد أسفل القسم الحالي.

ثم أضف صفًا من عمود واحد إلى القسم.

إضافة زر

في العمود ، أضف وحدة زر جديدة.

قم بتغيير نص الزر ليقرأ "انظر بعد".

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

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 16 بكسل
• لون نص الزر: #ffffff
• خلفية الزر: # 4b4baf
• خلفية الزر (تحوم): # 67ddc1
• عرض حد الزر: 0 بكسل
• تباعد حرف الزر: 4 بكسل
• زر الخط: مونتسيرات
• وزن خط الزر: شبه عريض
• نمط خط الزر: TT

الجزء 2: إضافة فئات CSS إلى العناصر

الآن بعد أن أصبح تصميمنا في مكانه الصحيح ، سننجز بقية تغييرات التصميم باستخدام كود مخصص (CSS و JQuery). ولكن قبل أن نبدأ في إضافة الكود المخصص لدينا ، نحتاج إلى إضافة فئات CSS إلى جميع العناصر التي نرغب في تغييرها عند التمرير / النقر فوق الزر.

أضف فئة CSS إلى القسم

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

• فئة CSS: et-change-style_section

أضف فئة CSS إلى الصور

بعد ذلك ، افتح إعدادات الصورة الأولى في العمود الأيسر وأضف فئة CSS التالية:

• فئة CSS: et-before-image

ستكون هذه هي الصورة التي تظهر "قبل" الزر الذي يتم تمريره / النقر فوقه.

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

• فئة CSS: et-after-image

ستكون هذه هي الصورة التي تظهر "بعد" تحوم / نقر الزر.

أضف فئة CSS إلى نص

بعد ذلك ، أضف فئة CSS التالية إلى Text Module في العمود الأيمن:

• فئة CSS: et-style-text

أضف فئة CSS إلى Button

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

• فئة CSS: et-toggle-button

نحتاج إلى هذه الفئة لاستهداف الزر لوظيفة التمرير / النقر في الكود لاحقًا.

الجزء 3: إضافة رمز مخصص لتغيير الأنماط عند التمرير أو النقر

الآن وبعد أن أصبحت جميع فئات CSS لدينا في مكانها الصحيح ، يمكننا الآن إضافة الكود اللازم لتغيير نمط كل هذه العناصر عند التمرير / النقر فوق الزر.

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

لإضافة الرمز ، أضف وحدة رمز نمطية أسفل الزر في القسم السفلي.

الصق كود jQuery

ثم الصق JQuery التالية. التأكد من التفاف الكود في علامات البرنامج النصي لأننا نضيف الكود إلى مستند HTML (وليس ملف JS).

(function($) {
    $(document).ready(function(){
        $('.et-toggle-button').hover(function(){
            $('.et-change-style_section').toggleClass('et-change-style_active');
            var $this = $(this);
            $this.toggleClass('et-toggle-button_active');
        });
    });
})( jQuery );

إذا ألقيت نظرة على الكود ، يجب أن تتعرف على فئات CSS التي أضفناها إلى الزر والقسم.

يتم استخدام فئة الزر (“.et-toggle-button”) لاستهداف العنصر الذي سيبدأ وظيفة عند التمرير.

عند التمرير ، ستعثر الوظيفة على العنصر مع فئة القسم ".et-change-style_section" وتبديل / إضافة فئة جديدة (".et-change-style-active") عندما يحوم المؤشر فوق الزر.

يتم أيضًا استهداف الزر (عبر "$ this") لتبديل فئة جديدة (".et-toggle-button_active") في حالة التمرير.

المفتاح لتغيير أنماط هذه العناصر عند التمرير هو إضافة / تبديل فئات CSS الجديدة الإضافية إلى القسم والزر.

على سبيل المثال ، بمجرد إعطاء القسم الذي يحتوي على الفئة ".et-change-style_section" تلك الفئة الإضافية (".et-change-style_active") ، يمكننا استخدام CSS المخصص لتغيير نمط القسم المعطى له في الأصل عبر خيارات Divi المدمجة.

تغيير نمط العناصر باستخدام CSS المخصص

افتح الوحدة النمطية للتعليمات البرمجية والصق CSS المخصص التالي أعلى JQuery Script ، مع التأكد من لفه في علامات Style الضرورية.

 .et_pb_section.et-change-style_section.et-change-style_active {
   background-color:#484db0 !important;
 }

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

بعد ذلك ، الصق CSS الإضافية التالية داخل علامات الأنماط.

  .et-change-style_active .et-after-image {
    filter: opacity(100%);
  }
  .et-change-style_active .et-before-image {
    filter: opacity(0%);
  }  

نظرًا لأنه يتم إعطاء القسم الأصل فئة عند التمرير ، يمكنك استهداف العناصر الفرعية للقسم (مثل الصور) باستخدام نفس فئة CSS. ولكن نظرًا لأنها فئة في حاوية / قسم أصلي ، يجب أن تسبق فئة CSS فئة العنصر الذي تريد تغييره. في هذا المثال ، تأتي فئة CSS (".et-change-style_active") الممنوحة للقسم الأصل قبل الفصل الذي يُعطى الصور الفرعية (".et-after-image" و ".et-before-image").

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

ثم الصق باقي أجزاء CSS داخل علامات الأنماط:

  .et-change-style_active .et-style-text h3, .et-change-style_active .et-style-text p {
    color: #ffffff;
  }
  .et-change-style_active .et-style-text h3 span {
    color: #67ddc1;
  }
  .et-toggle-button_active {
    transform: scale(1.1);
    background-color: #67ddc1 !important;
  }  
  .et-change-style_active, .et-before-image, .et-after-image, .et-style-text h3  {
    transition: all 0.3s;
  }

تستخدم مقتطفات CSS هذه نفس المفهوم لتغيير نمط العنصر عندما يحتوي القسم (أو الزر) على الفئة الجديدة.

النتيجة النهائية (تحوم)

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

تغيير الأنماط عند النقر بدلاً من التمرير

إذا كنت ترغب في تغيير نمط تلك العناصر نفسها عند النقر فوق الزر (بدلاً من التمرير) ، فكل ما عليك فعله هو إجراء بعض التغييرات على JQuery. سيبقى معظم الكود كما هو. الاختلاف الرئيسي هو أن طريقة "التمرير" يتم استبدالها بـ "النقر". وقد أضفنا مقتطفًا مفيدًا من التعليمات البرمجية يغير نص الزر عند النقر عليه.

لإضافة وظيفة النقر ، استبدل JQuery الحالي بما يلي (مرة أخرى ، تأكد من أنه ملفوف في علامات البرنامج النصي):

(function($) {
    $(document).ready(function(){
        $('.et-toggle-button').click(function(e){
            e.preventDefault();
            $('.et-change-style_section').toggleClass('et-change-style_active');
            var $this = $(this);
            $this.toggleClass('et-toggle-button_active');
            if ($this.hasClass('et-toggle-button_active')){
                $this.text('See Before');
            } else {
                $this.text('See After');
            }
        });
    });
})( jQuery );

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

افكار اخيرة

تعد القدرة على استهداف وتغيير نمط عناصر متعددة على الصفحة عند التمرير أو النقر فوق شيء ما مهارة مفيدة في تصميم الويب. يمكنك استخدام هذه التقنية لمجموعة متنوعة من حالات الاستخدام (قبل وبعد ، CTAs ، إلخ ...) بالتأكيد ، من المفيد معرفة القليل من CSS و JS / JQuery. ولكن ، كما رأيت في هذا البرنامج التعليمي ، لا تحتاج إلى معرفة نغمة التعليمات البرمجية للحصول على بعض النتائج المدهشة!

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

هتافات!