ساخت اسلایدر خلاقانه در روولوشن اسلایدر

( )

حق کپی ویدئو

مجاز نمی باشد.

شما اینجا هستید :

جلسه هفتاد و نه

آموزگار :

مهدی جبین پور

در آموزش های قبل با ساخت اسلایدر خام در روولوشن اسلایدر و ساخت تصاویر جذاب برای سایت آشنا شدید. در این قسمت یک اسلایدر جذاب را با آموخته های قبل طراحی می کنیم. ( ادامه مطلب … )

روولوشن اسلایدر فارسی

افزونه روولوشن اسلایدر ، راهی برای جذاب شدن سایت …

افزونه اسلایدر روولوشن قدرتمند برای اولین بار بصورت اورجینال توسط تیم ابزار وردپرس ارائه شده و شامل دمو های بسیار زیبا می باشد.

روولوشن اسلایدر فارسی

افزونه روولوشن اسلایدر ، راهی برای جذاب شدن سایت …

افزونه اسلایدر روولوشن قدرتمند برای اولین بار بصورت اورجینال توسط تیم ابزار وردپرس ارائه شده و شامل دمو های بسیار زیبا می باشد.

اورجینال

کیفیت

پشتیبانی

آپدیت

مهدی جبین پور

مـهـدی جـبین پـور

دانشجوی دکتری تجارت الکترونیک ، امیدوارم بتوانم خدمتگزار خوبی برای مردم کشورم باشم.

مهدی جبین پور

مـهـدی جـبین پـور

دانشجوی دکتری تجارت الکترونیک ، امیدوارم بتوانم خدمتگزار خوبی برای مردم کشورم باشم.

ساخت اسلایدر خلاقانه در روولوشن اسلایدر

( )

در آموزش ­های قبل با ساخت اسلایدر خام در روولوشن اسلایدر و ساخت تصاویر جذاب برای سایت آشنا شدید. در این قسمت یک اسلایدر جذاب را با آموخته ­های قبل طراحی می­ کنیم.

اسلایدر خام

در شروع طراحی می­بایست یک اسلایدر خام ایجاد کنیم. برای این کار در پیشخوان وردپرس، منو Slider Revolution  را انتخاب کرده و سپس گزینه “ساخت اسلایدر جدید” را کلیک کنید.

صفحه پیش­رو، صفحه ساخت اسلایدر خام است. از منو “تنظیمات عمومی ماژول”، برای اسلایدر “عنوان” و “نام مستعار” در نظر گرفته و ذخیره کنید.(بهتر است نام­ گذاری ماژول اسلایدر با حروف انگلیسی انجام شود.)

حال برای انتخاب تصویر برای اسلاید، از سایت freepik.com استفاده می ­کنیم. موضوع تصویر را جستجو کنید. از بین تصاویری که مشاهده می­ کنید، تصویر دلخواه را دانلود کنید. در فایل تصویر که با فرمت .zipدانلود شده است، فایل­ هایی با فرمت .eps یا .ai را کلیک کنید تا فایل در نرم افزار Illustrator باز شود.

با استفاده از انتخاب­ گرهای نرم ­افزار Illustrator ، هر کدام از لایه ­های تصویر که برای طراحی اسلایدر نیاز دارید را انتخاب کنید.

 در نرم ­افزار Photoshop یک سند با ابعاد دلخواه ایجادکنید. لایه­ های تصویر را با دراگ و دراپ(Drog&Drop) از نرم ­افزار Illustrator به نرم­ افزار Photoshop منتقل کرده و ابعاد آن را تنظیم نمایید.

به یاد داشته باشید از نوار سمت راست، لایه Background سفید را حذف کرده تا پس ­زمینه تصویر شفاف باشد. لایه ­ای که در نرم­  افزار Photoshop ایجاد کردید را با فرمت .png ذخیره کنید.

کم کردن حجم تصاویر 

