• زد ؛ نسل جدید ، تبلیغات جدید

مشاورین ما در خدمت شما هستند

09207718710

09207718710

وبلاگ

خانه » المنتور »

اشتراک گذاری

فهرست مطالب

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

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

در این مقاله، قصد داریم به بررسی جامع روش‌های مخفی کردن، نمایش دادن و معکوس کردن (تغییر وضعیت) بخش‌ها و ویجت‌های المنتور بپردازیم. نکات و ترفندهایی که در ادامه بیان می‌کنیم، به شما این امکان را می‌دهد تا بدون نیاز به افزونه‌های جانبی و با استفاده از ابزارهای داخلی المنتور، کنترل کاملی بر روی نحوه نمایش المان‌های سایت خود داشته باشید. در این مقاله به مباحث زیر خواهیم پرداخت:

  • اهمیت مدیریت نمایش المان‌ها در تجربه کاربری
  • آشنایی با امکانات پیش‌فرض المنتور برای مخفی و نمایش دادن المان‌ها
  • استفاده از تنظیمات پیشرفته در بخش «Advanced» المنتور جهت کنترل دقیق‌تر نمایش
  • بهره‌گیری از CSS سفارشی برای ایجاد افکت‌های منحصر به فرد
  • استفاده از جاوا اسکریپت جهت ایجاد تعاملات پویا و تغییر وضعیت (تگگل)
  • مثال‌های عملی و کدهای نمونه برای هر یک از این موارد
  • نکات بهینه‌سازی، سازگاری واکنش‌گرا و مدیریت عملکرد در طراحی نهایی

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

اهمیت مدیریت نمایش المان‌ها در طراحی وب

تأثیر بر تجربه کاربری

نمایش یا عدم نمایش المان‌های مختلف در یک وب‌سایت می‌تواند تأثیر عمیقی بر تجربه کاربری داشته باشد. برخی از موارد کلیدی عبارتند از:

  • تمرکز کاربر: با مخفی کردن المان‌های غیرضروری، می‌توان توجه کاربر را به محتواهای اصلی جلب کرد.
  • سادگی و شفافیت: یک طراحی تمیز و بدون شلوغی باعث می‌شود کاربران سریع‌تر به اطلاعات مورد نیاز دسترسی پیدا کنند.
  • افزایش تعامل: امکان نمایش دکمه‌ها، فرم‌های ثبت‌نام یا پیشنهادات ویژه به صورت دینامیک، تعامل کاربر را افزایش می‌دهد.
  • پاسخگویی به نیازهای مختلف: نمایش المان‌ها بر اساس شرایط مختلف (مثلاً زمان، دستگاه یا رفتار کاربر) می‌تواند تجربه سفارشی‌سازی شده‌ای را ارائه دهد.

مدیریت وضعیت نمایش با المنتور

المنتور ابزارهای قدرتمندی برای مدیریت وضعیت نمایش المان‌ها ارائه می‌دهد. در تنظیمات پیشرفته (Advanced) هر بخش یا ویجت، گزینه‌های متعددی برای مخفی یا نمایش دادن المان‌ها در دستگاه‌های مختلف (دسکتاپ، تبلت و موبایل) موجود است. به علاوه، با استفاده از قابلیت Custom CSS و جاوا اسکریپت، می‌توانید این کنترل‌ها را به سطح بالاتری ببرید و افکت‌های تعاملی مانند «تگگل» یا تغییر وضعیت (معکوس کردن) را به المان‌های خود اضافه کنید.

امکانات پیش‌فرض المنتور برای مخفی و نمایش دادن المان‌ها

تنظیمات ریسپانسیو داخلی المنتور

در المنتور، هر بخش (Section)، ستون (Column) و ویجت دارای تنظیمات ریسپانسیو است. برای مثال:

  • نمایش/عدم نمایش در دسکتاپ، تبلت و موبایل: در بخش Advanced » Responsive، گزینه‌هایی برای مخفی کردن یا نمایش دادن المان‌ها در دستگاه‌های مختلف وجود دارد.
    • شما می‌توانید یک بخش یا ویجت را فقط در دسکتاپ نمایش دهید و در موبایل مخفی کنید.
    • این قابلیت به شما امکان می‌دهد تا طراحی خود را بر اساس نیازهای مختلف دستگاه‌ها بهینه کنید.

تنظیمات Visibility در بخش Advanced

