ایکون
100 قالب سایت آماده
897 هزار تومان
پیش نمایش
آموزش افزونه‌ها

آموزش تغییر استایل فرم های طراحی شده با گرویتی فرم

در این مقاله به آموزش کار با افزونه Gravity form Styles Pro می پردازیم. فرم های جذاب نرخ تعامل بیشتری دارند بنابراین از این آموزش استفاده کنید تا فرم های جذاب تری طراحی کنید.

1
03 مهر 1400
آخرین بروزرسانی: 20 اسفند 1402

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

نکته: برای ساخت فرم های محاسباتی پیچیده در وردپرس بهتر است از افزونه ez Form Calculator استفاده کنید. ساخت فرم محاسباتی در وردپرس به وسیله افزونه، بسیار راحت و سریع است.

آموزش نصب افزونه گرویتی استایل

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

  • پکیج محصول خریداری شده از راست چین را حالت فشرده خارج کنید. در پوشه plugin یک فایل فشرده با نام gravitystyle وجود دارد. این فایل افزونه شماست.
  • مشابه سایر افزونه های وردپرس به سادگی از پیشخوان> افزونه ها> افزودن را کلیک کنید. بر روی دکمه بارگذاری افزونه کلیک کرده و فایل gravitystyle را از پکیج آپلود کنید و دکمه نصب را بزنید.
  • بعد از نصب شدن افزونه، از پیشخوان وردپرس وارد بخش افزونه ها شده و دکمه فعال شدن افزونه را برنید.

آموزش نصب افزونه گرویتی استایل

نکته: دقت داشته باشید قبل از نصب و فعالسازی افزونه گرویتی استایل باید آخرین نسخه گرویتی فرم را نصب کرده باشید.

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

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

تغییر استایل فرم های گرویتی

برای سفارشی سازی فرم های ایجاد شده با گرویتی فرمز 2 روش وجود دارد:

1- اعمال استایل خاص به کلیه فیلدهای فرم: در این روش می توانید استایل هایی چون رنگ زمینه و نوشته، فونت، استایل برچسب ها، تنظیمات دکمه و آیکون ها را برای کلیه فیلدهای موجود در فرم تغییر دهید.

2- تغییر استایل تک تک فیلدهای فرم: در این روش تنظیم آیکون، نمایش یا عدم نمایش برچسب، ستون بندی و چیدمان یک فیلد خاص قابل تنظیم است.

تغییر استایل کلیه فیلدهای فرم

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

  1. از پیشخوان وارد بخش فرم ها شوید.
  2. برای فرم مور نظر، اشاره گر موس را بر روی دکمه تنظیمات قرار دهید.
  3. از لیست باز شده استایل پرو را انتخاب کنید.

تغییر استایل فرم های گرویتی

سپس از بخش استایل پرو می توانید تنظیمات کلی و یک قالب آماده را به فرم اعمال کنید. برای این منظور از لیست کشویی قالب یکی از آنها را انتخاب و بر روی دکمه ذخیره کلیک کنید.

اعمال قالب پیش فرض به فرم های گرویتی فرم

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

پیام اعتبار سنجی در گرویتی استایل

در ادامه می توانید مجموعه فونت های فعال و نمایش فوتر برای فرم ها را تعیین کنید. فوتر، چیدمان دکمه های بعدی و ارسال را تعیین می کند.

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

برای تغییر استایل فرم های گرویتی از قالب های آماده که در تنظیمات افزونه گرویتی استایل قرار دارند استفاده نمایید. هر یک از این قالب های آماده تنظیمات جذاب و منحصر به فردی دارند. یکی از قالب هایی که بیشترین شباهت را به فرم مورد نظر شما دارد از لیست قالب ها انتخاب کنید. سپس بر روی دکمه “ویرایش قالب در تنظیمات گرویتی استایل پرو ” کلیک کنید.

پنجره جدیدی باز می شود که می توانید استایل تمام فیلدهایی که در یک فرم قرار میگیرند را تغییر دهید. در تصویر زیر می توانید جزئیات بیشتری از فیلدهای قابل سفارشی سازی را ببینید.

سفارشی سازی قالب های آماده در گرویتی استایل پرو

تغییر فونت و سایز نوشته برچسب و فیلدها را می توانید در اولین بخش این پنجره ببینید. در ادامه آموزش کار با افزونه گرویتی استایل به سراغ تنظیمات استایل برچسب، پیشرفته فیلدها، تنظیمات توضیحات، آیکون و لیست های پیشرفته و استایل دهی دکمه می پردازیم.

