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

نیاز به افزودن الف فرم تماس به سربرگ جهانی؟

هنگامی که یک هدر سفارشی برای خود ایجاد می کنید وب سایت با استفاده از Divi's Theme Builder، به دنبال راه مناسبی برای افزودن CTA (Call to Action) هستید. یکی از راه های انجام این کار اضافه کردن a است فرم تماس پیمایش 

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

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

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

بررسی

قبل از غواصی در این آموزش، بیایید نگاهی به نتیجه ای که قرار است به دست آوریم بیندازیم.

یک عنوان جهانی ایجاد کنید

به Theme Builder بروید

از منوی Divi در داشبورد وردپرس خود به Theme Builder بروید و روی “Add global header” کلیک کنید.

"ایجاد سربرگ جهانی" را انتخاب کنید.

یک سبک هدر ایجاد کنید

تنظیمات بخش

رنگ پس زمینه

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

• پس زمینه: #FFFFFF

فاصله

سپس حاشیه های پیش فرض Top and Bottom Pad را از قسمت حذف کنید.

• راس حاشیه داخلی: 0 پیکسل
• حاشیه داخلی پایین: 0 پیکسل

جعبه سایه

همچنین یک سایه جعبه ظریف اعمال کنید.

• قدرت آبی سایه جعبه: 50 پیکسل
• رنگ فونت زیرنویس: rgba(0,0,0,0.15)

یک خط جدید اضافه کنید

ساختار ستون

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

اندازه

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

• از عرض ناودان سفارشی استفاده کنید: بله
• فاصله ستون ها: 1
• هماهنگ کردن ارتفاع ستون: بله
• حداکثر عرض: 95
• حداکثر عرض: 100

فاصله

سپس بالشتک فوقانی و پائین سفارشی را اضافه کنید.

• حداکثر حاشیه داخلی: 1vw
• حاشیه داخلی پایین: 1vw

عنصر اصلی

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

align-items: center;

شاخص Z ستون 2

همچنین مطمئن می شویم که ستون دوم دارای مقدار z-index بالاتر برای طراحی واکنشگرا باشد.

• شاخص Z: 12

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

لوگو را دانلود کنید

وقت آن است که اضافه کردن ماژول ها را شروع کنیم! شروع با یک ماژول تصویر در ستون 1. یک لوگو بارگذاری کنید.

هم ترازی

سپس تراز بندی ماژول را تغییر دهید.

• تراز تصویر: در مرکز

اندازه

همچنین عرض را تغییر دهید.

• حداکثر عرض: 3vw (رومیزی)، 5vw (تبلت)، 7vw (تلفن)

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

منو را انتخاب کنید

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

وضع

به برگه Module Style بروید و سبک چیدمان را تغییر دهید.

• سبک ها: متمرکز

تنظیمات متن فهرست

سپس تنظیمات متن را در منوی ماژول تغییر دهید.

• قلم منو: Sans را باز کنید
• منوی نور ملایم: نیمه پررنگ
• رنگ متن منو: #000000
• اندازه متن منو: 0,8 vw (رومیزی)، 2 vw (تبلت)، 3 vw (تلفن)
• فاصله حروف منو: 1 پیکسل

تنظیمات متن منوی کشویی

سپس رنگ ردیف منوی کشویی را تغییر دهید.

• رنگ خط منوی کشویی: #007dff

آیکون های

رنگ نماد منوی همبرگر را تغییر دهید.

• رنگ نماد منوی همبرگر: #007dff

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

اضافه کردن پیام

زمان ماژول سوم است! یک ماژول متنی با پیام دلخواه خود اضافه کنید.

رنگ پس زمینه

یک رنگ پس زمینه اضافه کنید.

• رنگ پس زمینه: #007dff

تنظیمات متن

به برگه طراحی ماژول بروید و تنظیمات متن را متناسب با آن تغییر دهید:

• فونت متن: Sans را باز کنید
• متن نور ملایم: پررنگ
• رنگ متن متن: #ffffff
• اندازه متن: 0,8 vw (رومیزی)، 2 vw (تبلت)، 3 vw (تلفن)
• تراز متن: در مرکز

اندازه

سپس پارامترهای اندازه ماژول را تغییر دهید.

• حداکثر عرض: 33
• تراز ماژول: مرکز

فاصله

سپس، حاشیه های داخلی سفارشی بالا و پایین را اضافه کنید.

• حاشیه داخلی Summit: 0,8 vw (رومیزی)، 2 vw (تبلت و تلفن)
• حاشیه داخلی پایین: 0,8 vw (رومیزی)، 2 vw (تبلت و تلفن)

مرز

و با اضافه کردن شعاع مرزی ، پارامترهای ماژول را تکمیل کنید.

• مستطیل گرد: 100 پیکسل

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

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

بیایید به ماژول بعدی برویم که یک ماژول متنی دیگر است. نماد پیکان زیر را در ناحیه محتوا اضافه کنید: '▼'.

تنظیمات متن

به برگه طراحی ماژول بروید و تنظیمات متن را متناسب با آن تغییر دهید:

• فونت متن: Sans را باز کنید
• رنگ متن: #007fff
• متن حجم متن: 3vw
• ارتفاع خط متن: 0em
• تراز متن: در مرکز

شاخص Z

بیایید شاخص z ماژول را نیز افزایش دهیم.

