رفتن به محتوای اصلی

نحوه طراحی فرم ورود آنلاین برای یک هدر جهانی سفارشی در دیوی

Divi: ساده ترین قالب وردپرس برای استفاده

Divi: بهترین تم وردپرس تمام وقت!

بیشتر دانلود 901.000، Divi محبوب ترین تم وردپرس در جهان است. این کامل، آسان برای استفاده است و همراه با بیش از قالب های رایگان 62. [توصیه شده]

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

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

نمای کلی نتایج

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

فرم اتصال Divi

و در اینجا فرم ورود به سیستم آنلاین در صفحه رایانه لوحی و تلفن وجود دارد.

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

فرم ورود آنلاین

آنچه شما باید برای شروع کار

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

افزودن یک عنوان جهانی جدید

برای ادامه کار باید یک عنوان جهانی جدید برای وب سایت خود ایجاد کنیم. برای این کار به داشبورد وردپرس رفته و به بخش Divi> Theme Builder بروید.

در الگوی پیش فرض وب سایت ، روی "افزودن یک هدر جهانی" کلیک کنید و سپس بر روی "ایجاد یک هدر جهانی" کلیک کنید.

ایجاد divi global head

سپس گزینه Build from scratch را انتخاب کنید.

ساختن از ابتدا

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

بخش سفارشی سازی

از طریق Global Header Layout Editor می توانید هدر سفارشی سایت خود را کاملاً ایجاد کنید. برای شروع ، تنظیمات بخش عادی را باز کنید و موارد زیر را به روز کنید:

  • شیب زمینه رنگ چپ:
  • شیب زمینه درست:
  • جهت شیب: 48 درجه
  • padding: 10 پیکسل در بالا ، 10 پیکسل در پایین ، 20 پیکسل در سمت چپ ، 20 پیکسل در سمت راست
در قسمت divi سفارشی کنید

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

display:flex;justify-content:center;align-items:center;

اضافه کردن کد css divi

آرم هدر را به خط اول اضافه کنید

اکنون که بخش آماده است ، می توانیم خط اول را اضافه کنیم.

یک ردیف اضافه کنید

در این بخش یک ردیف به ستون اضافه کنید.

یک ستون هدر divi اضافه کنید

یک ماژول تصویر با یک تصویر آرم اضافه کنید

در ردیف تک ستون ، یک ماژول تصویر اضافه کنید. این جایی است که ما آرم را برای عنوان اضافه می کنیم.

به راحتی وب سایت خود را با Elementor بسازید

Elementor به شما امکان می دهد تا با طراحی حرفه ای هر طراحی وب سایت را به راحتی ایجاد کنید. هزینه کارهایی را که می توانید انجام دهید ، متوقف نکنید. [رایگان]

یک تصویر ماژول divi اضافه کنید

حاشیه ماژول تصویر و تصویر را به روز کنید

تنظیمات تصویر را به صورت زیر به روز کنید:

  • تصویر: [اضافه کردن آرم (تقریبا 64 پیکسل با 64 پیکسل)]
تصویر و حاشیه تقسیم آن را سفارشی کنید
  • حاشیه: 20px درست است
تقسیم حاشیه راست را تغییر دهید

پارامترهای خط را به روز کنید

قبل از ادامه ، تنظیمات ردیف را باز کنید و موارد زیر را به روز کنید:

  • از عرض ناودان سفارشی استفاده کنید: بله
  • عرض روده: 1
  • عرض: 25٪
  • تراز ردیف: سمت چپ
  • بالشتک: 0px زیاد ، 0px کم
پارامترهای خط divi را اصلاح کنید

اضافه کردن فرم ورود آنلاین به خط دوم

یک ردیف اضافه کنید

اکنون که ردیف اول آماده است ، در ویرایشگر متوجه می شوید که ردیف اول 25٪ قسمت سمت چپ را اشغال می کند. این اساساً خط تعیین شده برای آرم سربرگ ما خواهد بود. ما باید یک خط بخش برای فرم و منوی ورود به سیستم آنلاین در سمت راست ایجاد کنیم.

یک ردیف دوم با ساختار به یک ستون در قسمت اضافه کنید.

یک ستون divi جدید در قسمت سر اضافه کنید

فرم ورود را اضافه کنید

در ردیف یک ستون ، یک ماژول ورود به سیستم اضافه کنید.

فرم ورود به سیستم divi را اضافه کنید

محتوای پیش فرض را حذف کنید

در زیر تنظیمات ورود ، عنوان جعلی و محتوای بدن را حذف کنید.

محتوای پیش فرض را حذف کنید

یک فرم ورود به سیستم و یک کلاس CSS سفارشی را اضافه کنید

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

در زبانه Advanced ، کلاس CSS زیر را اضافه کنید:

  • کلاس CSS: فرم سربرگ-ورود

CSS سفارشی زیر را در قسمت توضیحات اتصال در قسمت CSS اضافه کنید:

margin-bottom: 0px !important

سپس CSS سفارشی زیر را در قسمت CSS از فرم ورود اضافه کنید:

width: 100%;

CSS سفارشی زیر را به جعبه Connection Fields CSS اضافه کنید:

آیا شما به دنبال بهترین تم ها و پلاگین های وردپرس هستید؟

بهترین پلاگین ها و تم های وردپرس را در Envato دانلود کنید و به راحتی وب سایت خود را ایجاد کنید. در حال حاضر بیش از 49.720.000 دریافت می کند. [EXCLUSIVE]

