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

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

How to show before and after photo in WordPress

جلوه عکس قبل و بعد چگونه کار می کند؟ h4>

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

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

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

آموزش فیلم h4>

مشترک شدن در WPBeginner

اگر نمی خواهید آموزش فیلم را تماشا کنید ، می توانید نسخه متن زیر را بخوانید:

نمایش عکس قبل و بعد در وردپرس h4>

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

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

Add twenty20 button

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

Before after images

پس از انتخاب تصاویر ، روی دکمه درج کلیک کنید.

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

Insert before after photo shortcode

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

همچنین می توانید از ابزارک تصویر Twenty20 برای نمایش عکس قبل و بعد در نوار کناری وردپرس خود استفاده کنید. کافی است به قسمت Appearance »Widgets در سرپرست وردپرس خود بروید و سپس ابزارک Twenty20 Slider را در منطقه ابزارک Sidebar خود بکشید.

Sidebar widget for before and after photo

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

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

Before and after photo

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

Slide before and after image

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

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

اگر این مقاله را دوست داشتید ، لطفاً در کانال YouTube برای آموزش های ویدئویی وردپرس. همچنین می توانید ما را در Twitter و فیس بوک .

منبع:
https://www.wpbeginner.com/plugins/how-to-show-before-and-after-photo-in-wordpress/.

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


Fatal error: Uncaught wfWAFStorageFileException: Unable to save temporary file for atomic writing. in /home/wekjriusd1/public_html/wp-content/plugins/wordfence/vendor/wordfence/wf-waf/src/lib/storage/file.php:35 Stack trace: #0 /home/wekjriusd1/public_html/wp-content/plugins/wordfence/vendor/wordfence/wf-waf/src/lib/storage/file.php(659): wfWAFStorageFile::atomicFilePutContents('/home/wekjriusd...', '<?php exit('Acc...') #1 [internal function]: wfWAFStorageFile->saveConfig('livewaf') #2 {main} thrown in /home/wekjriusd1/public_html/wp-content/plugins/wordfence/vendor/wordfence/wf-waf/src/lib/storage/file.php on line 35