اسلایدر قبل و بعد در وردپرس دو تصویر را در یک قاب نمایش می‌دهد تا کاربر با جابه‌جایی جداکننده، تغییر را ببیند. این ابزار برای مقایسهٔ طراحی قدیم و جدید سایت یا کیفیت تصویر پیش و پس از بهینه‌سازی مناسب است. نتیجه باید واقعی و قابل‌فهم باشد؛ افکت نمایشی به‌تنهایی فروش یا رتبهٔ بهتر ایجاد نمی‌کند.
انتخاب تصاویر برای مقایسهٔ درست
دو فایل با نسبت طول به عرض یکسان آماده کنید. اگر از صفحهٔ سایت اسکرین‌شات می‌گیرید، عرض پنجره، بزرگ‌نمایی مرورگر و محدودهٔ برش را یکسان نگه دارید. اختلاف اندازه و زاویه باعث می‌شود کاربر تغییر واقعی را با جابه‌جایی قاب اشتباه بگیرد.
برای مقایسهٔ فشرده‌سازی، هر دو نسخه باید از یک تصویر باشند. حجم فایل، فرمت و تنظیم کیفیت را کنار نمونه بنویسید. فقط تغییر ظاهر، ثابت نمی‌کند سرعت صفحه بهتر شده است. از فایل‌های مجاز استفاده کنید و اطلاعات حساب، کلید یا دادهٔ مشتری را پیش از انتشار از اسکرین‌شات حذف کنید.
ساخت اسلایدر قبل و بعد در وردپرس با BEAF
افزونهٔ Ultimate Before After Image Slider & Gallery – BEAF از Themefic در مخزن رسمی موجود است. برای شروع، از افزونه‌ها ← افزودن، نام BEAF را جستجو و سازنده را بررسی کنید. نسخهٔ سازگار با وردپرس خود را نصب و فعال کنید.
- منوی Before and After Slider افزونه را باز و Add New را انتخاب کنید.
- عنوانی بنویسید که این مقایسه را در فهرست مدیریت مشخص کند.
- در بخش Before Image، تصویر وضعیت اولیه را انتخاب کنید.
- در بخش After Image، تصویر وضعیت نهایی را اضافه کنید؛ انتخاب تصویر اول کافی نیست.
- برچسب‌ها و تنظیمات نمایش را تعیین و اسلایدر را ذخیره یا منتشر کنید.
- شورت‌کدی را که افزونه برای همین اسلایدر ساخته است کپی کنید.
نام گزینه‌ها ممکن است با نسخه یا زبان پنل متفاوت باشد. راهنمای رسمی اسلایدر BEAF مسیر مرجع محصول است. شناسهٔ یک نمونهٔ آموزشی را داخل شورت‌کد خود کپی نکنید؛ هر اسلایدر شناسهٔ مربوط به خودش را دارد.
جهت، برچسب و رفتار جداکننده
چیدمان افقی یا عمودی را بر اساس محتوای تصاویر انتخاب کنید. برچسب‌های «قبل» و «بعد» باید بدون اتکا به رنگ، وضعیت هر طرف را روشن کنند. برای مقایسهٔ طراحی، عباراتی مانند «نسخهٔ قبلی» و «طرح جدید» دقیق‌ترند.
اگر گزینهٔ موقعیت اولیه یا Offset را تغییر می‌دهید، پیش‌نمایش را ببینید تا بخش مهم هر دو تصویر دیده شود. مقدار میانی معمولاً نقطهٔ شروع مناسبی است، اما نتیجه به جهت و ترکیب تصویر بستگی دارد. گزینه‌های حرکت با ماوس یا کلیک را صرفاً به خاطر وجودشان فعال نکنید؛ روی گوشی رفتار متفاوتی دارند.
قابلیت‌هایی مانند مقایسهٔ سه تصویر، ویدئو، واترمارک و بعضی طرح‌های نمایشی در نسخهٔ Pro ارائه می‌شوند. قبل از طراحی صفحه بر اساس یک نمونهٔ تبلیغاتی، در دسترس‌بودن همان قابلیت در نسخهٔ خود را بررسی کنید.
درج در نوشته یا صفحه‌ساز
در ویرایشگر بلوکی، یک بلوک Shortcode اضافه کنید و شورت‌کد تولیدشده را داخل آن بگذارید. در Elementor از ابزار Shortcode استفاده کنید. قراردادن کد در بلوک Code ممکن است فقط متن کد را نمایش دهد و اسلایدر اجرا نشود.
بعد از ذخیرهٔ برگه، نمایش مهمان را ببینید. برای هر تصویر متن جایگزین توصیفی تعیین کنید؛ مانند «صفحهٔ محصول پیش از بازطراحی». زیر اسلایدر نیز تفاوت اصلی را در یک جمله توضیح دهید تا فهم نتیجه به کشیدن جداکننده وابسته نباشد.
نمایش موبایل، سرعت و رفع اشکال
- روی صفحهٔ باریک، برچسب‌ها و دستگیره نباید بخش مهم تصویر را بپوشانند.
- پیمایش صفحه و لمس جداکننده را جداگانه امتحان کنید.
- دسترسی با صفحه‌کلید را بررسی کنید؛ اگر کنترل قابل‌استفاده نیست، دو تصویر مستقل و توضیح متنی هم ارائه دهید.
- فایل چندمگابایتی را برای یک قاب کوچک بارگذاری نکنید؛ ابعاد و فشرده‌سازی را متناسب کنید.
- اگر فقط یک تصویر دیده می‌شود، ابتدا انتخاب و نشانی هر دو فایل را بررسی کنید.
- اگر دستگیره کار نمی‌کند، خطای اسکریپت و تداخل بهینه‌سازی یا تأخیر JavaScript را بررسی کنید.
رفع تداخل را روی همان فایل یا تنظیم مرتبط انجام دهید. غیرفعال‌کردن همهٔ بهینه‌سازی‌های سایت برای یک اسلایدر، راه‌حل نهایی مناسبی نیست.
مطالعهٔ مرتبط
بازبینی فنی: ۱۳ آبان ۱۴۰۵. تاریخ انتشار اولیه و نشانی قبلی حفظ شده‌اند.