• شاخص Z: 11

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

فیلدهای با عرض کامل را به انتخاب خود اضافه کنید

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

عنوان اضافه کنید

از عنوان هم استفاده کنید.

رنگ پس زمینه

بعد بیایید رنگ پس زمینه را تغییر دهیم.

• رنگ پس زمینه: #e7f2ff

تنظیمات زمینه

بیایید به تب Module Style برویم و تنظیمات فیلد را تغییر دهیم.

• فیلدهای رنگ پس زمینه: #ffffff
• رنگ متن فیلد: #dddddd
• رنگ متن فوکوس: #007dff
• فیلدهای پد بالا: 1vw (رومیزی)، 2vw (تبلت)، 3vw (تلفن)
• زمینه های پد پایین: 1vw (رومیزی)، 2vw (تبلت)، 3vw (تلفن)
• فونت فیلد: Open Sans

• فیلدها اندازه متن: 0,7 vw (رومیزی)، 1,8 vw (تبلت)، 3 vw (تلفن)

تنظیمات متن عنوان

تنظیمات متن عنوان را تغییر دهید.

• درج عنوان سه: H3
• عنوان نور ملایم: متن پررنگ
• تراز متن: در مرکز
• رنگ متن عنوان: #007dff
• عنوان اندازه متن: 1 vw (رومیزی)، 2,5 vw (تبلت)، 3,5 vw (تلفن)
• ارتفاع خط عنوان: 1,6 em

تنظیمات متن کپچا

با تنظیمات متن کپچا.

• فونت کپچا: Sans را باز کنید
• رنگ متن کپچا: #007dff

تنظیمات دکمه

با سفارشی کردن دکمه ادامه دهید.

• استفاده از سبک های سفارشی برای دکمه: بله
• اندازه متن دکمه: 0,8 vw (رومیزی)، 2 vw (تبلت)، 3 vw (تلفن)
• رنگ متن دکمه: #ffffff
• دکمه پس زمینه: #007dff
• دکمه عرض حاشیه: 0 پیکسل
• دکمه شعاع حاشیه: 100 پیکسل

• دکمه فونت: هیچکدام را باز کنید
• دکمه Soft Light: متن پررنگ

• دکمه حاشیه: 1vw
• صفحه دکمه ای: 1vw (رومیزی)، 2vw (تبلت و تلفن)
• دکمه بالشتک پایین: 1vw (رومیزی)، 2vw (تبلت و تلفن)
• دکمه سمت چپ: 2vw (رومیزی)، 7vw (تبلت و تلفن)
• دکمه سمت راست: 2vw (رومیزی)، 7vw (تبلت و تلفن)

فاصله

از مقادیر padding سفارشی در اندازه های مختلف صفحه استفاده کنید.

• حاشیه داخلی Summit: 4vw (رومیزی)، 6vw (تبلت و تلفن)
• حاشیه داخلی پایین: 4vw (رومیزی)، 6vw (تبلت و تلفن)
• حاشیه داخلی سمت چپ: 2vw (رومیزی)، 6vw (تبلت و تلفن)
• حاشیه داخلی سمت راست: 2vw (رومیزی)، 6vw (تبلت و تلفن)

مرز

سپس تنظیمات حاشیه را تغییر دهید.

• ورودی مستطیل گرد: 10 پیکسل

عنصر اصلی، عنوان مخاطب و Captcha CSS

تنظیمات ماژول را با اضافه کردن برخی تغییرات کوچک CSS به تب پیشرفته تکمیل کنید.

عنصر اصلی:

01	border-radius: 20px;

عنوان تماس :

01	margin-bottom: 1vw;

کپچا:

01	margin-top: 1.5vw;

عناصر را برای ایجاد یک فرم تماس با یک کلیک سفارشی کنید

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

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

میز مطالعه :

01	height: 3vw;

قرص:

01	height: 5vw;

صدا زدن:

01	height: 6vw;

کلاس CSS را به دکمه و پیکان اضافه کنید

بعد، همان کلاس CSS را به دو ماژول متنی اول در ستون 3 اضافه می کنیم.

• کلاس CSS: نمایش-تماس

کلاس CSS را به فرم تماس اضافه کنید

ما همچنین به یک کلاس CSS سفارشی برای ماژول فرم تماس نیاز داریم.

• کلاس CSS: ماژول فرم تماس

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

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

01	display: none;

ماژول کد را با کد JQuery و CSS به ستون 3 اضافه کنید

و برای ایجاد تابع کلیک به کد JQuery نیاز داریم. ما همچنین از کد CSS سفارشی استفاده خواهیم کرد. یک ماژول کد جدید با کد به ستون 2 اضافه کنید. حتما کد JQuery را بین تگ های اسکریپت و کد CSS را بین تگ های سبک قرار دهید.

jQuery(function($){

$(".show-contact").click(function() {

$('.contact-form-module').slideToggle();

});

});

.show-contact {

cursor: pointer;

}

.et-menu>li {

padding-left: 0.7vw !important;

padding-right: 0.7vw !important;

}

بررسی

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

نتیجه

در این مقاله به شما نشان دادیم که چگونه یک فرم تماس کشویی را به هدر سفارشی خود اضافه کنید.

اگر س questionsال یا پیشنهادی دارید ، در صورت تمایل در قسمت نظرات زیر نظر دهید.