در هر ویجت یا بخش المنتور، بخش Advanced » Responsive گزینه‌های «Hide On Desktop»، «Hide On Tablet» و «Hide On Mobile» را فراهم می‌کند. این تنظیمات به شما امکان می‌دهد تا به سادگی با یک کلیک، المان‌های مورد نظر را مخفی یا نمایش دهید.

  • Hide On Desktop: اگر فعال شود، المان در دسکتاپ نمایش داده نمی‌شود.
  • Hide On Tablet: در تبلت‌ها مخفی خواهد بود.
  • Hide On Mobile: این گزینه باعث می‌شود که المان در دستگاه‌های موبایل نمایش داده نشود.

این تنظیمات برای مواردی که نیاز به طراحی متفاوت برای دستگاه‌های مختلف دارید بسیار کارآمد هستند.

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

اگرچه تنظیمات پیش‌فرض المنتور امکان مخفی کردن و نمایش دادن المان‌ها را فراهم می‌کنند، اما گاهی برای ایجاد افکت‌های منحصر به فرد یا کنترل دقیق‌تر، نیاز به افزودن CSS سفارشی دارید.

مخفی کردن المان‌ها با CSS

با استفاده از ویژگی‌های CSS مانند display و visibility می‌توانید کنترل بیشتری بر روی نمایش المان‌ها داشته باشید.

مثال:

برای مخفی کردن یک بخش با کلاس .my-section می‌توانید از کد زیر استفاده کنید:

css
.my-section {
display: none;
}

این کد باعث می‌شود که المانی با کلاس my-section از صفحه حذف شود. به جای display: none; می‌توانید از visibility: hidden; استفاده کنید که باعث می‌شود المان هنوز فضا را اشغال کند ولی قابل مشاهده نباشد.

نمایش دادن المان‌ها با CSS

برای نمایش دادن المان‌هایی که به صورت پیش‌فرض مخفی شده‌اند:

css
.my-section {
display: block;
}

یا اگر از visibility: hidden; استفاده شده باشد:

css
.my-section {
visibility: visible;
}

ایجاد افکت‌های انتقال (Transition) و انیمیشن‌ها

با استفاده از CSS می‌توانید افکت‌های ملایمی برای تغییر وضعیت نمایش المان‌ها ایجاد کنید. به عنوان مثال، یک افکت fade-in:

css
.my-section {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}.my-section.show {
opacity: 1;
}

با افزودن کلاس show به المان، افکت تدریجی نمایش داده می‌شود. این روش به شما امکان می‌دهد تا یک تجربه بصری جذاب ایجاد کنید.

استفاده از جاوا اسکریپت برای معکوس (تگگل) کردن وضعیت المان‌ها

برای ایجاد تعاملات پویا و معکوس کردن (تغییر وضعیت نمایش/عدم نمایش) بخش‌ها و ویجت‌ها، می‌توان از جاوا اسکریپت یا jQuery استفاده کرد.

ایجاد دکمه تگگل

فرض کنید می‌خواهید با کلیک بر روی یک دکمه، یک بخش مخفی را نمایش یا پنهان کنید. می‌توانید از کد زیر استفاده کنید:

html
<!-- دکمه تگگل -->
<button id="toggle-button">تغییر وضعیت بخش</button><!– بخش مورد نظر –>
<div id=“toggle-section” class=“my-section”>
<p>این یک بخش پنهان یا نمایش داده شده است.</p>
</div>

کد جاوا اسکریپت برای تگگل کردن

کد زیر به کمک جاوا اسکریپت (یا jQuery) وضعیت بخش را تغییر می‌دهد:

html
<script>
document.getElementById('toggle-button').addEventListener('click', function() {
var section = document.getElementById('toggle-section');
// اگر بخش مخفی است، نمایش داده شود، و در غیر این صورت مخفی شود.
if (section.style.display === 'none' || section.style.display === '') {
section.style.display = 'block';
// افزودن کلاس برای افکت‌های CSS (اختیاری)
section.classList.add('show');
} else {
section.style.display = 'none';
section.classList.remove('show');
}
});
</script>

این کد به شما امکان می‌دهد تا با هر کلیک بر روی دکمه، وضعیت بخش تغییر کند. می‌توانید از آن در ویجت HTML المنتور استفاده کنید.

استفاده از jQuery برای تگگل کردن

اگر با jQuery آشنایی دارید، می‌توانید از کد زیر استفاده کنید:

html
<script>
jQuery(document).ready(function($) {
$('#toggle-button').on('click', function() {
$('#toggle-section').toggleClass('show').slideToggle();
});
});
</script>

