فرم ورود ایجکس در المنتور

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

login elementor aylinweb 1 - ساخت فرم ورود ایجکس در المنتور
فرم لاگین پیشفرض وردپرس

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

طراحی فرم لاگین ایجکس با المنتور

در ابتدا در پیشخوان وردپرس، بیاید به منوی قالب ها و روی پاپ آپ کلیک کنید (همانند شکل زیر)

login elementor aylinweb 2 - ساخت فرم ورود ایجکس در المنتور
فرم ورود به صورت پاپ آپ در وردپرس

در پنجره ای که باز می شود نوع قالب رو بر روی پاپ آپ قرار بدید و یک نام هم برای این فرم پاپ آپ انتخاب کنید و در آخر هم بر روی ایجاد قالب کلیک کنید (همانند شکل زیر) :

login elementor aylinweb 3 - ساخت فرم ورود ایجکس در المنتور
ایجاد فرم ورود در المنتور

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

مطلب پیشنهادی :   ابزارک جدید المنتور پرو - اضافه شدن فهرست محتوا

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

login elementor aylinweb 4 - ساخت فرم ورود ایجکس در المنتور
طراحی فرم ورود یا لاگین در المنتور

برای تغییر رنگ پس زمینه میتوانید به زبانه استایل برید و گزینه پوشش انتخاب کنید و در پس زمینه هم میتونید رنگ خودتون رو انتخاب کنید. من در این جا از رنگ سفید استفاده کردم.

login elementor aylinweb 5 - ساخت فرم ورود ایجکس در المنتور
میتوانید رنگ پسزمینه رو انتخاب کنید

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

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

login elementor aylinweb 6 - ساخت فرم ورود ایجکس در المنتور
ساخت فرم لاگین حرفه ای در المنتور

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

login elementor aylinweb 7 - ساخت فرم ورود ایجکس در المنتور
طراحی فرم ورود در المنتور

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

در آخر هم باید فرمی همانند شکل زیر داشته باشید …

login elementor aylinweb 8 - ساخت فرم ورود ایجکس در المنتور
ایجاد فرم لاگین کاربر در المنتور

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

مطلب پیشنهادی :   ساخت فوتر پنهان در المنتور (قدم به قدم)
LoginForm customize aylinweb - ساخت فرم ورود ایجکس در المنتور
شخضی سازی فرم ورود وردپرس با المنتور

دکمه : در زیر منوی دکمه هم میتوانید تنظیمات مربوط به دکمه فرم رو شخصی سازی کنید، این تنظیمات شامل اندازه، رنگ، محل قرارگیری و … می شود.

تنظیمات اضافی :در این بخش هم میتوانید تنظیمات اضافی فرم  ورود رو شخصی سازی کنید، این تنظیمات شامل عملیات ورود و خروج کاربر، لیبل ها یا برچسب های مربوط به فرم، عملیات مربوط به فراموش کردن رمز … می باشد.

login elementor aylinweb 9 - ساخت فرم ورود ایجکس در المنتور
تنظیمات اضافی فرم ورود

زیبا سازی فرم ورود ایجکس در المنتور

در این بخش هم میخواهیم تا فرم ورودمون رو یکم شخصی سازی و زیباتر، شما میتوانید هر کاری میخواهید بر روی فرم ورود انجام دهید مونده به سلیقتون که چه فرمی رو دوست داشته باشید. (می توانید از المانهای المنتور برای زیبا سازی استفاده کنید)

login elementor aylinweb 10 - ساخت فرم ورود ایجکس در المنتور
فرم ورود شخصی سازی شده

بعد از اینکه تمامی تغییرات رو روی فرم ورود در المنتور اعمال کردید، بر روی دکمه انتشار کلیک کنید.

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

login elementor aylinweb 11 1 - ساخت فرم ورود ایجکس در المنتور
قرار دادن فرم ورود المنتور

مرحله آخر : قرار دادن فرم در سایت

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

مطلب پیشنهادی :   آموزش ساخت باکس محصول شبیه دیجی کالا با المنتور
login elementor aylinweb 12 - ساخت فرم ورود ایجکس در المنتور
قرار دادن فرم در صفحه ساخته شده با المنتور

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

login elementor aylinweb 13 - ساخت فرم ورود ایجکس در المنتور
انتخاب پاپ آپ در صفحه

بعد از اینکه گزینه پاپ آپ رو انتخاب کردید در سمت راست رو آیکون چرخ دنده کلیک کنید تا تنظیمات رو اعمال کنیم.

