عملکرد افزونه Twenty Image Before-After برای نمایش عکس ها چگونه است؟

برای خیلی از ما موقعیتی پیش اومده که میخواستیم یک عکس را به دو صورت نمایش دهیم ولی از ویژگی ساخت گالری در وردپرس استفاده نکنیم. یعنی تصاویر را به صورت اسلاید با یکدیگر مقایسه کنیم. تعداد زیادی افزونه وجود داره که این عملکرد و در وردپرس برای ما ایجاد میکنند. ولی بهترین افزونه.در این زمینه، افزونه Twenty Image Before-After هست. این افزونه با قابلیت های فوق العاده ای که در زمینه نمایش عکس ها داره.بهترین افزونه در این زمینه شناخته شده. قابلیت هایی مثل نمایش یه عکس به دو صورت با تخفیف های جزئی. ولی عملکرد افزونه Twenty Image Before-After برای نمایش عکس ها چگونه است؟ در ادامه با قابلیت های بی نظیر این افزونه آشنا میشیم. با تیم استورینا همراه باشد.

 

نحوه عملکرد افزونه Twenty20 Image Before-After

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

عملکرد این افزونه به این صورته که 2 نمونه از یک عکس و به صورت کامل برای مقایسه نشون میده. ولی این نمایش به 2 صورت است. یا 2 تا تصویر بهتون نمایش میده که تفاوت های دو تصویر و درک کنین. یا یک تصویر نمایش میده که شما با حرکت دادن موس روی تصویر، تصویر بعدی را هم میتونین ببینین. حالا بهتره بریم سراغ افزونه و ببینیم چجوری میتونیم این افزونه به این باحالی و روی سایت وردپرس و قالب فروشگاهی ( یا هر نوع قالب دیگه ای ) خودمون داشته باشیم.

نحوه نمایش قبل و بعد عکس در وردپرس

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

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

 

عملکرد افزونه Twenty20 Image Before-After برای نمایش عکس ها | افزونه Twenty20 Image Before-After | Twenty20 Image Before-After | نمایش عکس

گزینه Add Twenty20 را کلیک میکنیم

 

وقتی شما این گزینه را کلیک میکنید، کتابخانه رسانه ای وردپرس باز میشه. از این قسمت باید 2 عکس را برای نمایش به صورت نوار لغزنده انتخاب کنیم.

 

عملکرد افزونه Twenty20 Image Before-After برای نمایش عکس ها | افزونه Twenty20 Image Before-After | Twenty20 Image Before-After | نمایش عکس

انتخاب کردن 2 عکس از رسانه ها

 

تنظیمات عکس های انتخابی

حالا از فرمی که برای ما روی صفحه ظاهر میشه میتونیم موارد زیر را وارد کنیم:

  • نام عکس که Before یا After.
  • تعیین میزان لغزش لغزنده.
  • جهت لغزش موس روی عکس.
  • و..

 

عملکرد افزونه Twenty20 Image Before-After برای نمایش عکس ها | افزونه Twenty20 Image Before-After | Twenty20 Image Before-After | نمایش عکس

پر کردن تنظیمات ” چگونگی لغزنده ” روی عکس ها

 

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

یه سری عملکردهای خیلی خوبه این افزونه.که بیش از پیش جذابترش کرده اینکه.ما میتونیم ابزارک این افزونه و برای نمایش یه سری عکس های قبل و بعد وارد صفحه پیشخوانمون کنیم. خیلی راحت از تنظیمات افزونه وارد قسمت ” Appearance ” و سپس ” Widgets ” یا ابزارک را انتخاب میکنیم. حالا با یک drag&drop ساده، ” ابزارک ” افزونه را به صفحه پیشخوان وردپرس اضافه میکنیم.

 

عملکرد افزونه Twenty20 Image Before-After برای نمایش عکس ها | افزونه Twenty20 Image Before-After | Twenty20 Image Before-After | نمایش عکس

قرار دادن ابزارک افزونه در صفحه پیشخوان

 

تنظیمات ابزارک افزونه Twenty20 Slider خیلی مشابه خود افزونه است.که در بالاتر نحوه اشتراگ گذاری عکس ها.و براتون توضیح دادم. خیلی راحت 2 تصویر و برای نمایش قبل و بعد یه عکس نمایش میدیم.

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

 

عملکرد افزونه Twenty20 Image Before-After برای نمایش عکس ها | افزونه Twenty20 Image Before-After | Twenty20 Image Before-After | نمایش عکس

نحوه نمایش عکس با لغزنده

 

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

 

عملکرد افزونه Twenty20 Image Before-After برای نمایش عکس ها | افزونه Twenty20 Image Before-After | Twenty20 Image Before-After | نمایش عکس

نحوه نمایش لغزنده روی عکس

 

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

ارسال نظر