آموزش اضافه کردن کد HTML و CSS سفارشی به المنتور با تصویر [انواع، تفاوت، نکات مهم و اشتباهات رایج]

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

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

از طرف دیگر، گاهی مسئله فقط استایل نیست و لازم است یک قطعه HTML، کد CSS یا JavaScript را مستقیماً در صفحه قرار دهید. المنتور برای این کار نیز HTML Widget را در اختیار شما قرار می‌دهد.

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

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

CSS مخفف Cascading Style Sheets است و وظیفه اصلی آن کنترل ظاهر عناصر موجود در صفحات وب است. اگر HTML را ساختار یک صفحه در نظر بگیریم، CSS ظاهر آن ساختار را تعیین می‌کند. برای مثال، HTML مشخص می‌کند که یک عنوان وجود داشته باشد، اما CSS می‌تواند تعیین کند:

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

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

برای مثال، فرض کنید برای یک دکمه المنتور می‌توانید رنگ، فونت، Padding، Border Radius و سایه تعیین کنید؛ اما بخواهید در حالت Hover علاوه بر تغییر رنگ، دکمه کمی به سمت بالا حرکت کند و سایه آن نیز تغییر کند. در چنین شرایطی CSS می‌تواند کنترل بسیار دقیق‌تری در اختیار شما قرار دهد.

CSS سفارشی در المنتور چه کاربردی دارد؟

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

• شخصی‌سازی ظاهر دکمه‌ها
• تغییر فاصله بین بخش‌های مختلف
• تنظیم اندازه و فاصله متن‌ها
• ساخت افکت Hover
• ایجاد انیمیشن‌های سبک
• تغییر Border و Border Radius
• کنترل سایه‌ها
• تنظیم نحوه نمایش یک المان در موبایل
• تغییر ظاهر فرم‌ها
• اصلاح ظاهر عناصر یک قالب یا افزونه جانبی
• کنترل موقعیت بعضی عناصر
• شخصی‌سازی کارت‌ها، باکس‌ها و بخش‌های محتوایی
• ایجاد ظاهر متفاوت برای یک Widget خاص
• اصلاح استایل بخش‌هایی که تنظیمات آماده کافی برای آن‌ها وجود ندارد

آموزش افزودن CSS سفارشی به المنتور با تصویر

در المنتور می‌توان CSS سفارشی را در چند سطح مختلف استفاده کرد. مستندات رسمی فعلی المنتور این قابلیت را در سه سطح اصلی توضیح می‌دهند: یک المان، یک صفحه و کل سایت. در ساختار فعلی پلن‌ها نیز Custom CSS در پلن Essential ارائه نمی‌شود و در پلن‌های واجد شرایط دیگر در دسترس است. بنابراین بهتر است قبل از شروع، بدانید کدی که می‌نویسید قرار است روی چه محدوده‌ای اثر بگذارد.

افزودن CSS به یک المان

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

۱. وارد ویرایش صفحه با المنتور شوید.

۲. المان یا Widget مورد نظر را انتخاب کنید.

۳. وارد بخش Advanced شوید.

۴. در قسمت مربوط به Custom CSS، کد خود را وارد کنید.

یک مثال ساده

فرض کنید یک Heading دارید و می‌خواهید رنگ متن آن را تغییر دهید: color: #222;  یا می‌توانید یک ویژگی دیگر به آن اضافه کنید: font-size: 32px; برای ایجاد چند تغییر نیز می‌توانید آن‌ها را به‌صورت هم‌زمان تعریف کنید:

color: #222;
font-size: 32px;
font-weight: 700;

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

افزودن CSS به یک صفحه

گاهی لازم نیست CSS فقط برای یک Widget باشد و نمی‌خواهید این استایل را برای کل سایت تعریف کنید. فرض کنید یک صفحه فرود یا Landing Page دارید که طراحی مخصوص خودش را دارد. در این حالت، تعریف CSS در سطح صفحه می‌تواند انتخاب منطقی‌تری باشد. در نسخه‌های فعلی المنتور، از بخش تنظیمات صفحه و قسمت Advanced می‌توان CSS مربوط به همان صفحه را مدیریت کرد. مزیت اصلی این روش، محدودکردن دامنه اثرگذاری کد است. این مدل زمانی کاربردی است که:

