نیاز به ترکیب فیلدهای درون خطی و فیلدهای پهنای کامل ماژول فرم تماس de DIVI ?
Le فرم تماس اگر می‌خواهید ایمیل‌ها را جذب کنید و بازدیدکنندگان خود را به مشتری تبدیل کنید، عنصر مهمی است که باید در وب سایت خود قرار دهید.
ماژول فرم تماس de DIVI را می توان به راحتی برای ایجاد سفارشی کرد اشکال کارت های تماس جذاب و گیرا برای انواع وب سایت ها. این ماژول دارای دو گزینه نمایش است که می تواند در هر فیلد فرم اعمال شود: EN ligne ou عرض کامل.
در این آموزش، چهار امکان چیدمان منحصر به فرد را برای شما ارائه خواهیم کرد فرم تماس Divi با استفاده از فیلدهای درون خطی و تمام عرض.
بیایید شروع کنیم!
بررسی
در اینجا پیش نمایشی از آنچه ما طراحی خواهیم کرد است.
طرح اول
طرح دوم
طرح سوم
طرح چهارم
آنچه شما باید برای شروع کار
قبل از شروع ، موضوع Divi را نصب و فعال کنید و مطمئن شوید که آخرین نسخه Divi را در وب سایت خود دارید.
اکنون شما آماده شروع هستید!
4 طرح‌بندی نمونه برای ماژول فرم تماس Divi با استفاده از فیلدهای درون خطی و تمام عرض
طرح از پیش تعریف شده را انتخاب کنید
هر یک از 4 الگو از طرح بندی صفحه تماس تعمیر کفش اصلاح شده اند پک چیدمان تعمیر کفش، که می توانید آن را در کتابخانه Divi بیابید.
یک صفحه جدید به وب سایت خود اضافه کنید و به آن عنوان بدهید، سپس گزینه را انتخاب کنید از Divi Builder استفاده کنید.
ما از یک طرح از پیش ساخته شده از کتابخانه Divi برای این مثال استفاده خواهیم کرد، پس انتخاب کنید طرح بندی ها را مرور کنید.
طرح بندی صفحه تماس تعمیر کفش را پیدا کرده و انتخاب کنید.
Sélectionnez از این طرح بندی استفاده کنید تا طرح بندی را به صفحه خود اضافه کنید.
اکنون آماده طراحی نمونه های خود هستیم.
طرح اول
ابتدا خط حاوی ماژول را حرکت دهید فرم تماس به بخش بالا، درست زیر خط با ماژول های Blurb. سپس می توانید قسمت خالی باقی مانده را حذف کنید.
تنظیمات خط را باز کنید و بالشتک چپ و راست اضافه کنید،
- بالشتک (چپ و راست): 15%
گزینه های پاسخگو را انتخاب کنید و padding را برای موبایل تنظیم کنید.
- بالشتک (چپ و راست): 5%
طرح بندی فرم تماس با فیلدهای درون خطی و تمام عرض تغییر کرد
برای این طرح، دو فیلد مجزا برای نام و نام خانوادگی ایجاد می کنیم.
تنظیمات ماژول فرم تماس را باز کنید و فیلد ID و عنوان را برای قسمت نام خانوادگی به نام تغییر دهید.
یک فیلد جدید در زیر قسمت First Name اضافه کنید. فیلد ID و عنوان را روی Name قرار دهید.
در تنظیمات فیلد نام، تنظیمات layout را باز کرده و Make Fullwidth را روی No قرار دهید.
- Fullwidth را بسازید: خیر
سپس، تحت تنظیمات از فرم تماس، ترتیب موضوع و تلفن را تغییر دهید تا تلفن قبل از موضوع درج شود.
تنظیمات طرح بندی فیلد موضوع را باز کنید و فیلد را روی عرض کامل تنظیم کنید.
- ساخت Fullwidth: بله
سفارشی سازی طراحی فرم تماس
حالا بیایید چند تنظیمات را تغییر دهیم تا طراحی کامل شود. به تب Design در تنظیمات ماژول فرم تماس بروید.
ابتدا رنگ پس زمینه دکمه را تغییر دهید.
- پس زمینه دکمه: #DBC2B3
یک حاشیه بالا به دکمه اضافه کنید.
- حاشیه دکمه (بالا): 10 پیکسل
در نهایت به تنظیمات حاشیه بروید و گوشه های گرد را به فیلدها اضافه کنید.
- ورودی گوشه های گرد: 30 پیکسل
همچنین ببینید: Divi: چگونه یک لوگوی واکنشگرا به ماژول "Fullwidth Menu" اضافه کنیم
نتیجه نهایی مثال 1
در اینجا نتیجه نهایی در دسکتاپ و موبایل است.
مثال دوم
برای مثال دوم، ماژول های Blurb را به سمت چپ صفحه منتقل می کنیم و فرم تماس را در سمت راست صفحه قرار می دهیم. ماژول های Blurb را به یک ستون منتقل کنید.
طرح بندی ردیف را تغییر دهید.
تنظیمات طراحی خط را باز کنید و خاموش کنید از عرض ناودان سفارشی استفاده کنید.
- از عرض ناودان سفارشی استفاده کنید: خیر
کد را به CSS سفارشی عنصر اصلی اضافه کنید تا ماژول های Blurb و فرم تماس را به صورت عمودی تراز کنید.
align-items:center;
حالا باید مرز نازک بین ستون ها را برداریم. تنظیمات ردیف را باز کنید، سپس تنظیمات ستون را باز کنید. 1. در تب Design، به تنظیمات حاشیه بروید و حاشیه را بردارید.
- عرض حاشیه سمت راست: 0 پیکسل
سپس تنظیمات ستون 2 را باز کرده و مراحل حذف حاشیه را تکرار کنید.
- عرض حاشیه سمت راست: 0 پیکسل
متن "تماس با ما" را در مرکز قرار دهید.
فرم تماس را به ستون سمت راست منتقل کنید. قسمت خالی باقی مانده را حذف کنید.
طرح بندی فرم تماس با فیلدهای درون خطی و تمام عرض تغییر کرد
این چیدمان همچنین دارای دو فیلد مجزا برای نام و نام خانوادگی خواهد بود. تنظیمات ماژول فرم تماس را باز کنید و فیلد ID و عنوان را برای قسمت نام خانوادگی به نام تغییر دهید.
یک فیلد جدید در زیر قسمت First Name اضافه کنید. فیلد ID و عنوان را روی Name قرار دهید.
در تنظیمات فیلد نام، تنظیمات layout را باز کرده و Make Fullwidth را روی No قرار دهید.
- Fullwidth را بسازید: خیر
ترتیب فیلدهای تلفن و موضوع را طوری تغییر دهید که گوشی قبل از موضوع قرار گیرد.
تنظیمات فیلد ایمیل، تلفن و موضوع را باز کنید و طرح بندی را به عرض کامل تنظیم کنید.
- ساخت Fullwidth: بله
سفارشی سازی طراحی فرم تماس
تنظیمات ردیف را باز کنید، سپس تنظیمات ستون را باز کنید. 2. رنگ پس زمینه را تنظیم کنید.
- پس زمینه: #DBC2B3
در تنظیمات ستون 2، به تب Design بروید و padding را اضافه کنید.
- بالشتک (بالا، پایین، چپ و راست: 50 پیکسل
برای تغییر تنظیمات پاسخگو، نماد موبایل را انتخاب کنید. تنظیم بالشتک برای موبایل.
- بالشتک (بالا، پایین، چپ و راست): 30 پیکسل
سپس یک کادر سایه به ستون اضافه کنید.
در نهایت تنظیمات ماژول فرم تماس را باز کنید و رنگ متن فیلد را تغییر دهید.
- رنگ متن فیلدها: #000000
نتیجه نهایی مثال 2
در اینجا نتیجه نهایی طرح دوم است.
مثال سوم
برای طرح سوم، فرم تماس را در سمت چپ و ماژول های Blurb را در سمت راست خواهیم داشت. بیایید با تغییر ساختار ستونی سطر حاوی ماژول های Blurb شروع کنیم.
ماژول آدرس را به ستون سمت راست منتقل کنید.
سپس، ماژول متن "Contact US" را به ستون سمت چپ منتقل کنید، سپس خط خالی باقیمانده را حذف کنید.
ماژول فرم تماس را به ستون سمت چپ، در زیر ماژول متنی "تماس با ایالات متحده" منتقل کنید. قسمت خالی باقی مانده را حذف کنید.
تنظیمات خط را در زیر تب Design باز کنید و خاموش کنید از عرض ناودان سفارشی استفاده کنید
- از عرض ناودان سفارشی استفاده کنید: خیر
کد را به CSS سفارشی عنصر اصلی اضافه کنید تا ماژول های Blurb و فرم تماس را به صورت عمودی تراز کنید.
align-items:center;
تنظیمات ردیف را باز کنید، سپس تنظیمات ستون را باز کنید. 1. در تب Design، به تنظیمات حاشیه بروید و حاشیه را بردارید. مراحل حذف حاشیه از ستون 2 را تکرار کنید.
- عرض حاشیه سمت راست: 0 پیکسل
تغییر طرح فرم تماس
عرض فیلدها را برای طرح سوم به همان شکلی که هستند رها می کنیم، با این حال، تنظیمات فرم تماس را باز کنید و ترتیب شماره تلفن و فیلد موضوع را تغییر دهید تا تلفن اول شود.
نتیجه نهایی مثال 3
در اینجا نتیجه نهایی طرح سوم است.
دفعات بازدید: Divi: نحوه نمایش ماژول Fullwidth Header به صورت تمام صفحه
مثال چهارم
برای طرح چهارم و نهایی، ماژول فرم تماس در سمت چپ و ماژول های Blurb در سمت راست قرار خواهند گرفت. مجدداً با تغییر ساختار ستونی سطر حاوی ماژول های Blurb شروع می کنیم.
ماژول آدرس را به ستون سمت راست منتقل کنید.
سپس ماژول فرم تماس را به ستون سمت چپ منتقل کنید. قسمت خالی باقی مانده را حذف کنید.
تنظیمات خط را در تب Design باز کرده و غیرفعال کنید از عرض ناودان سفارشی استفاده کنید.
- از عرض ناودان سفارشی استفاده کنید: خیر
کد را به CSS سفارشی عنصر اصلی اضافه کنید تا ماژول های Blurb و فرم تماس را به صورت عمودی تراز کنید.
align-items:center;
تنظیمات ردیف را باز کنید، سپس تنظیمات ستون را باز کنید. 1. در تب Design، به تنظیمات حاشیه بروید و حاشیه را بردارید.
- عرض حاشیه سمت راست: 0 پیکسل
سپس تنظیمات ستون 2 را باز کرده و مراحل حذف حاشیه را تکرار کنید.
- عرض حاشیه سمت راست: 0 پیکسل
تنظیمات ماژول متن را برای متن «تماس با ما» باز کنید و متن را در مرکز قرار دهید.
- تراز متن: در مرکز
طرح بندی فرم تماس با فیلدهای درون خطی و تمام عرض تغییر کرد
برای این طراحی، تمام فیلدهای ما به عرض کامل خواهند بود. تنظیمات ماژول فرم تماس را باز کنید، سپس تنظیمات هر فیلد را باز کنید. در تب Design، را انتخاب کنید طرح و تعریف کنید Fullwidth را بسازید سور بله.
هنگامی که هر فیلد با عرض کامل را ایجاد کردید، فرم باید به این شکل باشد.
حالا فیلد ID و عنوان قسمت Last Name را به First Name تغییر دهید.
یک فیلد جدید در زیر قسمت First Name اضافه کنید. فیلد ID و عنوان را روی Name قرار دهید.
ترتیب فیلدهای تلفن و موضوع را طوری تغییر دهید که گوشی قبل از موضوع قرار گیرد.
سفارشی کردن طراحی ماژول فرم تماس
در تنظیمات ماژول، در تب Design، رنگ متن فیلد را روی سیاه قرار دهید.
- رنگ متن فیلدها: #000000
تنظیمات بخش را باز کنید و یک رنگ پس زمینه اضافه کنید.
- پس زمینه: #DBC2B3
در نهایت یک ماسک پس زمینه اضافه کنید.
- ماسک پس زمینه: قوس
- تبدیل ماسک: افقی
برای اینکه ماسک پس‌زمینه روی موبایل بهتر کار کند، از تنظیمات واکنشگرا استفاده کنیم.
- تبدیل ماسک (تلفن): افقی و چرخشی
نتیجه نهایی
در اینجا نتیجه نهایی طرح چهارم است.
نتایج نهایی
بیایید یک بار دیگر به تمام نمونه های خود نگاهی بیندازیم.
مثال اول
مثال دوم
مثال سوم
مثال چهارم
اکنون DIVI را دانلود کنید!!!
نتیجه
داشتن یک فرم تماس جذاب می تواند تبدیل شما را افزایش دهد و به بازدیدکنندگان اجازه دهد مستقیماً با شما ارتباط برقرار کنند.
همانطور که در این مقاله نشان داده‌ایم، می‌توانید از گزینه‌های فیلد درون خطی و پهنای کامل برای ایجاد ظاهر و طرح‌بندی متفاوت برای فرم خود استفاده کنید، و گزینه‌های طراحی داخلی Divi به شما این امکان را می‌دهد که طرح‌های منحصربه‌فرد و جذابی ایجاد کنید تا به برجسته‌تر شدن فرم کمک کنید.
امیدواریم این تکنیک مهارت طراحی مفید دیگری را برای پروژه های آینده اضافه کند.
امیدواریم این آموزش الهام بخش شما برای پروژه های بعدی Divi باشد. اگر نگرانی یا پیشنهادی دارید، ما را بیابید بخش نظرات برای بحث در مورد
همچنین می توانید مشورت کنید منابع مااگر به عناصر بیشتری نیاز دارید تا پروژه های ایجاد سایت های اینترنتی خود را انجام دهید.
دریغ نکنید که با راهنمای ما در این زمینه نیز مشورت کنید ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.
اما در عین حال، این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.
...
