ساخت فرم رسپانسیو در وردپرس با المنتور

ساخت فرم رسپانسیو در وردپرس

در بسیاری از موارد امکان اینکه هنگام تغییر جهت مشاهده یک وبسایت در موبایل، ساختار و شکل ظاهری سایت دچار بهم ریختگی و اشتباه شود، زیاد است. ستون­‌هایی که دارای ترتیب خاصی نیستند و اشتباه مرتب شده‌­اند، عناوین خیلی بزرگی را نمایش می‌دهند، پدینگ­‌ها و حاشیه‌­ها دارای اندازه مناسب نیستند و مواردی از این قبیل. و همین‌طور این لیست ادامه پیدا می­‌کند. در کل فرم وبسایت رسپانسیو نیست. برای این منظور چه راه‌حلی می‌توان اندیشید؟ وردپرس همیشه یک راه حل خوب برایمان دارد، اینبار به کمک المنتور! با یک المان قدرتمند در المنتور، ساخت فرم رسپانسیو در وردپرس را امکان‌پذیر می‌کنیم و به بهترین نحو آن را طراحی می‌نماییم. با ما با این آموزش المنتور همراه باشید…

ساخت فرم رسپانسیو در وردپرس

آنچه در این مقاله خواهید خواند:

• با چه روش‌­هایی می­‌توان فرم‌­ها و سایت را رسپانسیو کرد؟
• چه عواملی بر رسپانسیو بودن سایت موثر هستند؟
• چطور باید فرم­‌های سایت را رسپانسیو کرد؟
• توصیه عملی پیش از پایان طراحی سایت

 

آموزش ویدیویی ساخت فرم رسپانسیو با المنتور

با چه روش‌­هایی می‌­توان فرم‌­ها و سایت را رسپانسیو کرد؟

یکی از بزرگترین چالش‌­های طراحی وبسایت در این دوره  این است که وبسایت  شما در همه دستگاه‌­ها، کامل و بدون نقص دیده شود. زیرا بسیاری از کاربران شما در حال حاضر، موبایلی هستند! این چالش نه تنها برای طراحان وبسایت، بلکه برای کاربر ساده وردپرس نیز قابل اهمیت است. این موضوع خود می­‌تواند بسیار نگران کننده باشد که چه کاری برای جلوگیری از این مشکل باید انجام داد و یا راه چاره چیست؟

اکثر طراحان حرفه ای وبسایت از پوسته و تم­‌هایی که ریسپانسو هستند دوری می­‌کنند و خود آن­ها را به صورت دستی و با کدنویسی آن پوسته را رسپانسیو می‌­کنند. خب پس باید کدنویسی بلد بود به خصوص در کد­های CSS، این یک مشکل است. زیرا که ممکن است هنگامی که ما فکر می‌کنیم سایت را رسپانسیو کرده‌­ایم، این کار اصلا به صورت اصولی انجام نشده باشد. ولی خب یک راه­‌حل خوب در پیش رو دارید که یکی از آن­ها ساخت فرم‌های واکنش‌گرا در وردپرس با المنتور است.

این ویرایشگر قدرتمند دارای مجموعه‌ای از ویژگی­‌هایی است که به شما این امکان داده می­‌شود تا وبسایت­‌هایی با قابلیت واکنش‌گرایی به روشی کاملاً جدید و بصری ایجاد کنید. بدون نیاز به کدنویسی و داشتن علم برنامه‌­نویسی.

چه عواملی بر رسپانسیو بودن سایت موثر هستند؟

• زیباتر کردن تایپوگرافی نمایش موبایلی سایت

در این برحه از زمان، تایپوگرافی نسخه موبایل سایت، درخواستی بوده است که بسیاری از کاربران وردپرس به خصوص افرونه المنتور خواستار آن بوده‌­اند. خب شاید بسیاری از شما بگویید که اصلا تایپوگرافی چیست یا به چه دردی می­‌خورد؟

برای نشان دادن این مسئله، ما یک مشکل در نمایش سایت را مطرح می­‌کنیم. مثلا یک اتفاق معمول که در نمایش سایت رخ دهد؛ برای یکی از طرح­‌های صفحات وبسایت خود، به یک عنوان بولد شده و بزرگ نیاز دارید تا محتوا بهتر دیده شود. برای اینکه از نمای ظاهر سایت مطمئن شوید، آن را روی 89PX تنظیم و مشاهده کنید. به نظر که همه چیز در کامپیوتر خوب و بدون نقص است اما  در صفحه گوشی، این متن تمام صفحه را می­‌گیرد.

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

• تنظیم Padding و Margin

نکته‌­ای دیگر که باید به آن توجه ویژه‌­ای داشت، اضافه کردن مناسب فاصله بین عناصر صفحه است، تا دید بهتری از وبسایت در گوشی داشته باشیم.

هنگامی هیچ دیدی یا نمایشی از نسخه موبایل سایت خود نداشته باشید، امکان اینکه فاصله­‌ها بیش از حد در موبایل نمایش داده شوند، زیاد است. به همین دلیل، برای اطمینان از جلوگیری از این مشکل، می­‌توانید تنظیمات مختلف padding و margin برای ابزارک­‌ها، ستون­‌ها و بخش‌­های دیگر را به طور واضح ببینید و اگر نیاز بود، آن را بررسی کنید.

• تنظیم ردیف‌­های مختلف در نسخه موبایل

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

به همین خاطر امکان تنظیم صفحات مختلف را برای هر دستگاهی مثل دسک­تاپ، تبلت و موبایل یا ویجت­‌های مختلفی در المنتور فراهم شده است.

• ترتیب ستون­‌های سایت در نمای تلفن همراه

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