این کد علاوه بر تغییر کلاس show، افکت slideToggle را به بخش اضافه می‌کند که به صورت پویا آن را باز و بسته می‌کند.

ادغام کدهای سفارشی در المنتور بدون افزونه جانبی

استفاده از ویجت HTML المنتور

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

  1. یک صفحه یا قالب جدید در المنتور ایجاد کنید.
  2. از پنل ویجت‌ها، ویجت HTML را به محل مورد نظر بکشید.
  3. کدهای HTML، CSS و جاوا اسکریپت خود را در آن قرار دهید.
  4. تغییرات را پیش‌نمایش و بررسی کنید.

جایگذاری کد در بخش Custom CSS

اگر از نسخه پرو المنتور استفاده می‌کنید، می‌توانید کدهای CSS سفارشی را مستقیماً در بخش Custom CSS المنتور وارد کنید. این کار امکان کنترل دقیق‌تر استایل‌ها را فراهم می‌کند و باعث می‌شود کدهای CSS شما در کل صفحه اعمال شوند.

مثال‌های عملی و کاربردی در طراحی

مثال ۱: پاپ آپ تگگل شده

فرض کنید می‌خواهید یک پاپ آپ ساده بسازید که با کلیک بر روی دکمه‌ای ظاهر و با کلیک مجدد بسته شود. مراحل کار به شرح زیر است:

  1. HTML پاپ آپ:

    html
    <div id="popup-overlay" class="popup-overlay">
    <div id="popup-box" class="popup-box">
    <span class="popup-close" id="popup-close">&times;</span>
    <h2 class="popup-title">پیام ویژه</h2>
    <p class="popup-text">از پیشنهاد ویژه ما بهره ببرید!</p>
    <button class="popup-button" id="popup-button">ادامه</button>
    </div>
    </div>

  2. CSS پاپ آپ:

    css
    .popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    }
    .popup-box {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    text-align: center;
    position: relative;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }
    .popup-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    cursor: pointer;
    color: #333;
    }
    .popup-title {
    font-size: 32px;
    margin-bottom: 15px;
    color: #333;
    }
    .popup-text {
    font-size: 18px;
    margin-bottom: 25px;
    color: #555;
    }
    .popup-button {
    background-color: #0073e6;
    border: none;
    color: #fff;
    padding: 12px 30px;
    font-size: 18px;
    border-radius: 4px;
    cursor: pointer;
    }
    .popup-button:hover {
    background-color: #005bb5;
    }

  3. JavaScript برای تگگل پاپ آپ:

    html
    <script>
    function showPopup() {
    document.getElementById('popup-overlay').style.display = 'flex';
    }
    function closePopup() {
    document.getElementById('popup-overlay').style.display = 'none';
    }
    document.getElementById('popup-close').addEventListener('click', closePopup);
    document.getElementById('popup-button').addEventListener('click', closePopup);    // نمایش پاپ آپ بعد از 3 ثانیه
    window.addEventListener(‘load’, function(){
    setTimeout(showPopup, 3000);
    });
    </script>

این مثال نشان می‌دهد که چگونه می‌توانید با استفاده از کدهای HTML، CSS و JavaScript یک پاپ آپ پویا ایجاد کنید که با المنتور و بدون افزونه جانبی قابل پیاده‌سازی باشد.

مثال ۲: مخفی و نمایش داینامیک یک بخش با دکمه تگگل

فرض کنید می‌خواهید یک بخش از صفحه را به صورت داینامیک با دکمه‌ای مخفی و نمایش دهید.

  1. HTML بخش:

    html
    <button id="toggle-button">نمایش/مخفی بخش</button>
    <div id="toggle-section" class="toggle-section">
    <p>این یک بخش قابل تگگل است.</p>
    </div>

  2. CSS بخش:

    css
    .toggle-section {
    display: none;
    background-color: #f7f7f7;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-top: 15px;
    }
    .toggle-section.show {
    display: block;
    }

  3. JavaScript برای تگگل:

    html
    <script>
    document.getElementById('toggle-button').addEventListener('click', function() {
    var section = document.getElementById('toggle-section');
    if(section.classList.contains('show')) {
    section.classList.remove('show');
    } else {
    section.classList.add('show');
    }
    });
    </script>

این روش به شما امکان می‌دهد تا با یک کلیک، بخش مورد نظر به صورت نرم نمایش داده یا مخفی شود.

نکات پیشرفته و بهبودهای سفارشی

سفارشی‌سازی با توجه به رفتار کاربر

