Divi: نحوه ایجاد یک فرم ورود به سیستم پاپ آپ

آیا می خواهید یک ایجاد کنید فرم ورود به سیستم پاپ آپ در Divi با دکمه های ورود / خروج؟

ایجاد یک فرم پنجره ورود به سیستم DIVI می تواند راهی موثر برای بهبود طراحی سایت و تجربه کاربری ورود/خروج از سایت شما باشد. 

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

این راحت تر از هدایت کاربر به یک صفحه ورود سفارشی است.

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

با استفاده از ماژول Divi Login و چند ماژول Button، با اجازه دادن به کاربران برای ورود و خروج بدون هدایت به صفحه دیگری، یک تجربه ورود یکپارچه در قسمت جلویی ایجاد خواهیم کرد.

بیایید شروع کنیم!

بررسی

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

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

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

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

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

قالب سرصفحه "Crowdfunding Layout Pack" را به سازنده Divi وارد کنید

برای شروع، دانلود کنید Divi Crowdfunding Layout Pack Header and Footer به صورت رایگان . برای انجام این کار، به پست وبلاگ .

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

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

برای وارد کردن فایل به ویرایشگر تم، مراحل زیر را دنبال کنید:

1. به Divi > Theme Builder بروید.
2. بر روی نماد قابل حمل کلیک کنید.
3. در پنجره پاپ آپ Portability، تب import را انتخاب کنید.
4. فایل زیپ نشده قبلی دانلود شده را برای وارد کردن انتخاب کنید.
5. Cliquer sur Import Divi Theme Builder قالب.
6. برای ویرایش هدر وارد شده روی نماد ویرایش کلیک کنید.

ایجاد فرم ورود به سیستم پاپ آپ در Divi

قسمت 1: ایجاد دکمه های ورود و خروج

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

در ردیف بالای قسمت هدر، ماژول را حذف کنید رسانه های اجتماعی دنبال کنید در کنار دکمه ورود در ستون 3.

دفعات بازدید: Divi: مقایسه انواع مختلف گرادیان

ایجاد دکمه ورود

برای ایجاد دکمه ورود به سیستم، تنظیمات ماژول Button را در ستون 3 ردیف بالا باز کنید.

موارد زیر را در برگه طراحی به روز کنید:

• نماد دکمه: نماد قفل (نمایش را ببینید)
• محل قرارگیری نماد دکمه: سمت راست
• فقط نمایش نماد در حالت شناور برای دکمه: خیر
• بالشتک: 0,5em (بالا و پایین)، 2em (چپ)، 0,7em (راست)

زیر زبانه فناوری، دکمه را دو کلاس CSS سفارشی به صورت زیر اختصاص دهید:

• کلاس CSS: et-toggle-popup et-popup-login-button

ایجاد دکمه خروج

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

برای کمک به تمایز دو دکمه، می توانید برچسب هر کدام را به ترتیب به روز کنید. سپس تنظیمات ماژول Duplicate Button را در ستون 3 باز کنید.

متن دکمه را برای خواندن "خروج" تغییر دهید.

موارد زیر را در برگه طراحی به روز کنید:

• نماد دکمه: نماد باز کردن قفل (به تصویر صفحه مراجعه کنید)

زیر زبانه فناوری، دکمه کلاس های CSS را به صورت زیر به روز کنید:

• کلاس CSS: دکمه et-toggle-popup et-popup-logout-button

کلاس اول ثابت خواهد ماند اما کلاس دوم متفاوت خواهد بود.

قسمت 2: ایجاد بخش پاپ آپ

پس از اتمام دکمه‌ها، ما آماده‌ایم تا بخش پاپ‌آپ را ایجاد کنیم که به‌عنوان پاپ‌پ ما شامل آن خواهد بود اشکال ارتباط.

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

سپس یک ردیف تک ستونی را در داخل قسمت قرار دهید.

تنظیمات بخش

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

زیر زبانه محتوا، به بخش رنگ پس زمینه سفید بدهید:

• زمینه: #ffffff

زیر زبانه طرح، موارد زیر را به روز کنید:

• عرض: 100%
• حداکثر عرض: 800 پیکسل (رومیزی)، 80٪ (تبلت)، 100٪ (تلفن)
• تراز بخش: مرکز
• ارتفاع: خودکار (رومیزی و تبلت)، 100٪ (تلفن)
• حداکثر ارتفاع: 100%
• بالشتک: 0 پیکسل (بالا و پایین)

• گوشه های گرد: 10 پیکسل
• Box Shadow: اسکرین شات را ببینید
• موقعیت عمودی سایه جعبه: 0 پیکسل
• قدرت تاری: 100 پیکسل
• قدرت پخش: 50 پیکسل

زیر زبانه فناوری، موارد زیر را به روز کنید:

یک کلاس CSS سفارشی اضافه کنید.

• کلاس CSS: et-popup-login

یک قطعه CSS سفارشی را به عنصر اصلی اضافه کنید:

