كيفية إنشاء صفحة تسجيل دخول مخصصة جميلة لموقعك على الويب

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

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

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

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

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

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

استخدم بسيط HTML / CSS

يتم إنشاء وتخصيص نموذج تسجيل الدخول في HTML و CSS في ثلاث خطوات سهلة: التعامل مع ترميز HTML ، ووضع العناصر المختلفة لنموذج تسجيل الدخول ، وأخيرًا ، تصميم العناصر المختلفة لجعلها تبدو جذابة.

ترميز HTML

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

[xhtml]
<div id = "container">
<form>
<label for = "username"> اسم المستخدم: </ label>
<نوع الإدخال = "text" id = "username" name = "
اسم المستخدم ">
<label for = "password"> كلمة المرور: </ label>
<input type = "password" id = اسم "password"
= "كلمة المرور">
<div id = "lower">
<input type = "checkbox"> <label for = "خانة الاختيار
"> احتفظ بتسجيل الدخول </ label>
<input type = "submit" value = "تسجيل الدخول">
</div>
</form>
</div>
[/ xhtml]

وضع العناصر

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

[المغلق]
html ، جسم {
العرض: 100٪؛
الارتفاع: 100٪؛
عائلة الخطوط: "Helvetica Neue"، Helvetica، sans
-صريف.
اللون: # 444 ؛
-تجانس -webkit-font-smoothing: antialiased.
الخلفية: # f0f0f0 ؛
}
[/ css]

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

[المغلق]
#حاوية {
الموقف: ثابت ؛
العرض: 340 بكسل ؛
الارتفاع: 280 بكسل ؛
أعلى: 50٪؛
اليسار: 50٪؛
أعلى الهامش: -140 بكسل ؛
الهامش الأيسر: -170 بكسل ؛
}
[/ css]

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

[المغلق]
شكل {
الهامش: 0 تلقائي ؛
أعلى الهامش: 20 بكسل ؛
}
ضع الكلمة المناسبة {
اللون: # 555 ؛
عرض: مضمنة كتلة ؛
الهامش الأيسر: 18 بكسل ؛
أعلى الحشو: 10 بكسل ؛
حجم الخط: 14 بكسل ؛
}
[/ css]

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

[المغلق]
السلطة الفلسطينية {
حجم الخط: 11 بكسل ؛
اللون: #aaa ؛
تعويم: صحيح ؛
أعلى الهامش: -13 بكسل ؛
الهامش الأيمن: 20 بكسل ؛
}
pa: تحوم {
اللون: # 555 ؛
}
إدخال {
عائلة الخطوط: "Helvetica Neue" ، Helvetica ،
بلا الرقيق؛
حجم الخط: 12 بكسل ؛
المخطط التفصيلي: لا شيء ؛
}
إدخال [نوع = نص] ،
إدخال [نوع = كلمة المرور] {
اللون: # 777 ؛
المساحة المتروكة: 10 بكسل ؛
الهامش: 10 بكسل ؛
أعلى الهامش: 12 بكسل ؛
الهامش الأيسر: 18 بكسل ؛
العرض: 290 بكسل ؛
الارتفاع: 35 بكسل ؛
}
[/ css]

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

[المغلق]
#أدنى {
الخلفية: # ecf2f5 ؛
العرض: 100٪؛
الارتفاع: 69 بكسل ؛
أعلى الهامش: 20 بكسل ؛
}
الإدخال [type = checkbox] {
الهامش الأيسر: 20 بكسل ؛
أعلى الهامش: 30 بكسل ؛
}
.التحقق من {
الهامش الأيسر: 3 بكسل ؛
}
إدخال [نوع = إرسال] {
تعويم: صحيح ؛
الهامش الأيمن: 20 بكسل ؛
أعلى الهامش: 20 بكسل ؛
العرض: 80 بكسل ؛
الارتفاع: 30 بكسل ؛
}
[/ css]

صمم عناصر النموذج

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

[المغلق]
الخلفية: #fff ؛
نصف قطر الحدود: 3 بكسل ؛
الحدود: 1px صلب #ccc ؛
مربع الظل: 0 1 بكسل 2 pxrgba (0 ، 0 ، 0 ، .1) ؛
[/ css]

ستؤدي إضافة الكود أعلاه إلى منطقة الحاوية إلى جعل رمز الحاوية يشبه الرمز أدناه:

[المغلق]
#حاوية {
الموقف: ثابت ؛
العرض: 340 بكسل ؛
الارتفاع: 280 بكسل ؛
أعلى: 50٪؛
اليسار: 50٪؛
أعلى الهامش: -140 بكسل ؛
الهامش الأيسر: -170 بكسل ؛
الخلفية: #fff ؛
نصف قطر الحدود: 3 بكسل ؛
الحدود: 1px صلب #ccc ؛
مربع الظل: 0 1 بكسل 2 pxrgba (0 ، 0 ، 0 ، .1) ؛
[/ css]

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

[المغلق]
الحدود: 1 بكسل صلب # c7d0d2 ؛
نصف قطر الحدود: 2 بكسل ؛
ظل الصندوق: أقحم 0 1.5 بكسل 3 بكسل rgba (190 ،
190 ، 190 ، .4) ، 0 0 0 5px # f5f7f8 ؛
}
[/ css]

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

