سلام رفیق رایا وردپرسی👋😉

اگه داری این مقاله رو می‌خونی، پس احتمالاً دلت می‌خواد داخل وب‌سایتت یه حرکت خفن دیگه اجرا کنی. پس ادامه این مقالـــه رو بخون 🙂

تا حالا شده وارد سایتی بشی و ببینی وقتی ماوس رو روی یک باکس محتوایی بزرگ (والد) می‌بری، بدون اینکه حتی روی دکمه یا لینک کوچکی (فرزند) که داخلشه دست بزنی، ناگهان اون دکمه شروع به درخشش یا تغییر رنگ کنه؟ این نه جادوست و نه کار سخت! بلکه استفاده هوشمندانه از یکی از قدرتمندترین قابلیت‌های CSS است: ترکیب‌کننده‌های CSS (CSS Combinators)، به ویژه ترکیب‌کننده فرزند (Child Combinator) و فرزند مستقیم (Descendant Combinator) در کنار شبه‌کلاس :hover.

این تکنیک نه تنها ظاهر سایتت رو حرفه‌ای‌تر میکنه، بلکه نرخ کلیک (CTR) روی دکمه‌های مهمت رو به طرز شگفت‌آوری افزایش میده. در این مقاله جامع، یاد میگیری چطور با کمک المنتور پرو (Elementor Pro) و کمی کد CSS سفارشی، این قابلیت جذاب رو به راحتی آب خوردن پیاده‌سازی کنی.

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

آماده‌ای برای آموزش امروز؟ بزن بریم!

برای اینکه بتونی این آموزش رو مثل من قدم به قدم اجرا کنی، بایدافزونه المنتور پرو (Elementor Pro) روی سایتت نصب باشه. من برای این آموزش از ویجت های سربرگ، ویرایشگر متن و دکمه استفاده می‌کنم.

نحوه استایل دهی به فرزند هنگام هاور روی والد

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

1. ساختاردهی و آماده‌سازی المان‌ها در المنتور

وارد ویرایشگر المنتور شو و طبق مراحل زیر پیش برو:

الف) ساخت باکس محتوایی:

• در وسط صفحه یا هرجایی که می‌خواهی باکس قرار بگیره، روی نماد + کلیک کن.
• یک کانتینر (Container) جدید به صفحه اضافه کن.
• تنظیمات این کانتینر بیرونی را روی چینش عمودی (Direction: Column) قرار بده تا المان‌های داخلی زیر هم قرار بگیرند.
• حالا داخل کانتینر قبلی، یک کانتینر داخلی جدید اضافه کن. این کانتینر داخلی، نقش والد (Parent) اصلی ما رو بازی می‌کنه.
• برای این کانتینر داخلی، عرض (Width) را به یک اندازه دلخواه، مثلاً 400 پیکسل تنظیم کن (یا اگر می‌خواهی واکنش‌گرا باشد، از درصدهای مناسب استفاده کن).

ب) چیدن ویجت‌های فرزند:

• حالا، ویجت‌های زیر را به ترتیب داخل همین کانتینر داخلی (والد اصلی) بکش و رها کن:
  • ویجت سربرگ (Heading)
  • ویجت ویرایشگر متن (Text Editor)
  • ویجت دکمه (Button)

یادداشت مهم! 📝 متن‌ها و استایل‌های این ویجت‌ها (سربرگ، متن و دکمه) را کاملاً به سلیقه خودت و متناسب با طرح سایتت تغییر بده. فونت، رنگ‌ها، حاشیه‌ها و محتوا کاملاً سلیقه‌ایه و چون کار راحتیه، ما از آموزش استایل‌دهی پایه صرف نظر کردیم. فقط مطمئن شو که دکمه، رنگ پس‌زمینه پیش‌فرض مشخصی داشته باشه تا تغییر رنگ رو بعداً واضح ببینی!

گام ۲. 🏷️ تعیین کلاس‌های CSS (اسم‌گذاری والد و فرزند)

حالا نوبت به اسم‌گذاری می‌رسه تا در CSS بتونیم به اون‌ها فرمان بدیم. این کار مثل دادن یک کد شناسایی مخصوص به المان‌هاست:

• والد (Parent):
  • روی کانتینر داخلی (همان که عرض ۴۰۰ پیکسل بهش دادی) کلیک کن.
  • برو به تب پیشرفته (Advanced).
  • در قسمت CSS Classes، اسم kard-valed رو بنویس. (این باکس قراره با هاور کردن فعال بشه.)

• فرزند (Child):
  • روی ویجت دکمه کلیک کن.
  • برو به تب پیشرفته (Advanced).
  • در قسمت CSS Classes، اسم dokme-farzand رو بنویس. (این المان قراره استایلش تغییر کنه.)

ساختار باکس شما آماده است! حالا که والد و فرزند رو اسم‌گذاری کردی، بریم سراغ دستور CSS!

گام 3. نوشتن دستور CSS (فرمان به مرورگر!)

حالا نوبت قسمت جذاب ماجراست! باید به مرورگر بگیم که وقتی ماوس روی باکسمون رفت، رنگ بکگراند دکمه با کلاس dokme-farzand رو به رنگ آبی تغییر بده.

این کد رو کپی کن و در قسمت CSS سفارشی (Custom CSS) کانتینر داخلی (که کلاس kard-vared رو بهش دادی) وارد کن:

.kard-valed:hover .dokme-farzand a {
    background-color: #007bff !important; 
    color: #ffffff ;
    border-color: #007bff !important;   
}

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

تبریک می‌گم! کار تمومه. صفحه رو ذخیره (Update) کن و در نمای زنده ببینش.

حالا وقتی روی باکس والد (کانتینر با کلاس kard-valed) ماوس رو ببری، دکمه فرزند (با کلاس dokme-farzand که داخلش تگ a قرار داره) رنگ پس‌زمینه‌اش به رنگ آبی تغییر می‌کنه!

این تغییر بدون اینکه مستقیماً روی دکمه هاور کنی، رخ می‌ده و این دقیقا همون تکنیک پیشرفته و جذاب CSS بود که دنبالش بودی!

آموزش ساخت چایلد تم (Child Theme) برای قالب وردپرس

مطالعه

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

مطالعه

افزایش حجم آپلود فایل در وردپرس به راحتی آب خوردن!

مطالعه