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

در حال وبگردی حتما به افکت های خاصی در سایت ها برخوردید و با خودتان گفته اید آیا با المنتور میشه این رو انجام داد؟! css سفارشی در المنتور همان راه حلی است که به طراحان سایت کمک می کند؛ هر ایده ای که با کمک ابزارهای بصری المنتور قابل انجام نیستند را پیاده سازی کنند.

راهنمای جامع افزودن CSS سفارشی در المنتور برای طراحی حرفه‌ای

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

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

ویرایشگر المنتور اجازه می دهد که CSS سفارشی را در سه سطح مختلف اضافه کنید:

• سطح سایت: افزودن CSS سفارشی که بر کل سایت شما اعمال می شود.
• سطح صفحه: افزودن CSS سفارشی در اینجا فقط بر یک صفحه خاص تأثیر می گذارد.
• سطح عنصر: افزودن CSS سفارشی که تنها بر یک عنصر خاص تأثیر می گذارد.

بنابراین می توانید custom css را به عنصر(ویجت ها یا کانتینرها)، صفحه یا کل سایت اعمال کنید.

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

نکته: جهت استفاده از بخش custom css در ویرایشگر المنتور، باید افزونه المنتور پرو را علاوه بر نسخه رایگان المنتور نصب کنید.

بعد از اضافه کردن ویجت مورد نظر به ویرایشگر المنتور، آن را انتخاب کرده و از تب پیشرفته یا advanced وارد بخش css سفارشی شوید.

در این بخش می توانید کدهای css دلخواه برای استایل دهی به ویجت انتخاب شده وارد کنید:

نکته: در خصوص کانتینرها هم با همین روش (مراجعه به تب پیشرفته و بخش css سفارشی) می توانید استایل دهی کنید.

اضافه کردن استایل سفارشی به برگه ها

برای افزودن custom css در سطح برگه ها در المنتور، روی علامت چرخ دنده یا تنظیمات صفحه کلیک کنید و در تب پیشرفته و بخش css سفارشی کدهای خود را وارد کنید.

اضافه کردن استایل سفارشی به سایت

برای افزودن استایل سفارشی با کد css در سطح سایت، وارد بخش تنظیمات سایت در ویرایشگر المنتور شوید.

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

• Selector عبارتی است که فقط در هنگام افزودن کد css در بخش custom css المنتور استفاده می شود و به معنی المانی است که کد روی آن اعمال می شود.
• کلاس ها و شناسه ها مواردی هستند که برای هدف قرار دادن المان های سایت در کدنویسی css به آن ها نیاز دارید. برای اختصاص دادن کلاس (class) و شناسه (ID) به المان ها در المنتور باید وارد تب پیشرفته یا advanced شوید.

نکته : بعد از اختصاص دادن کلاس و شناسه در این قسمت، در بخش css سفارشی قبل از نام شناسه از علامت # و قبل از نام کلاس از . استفاده کنید.

• همیشه بعد از اضافه کردن css کش مرورگر (آموزش پاک کردن کش در مرورگرهای مختلف را مطالعه کنید) و کش افزونه ها (افزونه Rocketو…) را پاک کنید تا تغییرات مشاهده شوند.

چگونه با CSS سفارشی در المنتور طراحی سایت خود را به سطح بعدی ببریم؟

اگر پیش از این تصور می کردید که باید خلاقیت خود در طراحی سایت را به امکانات از پیش تعریف شده المنتور محدود کنید؛ باید بگوییم که اشتباه فکر می کنید! با کمک css سفارشی می توانید افکت هایی فراتر از امکانات المنتور در سایت خود ایجاد کنید.

نکته: اگر قابلیتی در خود ویرایشگر المنتور وجود دارد؛ نباید از custom css استفاده شود؛ سعی کنید تاحد امکان css را برای مواردی بکار ببرید که واقعا امکان پیاده سازی آن با ویرایشگر بصری المنتور وجود ندارد.

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

استفاده از افکت انیمیشن و موشن ظاهر سایت شما را به شدت جذاب و حرفه ای می کند و باعث میشود که کاربران تعامل بیشتری با سایت شما داشته باشند.

با کمک بخش css سفارشی در المنتور می توانید افکت های جذاب و خلاقانه ایجاد کنید در ادامه موردی را برای نمونه میبینید.

• افکت تایپ شدن متن (Typing Effect) که برای عناوین یا متن های کوتاه خیلی جذاب میشه

کلاس typing را به ویجت سربرگ یا ویرایشگر متن اختصاص بدید و کد زیر را در بخش custom css قرار دهید.

.typing {
width: 0;overflow: hidden;
white-space: nowrap;
border-right: 2px solid #000;
animation: typing 3s steps(20, end) forwards;}
@keyframes typing {
from { width: 0; }
to { width: 100%; }
}

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

کدهای css که خودتان به المنتور اضافه می کنید قطعا به بهبود طراحی شما کمک می کند اما بدون رعایت اصول و نکات بهینه سازی می توانید باعث کاهش عملکرد و تجربه کاربری بد منجر شود.

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

به جای این کد

#elementor-id-123:hover { Color:red;}
#elementor-id-456:hover{Color:red;}

از این کد استفاده کنید

.my-button:hover { Color:red;}

• بهینه سازی برای موبایل و ریسپانسیو کدها را فراموش نکنید
• اگر تعداد کدهای سفارشی زیاد است؛ اون‌ها رو به یک فایل `css` در قالب فرزند (Child Theme) منتقل کنید.
• از !important در انتهای کدها فقط در صورت لزوم استفاده کنید چون بیش از حد باعث تداخل کدها خواهدشد.

چگونه با CSS سفارشی در المنتور طراحی ریسپانسیو بهتری داشته باشیم؟

همیشه باید کدهای css سفارشی شما در دستگاه های مختلف مخصوصا موبایل به همان جذابیت حالت دسکتاپ نمایش داده شوند اما چطور باید کدهای css را ریسپانسیو کنیم؟ برای اینکار باید از مدیا کوئری media query استفاده شود.

بلوک های کد داخل @media فقط زمانی اجرا می شوند که شرط مقابل آن درست باشد و ما در این شرط اندازه عرض صفحات را قرار میدهیم. مثلا کد زیراندازه نوشته  برای عرض صفحه 0 تا 600 پیکسل که میشه حداکثر 600 پیکسل div با کلاس test را 20 پیکسل نمایش می دهد.

@media only screen and (max-width: 600px) {
div.test {
font-size: 20px;
}
}

استفاده از CSS سفارشی در المنتور: اشتباهات رایج و راه‌حل‌های آن‌ها​

• اشتباهات مربوط به syntax یا نوشتار کدها : اشتباهات syntax با یک نگاه شناسایی می شوند و رفع آن ها ساده است چون در همان بخش css سفارشی پیغام خطا دیده می شود. ابتدا و انتهای هر بلوک کد css را با {} مشخص کنید و در انتهای هر خط کد ; قرار دهید.
• هدف قرار ندادن درست المان: با کمک کلاس ها و شناسه ها به درستی المان های که هدف استایل شما هستند را مشخص کنید.
• Css سفارشی اعمال نمی شود: اگر از درست بودن کد اطمینان دارید اما تغییرات قابل مشاهده نیستند؛ کش مرورگر و کش سایت را از طریق افزونه کش پاک کنید.