امروزه بیش از ۷۰٪ بازدیدکنندگان سایت‌ها از طریق موبایل وارد وب‌سایت‌ها می‌شوند. اگر طراحی سایت شما ریسپانسیو نباشد، کاربران به‌سادگی از صفحه خارج می‌شوند و نرخ پرش افزایش می‌یابد.
پرسش اصلی بسیاری از کاربران وردپرس این است: چگونه با استفاده از صفحه‌سازهایی مانند المنتور یا گوتنبرگ، سایتی واکنش‌گرا طراحی کنیم که در همه دستگاه‌ها به‌درستی نمایش داده شود؟
در این آموزش، به‌صورت گام‌به‌گام و کاربردی، تفاوت‌ها، امکانات و روش پیاده‌سازی طراحی ریسپانسیو در هر دو ابزار را بررسی می‌کنیم.
المنتور یا گوتنبرگ؟ کدام برای طراحی ریسپانسیو بهتر است؟
| ویژگی / ابزار | المنتور (Elementor) | گوتنبرگ (Gutenberg) |
|---|---|---|
| رابط کاربری | بصری و کشیدن و رها کردن | مبتنی بر بلوک، ساده‌تر |
| پیش‌نمایش دستگاه | دارد (موبایل، تبلت، دسکتاپ) | محدود (نیازمند افزونه یا قالب) |
| تنظیمات ریسپانسیو | بسیار پیشرفته و سفارشی‌پذیر | پایه‌ای (با CSS یا افزونه تکمیل می‌شود) |
| نیاز به افزونه | دارد (افزونه خارجی صفحه‌ساز) | نه (جزئی از هسته وردپرس است) |
| مناسب برای | طراحان حرفه‌ای و پروژه‌های پیچیده | بلاگ‌نویسان و طراحی‌های ساده |
چگونه با المنتور طراحی ریسپانسیو انجام دهیم؟
تنظیم نمایش در دستگاه‌های مختلف
- در نوار پایین المنتور، روی آیکن موبایل کلیک کنید.
- بین سه حالت دسکتاپ، تبلت و موبایل جابه‌جا شوید.
- برای هر بخش یا ویجت، تنظیمات اندازه، فاصله، فونت و ترتیب را جداگانه تعریف کنید.
تنظیمات خاص المنتور:
- Visibility: مخفی کردن المان‌ها در موبایل یا تبلت
- Reverse Columns: تغییر ترتیب ستون‌ها برای موبایل
- Custom CSS: افزودن استایل اختصاصی برای هر دستگاه
چگونه با گوتنبرگ طراحی واکنش‌گرا انجام دهیم؟
گوتنبرگ در ظاهر ساده است، اما با ابزارهایی خاص می‌توان ریسپانسیو بودن را به آن افزود.
ترفندهای کاربردی:
- استفاده از بلوک‌های Group و Columns برای ساختار‌بندی قابل کنترل
- استفاده از افزونه‌هایی مثل Stackable یا Kadence Blocks برای تنظیم پیشرفته
- افزودن کلاس‌های CSS سفارشی و نوشتن media query در تنظیمات قالب یا افزونه
نکاتی برای بررسی نهایی طراحی ریسپانسیو
| مورد بررسی | ابزار پیشنهادی |
|---|---|
| پیش‌نمایش ریسپانسیو | حالت پیش‌نمایش المنتور / ابزار Dev Tools مرورگر |
| تست واقعی موبایل | Google Mobile-Friendly Test |
| تنظیم فونت و فاصله‌ها | با استفاده از واحدهای نسبی مانند rem/em |
| تست سرعت موبایل | Google PageSpeed Insights |
لزوم طراحی ریسپانسیو برای تمام دستگاه‌ها، نه فقط موبایل
طراحی ریسپانسیو فقط به موبایل محدود نمی‌شود، بلکه باید برای تمام دستگاه‌ها از جمله تبلت، لپ‌تاپ و مانیتورهای بزرگ بهینه‌سازی شود.
بسیاری از کاربران امروزی از تبلت‌ها یا نمایشگرهای ۲۴ اینچی استفاده می‌کنند و اگر سایت شما فقط در موبایل خوب نمایش داده شود، تجربه کاربری ناقصی در سایر دستگاه‌ها ارائه می‌دهد.
در المنتور امکان تنظیم جداگانه برای دسکتاپ، تبلت و موبایل فراهم است و شما می‌توانید اندازه فونت، فاصله ستون‌ها، نمایش یا عدم نمایش عناصر و حتی ترتیب محتوا را برای هر رزولوشن به‌صورت اختصاصی تنظیم کنید.
در گوتنبرگ نیز با کمک افزونه‌هایی مانند Kadence Blocks یا Spectra می‌توان سطوح مختلف واکنش‌گرایی را کنترل کرد.
طراحی ریسپانسیو حرفه‌ای یعنی: سایت در هر دستگاهی، بدون اسکرول افقی، کاملاً قابل خواندن، قابل تعامل و زیبا باشد.
نقش تنظیمات دستی در ریسپانسیو کردن طراحی المنتور
المنتور به‌صورت پیش‌فرض طراحی ریسپانسیو را پشتیبانی می‌کند، اما برای رسیدن به نمایش دقیق و حرفه‌ای در همه دستگاه‌ها، لازم است برخی تنظیمات را به‌صورت دستی انجام دهید.
مثلاً اندازه فونت‌ها، فاصله‌ها (margin/padding)، نمایش یا پنهان‌سازی ویجت‌ها، ترتیب ستون‌ها و حتی نحوه بارگذاری تصاویر می‌تواند در موبایل و تبلت متفاوت باشد.
المنتور برای این کار، حالت‌های پیش‌نمایش مستقل برای دسکتاپ، تبلت و موبایل ارائه می‌دهد که به شما امکان تنظیم دقیق در هر دستگاه را می‌دهد.
گوتنبرگ و قدرت طراحی واکنش‌گرا با بلوک‌های حرفه‌ای
گوتنبرگ با اینکه در ابتدا امکانات محدودی داشت، اما امروزه با بلوک‌های پیشرفته و افزونه‌های مکمل مثل Stackable، Spectra یا Kadence Blocks می‌تواند طراحی ریسپانسیو حرفه‌ای انجام دهد.
با این ابزارها می‌توان ویژگی‌هایی مانند:
- نمایش/عدم نمایش بلوک‌ها در دستگاه‌های خاص
- تنظیم اندازه فونت و ستون‌ها
- ساخت چیدمان‌های شبکه‌ای (grid) واکنش‌گرا
را در گوتنبرگ نیز پیاده کرد. بنابراین گوتنبرگ هم یک گزینه قابل اتکا برای طراحی واکنش‌گراست، به‌ویژه برای سایت‌های سبک‌تر و بلاگ‌ها.
اهمیت چینش مجدد محتوا در نسخه موبایل سایت وردپرسی
یکی از اصول مهم در طراحی ریسپانسیو این است که ساختار و ترتیب نمایش محتوا بر اساس نیاز کاربر در هر دستگاه بازطراحی شود.
مثلاً یک بنر یا فرم تماس که در دسکتاپ در کنار تصویر قرار دارد، ممکن است در موبایل باید پایین‌تر نمایش داده شود تا تجربه کاربری بهتری ایجاد کند.
المنتور با قابلیت «Reverse Column» و گوتنبرگ با بلوک‌های پیشرفته، این امکان را فراهم می‌کنند که ترتیب محتوا را برای موبایل جداگانه تعیین کنید.
جمع‌بندی از دیدگاه فارسی وب
از نگاه تیم فارسی وب، طراحی ریسپانسیو دیگر یک گزینه نیست، بلکه یک ضرورت قطعی برای موفقیت در فضای وب امروز است.
المنتور با رابط کاربری قدرتمند و امکانات کامل، گزینه‌ای عالی برای طراحی‌های حرفه‌ای است، اما گوتنبرگ نیز با بلوک‌های سفارشی و افزونه‌های مکمل، برای پروژه‌های سبک و استاندارد کاملاً پاسخ‌گوست.
توصیه فارسی وب این است که طراحی ریسپانسیو نه‌تنها در پایان طراحی، بلکه از همان ابتدا در ساختار صفحات لحاظ شود تا تجربه کاربری بدون نقصی در همه دستگاه‌ها ایجاد گردد.
