Divi: كيفية إنشاء نموذج تسجيل دخول منبثق

هل ترغب في إنشاء ملف استمارتنا تسجيل الدخول المنبثق في Divi باستخدام أزرار تسجيل الدخول / تسجيل الخروج؟

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

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

يعد هذا أكثر ملاءمة من إعادة توجيه المستخدم إلى صفحة تسجيل دخول مخصصة.

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

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

دعونا نبدأ!

مسح

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

لاحظ كيف يتغير زر تسجيل الدخول وأزرار تسجيل الخروج على التوالي. وبمجرد تسجيل المستخدم الدخول ، يظلون في الصفحة الحالية. 

بالإضافة إلى ذلك ، يعرض نموذج تسجيل الدخول المنبثق محتوى "تحذير" مختلفًا في كل مرة يحاول المستخدم تسجيل الخروج.

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

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

قم باستيراد قالب العنوان "Crowdfunding Layout Pack" إلى أداة Divi Builder

للبدء ، قم بتنزيل رأس وتذييل حزمة Divi Crowdfunding Layout مجانًا . للقيام بذلك ، انتقل إلى مشاركة المدونة .

ثم أدخل بريدك الإلكتروني لتنزيل الملف المضغوط.

بعد ذلك ، قم بفك ضغط الملف حتى يكون جاهزًا للاستيراد.

لاستيراد الملف إلى محرر السمات ، اتبع الخطوات التالية:

1. انتقل إلى Divi> Theme Builder.
2. انقر على أيقونة قابلية النقل.
3. في نافذة قابلية النقل المنبثقة ، حدد علامة التبويب استيراد.
4. اختر الملف الذي تم تنزيله والذي تم فك ضغطه مسبقًا لاستيراده.
5. انقر استيراد Divi Theme Builder النماذج.
6. انقر فوق أيقونة التحرير لتحرير الرأس الذي تم استيراده.

إنشاء نموذج تسجيل الدخول المنبثق في Divi

الجزء 1: إنشاء أزرار تسجيل الدخول وتسجيل الخروج

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

في الصف العلوي من قسم الرأس ، احذف الوحدة النمطية متابعة وسائل التواصل الاجتماعي بجوار زر تسجيل الدخول في العمود 3.

اقرأ أيضا: Divi: مقارنة بين أنواع مختلفة من التدرجات

إنشاء زر تسجيل الدخول

لإنشاء زر تسجيل الدخول الخاص بنا ، افتح إعدادات وحدة الزر في العمود 3 من الصف العلوي.

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

• رمز الزر: رمز القفل (انظر لقطة الشاشة)
• وضع رمز الزر: الحق
• فقط إظهار الأيقونة عند التحويم للزر: لا
• الحشو: 0,5 بيم (علوي وسفلي) ، 2 بيم (يسار) ، 0,7 بيم (يمين)

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

• فئة CSS: زر تسجيل الدخول et-toggle-popup et-popup-login

إنشاء زر الخروج

لإنشاء زر تسجيل الخروج ، قم بتكرار زر تسجيل الدخول الموجود في العمود 3.

للمساعدة في التمييز بين الزرين ، يمكنك تحديث تسمية كل زر على التوالي. بعد ذلك ، افتح إعدادات وحدة الزر المكرر في العمود 3.

قم بتغيير نص الزر ليقرأ "تسجيل الخروج".

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

• رمز الزر: رمز فتح (انظر لقطة الشاشة)

تحت علامة التبويب متقدم، قم بتحديث زر CSS Classes كما يلي:

• فئة CSS: زر et-toggle-popup et-popup-logout

سيبقى الفصل الأول كما هو لكن الفصل الثاني سيكون مختلفًا.

الجزء 2: إنشاء القسم المنبثق

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

أسفل قسم الرأس ، أضف قسمًا عاديًا جديدًا.

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

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

قبل تحديث الصف ، افتح إعدادات القسم.

تحت علامة التبويب وصف المنتج، امنح القسم لون خلفية بيضاء:

• الخلفية: #ffffff

تحت علامة التبويب تصميم، قم بتحديث ما يلي:

• العرض: 100٪
• أقصى عرض: 800 بكسل (سطح المكتب) ، 80٪ (كمبيوتر لوحي) ، 100٪ (هاتف)
• محاذاة القسم: المركز
• الارتفاع: تلقائي (سطح المكتب والكمبيوتر اللوحي) ، 100٪ (الهاتف)
• إرتفاع max: 100٪
• المساحة المتروكة: 0 بكسل (أعلى وأسفل)

• الزوايا الدائرية: 10 بكسل
• Box Shadow: انظر لقطة الشاشة
• مربع الظل الوضع الرأسي: 0 بكسل
• قوة التعتيم: 100 بكسل
• انتشار القوة: 50 بكسل