• یک Landing Page طراحی اختصاصی دارد.
• یک صفحه فروش از ظاهر سایر صفحات متفاوت است.
• فقط در یک صفحه به CSS ویژه نیاز دارید.
• نمی‌خواهید قوانین CSS عمومی روی کل سایت اعمال شوند.

افزودن CSS در سطح کل سایت

اگر یک استایل قرار است در بخش‌های مختلف سایت استفاده شود، تعریف آن به‌صورت محلی برای تک‌تک عناصر کارآمد نیست. در چنین شرایطی می‌توان از CSS در سطح سایت استفاده کرد. المنتور در مستندات رسمی خود، Site Settings > Custom CSS را برای تعریف استایل‌های سراسری معرفی کرده است. این تفکیک در پروژه‌های بزرگ اهمیت زیادی دارد، زیرا از پراکنده‌شدن بی‌دلیل کدها جلوگیری می‌کند. قاعده ساده این است: برای مثال، ممکن است بخواهید:

• تمام دکمه‌های خاص سایت طراحی مشابهی داشته باشند.
• یک سیستم مشخص برای Headingها ایجاد کنید.
• یک استایل عمومی برای کارت‌ها تعریف کنید.
• الگوی خاصی برای فرم‌ها داشته باشید.

نکات مهم در استفاده selector در css المنتور

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

selector {
border-radius: 20px;
}

یا برای یک افکت ساده:

selector {
transition: all 0.3s ease;
}

selector {
transform: translateY(-4px);
}

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

از بین CSS سفارشی یا تنظیمات خود المنتور کدام را انتخاب کنیم؟

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

اگر تنظیم آماده وجود دارد: ابتدا از خود المنتور استفاده کنید.

اگر تنظیم آماده محدود است: CSS سفارشی را بررسی کنید.

اگر نیاز به ساختار HTML دارید: از HTML Widget استفاده کنید.

اگر نیاز به رفتار تعاملی یا اسکریپت دارید: ممکن است JavaScript یا Custom Code مناسب‌تر باشد.

آموزش قرار دادن کد HTML در المنتور

المنتور برای درج کدهای HTML یک Widget اختصاصی به نام HTML Widget دارد. این Widget می‌تواند برای درج HTML، CSS، Shortcode و در سناریوهای مناسب JavaScript نیز استفاده شود. مستندات رسمی المنتور نیز HTML Widget را دقیقاً برای همین نوع استفاده معرفی می‌کنند. اگر CSS را در HTML Widget قرار می‌دهید، می‌توانید آن را در تگ <style> قرار دهید و برای JavaScript نیز از <script> استفاده کنید. برای استفاده از آن:

• صفحه را با المنتور باز کنید.
• در پنل Widgetها عبارت HTML را جست‌وجو کنید.
• Widget HTML را به بخش مورد نظر بکشید.
• کد خود را داخل کادر مربوط به HTML قرار دهید.

چه زمانی HTML Widget بهتر از Custom CSS است؟

فرض کنید بخواهید یک باکس اختصاصی با ساختار خاص ایجاد کنید. اگر عنصر مورد نظر را نمی‌توان تنها با تنظیمات یک Widget موجود ایجاد کرد، HTML Widget می‌تواند گزینه مناسب‌تری باشد. برای مثال:

<div class=”custom-box”>
<h3>عنوان باکس</h3>
<p>متن نمونه</p>
</div>

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

HTML = ساختار

CSS = ظاهر

JavaScript = رفتار و تعامل

آموزش CSS واکنش‌گرا در المنتور

یکی از مهم‌ترین نکات در طراحی حرفه‌ای این است که CSS فقط برای دسکتاپ نوشته نشود. صفحه‌ای که روی مانیتور کاملاً درست نمایش داده می‌شود، ممکن است روی موبایل دچار مشکلاتی مانند:

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

شود.

