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

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

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

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

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

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

دعونا نبدأ!

مسح

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

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

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

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

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

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

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

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

بعد ذلك ، سيكون لديك لوحة قماش فارغة لبدء التصميم في 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 التالي. تأكد من وضع الكود بين وسمي <script> لأننا نضيف الكود إلى مستند 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 المخصص

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

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

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

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

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

(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 Now !!!

خاتمة

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

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

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

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

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

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

...