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

در این آموزش نحوه طراحی a را به شما نشان خواهیم داد فرم آنلاین با استفاده از یک هدر سفارشی در Divi Theme Builder. برای انجام این کار، یک هدر جهانی پاسخگو ساده ایجاد می کنیم و سپس a را طراحی می کنیم فرم ورود آنلاین فشرده در سمت راست بالای هدر با استفاده از ماژول ورود به سیستم 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 اضافه کنید

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

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

یک تصویر ماژول 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 اضافه کنید:

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

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

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

نتایج نهایی

خودشه!

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

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

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

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

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

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

پیش نمایش روی گوشی

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

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

آخرین افکار

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

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

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