می‌توانید با استفاده از جاوا اسکریپت، نمایش بخش‌ها را بر اساس رفتار کاربر (مثلاً اسکرول صفحه یا زمان حضور کاربر) تنظیم کنید. به عنوان مثال:

html
<script>
window.addEventListener('scroll', function() {
var scrollPosition = window.scrollY;
var section = document.getElementById('toggle-section');
if(scrollPosition > 300) {
section.classList.add('show');
} else {
section.classList.remove('show');
}
});
</script>

این کد به محض اینکه کاربر از مقدار معینی اسکرول کرد، بخش نمایش داده می‌شود.

استفاده از افکت‌های CSS برای تغییر وضعیت نرم

برای ایجاد تغییرات نرم و جذاب در نمایش یا مخفی کردن المان‌ها می‌توانید از Transition ها بهره ببرید:

css
.toggle-section {
transition: opacity 0.5s ease-in-out;
opacity: 0;
display: none;
}
.toggle-section.show {
display: block;
opacity: 1;
}

با این کار، هنگامی که بخش نمایش داده می‌شود، به صورت تدریجی به حالت قابل مشاهده در می‌آید.

هماهنگی استایل‌ها با طراحی کلی سایت

به یاد داشته باشید که هر تغییری که اعمال می‌کنید باید با هویت بصری و استایل کلی سایت شما هماهنگ باشد. استفاده از پالت رنگی یکپارچه، فونت‌های مشابه و رعایت فاصله‌های مناسب به ایجاد یک تجربه کاربری حرفه‌ای کمک می‌کند.

نکات بهینه‌سازی و تست نهایی

بهینه‌سازی سرعت

استفاده از کدهای بهینه‌شده CSS و JavaScript، کاهش حجم تصاویر و به کارگیری تکنیک‌های کش (Cache) می‌تواند سرعت بارگذاری صفحات شما را افزایش دهد. قبل از انتشار صفحه در سایت زنده، از ابزارهایی مانند Google PageSpeed Insights استفاده کنید تا مطمئن شوید تغییرات شما تاثیری منفی بر سرعت سایت ندارد.

تست واکنش‌گرا

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

بازخورد کاربران و بهبود مستمر

پس از انتشار نهایی صفحه، از بازخورد کاربران و تحلیل‌های آماری بهره ببرید تا در صورت نیاز تغییرات لازم را اعمال کنید. آزمون‌های A/B و نظرسنجی‌های کوتاه می‌توانند به شما در شناسایی نقاط ضعف و قوت طراحی کمک کنند.

شبکه های اجتماعی

Facebook WhatsApp Telegram

نظرات کاربران برای این مقاله

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

تماس سریع 09207718710

در آژانس دیجیتال مارکتینگ زد، با بهره‌مندی از تجارب گسترده و نوآوری‌های روز، به شما کمک می‌کنیم تا در دنیای دیجیتال به موفقیت‌های چشمگیری دست یابید. ما متعهد هستیم که تمامی خدمات ما بر پایه‌ی دانش و فناوری‌های نوین باشد تا بهترین نتایج را برای کسب‌وکار شما به ارمغان آورد.از سال‌های ابتدایی فعالیت‌مان، هدف ما همیشه یک چیز بوده: افزایش فروش و رونق کسب‌وکار شما. ما با تحلیل دقیق بازار و نیازهای مشتریان، راهکارهای خلاقانه و مؤثری ارائه می‌دهیم که شما را در مسیر رشد و موفقیت یاری می‌کند.دیجیتال مارکتینگ زد، نقطه‌ی تلاقی بازاریابی، تکنولوژی و هنر است. با ما همراه باشید تا با استفاده از استراتژی‌های به‌روز، به رشد و شکوفایی برند شما در فضای دیجیتال کمک کنیم.

لینک های مفید

کجا هستیم و چگونه اعتماد کنید

  • دفتر مرکزی
  • شماره تماس ها
  • ایمیل پشتیبانی
  • اصفهان ، خمینی شهر
  • 09130961092 /09162416627
  • info@dmz-agency.ir
منوی دسته‌های خود را در هدرساز -> موبایل -> منوی اصلی موبایل -> نمایش/مخفی -> انتخاب منو، تنظیم کنید
اولین منوی خود را اینجا ایجاد کنید
سبد خرید
بستن
برای دیدن نوشته هایی که دنبال آن هستید تایپ کنید.
فروشگاه
لیست علاقه مندی ها
0 مورد سبد خرید
حساب من