ایجاد یک فرم ورود به سیستم برای هدر شما می تواند یک تقویت فوق العاده برای تجربه کاربر باشد. آنها برای سایت های عضویت و فروشگاه های آنلاین عالی هستند زیرا به کاربران اجازه می دهند در هر زمان و در هر صفحه از سایت وارد شوند.
در این آموزش نحوه طراحی a را به شما نشان خواهیم داد فرم آنلاین با استفاده از یک هدر سفارشی در Divi Theme Builder. برای انجام این کار، یک هدر جهانی پاسخگو ساده ایجاد می کنیم و سپس a را طراحی می کنیم فرم ورود آنلاین فشرده در سمت راست بالای هدر با استفاده از ماژول ورود به سیستم Divi. این ساخت به مقداری کد CSS سفارشی نیاز دارد، اما زمانی که همه چیز در جای خود قرار گرفت، سفارشی کردن فرم ورود آنلاین برای مطابقت آسان با هر طرح هدر با استفاده از گزینه های طراحی سرویس های یکپارچه Divi آسان خواهد بود.
نمای کلی نتایج
در اینجا یک مرور کلی از هدر سفارشی با فرم ورود به سیستم آنلاین است که در این آموزش ایجاد خواهیم کرد.
و در اینجا فرم ورود به سیستم آنلاین در صفحه رایانه لوحی و تلفن وجود دارد.
در اینجا پیام خروجی و پیوندی است که هنگام ورود کاربران به سیستم نمایش داده می شود.
آنچه شما باید برای شروع کار
اگر قبلاً این کار را نکرده اید ، موضوع Divi را نصب و فعال کنید . این تقریباً تمام چیزی است که شما برای شروع به کار نیاز دارید. ما یک طرح جدید طرح هدر را از ابتدا با Divi Theme Builder ایجاد خواهیم کرد.
افزودن یک عنوان جهانی جدید
برای پیشبرد کارها، باید یک سربرگ جهانی جدید برای خود ایجاد کنیم وب سایت. برای انجام این کار، به داشبورد وردپرس بروید و به مسیر Divi > Theme Builder بروید.
در قالب وب سایت به طور پیش فرض، روی «افزودن سربرگ جهانی» و سپس «ایجاد سربرگ جهانی» کلیک کنید.
سپس گزینه Build from scratch را انتخاب کنید.
سربرگ جهانی Divi را با فرم ورود به سیستم آنلاین طراحی کنید
بخش سفارشی سازی
از طریق Global Header Layout Editor می توانید هدر سفارشی سایت خود را کاملاً ایجاد کنید. برای شروع ، تنظیمات بخش عادی را باز کنید و موارد زیر را به روز کنید:
- شیب زمینه رنگ چپ:
- شیب زمینه درست:
- جهت شیب: 48 درجه
- padding: 10 پیکسل در بالا ، 10 پیکسل در پایین ، 20 پیکسل در سمت چپ ، 20 پیکسل در سمت راست
برای اینکه هدر سفارشی ما پاسخگو باشد ، CSS سفارشی زیر را به عنصر اصلی بخش اضافه می کنیم.
display:flex;justify-content:center;align-items:center;
آرم هدر را به خط اول اضافه کنید
اکنون که بخش آماده است ، می توانیم خط اول را اضافه کنیم.
یک ردیف اضافه کنید
در این بخش یک ردیف به ستون اضافه کنید.
یک ماژول تصویر با یک تصویر آرم اضافه کنید
در ردیف تک ستون ، یک ماژول تصویر اضافه کنید. این جایی است که ما آرم را برای عنوان اضافه می کنیم.
حاشیه ماژول تصویر و تصویر را به روز کنید
تنظیمات تصویر را به صورت زیر به روز کنید:
- تصویر: [اضافه کردن آرم (تقریبا 64 پیکسل با 64 پیکسل)]
- حاشیه: 20px درست است
پارامترهای خط را به روز کنید
قبل از ادامه ، تنظیمات ردیف را باز کنید و موارد زیر را به روز کنید:
- از عرض ناودان سفارشی استفاده کنید: بله
- عرض روده: 1
- عرض: 25٪
- تراز ردیف: سمت چپ
- بالشتک: 0px زیاد ، 0px کم
اضافه کردن فرم ورود آنلاین به خط دوم
یک ردیف اضافه کنید
اکنون که ردیف اول آماده است ، در ویرایشگر متوجه می شوید که ردیف اول 25٪ قسمت سمت چپ را اشغال می کند. این اساساً خط تعیین شده برای آرم سربرگ ما خواهد بود. ما باید یک خط بخش برای فرم و منوی ورود به سیستم آنلاین در سمت راست ایجاد کنیم.
یک ردیف دوم با ساختار به یک ستون در قسمت اضافه کنید.
فرم ورود را اضافه کنید
در ردیف یک ستون ، یک ماژول ورود به سیستم اضافه کنید.
محتوای پیش فرض را حذف کنید
در زیر تنظیمات ورود ، عنوان جعلی و محتوای بدن را حذف کنید.
یک فرم ورود به سیستم و یک کلاس 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
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 باعث می شود قسمتهای ورود به سیستم و دکمه بصورت درون خطی (بصورت افقی) ظاهر شود ، پیوند "رمز عبور خود را فراموش کردید؟" »و یک حاشیه کم بین زمینه ها اضافه کنید.
تنظیمات خط
قبل از قرار دادن لمس های نهایی در فرم ورود به سیستم آنلاین ، بیایید پارامترهای خط را به شرح زیر بروز کنیم:
- از عرض ناودان سفارشی استفاده کنید: بله
- عرض روده: 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 در سمت راست
افزودن منو به خط دوم
ماژول منو
با استفاده از فرم ورود آنلاین ما ، می توانیم منو را مستقیماً در زیر اضافه کنیم.
ماژول منو را در زیر ماژول فرم ورود اضافه کنید.
تنظیمات ماژول منو
تنظیمات منو را به شرح زیر به روز کنید:
- رنگ زمینه: 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
ذخیره عنوان صفحه ورود به سیستم
قبل از خارج شدن از ویرایشگر طرح هدر حتماً طرح را ذخیره کنید.
سپس تنظیمات ایجاد کننده تم را نیز ذخیره کنید.
نتایج نهایی
خودشه!
حالا نتیجه نهایی را ببینیم. برای مشاهده نتیجه نهایی، کافی است به یک صفحه از خود مراجعه کنید وب سایت.
در اینجا عنوان در صفحه دسک تاپ وجود دارد.
در اینجا عنوان صفحه ورود به سیستم آنلاین در صفحه رایانه لوحی وجود دارد.
و در اینجا فرم ورود به سیستم آنلاین روی صفحه تلفن وجود دارد. به منوی موبایل نیز توجه داشته باشید.
و این همان چیزی است که کاربر هنگام ورود به سیستم مشاهده می کند.
آخرین افکار
این هدر جهانی سفارشی با فرم ورود آنلاین قطعا برای هر سایت عضویت یا فروشگاه آنلاین مفید خواهد بود. فقط با کمی CSS سفارشی، ما توانستیم ماژول ورود به سیستم Divi را به یک فرم ورود آنلاین زیبا تبدیل کنیم که در هدر هر کدام خوب به نظر برسد. وب سایت. امیدوارم این برای پروژه بعدی شما مفید باشد.
من نمی توانم صبر کنم تا از شما در نظرات بشنوم.
به سلامتی شما!