چرا تغییرات CSS در المنتور دیده می‌شوند اما در سایت نه؟

برای رفع اعمال نشدن CSS المنتور، اول مشخص کنید کد تازه به مرورگر بازدیدکننده رسیده است یا نه. اگر نرسیده، ذخیره‌سازی، فایل خروجی و کش را بررسی کنید؛ اگر رسیده اما ظاهر تغییر نکرده، سراغ انتخابگر، اولویت استایل‌ها و شرط نمایش بروید. دیدن نتیجه در ویرایشگر، به‌تنهایی ثابت نمی‌کند همان کد در صفحهٔ منتشرشده هم اجرا شده است.

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

قبل از تغییر CSS، صفحهٔ درست را بررسی کنید

ابتدا روی «به‌روزرسانی» یا «انتشار» بزنید و منتظر پایان ذخیره‌سازی بمانید. سپس نشانی عمومی صفحه را باز کنید؛ نشانی پیش‌نمایش ویرایشگر معیار مناسبی برای تست بازدیدکننده نیست.

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

برای مقایسه، این سه مورد را ثابت نگه دارید:

• نشانی صفحه؛ بدون جابه‌جایی میان سایت اصلی، آزمایشی و پیش‌نمایش.
• عرض نمایش؛ مقایسهٔ نمای موبایل ویرایشگر با دسکتاپ سایت نتیجهٔ معتبری نمی‌دهد.
• وضعیت عنصر؛ مثلاً حالت عادی دکمه را با حالت هاور آن مقایسه نکنید.

درخت تشخیص اعمال نشدن CSS المنتور

در صفحهٔ عمومی سایت، روی عنصر مشکل‌دار راست‌کلیک کنید و Inspect را بزنید. سپس این مسیر را دنبال کنید:

برای تشخیص حضور کد، فقط به فهرست Styles تکیه نکنید: قانونی که با عنصر انتخاب‌شده تطبیق ندارد ممکن است آنجا دیده نشود. نام کلاس اختصاصی خود را در جست‌وجوی سراسری DevTools، معمولاً با Ctrl+Shift+F، جست‌وجو کنید و فایل‌های CSS و استایل‌های داخل HTML را بررسی کنید. پیدا نشدن نتیجه، سرنخ است؛ منابع بارگذاری‌شده را هم کنترل کنید.

در پنل Styles می‌توانید قوانین مرتبط با عنصر و در Computed مقدار نهایی ویژگی‌ها را ببینید. روی منبع قانون کلیک کنید تا مشخص شود از کدام فایل یا بخش صفحه آمده است. مستندات Chrome DevTools این دو پنل را برای بررسی و تشخیص مشکلات CSS معرفی می‌کند.

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

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

تفاوت selector با کلاس اختصاصی

در بخش Custom CSS خودِ ویجت‌های کلاسیک المنتور، selector به محدودهٔ همان عنصر اشاره می‌کند. این عبارت را بدون نقطه می‌نویسید. برای نمونه، در ویجت دکمهٔ کلاسیک:

selector .elementor-button {
  border-radius: 16px;
}

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

اگر کد را به CSS اضافی وردپرس یا یک فایل عمومی منتقل کنید، selector دیگر جایگزین خودکار عنصر المنتور نیست. باید از انتخابگر واقعی استفاده کنید. مثلاً در فیلد CSS Classes ویجت، نام sk-contact-button را بدون نقطه وارد کنید و در فایل CSS بنویسید:

.sk-contact-button .elementor-button {
  border-radius: 16px;
}

این نمونه مخصوص ساختاری است که .elementor-button درون عنصر دارای کلاس اختصاصی قرار دارد. در خروجی HTML واقعی، این رابطه را با Inspect تأیید کنید.

فاصله در انتخابگر چه چیزی را عوض می‌کند؟

انتخابگر	معنای آن
.sk-card	خود عنصر دارای کلاس sk-card
.sk-card .sk-title	عنصر دارای کلاس sk-title درون sk-card
.sk-card.sk-title	یک عنصر که هم‌زمان هر دو کلاس را دارد

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

برای عناصر اتمی، انتخابگرهای نمونه‌های کلاسیک را بدون بررسی کپی نکنید. ابتدا عنصر و کلاس واقعی خروجی را پیدا کنید. برای آشنایی با این بخش از المنتور، مقالهٔ المان‌های اتمی المنتور؛ آنچه باید درباره Atomic Elements بدانید را بخوانید.

شاخهٔ دوم: انتخابگر درست است، اما قانون دیگری برنده می‌شود

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

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

راه عملی این است که در Computed، ویژگی موردنظر، مثلاً border-radius، را پیدا کنید و منبع مقدار برنده را ببینید. سپس تنظیم یا قانون رقیب را در محل اصلی اصلاح کنید، یا انتخابگر خود را فقط به‌اندازهٔ لازم دقیق‌تر بنویسید.

اضافه‌کردن !important به همهٔ ویژگی‌ها راه‌حل عمومی نیست: فایل بارگذاری‌نشده، انتخابگر اشتباه یا شرط رسانهٔ غیرفعال را درست نمی‌کند. استفادهٔ موردی از آن باید بعد از شناخت تعارض باشد.

اگر قانون فعال است ولی نتیجه دیده نمی‌شود، بررسی کنید ویژگی را روی بخش درست گذاشته‌اید؛ مثلاً پس‌زمینهٔ والد ممکن است زیر پس‌زمینهٔ فرزند پنهان باشد.

شاخهٔ سوم: کد تازه در خروجی صفحه نیست

در این وضعیت، دقیق‌تر کردن انتخابگر کمکی نمی‌کند. باید مسیر ذخیره و تحویل CSS را بررسی کنید.

