نحوه ایجاد یک تصویر تعاملی با هات اسپات در وردپرس

آیا می خواهید دریابید که چگونه می توان یک تصویر تعاملی با هات اسپات ها در وردپرس ایجاد کرد Elementor و افزونه های ضروری؟

تصویر ابزاری عالی برای انتقال اطلاعات است. همه می دانند که اطلاعات منتقل شده از طریق تصویر - و فرم بصری به عنوان یک کل - آسان تر قابل درک و به خاطر سپردن است.

در زمینه وب، می توانید از بسیاری از فرمت های تصویری استفاده کنید. از یک اینفوگرافیک، یک عکس، یک کمیک استریپ، یک تصویر و ....

اگر می خواهید محتوای وب مانند آناتومی چیزی، مکان های دیدنی شهر، نقشه ها یا مسیرها ایجاد کنید، ساخت تصویر با Hotspots می تواند ایده خوبی باشد.

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

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

ماژول Essential Addons چیست؟

Essential Addons یک افزونه برای استElementor. این یکی از محبوب ترین مدها با بیش از 2 میلیون بارگیری است. این افزونه حدود 60 ویجت اضافی را به شما اضافه می کند Elementor.

یکی از ویجت های ارائه شده توسط Essential Addons است نقاط مهم تصویر EA که می توانید برای ایجاد یک تصویر تعاملی استفاده کنید. Essential Addons خود یک افزونه freemium است، اما باید از نسخه حرفه ای برای ایجاد تصاویر با Hotspots استفاده کنید زیرا ویجت EA Image Hotspots فقط در این نسخه موجود است.

نحوه استفاده از ماژول Essential Addons برای ایجاد تصاویر با Hotspots

ابتدا باید ماژول های Elementor و Essential Addons را روی وردپرس خود نصب کنید. می توانید نسخه حرفه ای افزونه های ضروری را در آن دریافت کنید سایت اینترنتی رسمی در حالی که برای Elementor می توانید از نسخه رایگان استفاده کنید.

همچنین مشاهده کنید: نحوه استفاده از ویجت جهانی در المنتور

نسخه رایگان Elementor در دایرکتوری موجود است پلاگین وردپرس بنابراین می توانید آن را با تایپ "elementor" در کادر جستجوی نصب کننده افزونه ها نصب کنید (پلاگین - > افزودن).

پس از نصب Elementor و Essential Addons، یک صفحه جدید ایجاد کنید (صفحات - > افزودن) یا یک مقاله جدید (موارد - > افزودن) و آن را با Elementor ویرایش کنید. پس از کلیک بر روی دکمه به ویرایشگر Elementor هدایت خواهید شد ویرایش با Elementor.

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

دفعات بازدید: نحوه استفاده از ویجت Elementor's Posts

طرح بندی را در منوی کشویی تنظیم کنید چیدمان

با کلیک بر روی نماد مثبت در کادر ویرایش، بخش جدیدی را اضافه کنید و ویجت EA Image Hotspots را از پانل سمت چپ اضافه کنید.

با کلیک بر روی انتخابگر تصویر در پنل سمت چپ، تصویر خود را اضافه کنید.

گزینه باز نقاط در پانل سمت چپ برای اضافه کردن نقاط دسترسی. به طور پیش فرض، ویجت EA Image Hotspots حاوی یک هات اسپات است. می توانید روی نقطه دسترسی پیش فرض کلیک کنید تا محتوای آن را ویرایش کنید.

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

روی تب کلیک کنید موقعیت برای تنظیم موقعیت نقطه دسترسی. موقعیت های X و Y را با کشیدن لغزنده ها تنظیم کنید.

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

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

بخش را باز کنید تنظیمات راهنمای ابزار برای تنظیم اندازه نکات ابزار و افکت انیمیشن.

حالا به تب بروید سبک برای سبک دادن به نقاط مهم و همچنین نکات ابزار. ابتدا گزینه را باز کنید تصویر برای تنظیم اندازه تصویر

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

همچنین کشف کنید: نحوه اضافه کردن موارد مرتبط در المنتور

بخش را باز کنید راهنمای ابزار برای سفارشی کردن نکات ابزار می توانید رنگ پس زمینه، رنگ متن، تایپوگرافی (اندازه قلم، خانواده فونت، سبک فونت) و عرض را تنظیم کنید.

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

تصاویر دارای نقاط مهم را به گوتنبرگ اضافه کنید

اگر می خواهید تصاویری با نقاط مهم به عنوان مواد پشتیبانی برای مقاله ای که روی آن کار می کنید اضافه کنید، می توانید آن را با Gutenberg (ویرایشگر پیش فرض وردپرس) با استفاده از افزونه ادغام کنید. Elementor Blocks برای گوتنبرگ. این افزونه به شما امکان می دهد از یک الگوی Elementor به عنوان بلوک گوتنبرگ استفاده کنید.

برای ذخیره تصاویر دارای هات اسپات بالا به عنوان الگوی بخش Elementor، روی دسته بخش کلیک راست کرده و انتخاب کنید. ذخیره به عنوان الگو.

به مدل خود یک اسم بزنید و روی دکمه کلیک کنید ثبت نام کننده.

مقاله‌ای را باز کنید که می‌خواهید تصاویری با نقاط مهم اضافه کنید. یک بلوک جدید اضافه کنید، انتخاب کنید کتابخانه المنتور و الگوی تصویر را با نقاط مهمی که ایجاد کرده اید انتخاب کنید.

اکنون Elementor Pro را دریافت کنید!!!

نتیجه

اینجا ! این برای این مقاله است که به شما نشان می دهد چگونه به لطف Elementor و Essential Addons یک تصویر تعاملی با Hotspots در وردپرس ایجاد کنید. اگر هر گونه نگرانی در مورد نحوه رسیدن به آنجا دارید، به آنها اطلاع دهید نظر.

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

اما در عین حال، این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.

...