Divi: نحوه سفارشی سازی ماژول "Form تماس".

آیا می خواهید یک ایجاد کنید فرم تماس به لطف ماژول به وب سایت شما فرم تماس از دیوی؟ در اینجا 3 ایده شخصی سازی وجود دارد…

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

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

ما 3 طراحی منحصر به فرد از ماژول را به اشتراک خواهیم گذاشت فرم تماس de DIVI که می توانید تنها با استفاده از گزینه های داخلی Divi ایجاد کنید.

بیایید برویم

نمای کلی طرح های ماژول فرم تماس Divi

نسخه های دسکتاپ

بیایید با نگاهی به نسخه دسکتاپ طرح های مختلف ماژول شروع کنیم فرم تماس که در این آموزش طراحی خواهیم کرد.

نسخه های موبایل

و این چیزی است که آنها در اندازه های کوچکتر صفحه نمایش به نظر می رسند:

اکنون DIVI را دانلود کنید!!!

نحوه سفارشی کردن ماژول فرم تماس Divi: 3 مثال

دفعات بازدید: Divi: چگونه یک بخش اعضای تیم را به عنوان چرخ فلک ایجاد کنیم

ایجاد فرم تماس شماره 1

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

پیشینه شیب

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

• گرادیان متوقف می شود
  • 34٪: #4c00ff
  • 34٪: #ffd400
• نوع: گرد
• جهت گرادیان: پایین سمت چپ

فاصله

در ادامه در تب Design به گزینه Spacing رفته و تنظیمات را به صورت زیر تغییر دهید.

• بالشتک (بالا و پایین): 200 پیکسل

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

ساختار ستون

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

ستون 1: رنگ پس زمینه

بدون افزودن ماژول، تنظیمات ردیف، سپس تنظیمات ستون 1 را باز کنید و رنگ پس‌زمینه را در زیر اضافه کنید

• پس زمینه: rgba(255,255,255,0.55)

ستون 1: تصویر پس زمینه

همچنین یک تصویر پس زمینه به ستون اول اضافه کنید.

• تکرار تصویر پس زمینه: بدون تکرار
• ترکیب تصویر پس زمینه: صفحه نمایش

ستون 2: تصویر پس زمینه

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

• زمینه: #ffffff

اندازه

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

• برابر کردن ارتفاع ستون: بله

فاصله

همچنین تمام بالشتک های سفارشی پیش فرض را حذف کنید.

• بالشتک (بالا و پایین): 0 پیکسل

شعاع حاشیه ستون

یک شعاع حاشیه به هر دو ستون در تب پیشرفته اضافه کنید.

border-radius: 10px;

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

اضافه کردن محتوا

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

تنظیمات متن

سپس به تب Design ماژول Text رفته و تغییراتی را اعمال کنید.

• متن:
  • فونت: رضایت بخش
  • رنگ متن: #333333
  • اندازه: 100 پیکسل
  • ارتفاع خط: 1 em
  • تراز: مرکز

فاصله

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

• بالشتک (بالا): 600 پیکسل
• بالشتک (پایین): 100 پیکسل

جعبه سایه

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

• قدرت تاری سایه جعبه: 80 پیکسل
• قدرت پخش سایه جعبه: -16 پیکسل
• رنگ سایه: rgba(0,0,0,0.3)

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

تصویری را بارگذاری کنید

با افزودن یک ماژول Image به ستون دوم ادامه دهید. تصویر مورد نظر خود را آپلود کنید.

اندازه

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

• عرض: 25% (رومیزی)، 50% (تبلت)، 60% (تلفن)
• تراز ماژول: مرکز

فاصله

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

• حاشیه (بالا): -60%

مرز

حاشیه های تصویر را به صورت زیر تغییر دهید:

• گوشه های گرد: 100 پیکسل (همه گوشه ها)

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

اضافه کردن محتوا

درست در زیر ماژول Image، یک ماژول متن با محتوا اضافه کنید.

تنظیمات متن

تنظیمات متن را برای این ماژول ویرایش کنید.

• متن:
  • فونت: رضایت بخش
  • رنگ متن: #333333
  • اندازه متن: 44 پیکسل
  • جهت: مرکز

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

اضافه کردن محتوا

سپس یک ماژول Text دیگر اضافه کنید.

تنظیمات متن

همچنین تنظیمات متن را برای این ماژول تغییر دهید.

• متن:
  • فونت: Arial
  • رنگ متن: #ffd400
  • رنگ متن: 18 پیکسل
  • فاصله حروف: 2 پیکسل
  • جهت: مرکز