فایل‌های المنتور را تازه‌سازی کنید

بعد از ذخیرهٔ تغییرات و تهیهٔ نسخهٔ پشتیبان، در پیشخوان به بخش ابزارهای المنتور بروید و Clear Files & Data را اجرا کنید. در مستندات فعلی، مسیر Elementor → Editor → Tools آمده است؛ در نصب‌های دیگر ممکن است Tools مستقیماً زیر Elementor باشد. اگر دکمهٔ Save Changes نمایش داده می‌شود، آن را هم بزنید. راهنمای رسمی رفع مشکل Custom CSS

این کار برای تازه‌سازی فایل‌ها و داده‌های تولیدشده مفید است؛ قرار نیست انتخابگر یا منطق نادرست کد را اصلاح کند. توضیح ابزار Clear Files & Data

کش را لایه‌به‌لایه بررسی کنید

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

اگر مشکل ادامه داشت، تنظیمات بهینه‌سازی CSS را یکی‌یکی آزمایش کنید؛ مثلاً ترکیب فایل‌ها یا حذف CSS استفاده‌نشده. بعد از هر تغییر، خروجی بهینه‌سازی را بازسازی و صفحه را دوباره بررسی کنید. با تغییر هم‌زمان چند گزینه، مشخص نمی‌شود کدام عامل مؤثر بوده است.

بارگذاری فایل را در Network ببینید

DevTools را باز نگه دارید، وارد Network شوید، فیلتر CSS را انتخاب کنید و صفحه را دوباره بارگذاری کنید. برای آزمون کش مرورگر، گزینهٔ Disable cache را هنگام باز بودن DevTools فعال کنید؛ این گزینه کش هاست و CDN را دور نمی‌زند.

مشاهده	بررسی بعدی
فایل CSS با خطای ۴۰۴ پاسخ می‌دهد	نشانی فایل و وجود خروجی تولیدشده را بررسی کنید.
پاسخ ۴۰۳ است	محدودیت دسترسی، تنظیمات امنیتی یا مسدودشدن درخواست را بررسی کنید.
پاسخ موفق است ولی کد قدیمی است	محتوای پاسخ و لایه‌های کش را بررسی کنید.
فایل موفق است و کد جدید را دارد	به شاخهٔ انتخابگر و اولویت CSS برگردید.

این وضعیت‌ها علت قطعی را تعیین نمی‌کنند؛ مسیر بررسی بعدی را نشان می‌دهند. همچنین همهٔ CSSها الزاماً فایل مستقل ندارند؛ بخشی ممکن است داخل HTML باشد. اگر فایل تولید نمی‌شود، فضای دیسک و مجوز نوشتن مسیر خروجی هم باید بررسی شود؛ المنتور به این موارد در راهنمای مشکلات نمایش تغییرات اشاره کرده است.

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

یک مثال قابل‌بازتولید: کدی که فقط در ویرایشگر کار می‌کند

این مثال آموزشی روی یک برگهٔ آزمایشی طراحی شده و گزارش یک پروژهٔ واقعی نیست. به المنتور پرو یا دسترسی به Custom CSS ویجت کلاسیک نیاز دارد.

۱. نمونهٔ سالم بسازید

یک ویجت Button کلاسیک اضافه کنید و در CSS Classes آن بنویسید:

sk-css-demo

در Custom CSS همان ویجت، کد زیر را قرار دهید:

selector .elementor-button {
  outline: 4px solid #7050c8;
  outline-offset: 4px;
}

صفحه را منتشر کنید. نتیجهٔ مورد انتظار، خط بنفش دور دکمه در ویرایشگر و صفحهٔ عمومی است. از outline استفاده می‌کنیم تا آزمون، اندازه و چیدمان دکمه را تغییر ندهد.

۲. خطای وابستگی به ویرایشگر را ایجاد کنید

کد قبلی را با این کد جایگزین کنید:

.elementor-editor-active selector .elementor-button {
  outline: 4px solid #7050c8;
  outline-offset: 4px;
}

در ویرایشگر کلاسیکی که کلاس elementor-editor-active روی یکی از اجداد ویجت وجود دارد، خط بنفش در محیط ویرایش دیده می‌شود. صفحه را به‌روزرسانی و نشانی عمومی را باز کنید: در صفحه‌ای که این کلاسِ مختص ویرایشگر وجود ندارد، انتخابگر تطبیق پیدا نمی‌کند.

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

۳. از روی شواهد علت را پیدا کنید

در منابع صفحهٔ عمومی، elementor-editor-active را در کد CSS جست‌وجو کنید. اگر قانون تازه وجود دارد اما در HTML هیچ والد متناظری نیست، مشکل از دامنهٔ انتخابگر است. فایل رسیده، ولی شرط انتخاب عنصر برقرار نیست؛ پاک‌کردن مکرر کش این شرط را ایجاد نمی‌کند.

۴. کد را اصلاح کنید

پیشوند .elementor-editor-active را حذف کنید و به کد مرحلهٔ اول برگردید. اگر می‌خواهید کد را در CSS عمومی قرار دهید، از این نسخه استفاده کنید:

.sk-css-demo .elementor-button {
  outline: 4px solid #7050c8;
  outline-offset: 4px;
}

پس از ذخیره و تازه‌سازی خروجی در صورت نیاز، صفحهٔ عمومی را دوباره بررسی کنید. در پایان، کد آزمایشی outline را حذف کنید.

تست نهایی را مثل بازدیدکننده انجام دهید

رفع مشکل زمانی کامل است که همان نتیجه در صفحهٔ عمومی دیده شود. این چک‌لیست کوتاه را اجرا کنید:

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

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

پرسش‌های متداول

از تشخیص علت به اصلاح پایدار برسید

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

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