🔥 بروزرسانی :
چند ستونه کردن در گراویتی فرم از موارد بسیار مهم و کاربردی برای معتبر و بهترین افزونه فرم ساز جهان می باشد. قطعا شما خواستید که بجای قرارگیری فیلدها زیر هم که باعث شلوغی و حجم بالای فیلدها می شود، آنها را دو ستون، سه ستون، چهار ستون کنید. در این آموزش قصد داریم از چند روش این مورد را به شما آموزش دهیم.
چند ستونه کردن گراویتی فرم با دو روش
- روش اول: استفاده از کد و همچنین کلاس 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
✅ پیش نمایش نهایی:
🔶 همچنین برای ارتفاع و فاصله لیست از 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
✅ پیش نمایش نهایی:
✅ همچنین می توانید از افزونه های زیر که در مخزن وردپرس هستند استفاده کنید و ستون و ساختار فیلدها را از طریق افزونه تغییر دهید.
در این آموزش در نظر داشتیم تا بتوانید از قابلیت های دو ستونه، سه ستونه و چهار ستونه افزونه حرفه ای فرم ساز گراویتی فرم استفاده کنید. همراه با این آموزش هم سایر مواردی که می توانید برای زیبایی فرم به شما کمک کند را قرار دادیم.
👈 همچنین در صورتی که مایل هستید، آخرین نسخه افزونه گراویتی فرم را از فارویت دانلود کنید.
خیلی عالی بود
استفاده کردیم