آموزش ویجت هات اسپات (hotspot) در المنتور وردپرس

ایجاد نقاط تعاملی روی تصاویر

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

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

بخش محتوا (Content) در هات اسپات وردپرس

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

بخش تصویر (Image) در هات اسپات وردپرس

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

بخش محتوا در هات اسپات المنتور

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

بخش متن راهنما (Tooltip) در هات اسپات المنتور

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

بخش استایل (Style) در hotspot  المنتور

در بخش استایل ویجت کانون گرم (Image Hotspots) المنتور گزینه‌ های مرتبط با تصویر اصلی پس‌ زمینه بسیار محدود و کلی هستند. برخلاف تنظیمات استایل برای خود نقاط کانون گرم یا متن راهنما، تصویر اصلی معمولاً در این بخش فقط امکان تنظیم مواردی پایه‌ ای مانند میزان کدورت یا شفافیت (Opacity)، اعمال جلوه‌های ویژه CSS Filters (مثل محو کردن یا تغییر روشنایی و کنتراست) و تنظیم حاشیه یا شعاع مرزی را ارائه می‌دهد. این تنظیمات بیشتر برای ایجاد جلوه‌های بصری کلی روی تصویر اصلی استفاده می‌ شوند تا تصویر با بقیه اجزای صفحه هماهنگ شود، نه برای تغییرات ساختاری عمده.

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

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

 بخش متن راهنما (Tooltip) در hotspot  المنتور

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

شما می توانید فیلم کامل آموزش این ویجت را که توسط استاد اسماعیلی از اساتید مجرب مجموعه آرتا رسانه، تدریس شده، در ادامه به صورت 100% رایگان مشاهده کنید. در صورت تمایل این ویديو را در یوتیوب شرکت آرتا رسانه هم میتوانید مشاهده کنید

بخش پیشرفته (Advanced) در hotspot  وردپرس

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

آموزش طرح‌ بندی (Layout) در hotspot  وردپرس

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

آموزش موشن افکت (Motion Effects) در hotspot  المنتور

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

آموزش تبدیل (Transform) در hotspot  المنتور

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

بخش پس زمینه (Background) در hotspot  المنتور

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

بخش حاشیه (Border) در hotspot  المنتور

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

بخش ماسک (Masking) در hotspot  وردپرس

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

بخش واکنش‌ گرا (Responsive) در hotspot  وردپرس

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

بخش ویژگی ها (Features) در هات اسپات  وردپرس

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

بخش css سفارشی (Custom CSS) در هات اسپات  المنتور

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

مزایای مهم ویجت هات اسپات

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

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

ویجت هات اسپات از نظر سئو

استفاده از ویجت hotspot به بهبود تجربه کاربری کمک می‌کند و مدت زمان حضور کاربران در سایت را افزایش می‌دهد که تأثیر مثبتی بر رتبه صفحات دارد. طراحی منظم و تعاملی تصاویر باعث می‌شود موتورهای جستجو محتوای سایت را راحت‌تر بررسی و ایندکس کنند و ساختار سایت بهینه‌تر شود.

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