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

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

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

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

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

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

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

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

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

ترميز HTML

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

<div id="container">
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="
username">
<label for="password">Password:</label>
<input type="password" id="password" name
="password">
<div id="lower">
<input type="checkbox"><label for="checkbox
">Keep me logged in</label>
<input type="submit" value="Login">
</div>
</form>
</div>

وضع العناصر

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

html, body {
width: 100 %;
height: 100 %;
font-family: "Helvetica Neue" , Helvetica, sans
-serif;
color: # 444 ;
-webkit-font-smoothing: antialiased;
background: #f0f0f0;
}

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

#container {
position: fixed;
width: 340px;
height: 280 px;
top: 50%;
left: 50%;
margin-top: -140 px;
margin-left: -170 px;
}

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

form {
margin: 0 auto;
margin-top: 20 px;
}
label {
color: # 555 ;
display: inline-block;
margin-left: 18 px;
padding-top: 10px;
font-size: 14px;
}

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

p a {
font-size: 11px;
color: #aaa;
float: right;
margin-top: -13 px;
margin-right: 20 px;
}
p a:hover {
color: # 555 ;
}
input {
font-family: "Helvetica Neue" , Helvetica,
sans-serif;
font-size: 12px;
outline: none;
}
input[type=text],
input[type=password] {
color: # 777 ;
padding-left: 10px;
margin: 10 px;
margin-top: 12 px;
margin-left: 18 px;
width: 290px;
height: 35px;
}

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

#lower {
background: #ecf2f5;
width: 100%;
height: 69px;
margin-top: 20 px;
}
input[type=checkbox] {
margin-left: 20 px;
margin-top: 30 px;
}
.check {
margin-left: 3px;
}
input[type=submit] {
float: right;
margin-right: 20 px;
margin-top: 20 px;
width: 80px;
height: 30px;
}

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

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

background: #fff;
border-radius: 3px;
border: 1px solid #ccc;
box-shadow: 0 1 px 2 pxrgba( 0 , 0, 0, .1 );

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

#container {
position: fixed;
width: 340px;
height: 280 px;
top: 50 %;
left: 50 %;
margin-top: -140 px;
margin-left: -170 px;
background: #fff;
border-radius: 3px;
border: 1px solid #ccc;
box-shadow: 0 1 px 2 pxrgba( 0 , 0, 0, .1 );

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

border: 1 px solid #c7d0d2;
border-radius: 2px;
box-shadow: inset 0 1.5 px 3px rgba( 190 ,
190 , 190 , .4 ), 0 0 0 5px #f5f7f8;
}

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

input[type=password] {
color: # 777 ;
padding-left: 10px;
margin: 10 px;
margin-top: 12 px;
margin-left: 18 px;
width: 290px;
height: 35px;
border: 1px solid #c7d0d2;
border-radius: 2px;
box-shadow: inset 0 1.5 px 3px rgba( 190 ,
190 , 190 , .4 ), 0 0 0 5px #f5f7f8;
}

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

font-size: 14 px;
font-weight: bold;
color: #fff;
background-color: #acd6ef; /*IE fallback*/
background-image: -webkit-gradient(linear,
left top, left bottom, from (#acd6ef), to(# 6ec2
e8));
background-image: -moz-linear-gradient(
top left 90deg, #acd6ef 0 %, # 6ec2e8 100%);
background-image: linear-gradient(top left
90 deg, #acd6ef 0%, # 6 ec2e8 100 %);
border-radius: 30px;
border: 1px solid # 66add6;
box-shadow: 0 1 px 2 pxrgba( 0 , 0, 0, .3 ),
inset 0 1px 0 rgba( 255 , 255 , 255 , .5 );
cursor: pointer;
}

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

input[type=submit] {
float: right;
margin-right: 20 px;
margin-top: 20 px;
width: 80px;
height: 30px;
font-size: 14px;
font-weight: bold;
color: #fff;
background-color: #acd6ef; /*IE fallback*/
background-image: -webkit-gradient(linear,
left top, left bottom, from (#acd6ef), to(# 6ec2
e8));
background-image: -moz-linear-gradient(
top left 90deg, #acd6ef 0 %, # 6ec2e8 100%);
background-image: linear-gradient(top left
90 deg, #acd6ef 0%, # 6 ec2e8 100 %);
border-radius: 30px;
border: 1px solid # 66add6;
box-shadow: 0 1 px 2 pxrgba( 0 , 0, 0, .3 ),
inset 0 1px 0 rgba( 255 , 255 , 255 , .5 );
cursor: pointer;
}

نموذج تسجيل الدخول يبدو الآن جيدًا. من المستحسن ترك النموذج بهذه البساطة. بدلاً من إضافة عناصر أخرى وتشوش الصفحة ، يمكنك إضافة شعار عملك وصورة واحدة. يميل الزوار إلى التشتت بسبب الكثير من التفاصيل. 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. تشبه السمات القوالب الخاصة بموقع الويب بالكامل والتي تجلب أنماطًا مختلفة ومع معظمها ، ستتمكن من الحصول على صفحة تسجيل دخول أنيقة وجذابة ؛ لا يؤثر المظهر على صفحة تسجيل الدخول فحسب ، بل يؤثر أيضًا على الجوانب الأخرى لموقع الويب الخاص بك.

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

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

الإضافات

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

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

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

استنتاج

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

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