بهتر است برای زمان لود مناسب اسلایدر در سایت، حجم تصاویر کم شود. سایت tinypng.com به طور آنلاین با فشرده کردن تصویر باعث کم شدن حجم تصویر می­ شود. تصویری که با فرمت .png ذخیره کردید را در سایت tinypng  آپلود کرده و پس از فشره شدن دوباره آن را دانلود کنید.

پس از فشرده­ سازی تصویر، در افزونه روولوشن اسلایدر، منو “تنظیمات اسلاید ß پس ­زمینه” را انتخاب کرده و نوع پس ­زمینه را تصویر قرار داده و سپس از کتابخانه رسانه تصویر فشرده را که بارگذاری و انتخاب کنید.

برای تنظیم ارتفاع اسلایدر، از منو “تنظیمات عمومیßطرح­ بندی”، ارتفاع مناسب اسلایدر را برای دستگاه­ های مختلف(مانیتور، لپ­تاپ، موبایل و…) تنظیم کنید.

تا اینجا پس ­زمینه اسلایدر ایجاد شده است.

هر کدام از لایه­ های دیگر تصویر که می­خواهید در اسلایدر نمایش داده شود را از نرم افزار Illustrator انتخاب کرده و پس از انتقال به Photoshop و حذف لایه   ­های اضافی آن با فرمت .png ذخیره کنید. یادآوری می­ شود از سایت tinypng برای فشرده­ سازی تصویر اقدام کنید.

برای اضافه کردن تصویر به اسلاید، از منو بالایی افزونه روولوشن اسلایدر “افزودن لایهßتصویر” را انتخاب کنید. با کلیک روی لایه تصویر اضافه شده، تصویر مورد نظر را در کتابخانه پرونده ­های چند رسانه ­ای وردپرس بارگذاری و انتخاب کنید.

درصورت لزوم ابعاد تصویر را تغییر داده و در اسلایدر جایگذاری نمایید.

لایه­ های دیگر اسلایدر را نیز با روش گفته شده در بالا ایجاد کنید.

همچنین می­توانید برای هر کدام از لایه ­های اسلایدر افکت اضافه کنید. برای این کار پس از انتخاب لایه، از منو “تنظیمات لایهßحلقه لایه” را انتخاب کنید. سپس قسمت افکت را فعال کرده و از جعبه باز شونده “بارگذاری قالب حلقه”، افکت دلخواه را به لایه اضافه کنید. همچنین می­توانید سرعت حرکت افکت را نیز تنظیم نمایید..

محتوای لایه های متن

برای اضافه کردن متن به اسلایدر، از منو بالایی افزونه روولوشن اسلایدر “افزودن لایهßمتن” را انتخاب کنید. در جعبه “محتوای لایه­  های متن”، متن دلخواه را بنویسید. همچنین می­توانید از منو “تنظیمات لایهßاستایل”، رنگ متن، فونت، اندازه و… را تغییر دهید.

اگر بخواهید متن با انیمیشن نمایش داده شود پس از انتخاب لایه متنی، از منو “تنظیمات لایهß انیمیشن” و جعبه باز شونده “IN” مدل دلخواه برای انیمیشن متن را کلیک کنید.

اضافه کردن متن،تصویر

برای هر یک از لایه ­های دیگر مثل متن، تصویر ، دکمه و… نیز می­توانید انیمیشن اضافه کنید.

در صورتی­ که بخواهید به اسلاید دکمه اضافه کنید، از منو بالایی گزینه “افزودن لایهßدکمه” را کلیک و مدل دکمه دلخواهتان را انتخاب کرده و متن دکمه را نیز تغییر دهید. همچنین مانند متن می­توانید فونت، رنگ پس­زمینه و… دکمه را نیز تغییر دهید.

 

بخش فراخوانی

حال برای نمایش اسلایدر، در برگه یا هر پست ­تایپی که می­خواهید، باید اسلاید فراخوانی شود.

