اضافه کردن CSS سفارشی در المنتور

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

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

1. روی دکمه ویرایش بخش مورد نظر راست کلیک کرده و گزینه ویرایش بخش – Edit section را انتخاب کنید.
2. بروید به تب پیشرفته – Advanced  سپس CSS سفارشی – Custom CSS
3. کد CSS خود را به قسمت ویرایشگر اضافه کنید.

نکته 1: برای ویرایش کردن ستون پس از راست کلیک کردن روی دکمه ویرایش ستون، گزینه ویرایش ستون را انتخاب نمایید و برای ویرایش ابزارک هم به همین صورت روی گزینه ویرایش ابزارک کلیک نمایید.

نکته 2: لطفا توجه داشته باشید که برای اعمال تغییرات روی عناصر قبل از تگ ها و کلاس ها حتماً از واژه `selector` استفاده کنید به عنوان مثال :

selector a { color: red}

نحوه به کارگیری سلکتور در تب CSS سفارشی

برای قرار دادن متن یا تصویر خود در یک چهارچوب می‌توانید از سلکتور – Selector استفاده کنید.

به عنوان مثال، اگر تصویری یا هر child element دیگری را در یک ستون قرار داده باشید، ممکن است بخواهید تغییراتی را در اطراف عکس و یا بر روی خود آن اعمال کنید.
در اینجا چهارچوب قرمزرنگی به اندازه 5px را بر المنت‌های مختلف اعمال می کنیم تا ببینیم چه اتفاقی می افتد.
ابتدا ویجت تصویر را در یک ستون قرار دهید و  مراحل زیر را دنبال کنید:
تصویر – Image  > پیشرفته – Advanced سپس> Custom CSS
حالا در بخش CSS سفارشی در المنتور، کد زیر را وارد کنید:

selector { border: 5px solid red; }

با توجه به این که ویجت تصویر را ویرایش کردهاید، ممکن است اصلاً متوجه نشوید که چهارچوب موردنظر شما دور تصویر قرار نمی‌گیرد. در عوض، چهارچوب دور Wrapper Element قرار گرفته است که در مثال ما شامل ستونی می‌شود که تصویر را درون آن قرار داده اید.

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

selector img { border: 5px solid red; }

این عمل موجب می‌شود چهارچوبی که تعریف کرده اید دور تصویر قرار بگیرد زیرا شما آن را به گونه ای تعیین کرده اید که روی “selector img” تأثیر بگذارد.

در ادامه مثال دیگری می آوریم

ویجت دکمه – Button را درون یک ستون اعمال کنید. فضایی 10px برای آن تعریف کنید تا بتوانید ستون دورش را به خوبی ببینید. برای انجام این کار به قسمت پیشرفته – Advanced بروید و پدینگ – Padding را برای هر چهار طرف روی عدد ده تنظیم کنید.

دکمه – Button تنظیم شده باید چیزی شبیه به شکل زیر باشد:

برای تنظیم CSS سفارشی در المنتور، ابتدا رنگ پس زمینه را تغییر دهید.

برای انجام این کار متن زیر را وارد کنید:

selector { background-color: #ffff00; }

مانند نمونه قبلی، این تغییرات باید دور قسمت دکمه – Button اعمال شود. در این قسمت متوجه این امر خواهید شد که پدینگ – Padding که بر روی 10px تنظیم شده بود، مانع اعمال تغییرات بالا بر روی کل ستون می‌شود.

اگر قصد دارید رنگ پس زمینه را به جای دور دکمه – Button، بر روی خود آن اعمال کنید، کد زیر را در قسمت مربوطه وارد کنید:

selector .elementor-button { background-color: #ffff00; }

نتیجه کار را می‌توانید در ادامه ببینید:

برای راحتی کار، از سلکتور به عنوان میانبری برای المنتور استفاده کنید تا با سرعت بیشتری CSS سفارشی را تغییر دهید. در ادامه رنگ پس‌ زمینه دکمه – Button را حذف کنید و به جای آن CSS سفارشی خود را قرار دهید. نام CSS مدنظر ما “so-yellow” است. برای اطمینان به قسمت Advanced > CSS Classes بروید و در صورت وجود نقطه در قبل از عبارت، آن را حذف کنید.

حالا در بخش Custom CSS، به جای استفاده از “selector” از CSS سفارشی “.so-yellow” استفاده کرده‌ایم. توجه داشته باشید در این قسمت نقطه قبل از عبارت، نوشته شده باشد.

همان طور که می‌بینید دور دکمه – Button زرد روشن شده است.

اگر هدف شما این است که تغییرات را با محور قرار دادن button ایجاد کنید، به موارد زیر توجه کنید:
کد زیر را وارد کنید:

.so-yellow .elementor-button { background-color: #ffff00; }

متوجه خواهید شد که رنگ بنفش دکمه – Button تغییر نخواهد کرد.

علت این عدم‌تغییر این است که نکته ای را در متن وارد شده ای که در بالا آورده ایم، اعمال نکردیم.

.so-yellow .elementor-button { background-color: #ffff00 !important; }

اکنون تغییرات اعمال می‌شود و Button زرد رنگ خواهد شد.

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

selector .elementor-button { background-color: #ffff00; color: #000000; border: 2px solid #000000; }

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