افزودن css اضافی در المنتور






یادگیری گام به گام نوشتن کدهای CSS در تب پیشرفته المان‌ها

📌 مقدمه

در المنتور، هر المان (ویجت) یک تب به نام پیشرفته (Advanced) دارد. در این تب، بخشی به نام CSS اضافی (Custom CSS) وجود دارد که می‌توانید کدهای CSS سفارشی خود را برای تغییر ظاهر آن المان خاص بنویسید.

💡 نکته مهم: کدهای نوشته شده در این بخش فقط روی همان المان خاص اعمال می‌شوند و روی سایر المان‌های صفحه تأثیری ندارند.

🔧 نحوه نوشتن CSS اضافی

مراحل کار:

  1. المان مورد نظر خود را در صفحه المنتور انتخاب کنید.
  2. به تب پیشرفته (Advanced) بروید.
  3. بخش CSS اضافی (Custom CSS) را پیدا کنید.
  4. کدهای CSS خود را در کادر مربوطه بنویسید.
  5. توجه داشته باشید که نیازی به نوشتن selector نیست، زیرا المنتور به طور خودکار یک کلاس یکتا به المان شما اختصاص می‌دهد. اما اگر می‌خواهید روی فرزندان المان تأثیر بگذارید، باید از selectorهای مناسب استفاده کنید.
🎯 ساختار کدنویسی: برای اعمال استایل روی خود المان اصلی، کافیست کدهای CSS را بدون selector بنویسید. برای استایل دهی به فرزندان، باید selector مناسب را مشخص کنید.

✅ مثالی از ساختار صحیح:

/* استایل روی خود المان */
background-color: #f0f0f0;
padding: 20px;
border-radius: 10px;

/* استایل روی فرزند المان */
.elementor-widget-container h3 {
    color: #333;
    font-size: 24px;
}
خود المان: استایل‌هایی که به کل باکس/ویجت اعمال میشه (پس‌زمینه، حاشیه، سایه، فاصله)

فرزند المان: استایل‌هایی که به تگ‌های داخل اون باکس اعمال میشه (عنوان، متن، دکمه، تصویر)

📝 مثال اول: تغییر رنگ دکمه در حالت هاور

فرض کنید می‌خواهید رنگ دکمه‌ای را در حالت هاور (Hover) به رنگ طلایی تغییر دهید.

مثال ۱ – کد CSS اضافی

/* تغییر رنگ دکمه در حالت هاور */
.elementor-button {
    transition: all 0.3s ease;
}

.elementor-button:hover {
    background-color: #ffd700 !important;
    color: #000 !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3);
}
📝 توضیح: المنتور به دکمه‌ها کلاس .elementor-button می‌دهد. با این کد، در حالت هاور دکمه طلایی شده، کمی بالا می‌آید و سایه پیدا می‌کند.

📝 مثال دوم: افزایش فاصله بین آیتم‌های منو

می‌خواهیم فاصله بین آیتم‌های یک منوی افقی را بیشتر کنیم.
مثال ۲ – کد CSS اضافی

/* افزایش فاصله بین آیتم‌های منو */
.elementor-nav-menu--main .elementor-nav-menu li {
    margin-left: 25px !important;
}

/* برای آخرین آیتم، حاشیه سمت چپ را حذف می‌کنیم */
.elementor-nav-menu--main .elementor-nav-menu li:last-child {
    margin-left: 0 !important;
}
📝 توضیح: با استفاده از این کد، فاصله بین آیتم‌های منو ۲۵ پیکسل می‌شود. توجه کنید که المنتور به منوها کلاس‌های خاصی می‌دهد که ما از آنها استفاده کرده‌ایم.

🔍 مثال سوم: کاهش ارتفاع باکس جستجو (Search Box)

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

مثال ۳ – کد کاهش ارتفاع باکس جستجو

/* کاهش ارتفاع کل کانتینر جستجو */
.elementor-search-form__container {
    min-height: 40px !important;
    height: 40px !important;
}

