ایجاد یک صفحه ورود سفارشی در وردپرس با المنتور

Elementor یک افزونه فوق العاده برای صفحه ساز کشیدن و رها کردن است که توسط آن می توانید صفحات ورود سفارشی را در وردپرس درست مانند سرگرمی ایجاد کنید. اگر قبلاً با المنتور آشنایی دارید، عالی است و اگر تازه وارد این افزونه شده اید مشکلی نیست.

در این مقاله راهنمای دقیقی در مورد نحوه ایجاد یک صفحه ورود سفارشی در وردپرس با المنتور توضیح داده می شود. قبل از آن، ما یک بحث کوتاه در مورد محدودیت‌های یک صفحه ورود به سیستم پیش‌فرض و اینکه چرا ممکن است ایجاد یک صفحه ورود سفارشی در وردپرس را در نظر بگیرید، پوشش خواهیم داد. بیایید نحوه ایجاد یک صفحه ورود سفارشی در وردپرس با المنتور را شروع کنیم!

صفحه ورود سفارشی در وردپرس چیست؟

قبل از آموزش نحوه ایجاد یک صفحه ورود سفارشی در وردپرس با المنتور به این می پردازیم که اصلاً یک صفحه ورود سفارشی در وردپرس چیست.  یک صفحه ورود سفارشی در وردپرس با المنتور یک رابط کاربری منحصر به فرد و شخصی است که جایگزین صفحه ورود پیش فرض ارائه شده توسط وردپرس می شود. یک صفحه ورود سفارشی در وردپرس به کاربرانی که سعی می کنند وارد وب سایت وردپرس خود شوند، عناصر جذاب بصری و مارک دارتری را نشان می دهد.

پس ایجاد یک صفحه ورود سفارشی در وردپرس می تواند برای یک کاربر جذاب باشد. با این توضیحاتی که در مورد صفحه ورود سفارشی در وردپرس دادیم اکنون در تصویر زیر به صفحه ورود پیش فرض وردپرس نگاه کنید.

این صفحه ورود سفارشی در وردپرس معمولا شامل یک فرم پیش فرض با فیلدهای نام کاربری و رمز عبور، همراه با لوگوی استاندارد وردپرس است. اگرچه صفحه عملکرد خوبی دارد، اما فاقد گزینه های سفارشی سازی است. در واقع ممکن است با طراحی کلی و برند وب سایت مربوطه مطابقت نداشته باشد.

از سوی دیگر، صفحات ورود سفارشی به صاحبان وب سایت اجازه می دهد تا هویت برند و زیبایی طراحی خود را ارتقا دهند. این انعطاف‌پذیری را برای سفارشی کردن عناصر مختلف مانند رنگ، فونت، لوگو، پس‌زمینه و آیکون‌ها برای منحصربه‌فرد کردن رابط ارائه می‌دهد.

علاوه بر این، با ایجاد یک صفحه ورود سفارشی در وردپرس با المنتور می توانید برخی از ویژگی های امنیتی مانند CAPTCHA را برای جلوگیری از ورود کاربران ربات به سیستم اضافه کنید.

چرا باید از Elementor برای ایجاد یک صفحه ورود سفارشی در وردپرس استفاده کنید؟

یکی از بزرگترین دلایل انتخاب Elementor انعطاف پذیری فوق العاده طراحی آن است که به شما امکان می دهد هر صفحه ای را که می خواهید ایجاد کنید. به علاوه، دارای یک ویجت ورود جداگانه است. هنگامی که ویجت را بکشید و رها کنید، بلافاصله یک رابط ورود به سیستم با فیلدهای مورد نیاز مانند نام کاربری و رمز عبور ایجاد می شود.

پس از آن، می توانید فیلدها را سفارشی کنید، عناصر جدید اضافه کنید، رنگ ها را تغییر دهید و ویژگی های لازم را ارتقا دهید. در زیر لیستی از کارهای دیگری وجود دارد که می توانید با Elementor در صفحه ورود انجام دهید.