فاصله

سپس یک حاشیه پایین اضافه کنید.

• حاشیه (پایین): 100 پیکسل

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

در قسمت نام و ایمیل گزینه «Make Fullwidth» را فعال کنید

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

• ساخت Fullwidth: بله

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

برای ایجاد این طرح، فیلد دیگری برای موضوع اضافه کردیم.

حفاظت از هرزنامه

سپس گزینه captcha را غیرفعال کنید.

• از Captcha اصلی استفاده کنید: خیر

تنظیمات متن فیلد فرم

تغییراتی در تنظیمات متن فیلد فرم این ماژول فرم تماس ایجاد کنید

• زمینه های:
  • رنگ پس زمینه: rgba (255,255,255,0)
  • فونت: Arial
  • وزن قلم: سبک
  • اندازه متن: 16 پیکسل
  • فاصله حروف: 2 پیکسل

تنظیمات دکمه

همچنین در حال تغییر ظاهر دکمه ها هستیم.

• استفاده از اندازه سفارشی برای دکمه: بله
• دکمه :
  • رنگ متن: #ffd400
  • عرض حاشیه: 0 پیکسل
  • فاصله حروف: 2 پیکسل
  • فونت: Arial
  • نوع قلم: U
  • زیر خط رنگ: #4c00ff

فاصله

سپس مقداری padding سفارشی اضافه کنید.

• بالشتک (پایین): 100 پیکسل
• بالشتک (چپ و راست): 50 پیکسل

مرز

و یک حاشیه پایینی ظریف به هر یک از فیلدها اضافه کنید.

• ورودی پهنای حاشیه پایین: 2 پیکسل
• رنگ حاشیه پایین را ورودی: #efefef

فاصله گذاری فیلدهای جداگانه

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

• حاشیه (پایین): 20 پیکسل

ایجاد فرم تماس شماره 2

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

پیشینه شیب

بریم سراغ مثال بعدی! یک بخش جدید با پس زمینه گرادیان اضافه کنید.

• توقف های گرادیان:
  • 50%: #562fef
  • 50%: #ffffff
• نوع گرادیان: خطی

فاصله

مقادیر padding سفارشی را به تنظیمات فاصله در این بخش اضافه کنید.

• بالشتک (بالا و پایین): 200 پیکسل

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

ساختار ستون

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

رنگ پس زمینه

بدون افزودن ماژول، تنظیمات ردیف را باز کنید و رنگ پس زمینه را به ردیف اضافه کنید.

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

پس زمینه 2 ستونی شیب

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

• توقف های گرادیان:
  • 0٪: #9932ff
  • 100%: #562fef
  • نوع: خطی
  • فرمان: 160 درجه

اندازه

همچنین پارامترهای اندازه خط را تغییر دهید.

• از عرض ناودان سفارشی استفاده کنید: بله
• عرض ناودان: 1
• برابر کردن ارتفاع ستون: بله

فاصله

بعد، مقادیر فاصله سفارشی را اضافه کنید.

• خط:
  • بالشتک (بالا و پایین): 0 پیکسل

• ستون 1:
  • بالشتک: 100 پیکسل (بالا)، 50 پیکسل (پایین)
  • بالشتک (چپ و راست): 50 پیکسل

• ستون 2:
  • بالشتک (بالا و پایین): 100 پیکسل
  • بالشتک (چپ و راست): 50 پیکسل

مرز

"20px" را به هر یک از مرزهای خط اضافه کنید.

جعبه سایه

در نهایت، یک سایه باکس ظریف به خط اضافه کنید.

• قدرت تاری سایه جعبه: 45 پیکسل
• قدرت پخش سایه جعبه: -11 پیکسل
• رنگ سادو: rgba(0,0,0,0.3)

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

اضافه کردن محتوا

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

تنظیمات متن

تنظیمات متن را برای این ماژول ویرایش کنید.

• متن:
  • وزن قلم: فوق العاده پررنگ
  • سبک قلم: TT
  • رنگ: #562fef
  • اندازه: 100 پیکسل (رومیزی)، 80 پیکسل (تبلت)، 60 پیکسل (تلفن)
  • فاصله حروف: -10 پیکسل
  • ارتفاع خط: 1 em

فاصله

یک حاشیه پایین نیز اضافه کنید.

• حاشیه (پایین): 50 پیکسل

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

عناصر

ماژول دومی که در ستون اول به آن نیاز داریم، یک ماژول فرم تماس است. پس از افزودن ماژول، گزینه "استفاده از کپچای اولیه" را خاموش کنید.

