خانهآموزش المنتورآموزش ایجاد روبان روی عکس در المنتور
https://rayawp.ir/?p=20941

آموزش ایجاد روبان روی عکس در المنتور

تا به حال به فکر اضافه کردن یه المان جذاب به عکس‌هات افتادی که هم نگاه بازدیدکننده‌ها رو به خودش جلب کنه و هم حس حرفه‌ای بودن سایتت رو بالا ببره؟🤔 اگر جوابت مثبته، امروز

تا به حال به فکر اضافه کردن یه المان جذاب به عکس‌هات افتادی که هم نگاه بازدیدکننده‌ها رو به خودش جلب کنه و هم حس حرفه‌ای بودن سایتت رو بالا ببره؟🤔 اگر جوابت مثبته، امروز همراه من باش چون قراره با استفاده از المنتور و CSS، یه روبان زیبا و چشم‌نواز روی عکس‌هات اضافه کنی! ✨ این روبان شیک می‌تونه برای نمایش تخفیف‌های ویژه، برندینگ یا اعلام رویدادهای مهم به کار بره! 🚀

🤔چرا استفاده از روبان روی عکس؟

استفاده از روبان روی عکس چندتا مزیت داره:

  • جلب توجه سریع: روبان به خاطر طراحی منحصر به فردش سریع نظر بازدیدکننده رو به خودش جلب می‌کنه.
  • افزایش تعامل: وقتی بازدیدکننده با دیدن روبان‌های زیبا و متنی جذاب روی عکس، بیشتر کنجکاو می‌شه، احتمال کلیک روی المان‌های سایتت افزایش پیدا می‌کنه.
  • برندسازی: با قرار دادن لوگو یا نام برند در روبان، برندت همیشه در ذهن بازدیدکننده باقی می‌مونه.
  • اطلاع‌رسانی: می‌تونی به راحتی اطلاعات مهم مثل “تخفیف ویژه” یا “جدید” رو به بازدیدکننده منتقل کنی.

👌نحوه ایجاد روبان روی عکس در المنتور

مرحله ۱: آماده‌ سازی محیط المنتور

  1. ورود به ویرایشگر المنتور: صفحه‌ای که می‌خوای روبان روی عکسش قرار بدی رو باز کن.
  2. افزودن ویجت تصویر: از نوار ابزار المنتور، ویجت تصویر رو به بخش دلخواه بکش و رها کن.
  3. انتخاب عکس: عکس مناسب خودت رو انتخاب کن.

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

برای اینکه بتونی به عکس استایل دلخواهت رو بدی، باید بهش یک کلاس CSS اختصاص بدی:

  1. روی ویجت تصویر کلیک کن.
  2. به بخش پیشرفته (Advanced) برو.
  3. در قسمت کلاس‌های CSS (CSS Classes) عبارت زیر رو وارد کن:
RayaWp-img

این کلاس به ما اجازه می‌ده تا با استفاده از کدهای CSS، روبان روی عکس بسازیم.

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

مرحله ۳: وارد کردن کدهای CSS

حالا وقتشه کدهای CSS رو اضافه کنی تا روبان روی عکس ظاهر بشه. می‌تونی این کدها رو در بخش Custom CSS المنتور (در نسخه پرو المنتور) وارد کنی. کد زیر رو کپی کن:

.RayaWp-img{
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.RayaWp-img::before {
  content: "RayaWp.ir"; 
  position: absolute;
  top: 11px;
  left: -31px;
  width: 120px;
  padding: 8px 20px;
  background: #FFFFFF;
  color: #02010A;
  text-align: center;
  font-family: estedad, sans-serif;
  font-weight: bold;
  font-size: 14px;
  transform: rotate(-45deg);
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  z-index: 1;
}

نکته: در این کد، مقدار content تعیین کننده متنی هست که داخل روبان نمایش داده می‌شه. می‌تونی این متن رو به دلخواه تغییر بدی؛ مثلاً به “تخفیف ویژه” یا “جدید” تغییرش بدی.

جمع‌ بندی

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

یادت باشه که هر کدوم از ویژگی‌های این روبان رو می‌تونی به دلخواه تغییر بدی تا دقیقاً با سبک و رنگ‌بندی سایتت همخوان باشه. این روش نه تنها به جذابیت طراحی کمک می‌کنه، بلکه کاربردهای متنوعی مثل برندسازی، اطلاع‌رسانی و افزایش تعامل رو هم به همراه داره. 😎

اگر در طول کار سوالی داشتی یا ایده‌های خلاقانه‌ای برای بهبود این تکنیک به ذهنت رسید، حتماً در قسمت کامنت‌ها با من به اشتراک بذار. نظرات و پیشنهادات تو به من کمک می‌کنه تا مطالب بهتری برات آماده کنم. منتظر کامنت‌های پر از ایده و سوالات جالبت هستم! 😊

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

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

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

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

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

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

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

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