آموزش تغییر عرض وبسایت با المنتور یا کد نویسی

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

خبر خوب این است که برای حل این مشکل، معمولاً نیازی به تغییر قالب یا طراحی دوباره سایت ندارید. در بیشتر مواقع می‌توانید با تنظیم عرض محتوا در المنتور یا اضافه کردن چند خط CSS، اندازه صفحات را به شکل استاندارد تنظیم کنید.

در این آموزش از ادینو وردپرس هر دو روش را ساده و مرحله‌به‌مرحله بررسی می‌کنیم.

پاسخ سریع: چطور عرض سایت را تغییر دهیم؟

برای تغییر عرض کلی صفحاتی که با المنتور ساخته شده‌اند:

1. یکی از صفحات را با المنتور باز کنید.
2. وارد تنظیمات سایت شوید.
3. بخش طرح‌بندی را باز کنید.
4. مقدار عرض محتوا را تغییر دهید.
5. تنظیمات را ذخیره کرده و سایت را در دسکتاپ، تبلت و موبایل بررسی کنید.

برای بیشتر سایت‌ها، عرضی بین ۱۱۴۰ تا ۱۲۸۰ پیکسل نقطه شروع مناسبی است. البته عدد نهایی باید بر اساس نوع سایت، قالب و ساختار صفحه انتخاب شود.

عرض وبسایت دقیقاً به چه معناست؟

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

برای مثال، پس‌زمینه یک بخش می‌تواند تمام صفحه را بپوشاند؛ اما متن، تصویر و دکمه‌های داخل آن در محدوده‌ای به عرض ۱۲۰۰ پیکسل قرار بگیرند.

در طراحی صفحات معمولاً با دو حالت اصلی روبه‌رو هستیم:

حالت تمام‌عرض

در حالت Full Width، بخش موردنظر تا لبه‌های صفحه ادامه پیدا می‌کند. این حالت بیشتر برای بنرها، اسلایدرها، تصاویر بزرگ، هدر، فوتر و پس‌زمینه‌های رنگی مناسب است.

حالت محدود

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

یک طراحی استاندارد معمولاً ترکیبی از هر دو حالت است: پس‌زمینه تمام‌عرض، اما محتوای داخلی محدود و منظم.

عرض مناسب برای سایت چقدر است؟

یک عدد ثابت برای تمام سایت‌ها وجود ندارد. عرض مناسب به نوع محتوا، اندازه فونت، تعداد ستون‌ها و سبک طراحی بستگی دارد.

برای شروع می‌توانید از این محدوده‌ها استفاده کنید:

• سایت شرکتی و خدماتی: ۱۱۴۰ تا ۱۲۰۰ پیکسل
• فروشگاه اینترنتی: ۱۲۰۰ تا ۱۳۲۰ پیکسل
• سایت محتوایی و آموزشی: ۱۱۰۰ تا ۱۲۸۰ پیکسل
• عرض ستون اصلی مقاله: حدود ۷۲۰ تا ۸۵۰ پیکسل

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

روش اول: تغییر عرض کلی سایت با المنتور

ساده‌ترین روش، استفاده از تنظیمات کلی Elementor است. این روش بیشتر برای سایت‌هایی مناسب است که صفحات اصلی آن‌ها با المنتور طراحی شده‌اند.

تنظیمات سایت المنتور امکان کنترل عرض پیش‌فرض محتوا و سایر ویژگی‌های عمومی طرح‌بندی را فراهم می‌کند.

مرحله اول: باز کردن تنظیمات سایت

یکی از برگه‌های سایت را با المنتور باز کنید. سپس از منوی اصلی ویرایشگر وارد بخش زیر شوید:

تنظیمات سایت ← طرح‌بندی

نام انگلیسی این بخش معمولاً به شکل زیر نمایش داده می‌شود:

Site Settings → Layout

با توجه به نسخه المنتور، جای بعضی گزینه‌ها ممکن است کمی متفاوت باشد؛ اما بخش تنظیمات سایت همچنان محل کنترل ویژگی‌های عمومی طراحی است.

مرحله دوم: تغییر عرض محتوا

در بخش طرح‌بندی، گزینه Content Width یا «عرض محتوا» را پیدا کنید.

برای شروع یکی از مقادیر زیر را امتحان کنید:

1140px

یا:

1200px

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

1280px

پس از تغییر عدد، تنظیمات را ذخیره کرده و چند صفحه مختلف را بررسی کنید.

این مقدار بیشتر روی کانتینرهایی اثر می‌گذارد که روی حالت محدود یا Boxed تنظیم شده‌اند. کانتینرهای تمام‌عرض همچنان می‌توانند کل عرض نمایشگر را اشغال کنند.

روش دوم: تغییر عرض یک بخش خاص در المنتور

گاهی فقط یک بخش از صفحه بیش از حد عریض یا باریک است. در این شرایط نباید عرض کل سایت را تغییر دهید؛ کافی است همان کانتینر را تنظیم کنید.

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