/* کاهش ارتفاع فیلد ورودی */
.elementor-search-form__input {
    height: 40px !important;
    line-height: 40px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* کاهش ارتفاع دکمه جستجو */
.elementor-search-form__submit {
    height: 40px !important;
    line-height: 40px !important;
    width: 40px !important; /* اگر دکمه مربعی است */
}

نسخه جایگزین (کاهش بیشتر)

/* اگر ارتفاع ۴۰px هم زیاد است، می‌توانید به ۳۵px کاهش دهید */
.elementor-search-form__container {
    min-height: 35px !important;
    height: 35px !important;
}

.elementor-search-form__input {
    height: 35px !important;
    line-height: 35px !important;
}

.elementor-search-form__submit {
    height: 35px !important;
    line-height: 35px !important;
    width: 35px !important;
}
📝 توضیحات کامل:

  • .elementor-search-form__container – کانتینر اصلی باکس جستجو است.
  • .elementor-search-form__input – فیلد ورودی متن جستجو است.
  • .elementor-search-form__submit – دکمه ارسال جستجو است.
  • با تغییر height و min-height، ارتفاع هر بخش را تنظیم می‌کنیم.
  • از !important استفاده کردیم تا اطمینان حاصل کنیم که کد ما بر استایل‌های پیش‌فرض غلبه می‌کند.
  • اگر دکمه جستجوی شما به صورت آیکون است، ممکن است width هم نیاز به تنظیم داشته باشد.

⚡ تست کنید: این کدها را در بخش CSS اضافی ویجت جستجو قرار دهید. اگر تغییری مشاهده نکردید، مقدار height را بیشتر یا کمتر کنید تا به نتیجه دلخواه برسید.

✨ نکات پایانی

🔍 یافتن کلاس‌ها

با راست‌کلیک روی المان و انتخاب Inspect (بررسی عنصر) می‌توانید کلاس‌های المنتور را پیدا کنید.

⚡ استفاده از !important

وقتی کد شما کار نمی‌کند، از !important استفاده کنید تا بر اولویت‌های دیگر غلبه کند.

📱 ریسپانسیو

برای دستگاه‌های مختلف، می‌توانید در تب پیشرفته، حالت Responsive را تغییر دهید و کدهای مخصوص آن دستگاه را بنویسید.

✨ موفق باشید! ✨



جدید






ساختار صحیح، اصول کدنویسی و ۳ مثال

در المنتور، شما در بخش “CSS اضافی” مستقیماً کدهای CSS را می‌نویسید. المنتور به‌طور خودکار این کدها را به یک کلاس یکتا که به المان شما اختصاص داده شده متصل می‌کند.

✅ این روش مثل این می‌مونه که: توی فایل استایل، برای اون المان خاص کد می‌نویسید.

ساختار اصلی – style.css
/* ===== ساختار صحیح نوشتن در CSS اضافی المنتور ===== */

/* ۱️⃣ استایل مستقیم روی خود المان (بدون سلکتور) */
background-color: #f0f0f0;
padding: 20px;
margin: 10px 0;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);

/* ۲️⃣ استایل برای فرزندان المان */
.elementor-widget-container h3 {
color: #2563eb;
font-size: 28px;
margin-bottom: 15px;
}

/* ۳️⃣ استایل برای حالت‌های مختلف (hover, focus, active) */
&:hover {
background-color: #2563eb;
transform: translateY(-2px);
transition: all 0.3s ease;
}