تنظیمات استایل برچسب

در آموزش افزونه گرویتی استایل، برای تغییر استایل هر فیلد بر روی دکمه + کلیک کنید تا جزئیات نمایش داده شود. تصویر تنظیمات استایل دهی برچسب را در ادامه در ادامه آورده ایم.

تنظیمات استایل برچسب گرویتی فرم

choosearea

فونت، رنگ پس زمینه، تراز بندی، استایل نوشته و حاشیه ها را می توانید برای کلیه برچسب های فرم تغییر دهید. تغییر متن توضیح و استایل فیلدها مشابه استایل برچسب است. از توضیح مجدد آن خودداری می کنیم.

استایل آیکن و لیست های پیشرفته

لیست های پیشرفته شامل دکمه های رادیویی و چک باکس ها هستند که برای تغییر رنگ حالت فعال آنها، کافیست تنظیمات رنگ را در بخش ” استایل آیکون و لیست های پیشرفته” انجام دهید.

استایل آیکن و لیست های پیشرفته گرویتی فرم

استایل دهی پیشرفته دکمه

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

در ادامه استایل دکمه های اصلی قرار دارد. منظور ما دکمه های بعدی/قبلی/ ارسال است که می تواند متمایز از استایل دکمه های دیگر باشد.

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

choosearea

انتخاب پس زمینه فرم در گرویتی فرم

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

انتخاب پس زمینه فرم در گرویتی فرم

 

در این مقاله به آموزش افزونه گرویتی استایل پرداختیم. شما با نصب این افزودنی به همراه افزونه گرویتی فرم می توانید استایل های جذابی به فرم های خود بدهید. در نتیجه کاربران را تشویق به مشارکت در پر کردن فرم های طراحی شده خود کنید. در صورت داشتن سوال در مورد کار کردن با افزونه Gravity Forms Styles Pro می توانید در قسمت دیدگاه ها از ما بپرسید.

محصول پیشنهادی
بنر
افزونه Gravity Forms Styles Pro، تغییر استایل گرویتی
دسته بندی : افزونه فرم ساز
1672
فروش
81%
رضایت
mikado-theme
mikado-theme
مقالات مرتبط
بنر
آموزش افزونه دیجیتس (ثبت نام سریع با پیامک)
در این مقاله آموزش دیجیتس (ِDigits) شامل نصب، تنظیمات، فرم‌ها، اتصال به سامانه پیامکی، استایل و افزودنی‌ها را به صورت ویدئویی آموزش دادیم. کار کردن با افزونه دیجیتس بسیار راحت است و به سرعت می‌توانید با نصب افزونه دیجیتس امکان عضویت و ورد کاربران با شماره موبایل را فراهم کنید.
بنر
آموزش افزونه Ultimate Affiliate Pro
شاید برای شما هم پیش آمده که برای خرید یک محصول لینک را باز کنید ولی وارد دیجی کالا شوید؛ یکی از روش های کسب درآمد بدون فروش محصولات خودمان افیلیت مارکتینگ است. به این صورت که شما یک سایت با محتوا کامل دارید و به جای قرار دادن لینک محصولاتتان لینک محصولات سایر سایت ها را قرار می دهید به این صورت ...
بنر
آموزش افزونه لرن دش
در سال های اخیر آموزش آنلاین جزء جدایی ناپذیر از سیستم آموزشی شده است و بسیاری از افراد تمایل به شرکت در دوره های مجازی دارند. طراحی سایت های آموزش آنلاین قدم بزرگی در پیشرفت سیستم آموزشی است. اگر از قالب وردپرس استفاده می کنید با استفاده از افزونه های وردپرس مانند لرن دش می توانید سایت خود را ...
بنر
آموزش افزونه لایت اسپید کش
استفاده از افزونه های بهینه سازی سایت یکی از راه های بهبود سرعت است. افزونه litespeed cache یکی از افزونه های بهینه سازی است که در این مقاله قصد داریم به آموزش افزونه لایت اسپید و نحوه تنظیمات آن بپردازیم. همراه ما باشید.
1 دیدگاه
earash
earash
27 آذر 1401 11:15

با سپاس از توضیحاتتون.
قسمت فیلد ضروری به انگلیسی نوشته شده، چطور می‌تونیم تغییرش بدیم؟

آیا مفید بود ؟
0