• برای ایجاد یک صفحه ورود سفارشی در وردپرس فیلدها را شخصی سازی کنید: نام کاربری، ایمیل و رمز عبور، از جمله برچسب های آنها
• هنگام ایجاد یک صفحه ورود سفارشی در وردپرس دکمه ورود را سفارشی کنید، متن، اندازه، سبک و تراز آن را تغییر دهید.
• برای ایجاد یک صفحه ورود سفارشی در وردپرسصفحه ای را مشخص کنید که کاربران پس از ورود به آن هدایت شوند.
• ایجاد یک صفحه ورود سفارشی در وردپرس با المنتور گزینه فراموشی رمز عبور و به خاطر بسپار را ویرایش کنید.
• ایجاد یک صفحه ورود سفارشی در وردپرس با المنتور صفحه را برای همه دستگاه ها کاملاً واکنش گرا کنید.
• ایجاد یک صفحه ورود سفارشی در وردپرس با المنتور افزونه های مربوطه را در صفحه ادغام کنید.

نحوه ایجاد یک صفحه ورود سفارشی در وردپرس با المنتور

Login ویجت ممتاز پلاگین Elementor است. شما باید نسخه پریمیوم افزونه را به همراه نسخه رایگان آن در سایت خود نصب کرده باشید. پس از نصب و فعال سازی افزونه ها، به بخش آموزش  ایجاد یک صفحه ورود سفارشی در وردپرس با المنتوربروید.

مرحله 01: برای ایجاد یک صفحه ورود  سفارشی در وردپرس، صفحه ورود را با Elementor باز کنید.

برای  ایجاد یک صفحه ورود سفارشی در وردپرس با المنتور وارد داشبورد وردپرس خود شوید. پس از پیمایش به صفحات > افزودن جدید Pages > Add New، صفحه جدیدی ایجاد کنید. ما صفحه ای با نام Login ایجاد کرده ایم. پس از آن، دکمه Edit with Elementor را فشار دهید . با این کار صفحه Elementor Canvas باز می شود.

مرحله 02: برای ایجاد یک صفحه ورود سفارشی در وردپرس، ساختار مورد نظر خود را روی بوم Canvas  تعریف کنید.

هنگامی که صفحه با Elementor باز می شود، محتوای غیر ضروری بسیاری از جمله سرصفحه و پاورقی را در صفحه خواهید دید. برای حذف محتوای غیر ضروری، به Settings > Page Layout > Elementor Full Width بروید. با این کار تمام محتوای صفحه به جز هدر و پاورقی حذف می شود.

نماد Plus (+) را در صفحه فشار دهید. این به شما امکان می دهد یک ساختار ستونی مناسب برای صفحه انتخاب کنید. در تصویر زیر می بینید که ما یک ساختار (طرح) تک ستونی را برای بخش انتخاب کرده ایم. ویجت Login را روی آن قرار می دهیم .

مرحله 03: برای ایجاد یک صفحه ورود سفارشی در وردپرس با المنتور با استفاده از ظرف Flexbox یک طرح بندی مناسب ایجاد کنید.

ظرف Flexbox را روی ستون بکشید و رها کنید. ظرف فلکس باکس یکی از ساده ترین راه ها برای ایجاد چیدمان دلخواه با انعطاف پذیری فوق العاده است. حتی می‌توانید ظروف فلکس‌باکس را در یک فلکس‌باکس قرار دهید و یک رابطه والدین و فرزند ایجاد کنید.

این فلکس باکس فعلی ظرف والدین ما خواهد بود. ما چند بلوک دیگر را برای ایجاد یک طرح در آن قرار می دهیم. قبل از آن باید جهت را مشخص کنیم. بخش Container را باز کنید . فلش سمت راست را در کنار گزینه Direction انتخاب کنید .

ویجت Container را بکشید و رها کنید تا جعبه‌های انعطاف‌پذیر بیشتری در ظرف اصلی اضافه کنید. ما سه فلکس باکس را برای ایجاد یک طرح سه ستونی اضافه کرده ایم. می توانید اندازه آنها را به صورت دستی تغییر دهید. مشکلی نیست!

مرحله 04: ویجت ورود را بکشید و رها کنید.

Login را در کادر جستجو در پنل Elementor تایپ کنید. هنگامی که ویجت Login در زیر ظاهر شد، آن را بکشید و در ستون مناسب روی بوم Elementor رها کنید.

اگر احساس می کنید که فرم ورود به هدر و پاورقی خیلی نزدیک است، جای نگرانی نیست. با استفاده از ویجت Spacer می توانید بین آنها فاصله ایجاد کنید .

ویجت Spacer را در flexbox والد اما از سه ستون فرزند که چندی پیش اضافه کردیم، بکشید و رها کنید . به طور مشابه، ویجت Spacer دیگری را به پایین ستون های فرزند اضافه کنید. فضاها به صورت خودکار ایجاد خواهند شد.

