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

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

تا حالا شده یه متن طولانی توی سایتت داشته باشی، ولی نخوای همون اول همه‌ش رو به کاربر نشون بدی؟ 🤔 اینجاست که “دکمه مشاهده بیشتر” وارد بازی می‌شه! 🚀 این دکمه باعث می‌شه یه

تا حالا شده یه متن طولانی توی سایتت داشته باشی، ولی نخوای همون اول همه‌ش رو به کاربر نشون بدی؟ 🤔 اینجاست که “دکمه مشاهده بیشتر” وارد بازی می‌شه! 🚀 این دکمه باعث می‌شه یه بخش کوتاه از متن نمایش داده بشه و اگه کاربر کنجکاو شد، با یه کلیک ادامه‌ش رو ببینه. این کار هم ظاهر سایتت رو مرتب‌تر می‌کنه و هم تجربه کاربری رو بهبود می‌ده. 😍

حالا اگه می‌خوای یاد بگیری که چطور با المنتور این قابلیت کاربردی رو به سایتت اضافه کنی، این آموزش رو از دست نده! تا آخر این پست همراه من باش که یه چیز خفن یاد بگیری! 🔥

🌟 چرا به جای نمایش کل متن از دکمه “مشاهده بیشتر” استفاده کنیم؟

  • صفحه‌ات شلوغ نمی‌شه! فرض کن یه متن 1000 کلمه‌ای داری و می‌خوای توی صفحه نمایش بدی. اگه همشو یه‌جا نشون بدی، صفحه شلوغ و خسته‌کننده می‌شه. اما با نمایش فشرده، می‌تونی کلی از حجم صفحه رو مدیریت کنی.
  • کاربران راحت‌تر محتوا رو اسکن می‌کنن
  • تجربه کاربری (UX) بهتر می‌شه
  • و از همه مهم‌تر، سایتت حرفه‌ای‌تر به نظر می‌رسه! 💼

📌ساخت دکمه مشاهده بیشتر و کمتر با المنتور

خب، حالا می‌رسیم به اصل ماجرا! 🎯 اگه تو هم کنجکاوی و می‌خوای سریع یاد بگیری چطور فقط با المنتور این قابلیت رو به سایتت اضافه کنی، پس وقتشه که بریم سراغ آموزش! 🚀 آماده‌ای؟ بزن که بریم! 🔥

🛠️ ابزارمورد نیاز برای این کار

  • ویجت متن (Text Editor) المنتور ✍️: برای اضافه کردن محتوای متنی که قراره بخشی از اون مخفی بشه.
  • ویجت دکمه (Button) المنتور 🔘: برای ایجاد دکمه “مشاهده بیشتر” که متن رو باز و بسته می‌کنه.
  • ویجت HTML المنتور 🖥️: برای اضافه کردن کدهای لازم و پیاده‌سازی قابلیت نمایش و مخفی کردن متن.

مراحل انجام کار

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

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

استایل متن، رنگ و اندازه فونت رو به عهده خودت میزارم از تب استایل به راحتی میتونی تنظیمات رو طبق سلیقه خودت انجام بدی 🙂

به تب پیشرفته ویجت متن برو و در بخش کلاس CSS کلاس expandable-content رو به ویجت متن اختصاص بده.

2️⃣ در مرحله بعد، ویجت دکمه را درست زیر ویجت متن اضافه کن و یک آیکون مناسب براش انتخاب کن. سپس به تب استایل برو و رنگ، فونت و سایر تنظیمات را طبق سلیقه‌ات انجام بده.

به تب پیشرفته ویجت دکمه برو و کلاس more-RayaWp را در بخش کلاس CSS وارد کن. سپس به پایین همان تب پیشرفته اسکرول کن و در بخش CSS سفارشی، کدهای زیر را قرار بده:

.expandable-container {
  position: relative;
  padding-bottom: 60px; 
}
.expandable-content {
  max-height: 100px;
  overflow: hidden;
  transition: 0.4s ease;
  position: relative;
}
.expandable-content::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: linear-gradient(to bottom, transparent, #fff);
}
.expandable-content.expanded {
  max-height: 2000px;
}
.expandable-content.expanded::after {
  display: none;
}
.btn-wrapper {
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.more-RayaWp i {
  font-size: 0.9em;
  transition: 0.3s ease;
}
.more-RayaWp.expanded i {
  transform: rotate(180deg);
}

3️⃣ در مرحله آخر، ویجت HTML را زیر ویجت دکمه اضافه کن و کدهای جاوااسکریپت را برای مدیریت دکمه نمایش بیشتر و کمتر وارد کن.

<script>document.querySelector('.more-RayaWp').addEventListener('click', function() {
  const content = document.querySelector('.expandable-content');
  const icon = this.querySelector('i');
  
  this.classList.toggle('expanded');
  content.classList.toggle('expanded');
  
  if(content.classList.contains('expanded')) {
    this.querySelector('span').textContent = 'مشاهده کمتر';
    icon.classList.replace('fa-chevron-down', 'fa-chevron-up');
  } else {
    this.querySelector('span').textContent = 'مشاهده بیشتر';
    icon.classList.replace('fa-chevron-up', 'fa-chevron-down');
  }
});</script>

کار تمومه تغییرات رو ذخیره و صفحه رو منتشر کن 🙂

جمع‌ بندی

حالا دیگه یه دکمه مشاهده بیشتر و کمتر کاملاً کاربردی روی سایتت داری که هم ظاهر جذابی داره، هم تجربه کاربری رو بهتر می‌کنه. 😍 این روش رو می‌تونی توی بخش‌های مختلف سایت مثل مقالات، توضیحات محصول، نظرات کاربران و… استفاده کنی.

اگه سوالی داشتی، حتماً توی کامنت‌ها بپرس💬

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

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

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

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

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

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

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

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