Divi: نحوه ایجاد یک فرم تماس که پس از کلیک روی یک دکمه ظاهر می شود

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

در این آموزش Divi به شما نشان خواهیم داد که چگونه a فرم تماس که پس از کلیک کردن روی یک دکمه با استفاده از چیزی جز Divi، کد jQuery و کد CSS ظاهر می شود.

همچنین راهنمای ما را در اینجا بخوانید: Divi: نحوه ایجاد یک فوتر چسبنده با افکت "Reveal".

این یک راه عالی برای حفظ است آخرین بازدید خود را سایت اینترنتی بر روی کاری که با کلیک یک دکمه به آن متعهد شده‌اند تمرکز کردند. آنها را به صفحه دیگری نمی برد.

بررسی

در زیر، می‌توانید نگاهی گذرا به آنچه می‌سازیم بیندازید، سپس وارد آموزش شوید!

پیش نمایش روی کامپیوتر

پیش نمایش در گوشی و تبلت

یک صفحه جدید با یک طرح از پیش تعریف شده ایجاد کنید

بیایید با استفاده از یک طرح از پیش تعریف شده از کتابخانه Divi شروع کنیم. برای این مثال، ما از صفحه تماس با بسته چیدمان محصولات زیبایی .

یک صفحه جدید به صفحه خود اضافه کنید وب سایت و به آن عنوان بدهید، سپس گزینه را انتخاب کنید از Divi Builder استفاده کنید.

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

صفحه اصلی طرح بندی را پیدا و انتخاب کنیدشرکت طراحی داخلی".

انتخاب کنید 'طرح بندی را انتخاب کنیدبرای اضافه کردن طرح به صفحه خود.

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

یک بخش با ماژول Button ایجاد کنید

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

همچنین ببینید: Divi: چگونه یک فوتر سفارشی ایجاد کنیم

فقط یک بخش استاندارد اضافه کنید

بعد، یک ردیف یک ستونی را انتخاب کنید. 

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

می‌توانید دکمه را هر طور که می‌خواهید سفارشی کنید، اما باید مطمئن شوید که URL دکمه با «#» و سپس چیز دیگری شروع می‌شود. شما نمی توانید آن را خالی بگذارید یا فقط از کاراکتر "#" استفاده کنید. با افزودن «#» و متن، صفحه با کلیک روی دکمه حرکت نمی‌کند. اگر آن را خالی بگذارید، صفحه با کلیک تازه می شود. و اگر فقط از "#" استفاده کنید، به بالای صفحه فرستاده می شوید.

نکته مهم بعدی که باید انجام دهیم این است که یک کلاس CSS به دکمه اختصاص دهیم. ما از این کلاس CSS در ادامه این مقاله در کد jQuery استفاده خواهیم کرد تا مطمئن شویم که فرم تماس پس از کلیک کردن ظاهر می شود. کلاسی که باید به دکمه اختصاص دهیم به سادگی "button" است.

• کلاس CSS: دکمه

یک فرم تماس نسخه PC ایجاد کنید

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

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

با افزودن یک بخش استاندارد جدید به صفحه ای که روی آن کار می کنید شروع کنید. در تنظیمات بخش، به تب Advanced بروید و "popup" را به قسمت CSS Class اضافه کنید. 

همان تب را به پایین اسکرول کنید و خطوط زیر از کد CSS را در قسمت قبل از زیر مجموعه CSS سفارشی قرار دهید:

top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;

با اضافه کردن این، اطمینان حاصل می کنیم که بخش کل برگه را اشغال می کند. می توانید رنگ پس زمینه را در کد CSS تنظیم کنید تا پوشش پس زمینه مورد نظر ایجاد شود. در این مورد از رنگ مشکی با کمی شفافیت استفاده می کنیم. در همین تب، خط زیر از کد CSS را نیز به عنصر اصلی اضافه کنید:

display: none;

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

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

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

• از عرض ناودان سفارشی استفاده کنید: بله
• حداکثر عرض: 1291 پیکسل

پارامترهای هر یک از ستون ها را وارد کنید.

حاشیه های داخلی (بالا، چپ و راست) را به صورت زیر تغییر دهید:

• حاشیه داخلی (بالا، چپ، راست): 30 پیکسل

با رفتن به تب Advanced کار را تمام کنید. در عنصر اصلی، خطوط زیر از کد CSS را اضافه کنید:

transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;

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

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

اولین چیزی که اضافه می کنیم عنوانی است که ظاهر می شود. با اضافه کردن یک ماژول متن جدید به ستون اول سطر شروع کنید، متن را در تب بنویسید محتویات و به تب تغییر دهید سبک. 

در تب Style از تنظیمات زیر برای زیرمجموعه Text استفاده کردیم:

