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

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

تاثیر عکس های قبل و بعد در سایت وردپرسی:

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

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

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

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

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

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

پس از آن، بر روی دکمه Insert Shortcut کلیک کنید تا تصویر قبل و بعد را در صفحه وردپرس خود بیافزایید. شما می توانید ابزارک تصویر Twenty20 را برای نمایش تصویر قبل و بعد در نوار کناری وردپرس خود استفاده کنید. به سادگی به قسمت «نمایش» بخش ابزارک در وردپرس خود بروید و سپس ویجت Twenty20 Slider را در ناحیه ویجت نوار کناری خود بکشید.

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

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

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

امیدوارم این مطلب برایتان مفید بوده باشد. منتظر پیشنهادات و انتقاداتتون هستیم 🙂