اسلایدر تصاویر در وردپرس
30 شهریور 1400 1400-06-30 7:37اسلایدر تصاویر در وردپرس
سپیده زارعی فهرست مطالب
با استفاده از وردپرس، ایجاد یک وب سایت خیلی آسان است. ایجاد یک وب سایت جذاب و چشم نواز بدون استفاده از تصاویر کاری بیهوده است. در این مقاله به بررسی اسلایدر تصاویر در وردپرس می پردازیم.
ایجاد اسلایدر تصویر در وردپرس آسان است، و ما به شما نحوه انجام این کار را تنها با استفاده از یکی از 60 ویجت زیبا و کاربردی که با افزونه Qi Addons for Elementor ارائه شده است، نشان خواهیم داد. اما قبل از اینکه نحوه ایجاد یک اسلایدر تصویری را به شما نشان دهیم، می خواهیم مدتی را صرف بحث در مورد خود اسلایدرها و موارد استفاده ای که ممکن است بخواهید در نظر بگیرید، کنیم.
بیشتر بخوانید:
اسلایدر تصویر چیست؟
در طراحی وب، اسلایدر تصویر نمایش اسلایدی از تصاویر مورد استفاده در یک صفحه وب است. آنها از چندین تصویر تشکیل شده اند که موقعیت ها را در یک حرکت متحرک به صورت خودکار یا به عنوان پاسخ به عملکرد کاربر مانند کلیک، پیمایش یا در دستگاه های تلفن همراه، ضربه تند وشدید زدن تغییر می دهند. آن ها می توانند به صورت خودکار و یا توسط کاربر فعال شوند.
با این حال، به غیر از جنبه زیبایی، یک اسلایدر همچنین می تواند عملکردهای ناوبری را انجام دهد و اطلاعات مهمی را به بازدیدکنندگان منتقل کند.
چه زمانی از اسلایدر تصاویر استفاده کنیم؟
یک اسلایدر تصویر معمولاً به عنوان بخشی از وب سایت نمونه کارها یا یک وب سایت تجاری استفاده می شود، اما هیچ محدودیتی برای زمان استفاده از اسلایدر وجود ندارد.
بیشتر بخوانید:
نحوه ساخت فوتر وردپرس و محتویاتی که باید به آن اضافه کرد
یک اسلایدر تصویر که بخوبی طراحی شده است معمولاً حاوی بیشتر اطلاعات مهمی است که یک وب سایت می خواهد به کاربر منتقل کند. این اطلاعات بشکل گرافیکی و به شیوه ای جذاب قرار گرفته اند. برای یک وب سایت تجاری، به عنوان مثال، ممکن است وسیله ای برای نمایش پروژه ها باشد. برای یک کتابفروشی یا یک وب سایت نقد فیلم، ممکن است ویترین نسخه های جدید باشد. و هر مغازه ای ممکن است از آن برای تبلیغ یک پیشنهاد جدید با محدودیت زمانی جدید یا یک معامله مشابه استفاده کند.
بیشتر بخوانید:
دو روش تقسیم نوشته وردپرس به چند صفحه
متناوبا، شما می توانید یک رویکرد مینیمالیستی را در پیش بگیرید: به سادگی وب سایت خود را با عکس ها یا گرافیک های زیبا برای بازدیدکنندگان خود مجهز کنید – راه حلی که شاید مناسب ترین وسیله برای وب سایت های عکاسی، گالری ها، مجموعه های هنرمندان یا موزه ها باشد.
چه زمانی نباید از اسلایدر تصاویر استفاده کنید
استفاده از اسلایدر تصاویر تنها یک جنبه منفی دارد: اندازه آنها. یک اسلایدر به طور معمول حاوی تعداد زیادی تصویر با کیفیت بالا و وضوح بالا است که ممکن است باعث بارگیری کند و اجرای کم سرعت وب سایت شما شود، که ممکن است منجر به تجربیات بد کاربران، افزایش نرخ پرش و رتبه بندی SERP ضعیف شود.
بیشتر بخوانید:
آموزش افزودن محتوا به ابتدا یا انتهای مقالات در وردپرس
اگر از تصاویر با وضوح بالا استفاده می کنید، زیاده روی نکنید. اگر نکات منفی، بیشتر از مزایای احتمالی است، بهتر است از اسلایدر استفاده نکنید.
نکته دیگری که باید به آن توجه کرد، دستگاه های تلفن همراه است. اگر عملکرد اسلایدر شما به گرافیک های بزرگ با جزئیات زیاد بستگی دارد، ممکن است در دستگاه های تلفن همراه بی فایده باشد و احتمالاً باید برای نسخه تلفن همراه وب سایت شما حذف یا اصلاح شود.
نحوه ایجاد یک اسلایدر تصویر با استفاده از افزونه های Qi برای Elementor
دراین مقاله یک اسلایدر تصویر با استفاده از Qi Addons for Elementor ایجاد می کنیم، Elementor یک افزونه رایگان است که به منظور گسترش مجموعه ابزارک های Elementor ایجاد شده است. قبل از استفاده از آن، باید آخرین نسخه Elementor را نصب کرده و سپس Qi Addons را برای Elementor نصب و فعال کنید.
بیشتر بخوانید:
افزونه های مهم وردپرس + چرا باید از این پلاگین‌ها استفاده کنیم
Qi Addons با نسخه رایگان Elementor کار می کند. تنها چیزی که اهمیت دارد این است که نسخه Elementor شما به روز باشد.
پس از انجام این کار، افزودن یک نوار لغزنده تصویر به وب سایت وردپرس شما آسان است و تنها چند دقیقه طول می کشد.
ما یک اسلایدر تصویر را به یک پست اضافه می کنیم، اما شما به همین راحتی می توانید آن را به یک صفحه اضافه کنید. افزودن ویجت لغزنده تصویر مانند سایر عناصر Elementor کار می کند: کافی است آن را در منوی سمت چپ پیدا کرده و آن را به جایی که می خواهید بکشید.
شما اکنون این عنصر را در محل خود دارید، اما حاوی هیچ تصویری نیست. برای افزودن تصاویر، روی نماد بعلاوه در بخش تصاویر در برگه Content/General کلیک کنید.
بیشتر بخوانید:
افزونه افزایش سرعت وردپرس | بهترین افزونه ها برای افزایش سرعت در وردپرس
اکنون می توانید تصاویر را از کتابخانه رسانه خود انتخاب کرده یا چند عکس جدید بارگذاری کنید. پس از اینکه انتخاب خود را انجام دادی، روی ایجاد گالری یا Create Gallery کلیک کنید.
اکنون می توانید قبل از درج این گالری آن را مرور یا ویرایش کنید. همچنین می توانید ترتیب ظاهر شدن تصاویر خود را در کشویی تغییر دهید. وقتی از گالری خود راضی هستید، روی Insert Gallery کلیک کنید.
اکنون باید بتوانید اسلایدر تصویر خود را در قسمت پیش نمایش مشاهده کنید.
با رفتن به بخش General/Slider Settings، کنترل رفتار اسلایدر تصویر خود را پیدا می کنیم.
بیشتر بخوانید:
ادامه مطلب در وردپرس | تگ more در وردپرس | چرا تگ more کار نمیکند؟
Enable Slider Loop را می توان روی Yes یا No تنظیم کرد و باعث می شود تا اسلایدر به ابتدای دور بازگردد. ما می خواهیم تصاویر ما خود به خود به حرکت خود ادامه دهند، بنابراین ما آن را روی Yes، که به طور پیش فرض است، رها می کنیم. کنترل Enable Centered Slides برای متمرکز کردن تصاویر نامتقارن استفاده می شود، در حالی که Enable Slider Autoplay باعث می شود که لغزنده بدون تعامل کاربر کار کند.
Slide Duration و Slide Animation Duration برای تنظیم زمان قرار گرفتن یک تصویر و مدت زمان نمایش انیمیشن استفاده می شود. واحد زمانی مورد استفاده، میلی ثانیه است. ما مدت زمان اسلاید خود را (Slide Duration) بر روی 2000 تنظیم می کنیم، اما کنترل Animation Duration را تغییر نمی دهیم.
بیشتر بخوانید:
Cdn در وردپرس چیست | آموزش فعال سازی CDN در وردپرس
کنترل Enable Slider Navigation کاربر را قادر می سازد تا از فلش یا پیکان برای حرکت در نوار لغزنده استفاده کند، در حالی که صفحه بندی Enable Slider Pigination بر نقاط صفحه بندی نوار لغزنده نظارت می کند. ما برای این نوار لغزنده ای که ایجاد می کنیم از نقاط استفاده نمی کنیم، بنابراین آن را با Off خاموش می کنیم.
در مرحله بعدی، کنترل Image Proportions دارای مجموعه ای از گزینه ها است که می توانید از آنها برای یکنواخت تر نشان دادن تصاویر خود استفاده کنید، مانند تصویر کوچک، مربع، پرتره و موارد دیگر. ما آن را در حالت اصلی پیش فرض قرار می دهیم و نسبت اصلی تصاویر را حفظ می کنیم.
فعال کردن ستون جزئی Partial Column به شما امکان می دهد قسمتی از ستون پایانی را که می خواهید آن را نشان دهید را تنظیم کنید. منوی تعداد ستون ها به شما امکان می دهد تعداد ستون های اسلایدر خود را انتخاب کنید. ما آن را بر روی One قرار می دهیم.
بیشتر بخوانید:
هاست VPS سرور مجازی یا VPS چیست
منوی Columns Responsive به شما امکان می دهد تعداد مختلفی از ستون ها را برای اندازه های مختلف دستگاه تنظیم کنید، که معمولاً به معنی ستون های کمتر در دستگاه های کوچکتر است. از آنجا که ما فقط یک تصویر در یک زمان نشان می دهیم (طبق تنظیمات تعداد ستون ها)، می توانیم آن را در Predefined بگذاریم، زیرا راهی برای نمایش کمتر از یک ستون وجود ندارد.
فاصله بین آیتم های اسلایدر به شما امکان می دهد مقدار پیکسل را بین هر اسلاید وارد کنید. ما این مقدار را روی 0 قرار می دهیم، زیرا هیچ فاصله ای بین تصاویر نمی خواهیم. منوی Slide Effect به شما امکان می دهد بین انیمیشن های انتقال Slide و Fade یکی را انتخاب کنید. ما آن را روی Slide باقی می گذاریم.
در پایین صفحه پنجره فعال کردن Lightbox را پیدا می کنیم. اگر فعال باشد، به طور پیش فرض، یک تصویر کلیک شده در یک پوشش باز می شود. منوی Image Hover رفتار لغزنده را روی نشانگر ماوس توسط کاربر کنترل می کند. می توانید بین Zoom In، Zoom Out، None و Move یکی را انتخاب کنید. ما این تنظیمات را روی None می گذاریم.
تنظیمات Overlay Color و Overlay Hover Color به شما این امکان را می دهد که چه بصورت پیش فرض و چه در حالت شناور یک پوشش رنگی برای تصاویر خود انتخاب کنید.
با رفتن به برگه Style. دو بخش خواهید دید: Slider Navigation Style، که مربوط به فلش های ناوبری است، و Slider Pagination Style، که مربوط به صفحه بندی است. برای اهداف این طرح، ما صفحه بندی را خاموش کرده ایم، بنابراین از این تنظیمات استفاده نمی کنیم.
در بخش Slider Navigation Style اولین گزینه منوی Navigation Position است. در اینجا می توانید موقعیت فلش هایی را انتخاب کنید که باعث می شود اسلایدر تصاویر را تغییر دهد. ما آنها را در خارج قرار می دهیم، اما شما همچنین می توانید بصورت پیش فرض Inside and Together را انتخاب کنید، که آنها را در زیر تصویر قرار می دهد.
در پایین، گزینه Hide Navigation را پیدا می کنیم که به شما امکان می دهد پیکان های ناوبری را برای دستگاه های زیر عرض صفحه مشخص پنهان کنید. ما آنها را برای دستگاههای با عرض کمتر از 768 پیکسل نامرئی می کنیم.
لغزنده های آفست (Navigation Vertical Offset و Navigation Horizontal Offset) به شما امکان می دهد پیکان های ناوبری را از موقعیت های پیش فرض خود حرکت دهید. می توانید آنها را خودتان اسلاید کرده یا مقادیر را بر حسب پیکسل، ems یا درصد وارد کنید. ما از لغزنده افست عمودی استفاده نمی کنیم، ما Navigation Horizontal Offset را روی 6.5 set تنظیم می کنیم.
دو گزینه بعدی Navigation Arrow Previous (پیکان چپ) و Navigation Arrow Next (پیکان راست) به شما امکان می دهد پیکان های پیش فرض ناوبری را تغییر دهید. می توانید یکی را از کتابخانه نماد خود انتخاب کنید یا می توانید SVG را بارگذاری کنید. ما فلش ها را همانطور که هستند دوست داریم، بنابراین آنها را تغییر نمی دهیم.
در پایین، می توانید رفتار فلش های ناوبری خود را با استفاده از ضامن Normal/Hover تغییر دهید. تنظیم ویژگی های فلش ها در حالت عادی، فلش ها را در ظاهر کاربر تغییر می دهد، در حالی که حالت شناور بر رفتار آنها در شناور ماوس نظارت می کند.
دو گزینه اول عبارتند از Navigation Arrow Color و Navigation Arrow Background Color. در اینجا می توانید رنگ فلش های ناوبری یا پس زمینه آنها را انتخاب یا وارد کنید. ما از گزینه های رنگی برای این طرح استفاده نخواهیم کرد.
بیشتر بخوانید:
انتخاب برنامه های کش سایت وردپرسی
سه لغزنده آخر ابعاد خود پیکان و نگهدارنده آن را کنترل می کنند. اندازه پیکان ناوبری به شما امکان می دهد اندازه پیکان را کنترل کنید، در حالی که “نگهدارنده” در عرض، دارنده پیکان ناوبری و ارتفاع دارنده پیکان ناوبری به پس زمینه فلش اشاره می کند. اگر رنگی برای Navigation Arrow Background انتخاب کرده اید، می توانید از این لغزنده ها برای تغییر ابعاد آن استفاده کنید. ما اندازه فلش های خود را به 45 پیکسل افزایش می دهیم.
با رفتن به قسمت Hover، می توانیم یک کنترل اضافی را مشاهده کنیم: فعال کردن حرکت فلش شناور. به طور پیش فرض، هنگامی که کاربر ماوس خود را روی آن قرار می دهد، پیکان را متحرک می کند. ما آن را روی حالت No قرار می دهیم.
بخش Slider Pagination Style مجموعه ای مشابه از گزینه ها را ارائه می دهد: رنگ، جابجایی، حاشیه و اندازه، اما ما اسلایدر تصویر خود را همانطور که هست دوست داریم، بنابراین از گزینه های صفحه بندی استفاده نمی کنیم.
با این وجود، نوار لغزنده تصویر ما تمام شده است.
نحوه ایجاد یک اسلایدر تصویر با عرض کامل با استفاده از افزونه های Qi
حال، فرض کنید شما یک کشویی با عرض کامل می خواهید. با Qi Addons for Elementor، شما نیز می توانید این کار را انجام دهید.
بیشتر بخوانید:
CTA چیست؟ 7 ترفند طلایی برای طراحی Call To Action یا فراخوان عمل
اولین کاری که باید انجام دهید این است که با کلیک روی نماد Gear در پایین منوی سمت چپ، به بخش تنظیمات بروید. منوی Page Layout را پیدا کرده و Elementor Full Width را به عنوان طرح خود انتخاب کنید. اگر از قالب Qi استفاده می کنید، می توانید Qi Full Width را نیز انتخاب کنید.
سپس، روی نماد وسط برگه بخش آبی کلیک کنید تا آن را ویرایش کنید.
باید برگه Layout را مشاهده کنید. اولین منوی بالا، Content Width است. روی Boxed تنظیم شده است، اما باید آن را به Full Width تغییر دهید. پس از انتخاب آن، منوی بعدی پایین باید منوی شکاف ستون ها باشد. با انتخاب No Gap در آن هیچ شکافی بین عنصر و لبه های صفحه باقی نمی ماند.
با این حال، حتی اگر با طرح Boxed کار می کنید، می توانید از کشویی Width برای تغییر عرض ویجت خود استفاده کنید. اگر آن را به سمت راست بکشید، یا اگر عرض طرح خود را بر حسب پیکسل وارد کنید، یک اسلایدر تصویر با عرض کامل نیز دریافت خواهید کرد.
سخن آخر
همانطور که مشاهده می کنید، تنظیم یک اسلایدر زیبا و گیرا در وردپرس آسان است و فقط چند دقیقه طول می کشد. با Qi Addons for Elementor، همچنین می تواند کاملاً رایگان باشد. ویجت دارای گزینه های یک ظاهر طراحی شده کاربر پسند است که جلوه های آن بلافاصله در قسمت پیش نمایش Elementor قابل مشاهده است.
منبع:
https://qodeinteractive.com/magazine/how-to-create-image-slider-in-wordpress/