المنتور امکان مدیریت تنظیمات بر اساس اندازه دستگاه را فراهم می‌کند و در صورت نیاز می‌توان از Media Queryهای CSS نیز استفاده کرد. مستندات رسمی المنتور نیز استفاده از Media Query برای اعمال استایل بر اساس ویژگی‌های دستگاه را توضیح داده‌اند. نکته مهم این است که Breakpoint را آگاهانه انتخاب کنید و قبل از انتشار صفحه، نتیجه را روی اندازه‌های مختلف نمایشگر بررسی کنید.

یک نمونه ساده:

@media (max-width: 600px) {
selector {
font-size: 18px;
}
}

تفاوت Margin و Padding چیست؟

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

تفاوت Flexbox و Container چیست؟

CSS سفارشی زمانی بیشترین قدرت خود را نشان می‌دهد که ساختار صفحه نیز اصولی باشد. المنتور در طراحی‌های جدید خود از ساختار Container و Flexbox برای کنترل چیدمان استفاده می‌کند. بنابراین قبل از اینکه برای حل همه مشکلات چیدمان سراغ CSS بروید، بررسی کنید آیا ساختار Container و تنظیمات Layout به‌درستی پیکربندی شده‌اند. برای یادگیری بهتر این بخش‌ها می‌توانید آموزش‌های زیر را دنبال کنید:

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

این موضوع مهم است، زیرا هر مشکل ظاهری الزاماً با CSS حل نمی‌شود. گاهی مشکل اصلی از ساختار Layout، Width، Alignment، Gap یا تنظیمات Responsive است.

کلاس CSS چیست و چرا باید از آن استفاده کنیم؟

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

• کد کمتر
• مدیریت آسان‌تر
• طراحی منسجم‌تر
• تغییر سریع‌تر استایل
• کاهش تکرار
• نگهداری ساده‌تر پروژه

اشتباهات رایج هنگام استفاده از CSS سفارشی در المنتور

در ادامه به ارائه و بررسی تمامی اشتباهات رایج هنگام استفاده از CSS سفارشی در المنتور می پردازیم.

استفاده بیش از حد از CSS: هر تغییری نباید با CSS انجام شود. اگر المنتور برای کاری تنظیم آماده دارد، استفاده از همان تنظیم معمولاً منطقی‌تر است.

نوشتن Selectorهای بسیار عمومی: وقتی انتخابگر بیش از حد عمومی باشد، ممکن است استایل شما روی بخش‌هایی اعمال شود که اصلاً قصد تغییر آن‌ها را نداشته‌اید.

استفاده افراطی از !important: گاهی !important برای غلبه بر یک قانون دیگر استفاده می‌شود، اما استفاده بیش از حد از آن می‌تواند مدیریت CSS را سخت‌تر کند. به‌جای اینکه از ابتدا برای همه قوانین !important بنویسید، بهتر است ابتدا منبع تداخل و اولویت CSS را پیدا کنید.

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

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

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

آیا CSS سفارشی سرعت سایت را کاهش می‌دهد؟

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

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

اگر Custom CSS در المنتور نمایش داده نشد چه کار کنیم؟

اگر گزینه Custom CSS را در ویرایشگر مشاهده نمی‌کنید، ابتدا باید وضعیت پلن و امکانات فعال‌شده روی سایت را بررسی کنید. طبق مستندات رسمی فعلی المنتور، Custom CSS در پلن Essential در دسترس نیست و در پلن‌های واجد شرایط ارائه می‌شود. اگر بعد از اعمال CSS تغییرات را نمی‌بینید، صفحه را در حالت Preview و همچنین مرورگر دیگر بررسی کنید و کش را نیز پاک کنید. بعد از بررسی دسترسی، موارد دیگری نیز ممکن است باعث ایجاد مشکل شوند:

• کش وردپرس
• کش افزونه‌های بهینه‌سازی
• کش CDN
• CSS تولیدشده قدیمی
• تداخل قالب یا افزونه
• اشتباه در Selector
• اولویت پایین‌تر یک قانون CSS
• مشکل Syntax در کد

انتخاب درست و اصولی CSS یا HTML یا Widget

در ادامه به ارائه یک چدول برای آگاهی برای انتخاب اصولی و درست بین css یا html یا widget میپردازیم. این جدول یک قاعده ساده اما کاربردی در اختیار شما قرار می‌دهد: ابتدا نیاز واقعی را مشخص کنید، سپس کم‌پیچیده‌ترین ابزار مناسب را انتخاب کنید.

