آموزش افزودن CSS سفارشی به المنتور – (نکات و ترفندها) (ویدیوی آموزشی)

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

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

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

CSS یا Cascading Style Sheets زبانی است که برای استایل‌ دهی به صفحات وب استفاده می‌شود. با CSS می‌توانید رنگ‌ها، فونت‌ها، فاصله‌ها و نحوه قرارگیری المان‌ها را در صفحه تنظیم کنید.

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

نحوه افزودن CSS سفارشی در المنتور به قسمت های مختلف سایت

المنتور به شما امکان می‌دهد CSS سفارشی را در سه سطح مختلف اعمال کنید ، برای افزودن CSS سفارشی به المان ها و کانتینر فلکس باکس در المنتور و همچنین آشنایی با نحوه اعمال CSS به سطوح مختلف مراحل زیر را با دقت مطالعه کنید:

1. افزودن CSS سفارشی به کل بخش های سایت در المنتور

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

کد موردنظر خود را وارد کنید.

مراحل:

به تنظیمات سایت (Site Settings) در المنتور بروید.

گزینه “CSS سفارشی” را انتخاب کنید.

پیشنهاد میکنیم بخش آموزش تنظیمات المنتور را ابتدا مشاهده کنید.

نمونه کد:

body {
  background-color: red;
}

نتیجه: تمام صفحات وب‌سایت شما پس‌زمینه قرمز خواهند داشت.

2. افزودن CSS سفارشی فقط به صفحه فعلی در المنتور:

برای افزودن CSS سفارشی فقط به یک صفحه خاص در المنتور مراحل زیر را دنبال کنید:

• مراحل:
  1. وارد صفحه مورد نظر شوید و با المنتور آن را ویرایش کنید.
  2. از منوی تنظیمات صفحه (رنگ نارنجی در تصویر زیر)، به تب پیشرفته (رنگ قرمز در تصویر زیر) بروید.
  3. کد CSS خود را وارد کنید.

نمونه کد:

body {
  background-color: blue;
}

نتیجه: تنها این صفحه، پس‌ زمینه آبی خواهد داشت، حتی اگر در تنظیمات سایت رنگ دیگری تعریف شده باشد.

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

گاهی اوقات فقط می‌خواهید یک المان خاص را تغییر دهید.

• مراحل:
  1. المان موردنظر خود را انتخاب کنید.
  2. به تب پیشرفته (Advanced) بروید و بخش “CSS سفارشی” را باز کنید.
  3. کد CSS خود را وارد کنید.

نمونه کد:

#my-element {
  background-color: green;
}

نتیجه: تنها المانی که شناسه my-element دارد، پس‌زمینه سبز خواهد داشت.

درک سلکتورها (CSS Selectors) در المنتور

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

سلکتور چیست؟

در CSS، سلکتورها برای شناسایی بخش‌های مختلف سایت استفاده می‌شوند. برای مثال، اگر بخواهید تمام عناوین سطح اول (h1) را به رنگ قرمز درآورید، کد CSS زیر را می‌نویسید:

h1 {
    color: red;
}

در این کد:

• h1 سلکتور است که عناوین سطح اول را هدف می‌گیرد.
• color ویژگی است که می‌خواهید تغییر دهید.
• red مقدار این ویژگی است.

ساختار استاندارد کدهای CSS به صورت زیر است:

selector {
    property: value;
}

انواع سلکتورها در CSS

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

کد زیر تمام متن‌های داخل نقل‌قول‌ها (blockquote) را آبی می‌کند:

blockquote {
    color: blue;
}

نتیجه: تمامی متن‌های داخل تگ <blockquote> به رنگ آبی نمایش داده می‌شوند.

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

المنتور با ارائه کلمه کلیدی selector، فرایند نوشتن CSS را ساده‌تر کرده است. این کلمه کلیدی به‌طور خودکار المانی را که در حال ویرایش آن هستید، هدف‌ گیری می‌کند.

چگونه از selector در CSS سفارشی استفاده کنیم؟

1. المان موردنظر را انتخاب کنید.
2. به تب پیشرفته بروید و بخش CSS سفارشی را باز کنید.
3. از کلمه selector در کد خود استفاده کنید.

نمونه:

selector {
    border: 2px solid red;
}

نتیجه: یک حاشیه قرمز به المان انتخاب‌ شده اضافه می‌شود.

نکته: بهتر است از کلمه کلیدی selector برای استایل‌ دهی به المان‌ های خاص استفاده کنید و از آن برای CSS سطح صفحه یا سایت استفاده نکنید.

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

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

جمع‌بندی

افزودن CSS سفارشی در المنتور به شما امکان می‌دهد که کنترل کامل‌تری روی طراحی وب‌سایت خود داشته باشید. با درک صحیح از سلکتورها و استفاده از سه سطح مختلف (سایت، صفحه و المان)، می‌توانید استایل‌هایی حرفه‌ای و انعطاف‌پذیر ایجاد کنید. به یاد داشته باشید که المنتور ابزارهایی مثل AI و کلمه کلیدی selector را برای ساده‌تر کردن این فرآیند در اختیار شما قرار داده است. حالا با این دانش، می‌توانید وب‌سایت‌های خود را به بهترین شکل ممکن طراحی کنید!