آموزش های افزونه و قالب

چند ستونه کردن گراویتی فرم

از سری آموزش های کاربردی و مفید گراویتی فرم

🔥 بروزرسانی :

[مجموع: 1 :: میانگین: 5]

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

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

  • روش اول: استفاده از کد و همچنین کلاس CSS پیش فرض گراویتی فرم
  • روش دوم: استفاده از افزونه

روش اول: استفاده از CSS های پیش فرض گراویتی فرم

📢 تبدیل به دو ستونه، سه ستونه و چهار ستونه کردن فیلدهای گرویتی فرم

🔷 اگر قصد دارید در سمت چپ فیلد اولی باشد، کلاس CSS را در تب نمایش » کلاس CSS سفارشی وارد کنید:

gf_left_half

🔷 همچنین برای قرار گرفتن در فیلد دومی در سمت راست، کلاس CSS را در تب نمایش » کلاس CSS سفارشی وارد کنید:

gf_right_half

✅ پیش نمایش نهایی دو ستونه کردن گراویتی فرم:

چند ستونه کردن گراویتی فرم


🔷 در صورتی که قصد دارید فیلدها سه ستونه کنید به این صورت انجام دهید. کلاس CSS را در تب نمایش » کلاس CSS سفارشی هر فیلد را به ترتیب زیر وارد کنید:

سمت چپ » gf_left_third

میانی » gf_middle_third

سمت راست » gf_right_third

✅ پیش نمایش نهایی سه ستونه کردن گراویتی فرم:

چند ستونه کردن گراویتی فرم


🔶 برای چهار ستونه کردن فیلدها در گراویتی فرم مطابق مراحل بالا می باشد و کافیست در هر فیلد، کلاس CSS را در تب نمایش » کلاس CSS قرار دهید.

بخش اول» gf_first_quarter

بخش دوم» gf_second_quarter

بخش سوم» gf_third_quarter

بخش چهارم» gf_third_quarter

  • توجه داشته باشید که فیلدها در کنار هم قرار و 4 ستونه می شوند.

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

برای هر فیلد کلاس CSS را قرار دهید: gf_inline

✅ پیش نمایش نهایی:

چند ستونه کردن گراویتی فرم


🔷 برای استفاده از کلاس لیست هم می توانید چک باکس / رادیو را دوستونه، سه ستونه، چهار ستونه و پنج ستونه نمایید. (تب نمایش » کلاس CSS)

دو ستونه: gf_list_2col

سه ستونه: gf_list_3col

چهار ستونه: gf_list_4col

پنج ستونه: gf_list_5col

چک باکس چند ستونه

✅ پیش نمایش نهایی:

فیلدها در یک ستون


🔷 برای چک باکس inline (داخلی و در یک خط) می توانید کلاس CSS را در تب نمایش » کلاس CSS قرار دهید.

gf_list_inline

چند ستونه کردن گراویتی فرم

✅ پیش نمایش نهایی:

چک باکس inline


🔶 همچنین برای ارتفاع و فاصله لیست از 25 الی 125 پیکسل در چک باکس می توانید با قراردادن هر یک از کلاس های CSS در تب نمایش » کلاس CSS از آنها استفاده کنید.

برای ارتفاع 25 پیکسل: gf_list_height_25

برای ارتفاع 50 پیکسل: gf_list_height_50

برای ارتفاع 75 پیکسل: gf_list_height_75

برای ارتفاع 100 پیکسل: gf_list_height_100

برای ارتفاع 125 پیکسل: gf_list_height_125

برای ارتفاع 150 پیکسل: gf_list_height_150


ساختار فرم به صورت افقی در گراویتی فرم

🔶 به عنوان مثال شما فیلدی دارید که از کاربر ایمیلی را دریافت می کنید و دکمه و اطلاعات هر یک از آنها در فرم در یک ردیف جداگانه قرار دارد ولی با ساختار فرم به صورت افقی در گراویتی فرم می توانید این مورد را در ستون قرار دهید تا شکل ظاهری مناسب و زیبایی داشته باشد. (تب نمایش » کلاس CSS)

gf_simple_horizontal


سایر کلاس های CSS در گراویتی فرم

🔷 برای سایر کلاس های CSS در گراویتی فرم می توانید از این کلاس های CSS در بخش تب نمایش » کلاس CSS فیلد مورد نظر را استفاده کنید.

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

gf_scroll_text

کلاس اسکرول کلاس دار

✅ پیش نمایش نهایی:

کلاس اسکرول دار


✅ همچنین می توانید از افزونه های زیر که در مخزن وردپرس هستند استفاده کنید و ستون و ساختار فیلدها را از طریق افزونه تغییر دهید.


در این آموزش در نظر داشتیم تا بتوانید از قابلیت های دو ستونه، سه ستونه و چهار ستونه افزونه حرفه ای فرم ساز گراویتی فرم استفاده کنید. همراه با این آموزش هم سایر مواردی که می توانید برای زیبایی فرم به شما کمک کند را قرار دادیم.

👈 همچنین در صورتی که مایل هستید، آخرین نسخه افزونه گراویتی فرم را از فارویت دانلود کنید.

برچسب ها

پیشنهاد به شما 😍

1 دیدگاه

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا
بستن
بستن