مراحل تغییر عرض کانتینر

1. صفحه را با المنتور باز کنید.
2. کانتینر موردنظر را انتخاب کنید.
3. وارد تب Layout شوید.
4. نوع عرض محتوا را روی Boxed یا Full Width قرار دهید.
5. در صورت نیاز مقدار عرض را به‌صورت دستی وارد کنید.

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

روش پیشنهادی برای طراحی حرفه‌ای

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

• کانتینر بیرونی: تمام‌عرض
• کانتینر داخلی: محدود به ۱۲۰۰ پیکسل

در این ساختار، رنگ یا تصویر پس‌زمینه تا لبه‌های صفحه ادامه پیدا می‌کند، اما متن و عناصر اصلی منظم و هم‌راستا باقی می‌مانند.

این روش برای بخش‌های معرفی، خدمات، محصولات و فوتر بسیار کاربردی است.

روش سوم: تمام‌عرض کردن یک صفحه در المنتور

ممکن است عرض صفحه توسط قالب محدود شده باشد و تغییر عرض کانتینر نتیجه کاملی ایجاد نکند. در این حالت باید طرح صفحه را بررسی کنید.

المنتور برای صفحات دو حالت مهم دارد:

• Elementor Full Width: صفحه تمام‌عرض نمایش داده می‌شود، اما هدر و فوتر باقی می‌مانند.
• Elementor Canvas: هدر و فوتر حذف می‌شوند و فقط محتوای طراحی‌شده نمایش داده می‌شود.

برای تغییر طرح صفحه:

1. صفحه را با المنتور باز کنید.
2. وارد تنظیمات همان صفحه شوید.
3. گزینه Page Layout را پیدا کنید.
4. حالت Elementor Full Width را انتخاب کنید.
5. تغییرات را ذخیره کنید.

برای صفحات معمولی سایت، گزینه Elementor Full Width انتخاب مناسب‌تری است. حالت Canvas بیشتر برای لندینگ‌پیج‌ها و صفحاتی کاربرد دارد که نباید هدر و فوتر داشته باشند.

روش چهارم: تغییر عرض سایت با CSS

وقتی تنظیمات قالب یا المنتور کنترل کافی به شما نمی‌دهد، می‌توانید از CSS استفاده کنید.

بهتر است کد را فقط روی بخش موردنظر اعمال کنید؛ نه اینکه بدون بررسی، عرض تمام عناصر سایت را تغییر دهید.

روش امن و پیشنهادی

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

custom-site-width

سپس این کد را به CSS سایت اضافه کنید:

.custom-site-width {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 24px;
}

در این کد:

• width: 100% اجازه می‌دهد بخش در نمایشگرهای کوچک جمع شود.
• max-width: 1200px اجازه نمی‌دهد محتوا بیش از ۱۲۰۰ پیکسل عریض شود.
• margin-inline: auto کانتینر را وسط صفحه قرار می‌دهد.
• padding-inline: 24px مانع چسبیدن محتوا به لبه صفحه می‌شود.

مزیت استفاده از margin-inline و padding-inline این است که در سایت‌های راست‌چین و چپ‌چین به‌درستی عمل می‌کنند.

تنظیم عرض جداگانه برای موبایل

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

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

.custom-site-width {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 24px;
}

@media (max-width: 767px) {
    .custom-site-width {
        padding-inline: 16px;
    }
}

با این تنظیم، محتوا در دسکتاپ حداکثر ۱۲۰۰ پیکسل عرض دارد و در موبایل با فاصله مناسب از دو طرف نمایش داده می‌شود.

المنتور همچنین امکان تعیین عرض و ارتفاع جداگانه برای Breakpointهای مختلف را در تنظیمات ریسپانسیو کانتینرها فراهم می‌کند.

کد CSS را کجا قرار دهیم؟

محل قرار دادن CSS به قالب و نسخه وردپرس بستگی دارد.

در قالب‌های کلاسیک معمولاً می‌توانید از مسیر زیر استفاده کنید:

نمایش ← سفارشی‌سازی ← CSS اضافی

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

همچنین در نسخه حرفه‌ای المنتور می‌توانید CSS را مستقیماً به همان کانتینر یا صفحه اضافه کنید.

چرا تغییر عرض در المنتور اعمال نمی‌شود؟

اگر عدد عرض را تغییر دادید اما ظاهر سایت عوض نشد، معمولاً یکی از موارد زیر عامل مشکل است.

تنظیمات قالب عرض صفحه را محدود کرده است

بعضی قالب‌ها برای محتوای اصلی یک عرض جداگانه دارند. وارد تنظیمات قالب شوید و گزینه‌هایی مانند Container Width، Site Width یا Content Width را بررسی کنید.

صفحه روی طرح پیش‌فرض قالب قرار دارد

طرح پیش‌فرض ممکن است دارای سایدبار یا محدودیت عرض باشد. برای آزمایش، Page Layout را روی Elementor Full Width قرار دهید.

کانتینر روی حالت تمام‌عرض است