/* ۴️⃣ استایل برای کلاس‌های داخل المان */
.button {
background: linear-gradient(135deg, #2563eb, #7c3aed);
color: white;
border: none;
padding: 12px 24px;
}

/* ۵️⃣ استفاده از !important وقتی کد اجرا نمی‌شه */
.elementor-button {
background-color: #2563eb !important;
}

🔰آموزش گام به گام ساختار نوشتن کد در المنتور

روش هایی که تاکنون یاد گرفتی، سه روش بود.

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

  • مثل اینترنال، داخل صفحه نوشته می‌شه (همون تب پیشرفته)
  • مثل اکسترنال، برای سلکتورهای مشخص کد می‌نویسی
  • اصلاً شبیه اینلاین نیست چون داخل تگ نوشته نمی‌شه

❌ روش اینلاین

<div style=”color:red;”>

❌ در المنتور استفاده نمی‌شه

✅ روش اینترنال

<style>
.my-class { }
</style>

✅ شبیه اینه، اما نیازی به تگ style نیست

✅ روش اکسترنال

/* style.css */
.class { }

✅ شبیه اینه، اما مختص همون المانه




مثال عملی – نحوه نوشتن
/* اینجا مستقیم می‌نویسی، نیازی به selector نیست */

background: linear-gradient(145deg, #2563eb, #7c3aed);
padding: 20px 30px;
border-radius: 50px;
text-align: center;

/* اینجا برای بچه‌های المان کد می‌نویسی */

h2 {
color: white;
font-size: 32px;
margin-bottom: 10px;
}

/* اینجا برای هاور */

&:hover {
transform: scale(1.05);
box-shadow: 0 20px 30px -10px #2563eb;
}

🎯 مثال ۱: دکمه با افکت‌های پیشرفته




کد دکمه – Custom CSS
/* استایل پایه دکمه */

background: linear-gradient(45deg, #f43f5e, #e11d48);
color: white;
padding: 15px 35px;
border-radius: 50px;
font-size: 20px;
font-weight: bold;
border: none;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 10px 20px -5px rgba(225, 29, 72, 0.5);

/* حالت هاور */
&:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 20px 30px -5px #e11d48;
background: linear-gradient(45deg, #e11d48, #be123c);
}

/* حالت کلیک */
&:active {
transform: translateY(0) scale(0.95);
}

💡 توضیح:

این کد یه دکمه قشنگ با انیمیشن حرفه‌ای می‌سازه. دقت کن که از &:hover استفاده کردیم برای حالت هاور.

🃏 مثال ۲: کارت محصول با افکت شیشه‌ای




کد کارت شیشه‌ای – Custom CSS
/* پس‌زمینه شیشه‌ای */
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 24px;
padding: 30px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);

/* استایل عنوان کارت */
h3 {
color: white;
font-size: 28px;
margin-bottom: 15px;
text-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* استایل قیمت */
.price {
color: #fbbf24;
font-size: 32px;
font-weight: bold;
display: block;
margin: 15px 0;
}

/* استایل دکمه داخل کارت */
.elementor-button {
background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
border: none !important;
width: 100% !important;
}

💡 توضیح:

اینجا از backdrop-filter برای افکت شیشه‌ای استفاده کردیم. به !important دقت کن که برای دکمه استفاده شده تا استایل‌های پیش‌فرض رو دور بزنه.

🔍 مثال ۳: کاهش ارتفاع باکس جستجو




کد باکس جستجو – Custom CSS
/* ===== کاهش ارتفاع باکس جستجوی المنتور ===== */

/* ۱. کاهش ارتفاع کانتینر اصلی */
.elementor-search-form__container {
height: 45px !important;
min-height: 45px !important;
border-radius: 8px !important;
}

/* ۲. تنظیم فیلد ورودی */
.elementor-search-form__input {
height: 45px !important;
line-height: 45px !important;
padding: 0 15px !important;
font-size: 16px !important;
}

/* ۳. تنظیم دکمه جستجو */
.elementor-search-form__submit {
height: 45px !important;
width: 45px !important;
line-height: 45px !important;
font-size: 18px !important;
}

/* ۴. اگر باز هم ارتفاع زیاد بود (نسخه فشرده) */
/* این نسخه رو اگر خواستی ارتفاع کمتر بشه استفاده کن */
/*
.elementor-search-form__container,
.elementor-search-form__input,
.elementor-search-form__submit {
height: 38px !important;
min-height: 38px !important;
line-height: 38px !important;
}

.elementor-search-form__submit {
width: 38px !important;
}
*/

📌 کلاس‌های مهم

.elementor-search-form__container – کانتینر اصلی
.elementor-search-form__input – فیلد ورودی
.elementor-search-form__submit – دکمه جستجو

🎯 مقادیر پیشنهادی

۳۵px – خیلی فشرده
۴۰px – متوسط
۴۵px – معمولی
۵۰px – استاندارد

⚠️ نکته مهم

اگه کد کار نکرد، از !important استفاده کن. المنتور گاهی استایل‌های پیش‌فرض رو اولویت می‌ده.

✅ آموزش گام به گام این مثال:

۱. ویجت جستجو رو به صفحه اضافه کن
۲. روی اون کلیک کن و برو به تب Advanced
۳. توی بخش Custom CSS، کد بالا رو کپی کن
۴. مقدار ۴۵ رو به هر عددی که می‌خوای تغییر بده (۳۵، ۴۰، ۵۰)
۵. آپدیت کن و نتیجه رو ببین

💎 نکات طلایی

🔍 پیدا کردن کلاس‌ها

روی المان راست کلیک کن و Inspect رو بزن. توی ابزار توسعه‌دهنده، کلاس‌هایی که با elementor- شروع می‌شن رو ببین.

⚡ !important کی استفاده کنیم؟

وقتی کدت کار نمی‌کنه، اول بدون !important امتحان کن. اگه نشد، با !important غلبه کن.

📱 ریسپانسیو

توی تب Advanced، می‌تونی برای موبایل، تبلت و دسکتاپ جداگانه کد بنویسی.




خلاصه – تذکار سریع
/* خود المان */
خاصیت: مقدار;

/* بچه‌های المان */
selector {
خاصیت: مقدار;
}

/* حالت‌های المان */
&:hover,
&:focus,
&:active {
خاصیت: مقدار;
}

/* برای غلبه بر استایل‌ها */
خاصیت: مقدار !important;


جدید






ساختار صحیح + ۳ مثال کاربردی

📌 ساختار CSS اضافی در المنتور

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

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

  • مثل اینترنال: داخل همون صفحه (تب پیشرفته) نوشته میشه
  • مثل اکسترنال: برای سلکتورهای مشخص کد می‌نویسی
  • مهم: نیازی به نوشتن selector برای خود المان نیست




structure.css
/* ===== ساختار صحیح ===== */

// ۱️⃣ استایل برای خود المان (بدون سلکتور)
background: #0d1117;
padding: 20px;
border-radius: 12px;
margin: 10px 0;

// ۲️⃣ استایل برای تگ‌های داخل المان
h2 {
color: #ff7b72;
font-size: 24px;
}

// ۳️⃣ استایل برای کلاس‌های داخل المان
.elementor-button {
background: #238636;
border: none;
}

// ۴️⃣ استایل برای حالت هاور
&:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

❌ روش اشتباه

.my-element {
color: red;
}

این رو ننویس! المنتور خودش selector می‌سازه

✅ روش درست

color: red;
background: blue;

مستقیم خاصیت و مقدار رو بنویس

⚠️ نکته مهم

اگه کد کار نکرد، آخرش !important بذار

🎯 مثال ۱: دکمه با افکت مدرن




button-custom.css
/* کپی کن توی CSS اضافی دکمه */

// استایل پایه
background: linear-gradient(135deg, #238636, #2ea043);
color: white;
padding: 12px 28px;
border-radius: 50px;
font-size: 18px;
font-weight: bold;
border: none;
transition: all 0.3s ease;

// حالت هاور
&:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(35,134,54,0.4);
background: linear-gradient(135deg, #2ea043, #238636);
}

// حالت کلیک
&:active {
transform: translateY(0);
}

📝 نحوه استفاده:

۱. روی دکمه مورد نظر کلیک کن
۲. برو به تب Advanced
۳. توی بخش Custom CSS، کد بالا رو کپی کن
۴. دکمه Update رو بزن

🃏 مثال ۲: کارت محصول با افکت شیشه‌ای




glass-card.css
/* کپی کن توی CSS اضافی کارت */

// پس‌زمینه شیشه‌ای
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 24px;
padding: 30px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);

// استایل عنوان
h3, .elementor-heading-title {
color: white !important;
font-size: 26px !important;
text-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

// استایل متن
p {
color: rgba(255,255,255,0.8);
line-height: 1.6;
}

🔍 مثال ۳: کاهش ارتفاع باکس جستجو

توجه مهم: این کدها تست شدن

اگر قبلی‌ها کار نکردن، این بار حتماً این کد رو کپی کن:




search-box-simple.css
/* ===== کد کاهش ارتفاع باکس جستجو ===== */
/* این کد رو دقیقاً کپی کن توی CSS اضافی */

// کاهش ارتفاع کل باکس
.elementor-search-form {
height: 45px !important;
min-height: 45px !important;
}

// کاهش ارتفاع کانتینر
.elementor-search-form__container {
height: 45px !important;
min-height: 45px !important;
border-radius: 8px !important;
}

// تنظیم فیلد ورودی
.elementor-search-form__input {
height: 45px !important;
min-height: 45px !important;
line-height: 45px !important;
padding: 0 15px !important;
}

// تنظیم دکمه جستجو
.elementor-search-form__submit {
height: 45px !important;
width: 45px !important;
line-height: 45px !important;
}




search-box-custom.css (قابل تنظیم)
/* ===== نسخه با ارتفاع دلخواه ===== */
/* عدد ۴۰ رو به هر مقداری که می‌خوای تغییر بده */

.elementor-search-form,
.elementor-search-form__container,
.elementor-search-form__input,
.elementor-search-form__submit {
height: 40px !important;
min-height: 40px !important;
}

.elementor-search-form__input {
line-height: 40px !important;
}

.elementor-search-form__submit {
width: 40px !important;
line-height: 40px !important;
}

/* مقادیر پیشنهادی:
۳۵px – خیلی کوچک
۴۰px – کوچک
۴۵px – متوسط
۵۰px – معمولی
*/




search-box-compact.css (فشرده)
/* ===== نسخه فشرده (۳۵ پیکسل) ===== */

.elementor-search-form {
height: 35px !important;
min-height: 35px !important;
}

.elementor-search-form__container {
height: 35px !important;
min-height: 35px !important;
}

.elementor-search-form__input {
height: 35px !important;
line-height: 35px !important;
padding: 0 12px !important;
font-size: 14px !important;
}

.elementor-search-form__submit {
height: 35px !important;
width: 35px !important;
line-height: 35px !important;
font-size: 16px !important;
}

📌 نکته ۱

از !important استفاده کردم که حتماً استایل‌های پیش‌فرض رو دور بزنه

📌 نکته ۲

اگه بازم کار نکرد، ویجت جستجو رو حذف کن و دوباره بذار

📌 نکته ۳

کد رو دقیقاً توی همون ویجت جستجو کپی کن نه جای دیگه

✅ راهنمای گام به گام:

۱. توی صفحه المنتور، روی باکس جستجو کلیک کن
۲. از منوی سمت چپ، تب Advanced رو انتخاب کن
۳. برو به پایین تا برسی به “Custom CSS” یا “CSS اضافی”
۴. کد اول رو کپی کن (همونی که با !important هست)
۵. بذار توی کادر و دکمه Update رو بزن
۶. صفحه رو ریفرش کن و نتیجه رو ببین

💡 نکات طلایی

🔍 پیدا کردن کلاس‌ها

روی المان راست کلیک کن و Inspect رو بزن. کلاس‌هایی که با “elementor-” شروع میشن رو ببین

⚡ !important

وقتی کدت کار نمی‌کنه، حتماً از !important استفاده کن. المنتور استایل‌های پیش‌فرض قوی داره

🔄 کش مرورگر

بعد از اضافه کردن کد، Ctrl+F5 بزن تا کش مرورگر پاک بشه




خلاصه سریع
/* ===== ساختار خلاصه ===== */

// برای خود المان
خاصیت: مقدار;

// برای بچه‌ها
.کلاس-یا-تگ {
خاصیت: مقدار;
}

// برای هاور
&:hover {
خاصیت: مقدار;
}

// وقتی کار نمی‌کنه
خاصیت: مقدار !important;

کدهای نهایی کاهش ارتفاع باکس جستجو اگر بقیه کدها کار نکرد:
/* ===== کد کاهش ارتفاع باکس جستجو – نسخه نهایی ===== */

/* پوشش کل کانتینر جستجو */
.elementor-search-form {
height: 40px !important;
min-height: 40px !important;
max-height: 40px !important;
overflow: hidden !important;
}

/* پوشش کانتینر داخلی */
.elementor-search-form__container {
height: 40px !important;
min-height: 40px !important;
max-height: 40px !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 8px !important;
}

/* فیلد ورودی */
.elementor-search-form__input {
height: 40px !important;
min-height: 40px !important;
max-height: 40px !important;
line-height: 40px !important;
padding: 0 15px !important;
margin: 0 !important;
}

/* دکمه جستجو */
.elementor-search-form__submit {
height: 40px !important;
min-height: 40px !important;
max-height: 40px !important;
width: 40px !important;
line-height: 40px !important;
padding: 0 !important;
margin: 0 !important;
}


جدید






ساختار صحیح + ۳ مثال

📌 ساختار CSS اضافی در المنتور

❓ کدوم روش CSS استفاده میشه؟

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

  • مثل اینترنال: داخل همون صفحه (تب پیشرفته) نوشته میشه
  • مثل اکسترنال: برای سلکتورهای مشخص کد می‌نویسی
  • مهم: نیازی به نوشتن selector برای خود المان نیست




ساختار صحیح – custom.css
/* ===== ساختار صحیح ===== */

// ۱️⃣ استایل برای خود المان (بدون سلکتور)
background: #0d1117;
padding: 20px;
border-radius: 12px;

// ۲️⃣ استایل برای تگ‌های داخل المان
h2 {
color: #ff7b72;
font-size: 24px;
}

// ۳️⃣ استایل برای کلاس‌های داخل المان
.elementor-button {
background: #238636;
}

// ۴️⃣ استایل برای حالت هاور
&:hover {
transform: translateY(-2px);
}

❌ روش اشتباه

.my-element {
color: red;
}

این رو ننویس! المنتور خودش selector می‌سازه

✅ روش درست

color: red;
background: blue;

مستقیم خاصیت و مقدار رو بنویس

⚠️ نکته مهم

اگه کد کار نکرد، آخرش !important بذار

🎯 مثال ۱: دکمه با افکت مدرن




button-custom.css
/* کپی کن توی CSS اضافی دکمه */

// استایل پایه
background: linear-gradient(135deg, #238636, #2ea043);
color: white;
padding: 12px 28px;
border-radius: 50px;
font-size: 18px;
font-weight: bold;
border: none;
transition: all 0.3s ease;

// حالت هاور
&:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(35,134,54,0.4);
}

// حالت کلیک
&:active {
transform: translateY(0);
}

📝 نحوه استفاده:

۱ روی دکمه مورد نظر کلیک کن

۲ برو به تب Advanced

۳ توی بخش Custom CSS، کد بالا رو کپی کن

۴ دکمه Update رو بزن

📌 نکته ۲

اگه بازم کار نکرد، ویجت جستجو رو حذف کن و دوباره بذار

📌 نکته ۳

کد رو دقیقاً توی همون ویجت جستجو کپی کن نه جای دیگه

✅ راهنمای گام به گام:

💡 نکات طلایی

🔍 پیدا کردن کلاس‌ها

روی المان راست کلیک کن و Inspect رو بزن. کلاس‌هایی که با “elementor-” شروع میشن رو ببین

⚡ !important

وقتی کدت کار نمی‌کنه، حتماً از !important استفاده کن. المنتور استایل‌های پیش‌فرض قوی داره

🔄 کش مرورگر

بعد از اضافه کردن کد، Ctrl+F5 بزن تا کش مرورگر پاک بشه




خلاصه سریع – تذکار
/* ===== ساختار خلاصه ===== */

// برای خود المان
خاصیت: مقدار;

// برای بچه‌ها
.کلاس-یا-تگ {
خاصیت: مقدار;
}

// برای هاور
&:hover {
خاصیت: مقدار;
}

// وقتی کار نمی‌کنه
خاصیت: مقدار !important;


دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *