هل تريد تغيير نمط عدة عناصر Divi عند التحويم أو بعد النقر؟

في هذا البرنامج التعليمي ، سنوضح لك كيفية تغيير نمط العناصر المتعددة عند التمرير أو النقر فوق Divi

أولاً، سوف نستفيد من خيارات التصميم المضمنة في Divi لتصميم تخطيط القسم. 

بعد ذلك ، سنقدم مقتطفًا بسيطًا من jQuery يمكنك استخدامه مع CSS المخصص لضبط نمط أي عنصر في هذا القسم عند التمرير فوق الزر أو النقر فوقه. 

قد يبدو هذا معقدًا (خاصة للمبتدئين) ، ولكن قد تفاجأ بمدى بساطة القيام بذلك.

دعونا نبدأ!

مسح

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

تغيير العناصر على زر تحوم

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

تعديل العناصر بعد الضغط على الزر

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

لنبدأ بإنشاء صفحة باستخدام Divi Builder

أنظر أيضا: Divi: كيفية إنشاء قائمة عجلة دوارة عند التمرير

من لوحة تحكم WordPress ، انتقل إلى الصفحات> إضافة جديد لإنشاء صفحة جديدة.

تم تحويل خطوط Divi إلى علامات تبويب

أعطه عنوانًا منطقيًا لك وانقر استخدم Divi Builder

ثم انقر فوق ابدأ البناء (البناء من الصفر)

تم تحويل خطوط Divi إلى علامات تبويب

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

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

للبدء ، قم بإنشاء صف جديد بعمودين.

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

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

  • الخلفية: #ffffff

دعونا نضيف فاصل القسم

  • مقسم (علوي)
    • النمط: انظر لقطة الشاشة
    • اللون: #ffffff
    • الارتفاع: 5vw
  • مقسم (سفلي)
    • النمط: انظر الالتقاط
    • اللون: #ffffff
    • الارتفاع: 5vw
    • الحشو (العلوي والسفلي): 6vw

الصورة (قبل التمرير)

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

بعد ذلك ، قم بتحميل الصورة التي تريد تمييزها. 

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

  • محاذاة الصورة: توسيط
  • قوة العرض الكامل: نعم

صورة (عند التمرير أو بعد النقر)

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

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

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

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

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

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

  • العتامة: 0٪

أضف وحدة نصية

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

ثم قم بلصق كود HTML التالي في المربع محتويات من الجسم :

<h3><span>Créer</span> Votre Blog <span>avec BlogPasCher</span></h3>

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

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

  • العنوان 3:
    • الخط: مونتسيرات
    • وزن الخط: عريض للغاية
    • النمط: TT
    • حجم النص: 60 بكسل (كمبيوتر وجهاز لوحي) ، 40 بكسل (هاتف)
    • تباعد الأحرف: 0,06em
    • ارتفاع الخط: 2 م

في القسم التالي ، سنضيف الزر الذي سنستخدمه لبدء تغييرات النمط.

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

نحتاج أولاً إلى إنشاء قسم عادي جديد أسفل القسم الحالي.

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

إضافة زر

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

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

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

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

اقرأ أيضا: Divi: كيفية إضافة رمز هامبرغر إلى وحدة القائمة

  • تباعد حرف الزر: 4 بكسل
  • الخط: مونتسيرات
  • وزن الخط: شبه عريض
  • نمط خط الزر: TT
  • الهامش (السفلي): 0 بكسل
  • الحشو (العلوي والسفلي): 1.5em
  • الحشو (يسار ويمين): 4em

الجزء 2: إضافة فئات CSS إلى Elements

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

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

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

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

  • فئة CSS: et-change-style_section

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

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

  • فئة CSS: et-before-image

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

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

  • فئة CSS: et-after-image

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

أضف فئة CSS إلى وحدة النص

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

  • فئة 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 المخصص

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

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

ثم الصق CSS الإضافية التالية في علامات الأنماط.

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

ثم الصق باقي 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 هذه نفس المفهوم لتغيير نمط العنصر عندما يحتوي القسم (أو الزر) على الفئة الجديدة.

عناصر ديفي على تحوم

النتيجة النهائية (نظرة عامة)

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

تغيير مظهر العديد من عناصر Divi عند التمرير أو بعد نقرة

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

لإضافة وظيفة النقر ، استبدل 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('Précédent...');
            } else {
                $this.text('Suite...');
            }
        });
    });
})( jQuery );

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

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

تحميل DIVI Now !!!

وفي الختام

تعد القدرة على استهداف وتصميم عناصر متعددة على الصفحة عند تحريك الماوس فوق شيء ما أو النقر فوقه مهارة مفيدة في تصميم الويب. 

يمكنك استخدام هذه التقنية لمجموعة متنوعة من حالات الاستخدام (قبل وبعد ، CTA ، إلخ.)

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

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

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

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

...