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

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

مقدمه

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

نمایش قبل و بعد تصاویر با استفاده از افزونه BEAF

مرحله 1:

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

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

مرحله 2:

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

مرحله2:

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

لطفاً لینک مورد نظر برای “لینک بیشتر بخوانید” را درج کنید. سپس تصمیم بگیرید آیا می‌خواهید این لینک را در همان صفحه باز کنید یا در یک صفحه جدید.

مرحله 3:

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

مرحله 4:

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

مرحله 5:

اگر تمایل دارید تعداد بیشتری از تصاویر پیشین را ظاهر سازید، یک مقدار بزرگتر مانند 0.6، 0.7 یا بهتر از این وارد کنید. در صورت نیاز به نمایش کل تصویر پیشین، عدد 1 را وارد کنید. همان‌طور که در تصویر زیر مشاهده می‌فرمایید، نوار لغزنده در بالا یا سمت راست تصویر قبلی قرار گرفته است.

در تب بعدی که به نام “استایل” است، می‌توانید تنظیمات رنگی بخش‌های مختلف را مشخص کنید:

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

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

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

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