كيفية إضافة نمط CSS Focus State إلى العناصر عند ملء نموذج Divi

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

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

هيا بنا نبدأ!

نظرة خاطفة

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

قم بتنزيل 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.

استخدام: focus-within CSS Pseudo-Class

نظرًا لأن Divi يحتوي بالفعل على خيارات مضمنة لتصميم حقل نموذج في حالة التركيز ، فإن هذا البرنامج التعليمي يدور حول توسيع نمط التركيز هذا إلى عناصر أخرى أيضًا. لتحقيق تصميم حالة التركيز الإضافي ، سنستخدم Divi Builder وبعض مقتطفات CSS المخصصة التي تستخدم : Focus pseudo-class.

لا تقلق ، فالأمر ليس معقدًا كما قد يبدو.

الفرق بين: التركيز و: التركيز داخل

:التركيز

على غرار : hover ، يتم استخدام : focus pseudo class in CSS لتطبيق النمط على عنصر متى كان في حالة التركيز. عادة ما يتم تشغيل حالة التركيز عن طريق النقر فوق عنصر مثل حقل الإدخال في النموذج. على سبيل المثال ، بمجرد نقر المستخدم داخل حقل نموذج ، فإنه ينشط حالة التركيز للحقل. هذا يسمح لك باستخدام : focus psuedo class لاستهداف نمط هذا الحقل في CSS.

: التركيز داخل

: التركيز على أهداف الفئة الزائفة (أو يمثل) تصميم العنصر الموجود في حالة التركيز. ومع ذلك ، فإن : Focus-within pseudo-class يأخذ هذه خطوة إلى الأمام. تستهدف : focus-within pseudo class تصميم العنصر موضع التركيز وأيضًا أي عنصر يحتوي على عنصر في التركيز . هذا يعني أنه يمكنك استهداف أي عنصر أصلي للعنصر قيد التركيز وتطبيق هذه الأنماط أثناء التركيز على العنصر. بمعنى آخر ، يمكنني النقر داخل حقل النموذج وتغيير لون خلفية حقل النموذج (باستخدام : التركيز ) واستخدام لون خلفية القسم الأصل لحقل النموذج في نفس الوقت (باستخدام : التركيز داخل ).

إضافة نمط حالة التركيز إلى العناصر عند ملء نموذج Divi

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

أضف تخطيط Premade

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

تحديث إعدادات نموذج الاتصال

في تخطيط صفحة جهة الاتصال ، افتح إعدادات وحدة نموذج جهة الاتصال وقم بتحديث العنوان بالنص "ابق على اتصال".

أسلوب التركيز الميداني

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

• تركيز الحقول لون الخلفية: rgba (255،107،90،0.15)
• لون نص التركيز على الحقول: # 000000

سيؤدي هذا إلى نمط حالة التركيز للحقل الفعلي (خيار أصلي ملائم لإعدادات Divi Builder).

نموذج الاتصال فئة CSS

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

• فئة CSS: تركيز على شكل divi

سيكون هذا هو الفصل الذي نستخدمه لاستهداف أنماط النماذج عندما يتم التركيز على حقل النموذج.

تحديث إعدادات العمود

بعد ذلك ، افتح إعدادات العمود الأصل لنموذج الاتصال.

حشوة

• المساحة المتروكة: 5٪ أعلى ، 5٪ أسفل ، 3٪ يسار ، 3٪ يمين

فئة العمود CSS

ضمن علامة التبويب خيارات متقدمة ، امنح العمود فئة CSS التالية:

• فئة CSS: تركيز عمود divi

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

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

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

• فئة CSS: تركيز قسم divi

إضافة CSS مخصص مع وحدة التعليمات البرمجية

كما تمت مناقشته سابقًا ، سنستخدم : التركيز على فئة CSS الزائفة لتصميم عناصر Divi الأخرى عندما يتم التركيز على حقل النموذج. لقد تم بالفعل منح العناصر التي سنقوم بتنسيقها (النموذج والعمود والقسم) فئة مخصصة يمكننا استخدامها لاستهدافها في CSS لدينا ("divi-form-focus" ، "divi-column-focus" ، "قسم قسم divi التركيز").

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

ثم الصق الكود التالي داخل منطقة محتوى الكود:

تأكد من التفاف الكود بعلامات النمط الضرورية.

  /*add smooth transitions for focus state styles*/
  .divi-form-focus, .divi-column-focus, .divi-section-focus, .divi-form-focus h2 {
    transition: all 300ms
  }
  
  /*style form module h2 heading in form focus state*/
  .divi-form-focus:focus-within h2 {
    font-size: 14px !important;
    color: #888888;
  }
  
  /*style parent column in form focus state*/
  .divi-column-focus:focus-within {
		background: #ffffff;
    transform: scale(1.2);
    box-shadow: 0 0 30px rgba(0,0,0,0.2);
  }
  
  /*style parent section in form focus state*/
  .divi-section-focus:focus-within {
    background: rgba(255,107,90,0.15);
  }
 

لاحظ أن كل من مقتطفات CSS التي تحتوي على فئة CSS للعنصر (على سبيل المثال "divi-column-form") تحتوي على : focus-within pseudo-class لتمثيل نمط فئة العنصر تلك عندما يكون حقل النموذج مُركّزًا. يقوم أحد المقتطفات بتنسيق h2 (أو العنوان) للنموذج في حالة تركيز النموذج. يقوم أحد المقتطفات بتصميم العمود الأصل في حالة تركيز النموذج. ويقوم أحد المقتطفات بتصميم القسم الأصل في حالة تركيز النموذج.

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

هنا هو النتيجة النهائية. لاحظ كيف تغير العناصر المختلفة النمط عند ملء النموذج.

افكار اخيرة

يمكن أن تؤدي إضافة أنماط تركيز CSS إلى العناصر عند ملء نموذج في Divi إلى تعزيز تجربة المستخدم في إرسال النموذج. المفتاح هو استخدام : focus-within pseudo class جنبًا إلى جنب مع الفئات المخصصة التي تضيفها إلى العناصر التي تريد تصميمها عندما يكون النموذج في حالة التركيز. يمكن القيام بذلك باستخدام الحد الأدنى من CSS المخصص المضاف إلى الصفحة ، وإذا كنت معتادًا على إضافة CSS المخصص الخاص بك ، فإن الاحتمالات هائلة.

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

هتافات!