زمان مطالعه: 2 دقیقه
گاهی تنظیمات آماده المنتور برای اجرای جزئیات دقیق طراحی کافی نیست و لازم است ظاهر بخش های مختلف را با کدنویسی شخصی سازی کنید. با CSS سفارشی در المنتور می توانید رنگ، فاصله، اندازه، حالت هاور، نحوه نمایش در موبایل و بسیاری از ویژگی های ظاهری المان ها را تغییر دهید. در این آموزش، روش های اضافه کردن کد CSS به المنتور را بررسی می کنیم تا بتوانید بدون ویرایش مستقیم فایل های قالب، طراحی صفحات سایت را مطابق نیاز خود تنظیم کنید.
برای اضافه کردن CSS سفارشی به المنتور می توان از بخش Custom CSS در افزونه المنتور پرو، ابزار سفارشی سازی وردپرس، ویجت HTML یا افزونه های مخصوص CSS استفاده کرد. انتخاب روش مناسب به نسخه المنتور، محل اجرای کد و میزان دسترسی شما به تنظیمات سایت بستگی دارد.
آموزش اضافه کردن CSS سفارشی به المنتور
- مرحله اول: انتخاب المان صفحه را با المنتور باز کنید و روی المان، کانتینر یا سکشن موردنظر کلیک کنید.
- مرحله دوم: ورود به تنظیمات پیشرفته از پنل تنظیمات المنتور وارد تب پیشرفته شوید.
- مرحله سوم: باز کردن CSS سفارشی در تنظیمات پیشرفته، بخش CSS سفارشی را پیدا و باز کنید.
- مرحله چهارم: وارد کردن کد CSS کد CSS موردنظر را داخل کادر قرار دهید. برای اعمال کد روی همان المان از selector استفاده کنید.
selector {
border-radius: 20px;
}
- مرحله پنجم: ذخیره تغییرات پس از بررسی نتیجه، روی دکمه به روزرسانی کلیک کنید.
نتیجه گیری
با اضافه کردن CSS سفارشی به المنتور می توانید ظاهر المان ها، کانتینرها و سکشن های سایت را دقیق تر شخصی سازی کنید. در نسخه حرفه ای المنتور، کد از بخش Custom CSS وارد می شود و در نسخه رایگان می توانید از بخش CSS اضافی وردپرس استفاده کنید. پس از ثبت کدها، حتما نتیجه را در موبایل، تبلت و دسکتاپ بررسی کنید.
سوالات متداول
آیا امکان اضافه کردن CSS در نسخه رایگان المنتور وجود دارد؟
بله، در نسخه رایگان المنتور، می توانید کدها را از مسیر نمایش ← سفارشی سازی ← CSS اضافی وارد کنید.
عبارت selector در المنتور چه کاربردی دارد؟
عبارت selector باعث می شود کد CSS فقط روی المان انتخاب شده اعمال شود.