آموزش ایجاد تصاویر تعاملی در وردپرس

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

تصاویر تعاملی در وردپرس

تصویر تعاملی چیست؟

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

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

 

ایجاد تصاویر تعاملی در وردپرس

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

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

بعد از نصب و فعالسازی افزونه، از منوی سمت راست پیشخوان وردپرس، بخش جدیدی را تحت عنوان Draw Attention مشاهده خواهید کرد. کافی است از قسمت مذکور، بر روی Edit Image کلیک کنید تا بتوانید یک تصویر تعاملی ایجاد کنید.

در نسخه رایگان این افزونه که از مخزن وردپرس دریافت کرده اید، تنها قادر به ایجاد یک تصویر تعاملی هستید، از این رو تنها گزینه موجود، Edit Image است.

 

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

 

بعد از آن شما میبایست بر روی گزینه بروز رسانی کلیک کنید.

بعد از انتشار تصویر مذکور، افزونه به شما اجازه میدهد تا تصویر را ویرایش کرده و مناطق خاص را برجسته کرده، رنگ هایی را به آن اضافه کنید و مناطق کانونی خود را بر روی تصویر ترسیم کنید. شما می توانید به قسمت پایین صفحه تحت عنوان Hotspot Areas مراجعه کرده و در clickable area پیش نمایش تصویر مذکور را مشاهده کنید.

تنها کافی است موس خود را روی تصویر مذکور برده و مناطق قابل کلیک بر روی تصویر را ترسیم کنید. شما می توانید به اسانی مناطق کانونی مورد نظر خود را انتخاب کنید.

بعد از ترسیم مناطق کانونی، شما میبایست به بخش Action در پایین صفحه رفته و اکشن دلخواه خود برای قسمت انتخاب شده تصویر را انتخاب کنید. اگر گزینه Show More Info را انتخاب کنید، به راحتی می توانید توضیحات دلخواه خود برای منطقه مورد نظر روی تصویر را وارد کنید. شما همچنین میتوانید به منطقه انتخاب شده مذکور، لینک دلخواه خود را بدهید برای این کار کافی است گزینه Go to URL را انتخاب کنید.

شما همچنین می توانید تنظیمات کلی مربوط به تصویر را مدیریت کرده و استایل مربوط به لینک، متن و مواردی از این دست را ویرایش کنید. این تنظیمات به شما در تعاملی تر کردن تصویرتان کمک می کند.

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

این افزونه به شما اجازه میدهد تا هر قدر که بخواهید تصاویر تعاملی ایجاد کنید.

 

درون ریزی و برون ریزی تصاویر تعاملی

این قابلیت در نسخه رایگان افزونه قابل استفاده نبوده و برای استفاده از آن تنها باید نسخه پولی افزونه را تهیه کنید.

اگر بر روی چندین سایت کار می کنید و میخواهید تصاویر تعاملی خود را درون ریزی/برون ریزی کنید، نیاز است تا افزونه را بر روی هر دو سایت خود نصب کرده باشید.

در سایت مبدا، شما میبایست از قسمت Draw Attention بر روی Import / Export کلیک کنید و در صفحه مذکور تصاویری که میخواهید از آنها خروجی تهیه کنید را تیک زنید. سپس بر روی دکمه Generate Export Code کلیک کرده و کد ایجاد شده را کپی کنید.

بعد از آن میبایست به سایت مقصد مراجعه کرده و مطمئن شوید که افزونه نصب و فعال شده است. بعد از آن از قسمت Draw Attention روی Import / Export کلیک کرده و در صفحه مذکور کدی را که پیشتر کپی کرده بودید، در باکس Import وارد کنید.

در نهایت بر روی دکمه Import کلیک کرده و با این کار تصاویر شما با تمام جزئیات درون ریزی خواهند شد.

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

 

دانلود افزونه Draw Attention

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

سیستم اطلاع رسان آپدیت محصولات راه اندازی شد!

سیستم اطلاع رسان آپدیت محصولات راه اندازی شد!

عرض سلام و وقت بخیر خدمت تمامی همراهان مجموعه نوین وردپرس با توجه به درخواست های مکرر خریداران مبنی بر راه اندازی یک سیستم جامع جهت اطلاع خریداران از آپدیت های جدید برآن شدیم تا…

ارسال دیدگاه

آدرس ایمیل شما منتشر نخواهد شد. فیلد های ضروری با * مشخص شده است.