تحت علامة التبويب متقدم، قم بتحديث ما يلي:

أضف فئة CSS مخصصة.

• فئة CSS: et-popup-login

أضف مقتطف CSS مخصصًا إلى العنصر الرئيسي:

overscroll-behavior: contain;

قم بتحديث خيارات الرؤية والموضع.

• الفائض الأفقي: مخفي
• الفائض العمودي: تلقائي
• المركز: ثابت
• المكان: مركز المركز
• الفهرس Z: 999999

إعدادات الخط

مع وجود إعدادات القسم في مكانها الصحيح ، افتح إعدادات الخط وقم بتحديث إعدادات التصميم التالية:

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• العرض: 100٪
• العرض الأقصى: 100٪
• الحشوة: 0 بكسل (أعلى) ، 5 فولت (أسفل)

الجزء 3: إنشاء أيقونة النافذة المنبثقة

لإنشاء أيقونة إغلاق منبثقة والتي ستغلق / تخفي النافذة المنبثقة عند النقر ، سنستخدم وحدة Blurb.

أضف وحدة Blurb جديدة إلى الصف.

افتح إعداد الوحدة واحذف العنوان والنص الأساسي.

ثم قم بإضافة الأيقونة كما يلي:

• استخدام الأيقونة: نعم
• الرمز: رمز "x" (انظر لقطة الشاشة)

تحت علامة التبويب تصميم، قم بتحديث ما يلي:

• لون الأيقونة: # 004e43
• محاذاة الصورة / الرمز: في الوسط
• استخدام حجم خط الأيقونة: نعم
• حجم خط الأيقونة: 50 بكسل
• العرض: 50 بكسل
• وحدة المحاذاة: صحيح
• الارتفاع: 50 بكسل

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

• فئة CSS: et-toggle-popup

الجزء 4: إنشاء نماذج تسجيل الدخول "تم تسجيل الدخول" و "تسجيل الخروج"

من أجل الحصول على محتوى وتصميم مختلفين لنموذج تسجيل الدخول عند تسجيل الدخول والخروج ، سننشئ وحدتين مختلفتين لنموذج تسجيل الدخول. 

الأول سيكون نموذج تسجيل الدخول الذي سيتم عرضه في كل مرة يتم فيها "تسجيل خروج" المستخدم. والثاني سيكون نموذج تسجيل الدخول الذي سيتم عرضه في كل مرة يقوم فيها المستخدم "بتسجيل الدخول".

إنشاء نموذج "تسجيل الخروج"

لإنشاء نموذج تسجيل الدخول "تسجيل الخروج" ، أضف وحدة تسجيل دخول جديدة أسفل رمز الوحدة النمطية Blurb داخل الصف.

افتح إعدادات الوحدة وقم بتغيير الإعدادات التالية:

علامة التبويب "المحتوى"

• إعادة التوجيه إلى الصفحة الحالية: نعم
• استخدام لون الخلفية: NO

علامة تبويب التصميم

• لون خلفية الحقول: rgba (0,78,67,0.05،XNUMX،XNUMX،XNUMX)
• لون خلفية التركيز الميداني: rgba (0,78,67,0,15،XNUMX،XNUMX،XNUMX،XNUMX)
• محاذاة النص: توسيط
• لون النص: غامق

• خط العنوان: بوبينز
• وزن خط العنوان: شبه عريض
• لون النص: # 000000
• ارتفاع خط العنوان: 1,3 م
• خط الجسم: Work Sans

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

ثم الصق أنماط الزر في مجموعة خيارات الأزرار في إعدادات الاتصال ضمن علامة التبويب تصميم.

بعد ذلك ، قم بتحديث أنماط الزر لنموذج تسجيل الدخول على النحو التالي:

• أزرار
  • لون النص: #ffffff
  • الخلفية: # 004e43
  • الخلفية (تحوم): # 00683c
  • عرض الحدود: 0 بكسل
  • المساحة المتروكة: 15 بكسل (أعلى وأسفل)

بعد ذلك ، قم بتحديث خيارات الحجم على النحو التالي:

• العرض: 100٪
• أقصى عرض: 80٪ (كمبيوتر مكتبي) ، 90٪ (كمبيوتر لوحي) ، 95٪ (هاتف)
• وحدة المحاذاة: المركز

علامة التبويب "خيارات متقدمة"

تحت علامة التبويب متقدم، قم بتحديث فئة CSS و CSS المخصص على النحو التالي:

• فئة CSS: et-logged-out-form

CSS مخصص لوصف الاتصال:

width: 100% !important;
float: none !important;

CSS مخصص لنموذج تسجيل الدخول:

width: 100% !important;
padding: 0px !important;

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

إنشاء نموذج "تسجيل الدخول"

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

