خانهآموزش وردپرسبا این هاور افکت جذاب، عناوین سایت خود را زیباتر کنید
https://rayawp.ir/?p=19472

با این هاور افکت جذاب، عناوین سایت خود را زیباتر کنید

اگر می‌خوای سایتت جذاب‌تر و حرفه‌ای‌تر به نظر بیاد، باید حتما به عناوین سایت توجه ویژه‌ای داشته باشی! 👀 عناوین نه تنها باید واضح باشن، بلکه باید جلب توجه هم بکنن. و خب، همه می‌دونیم

اگر می‌خوای سایتت جذاب‌تر و حرفه‌ای‌تر به نظر بیاد، باید حتما به عناوین سایت توجه ویژه‌ای داشته باشی! 👀 عناوین نه تنها باید واضح باشن، بلکه باید جلب توجه هم بکنن. و خب، همه می‌دونیم که در دنیای امروز، دیگه یه طراحی ساده و بی‌روح اصلا جواب نمی‌ده! 🚫 حالا می‌خوام بهت نشون بدم چطور می‌تونی با یه هاور افکت جذاب عناوین سایت خودت رو زیباتر و تعاملی‌تر کنی. 🌟 با این روش، نه تنها سایتت جذاب‌تر میشه، بلکه تجربه کاربری سایتت هم بهتر می‌شه! 😎

چرا عناوین سایت مهم هستن؟ 📢

وقتی کاربر وارد سایتت میشه، اولین چیزی که به چشمش میاد عناوین یا همون تیترهای سایت هستن. 👀 این یعنی عناوین باید جذاب و چشم‌نواز باشن تا بتونی توجه کاربر رو جلب کنی و اون رو وادار کنی بیشتر بمونه. ولی این فقط شروع ماجراس! 😏 اگه می‌خوای سایتت واقعا متفاوت بشه و توی ذهن کاربر بمونه، باید از هاور افکت‌ها هم استفاده کنی! تا وقتی ماوس روی عناوین میره، تغییرات جذاب و منحصر به فردی اتفاق بیفته. ✨ این تغییرات نه تنها ظاهر سایتت رو زیباتر می‌کنه، بلکه به کاربر این احساس رو منتق میکنه که با سایت در تعامله و این باعث میشه تجربه کاربریش خیلی بهتر بشه. 🙌

ویجت هدینگ المنتور؛ ابزاری قدرتمند برای طراحی عناوین جذاب 🛠️

خب، حالا سوال اینه که چطور می‌تونیم این افکت‌ها رو به راحتی به عناوین اضافه کنیم؟ جواب ساده است: ویجت هدینگ المنتور. المنتور یه ابزار فوق‌العاده برای طراحی سریع و راحت سایته. این ویجت بهت این امکان رو می‌ده که عناوین خودت رو به صورت تعاملی بسازی. با یه کد CSS کوچیک، می‌تونی به عناوین سایتت جلوه‌های ویژه بدی و تجربه کاربری رو ارتقا بدی. استفاده از این ویجت، نه تنها کار رو برات آسون می‌کنه، بلکه می‌تونی از این پس هر عنوانی رو با افکت‌های هاور جذاب و متفاوت درست کنی.

1️⃣ اولین قدم اینه که یک برگه جدید در المنتور بسازی و بعد روی گزینه ویرایش با المنتور کلیک کنی تا محیط ویرایشگر برات باز بشه.

✨ فیلم و سریال های جدید رو از اینجا دانلود کن✨ کلیک کن AD

2️⃣ در گام بعد، از پنل ابزارک‌های سمت راست المنتور، ویجت هدینگ (Heading) یا سربرگ رو پیدا کن و به راحتی به داخل صفحه بکش و رها کن.

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

3️⃣ حالا وقتشه که افکت جادویی رو اضافه کنی! برای این کار، کد CSS زیر رو توی بخش CSS سفارشی در تب پیشرفته ویجت هدینگ وارد کن. بعدش هم کلاس RayaWp-head رو از همون تب پیشرفته، در قسمت کلاس‌های CSS به ویجت اختصاص بده.

/* Heading Style by RayaWp.ir */
.RayaWp-head {
    position: relative;
    display: inline-block;
}

.RayaWp-head::before {
    background: #ffb84d;
    content: "";
    position: absolute;
    left: 0;
    bottom: -22.3px;
    height: 1px;
    width: 100%;
    border-radius: 20px;
    transition: width 0.3s ease;
}

.RayaWp-head::after {
    background: #ff6600;
    content: "";
    position: absolute;
    right: 19px;
    bottom: -25px;
    height: 7px;
    width: 70px;
    border-radius: 20px;
    transition: width 0.3s ease;
}

.RayaWp-head:hover::after {
    width: 90%;
    left: 0;
}

توجه! برای اعمال این استایل روی تمام هدینگ‌ها (برای مثال هدینگ‌های H2)، کافیه با کلیک راست روی صفحه و استفاده از Inspect کلاس هدینگ رو پیدا کرده و در کد بالا جایگزین کنید. سپس کد CSS رو در فایل style.css قالب سایت خود قرار بدید.

کار تمومه و الان هدینگ ما یه استایل خاص با هاور افکت جذاب داره. امیدوارم این آموزشم هم مثل بقیه آموزش ها برات مفید باشه سوالی داشتی حتما قسمت نظرات بیان کن تا پاسخ بدم :)✅🧑‍💻

فایل نهایی و JSON رو می‌تونید از قسمت زیر دانلود کنید👇🎉این فایل رو میتونید به راحتی توی المنتور درون ریزی کنید 🙂

دانلود فقط برای اعضا ( کلیک کنید)

برای دانلود وارد حساب کاربری خود شوید یا ثبت نام کنید. کمتر از یک دقیقه زمان میبره 🙂

5/5 - (2 امتیاز)

اگه از مطالب سایت خوشت اومده و کارت رو راه انداخته، می‌تونی با یه حمایت کوچیک کمک کنی بهتر و قوی‌ترش کنیم! هر مبلغی که کمک کنی، مستقیم میره برای توسعه سایت و تولید محتوا و آموزش های جذاب‌ تر. 🌟

ارسال نظر ( 0 نظر تایید شده )

نظرات پس از رویت و تایید مدیران نمایش داده می‌شود

📖 آنچه خواهید خواند

Toggle
    🔥
    48 نفر در حال مطالعه این مقاله
    Picture of SaeID
    SaeID

    عاشق یادگیری وردپرس و کلن طراحی سایت هستم. سعی میکنم دانش و تجربیات خودمو در رایا وردپرس باهاتون به اشتراک بزارم :)

    مقالات بیشتر
    بستن