كيفية إضافة ملصقات عائمة إلى حقول النموذج في Divi

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

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

هيا بنا نبدأ!

نظرة خاطفة

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

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

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

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

تنزيل مجاني

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

تحميل

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

https://youtu.be/j1m14XFztdc

اشترك في قناتنا على اليوتيوب

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

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

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

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

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

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

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

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

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

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

إضافة تسميات عائمة إلى حقول النموذج في Divi

بناء نموذج البريد الإلكتروني

أضف صفًا من عمود واحد إلى القسم الافتراضي في Divi Builder.

أضف نموذج Email Optin إلى العمود.

افتح صيغة إعدادات البريد الإلكتروني. ضمن علامة تبويب المحتوى ، قم بتحديث نص العنوان وحذف النص الأساسي.

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

بعد ذلك ، أضف لون الخلفية التالي إلى خيار البريد الإلكتروني:

• لون الخلفية: # 1f4b74

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

• التخطيط: الجسم في الأعلى ، النموذج في الأسفل

ثم قم بتحديث أنماط الحقول على النحو التالي:

• لون خلفية الحقول: شفاف
• لون نص الحقول: #ffffff
• هامش الحقول: 1.5em أعلى
• حشوة الحقول: 0.5 مللي متر علوي ، 0.5 مللي متر أسفل ، 1 مللي متر يسار ، 1 مللي متر يمين
• حجم نص الحقول: 1.2em
• ارتفاع خط الحقول: 2em

بعد ذلك ، قم بتحديث أنماط حدود الحقل:

• زوايا الحقول المستديرة: 0 بكسل
• عرض الحد السفلي للحقول: 2 بكسل
• لون الحد السفلي للحقول: #ffffff

لنقم أيضًا بتحديث أنماط خط العنوان:

• وزن خط العنوان: غامق
• نمط خط العنوان: TT
• محاذاة نص العنوان: الوسط

والآن دعنا نمضي قدمًا ونصمم الزر.

• استخدام الأنماط المخصصة للزر: نعم
• لون نص الزر: # 1f4b74
• لون خلفية الزر: #ffffff
• تباعد حرف الزر: 0.1em
• وزن خط الزر: غامق
• نمط خط الزر: TT

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

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

أخيرًا ، نحتاج إلى إضافة فئة CSS إلى الوحدة النمطية حتى نتمكن من استهدافها باستخدام كود CSS و JQuery في الخطوة التالية.

إضافة الكود الجمركي

لإضافة CSS و JQuery مخصصين ، أضف وحدة رمز نمطية ضمن وحدة نموذج الاشتراك في البريد الإلكتروني.

CSS

في مربع محتوى التعليمات البرمجية ، الصق CSS التالية مع التأكد من التفاف CSS في علامات الأنماط الضرورية:

.et-float-labels p {
  position: relative !important;
}

.et-float-labels .et_pb_contact_form_label {
  display: block !important;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 1em;
  padding: 0 1em;
  transform: translateY(0%);
  transform-origin: left;
  color: #ffffff;
  font-size: 1.2em;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  z-index: 0;
}

.et-float-labels .et_pb_contact_form_label.active {
  visibility: visible;
  opacity: 0.6;
  top:0;
  transform: translateY(-100%) scale(0.9);
}

.et_pb_module.et-float-labels form p .input::-webkit-input-placeholder {
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.et_pb_module.et-float-labels form p .input::-moz-placeholder {
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.et_pb_module.et-float-labels form p .input:-ms-input-placeholder {
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.et_pb_module.et-float-labels form p .input:-moz-placeholder {
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}  
.et_pb_module.et-float-labels form p .input::placeholder {
  transition: all 0.4s ease-in-out;
}

.et_pb_module.et-float-labels form p .input:focus::-webkit-input-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus::-moz-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus:-moz-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus:-ms-input-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus::placeholder {
  color: transparent !important;
}

مسج

تحت علامة نمط النهاية ، الصق JQuery التالية ولفها بعلامات البرنامج النصي الضرورية.

jQuery(document).ready(function ($) {
  var $floatLabelInput = $(".et-float-labels .input");
  $floatLabelInput.on("focus", function (e) {
    $(e.target).prev().addClass("active");
    e.stopPropagation();
  });
  $floatLabelInput.on("blur", function (e) {
    if (!$(e.target).val()) {
      $(e.target).prev().removeClass("active");
    } else {
      $(e.target).prev().addClass("active");
    }
  });
});

تحطيم القانون

حول CSS

أولاً ، نستهدف الحقول ونمنحها موضعًا نسبيًا حتى نتمكن من إعطاء عنصر التسمية موضعًا مطلقًا داخل الحقل (أو العنصر p).

.et-float-labels p {
  position: relative !important;
}

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

.et-float-labels .et_pb_contact_form_label {
  display: block !important;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 1em;
  padding: 0 1em;
  transform: translateY(0%);
  transform-origin: left;
  color: #ffffff;
  font-size: 1.2em;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  z-index: 0;
}

ثم نعرض التسمية وقياسها وترجمتها (نقلها) باستخدام رسم متحرك للشرائح لأعلى بمجرد استلامها للفئة "النشطة" التي يتحكم فيها JQeury.

.et-float-labels .et_pb_contact_form_label.active {
  visibility: visible;
  opacity: 0.6;
  top:0;
  transform: translateY(-100%) scale(0.9);
}

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

.et_pb_module.et-float-labels form p .input::-webkit-input-placeholder {
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.et_pb_module.et-float-labels form p .input::-moz-placeholder {
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.et_pb_module.et-float-labels form p .input:-ms-input-placeholder {
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.et_pb_module.et-float-labels form p .input:-moz-placeholder {
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}  
.et_pb_module.et-float-labels form p .input::placeholder {
  transition: all 0.4s ease-in-out;
}

.et_pb_module.et-float-labels form p .input:focus::-webkit-input-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus::-moz-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus:-moz-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus:-ms-input-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus::placeholder {
  color: transparent !important;
}

حول مسج

أولاً ، نحدد المتغير floatLabelInput $ كعنصر إدخال في كل حقل نموذج.

  var $floatLabelInput = $(".et-float-labels .input");

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

  $floatLabelInput.on("focus", function (e) {
    $(e.target).prev().addClass("active");
    e.stopPropagation();
  });

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

  $floatLabelInput.on("blur", function (e) {
    if (!$(e.target).val()) {
      $(e.target).prev().removeClass("active");
    } else {
      $(e.target).prev().addClass("active");
    }
  });

تتيح إضافة وإزالة الفصل باستخدام معالجات الأحداث "التركيز" و "التعتيم" (بدلاً من "النقر") للمستخدم رؤية التأثير حتى عند التنقل باستخدام لوحة مفاتيح فقط (على سبيل المثال ، الضغط على علامة التبويب للتنقل بين الحقول).

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

فيما يلي النتيجة النهائية لملصقاتنا العائمة في حقول النموذج في نموذج خيار بريد إلكتروني Divi.

افكار اخيرة

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

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

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

هتافات!