برای استعلام یا ارسال سفارش اینجا کلیک کنید.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

دیدگاهتان را بنویسید

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

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

آخرین نمونه کار ها مشاهده همه

آخرین طرح های اختصاصی اجرا شده