ویجت تغییر وضعیت (state change) در المنتور

نمایش محتوا به صورت تاشو

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

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

بخش محتوا در ویجت تغییر وضعیت المنتور

در بخش محتوای المان تغییر وضعیت (Toggle) در المنتور شما ساختار و محتوای بخشهای تاشو را مدیریت میکنید. این المان شبیه به آکاردئون است با این تفاوت که هر بار فقط یکی از موارد باز میشود. در این بخش میتوانید آیتم های مختلفی با عناوین و محتوای متنی مجزا اضافه و ویرایش کنید. همچنین امکان انتخاب آیکن برای حالت عادی و آیکن فعال برای زمانی که یک بخش باز شده وجود دارد و میتوانید تگ HTML عنوان را برای اهداف سئو تنظیم نمایید تا محتوای شما ساختار مناسبی داشته باشد.

گزینه تغییر وضعیت در المان state change المنتور

در بخش تغییر وضعیت، شما میتوانید ساختار سوالات متداول یا بخشهای تاشوی خود را مدیریت کنید. در قسمت موارد تغییر وضعیت، آیتم هایی مانند تغییر وضعیت #۱ و تغییر وضعیت #۲ را اضافه و ویرایش میکنید. میتوانید از بخش آیکن یک آیکن پیش فرض برای کنار عنوان انتخاب کنید مثلا از کتابخانه آیکون یا آپلود فایل SVG و از بخش آیکن فعال یک آیکن متفاوت برای زمانی که بخش باز است، برگزینید. همچنین میتوانید تگ HTML عنوان را برای سئو و ساختاردهی مناسب، روی div یا تگ مناسب دیگر تنظیم کنید و با استفاده از گزینه هایی مانند طرح سوالات متداول، محتوای خود را برای موتورهای جستجو بهینه نمایید.

بخش استایل در ویجت state change المنتور

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

گزینه تغییر وضعیت در بخش استایل المنتور

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

گزینه عنوان در ویجت تغییر وضعیت 

در بخش عنوان در تب استایل المان تغییر وضعیت المنتور شما میتوانید ظاهر بصری عناوین بخشهای تاشو را سفارشی سازی کنید. این تنظیمات شامل تعیین رنگ متن و رنگ پسزمینه برای دو حالت عادی و فعال هنگامی که بخش باز است میباشد. همچنین میتوانید با استفاده از بخش تایپوگرافی فونت اندازه وزن و سبک متن عنوان ها را تنظیم کنید و با مدیریت فاصله گذاری داخلی و حاشیه فضای مناسبی بین متن آیکن و لبه های کادر عنوان ایجاد نمایید تا خوانایی و جذابیت بصری المان افزایش یابد.

بخش آیکن در المان تغییر وضعیت المنتور

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

گزینه محتوا در بخش استایل المنتور

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

بخش پیشرفته در ویجت تغییر وضعیت وردپرس

در بخش پیشرفته (Advanced) تنظیمات هر المانی در المنتور گزینه های استاندارد و قدرتمندی برای کنترل موقعیت و ظاهر المان در سطح صفحه وجود دارد. این تنظیمات شامل مواردی مانند مدیریت مارجین فاصله بیرونی و پدینگ فاصله داخلی برای ایجاد فضای مناسب اطراف المان تنظیم کلاس های CSS سفارشی یا شناسه های ID برای استایل دهی بیشتر با کدنویسی دلخواه و کنترل واکنش گرایی جهت تعیین نمایش یا عدم نمایش المان در دستگاه های مختلف موبایل تبلت و دسکتاپ میباشد. همچنین افکت های حرکتی و تنظیمات مربوط به پس زمینه و حاشیه ها نیز در این بخش قابل دسترسی هستند.

بخش طرح بندی در ویجت تغییر وضعیت  

در بخش طرح بندی (Layout) که زیرمجموعه تنظیمات پیشرفته شما میتوانید نحوه قرارگیری و رفتار المان در صفحه را مدیریت کنید. مهمترین گزینه در این بخش تنظیم موقعیت المان است که به شما امکان میدهد آن را به صورت چسبان (Sticky) درآورید تا هنگام اسکرول کاربر در کنار صفحه ثابت بماند. همچنین میتوانید تنظیمات مربوط به عرض المان ترتیب (Z-index) برای مدیریت روی هم افتادن عناصر و کلاس های CSS اضافی را برای کنترل دقیق تر نحوه چیدمان بصری جدول محتوا در صفحه وب سایت خود اعمال کنید.

آموزش موشن افکت در ویجت state change المنتور

