در آموزش های قبل با ساخت اسلایدر خام در روولوشن اسلایدر و ساخت تصاویر جذاب برای سایت آشنا شدید. در این قسمت یک اسلایدر جذاب را با آموخته های قبل طراحی می کنیم.
اسلایدر خام
در شروع طراحی میبایست یک اسلایدر خام ایجاد کنیم. برای این کار در پیشخوان وردپرس، منو 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 ” را به ردیف صفحه ساز اضافه کنید. از بین اسلایدرهایی که وجود دارد، اسلایدی که طراحی کرده اید را انتخاب کرده تا اسلایدر در برگه قرار گرفته و در وبسایت نمایش داده شود. همچنین برای نمایش اسلایدر میتوانید “کد کوتاه” آن را از قسمت “تنظیمات عمومی” اسلایدر کپی کرده و در هر پست تایپی که می خواهید قرار دهید.
آموزش نمایش اسلاید و شروع مقدماتی
در انتها و پس از طراحی اسلایدر و فراخوانی آن، برگه ای که اسلایدر در آن فراخوانی شده است . آن را در مرورگر باز کرده و اسلایدر را در سایتتان مشاهده نمایید.
38 دیدگاه. Leave new
درود , من تو تمام طراحی هام مشکل ردیف رو دارم به طوری در حالت پیش فرض بالای ستون نمیچسبه و من با مداد زرد و تنظیمات ستون اینو میکشم بالاتر که با هدر هم طراز بشه اما در کل ارتفاع کل ستون نسبت به ویدیو ها کمه ,تنظیمات ستون من مثل تنظیمات داخل ویدیو نیست
سلام وقت شما بخیر،
برای این که متوجه منظورتان شویم خواهشمند است تصویری از این مورد ارسال یا توضیحات بیشتری ارایه فرمایید.
با تشکر.
منم دقیقا این مشکل رو دارم ، میشه اینو بگید چطوری رفع کنیم ، و تو تنظیمات گزینه ارتفاع ردیف که مثلا میذاشتید روی ارتفاع به اندازه ی محتوا ، مال من اصلا این گزینه رو نداره
با سلام و وقت بخیر
احتراماً این بخش در نسخه جدید قالب تغییراتی کرده است و گزینه ارتفاع ردیف حذف شده و به جای آن گزینه تورفتگی ردیف اضافه شده که حالت پدینگ ردیف را دارد.
تصویر
اما اگر می خواهید یک ردیف را در نسخه جدید تمام عرض یا کامل نمایش دهید می توانید از گزینه زیر استفاده نمایید.
تصویر
پیروز و پاینده باشید
استاد عزیز دمت گرم بابت این آموزش منعطف و روان که همه چیز را مو به مو به ما یاد میدی از شما و تیم محبوب تون سپاسگزارم چون من تا حالا چنین آموزشی تو عمرم ندیدم که اینقدر همه چی در اختیار ما قرار میده اونم رایگان . بازم از شما آقای دکتر عزیز تشکر میکنم و از صمیم قلب برای شما و همه تیم شما از خداوند منان آرزوی خوشبختی و سلامتی دارم و امیدوارم هر جا که هستین پیروز و سربلند باشید و همچنان بدرخشید در دنیای وب و تکنولوژی .
عرض ادب و احترام جناب راشدی ، خوشحالیم که توانسته‌ایم به شما کمک کنم و مطالبی را ارائه دهم که برای شما مفید بوده‌اند. با آرزوی موفقیت برای شما .
سلام وقت بخیر. برای نصب و دانلود نرم افزار ایلوستریتور ، پیشنهاد شما کدام سایت است؟
باسلام خدمت شما
معمولا اکثر سایت های موجود در نتایج اول گوگل گزینه های مناسبی هستند و تفاوتی ندارد.
از حضور شما ممنونیم.
سلام وقت بخیر
برای ویندوز ۱۰ از چه آنتی ویروسی استفاده کنیم که به خاطر طراحی سایت و گرفتن اطلاعات مشتری ، ویندوز ویروسی نشه؟ اطلاعات از بین نره
سلام و عرض ادب
پیشنهاد می شود در صورت تمایل از سایت دیگر ما ، انتی ویروس تهیه نمایید.
پیشنهاد ما نود 32 است.
https://khatar.co/
باسلام من تازه طراحی سایت یاد گرفتم البته باافزونه المنتور
وتازه اول راهم .آموزشتون برای ساخت اسلایدر روولوشن خیلی خوب وبه نظر جامع بود.حتما باید خودم امتحان کنم ببینم به خوبی شما می تونم درست کنم .
یک سوال داشتم چه کار کنیم که اسلایدی راکه به حالت افقی در دسکتاپ می بینیم به همان حالت افقی در رسسپانسیو موبایل داشته باشیم مثل سایت دیجی کالا
چونکه من هرکاری می کنم نمیشه
ممنون که وقت گذاشته پاسخ می دهید
سلام و عرض ادب
اینکه افقی نمایش می دهد، اسلایدر نیست، المان های شبکه ای است.
در قالب خود هم می توانید از المان های شبکه ای استفاده نمایید.
با تشکر.
سلام و ممنون بخاطر آموزش هاتون ببخشید چجوری میتونم روی صفحه م عضویت و login رو اضافه کنم؟؟؟
سلام بر شما
دعوت می کنم تا آموزش افزونه آلتیمیت ممبر – ساخت سیستم عضویت وبسایت با Ultimate Member را مشاهده نمایید.
با تشکر
سلام
تنطیمات ردیف من با این چیزی که در فیلم نشان داده متفاوت است. در بخش آیتم بخش ارتفاع ردیف نداره ولی آیتم تو رفتگی عمودی داره.
مشکل از کجاست؟
سلام بر شما مهدی عزیز،
این بخش در نسخه جدید قالب تغییراتی کرده است و گزینه ارتفاع ردیف حذف شده و به جای آن گزینه تورفتگی ردیف اضافه شده که حالت پدینگ ردیف را دارد.
https://screen.center/s/pxaJ
اما اگر می خواهید یک ردیف را در نسخه جدید تمام عرض یا کامل نمایش دهید می توانید از دو گزینه زیر استفاده نمایید.
https://screen.center/s/EzNo
از حضور شما ممنونیم.
سلام و خسته نباشید در قسمت ماژول پس زمینه ما هر رنگی میدیم در پس زمینه لحاظ نمیشود چیکار کنیم؟؟؟
سلام و عرض ادب جناب بیاتی،
دو احتمال وجود دارد، اگر افزونه کش استفاده می کنید، باید کش افزونه را خالی نمایید و مورد دوم این است که باید سایت را با کلید کنترل F5 بروز رسانی نمایید تا کش مرورگر هم خالی شود تا تغییرات جدید را مشاهده نمایید.
با توجه به اینکه شما خریدار محصول هستید، می توانید برای دریافت سریع تر پاسخ سوالات خود، از ناحیه کاربری، تیکت ارسال نمایید.
با تشکر.
سلام روزبخیر
من میخوام به یه متن انیمیشن بدم که در لحظه ورود از بالا وارد شه و در هنگام رفتن به اسلاید بعدی از پایین خارج شه و بعد بره استایل بعدی.
باید از انیمیشن in و out استفاده کنم ولی انیمیشن out اعمال نمیشه هرکار میکنم . باید چیکار کنم؟
سلام و درود
لطفاً این مورد را در تیکت مطرح نمایید تا بررسی گردد.
با تشکر
سلام
آموزش خیلی خوبی بود. ممنونم
سلام خانم باقری عزیز
خواهش می کنم. حوشحالیم آموزش ها مورد رضاییتان واقع شده است.
با تشکر
یه پیام دارم برای کارشناسای پشتیبانی عزیز
سلام و احترام آقای شمسایی
بفرمایید در خدمتتان هستیم.
من یه قسمت از عکس رو که select میکنم با کلیک جابجا نمیشه با غلطک امتحان کردم کل عکس جابجا میشه با الت و کلیک امتحان کردم فقط shadow اون قسمتی کهمیخوام جابجا میشه در ایزولتور
چطوری باید فقط متنشو جابجا کنم ؟
و اینکه من فیلتر شکن داخل کامپیوترم ندارم اگه میشه لطف کنید فایل زیپ عکس این قسمت و قسمت قبلی رو اپلود کنید. با تشکر
احتراماً آقای شمسایی
برای این مورد یک تیکت از ناحیه کاربری ارسال کنید تا بررسی کنیم.
با تشکر
درود بر استاد جبین پور عزیز. ممنون از آموزش های عالی شما
عالی مثل همیشه دستمریزاد جناب جبین پور عزیز
مرسی آقای جبین پور که علم و وقت ارزشمندتون رو رایگان و بدون منت در سایت برای استفاده ی عموم قرار دادید. بنده قالبم را از سایت دیگری خریدم ولی چون آموزش ویدئویی ندارن و به تماس ها خیلی پاسخ نمیدهند از آموزش های خوب شما استفاده میکنم برای پیشبرد کارم. راضی باشید قربان
ی سوال
در برخی از سایت ها دیدم کخ یک المان مثل یک تصویر به صورت دائم حرکت می کند و ثابت نیست. بنظر شما به چه شیوه ای این مورد را ایجاد کرد؟
سلام خانم خانلو بزرگوار
خواهش می کنم. می توانید از آموزش زیر برای موضوعی که مد نظرتان است استفاده کنید.
آموزش کار با حلقه ها در روولوشن اسلایدر
از حضورتان سپاسگزاریم.
سلام وقت بخیر
ممنون از سایت خوبتون
چطور میتونیم اسلاید هاییی طراحی کنیم که دورش منحنی داشته باشه؟
**********
مثل سایت بالا
سلام آقای پورمحمدی عزیز
از طریق افزونه مداد زرد می توانید حاشیه های گرد به اسلایدرتان بدهید.
با تشکر
سلام
ممنونم استاد از آموزش بی نظیرتون
یه پرسش؟
چجوری به دکمه لینک بدیم؟؟
سلام و احترام
ابتدا دکمه را انتخاب کنید و سپس مانند تصویر Actions را انتخاب کنید و سپس لینک ساده را انتخاب و در قسمت آدرس لینک لینک را وارد کنید.
با تشکر
خواهش می کنم. لطفاً یک اکانت دیگر ایجاد نمایید و مجدد بررسی بفرمایید.
با تشکر