برای طراحی حرفه‌ای‌تر المنتور از کجا شروع کنیم؟

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

برای شخصی‌سازی حرفه‌ای صفحات المنتور چه روشی بهتر است؟

بهترین روش این نیست که تمام طراحی سایت را با CSS انجام دهید یا برعکس، هیچ‌وقت CSS ننویسید. این مدل باعث می‌شود هم سرعت طراحی بالا بماند و هم زمانی که پروژه بزرگ‌تر شد، مدیریت آن دشوار نشود. یک پروژه حرفه‌ای معمولاً ترکیبی از چند ابزار است:

• المنتور برای ساختار و کنترل‌های اصلی
• Container و Layout برای چیدمان
• Class برای ایجاد الگوهای تکرارپذیر
• CSS سفارشی برای جزئیات و شخصی‌سازی
• HTML Widget برای ساختارها و کدهای اختصاصی

جمع‌بندی

CSS سفارشی یکی از ارزشمندترین ابزارهای شخصی‌سازی در المنتور است، اما قدرت آن زمانی بیشتر می‌شود که بدانید کجا و چرا باید از آن استفاده کنید.

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

از طرف دیگر، زمانی که نیاز به ساختار HTML اختصاصی دارید، HTML Widget انتخاب مناسب‌تری خواهد بود. این Widget امکان قرار دادن HTML و همچنین کدهای CSS و JavaScript را در صفحه فراهم می‌کند.

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

سؤال‌های متداول درباره CSS سفارشی در المنتور

آیا برای استفاده از CSS سفارشی در المنتور باید برنامه‌نویس باشم؟

خیر. برای تغییرات ساده CSS نیازی به دانش پیشرفته برنامه‌نویسی ندارید. کافی است مفاهیم پایه‌ای مانند Selector، Property، Value، Margin، Padding، Color، Font Size و Hover را یاد بگیرید. اما هرچه پروژه پیچیده‌تر شود، آشنایی بیشتر با HTML، CSS و ساختار DOM کمک می‌کند مشکلات را سریع‌تر پیدا و برطرف کنید.

آیا CSS سفارشی فقط برای Elementor Pro است؟

دسترسی به Custom CSS به پلن المنتور وابسته است. طبق مستندات رسمی فعلی، این قابلیت در پلن Essential ارائه نمی‌شود و در پلن‌های واجد شرایط دیگر در دسترس است.

آیا می‌توان برای موبایل CSS جداگانه نوشت؟

بله. CSS می‌تواند برای اندازه‌های مختلف نمایشگر تنظیم شود و المنتور نیز کنترل‌های Responsive را در اختیار شما قرار می‌دهد. در صورت نیاز می‌توانید از Media Query نیز استفاده کنید.

تفاوت CSS سفارشی با HTML Widget چیست؟

CSS برای کنترل ظاهر و استایل عناصر استفاده می‌شود، در حالی که HTML Widget برای قرار دادن ساختار HTML و همچنین کدهای CSS، Shortcode و JavaScript در صفحه کاربرد دارد.

آیا می‌توان با CSS انیمیشن ایجاد کرد؟

بله. CSS می‌تواند برای Transition، Hover، Transform و بسیاری از انیمیشن‌های ظاهری استفاده شود. البته بهتر است انیمیشن‌ها هدف مشخصی داشته باشند و صرفاً برای تزئین بیش از حد صفحه به کار نروند.

چرا کد CSS من روی عنصر مورد نظر اثر نمی‌گذارد؟

دلایل مختلفی ممکن است وجود داشته باشد؛ از جمله Selector نادرست، اولویت پایین‌تر CSS، وجود یک قانون دیگر که استایل را Override می‌کند، کش سایت یا اشتباه در Syntax کد.

آیا استفاده از !important همیشه لازم است؟

خیر. !important یک ابزار برای افزایش اولویت یک قانون است، اما استفاده بیش از حد از آن باعث می‌شود مدیریت و عیب‌یابی CSS سخت‌تر شود. بهتر است ابتدا منشأ تداخل را پیدا کنید.

آیا می‌توان با CSS تمام طراحی المنتور را انجام داد؟

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