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

آموزش سریالی گراویتی فرم

اشتراک‌گزاری در شبکه‌های اجتماعی

Share on facebook
Share on twitter
Share on linkedin
Share on telegram
Share on whatsapp

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

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

  • روش اول: استفاده از کد و همچنین کلاس 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

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

🔷 اگر قصد دارید فیلدها در یک ستون باشند و نمی خواهید فاصله زیادی بین آنها ایجاد شود می توانید به جای استفاده از حالت های دو ستونه، سه ستونه، چهار ستونه از این روش استفاده کنید. کافیست در تب نمایش » کلاس 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


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

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

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

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

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

برای ارتفاع ۱۲۵ پیکسل: gf_list_height_125

برای ارتفاع ۱۵۰ پیکسل: gf_list_height_150


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

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

gf_simple_horizontal

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

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

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

gf_scroll_text

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

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

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


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


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

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

[مجموع: ۱ :: میانگین: ۵]

یک پاسخ

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

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

درباره فارویت بیشتر بدانید

فارویت برای شروع یک اتفاق جدید فعالیتش را آغاز کرده است. در فارویت به قالب های وردپرس و ووکامرس (فروشگاهی) و افزونه های مورد نیاز وردپرس و ووکامرس و فیلم های متفاوت آموزشی می پردازیم. فارویت برای ارائه خدمات ویژه و خاص آمده، تا شما کاربران عزیز دغدغه ای نداشته باشید و البته تجربه خواهید کرد. همراهی شما قوت قلبی برای رشد و پیشرفت ما خواهد بود.

ارتباط سریع با فارویت

شماره تماس (همراه) : 09365816023
شماره تماس (ثابت) : بزودی
آیدی تلگرام : @supon24
کانال تلگرام : @farvit

گواهینامه های اعتماد

logo-samandehi