لإنشاء نموذج تسجيل الدخول "تم تسجيل الخروج" ، قم بتكرار نموذج تسجيل الدخول الحالي.

بعد ذلك ، قم بتحديث التسمية لكل ملف أشكال اتصال على التوالي.

افتح الإعدادات المكررة (نموذج "تسجيل الدخول") وأضف عنوان الموقع كمحتوى ديناميكي إلى عنوان وحدة نموذج تسجيل الدخول.

ثم افتح إعدادات المحتوى الديناميكي لعنوان الموقع وقم بتحديث المحتوى قبل وبعد كما يلي:

• قبل ذلك: "أنت تحاول تسجيل الخروج من السمات الأنيقة"
• بعد، بعدما: ". " 

سيؤدي هذا إلى إنشاء إشعار ديناميكي لطيف للمستخدمين الذين يحاولون تسجيل الخروج من الموقع.

ثم أضف رأس H3 التالي إلى النص:

<h3>Are you sure?</h3>

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

• حدد علامة التبويب لينك تحت الخيار نص الجسم.
• خط الارتباط: Work Sans
• وزن خط الارتباط: شبه عريض
• نمط الخط: TT
• محاذاة نص الارتباط: توسيط
• لون نص الرابط: #ffffff

ملاحظة: لن تتمكن من معاينة هذه النتائج حتى تقوم بعرض النموذج على صفحة مباشرة.

تحت علامة التبويب متقدم، قم بتحديث فئة CSS و CSS المخصص على النحو التالي:

• فئة CSS: et-logged-in-form

CSS مخصص لنموذج تسجيل الدخول:

display:none;

الجزء 5: إضافة رمز مخصص

لإضافة CSS و JQuery المخصصين اللازمين لوظيفة نموذج تسجيل الدخول المنبثق ، قم بإنشاء وحدة رمز جديدة ضمن وحدة تسجيل الدخول الأخيرة.

CSS

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

/* hide popup section */
.et-popup-login {
  display: none;
}
 
/* hide login button when logged in */
.logged-in .et-popup-login-button {
  display: none !important;
}
 
/* hide logout button when logged out */
.et-popup-logout-button {
  display: none !important;
}
 
/* show logout button when logged in */
.logged-in .et-popup-logout-button {
  display: inline-block !important;
}
 
/* hide logged out form when logged in */
.logged-in .et-logged-out-form {
  display: none !important;
}
 
/* hide logged in form when logged out */
.et-logged-in-form {
  display: none !important;
}
 
/* show logged in form when logged in */
.logged-in .et-logged-in-form {
  display: block !important;
}
 
/* style logout link within logged in form */
.et-logged-in-form a {
  display: block;
  padding: 15px 1em;
  border-radius: 8px;
  background: #004e43;
  max-width: 400px;
  margin: 20px auto 0px;
}
.et-toggle-popup {
  cursor: pointer;
}
 
/* show hidden elements in visual builder */
body.et-fb .et-popup-login,
body.et-fb .et-logged-out-form {
  display: block !important;
}
body.et-fb .et-popup-login-button {
  display: inline-block !important;
}

لاحظ أن CSS يستخدم الفئة "المتصلة" المضمنة في WordPress لإخفاء/إظهار أزرار تسجيل الدخول/الخروج المقابلة وأزرار تسجيل الدخول/الخروج المقابلة. أشكال رسالة تسجيل الدخول "تسجيل الدخول"/"تسجيل الخروج" في كل مرة يقوم فيها المستخدم بتسجيل الدخول أو تسجيل الخروج.

مسج

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

(function ($) {
  $(document).ready(function () {
    $(".et-toggle-popup").click(function (e) {
      e.preventDefault();
      $(".et-popup-login").fadeToggle(500);
    });
  });
})(jQuery);

يعمل هذا المقتطف ببساطة على تبديل القسم المنبثق عندما ينقر المستخدم على أحد العناصر الثلاثة مع الفصل " و-تبديل-المنبثقة (أزرار تسجيل الدخول والخروج بالإضافة إلى رمز العرض التقديمي "x").

أنظر أيضا: Divi: كيفية استخدام إعدادات قناع الخلفية وخيارات تحويل النمط

لقد تم !

لا تنس حفظ التغييرات التي أجريتها على القالب في أداة إنشاء السمات. بمجرد الحفظ ، يمكنك عرض النتائج على صفحة مباشرة.

نتيجة نهائية

فيما يلي النتائج النهائية على الكمبيوتر والجهاز اللوحي والهاتف.

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

بالإضافة إلى ذلك ، يعرض نموذج تسجيل الدخول المنبثق محتوى "تحذير" مختلفًا في كل مرة يحاول المستخدم تسجيل الخروج.

تحميل DIVI الآن !!!

الاستنتاج.

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

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

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

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

لا تتردد في الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.

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

...