overscroll-behavior: contain;

گزینه های Visibility و Position را به روز کنید.

• سرریز افقی: پنهان
• سرریز عمودی: خودکار
• موقعیت: ثابت
• مکان: مرکز مرکز
• Z Index: 999999

تنظیمات خط

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

• از عرض ناودان سفارشی استفاده کنید: بله
• عرض ناودان: 1
• عرض: 100%
• حداکثر عرض: 100٪
• بالشتک: 0 پیکسل (بالا)، 5 ولت ساعت (پایین)

قسمت 3: ایجاد آیکون پنجره بسته

برای ایجاد آیکون بستن پاپ آپ که با کلیک کردن، پنجره بازشو بسته یا پنهان می شود، از ماژول Blurb استفاده می کنیم.

یک ماژول Blurb جدید به ردیف اضافه کنید.

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

سپس آیکون را به صورت زیر اضافه کنید:

• از نماد استفاده کنید: بله
• نماد: نماد "x" (نمایش را ببینید)

زیر زبانه طرح، موارد زیر را به روز کنید:

• رنگ نماد: #004e43
• تراز تصویر/آیکون: در مرکز
• استفاده از نماد اندازه قلم: بله
• اندازه قلم آیکون: 50 پیکسل
• عرض: 50 پیکسل
• ماژول تراز: سمت راست
• ارتفاع: 50 پیکسل

زیر زبانه فناوری، یک کلاس CSS را به صورت زیر به ماژول Blurb اضافه کنید:

• کلاس CSS: et-toggle-popup

بخش 4: ایجاد فرم های ورود به سیستم "ورود به سیستم" و "از سیستم خارج شده".

به منظور داشتن محتوا و طراحی متفاوت برای فرم ورود در هنگام ورود و خروج، ما دو ماژول فرم ورود متفاوت ایجاد می کنیم. 

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

ایجاد فرم "از سیستم خارج شده".

برای ایجاد فرم ورود به سیستم "از سیستم خارج شده"، یک ماژول ورود جدید در زیر نماد ماژول Blurb در داخل ردیف اضافه کنید.

تنظیمات ماژول را باز کنید و تنظیمات زیر را تغییر دهید:

برگه محتوا

• تغییر مسیر به صفحه فعلی: بله
• استفاده از رنگ پس زمینه: خیر

برگه طراحی

• رنگ پس زمینه فیلدها: rgba(0,78,67,0.05)
• رنگ پس زمینه فوکوس میدانی: rgba (0,78,67,0,15)
• تراز متن: در مرکز
• رنگ متن: تیره

• قلم عنوان: Poppins
• وزن قلم عنوان: نیمه پررنگ
• رنگ متن: #000000
• ارتفاع خط عنوان: 1,3 em
• فونت بدنه: Work Sans

برای به روز رسانی استایل های دکمه ها، استایل های دکمه را از دکمه ورود که ایجاد کردیم در ستون سوم ردیف قسمت Header کپی کنید.

سپس سبک‌های دکمه را در گروه گزینه‌های دکمه در تنظیمات اتصال در زیر تب Design قرار دهید.

در مرحله بعد، سبک های دکمه را برای فرم ورود به سیستم به صورت زیر به روز کنید:

• دکمه
  • رنگ متن: #ffffff
  • پس زمینه: #004e43
  • پس زمینه (Hover): #00683c
  • عرض حاشیه: 0 پیکسل
  • بالشتک: 15 پیکسل (بالا و پایین)

در مرحله بعد، گزینه های اندازه را به صورت زیر به روز کنید:

• عرض: 100%
• حداکثر عرض: 80٪ (رومیزی)، 90٪ (تبلت)، 95٪ (تلفن)
• ماژول تراز: مرکز

تب پیشرفته

زیر زبانه فناوری، کلاس CSS و CSS سفارشی را به صورت زیر به روز کنید:

• کلاس CSS: et-logged-out-form

CSS سفارشی برای توضیحات اتصال:

width: 100% !important;
float: none !important;

CSS سفارشی برای فرم ورود:

width: 100% !important;
padding: 0px !important;

این اطمینان حاصل می کند که ماژول Login تمام عرض سطر/ستون را حتی روی دسکتاپ باز می کند.

ایجاد فرم "ورود به سیستم".

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

برای ایجاد فرم ورود به سیستم "از سیستم خارج شده"، فرم ورود موجود را کپی کنید.

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

تنظیمات تکراری (فرم "ورود به سیستم") را باز کنید و عنوان سایت را به عنوان محتوای پویا به عنوان ماژول فرم ورود اضافه کنید.

سپس تنظیمات محتوای پویا عنوان سایت را باز کنید و مطالب قبل و بعد را به صورت زیر به روز کنید:

• قبل: "شما در حال تلاش برای خروج از طرح زمینه های زیبا هستید"
• بعد از: ". " 

این یک اعلان پویا خوب برای کاربرانی که سعی در خروج از سایت دارند ایجاد می کند.

