هنگامی که یک هدر سفارشی برای خود ایجاد می کنید وب سایت، با استفاده از تم ساز Divi، خواهید دید که به دنبال راه مناسبی برای اضافه کردن یک AAL (تماس برای اقدام) هستید. یکی از راه های انجام این کار اضافه کردن a است فرم تماس پیمایش این به شما کمک می کند ظاهر کلی هدر خود را تمیز نگه دارید و در عین حال امکان ورود را نیز فراهم می کند تماس با شما، بدون نیاز به اسکرول کردن به پایین. در این آموزش نحوه ایجاد a را به شما نشان خواهیم داد فرم تماس کشویی با استفاده از کد Divi و JQuery و CSS. همچنین می توانید فایل JSON را به صورت رایگان دانلود کنید!

برویم.

بررسی

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

منوی کشویی Divi

1. برو به Divi Theme Builder و شروع به ایجاد یک هدر جهانی

برو به Divi Theme Builder

با رفتن به بخش Divi Theme Builder در باطن سایت وردپرس خود شروع کنید.

سربرگ divi جهانی

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

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

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

2. طرح هدر را بسازید

تنظیمات بخش

رنگ پس زمینه

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

  • رنگ زمینه: #FFFFFF
تنظیم پس زمینه

فاصله

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

  • بالشتک بالایی: 0px
  • بالشتک پایین: 0px
پیکربندی بالشتک

جعبه سایه

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

  • قدرت سایه جعبه مقاومت: 50 پیکسل
  • رنگ سایه: rgba (0,0,0,0,15،XNUMX،XNUMX،XNUMX،XNUMX)
پیکربندی سایه Divi

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

ساختار ستون

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

طرح بندی را انتخاب کنید

اندازه

بدون اضافه کردن ماژول های بیشتر ، پارامترهای خط را باز کرده و پارامترهای اندازه را به شرح زیر اصلاح کنید:

  • از عرض روده ای سفارشی استفاده کنید: بله
  • عرض روده: 1
  • برابری ارتفاعات ستون: بله
  • عرض: 95٪
  • حداکثر عرض: 100٪
پیکربندی بعد خط divi

فاصله

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

  • بالشتک بالایی: 1vw
  • بالشتک پایین: 1vw
پیکربندی فاصله بخش

عنصر اصلی

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

align-items: center;

css سفارشی

فهرست ستون 2 Z

همچنین اطمینان حاصل می کنیم که ستون دوم دارای مقدار شاخص z بیشتری برای اهداف واکنشی باشد.

  • فهرست Z: 12
پارامتر ستون

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

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

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

تقسیم ماژول تصویر

هم ترازی

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

  • تراز بندی تصویر: مرکز
تراز ماژول تصویر

اندازه

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

  • عرض: 3vw (دسک تاپ) ، 5vw (رایانه لوحی) ، 7vw (تلفن)
فرم تماس کشویی

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

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

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

شخصی سازی ماژول divi menu

وضع

به زبانه طراحی ماژول بروید و سبک چیدمان را تغییر دهید.

  • سبک: محور
سبک ماژول منو

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

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

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

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

سپس در خط کشویی رنگ خط را تغییر دهید.

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

آیکون های

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

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

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

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

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

با ماژول divi تماس بگیرید

رنگ پس زمینه

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

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

تنظیمات متن

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

  • فونت متن: Sans Open
  • وزن فونت متن: bold
  • رنگ متن: #ffffff
  • اندازه متن: 0.8vw (دسک تاپ) ، 2vw (رایانه لوحی) ، 3vw (تلفن)
  • ترتیب متن: مرکز
رنگ قلم Divi

اندازه

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

  • عرض: 33٪
  • ترتیب ماژول: مرکز
تقسیم بندی متن متن بخش

فاصله

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

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

مرز

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

  • همه گوشه ها: 100 پیکسل
پیکربندی حاشیه ماژول متن

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

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

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

ماژول متن Divi fleche

تنظیمات متن

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

  • فونت متن: Sans Open
  • رنگ متن: # 007fff
  • اندازه متن: 3vw
  • ارتفاع خط متن: 0em
  • ترتیب متن: مرکز
ماژول متن divi قلم

صفحه اول Z

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

  • فهرست Z: 11
موقعیت ماژول متن Divi

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

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

ماژول فرم تماس

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

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

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

دفتر مرکزی:

height: 3vw;

قرص:

height: 5vw;

تلفن:

height: 6vw;

فرم تماس با جزوه نمونه

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

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

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

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

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

  • کلاس CSS: تماس-فرم ماژول
یک کلاس به فرم divi اضافه کنید

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

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

display: none;

تقسیم ماژول سبک css

ماژول کد را به ستون 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;}

کد javascript را اضافه کنید

بررسی

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

دفتر

نمونه طراحی

چه اتفاقی می افتد؟

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