با استفاده از قسمت ویرایش موبایل، ما می‌توانیم این مسئله را حل کنیم،  به گونه‌­ای که شما می‌­توانید ترتیب معکوس ستون­‌ها را انتخاب کنید تا آنچه که می‌­خواهید، به دست آید.

“ترتیب ستون­‌ها در تلفن همراه” به شما این امکان را می‌­دهد که ترتیب ستون­‌ها را معکوس کنید، و همچنین به شما اجازه می­‌دهد تا طرح جدیدی که در تلفن همراه ظاهر می‌­شود را نیز کنترل کنید.

• تغییر تنظیمات بخش­‌ها و ستون‌­ها در نسخه تبلت یا موبایل

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

چطور باید فرم‌­های سایت را رسپانسیو کرد؟

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

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

مرحله 2: ساختار ستونی مورد نظر خود را انتخاب کنید. همان طور که می­بینید در این آموزش، ما تک ستونه را انتخاب کرده‌­ایم.

مرحله 3: در پنل ابزارک‌­ها یا ویجت­‌های موجود در نوار کناری سمت راست، “بخش داخلی” را روی مرکز طرح خود در المنتور بکشید.

می بایست شکل پیش رو شبیه به این باشد:

مرحله 4: اکنون باید ستون موجود دیگر را حذف کنید. این بدان معنی است که بعد از آن فقط باید یک ستون در داخل بخش وجود داشته باشد. اگر دقت کنید خواهید دید که شکل زیر تک ستونه شده است. این کار را با کلیک راست روی ستون موردنظر و انتخاب گزینه حدف انجام دهید.

مرحله 5: مرحله بعدی کار این است که ویجت “Form” را جستجو کرده و آن را داخل ستون بکشید. نکته قابل ذکر این است که این ویجت در المنتور PRO موجود است. اگر روی این ویجت شکل قفل قرار دارد باید افزونه المنتور خود را ارتقا دهید تا امکان استفاده از آن را داشته باشید.

فرمی بعد از اضافه شدن:

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

مرحله 7: سپس عرض هر عنصر را بطور مناسب با هدف مورد نظر تنظیم کنیم. برای این کار، عرض ستون را به 25٪ تغییر می دهیم.

وقتی این کار ار انجام دهیم، نتیجه کار به صورت شکل زیر می‌­شود:

مرحله 8: برای محوریت قرار دادن فیلد­ها، به قسمت ” Advanced/Custom Positioning ” می­‌رویم و سپس عرض را روی” Inline” یا تنظیم خودکار قرار می‌­دهیم.

مرحله 9: سپس فرم به شکل بالا خواهد بود. برای مشاهده تنظیمات فرم، روی نماد برجسته یا همان تنظیمات کلیک کنید.

مرحله 10: در این قسمت باید ” vertical-align ” یا “محور عمودی” را روی “وسط” یا ” middle ” و ” horizontal align ” یا “تراز افقی” به “مرکز” یا ” center ” تنظیم کنید تا نتایج مشابه با تصویر زیر را به دست آورید.

مرحله 11: در این مرحله شما باید عرض را مطابق با اولویت سایت و هدف خود تنظیم کنید.

در پایان کار، فرم رسپانسیو شما اکنون باید به صورت زیر باشد:

اگر می‌­خواهید عناصر همه در یک خط باشند، فقط عرض ستون هر عنصر را 100٪ تنظیم کنید تا شکل زیر ظاهر شود:

اکنون ما ساخت فرم رسپانسیو در وردپرس با المنتور ا به پایان رسانیدیم. فقط شما باید این روش را برای قسمت­‌های مختلف سایت خود تکرار کنید. با این کار شما همانند یک حرفه‌­ای عمل کرده‌­اید و فرم‌های واکنش‌گرا در وردپرس می سازید.

توصیه عملی پیش از پایان طراحی سایت

شاید برای بسیاری از افراد این یک مسئله لاینحل باشد که چطور باید از رسپانسیو بودن سایت مطمئن شویم بدون اینکه در حین کار سایت دچار خطا شود؟ خب به همین منظور ما یک چک لیست برای شما فراهم کرده‌­ایم تا با خواندن آن­ها و چک کردن آن، از رسپانسیو بودن سایت خود تقریبا مطمئن شوید. به این منظور ابتدا صفحه خود را با المنتور ویرایش کنید، سپس حالت پیش‌نمایش را به تلفن همراه تغییر داده و نکات زیر را بررسی کنید:

• آیا تیتر­هایی در متن وجود دارد که برای موبایل خیلی بزرگ باشند؟
• آیا بین عناصر سایت فاصله زیادی وجود دارد، یا نسبت به طرفین؟
• آیا ستون‌­های صفحه به راست، به چپ و یا به وسط به درستی تراز می‌شوند؟
• آیا ستون­‌ها، که یکی از آن­‌ها در پایین دیگر می­‌افتد، به ترتیب درست ظاهر می‌شوند؟

فرم­‌های واکنش­‌گرا در وردپرس

برای بهترین بودن نیاز به یک ایده قوی و طراحی قوی و واکنش‌­گرا داریم. پس باید یک سایت قوی و واکنش‌­گرا داشت تا هر کاربری با هر دستگاهی بتواند به وبسایت شما دسترسی داشته باشد. فرم­‌ها خود نیز باید واکنش‌­گرا باشند تا دسترسی کاربر راحت و بدون مشکل باشد. به این منظور امکان­‌پذیر است. این مقاله مطمئنا آموزش خوبی برای شما خواهد بود.
اگر نظری در مورد این مقاله داشتید با ما در ارتباط باشید.

خرید افزونه المنتور