• از Captcha اصلی استفاده کنید: خیر

تنظیمات متن فیلد فرم

سپس رنگ پس زمینه فیلدهای فرم را تغییر دهید.

• رنگ پس زمینه فیلدها: #fffff

تنظیمات دکمه

همچنین با تنظیمات دکمه بازی کنید تا به جای دکمه متن، یک دکمه نماد ایجاد کنید.

• استفاده از سبک های سفارشی برای دکمه: بله
• دکمه :
  • اندازه متن: 73 پیکسل
  • رنگ متن: rgba(0,0,0,0،XNUMX،XNUMX،XNUMX) (پیش‌فرض)،
  • رنگ پس‌زمینه: rgba(255,255,255,0) (Hover)
  • عرض حاشیه: 0 پیکسل
  • رنگ نماد: #9932ff
• فقط نماد نمایش روی دکمه شناور: خیر

جعبه سایه

در نهایت، یک سایه باکس ظریف به هر یک از فیلدها اضافه کنید.

• قدرت تاری سایه جعبه: 36 پیکسل
• قدرت پخش سایه جعبه: -14 پیکسل
• رنگ سایه: rgba(0,0,0,0.3)

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

اضافه کردن محتوا

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

تنظیمات متن

هنگامی که محتوا را اضافه کردید، تنظیمات متن را برای این ماژول ویرایش کنید.

• متن:
  • وزن قلم: فوق العاده پررنگ
  • سبک قلم: TT
  • رنگ: #ffffff
  • اندازه: 23px
  • فاصله حروف: -1 پیکسل

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

اضافه کردن محتوا

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

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

سپس یک نماد مربوطه را انتخاب کنید.

تنظیمات نماد

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

• رنگ نماد: #ffffff
• محل قرارگیری تصویر/آیکون: سمت راست

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

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

• اندازه متن عنوان: 15 پیکسل
• فاصله حروف عنوان: -0,5 پیکسل

فاصله

و یک حاشیه بالا اضافه کنید.

• حاشیه (بالا): 120 پیکسل

ماژول Blurb را دوبار کلون کنید

هنگامی که ویرایش اولین ماژول Blurb را تمام کردید، می توانید ادامه دهید و ماژول را دو بار شبیه سازی کنید.

محتوا و نماد دو تکراری را تغییر دهید

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

فاصله دو تکراری را تغییر دهید

حاشیه بالای دو نسخه تکراری نیز باید تغییر کند.

• حاشیه (بالا): 30 پیکسل

ایجاد فرم تماس شماره 3

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

رنگ پس زمینه

بریم سراغ مثال سوم! یک بخش جدید با رنگ پس زمینه زیر اضافه کنید:

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

فاصله

با افزودن مقادیر padding سفارشی در تنظیمات فاصله، ادامه دهید.

• بالشتک (بالا و پایین): 200 پیکسل

خط شماره 1 را اضافه کنید

ساختار ستون

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

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

اضافه کردن محتوا

وقت آن است که اضافه کردن ماژول ها را شروع کنیم! اولین ماژولی که باید به ستون اول اضافه کنیم یک ماژول Text است. محتوای انتخابی را وارد کنید

تنظیمات متن

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

• متن:
  • وزن قلم: فوق العاده پررنگ
  • رنگ متن: rgba(255,255,255,0.24)
  • اندازه متن: 100 پیکسل (رومیزی)، 70 پیکسل (تبلت)، 36 پیکسل (تلفن)
  • ارتفاع خط: 1 em
  • جهت: مرکز

فاصله

همچنین یک حاشیه منفی پایین اضافه کنید.

• حاشیه (پایین): -100 پیکسل

خط 2 را اضافه کنید

ساختار ستون

سطر دومی که برای تکمیل این مثال نیاز داریم شامل ساختار ستون زیر است:

پیشینه شیب

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

• توقف های گرادیان:
  • 50%: #11CE84
  • 50٪: #10C77F
• نوع گرادیان: خطی
• فرمان: 160 درجه

اندازه

همچنین پارامترهای اندازه را تغییر دهید.

• از عرض ناودان سفارشی استفاده کنید: بله
• عرض ناودان: 1
• برابر کردن ارتفاع ستون: بله

فاصله

سپس مقداری padding اضافه کنید.

• بالشتک: 150 پیکسل (بالا)، 100 پیکسل (پایین)
• بالشتک: 50 پیکسل (چپ و راست)

مرز