• قلم سربرگ: Lobster
• هدر نور نرم: متن پررنگ
• تراز متن: پررنگ
• رنگ متن هدر: #002282
• اندازه متن سربرگ: 37 پیکسل
• ارتفاع خط سربرگ: 1,7 em

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

با افزودن یک ماژول متن جدید ادامه دهید و متنی را که می خواهید در تب Content نمایش داده شود تایپ کنید. به تب Style بروید و تنظیمات زیر را در زیر شاخه Text اعمال کنید:

• تراز متن: مرکز
• فونت متن: Arial
• اندازه متن: 13 پیکسل
• متن رنگ متن: #002282
• ارتفاع خط متن: 1,7 em

ماژول "ما را در شبکه های اجتماعی دنبال کنید" اضافه کنید

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

آخرین کاری که باید انجام دهیم اضافه کردن padding (سمت چپ) به این ماژول در تب Advanced است. خط زیر از کد CSS را به عنصر اصلی اضافه کنید:

padding-left: 40%;

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

سپس می توانیم به ستون دوم سطر برویم. در این ستون، اولین چیزی که قرار است قرار دهیم، ماژول فرم تماس است. 

برای این مثال، ما فقط دو فیلد را انتخاب کرده ایم. نام و ایمیل 

هنگامی که ماژول فرم تماس را اضافه کردید، به تب Style در ماژول فرم تماس بروید و تغییرات زیر را در زیر شاخه فیلدها اعمال کنید:

• فیلدهای رنگ متن: #002282

• فیلدهای اندازه متن: #002282
• ارتفاع خط زمین: 1,7 em

در همان تب، تغییرات زیر را در زیر شاخه Button اعمال کنید:

• استفاده از سبک های سفارشی برای دکمه: بله
• دکمه اندازه متن: 20
• رنگ متن دکمه: #FFFFFF
• دکمه پس زمینه: #0086c4

همچنین مشاهده کنید: نحوه ایجاد یک منوی کشویی و فشاری در DIVI

• پهنای حاشیه دکمه: 2
• دکمه Border Radius: 3

به تب Advanced بروید و یک حاشیه 5٪ اضافه کنید.

یک ماژول Summary اضافه کنید

چیز دیگری که باید به ستون دوم اضافه کنیم ماژول Summary است. تنها چیزی که ما به این ماژول نیاز داریم، نماد خروج در سمت راست بالای پنجره بازشو است. نماد بعدی را از لیست نمادها انتخاب کنید و بقیه موارد را خالی بگذارید.

سپس به تب Advanced رفته و Close را به عنوان کلاس CSS تایپ کنید. 

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

position: absolute;
top: -45px;
right: -30px;
cursor: pointer;

یک گرادیان پر را روی خط اعمال کنید

در نهایت، یک پس‌زمینه گرادیان زیبا به خط اضافه می‌کنیم. تنظیمات را باز کنید و تغییرات زیر را در گزینه gradient background اعمال کنید:

• رنگ گرادیان اول: #FFFFFF
• رنگ گرادیان دوم: #0c71c3
• نوع گرادیان: خطی
• جهت گرادیان: 124 درجه
• موقعیت شروع: 50%
• موقعیت نهایی: 50%

یک فرم تماس برای تبلت و تلفن ایجاد کنید

اکنون که نسخه رایانه شخصی را ایجاد کرده ایم، نسخه تبلت و تلفن بسیار سریعتر پیش می رود. اکثر ماژول هایی که برای نسخه PC استفاده می کنیم مانند نسخه موبایل هستند.

قسمت قبلی را کپی کنید

به جای غیرفعال کردن آن برای تلفن و تبلت، همانطور که برای نسخه رایانه شخصی انجام دادیم، نسخه رایانه شخصی را در زیر شاخه Visibility در تنظیمات ماژول غیرفعال می کنیم:

کد CSS ماژول Summary را تغییر دهید

به جای استفاده از کد دسکتاپ، از کد زیر استفاده کنید:

position: absolute;
top: -15px;
right: -25px;
cursor: pointer;

یک گرادیان پر را روی خط اعمال کنید

برای نسخه موبایل، از تنظیمات مختلفی برای پس‌زمینه گرادیان خط استفاده می‌کنیم:

• رنگ گرادیان اول: #FFFFFF
• رنگ گرادیان دوم: #0c71c3
• نوع گرادیان: خطی
• جهت گرادیان: 180 درجه
• موقعیت شروع: 40%
• موقعیت نهایی: 40%

کد جی کوئری را اضافه کنید

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

<script type="text/javascript">
jQuery(function($){
jQuery('.button').click(function() {
jQuery('.popup').css('display', 'block');
});
jQuery('.close').click(function() {
jQuery('.popup').css('display', 'none');
});});
</script>

نتیجه

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

و نتیجه زیر در تبلت ها و گوشی ها:

دانلود DIVI در حال حاضر!!!

نتیجه

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

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

همچنین می توانید مشورت کنید منابع مااگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.

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

...