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

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

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

تصویر قبل و بعد یک تصویر تعاملی است که معمولاً نوعی تغییر را نشان می دهد. بازدیدکنندگان می‌توانند از یک نوار لغزنده برای جابه‌جایی بین «نسخه‌های» مختلف تصویر به روشی جذاب و تعاملی استفاده کنند. اگر یک فروشگاه آنلاین را با استفاده از افزونه ای مانند ووکامرس راه اندازی میکنید یا سایت دکتر زیبایی دارید، عکس قبل و بعد می تواند تأثیر محصولات یا خدمات شما را نشان دهد.

شما فقط باید یک عکس “قبل” را که مشتری می تواند با آن ارتباط برقرار کند و یک عکس “بعد” مطلوب را نشان دهید. این کار باعث می شود خریداران بخواهند چیزی را بخرند که آنها را از حالت “قبل” به “بعد” می برد. اگر شما یک بازاریاب وابسته هستید، پس نشان دادن عکس‌های متقاعدکننده قبل و بعد در وب‌سایتتان راهی عالی برای تبلیغ لینک‌های وابسته خود و کسب فروش بیشتر است.

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

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

ساده‌ترین راه برای ایجاد عکس‌های قبل و بعد، استفاده از Ultimate Before After Image Slider & Gallery (BEA) است. افزونه BEA به شما امکان می‌دهد لغزنده‌های افقی و عمودی ایجاد کنید و تصویر را با برچسب‌ها و رنگ‌های مختلف سفارشی کنید.

مرحله اول: نصب و فعالسازی افزونه

اولین کاری که باید انجام دهید این است که افزونه Ultimate Before After Image Slider & Gallery (BEA) را نصب و فعال کنید. پس از فعال سازی، به قسمت Before and After Slider » Add New جدید در داشبورد خود بروید. برای شروع، یک نام برای نوار لغزنده تصویر تایپ کنید.

پس از انجام این کار، می‌توانید تصویر “before” را با اسکرول به بخش “Before Image” اضافه کنید. در اینجا، روی «Add or Upload Image» کلیک کنید و سپس یک عکس را از کتابخانه رسانه وردپرس انتخاب کرده یا یک فایل جدید را از رایانه خود آپلود کنید.

برای کمک به موتورهای جستجو برای درک این تصویر و نشان دادن آن به افراد هم حوزه، بخش متن جایگزین موجود است و می‌توانید آن را اضافه کنید. برای انجام این کار، به سادگی در قسمت “Image Alt” متن موردنظر را وارد کنید.

مرحله دوم: افزودن متن جایگزین به تصویر

پس از انجام این کار، به بخش «After Image» بروید.

اکنون می‌توانید با دنبال کردن همان فرآیند بالا، تصویر «بعد» را اضافه کنید. فراموش نکنید که متن جایگزین را نیز به این تصویر اضافه کنید، زیرا برای سئوی وردپرس مهم است.

همچنین می‌توانید با افزودن عنوان و توضیحات، متنی را در زیر تصویر نشان دهید. برای مثال، ممکن است مخاطبین را تشویق کنید تا با اسلایدر تعامل داشته باشند. این به ویژه برای مخاطبینی که ممکن است قبلاً هرگز با عکس قبل و بعد روبرو نشده باشند، مهم باشد.

برای افزودن پیوند، مقصد را در قسمت «Read More Link» تایپ کنید. سپس می توانید تصمیم بگیرید که آیا پیوند را در همان برگه باز کنید یا در یک تب جدید با استفاده از منوی کشویی «Read More Link Target».

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

اگر به وب‌سایت دیگری پیوند می‌دهید، توصیه می‌کنیم «New tab» را انتخاب کنید تا بازدیدکنندگان را از وبلاگ وردپرس خود دور نکنید. با انجام این کار، می‌توانید با کلیک بر روی یکی از تصاویر کوچک در بخش «Orientation Style»، انتخاب کنید که آیا می‌خواهید یک نوار لغزنده عمودی یا افقی ایجاد کنید.

پس از آن، به بالای صفحه اسکرول و روی “Options” کلیک کنید. در اینجا، خواهید دید که «تغییر پیش‌فرض» ۰.۵ تنظیم شده است. این به این معنی است که بازدید کننده نیمی از تصویر “قبل” را هنگام بارگیری صفحه برای اولین بار می بیند.اگر می‌خواهید تعداد بیشتری از تصویر قبل را نشان دهید، یک عدد بزرگتر مانند ۰.۶، ۰.۷ یا بالاتر تایپ کنید. اگر می‌خواهید کل تصویر قبل را نشان دهید، ۱ را تایپ کنید.

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

به طور پیش فرض، بازدیدکنندگان نوار لغزنده را با استفاده از کشیدن و رها کردن حرکت می دهند. برخی از افراد ممکن است این کار را دشوار بدانند، به خصوص اگر مشکلات حرکتی داشته باشند یا از دستگاه های کوچکتری مانند تلفن های هوشمند یا تبلت استفاده می کنند. با این گفته، ممکن است بخواهید نحوه حرکت بازدیدکنندگان اسلایدر را تغییر دهید. اگر دکمه «بله» را در کنار «حرکت لغزنده در حالت شناور ماوس» انتخاب کنید، بازدیدکنندگان می‌توانند به سادگی با نگه داشتن ماوس روی تصویر، نوار لغزنده را حرکت دهند.

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

پیشنهاد مطالعه: ۲ روش تبدیل ویرایشگر کلاسیک به بلوک وردپرس