مرحله 05: برای ایجاد یک صفحه ورود سفارشی در وردپرس با المنتور فرم ورود را سفارشی و سبک کنید.

با کلیک بر روی نماد مداد در گوشه سمت راست بالای فرم، فرم ورود راLogin form انتخاب کنید. با این کار تب Content، Style و Advanced در پنل Elementor فعال می شود. با استفاده از این برگه ها می توانید عناصر و گزینه های مربوط به فرم ورود را سفارشی کنید.

برگه محتوا را کاوش کنید.

در تب Content گزینه Form Fields را باز کنید. ممکن است تصمیم بگیرید که برچسب های فرم را با toggling on/off روشن یاخاموش کردن گزینه Label  نشان دهید یا مخفی کنید.

اگر می‌خواهید اندازه کادرهای فرم را تغییر دهید، روی نماد کشویی کنار اندازه ورودی  Input Size کلیک کنید. لیست کشویی شامل گزینه های بسیار کوچک، کوچک، متوسط، بزرگ و فوق العاده بزرگ است . Extra Small, Small, Medium, Large و Extra Large.

گزینه Button را باز کنید. گزینه هایی برای سفارشی کردن متن Text، اندازه Size و تراز کردن Alignment دریافت خواهید کرد. گزینه Button Size به شما امکان می دهد بین Extra Small، Small، Medium، Large و Extra Large یکی را انتخاب کنید .

تب Advanced Options را باز کنید. گزینه هایی برای تغییر مسیر صفحات پیدا خواهید کرد. صفحات مورد نظر خود را در کادرهای Redirect After Login و Redirect After Logout کپی کنید. پس از آن، می توانید برچسب ها را تغییر دهید.

تب Style را کاوش کنید.

بعد از آن به تب Style بروید . سپس گزینه Form را گسترش دهید. می توانید با استفاده از Row Gap بین دکمه و کادرها در فرم Login فاصله اضافه کنید.

گزینه Label را باز کنید. می توانید فاصله بین برچسب ها را در فرم سفارشی کنید، از جمله رنگ متن  text color، برچسب label و تایپوگرافی typography.

سپس به بخش Fields بیایید. به شما اجازه داده می شود تایپوگرافی  typography مکان نگهدار، رنگ حاشیه، عرض حاشیه و شعاع حاشیه را سبک کنید. آنها را همانطور که می خواهید سفارشی کنید.

گزینه Button را باز کنید. شما همه گزینه ها را برای سبک سازی دکمه روی فرم دریافت خواهید کرد. می‌توانید تایپوگرافی typography ، رنگ پس‌زمینه background color، افکت شناور hover effect ، شعاع حاشیه border radius، و لایه‌بندی متن text padding آن را تغییر دهید.

به طور مشابه، گزینه Logged in Message و تب Advanced را در پنل Elementor کاوش کنید. کار و زمان زیادی نیاز نخواهد داشت.

مرحله 06: در صورت لزوم محتوای اضافی و سبک سازی اضافه کنید.

اگر از پس زمینه سفید خسته شده اید، می توانید با اعمال هر کد رنگی خاص یا هر تصویری، رنگ آن را تغییر دهید. به نحوه اعمال رنگ پس زمینه نگاهی بیندازید.

با کلیک بر روی نماد شش نقطه در بالا، کل flexbox والد را انتخاب کنید . به تب Style بروید و بخش Background را باز کنید. برای افزودن رنگ پس زمینه، از گزینه کنار رنگ اشاره شده در تصویر زیر استفاده کنید.

از گزینه Image می توانید تصویری را به عنوان پس زمینه به فرم اضافه کنید. Elementor Pro قبلاً مولد تصویر هوش مصنوعی را ادغام کرده است. می توانید از این گزینه برای ایجاد تصویر بر اساس درخواست ها و اضافه کردن آن به عنوان پس زمینه استفاده کنید.

مرحله 07: برای ایجاد یک صفحه ورود سفارشی در وردپرس با المنتور  صفحه ورود را ریسپانسیو کنید.

گزینه Responsive Mode را در پایین پنل Elementor فشار دهید. یک نوار بالای صفحه روی بوم Elementor با گزینه ای برای تغییر صفحه بین اندازه های مختلف صفحه نمایش داده می شود – دسکتاپ، تبلت و تلفن همراه .