padding: 5px 4% !important

کد divis css را سفارشی کنید

CSS سفارشی را به تنظیمات طرح هدر اضافه کنید

از آنجا که کلاس CSS سفارشی ما به ماژول فرم ورود به سیستم اضافه شده است ، می توانیم CSS سفارشی خود را اضافه کنیم که فقط این فرم ورود خاص را هدف قرار می دهد.

تنظیم طرح هدر را باز کرده و CSS سفارشی زیر را اضافه کنید:

.header-login-form .et_pb_login_form form {display: flex;justify-content: flex-end;align-items: center;}.header-login-form .et_pb_login_form .et_pb_contact_form_field {padding-bottom: 0px;margin-right: 5px;}.header-login-form .et_pb_forgot_password {display:none;}

این CSS باعث می شود قسمتهای ورود به سیستم و دکمه بصورت درون خطی (بصورت افقی) ظاهر شود ، پیوند "رمز عبور خود را فراموش کردید؟" »و یک حاشیه کم بین زمینه ها اضافه کنید.

فرم divi را سفارشی کنید

تنظیمات خط

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

  • از عرض ناودان سفارشی استفاده کنید: بله
  • عرض روده: 1
  • تراز خط: مستقیم
  • بالشتک: 0px زیاد ، 0px کم
از حاشیه های مخصوص استفاده کنید

تنظیمات طراحی فرم ورود به سیستم

اکنون آماده به روزرسانی تنظیمات فرم ورود به سیستم هستیم. تنظیمات ماژول فرم ورود را باز کرده و موارد زیر را به روز کنید:

  • از رنگ زمینه استفاده کنید: نه
از تقسیم رنگ پس زمینه استفاده کنید
فیلد و متن پیوند
  • زمینه زمینه: رنگ: rgba (255,255,255,0.2،XNUMX،XNUMX،XNUMX)
  • رنگ متن متن: #ffffff
  • پلیس میدانی: لاتو
  • اندازه متن زمینه: 14px
  • تراز متن: درست است
  • فونت پیوند: لاتو
  • سبک قلم پیوند: زیرخط
  • رنگ متن پیوند: # ff3190
فرم ورود به سیستم ماژول رنگ را سفارشی کنید
طراحی دکمه
  • اندازه متن دکمه: 15px
  • رنگ پس زمینه دکمه: # ff3190
  • عرض حاشیه دکمه: 0px
  • فونت دکمه: Lato
  • دکمه بالایی: 2px در بالا ، 2px در پایین
  • حاشیه: 15px کم است
  • بالشتک: 0px در بالا ، 0px در پایین ، 0px در سمت چپ ، 0px در سمت راست
فرم ورود آنلاین

افزودن منو به خط دوم

ماژول منو

با استفاده از فرم ورود آنلاین ما ، می توانیم منو را مستقیماً در زیر اضافه کنیم.

ماژول منو را در زیر ماژول فرم ورود اضافه کنید.

ماژول divi menu را وارد کنید

تنظیمات ماژول منو

تنظیمات منو را به شرح زیر به روز کنید:

  • رنگ زمینه: rgba (0,0,0,0،XNUMX،XNUMX،XNUMX)
  • قلم منو: لاتو
  • وزن قلم منو: جسورانه
  • رنگ متن منو: #ffffff
  • اندازه متن فهرست: 16px
  • تراز متن: درست است
  • رنگ پس زمینه منوی کشویی: #ffffff
  • رنگ خط در منوی کشویی: rgba (0,0,0,0،XNUMX،XNUMX،XNUMX)
  • رنگ متن منوی کشویی: # 000000
  • رنگ پس زمینه منوی موبایل: #ffffff
  • رنگ متن منو موبایل: # 000000
  • رنگ نماد سبد خرید: #ffffff
  • رنگ نماد جستجو: #ffffff
  • رنگ نماد منوی همبرگر: #ffffff

ذخیره عنوان صفحه ورود به سیستم

قبل از خارج شدن از ویرایشگر طرح هدر حتماً طرح را ذخیره کنید.

دکمه بسته شدن سر Divi

سپس تنظیمات ایجاد کننده تم را نیز ذخیره کنید.

عنوان را ایجاد کنید تغییرات ایجاد کنید

نتایج نهایی

خودشه!

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

در اینجا عنوان در صفحه دسک تاپ وجود دارد.

منوی نتیجه نهایی با انجمن اتصال divi

در اینجا عنوان صفحه ورود به سیستم آنلاین در صفحه رایانه لوحی وجود دارد.

به راحتی فروشگاه آنلاین خود را ایجاد کنید

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

فرم ورود آنلاین

و در اینجا فرم ورود به سیستم آنلاین روی صفحه تلفن وجود دارد. به منوی موبایل نیز توجه داشته باشید.

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

آنچه که هنگام ورود کاربر به بخش divi قابل مشاهده است

آخرین افکار

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

من نمی توانم صبر کنم تا از شما در نظرات بشنوم.

به سلامتی شما!

این مقاله حاوی نظرات 0

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

آدرس ایمیل شما منتشر نخواهد شد. علامت گذاری شده اند *

این سایت از Akismet برای کاهش ناخواسته استفاده می کند. در مورد نحوه استفاده از اطلاعات نظرتان بیشتر بدانید.

بازگشت به بالا