هنگامی که یک هدر سفارشی برای خود ایجاد می کنید وب سایت، با استفاده از تم ساز Divi، خواهید دید که به دنبال راه مناسبی برای اضافه کردن یک AAL (تماس برای اقدام) هستید. یکی از راه های انجام این کار اضافه کردن a است فرم تماس پیمایش این به شما کمک می کند ظاهر کلی هدر خود را تمیز نگه دارید و در عین حال امکان ورود را نیز فراهم می کند تماس با شما، بدون نیاز به اسکرول کردن به پایین. در این آموزش نحوه ایجاد a را به شما نشان خواهیم داد فرم تماس کشویی با استفاده از کد Divi و JQuery و CSS. همچنین می توانید فایل JSON را به صورت رایگان دانلود کنید!
برویم.
بررسی
قبل از اینکه به آموزش برویم ، بیایید نگاهی به نتیجه در اندازه های مختلف صفحه بیندازیم.
1. برو به Divi Theme Builder و شروع به ایجاد یک هدر جهانی
برو به Divi Theme Builder
با رفتن به بخش Divi Theme Builder در باطن سایت وردپرس خود شروع کنید.
یک عنوان جهانی ایجاد کنید
برای شروع ایجاد یک هدر جهانی سفارشی ، روی "افزودن هدر جهانی" کلیک کرده و "ایجاد هدر جهانی" را انتخاب کنید.
2. طرح هدر را بسازید
تنظیمات بخش
رنگ پس زمینه
پس از داخل الگوی کلی سرصفحه ، متوجه بخشی خواهید شد. این بخش را باز کنید و از یک رنگ زمینه سفید استفاده کنید.
- رنگ زمینه: #FFFFFF
فاصله
سپس بالشتک پیش فرض بالایی و پایینی را از قسمت خارج کنید.
- بالشتک بالایی: 0px
- بالشتک پایین: 0px
جعبه سایه
همچنین سایه جعبه ظریف را اعمال کنید.
- قدرت سایه جعبه مقاومت: 50 پیکسل
- رنگ سایه: rgba (0,0,0,0,15،XNUMX،XNUMX،XNUMX،XNUMX)
یک خط جدید اضافه کنید
ساختار ستون
با اضافه کردن ساختار ستون زیر ، اضافه کردن یک خط جدید به بخش ادامه دهید:
اندازه
بدون اضافه کردن ماژول های بیشتر ، پارامترهای خط را باز کرده و پارامترهای اندازه را به شرح زیر اصلاح کنید:
- از عرض روده ای سفارشی استفاده کنید: بله
- عرض روده: 1
- برابری ارتفاعات ستون: بله
- عرض: 95٪
- حداکثر عرض: 100٪
فاصله
سپس بالشتک فوقانی و پائین سفارشی را اضافه کنید.
- بالشتک بالایی: 1vw
- بالشتک پایین: 1vw
عنصر اصلی
و با افزودن یک خط کد CSS به عنصر اصلی ردیف ، تمام محتوای ستون ها را تراز کنید.
align-items: center;
فهرست ستون 2 Z
همچنین اطمینان حاصل می کنیم که ستون دوم دارای مقدار شاخص z بیشتری برای اهداف واکنشی باشد.
- فهرست Z: 12
یک ماژول تصویر به ستون 1 اضافه کنید
لوگو را دانلود کنید
وقت آن است که شروع به اضافه کردن ماژول ها کنیم! با یک ماژول تصویر در ستون 1 شروع کنید. یک آرم بارگذاری کنید.
هم ترازی
سپس تراز بندی ماژول را تغییر دهید.
- تراز بندی تصویر: مرکز
اندازه
همچنین عرض را تغییر دهید.
- عرض: 3vw (دسک تاپ) ، 5vw (رایانه لوحی) ، 7vw (تلفن)
ماژول منو را به ستون 2 اضافه کنید
منو را انتخاب کنید
در ستون دوم ماژول منو اضافه خواهیم کرد.
وضع
به زبانه طراحی ماژول بروید و سبک چیدمان را تغییر دهید.
- سبک: محور
تنظیمات متن فهرست
سپس تنظیمات متن را در منوی ماژول تغییر دهید.
- فونت منو: بدون
- وزن قلم منو: نیمه پررنگ
- رنگ متن منو: # 000000
- اندازه متن منو: 0.8vw (دسک تاپ) ، 2vw (رایانه لوحی) ، 3vw (تلفن)
- فاصله نامه نامه: 1px
تنظیمات متن منو کشویی
سپس در خط کشویی رنگ خط را تغییر دهید.
- رنگ خط منوی کشویی: # 007dff
آیکون های
با رنگ نماد منوی همبرگر.
- رنگ نماد منوی همبرگر: # 007dff
ماژول متن 1 را به ستون 3 اضافه کنید
یک کپی اضافه کنید
بیایید به ماژول سوم برویم! یک ماژول متن را با کپی به انتخاب خود اضافه کنید.
رنگ پس زمینه
سپس یک رنگ زمینه اضافه کنید.
- رنگ زمینه: # 007dff
تنظیمات متن
به برگه طراحی ماژول بروید و متناسب با آن تنظیمات متن را تغییر دهید:
- فونت متن: Sans Open
- وزن فونت متن: bold
- رنگ متن: #ffffff
- اندازه متن: 0.8vw (دسک تاپ) ، 2vw (رایانه لوحی) ، 3vw (تلفن)
- ترتیب متن: مرکز
اندازه
سپس پارامترهای اندازه ماژول را تغییر دهید.
- عرض: 33٪
- ترتیب ماژول: مرکز
فاصله
سپس بالشتک فوقانی و پائین سفارشی را اضافه کنید.
- بالشتک بالایی: 0.8vw (دسک تاپ) ، 2vw (رایانه لوحی و تلفن)
- بالشتک پایین: 0.8vw (میز) ، 2vw (رایانه لوحی و تلفن)
مرز
و با اضافه کردن شعاع مرزی ، پارامترهای ماژول را تکمیل کنید.
- همه گوشه ها: 100 پیکسل
ماژول متن 2 را به ستون 3 اضافه کنید
نمادی را به قسمت محتوا اضافه کنید
بیایید به ماژول بعدی برویم ، که ماژول متن دیگری است. پیکان زیر را در قسمت محتوا اضافه کنید: "".
تنظیمات متن
به برگه طراحی ماژول بروید و متناسب با آن تنظیمات متن را تغییر دهید:
- فونت متن: Sans Open
- رنگ متن: # 007fff
- اندازه متن: 3vw
- ارتفاع خط متن: 0em
- ترتیب متن: مرکز
صفحه اول Z
ما همچنین شاخص z ماژول را افزایش می دهیم.
- فهرست Z: 11
ماژول فرم تماس را به ستون 3 اضافه کنید
اکنون می توانید a اضافه کنید فرم تماس فقط در پایین ماژول متنی که حاوی فلش است. استفاده از این ماژول بسیار ساده است، بنابراین باید فیلدهایی را که می خواهید قابل مشاهده کنید، سفارشی کنید.
3. عناصر را سفارشی کنید تا یک فرم تماس با یک کلیک ایجاد کنید
ارتفاع ستون 3 را اضافه کنید
پس از آماده شدن همه حالت ها ، زمان ایجاد اثر فرا رسیده است. اولین قدم برای دستیابی به نتیجه دلخواه باز کردن تنظیمات در ستون 3 و افزودن ارتفاع سفارشی پاسخگو در برگه پیشرفته است.
دفتر مرکزی:
height: 3vw;
قرص:
height: 5vw;
تلفن:
height: 6vw;
کلاس CSS را به دکمه و پیکان اضافه کنید
سپس همان کلاس CSS را به دو ماژول متن اول در ستون 3 اضافه خواهیم کرد.
- کلاس CSS: نمایش-تماس
کلاس CSS را به فرم تماس اضافه کنید
ما همچنین برای کلاس فرم CSS سفارشی نیاز داریم.
- کلاس CSS: تماس-فرم ماژول
ماژول فرم تماس را مخفی کنید
با افزودن یک خط اضافی از کد CSS به عنصر اصلی ماژول فرم تماس ادامه دهید. با این کار می توان ماژول را قبل از کلیک پنهان کرد.
display: none;
ماژول کد را به ستون 3 با کد JQuery و CSS اضافه کنید
و برای ایجاد عملکرد کلیک ، به چند کد 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;}
بررسی
اکنون که همه مراحل را طی کردیم ، بیایید نگاهی نهایی به ظاهر آن در اندازه های مختلف صفحه بیندازیم.
دفتر
چه اتفاقی می افتد؟
در این مقاله ، ما به شما نشان داده ایم که چگونه یک فرم تماس کشویی را به هدر سفارشی خود اضافه کنید. این یک روش عالی برای شروع اقدامات اولیه است.