آموزش نمایش تصویر قبل و بعد در وردپرس (با افکت اسلاید)

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

نحوه کار تصاویر قبل و بعد چگونه است؟

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

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

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

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

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

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

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

به محض اینکه تصاویر مذکور را انتخاب کردید، بر روی دکمه Insert کلیک کنید.

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

بعد از آن بر روی دکمه Insert Shortcode کلیک کرده تا شورت کد مربوط به تصویر قبل و بعد به ویرایشگر اضافه شود.

شما همچنین می توانید از ابزارک Twenty 20 Slider برای نمایش تصویر قبل و بعد مورد نظر خود در سایدبار استفاده کنید. تنها کافی است به قسمت نمایش » ابزارک ها رفته و سپس ابزارک مذکور را انتخاب کرده و در محلی که میخواهید نمایش داده شود قرار دهید.

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

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

با کلیک بر روی آیکون نمایش داده در دایره موجود بر روی تصاویر و کشیدن آن به طرفین می توانید حالت قبل و بعد تصویر را مشاهده کنید.