سپس به تنظیمات حاشیه بروید و "20px" را به هر یک از گوشه ها اضافه کنید. همچنین از حاشیه پایین استفاده کنید.

• گوشه های گرد: 20 پیکسل
• عرض حاشیه پایین: 10 پیکسل
• رنگ حاشیه پایین: #1ba35a

جعبه سایه

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

• قدرت تاری سایه جعبه: 80 پیکسل
• قدرت پخش سایه جعبه: -24 پیکسل
• رنگ سایه: rgba(0,0,0,0.3)

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

در قسمت نام و ایمیل گزینه «Make Fullwidth» را فعال کنید

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

• ساخت Fullwidth: بله

عناصر

سپس کپچا را غیرفعال کنید.

• از Captcha اصلی استفاده کنید: خیر

تنظیمات دکمه

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

• استفاده از سبک های سفارشی برای دکمه: بله
• رنگ متن دکمه: #ffffff
• توقف های گرادیان:
  • 50٪: #3AA0E3
  • 50%: #3491CE
• نوع گرادیان: خطی
• جهت گرادیان: 155 درجه -
• عرض حاشیه دکمه: 0 پیکسل
• شعاع حاشیه دکمه: 10 پیکسل
• قدرت پخش سایه جعبه: -2 پیکسل
• رنگ سایه: #0a60af

همچنین ببینید: Divi: نحوه سفارشی سازی نمادهای سبد و جستجوی ماژول "Fullwidth Menu".

مرز

ما همچنین '5px' گوشه های گرد را به هر یک از فیلدها اضافه می کنیم.

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

اضافه کردن محتوا

در ستون دوم، اولین ماژول مورد نیاز ما یک ماژول Text است. ادامه دهید و محتوایی را وارد کنید.

رنگ پس زمینه

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

• پس زمینه: rgba(255,255,255,0.13)

تنظیمات متن

همچنین با تنظیمات متن ویرایش کنید.

• متن:
  • وزن قلم: سبک
  • رنگ متن: #ffffff
  • اندازه متن: 15 پیکسل
  • فاصله حروف: -0,5 پیکسل

فاصله

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

• بالشتک (بالا و پایین): 12 پیکسل
• بالشتک (چپ و راست): 10 پیکسل

مرز

ما همچنین "20px" را در گوشه سمت چپ بالا و پایین اضافه می کنیم. در بالای آن، یک حاشیه سمت چپ اضافه می کنیم.

• گوشه های گرد: 20 پیکسل (بالا چپ و پایین سمت چپ)
• عرض حاشیه سمت چپ: 34 پیکسل
• رنگ حاشیه سمت چپ: #edf000

دید

برای اینکه این طرح با اندازه‌های مختلف صفحه مطابقت داشته باشد، ماژول Text را در گوشی و تبلت غیرفعال می‌کنیم.

ماژول متن را دوبار کلون کنید

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

محتوای دو تکراری را اصلاح کنید

محتویات دو تکراری را به چیز دیگری تغییر دهید.

فاصله دو تکراری را تغییر دهید

و یک حاشیه بالا برای ایجاد فاصله بین هر یک از ماژول ها اضافه کنید.

• حاشیه (بالا): 20 پیکسل

مرز دو تکراری را اصلاح کنید

در نهایت رنگ حاشیه سمت چپ هر یک از موارد تکراری را به صورت جداگانه تغییر دهید.

• رنگ 1: #00faff
• رنگ 2: #00f76f

مقاله ما را نیز ببینید نحوه ایجاد یک نوار لغزنده آکاردئونی پاسخگو

بررسی

نسخه دسکتاپ

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

موبایل

و در اینجا چیزی است که می توانید از طراحی های ماژول فرم تماس Divi در اندازه های صفحه نمایش کوچکتر انتظار داشته باشید:

اکنون DIVI را دانلود کنید!!!

نتیجه

در این پست، ما 3 طرح فوق العاده ماژول فرم تماس Divi را به اشتراک گذاشته ایم که می توانید به راحتی از آنها استفاده کرده و برای هر وب سایتی که ایجاد می کنید، آنها را تغییر دهید. 

لس اشکال مخاطبین بخش ضروری بسیاری از وب‌سایت‌ها هستند، بنابراین مهم است که مطمئن شوید طراحی شما بازدیدکنندگان را متقاعد می‌کند تا در تماس باشند. 

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

همچنین می توانید مشورت کنید منابع مااگر به عناصر بیشتری نیاز دارید تا پروژه های ایجاد سایت های اینترنتی خود را انجام دهید.

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

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

...