تغییر Content Width روی بخشی که عمداً Full Width طراحی شده، نتیجه مورد انتظار را ایجاد نمی‌کند. نوع عرض همان کانتینر را بررسی کنید.

یک کانتینر داخلی عرض بیشتری دارد

گاهی کانتینر اصلی درست تنظیم شده، اما یک تصویر، جدول، اسلایدر یا کانتینر داخلی از محدوده بیرون زده است. در Navigator ساختار صفحه را بررسی کنید.

کش سایت پاک نشده است

بعد از تغییر تنظیمات، کش افزونه، مرورگر و CDN را پاک کنید. سپس صفحه را در حالت ناشناس مرورگر باز کنید.

کد CSS دیگری تنظیمات را بازنویسی می‌کند

ممکن است قالب یا افزونه‌ها از دستورهایی مانند width، max-width یا !important استفاده کرده باشند. در این حالت باید با ابزار Inspect مرورگر، قانون مؤثر را پیدا کنید.

کدام روش بهتر است؟

برای بیشتر کاربران، این ترتیب بهترین انتخاب است:

1. ابتدا عرض کلی را از تنظیمات سایت المنتور تغییر دهید.
2. اگر فقط یک بخش مشکل دارد، همان کانتینر را تنظیم کنید.
3. اگر قالب صفحه را محدود کرده، Elementor Full Width را انتخاب کنید.
4. فقط زمانی سراغ CSS بروید که تنظیمات آماده کافی نباشد.

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

اشتباهات رایج هنگام تغییر عرض سایت

تعیین عرض ثابت برای موبایل

کدی مانند زیر می‌تواند باعث خروج محتوا از صفحه شود:

width: 1200px;

به‌جای آن از ترکیب width: 100% و max-width استفاده کنید.

تغییر عرض تگ body

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

عریض کردن بیش از حد متن مقالات

عریض‌تر بودن همیشه به معنای طراحی بهتر نیست. عرض زیاد خطوط، خواندن متن را سخت می‌کند. برای مقاله‌ها بهتر است ستون متن محدودتر از عرض کلی سایت باشد.

فراموش کردن فاصله کناری موبایل

حتی زمانی که عرض روی ۱۰۰ درصد قرار دارد، باید مقداری Padding برای دو طرف صفحه در نظر بگیرید تا متن به لبه نمایشگر نچسبد.

جمع‌بندی

برای تغییر عرض وبسایت در المنتور، ابتدا وارد تنظیمات سایت و بخش Layout شوید و مقدار Content Width را تغییر دهید. برای بیشتر سایت‌ها، محدوده ۱۱۴۰ تا ۱۲۸۰ پیکسل نقطه شروع مناسبی است.

اگر فقط یک بخش مشکل دارد، به‌جای تغییر عرض کل سایت، همان کانتینر را تنظیم کنید. همچنین اگر قالب باعث محدود شدن صفحه شده است، Page Layout را روی Elementor Full Width قرار دهید.

در شرایطی که تنظیمات آماده کافی نیستند، استفاده از ترکیب width: 100% و max-width در CSS، روشی استاندارد و ریسپانسیو برای کنترل عرض محتواست.

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

سؤالات متداول

چگونه عرض کل سایت را در المنتور تغییر دهیم؟

یکی از صفحات را با المنتور باز کنید، وارد Site Settings و سپس Layout شوید و مقدار Content Width را تغییر دهید.

بهترین عرض برای سایت وردپرسی چقدر است؟

برای بیشتر سایت‌ها، عرض ۱۱۴۰ تا ۱۲۸۰ پیکسل مناسب است؛ اما عدد نهایی به نوع طراحی، قالب و تعداد ستون‌های صفحه بستگی دارد.

چرا تغییر عرض المنتور روی سایت اعمال نمی‌شود؟

تنظیمات قالب، طرح صفحه، کش سایت، کانتینرهای داخلی یا کدهای CSS می‌توانند مانع اعمال تغییر شوند.

چگونه فقط عرض یک صفحه را تغییر دهیم؟

طرح همان صفحه را روی Elementor Full Width قرار دهید و عرض کانتینر اصلی را به‌صورت جداگانه تنظیم کنید.

برای تنظیم عرض سایت از پیکسل استفاده کنیم یا درصد؟

برای حداکثر عرض دسکتاپ می‌توانید از پیکسل استفاده کنید؛ اما بهتر است مقدار width برابر ۱۰۰ درصد و مقدار max-width به‌صورت پیکسلی تعیین شود تا طراحی در موبایل نیز درست باقی بماند.

آیا تغییر عرض سایت روی سئو تأثیر دارد؟

عرض صفحه به‌تنهایی یک عامل مستقیم رتبه‌بندی نیست؛ اما طراحی نامناسب می‌تواند خوانایی، تجربه کاربری و نمایش موبایل را ضعیف کند. بنابراین تنظیم استاندارد عرض، به کیفیت کلی صفحه کمک می‌کند.