hostino

نمایش تصاویر قبل و بعد در وردپرس

 نمایش تصاویر قبل و بعد در وردپرس

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

افکت قبل و بعد چگونه کار می‌کند؟

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

در واقع، خروجی نهایی یک عکس ثابت می‌شود که آن را در وبسایت خود قرار می‌دهند.

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

 نمایش تصاویر قبل و بعد در وردپرس

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

دموی واقعی این نمونه از انتهای مطلب قابل دسترس است.

نمایش تصاویر قبل و بعد در وردپرس

ابتدا افزونه Twenty20 Image Before-After را از مخزن وردپرس نصب و فعالسازی کنید (لینک در انتهای مطلب).

سپس به صفحه افزودن/ویرایش یک نوشته/برگه مراجعه کنید.

همانند تصویر زیر، گزینه جدیدی تحت عنوان Add Twenty20 به بالای ادیتور اضافه شده است؛ روی آن کلیک کنید.

 نمایش تصاویر قبل و بعد در وردپرس

با این کار، کتابخانه پرونده‌های چندرسانه‌ای وردپرس نمایان می‌شود که باید دو تصویر مورد نظر خود را انتخاب کنید.

 نمایش تصاویر قبل و بعد در وردپرس

روی گزینه «گذاشتن در نوشته» کلیک کنید.

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

 نمایش تصاویر قبل و بعد در وردپرس

در نهایت روی دکمه Insert Shortcode کلیک کنید تا تصاویر Before and After شما به محتوای نوشته/برگه اضافه شوند.

همچنین امکان استفاده از این افکت در سایدبار سایت به وسیله ابزارک هم وجود دارد.

برای این کار، در پیشخوان وردپرس به قسمت نمایش > ابزارک‌ها مراجعه کنید.

ابزارک Twenty20 Slider را در محل نمایش مورد نظرتان قرار داده و تصاویر قبل و بعد را به صورت جداگانه در آن انتخاب نمایید.

 نمایش تصاویر قبل و بعد در وردپرس

با ذخیره ابزارک و مراجعه به وبسایت، نتیجه را مشاهده خواهید کرد.

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

به این مطلب امتیاز دهید

امتیاز کلی : 0 / 5. تعداد آرا : 0

اولین نفر باید که به این مطلب امتیاز میدهید

وبیت این پست توسط نگارش شده است.

توسعه دهنده وب، علاقمند به وردپرس، دانشجوی رشته مهندسی نرم افزار

در کانال وبیت عضو شو تا از آخرین اخبار ، آپدیت محصولات و تخفیف ها با خبر بشی ☺ عضویت در کانال تلگرام

اشترک گذاری

مقاله های پیشنهادی

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

ارسال نظر ( 0 نظر تایید )

نظرات پس از رویت و تایید مدیران نمایش داده می شود

هنوز نظری ثبت نشده است ، اولین نفری باشید که نظر میدهید !

همکاران وبیت