[المغلق]
إدخال [نوع = كلمة المرور] {
اللون: # 777 ؛
المساحة المتروكة: 10 بكسل ؛
الهامش: 10 بكسل ؛
أعلى الهامش: 12 بكسل ؛
الهامش الأيسر: 18 بكسل ؛
العرض: 290 بكسل ؛
الارتفاع: 35 بكسل ؛
الحدود: 1 بكسل صلب # c7d0d2 ؛
نصف قطر الحدود: 2 بكسل ؛
ظل الصندوق: أقحم 0 1.5 بكسل 3 بكسل rgba (190 ،
190 ، 190 ، .4) ، 0 0 0 5px # f5f7f8 ؛
}
[/ css]

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

[المغلق]
حجم الخط: 14 بكسل ؛
وزن الخط: عريض ؛
اللون: #fff ؛
لون الخلفية: # acd6ef ؛ / * IE احتياطي * /
صورة الخلفية: -مجموعة ويب التدرج (خطي ،
أعلى اليسار ، أسفل اليسار ، من (# acd6ef) ، إلى (# 6ec2
ه 8)) ؛
صورة الخلفية: -موز-خطي-الانحدار (
أعلى اليسار 90 درجة ، # acd6ef 0٪ ، # 6ec2e8 100٪) ؛
صورة الخلفية: تدرج خطي (أعلى اليسار
90 درجة ، # acd6ef 0٪ ، # 6 ec2e8 100٪) ؛
نصف قطر الحدود: 30 بكسل ؛
الحد: 1 بكسل صلب # 66add6 ؛
مربع الظل: 0 1 بكسل 2 pxrgba (0 ، 0 ، 0 ، .3) ،
أقحم 0 1 بكسل 0 rgba (255 ، 255 ، 255 ، .5) ؛
المؤشر: المؤشر.
}
[/ css]

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

[المغلق]
إدخال [نوع = إرسال] {
تعويم: صحيح ؛
الهامش الأيمن: 20 بكسل ؛
أعلى الهامش: 20 بكسل ؛
العرض: 80 بكسل ؛
الارتفاع: 30 بكسل ؛
حجم الخط: 14 بكسل ؛
وزن الخط: عريض ؛
اللون: #fff ؛
لون الخلفية: # acd6ef ؛ / * IE احتياطي * /
صورة الخلفية: -مجموعة ويب التدرج (خطي ،
أعلى اليسار ، أسفل اليسار ، من (# acd6ef) ، إلى (# 6ec2
ه 8)) ؛
صورة الخلفية: -موز-خطي-الانحدار (
أعلى اليسار 90 درجة ، # acd6ef 0٪ ، # 6ec2e8 100٪) ؛
صورة الخلفية: تدرج خطي (أعلى اليسار
90 درجة ، # acd6ef 0٪ ، # 6 ec2e8 100٪) ؛
نصف قطر الحدود: 30 بكسل ؛
الحد: 1 بكسل صلب # 66add6 ؛
مربع الظل: 0 1 بكسل 2 pxrgba (0 ، 0 ، 0 ، .3) ،
أقحم 0 1 بكسل 0 rgba (255 ، 255 ، 255 ، .5) ؛
المؤشر: المؤشر.
}
[/ css]

نموذج تسجيل الدخول يبدو الآن جيدًا. من المستحسن ترك النموذج بهذه البساطة. بدلاً من إضافة عناصر أخرى وتشوش الصفحة ، يمكنك إضافة شعار عملك وصورة واحدة. يميل الزوار إلى التشتت بسبب الكثير من التفاصيل. Ergo ، سترغب في الحصول على صفحة تسجيل دخول إلى موقع الويب بسيطة بقدر ما يمكن أن تكون ولكنها لا تزال جميلة ومغرية تجعل الزائرين يعودون مرة أخرى. يمكنك أخذ أمثلة على نماذج تسجيل الدخول من بعض المواقع الشهيرة مثل Snoggle News و Dropbox و Freshbooks و MailChimp و Theidealist وغيرها. استخدمت مواقع الويب مثل Google و Facebook أيضًا أسلوب الحد الأدنى ، وتبدو صفحات تسجيل الدخول الخاصة بها رائعة بمجرد نموذج تسجيل الدخول وشعار الشركة وبعض التفاصيل الأخرى.

مربعات تسجيل الدخول إلى jQuery

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

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

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

قوالب نماذج تسجيل الدخول منشئ الموقع

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

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

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

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

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

سمات ومكونات الطرف الثالث

ثيمات

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

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

يمكن أن تكون السمات من منشئ موقع الويب الخاص بك ، أو السمات المميزة ، أو يمكن أن تكون من مطوري الطرف الثالث مثل Themeforest .

الإضافات

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

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

بعد تثبيت البرنامج المساعد ، سيُطلب منك تعديل العناصر المختلفة ؛ انقر فوق كل عنصر لتحريره ثم انقر فوق حفظ التغييرات. قم بإنشاء صفحة جديدة وإضافة النموذج الذي قمت بإنشائه باستخدام المكون الإضافي.

خاتمة

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

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