بررسی کنید که آیا صفحه شما در همه اندازه‌های صفحه به خوبی کار می‌کند. اگر با هر دستگاه خاصی مشکل دارد، اندازه ارتفاع و عرض کادرها و دکمه، از جمله تایپوگرافی را تغییر دهید. سفارشی‌سازی که برای یک دستگاه خاص در صفحه اعمال می‌کنید منحصراً برای آن حفظ می‌شود.

مرحله 08: صفحه را منتشر و پیش نمایش کنید.

امیدوارم طرح شما آماده باشد. دکمه PUBLISH/UPDATE را در پایین پنل Elementor بزنید.

پیش نمایش صفحه ورود

شما می توانید ببینید که صفحه در انتهای ما به خوبی کار می کند. سعی کنید با استفاده از نام کاربری/آدرس ایمیل و رمز عبور معتبر وارد وبسایت خود شوید.

اما ممکن است در این صفحه با مشکل مواجه شوید. اگر به اشتباه رمز عبور را اشتباه وارد کنید، به صفحه ورود پیش فرض وردپرس هدایت می شوید. از شما خواسته می شود آدرس ایمیل خود را در صفحه پیش فرض برای بازیابی رمز عبور تایپ کنید. ممکن است از آن احساس انزجار کنید.

با این حال، این مشکل نیز راه حلی دارد. مهم نیست که چند بار رمز عبور را اشتباه تایپ کنید، در صفحه سفارشی شده باقی خواهید ماند. برای رفع مشکل باید یک افزونه نصب کنید.

نحوه رفع مشکلات فرم ورود سفارشی در وردپرس

به داشبورد وردپرس بروید. به Plugins > Add New بروید. Frontend Reset Password را در کادر جستجو تایپ کنید . افزونه را نصب و فعال کنید .

به صفحات > افزودن جدید  Pages > Add New بروید. یک صفحه جدید ایجاد کنید. ما Password Reset را به عنوان نام صفحه تنظیم کرده ایم. آن را منتشر Publish کنید . نیازی به اضافه کردن محتوایی به صفحه ندارید.

اکنون به Settings > Frontend Reset Password > Settings بروید. کد کوتاه [reset_password] را که روی تصویر مشخص کرده ایم کپی کنید.

پس از آن، لیست کشویی که در تصویر زیر مشخص شده است را زده و گزینه Password Reset را انتخاب کنید. این گزینه پس از اینکه چندی پیش صفحه بازنشانی رمز عبور را ایجاد کردید در لیست آمده است.

به انتهای صفحه بیایید و دکمه Save Changes را بزنید. اگر نمی‌توانید تغییرات را ذخیره کنید، پیکربندی به‌روزرسانی‌شده کار نخواهد کرد.

کد کوتاه را در صفحه Password Reset قرار دهید و در پایان آن را به روز Update کنید . حالا دوباره به صفحه Login رفته و گزینه Forget/Lost Password را فشار دهید . امیدواریم که صفحه به همین شکل باقی بماند.

سوالات متداول در مورد نحوه ایجاد یک صفحه ورود سفارشی در وردپرس با Elementor

اگرچه این یک پست آموزشی طولانی بوده است، اما امیدواریم که احساس خستگی نکرده باشید. در واقع، پرداختن به موضوعات جامع با کلمات محدود دشوار است. با این حال، اگر هنوز تازه کار هستید، در اینجا یک بخش سؤالات متداول وجود دارد که به برخی از رایج ترین سؤالات آنلاین پاسخ می دهد.

نتیجه گیری

ایجاد یک صفحه ورود سفارشی در وردپرس، در واقع ایجاد یک صفحه ورود ایمن و زیبا برای حفظ یکپارچگی و قابل اعتماد بودن آنلاین بسیار مهم است. اگر یک توسعه دهنده حرفه ای هستید و وب سایت هایی را برای مشتریان توسعه می دهید، ایجاد چنین صفحه ورود به سیستم سفارشی می تواند به شما کمک کند تا در ذهن آنها جذابیت ایجاد کنید. پس از خواندن این آموزش ایجاد یک صفحه ورود سفارشی در وردپرس با المنتور، امیدواریم متوجه شوید که ایجاد یک صفحه ورود سفارشی با Elementor کار دشواری نیست.

اگر این مقاله را دوست داشتید از سایر مقالات ما در سایت آموزش تکنیک های سئو، نحوه ایجاد یک صفحه جدید در وردپرس، نحوه نمایش پست های اخیر در وردپرس، آموزش طراحی سایت با المنتور  دیدن فرمایید.