سپس هدر H3 زیر را به بدنه اضافه کنید:

<h3>Are you sure?</h3>

اگر تا به حال محتوای ماژول ورود به سیستم را مشاهده کرده اید، می دانید که یک پیام شخصی وجود دارد که شامل یک پیوند شخصی "خروج از سیستم" است. برای اینکه این پیوند مانند یک دکمه به نظر برسد، باید تنظیمات فونت/متن لینک بدنه را به صورت زیر سفارشی کنیم:

• برگه را انتخاب کنید ارتباط دادن تحت گزینه متن بدنه.
• فونت لینک: Work Sans
• وزن قلم پیوند: نیمه پررنگ
• سبک قلم: TT
• تراز متن پیوند: در مرکز
• رنگ متن پیوند: #ffffff

توجه: تا زمانی که فرم را در یک صفحه زنده مشاهده نکنید، نمی‌توانید این نتایج را پیش‌نمایش کنید.

زیر زبانه فناوری، کلاس CSS و CSS سفارشی را به صورت زیر به روز کنید:

• کلاس CSS: et-logged-in-form

CSS سفارشی برای فرم ورود:

display:none;

قسمت 5: اضافه کردن کد سفارشی

برای افزودن CSS و JQuery سفارشی مورد نیاز برای عملکرد فرم ورود به سیستم پاپ آپ، یک ماژول کد جدید در زیر آخرین ماژول ورود ایجاد کنید.

CSS

تنظیمات ماژول Code را باز کنید و CSS زیر را در کادر کد قرار دهید و مطمئن شوید که CSS را در تگ های سبک لازم قرار دهید.

/* hide popup section */
.et-popup-login {
  display: none;
}
 
/* hide login button when logged in */
.logged-in .et-popup-login-button {
  display: none !important;
}
 
/* hide logout button when logged out */
.et-popup-logout-button {
  display: none !important;
}
 
/* show logout button when logged in */
.logged-in .et-popup-logout-button {
  display: inline-block !important;
}
 
/* hide logged out form when logged in */
.logged-in .et-logged-out-form {
  display: none !important;
}
 
/* hide logged in form when logged out */
.et-logged-in-form {
  display: none !important;
}
 
/* show logged in form when logged in */
.logged-in .et-logged-in-form {
  display: block !important;
}
 
/* style logout link within logged in form */
.et-logged-in-form a {
  display: block;
  padding: 15px 1em;
  border-radius: 8px;
  background: #004e43;
  max-width: 400px;
  margin: 20px auto 0px;
}
.et-toggle-popup {
  cursor: pointer;
}
 
/* show hidden elements in visual builder */
body.et-fb .et-popup-login,
body.et-fb .et-logged-out-form {
  display: block !important;
}
body.et-fb .et-popup-login-button {
  display: inline-block !important;
}

توجه داشته باشید که CSS از کلاس “connected” استفاده می‌کند که در وردپرس تعبیه شده است تا دکمه‌های ورود/خروج و خروج مربوطه را مخفی یا نمایش دهد. اشکال هر بار که کاربر به سیستم وارد می شود یا از سیستم خارج می شود، وارد / از سیستم خارج شده است.

جی کوئری

زیر تگ end style، JQuery زیر را بچسبانید و مطمئن شوید که کد را در تگ های اسکریپت لازم قرار دهید.

(function ($) {
  $(document).ready(function () {
    $(".et-toggle-popup").click(function (e) {
      e.preventDefault();
      $(".et-popup-login").fadeToggle(500);
    });
  });
})(jQuery);

این قطعه به سادگی هر زمان که کاربر روی یکی از سه مورد با کلاس کلیک کند، بخش پاپ آپ را تغییر می دهد. and-toggle-popup (دکمه های ورود و خروج به همراه نماد ارائه "x").

همچنین ببینید: Divi: نحوه استفاده از تنظیمات ماسک پس‌زمینه و گزینه‌های تبدیل الگو

انجام شده است !

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

نتیجه نهایی

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

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

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

اکنون DIVI را دانلود کنید!!!

نتیجه گیری.

امیدواریم ایجاد این فرم ورود به سیستم بازشو و دکمه‌های ورود/خروج سفارشی به شما بینشی در مورد نحوه استفاده خلاقانه از فرم ورود به سیستم Divi بدهد. 

می توانید طراحی و محتوای هر فرم ورود (یا دکمه ها) را برای ایجاد یک تجربه ورود منحصر به فرد در وب سایت خود تنظیم کنید.

ما همچنین امیدواریم که این آموزش الهام بخش شما برای پروژه های بعدی Divi شما باشد. اگر نگرانی یا پیشنهادی دارید، ما را بیابید بخش نظرات برای بحث در مورد

همچنین می توانید مشورت کنید منابع مااگر به عناصر بیشتری نیاز دارید تا پروژه های ایجاد سایت های اینترنتی خود را انجام دهید.

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

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

...