آموزش اضافه کردن CSS سفارشی به المنتور
امکان Custom CSS یا CSS سفارشی در المنتور به شما کمک می‌کند که به هر المان و عنصر یا کل صفحه خود یک استایل مشخصی مانند فونت، رنک، اندازه و غیره را اضافه کنید. اگر شما هم می‌خواهید صفحات جذاب‌تری طراحی کنید این مقاله را از دست ندهید.
یکی از امکانات جذاب المنتور پرو برای طراحی صفحات پویا، اضافه کردن کد Custom CSS یا CSS سفارشی به هر المان و یا ستون است. در این مقاله در چند گام ساده نحوه افزودن سی اس اس سفارشی به المنتور را توضیح می‌دهیم.
CSS چیست؟
CSS یا Cascading Style Sheets به عناون یک زبان استایل دهی شناخته شده که برای توصیف نحوه نمایش عناصر HTML در یک صفحه وب استفاده می‌شود. به عبارت دیگر، CSS به شما این امکان را می‌دهد تا ظاهر و استایل عناصر مختلف وبسایت خود را مانند رنگ، فونت، اندازه، حاشیه، پس‌زمینه و نحوه چیدمان آنها را کنترل کنید.
CSS در کنار HTML و JavaScript برای ایجاد صفحات وب پویا و جذاب استفاده می‌شود. با استفاده از CSS می‌توانید وبسایت خود را به شکلی منحصر به فرد و با ظاهری جذاب برای کاربران خود طراحی کنید.
آموزش افزودن CSS سفارشی در المنتور
در آموزش افزونه المنتور به صورت کاملا عملی نحوه طراحی بخش‌های مختلف سایت را با این افزونه توضیح دادیم؛ یکی از قابلیت‌های المنتور، اضافه کردن کد css سفارشی به المان‌ها برای تغییرات ظاهری است. در ادامه و در چند گام نحوه انجام این کار را آورده‌ایم.
نصب المنتور پرو
برای شروع، ابتدا باید افزونه Elementor را روی وبسایت وردپرسی خود نصب ئداشته باشید؛ برای نصب Elementor مانند هر افزونه دیگر:
- از پیشخوان وردپرس به بخش افزونه‌ها >افزودن وارد شوید.
- افزونه را از راست چین دانلود و از قسمت قبل بار گذاری و نصب کنید.
- پس از نصب، افزونه را فعال کنید.
نکته: برای استفاده از قابلیت اضافه کردن CSS سفارشی به المان‌ها، به نسخه پولی Elementor Pro نیاز دارید.
اضافه کردن CSS سفارشی به المان‌ها در المنتور پرو
در Elementor Pro می‌توانید CSS سفارشی خود را به هر بخش، ستون و یا ویجت اضافه کنید. برای این کار، مراحل زیر را دنبال کنید.
- روی المانی که قصد افزودن Custom CSS به آن را دارید، کلیک یا آن را انتخاب کنید.
2. در پنل تنظیمات المان، روی تب پیشرفته یا Advanced کلیک کنید.
3. به پایین اسکرول کنید و بخش CSS سفارشی را باز کنید.
4. در کادر متنی که باز می‌شود، کد CSS خود را وارد کنید.
برای مثال کد CSS زیر باعث می‌شود رنگ متن المان انتخاب شده به قرمز و اندازه فونت آن به 20 پیکسل تغییر کند.
CSS
selector {
color: red;
font-size: 20px;
}
آموزش افزودن CSS سفارشی به صفحات در المنتور
برای اضافه کردن CSS سفارشی به کل صفحه، مراحل زیر را دنبال کنید.
- به پنل تنظیمات صفحه یا Site Setting بروید.
2. روی تب پیشرفته تنظیمات نوشته کلیک کنید.
3. در بخش CSS سفارشی، کد CSS خود را وارد کنید.
CSS
body {
font-family: ‘Arial’, sans-serif;
}
در این مثال، کد CSS باعث می‌شود فونت کل صفحه به Arial تغییر کند.
نکات مهم برای افزودن کد CSS سفارشی به المنتور
- از کامنت برای توضیح کدهای خود استفاده کنید تا در آینده به راحتی قابل فهم باشد.
- قبل از اعمال تغییرات، از سایت خود نسخه پشتیبان تهیه کنید.
با استفاده از این آموزش، می‌توانید به راحتی CSS سفارشی خود را به صفحات و المان‌های مختلف در المنتور اضافه کنید و ظاهر سایت خود را بهبود بخشید. اگر سوالی در این رابطه داشتید لطفا در بخش دیدگاه‌ها بپرسید.
