رفتن به محتوای اصلی

چگونه یک فرم تماس کشویی را به عنوان جهانی خود اضافه کنید

Divi: ساده ترین قالب وردپرس برای استفاده

Divi: بهترین تم وردپرس تمام وقت!

بیشتر دانلود 901.000، Divi محبوب ترین تم وردپرس در جهان است. این کامل، آسان برای استفاده است و همراه با بیش از قالب های رایگان 62. [توصیه شده]

هنگامی که با استفاده از تم سازنده Divi یک سربرگ سفارشی برای وب سایت خود ایجاد می کنید ، متوجه می شوید که به دنبال راهی مناسب برای افزودن AAL (فراخوان برای اقدام) هستید. یکی از راه های انجام این کار افزودن فرم تماس کشویی است. این به شما کمک می کند تا ظاهر کلی هدر خود را تمیز نگه دارید در حالی که توانایی برقراری ارتباط با شما را بدون نیاز به پایین پیمایش فراهم می کند. در این آموزش ، ما به شما نحوه ایجاد فرم تماس کشویی با استفاده از 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 شروع کنید. یک آرم بارگذاری کنید.

به راحتی وب سایت خود را با Elementor بسازید

Elementor به شما امکان می دهد تا با طراحی حرفه ای هر طراحی وب سایت را به راحتی ایجاد کنید. هزینه کارهایی را که می توانید انجام دهید ، متوقف نکنید. [رایگان]

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

هم ترازی

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

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

اندازه

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

  • عرض: 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 (رایانه لوحی و تلفن)
پیکربندی فاصله ماژول متن

مرز

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

آیا شما به دنبال بهترین تم ها و پلاگین های وردپرس هستید؟

بهترین پلاگین ها و تم های وردپرس را در Envato دانلود کنید و به راحتی وب سایت خود را ایجاد کنید. در حال حاضر بیش از 49.720.000 دریافت می کند. [EXCLUSIVE]

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

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

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

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

ماژول متن Divi fleche

تنظیمات متن

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

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

صفحه اول Z

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

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

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

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

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

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

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

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

دفتر مرکزی:

height: 3vw;

قرص:

height: 5vw;

تلفن:

height: 6vw;

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

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

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

  • کلاس CSS: نمایش تماس با ما
بخش نمایش تماس را اضافه کنید

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

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

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

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

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

display: none;

به راحتی فروشگاه آنلاین خود را ایجاد کنید

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

تقسیم ماژول سبک 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 را اضافه کنید

بررسی

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

دفتر

نمونه طراحی

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

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

این مقاله حاوی نظرات 0

دیدگاهتان را بنویسید

آدرس ایمیل شما منتشر نخواهد شد. علامت گذاری شده اند *

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

بازگشت به بالا