اسلایدر در وردپرس یکی از مهم‌ترین بخش‌های بصری سایت است که نقش مستقیم در جذب کاربر و افزایش نرخ تبدیل دارد. در این مقاله یاد می‌گیریم چگونه با افزونه Slider Revolution یک اسلایدر حرفه‌ای، ریسپانسیو و بهینه طراحی کنیم.

سرفصل محتوا:

اسلایدر چیست و چرا اهمیت دارد؟

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

معرفی افزونه Slider Revolution

Slider Revolution یکی از قدرتمندترین ابزارهای ساخت اسلایدر در وردپرس است که امکان طراحی کاملاً حرفه‌ای با لایه‌های مختلف، انیمیشن و تعامل را فراهم می‌کند.

مراحل ساخت اسلایدر جدید

۱. ایجاد اسلایدر جدید

پس از نصب افزونه، وارد بخش Slider Revolution شوید و گزینه New Blank Module را انتخاب کنید.

۲. تنظیمات General

در این بخش می‌توانید عنوان اسلایدر، اندازه، نوع نمایش و رفتار کلی آن را تنظیم کنید. پیشنهاد می‌شود حالت Full Width برای طراحی مدرن استفاده شود.

۳. تنظیمات Navigation

در این قسمت می‌توانید فلش‌ها، دکمه‌ها و نقاط ناوبری را فعال کنید تا کاربر بتواند بین اسلایدها حرکت کند.

۴. تنظیمات Slide

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

۵. Layer Options

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

طراحی Hero Section حرفه‌ای

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

ریسپانسیو کردن اسلایدر

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

درج باکس جستجو روی روولوشن اسلایدر (Revolution Slider)

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

روش اول: استفاده از کد HTML داخل روولوشن اسلایدر

از بخش Layer در بالای محیط ویرایش اسلایدر، گزینه Text / HTML را انتخاب کنید.

سپس کد زیر را داخل لایه قرار دهید:

<form role="search" method="get" class="revtp-searchform" action="/">
    <input
        type="text"
        name="s"
        placeholder="چه چیزی جستجو می‌کنید؟"
    />

    <input
        type="submit"
        value="جستجو"
    />
</form>

نکته: مقدار action="/" را در صورت نیاز با آدرس دلخواه خود تغییر دهید.

پس از ذخیره تغییرات، فرم جستجو روی اسلایدر نمایش داده می‌شود.

شخصی‌سازی ظاهر فرم جستجو

اگر ظاهر باکس جستجو مطابق نیاز شما نیست، کدهای زیر را از مسیر:

نمایش ← سفارشی‌سازی ← CSS اضافی

یا از طریق افزونه‌های ویرایش استایل مانند مداد زرد اضافه کنید.

.revtp-searchform input[type="text"]{
    width:260px;
    padding:8px;
    font-size:16px;
    border:none;
    margin:0 auto;
}

.revtp-searchform input[type="submit"]{
    padding:10px 12px;
    font-size:16px;
    background:#009aee;
    color:#fff;
    border:none;
    text-shadow:none;
    cursor:pointer;
}

روش دوم: استفاده از شورتکد افزونه‌های جستجو

در این روش نیز مانند قبل از قسمت Layer → Text / HTML استفاده کنید.

سپس شورتکد افزونه جستجوی موردنظر را داخل لایه قرار دهید.

[search_shortcode]

استفاده از فرم‌های دیگر روی اسلایدر

در صورتی که بخواهید فرم‌های دیگری مانند:

فرم تماس
فرم ثبت‌نام
فرم دریافت مشاوره
فرم عضویت خبرنامه

را روی روولوشن اسلایدر نمایش دهید، می‌توانید با افزونه‌هایی مانند Contact Form 7 یا Gravity Forms فرم را ایجاد کرده و شورتکد آن را داخل لایه Text / HTML قرار دهید.

اشتباهات رایج در طراحی اسلایدر

استفاده از اسلایدرهای سنگین و کند
قرار دادن متن زیاد روی اسلاید
استفاده از انیمیشن‌های بیش از حد
نداشتن CTA واضح

بهینه‌سازی اسلایدر برای سئو و سرعت

برای جلوگیری از کاهش سرعت سایت، تصاویر را فشرده کنید و تعداد اسلایدها را محدود نگه دارید. معمولاً 1 تا 3 اسلاید کافی است.

یادگیری طراحی حرفه‌ای سایت از همین نقطه شروع می‌شود

اگر می‌خواهید فقط یک سایت نداشته باشید، بلکه یک سیستم حرفه‌ای بسازید، مسیر آموزشی مناسب شما آماده است.

مشاهده مسیرها →

جمع‌بندی

اسلایدر یکی از مهم‌ترین بخش‌های طراحی سایت است. اگر به‌درستی طراحی شود، می‌تواند تأثیر مستقیم بر تجربه کاربر و نرخ تبدیل داشته باشد.

اسلایدر آماده است؛

در مرحله بعد ، وبلاگ (پست) را طراحی و تکمیل می‌کنیم.

مرحله بعدی →

سوالات متداول

Slider Revolution چیست؟

افزونه‌ای برای ساخت اسلایدرهای حرفه‌ای و انیمیشنی در وردپرس.

بهترین اندازه اسلایدر وردپرس چیست؟

معمولاً full width با نسبت 16:9 برای صفحه اصلی استفاده می‌شود.

آیا اسلایدر روی سرعت سایت تاثیر دارد؟

بله، اگر بهینه‌سازی نشود می‌تواند سرعت لود سایت را کاهش دهد.

چند اسلاید در صفحه اصلی مناسب است؟

بین 1 تا 3 اسلاید برای حفظ تمرکز کاربر بهترین حالت است.

مرحله دهم : ساخت اسلایدر حرفه‌ای در وردپرس با Slider Revolution

🧭 این مقاله بخشی از یک مسیر آموزشی است