بعد از اینکه بر روی آیکون کلیک کردید در زیر منوی باز شده عمل رو بر روی گزینه بازکردن (پاپ آپ) کلیک کنید. سپس در بخش پاپ آپ باید فرمی که ساختید رو انتخاب کنید.

در این آموزش نام فرم ما فرم ورود (قالب) هست که باید این گزینه رو انتخاب کنید.

خب دیگه کار تموم شد و اگه یه پیشنمایش از وب سایت بگیرید و روی دکمه ورود و ثبت نام کلیک کنید تا فرم ورود باز شود.

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

17 دیدگاه

  • Author's gravatar
    akbar 8th نوامبر 2019 , 12:26 ق.ظ

    سللام استاد عزیز آقای شعبانی ،برای ساخت ثبت نام کاربر هم به همین طریقه است.؟
    با تشکر.

    پاسخ
  • Author's gravatar
    akbar 8th نوامبر 2019 , 12:46 ق.ظ

    سلام استاد عزیز آقای شعبانی ،برای ساخت عضویت باید از همین روش استفاده کنیم؟
    با تشکر

    پاسخ
    • Author's gravatar
      محمود شعبانی 8th نوامبر 2019 , 11:36 ق.ظ

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

      پاسخ
  • Author's gravatar
    akbar 16th نوامبر 2019 , 4:42 ب.ظ

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

    پاسخ
    • Author's gravatar
      محمود شعبانی 16th نوامبر 2019 , 5:12 ب.ظ

      سلام ممنونم
      اگه المان ورود رو قراراده باشید باید بدون مشکل اجرا بشه ولی قبلش چک کنید که با ادمین وارد نشده باشید.
      توی یه مرورگر دیگه چک کنین.

      پاسخ
  • Author's gravatar
    akbar 23rd نوامبر 2019 , 5:40 ق.ظ

    با تشکر مشکل حل شد.

    پاسخ
  • Author's gravatar
    رضوی 10th دسامبر 2019 , 10:28 ق.ظ

    سلام وقت بخیر،
    آیا امکان برقراری اتباط این افزونه با سرویس دهنده فراپیامک وجود دارد؟ چگونه؟

    پاسخ
    • Author's gravatar
      محمود شعبانی 10th دسامبر 2019 , 1:18 ب.ظ

      سلام دوست عزیز
      نه متاسفانه به صورت مستقیم نمیشه این کار رو انجام داد ولی با یکم شخصی سازی و کدنویسی با افزونه های رایگان میشه این کار رو انجام داد.

      پاسخ
  • Author's gravatar
    nami 14th مارس 2020 , 1:13 ب.ظ

    ای کاش این مطالب به صورت فیلم باشه هرچند که اموزش خوبی هست به نظرم اموزشهای تصویری بهتر از اموزش های متنی هست
    با تشکر

    پاسخ
    • Author's gravatar
      محمود شعبانی 15th مارس 2020 , 10:26 ب.ظ

      حتما توی لیست قرار میگیره و ضبط میشه
      ممنون از اطلاعتون

      پاسخ
  • Author's gravatar
    احسان 31st مارس 2020 , 8:21 ب.ظ

    سلام
    من همه روش گفته شدم رفتم اما وقتی روی دکمه ورود کلید می هیچی نمیاد و این پیج سفید باز میشه about:blank#blocked

    مشکل از کجاست به نظر شما ؟

    پاسخ
    • Author's gravatar
      محمود شعبانی 3rd آوریل 2020 , 11:40 ب.ظ

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

      پاسخ
  • Author's gravatar
    مظهر 7th می 2020 , 10:48 ق.ظ

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

    پاسخ
    • Author's gravatar
      محمود شعبانی 9th می 2020 , 1:55 ق.ظ

      سلام ممنونم
      دقیقا مشکل رو متوجه نشدم ولی برای این مورد طی همین دیدگاه یک تصویر بفرستید تا چک کنم

      پاسخ
  • Author's gravatar
    ابوالفضل 8th می 2020 , 2:42 ق.ظ

    سلام
    این سوالهای امنیتی را چطوری اضافه کنم.
    مــثلا 2+چهار چند میشه؟

    پاسخ
    • Author's gravatar
      محمود شعبانی 9th می 2020 , 1:58 ق.ظ

      سلام دوست عزیز
      برای این مورد افزونه های متعددی موجود هست و با یک سرچ عبارت “wp captcha plugin” میتونید فزونه های مورد نظر رو پیدا کنید.

      پاسخ

دیدگاهتان را بنویسید

مطالب داغ