در بخش موشن افکت (Motion Effects) در تنظیمات پیشرفته شما میتوانید جلوه های بصری جذابی به فهرست مطالب خود اضافه کنید. این بخش به شما اجازه میدهد تا انیمیشن های ورودی ختلفی مانند محو شدن یا سر خوردن از بالا را برای زمانی که المان در صفحه بارگذاری میشود انتخاب کنید. همچنین میتوانید مدت زمان و تاخیر اجرای این انیمیشن ها را تنظیم کنید تا حرکت المان جدول محتوا در هنگام مشاهده صفحه توسط کاربر حرفه ای تر و پویاتر به نظر برسد.

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

در بخش تبدیل (Transform) که در تنظیمات پیشرفته المان های المنتور یافت میشود میتوانید تغییرات هندسی دقیقی روی المان اعمال کنید. این تنظیمات شامل گزینه هایی برای چرخاندن المان در محورهای مختلف تغییر مقیاس یا اندازه کشیدن یا کج کردن (Skew) و جابجایی دستی موقعیت آن بدون تاثیر بر چیدمان سایر عناصر صفحه است. این ابزارها برای ایجاد جلوه های بصری خلاقانه و دقیق در طراحی سایت شما بسیار مفید هستند.

بخش پس زمینه در المان state change المنتور

در بخش پس زمینه (Background) تنظیمات پیشرفته شما میتوانید ظاهر پشت زمینه این ویجت را فراتر از تنظیمات باکس تغییر دهید. این بخش به شما امکان میدهد تا یک رنگ ثابت یا یک گرادیان رنگی جذاب را به عنوان پس زمینه المان انتخاب کنید. همچنین میتوانید یک تصویر سفارشی را به جای رنگ آپلود کرده و تنظیمات مربوط به موقعیت اندازه و تکرار تصویر پس زمینه را مدیریت کنید تا جلوه بصری مورد نظر خود را دقیقا روی کادر جدول محتوا اعمال کنید.

گزینه حاشیه در ویجت تغییر وضعیت 

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

گزینه ماسک در state change المنتور

در بخش ماسک (Mask) که یکی از ویژگی های خلاقانه و پیشرفته در تنظیمات المنتور است شما میتوانید شکل ظاهری المان جدول محتوا یا هر المان دیگری را با استفاده از الگوهای مختلف تغییر دهید. به جای اینکه المان به صورت یک مستطیل ساده نمایش داده شود میتوانید شکلی مانند دایره مثلث یا الگوهای سفارشی دیگر را به عنوان ماسک انتخاب کنید. این قابلیت به شما امکان میدهد تا بخش هایی از المان را پنهان کرده و تنها قسمت مشخصی که توسط ماسک پوشانده شده را به نمایش بگذارید که برای ایجاد طرح های بصری منحصر به فرد و خارج از کادر بسیار مفید است.

بخش واکنش گرا در ویجت تغییر وضعیت المنتور

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

بخش ویژگی ها در المان تغییر وضعیت  

در بخش ویژگی ها (Attributes) که در تنظیمات پیشرفته المان های المنتور موجود است شما میتوانید اوصاف سفارشی HTML را به عنصر اصلی المان اضافه کنید. این قابلیت برای توسعه دهندگان وب و کاربران پیشرفته مفید است زیرا به آنها اجازه میدهد تا دادههای خاصی را برای تعامل با کدهای جاوا اسکریپت سفارشی یا بهبود سئوی فنی صفحه اضافه کنند. این ویژگیها مستقیما به کد خروجی المان اضافه میشوند و امکان انعطاف پذیری بیشتر در پیاده سازی عملکردهای خاص و تعامل های پیشرفته را فراهم میکنند که فراتر از تنظیمات استاندارد المنتور است.

گزینه css سفارشی در state change المنتور

در المنتور منظور از سفارشی سازی (Customization) مجموعه گستردهای از تنظیمات است که به شما امکان میدهد ظاهر رفتار و عملکرد المان جدول محتوا را دقیقا مطابق با نیازها و سلیقه خود تنظیم کنید. این سفارشی سازی شامل تغییر رنگها فونت ها حاشیه ها و پس زمینه در بخش های استایل میشود و همچنین شامل تنظیمات پیشرفته تری مانند اعمال موشن افکت ها موقعیت دهی دقیق المان با استفاده از طرح بندی و افزودن کدهای CSS یا اوصاف HTML دلخواه برای ایجاد تغییرات منحصر به فرد در بخش پیشرفته است که در نهایت منجر به تولید یک خروجی بصری و کاربردی کاملا شخصی سازی شده میشود.

مهم ترین مزایای ویجت تغییر وضعیت  

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

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

ویجت تغییر وضعیت از نظر سئو

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