ویجت کادر تصویر (Image Box) در المنتور

نمایش ترکیبی از تصویر، عنوان و متن

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

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

بخش محتوا در ویجت کادر تصویر المنتور

 در بخش محتوای المان کادر تصویر (Image Box) در المنتور شما عناصر اصلی و اطلاعات متنی را پیکربندی میکنید. این تنظیمات شامل سه قسمت اصلی است: بخش تصویر که در آن عکس مورد نظر خود را از کتابخانه رسانه انتخاب و اندازه آن را مشخص میکنید؛ بخش عنوان و توضیحات که میتوانید متن عنوان اصلی و متن پاراگراف زیر آن را وارد نمایید؛ و بخش لینک که در صورت نیاز آدرس URL مقصد را برای کل کادر یا فقط تصویر تعیین میکنید. این تنظیمات محتوایی ساختار اساسی کادر تصویر شما را قبل از اعمال هرگونه استایل بصری مشخص میکنند.

کادر تصویر در بخش محتوای المنتور

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

بخش استایل در ویجت Image Box المنتور

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

گزینه جعبه در ویجت Image Box المنتور

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

بخش تصویر در المان ویجت کادر تصویر المنتور

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

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

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

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

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

گزینه طرح بندی در المنتور

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

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

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

گزینه تبدیل در المان کادر تصویر المنتور

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

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

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

تنظیم حاشیه در المان های المنتور

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

گزینه ماسک در ویجت کادر تصویر المنتور

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

بخش واکنش گرا در کادر تصویر المنتور

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

بخش ویژگی ها در ویجت Image Box المنتور

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

بخش css سفارشی در المنتور 

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

مزایای مهم ویجت Image Box در المنتور

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

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

المان کادر تصویر در المنتور از نظر سئو

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