آموزش طراحی اسلایدر جذاب
پس از یادگیری مفاهیم اولیه روولوشن اسلایدر و آشنایی با بعضی از امکانات این افزونه قدرتمند، در این قسمت میخواهیم روش ساخت اسلایدر مناسب برای سایت را توضیح دهیم.
از پیشخوان وردپرس، منو Slider Revolution و سپس گزینه “ساخت اسلایدر جدید” را انتخاب کنید. اسلایدر را با اضافه کردن، عنوان و نام مستعار نامگذاری کنید.
freepik
بر اساس طراحی و موضوع سایتتان، به ساخت اسلایدر فکر کنید. یک نمای کلی از اسلایدر در ذهنتان ترسیم کنید. میتوانید از اینترنت برای دانلود تصاویر مناسب برای اسلایدر کمک بگیرید. همچنین در وبسایت freepik.com نیز تصاویر زیبا و با کیفیت وجود دارد . فقط کافیست موضوع تصویری که به دنبال آن هستید را در سایت freepik جستجو کنید تا با تصاویر بسیار زیادی روبرو شوید. تصاویر و وکتورهای موجود در سایت freepik گرافیکی و لایه باز هستند. دست شما برای استفاده از تصاویر باز است و میتوانید هر قسمتی از تصویر که خواستید را جدا کرده و استفاده کنید. به این نکته توجه داشته باشید که سایت freepik محدود بوده و برای استفاده می بایست از نرم افزارهای رفع فیلتر استفاده کنید. این سایت دارای تصاویر بسیار زیادی است. بیشتر آن ها رایگان است و فقط تصاویری که دارای آیکون تاج هستند، غیر رایگان هستند.
پس از جستجو و پیدا کردن تصویر دلخواهتان آن را دانلود کنید. پس از دانلود تصویر، یک فایل فشرده با فرمت .zip در اختیار شما قرار میگیرد. روی آن کلیک کنید. این فایل خود حاوی چند فایل است که در آن فایل های متنی و با فرمت .jpg کاربرد ندارند. و فایل هایی با فرمت .eps و .ai مورد استفاده قرار میگیرند.
نرم افزار Illustrator
با کلیک بر روی هر کدام از این دو فایل گفته شده (فایل هایی با فرمت .eps و .ai)، تصویر در نرم افزار Illustrator باز میشود. توجه داشته باشید که این نرم افزار بر روی سیستم نصب باشد. پس از باز شدن تصویر در نرم افزار، بهتر است آن را کمی بزرگ کرده تا راحت تر بتوانید جزییات آن را ویرایش کنید. با کمک انتخاب گرها و ابزارهای نرم افزار Illustrator تصویر را ویرایش کرده و تغییراتی که میخواهید در آن ایجاد کنید.
سپس در نرم افزار Photoshop، از گزینه” File ß New” ابعاد دلخواهی برای تصویر انتخاب کنید. یک سند جدید ایجاد کنید. حال تصویر پس زمینه را با درگ و دراپ (Drag&Drop)از نرم افزار Illustrator به نرمافزار Photoshop منتقل و تصویر را ذخیره کنید. (تصویری که میخواهید برای پس زمینه اسلایدر استفاده کنید را با فرمت .jpg و تصاویر دیگر را با فرمت .png ذخیره کنید.)
توجه داشته باشید برای نمایش بهتر اسلایدر و لود تصاویر در سایت، ابتدا تصویر را فشرده کنید. سپس در سایت آپلود و استفاده کنید. برای فشرده سازی و کم کردن حجم تصاویر، از سایت compresspng.com استفاده کنید. این سایت حجم تصاویر را بدون افت کیفیت تصویر، کم میکند.
Slider Revolution
حال دوباره در افزونه Slider Revolution وارد شده و از مسیر “تنظیمات اسلایدßپس زمینه”، نوع تصویر را انتخاب کنید. تصویری که برای پس زمینه اسلایدر ساخته اید، از کتابخانه رسانه آپلود کنید. اندازه اسلایدر را نیز مسیر “تنظیمات عمومی ماژولßطرح بندی”، تغییر دهید.
تصاویر دیگری که میخواهید به اسلایدر اضافه کنید را مانند بالا دانلود و پس از ویرایش و فشرده سازی در سایت آپلود کنید. میتوانید از لایه های دیگر برای اضافه کردن به اسلایدر استفاده کنید. مثلاً با اضافه کردن لایه متنی، متنی را در اسلایدر قرار دهید.
پس از طراحی اسلایدر، با استفاده از کد کوتاه (Short Code) و یا با اضافه کردن المان slider Revolution در صفحه ساز ویژوال کامپوزر، اسلایدر را به صفحه سایت اضافه کنید.سپس با باز کردن سایت در مرورگر، اسلایدر را مشاهده نمایید.
24 دیدگاه. Leave new
سلام روز بخیر. با صفحه ساز المنتور هم میشه روولیشن اسلاید رو طراحی کرد
المنتور با کامپوزر تفاوتی دارد برای طراحی ؟
ممنون
سلام و عرض ادب
اسلایدر را که در خوده اسلایدر روولوشن باید طراحی کرد. شورتکد آن را می توانید در هر صفحه سازی استفاده نمایید.
با تشکر.
ببخشید من وقتی پس زمیتنمو اپلود میکنم بی کیفیت اپلود میشه و اصلا وست صفحه اصلیمم نیست یعنی یا بالا تره یا پایین تره و…و نمیتونم جاشم تو روولوشن تغییر بدم ثابته باید چیکار کنم
سلام بر شما سجاد عزیز،
این آموزش و آموزش های ادامه آن را مشاهده نمایید، موارد مهم ضروری را در آموزش بیان کرده ایم. مورد شما را بنده دقیقاً نمی توانم ببینم که راهنمایی کنم، حتماً در ادامه اموزش ها مشکل شما حل می شود.
سلام خسته نباشید
اگر من بخواهم فهرست منوی سایتم رو روی اسلایدی که ساختم قرار بدهم باید چه روشی رو برم؟
ممنونم
سلام خانم مهربان عزیز
برای این موضوع می بایست از هدر شفاف در قالبتان استفاده کنید.
با تشکر
سلام ممنون از آقای جبین پور عزیز
میخواستم بدونم ، اگه کل سایت (یک سایت معرفی محصول) رو با روولوشن اسلایدر بیارم بالا و فقط از همین ابزار استفاده کنم، برای SEO سایت تاثیر منفی میزاره؟
سلام ، لزوماً تاثیر منفی نخواهد داشت و بستگی به خیلی عوامل دارد. در حال حاضر بسیاری از سایت ها فقط با روولوشن ساخته شده اند مثلا اگر دمو های روولوشن را ببینید ( دمو های خارجی ) سایت های تک صفحه ای به این شکل وجود دارد. باتشکر
سلام وقت بخیر
فری پیک در دسترس نبود
سلام بر شما، برای مشاهده سایت فری پیک باید از نرم افزار های تغییر آی پی استفاده نمایید.
سلام.نرم افزار ایلستریتور را از چه سایتی دانلود کنیم بهتر است؟همچنین فتوشاپ
سلام و درود، از سایت سافت 98 آخرین نسخه را می توانید دانلود نمایید.
سلام عرض ادب واحترام من نمیتونم تصویر اضاف کنم اون قسمتی که ماشین رو اضاف میکنم تو رولوشن اسلایدر پشتش سفید میشه
با سلام ، ممنون از حضور شما ،
به طراحی خود دقت کنید که کجای کار مشکل دارد ، متاسفانه در این بخش امکان مشاهده مشکل و بررسی آن نیست.
با تشکر.
سلام آقای جبین پور ،
طبق مراحلی که گفتید عکس رو آپلود کردم با پسون jpg ولی متاسفانه آپلود نشد و این پیام را میداد ” پس پردازش تصویر ناموفق بود. اگر این یک عکس یا یک تصویر بزرگ است، لطفا مقیاس آن را تا ۲۵۰۰ پیکسل پایین آورید و دوباره بارگذاری نمایید. ” سایز و ابعاد را کمتر از مقدار آموزش شما کردم سایز فایل 56کیلوبایت شد ولی تاثیری نداشت پسوندش رو تغییر دادم به png با سایز کم ولی همان ارور را میداد لطف میکنید راهنمایی کنید دلیل دادن این ارور چیست ؟
با سپاس
سلام بر شما، احتراماً با ایمیلی که دیدگاه ارسال شده است خریدی یافت نشد. در صورت تهیه محصول از ناحیه کاربری تان تیکت ارسال نمایید تا سریعاً بررسی گردد. باتشکر از حضور شما
با سلام و احترام
خواستم بدونم چطوری میتونم اکانت پریمیوم سایت Freepik رو تهیه کنم اگر امکانش هست لطفا راهنمایی کنید یا آموزش در این رابطه بزارید ممنون میشم !
سلام بر شما ، بدین منظور می توانید از سایت های واسط پرداخت استفاده نمایید مثل اول پرداخت و ایرانی کارت و …
سلام ممنون از اموزش خوبتون فقط یک مشکل لینک دانلود فیلم ها اموزش کار نمی کند درواقع دکمه دانلود کار نمی کند
سلام بر شما ، این دوره آموزشی امکان دانلود را در حال حاضر ندارد. باتشکر
سلام وقتتون بخیر
اسلایدر روولوشن با افزونه کش من wp rocket تداخل داره. یعنی وقتی rocket رو حذف میکنم اسلایدر نمایش داده میشه ولی وقتی راکت فعاله اسلایدر حذف میشه.
چندین فایل css , js رو هم اکسکلود کردم توی راکت ولی تاثیری تداشته.
لطفا راهنمایی بفرمایید، ممنون میشم.
یک دنیا متشکرم
سلام دوست مهربان ، شما نمی توانید همه تنظیمات فشرده سازی راکت را فعال نمایید این تنظیمات فقط قرار داده شده تا هرسایتی تا جایی فعال کند که سایتش به هم نریزد. باتشکر
سلام یه سوال و یه انتقاد از سایتتون
ایا بدون برنامه ایلوستریتور هم میتوان تنها با برنامه فتوشاپ تغییراتی در عکس ایجاد کرد یا خیر در غیر این صورت راهکاری دارد یا خیر .
انتقاد این که واسه اموزشهای رایگانتون هیچ نظمی وجود نداره همشون ناتمومن مثال اموزش ووکامرس یا امنیت و … خواهشا دوره هارو منظم به روز کنید و به اتمام برسونید
مرسی از استاد جبین پور بابت اموزش های مفید و کاربردیشون
با سلام و احترام ،
جناب سعید عزیز ، استفاده از نرم افزار های مکمل مانند ایلستریتور در روند طراحی به شما بسیار کمک می کند ، اما برای ایجاد یک اسلایدر یا تصاویر زیبا و گرافیکی ، الزاما نیاز به استفاده از ایلستریتور نیست.
در مورد انتقاد شما :
با توجه به برنامه ریزی های گسترده برای تولید ویدئو های آموزشی بسیار زیاد ، این دوره ها در حال تکمیل است و همچنان (در این تاریخ) به انتها نرسیده است.
برای دوره امنیت و ووکامرس ، جلسه های بسیار جذاب و مفید دیگری در نظر داریم که بزودی ارائه خواهد شد.
با تشکر.