چگونه عرض سایت وردپرسی با المنتور را محدود کنیم؟ (راهنمای کامل ۲۰۲۵)
آیا از گسترش بیش از حد محتوای سایت خود در نمایشگرهای بزرگ خسته شده‌اید؟ آیا می‌خواهید سایت شما همیشه ظاهری حرفه‌ای و استاندارد داشته باشد؟ در این مقاله، روشی آسان برای محدود کردن عرض سایت وردپرسی همراه با المنتور به شما آموزش می‌دهیم.
چرا باید عرض سایت را محدود کنیم؟
امروزه کاربران از دستگاه‌های مختلفی با اندازه‌های صفحه نمایش متفاوت برای مشاهده وب‌سایت‌ها استفاده می‌کنند. نمایشگرهای بزرگ امروزی می‌توانند عرضی بیش از ۲۵۰۰ پیکسل داشته باشند. اگر محتوای سایت شما بدون محدودیت عرض باشد، در این نمایشگرها:
- خطوط متن بیش از حد طولانی می‌شوند که خواندن را دشوار می‌کند
- طراحی سایت شما ممکن است نامتناسب به نظر برسد
- تمرکز کاربر بر محتوای اصلی کاهش می‌یابد
- تجربه کاربری به شکل قابل توجهی آسیب می‌بیند
تحقیقات نشان می‌دهد که طول خط بهینه برای خوانایی حدود ۵۰ تا ۷۵ کاراکتر است. محدود کردن عرض سایت به شما کمک می‌کند این استاندارد را در همه دستگاه‌ها حفظ کنید.
تعیین عرض مناسب برای سایت وردپرسی
قبل از شروع، باید بدانید چه عرضی برای سایت شما مناسب است. بر اساس آمارهای سال ۲۰۲۵، متداول‌ترین عرض‌های نمایشگر عبارتند از:
- موبایل: ۳۲۰-۴۲۸ پیکسل
- تبلت: ۷۶۸-۱۰۲۴ پیکسل
- لپ‌تاپ: ۱۳۶۶-۱۹۲۰ پیکسل
- دسکتاپ: ۱۹۲۰-۵۱۲۰ پیکسل
عرض‌های محبوب برای محدودسازی سایت‌ها عبارتند از:
- ۱۲۰۰ پیکسل (استاندارد)
- ۱۴۰۰ پیکسل (مناسب برای محتوای متوسط)
- ۱۶۰۰ پیکسل (توصیه شده برای محتوای غنی)
ما در این آموزش از عرض ۱۶۰۰ پیکسل استفاده می‌کنیم که برای اکثر سایت‌های مدرن مناسب است.
راهنمای گام به گام: محدود کردن عرض سایت وردپرسی با المنتور
گام اول: آماده کردن کد CSS سفارشی
برای محدود کردن عرض سایت به ۱۶۰۰ پیکسل، به کد CSS زیر نیاز دارید:
/* جلوگیری از اسکرول افقی */
html, body {
overflow-x: hidden;
}
/* محدود کردن عرض کل محتوا به 1600px و مرکزچین کردن آن */
.elementor,
.elementor .elementor-container,
.site {
max-width: 1600px;
margin-left: auto;
margin-right: auto;
}
/* در صورت نیاز به اعمال روی بخش‌های داخلی المنتور */
.elementor-section {
width: 100%;
max-width: 1600px;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
padding-left: 15px; /* دلخواه */
padding-right: 15px; /* دلخواه */
}
گام دوم: افزودن کد CSS به سایت وردپرسی
سه روش برای افزودن این کد به سایت وردپرسی شما وجود دارد:
روش ۱: استفاده از تنظیمات المنتور
- وارد داشبورد وردپرس شوید
- به بخش المنتور > تنظیمات بروید
- روی تب پیشرفته کلیک کنید
- کد CSS بالا را در قسمت CSS سفارشی کپی کنید
- دکمه ذخیره تغییرات را بزنید
روش ۲: استفاده از سفارشی‌ساز وردپرس
- به داشبورد وردپرس بروید
- به بخش نمایش > سفارشی‌سازی بروید
- گزینه CSS اضافی را پیدا کنید
- کد CSS را در آنجا کپی کنید
- روی انتشار کلیک کنید
روش ۳: استفاده از افزونه CSS سفارشی
- افزونه‌ای مانند “Simple Custom CSS” یا “Custom CSS Pro” را نصب و فعال کنید
- به تنظیمات افزونه بروید
- کد CSS را در آنجا وارد کنید
- تغییرات را ذخیره کنید
نکات مهم و رفع مشکلات احتمالی
سازگاری با قالب هلو المنتور
اگر از قالب هلو با المنتور استفاده می‌کنید، کد CSS ارائه شده باید به خوبی کار کند. با این حال، برخی قالب‌ها ممکن است کلاس‌های متفاوتی داشته باشند. اگر تغییرات مورد نظر را مشاهده نکردید، با استفاده از ابزار بازرس مرورگر (با فشردن کلید F12)، کلاس‌های مورد استفاده در قالب خود را بررسی کنید.
تست در همه دستگاه‌ها
پس از اعمال تغییرات، مطمئن شوید سایت خود را در انواع دستگاه‌ها تست کنید:
- موبایل‌ها
- تبلت‌ها
- لپ‌تاپ‌ها
- نمایشگرهای بزرگ
تنظیم بخش‌های تمام عرض
اگر می‌خواهید برخی بخش‌ها (مانند اسلایدرها) در عرض کامل نمایش داده شوند، باید آن بخش‌ها را در المنتور به حالت Stretch Section تنظیم کنید.
مزایای محدود کردن عرض سایت
- خوانایی بهتر: خطوط متن در اندازه مناسب نگه داشته می‌شوند
- زیبایی بصری بیشتر: طراحی سایت متناسب‌تر به نظر می‌رسد
- تجربه کاربری بهتر: کاربران راحت‌تر می‌توانند محتوا را مطالعه کنند
- حرفه‌ای‌تر بودن سایت: سایت‌های حرفه‌ای معمولاً عرض محدود دارند
- سازگاری بیشتر: در همه دستگاه‌ها، تجربه یکپارچه‌تری ارائه می‌دهد
پرسش‌های متداول
آیا این کد بر طراحی ریسپانسیو سایت تأثیر می‌گذارد؟
خیر، این کد فقط حداکثر عرض سایت را محدود می‌کند و در دستگاه‌های کوچکتر، طراحی ریسپانسیو همچنان عمل خواهد کرد.
آیا می‌توانم عرض را به مقدار دیگری تغییر دهم؟
بله، کافی است عدد ۱۶۰۰ را در تمام بخش‌های کد به عدد دلخواه خود تغییر دهید.
چرا بعد از اعمال کد، برخی عناصر هنوز عرض کامل دارند؟
ممکن است برخی عناصر کلاس‌های خاصی داشته باشند که بر کد شما غلبه می‌کنند. در این موارد، باید کلاس‌های خاص آن عناصر را نیز به کد خود اضافه کنید.
آیا این روش بر سرعت بارگذاری سایت تأثیر می‌گذارد؟
خیر، این کد CSS ساده تأثیر قابل توجهی بر سرعت بارگذاری سایت نخواهد داشت.
نتیجه‌گیری
محدود کردن عرض سایت وردپرسی یکی از بهترین روش‌ها برای بهبود تجربه کاربری و حفظ زیبایی بصری سایت در نمایشگرهای مختلف است. با استفاده از کد CSS ارائه شده در این مقاله، به راحتی می‌توانید عرض سایت خود را به ۱۶۰۰ پیکسل محدود کنید و مطمئن شوید که کاربران همیشه بهترین تجربه را از بازدید سایت شما خواهند داشت.
به یاد داشته باشید که طراحی وب یک مسیر مداوم آزمون و بهبود است. هر چند وقت یکبار، آمارهای بازدیدکنندگان خود را بررسی کنید و در صورت نیاز، تنظیمات عرض سایت را بهینه‌سازی نمایید.
این مقاله در تاریخ ۱۰ آوریل ۲۰۲۵ بروزرسانی شده است.