اگر از صفحه ­ساز ویژوال کامپوزر استفاده می­کنید، المان “Slider Revolution ” را به ردیف صفحه­ ساز اضافه کنید.  از بین اسلایدرهایی که وجود دارد، اسلایدی که طراحی کرده­ اید را انتخاب کرده تا اسلایدر در برگه قرار گرفته و در وب­سایت نمایش داده شود. همچنین برای نمایش اسلایدر می­توانید “کد کوتاه” آن را از قسمت “تنظیمات عمومی” اسلایدر کپی کرده و در هر پست­ تایپی که می­  خواهید قرار دهید.

آموزش نمایش اسلاید و شروع مقدماتی

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

برای نوشتن دیدگاه باید وارد بشوید.

40 دیدگاه. Leave new

  • زهرا صالحی
    2025-01-23 13:16

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

  • امیرحسین پاکنعمت
    2023-08-22 15:54

    درود , من تو تمام طراحی هام مشکل ردیف رو دارم به طوری در حالت پیش فرض بالای ستون نمیچسبه و من با مداد زرد و تنظیمات ستون اینو میکشم بالاتر که با هدر هم طراز بشه اما در کل ارتفاع کل ستون نسبت به ویدیو ها کمه ,تنظیمات ستون من مثل تنظیمات داخل ویدیو نیست

    • کامران قائمی
      2023-08-22 17:57

      سلام وقت شما بخیر،

      برای این که متوجه منظورتان شویم خواهشمند است تصویری از این مورد ارسال یا توضیحات بیشتری ارایه فرمایید.

      با تشکر.

    • پیمان چگنی راد
      2023-10-12 09:18

      منم دقیقا این مشکل رو دارم ، میشه اینو بگید چطوری رفع کنیم ، و تو تنظیمات گزینه ارتفاع ردیف که مثلا میذاشتید روی ارتفاع به اندازه ی محتوا ، مال من اصلا این گزینه رو نداره

      • کامران قائمی
        2023-10-14 09:03

        با سلام و وقت بخیر

        احتراماً این بخش در نسخه جدید قالب تغییراتی کرده است و گزینه ارتفاع ردیف حذف شده و به جای آن گزینه تورفتگی ردیف اضافه شده که حالت پدینگ ردیف را دارد.

        تصویر

        اما اگر می خواهید یک ردیف را در نسخه جدید تمام عرض یا کامل نمایش دهید می توانید از گزینه زیر استفاده نمایید.

        تصویر

        پیروز و پاینده باشید

  • حسین راشدی
    2023-08-21 19:08

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

    • علی حیدری
      2023-08-22 17:15

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

  • فاطمه نامی
    2023-08-01 12:52

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

  • فاطمه مشهدی رضا
    2023-01-09 08:49

    سلام وقت بخیر
    برای ویندوز ۱۰ از چه آنتی ویروسی استفاده کنیم که به خاطر طراحی سایت و گرفتن اطلاعات مشتری ، ویندوز ویروسی نشه؟ اطلاعات از بین نره

  • عذرا رحمتی
    2022-07-10 09:53

    باسلام من تازه طراحی سایت یاد گرفتم البته باافزونه المنتور
    وتازه اول راهم .آموزشتون برای ساخت اسلایدر روولوشن خیلی خوب وبه نظر جامع بود.حتما باید خودم امتحان کنم ببینم به خوبی شما می تونم درست کنم .
    یک سوال داشتم چه کار کنیم که اسلایدی راکه به حالت افقی در دسکتاپ می بینیم به همان حالت افقی در رسسپانسیو موبایل داشته باشیم مثل سایت دیجی کالا
    چونکه من هرکاری می کنم نمیشه
    ممنون که وقت گذاشته پاسخ می دهید

    • علی حیدری
      2022-07-10 10:59

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

      با تشکر.

  • محمد مرزانی
    2022-04-26 17:17

    سلام و ممنون بخاطر آموزش هاتون ببخشید چجوری میتونم روی صفحه م عضویت و login رو اضافه کنم؟؟؟

  • مهدی ابراهیم نژاد
    2022-04-20 20:32

    سلام
    تنطیمات ردیف من با این چیزی که در فیلم نشان داده متفاوت است. در بخش آیتم بخش ارتفاع ردیف نداره ولی آیتم تو رفتگی عمودی داره.
    مشکل از کجاست؟

    • علی حیدری
      2022-04-21 09:09

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

      https://screen.center/s/pxaJ

      اما اگر می خواهید یک ردیف را در نسخه جدید تمام عرض یا کامل نمایش دهید می توانید از دو گزینه زیر استفاده نمایید.

      https://screen.center/s/EzNo
      از حضور شما ممنونیم.

  • حسین بیاتی
    2022-02-22 14:31

    سلام و خسته نباشید در قسمت ماژول پس زمینه ما هر رنگی میدیم در پس زمینه لحاظ نمیشود چیکار کنیم؟؟؟

    • کارشناس پشتیبانی شماره دو
      2022-02-22 19:45

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

  • فاطمه کرمانی
    2022-01-04 17:53

    سلام روزبخیر
    من میخوام به یه متن انیمیشن بدم که در لحظه ورود از بالا وارد شه و در هنگام رفتن به اسلاید بعدی از پایین خارج شه و بعد بره استایل بعدی.
    باید از انیمیشن in و out استفاده کنم ولی انیمیشن out اعمال نمیشه هرکار میکنم . باید چیکار کنم؟

  • سمانه باقری
    2021-12-20 15:50

    سلام

    آموزش خیلی خوبی بود. ممنونم

  • عیسی شمسایی
    2021-10-13 23:18

    یه پیام دارم برای کارشناسای پشتیبانی عزیز

    • کارشناس پشتیبانی شماره چهار
      2021-10-14 08:37

      سلام و احترام آقای شمسایی
      بفرمایید در خدمتتان هستیم.

      • عیسی شمسایی
        2021-10-14 11:22

        من یه قسمت از عکس رو که select میکنم با کلیک جابجا نمیشه با غلطک امتحان کردم کل عکس جابجا میشه با الت و کلیک امتحان کردم فقط shadow اون قسمتی کهمیخوام جابجا میشه در ایزولتور
        چطوری باید فقط متنشو جابجا کنم ؟
        و اینکه من فیلتر شکن داخل کامپیوترم ندارم اگه میشه لطف کنید فایل زیپ عکس این قسمت و قسمت قبلی رو اپلود کنید‌. با تشکر

  • مصطفی شریعتمداری
    2021-10-07 14:20

    درود بر استاد جبین پور عزیز. ممنون از آموزش های عالی شما

  • محسن دهقانی
    2021-09-23 01:44

    عالی مثل همیشه دستمریزاد جناب جبین پور عزیز

  • زهره خانلو
    2021-09-09 01:53

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

    ی سوال
    در برخی از سایت ها دیدم کخ یک المان مثل یک تصویر به صورت دائم حرکت می کند و ثابت نیست. بنظر شما به چه شیوه ای این مورد را ایجاد کرد؟

  • وحید پورمحمدی سیس
    2021-07-15 16:41

    سلام وقت بخیر
    ممنون از سایت خوبتون
    چطور میتونیم اسلاید هاییی طراحی کنیم که دورش منحنی داشته باشه؟
    **********
    مثل سایت بالا

  • مهدی آسا
    2021-06-26 17:23

    سلام
    ممنونم استاد از آموزش بی نظیرتون
    یه پرسش؟
    چجوری به دکمه لینک بدیم؟؟

  • کارشناس پشتیبانی شماره چهار
    2021-12-19 08:14

    خواهش می کنم. لطفاً یک اکانت دیگر ایجاد نمایید و مجدد بررسی بفرمایید.
    با تشکر

فهرست