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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.expandable-container {
    position: relative;
    padding-bottom: 70px; 
}
.more-RayaWp {
    width: 160px; 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.more-RayaWp i {
    font-size: 14px;
    transition: transform 0.3s ease;
}
.expandable-content {
    max-height: 100px;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out; 
    position: relative;
}

.expandable-content::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: linear-gradient(to bottom, transparent, #ffffff);
    z-index: 1;
    pointer-events: none;
}

.expandable-content.expanded {
    max-height: none; 
}

.expandable-content.expanded::after {
    display: none; }

.more-RayaWp i {
    font-size: 14px;
    transition: transform 0.3s ease;
}


.btn-wrapper {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 2;
}

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

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

<script>
document.addEventListener('DOMContentLoaded', function() {
    const button = document.querySelector('.more-RayaWp');
    const content = document.querySelector('.expandable-content');
    
    if (!button || !content) {
        console.warn('المان‌های مورد نظر یافت نشدند. کلاس‌ها را بررسی کنید.');
        return;
    }

    const moreText = 'مشاهده بیشتر';
    const lessText = 'مشاهده کمتر';

    button.addEventListener('click', function(e) {
        e.preventDefault(); 
        content.classList.toggle('expanded');
        this.classList.toggle('expanded');
        
        if (content.classList.contains('expanded')) {
            this.innerHTML = lessText + ' <i class="fa fa-chevron-up" aria-hidden="true"></i>';
        } else {
            this.innerHTML = moreText + ' <i class="fa fa-chevron-down" aria-hidden="true"></i>'
        }
    });
});
</script>

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

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

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

جمع‌ بندی

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

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

✅ مشکلات گزارش شده توسط کاربران برطرف شد