نیاز به ایجاد هدر سراسری با فرم اتصال در DIVI؟
ایجاد یک فرم ورود به هدر شما می تواند یک تقویت عالی برای شما باشد تجربه کاربر.
آنها برای وب‌سایت‌های اشتراکی و فروشگاه‌های آنلاین ایده‌آل هستند زیرا به کاربران اجازه می‌دهند در هر زمان در هر صفحه از سایت وارد شوند. سایت اینترنتی.
در این آموزش نحوه طراحی a را به شما نشان خواهیم داد فرم ورود آنلاین برای کاربران در یک هدر سفارشی. بیا شروع کنیم!
بررسی
در اینجا پیش نمایش سریع هدر سفارشی با فرم ورود است که در این آموزش می خواهیم ایجاد کنیم.
در اینجا پیام و پیوند "خروج" است که هنگام ورود کاربران نمایش داده می شود.
افزودن یک عنوان جهانی جدید
برای پیشبرد کارها، باید یک سربرگ جهانی جدید برای خود ایجاد کنیم وب سایت. برای انجام این کار، به داشبورد وردپرس بروید و به مسیر Divi > Theme Builder بروید.
در قالب وب سایت به طور پیش فرض، روی «افزودن سربرگ جهانی» و سپس «ساخت سربرگ جهانی» کلیک کنید.
طراحی هدر جهانی Divi با فرم ورود به سیستم افقی
بخش را سفارشی کنید
از ویرایشگر Global Header Layout، می توانید هدر شخصی شده خود را ایجاد کنید سایت اینترنتی شروع از هیچ. برای شروع، تنظیمات را در بخش عادی باز کنید و موارد زیر را به روز کنید:
- رنگ گرادیان پس زمینه سمت چپ:
- رنگ گرادیان پس زمینه سمت راست:
- جهت گرادیان: 48 درجه
- حاشیه داخلی: 10 پیکسل بالا، 10 پیکسل پایین، 20 پیکسل چپ، 20 پیکسل راست
برای اینکه هدر خود را پاسخگوتر کنیم، CSS سفارشی زیر را به عنصر بخش اصلی اضافه می کنیم.
display:flex;
justify-content:center;
align-items:center;
آرم هدر را به خط اول اضافه کنید
اکنون که بخش آماده است ، می توانیم خط اول را اضافه کنیم.
خط اضافه کنید
در این بخش یک ردیف به ستون اضافه کنید.
یک ماژول Image با یک تصویر لوگو اضافه کنید
در ردیف یک ستونی، یک ماژول Image اضافه کنید. اینجا جایی است که ما لوگوی هدر را اضافه می کنیم.
حاشیه ماژول تصویر و تصویر را به روز کنید
تنظیمات تصویر را به صورت زیر به روز کنید:
- تصویر: [افزودن آرم (تقریباً 64 x 64 پیکسل)]
- حاشیه: 20 پیکسل سمت راست
پارامترهای خط را به روز کنید
قبل از ادامه، تنظیمات خط را باز کنید و موارد زیر را به روز کنید:
- از عرض ناودان سفارشی استفاده کنید: بله
- فاصله ستون ها: 1
- حداکثر عرض: 25
- تراز: چپ
- حاشیه داخلی: 0px بالا، 0px پایین
فرم ورود افقی به ردیف دوم اضافه شد
خط اضافه کنید
اکنون که ردیف اول آماده است، در ویرایشگر متوجه خواهید شد که ردیف اول 25 درصد از قسمت سمت چپ را اشغال می کند. این اساساً خط تعیین شده برای لوگوی هدر ما خواهد بود. ما باید یک ردیف بخش برای فرم ورود و منوی سمت راست ایجاد کنیم.
یک ردیف دوم با ساختار به یک ستون در قسمت اضافه کنید.
فرم ورود را اضافه کنید
در ردیف یک ستونی، یک ماژول «اتصال» اضافه کنید.
محتوای پیش فرض را حذف کنید
در تنظیمات ماژول ورود، عنوان جعلی و محتوای بدنه را حذف کنید.
کلاس سفارشی را برای فرم ورود و CSS اضافه کنید
قبل از اینکه در طراحی فرم لاگین زیاده روی کنیم، ابتدا کلاس CSS و CSS سفارشی را به ماژول Login اضافه می کنیم. این کار ساختار آنلاین اولیه فرم را قبل از انجام کارهای نهایی بر روی طراحی فرم با گزینه های داخلی Divi تنظیم می کند.
همچنین به راهنمای ما مراجعه کنید نحوه ایجاد یک منوی جانبی کشویی و پاسخگو در DIVI
در تب Advanced، کلاس CSS زیر را اضافه کنید:
- کلاس CSS: header-login-form
CSS سفارشی زیر را به جعبه توضیحات اتصال CSS اضافه کنید:
margin-bottom: 0px !important
سپس CSS سفارشی زیر را در قسمت CSS فرم ورود اضافه کنید:
width: 100%;CSS سفارشی زیر را به قسمت Login Fields CSS اضافه کنید:
padding: 5px 4% !important
CSS سفارشی را به تنظیمات طرح هدر اضافه کنید
از آنجایی که کلاس CSS سفارشی خود را به ماژول فرم ورود اضافه کردیم، می‌توانیم CSS سفارشی خود را اضافه کنیم که فقط آن فرم ورود خاص را هدف قرار می‌دهد.
همچنین آموزش ما را در ادامه بخوانید نحوه ایجاد صفحه وبلاگ با ماژول بلاگ با DIVI
تنظیمات طرح بندی هدر را باز کنید و 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 پایین
تنظیمات طراحی فرم ورود به سیستم
اکنون آماده به روز رسانی تنظیمات فرم ورود هستیم. تنظیمات ماژول Connect را باز کنید و موارد زیر را به روز کنید:
- استفاده از رنگ پس زمینه: خیر
فیلد و متن پیوند
- زمینه های رنگ پس زمینه: rgba (255,255,255,0.2)
- فیلدهای رنگ متن: #ffffff
- فونت Fields: Lato
- فیلدهای اندازه متن: 14 پیکسل
- تراز متن: سمت راست
طراحی دکمه
- از سبک های سفارشی برای دکمه استفاده کنید: NO
- اندازه متن دکمه: 15 پیکسل
- دکمه پس زمینه: #ff3190
- دکمه عرض حاشیه: 0 پیکسل
- فونت دکمه: Lato
- دکمه حاشیه: 2px بالا، 2px پایین
- دکمه پد: 15 پیکسل پایین
- حاشیه داخلی: 0 پیکسل بالا، 0 پیکسل پایین، 0 پیکسل چپ، 0 پیکسل راست
افزودن منو به خط دوم
ماژول منو
با وجود فرم ورود به سیستم، می‌توانیم منوی زیر را مستقیماً اضافه کنیم.
یک ماژول منو در زیر ماژول ورود اضافه کنید.
تنظیمات ماژول منو
تنظیمات منو را به صورت زیر به روز کنید:
- پس زمینه: rgba(0,0,0,0)
- منوی فونت: Lato
- منوی نور ملایم: پررنگ
- رنگ متن منو: #ffffff
- اندازه متن منو: 16 پیکسل
- تراز متن: سمت راست
- رنگ پس زمینه منوی کشویی: #ffffff
- رنگ ردیف کشویی: rgba (0,0,0,0،XNUMX،XNUMX،XNUMX)
- رنگ متن منوی کشویی: #000000
- رنگ پس زمینه منوی موبایل: #ffffff
- رنگ متن منوی موبایل: #000000
- رنگ نماد سبد خرید: #ffffff
- رنگ نماد جستجو: #ffffff
- رنگ نماد منوی همبرگر: #ffffff
ذخیره عنوان صفحه ورود به سیستم
قبل از خروج از ویرایشگر هدر، حتماً طرح بندی را ذخیره کنید.
سپس تنظیمات Theme Builder را نیز ذخیره کنید.
نتایج نهایی
انجام شده است !
حالا نتیجه نهایی را ببینیم. برای دیدن نتیجه نهایی، تنها کاری که باید انجام دهید این است که از یک صفحه در وب سایت خود دیدن کنید.
و این همان چیزی است که کاربر هنگام ورود به سیستم مشاهده می کند.
دانلود DIVI در حال حاضر!!!
نتیجه
این هدر جهانی سفارشی با فرم ورود قطعا برای هر وب سایت اشتراکی یا فروشگاه آنلاین مفید خواهد بود.
فقط با کمی CSS سفارشی، ما توانستیم ماژول Login Divi را به یک فرم ورود به سیستم زیبا تبدیل کنیم که کاملاً در هدر هر وب سایتی قرار می گیرد.
امیدوارم این برای پروژه بعدی شما مفید باشد. اگر نگرانی یا پیشنهادی دارید، ما را بیابید بخش نظرات برای بحث در مورد
با این حال ، شما همچنین می توانید مشورت کنید منابع مااگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.
اما در عین حال، این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.
...
