قالب هلو المنتور یک ابزار قدرتمند و مدرن برای طراحی صفحات وب در وردپرس است که با بهره‌گیری از امکانات گسترده المنتور، به کاربران اجازه می‌دهد بدون نیاز به کدنویسی صفحات حرفه‌ای، واکنش‌گرا و چشم‌نواز ایجاد کنند. این قالب با سازگاری کامل با افزونه‌های پرکاربرد و سرعت بارگذاری بالا گزینه‌ای ایده‌آل برای سایت‌های شرکتی، شخصی یا فروشگاهی محسوب می‌شود. همچنین تنظیمات سفارشی‌سازی آسان و طراحی مینیمال آن تجربه‌ای روان و جذاب را برای مدیر سایت و کاربران فراهم می‌سازد.
معایت قالب Hello Elementor
هرچند که این قالب یکی از سبک ترین قالب های وردپرس است اما همین سبک بودن هم باعث شده که یک سری از ویژگی های اصلی این قالب دچار مشکل باشد، مثلا یکی از بزرگترین ایراداتی که می توانید به این قالب گرفت مشکل در نمایش گالری تصاویر وردپرس است
از جمله این ایرادات که در بخش گالری تصاویر وجود دارد می تواند به نمایش تصاویر کوچک زیر هم، عدم وجود دکلمه تصاویر بعدی و قبلی اشاره کرد که همه این موارد روی هم رفته باعث ایجاد تجربه کاربری ضعیفی برای بازدید کنندگان خواهد شد.
حل مشکل گالری تصاویر قالب هلو المنتور
خوشبختابه با اضافه کردن چند تکه کد به فایل Functions.php و همچنین Style.css قالب Hello Elementor می توانید ویژگی هایی که در بالا ذکر شد را به قالب اضافه و مشکلات آنها را حل کنید.
اضافه کردن دکمه‌های ناوبری به اسلایدر محصول (فایل functions.php)
|
1 2 3 4 5 6 |
add_filter( 'woocommerce_single_product_carousel_options', 'cuswoo_update_woo_flexslider_options' ); function cuswoo_update_woo_flexslider_options( $options ) { $options['directionNav'] = true; return $options; } |
میزبانی امن و پایدار را با هاست وردپرس وب آیدین تجربه کنید!
هاست وردپرس وب آیدین، یکی از بهترین گزینه‌ها برای سرویس دهی به وب‌سایت‌های وردپرسی است. با استفاده از هاست وردپرس وب آیدین می‌توانید از امکانات پیشرفته، پشتیبانی ۲۴ ساعته، امنیت بالا و سرعت عالی سایت وردپرسی بهره‌مند شوید. همچنین، تمامی هاست های وب آیدین دارای ترافیک نامحدود بوده و با استفاده از این سرویس ها خیالتان از بابت ارتقا پنل نیز راحت خواهد بود. برای کسب اطلاعات بیشتر یا خرید هاست وردپرس به صفحه زیر مراجعه کنید.
استایل سفارشی برای بهبود گالری و ناوبری (فایل style.css)
کد های زیرا نیز به فایل style.css قالب خود اضافه کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
ul.flex-direction-nav { position: absolute; top: 35%; width: 100%; left: 0; margin: 0; padding: 0; list-style: none; transform: translateY(-50%); } li.flex-nav-prev { position: absolute; left: -20px; } li.flex-nav-next { position: absolute; right: 10px; margin-top: -20px; } a.flex-next, a.flex-prev { visibility: hidden; } a.flex-next::after, a.flex-prev::before { visibility: visible; content: ""; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background-color: rgba(0, 0, 0, 0.6); border-radius: 50%; border: solid 2px #fff; color: #fff; font-size: 16px; transition: all 0.2s ease-in-out; } a.flex-next::after { content: "‹"; font-weight: bold; } a.flex-prev::before { content: "›"; font-weight: bold; } a.flex-next:hover::after, a.flex-prev:hover::before { background-color: rgba(255, 255, 255, 0.8); color: #000; transform: scale(1.1); } .elementor-widget-woocommerce-product-images .flex-control-thumbs { display: flex !important; flex-wrap: nowrap !important; gap: 10px; overflow-x: auto !important; scroll-snap-type: x mandatory; justify-content: flex-start; padding-bottom: 10px; max-width: 100%; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.2) transparent; } .elementor-widget-woocommerce-product-images .flex-control-thumbs::-webkit-scrollbar { height: 6px; } .elementor-widget-woocommerce-product-images .flex-control-thumbs::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.4); border-radius: 10px; } .elementor-widget-woocommerce-product-images .flex-control-thumbs img { width: 100%; height: 80px; object-fit: cover; border-radius: 10px; } |
جمع بندی
با استفاده از این کد ها مشکل تصاویر گالری حل خواهد شد و همچنین به صورت کلی قالب هلو المنتور شما بهینه تر و کارآمدتر خواهد شد و کاربران شما می توانند با ظاهری بهتر و به صورت کلی تجربه کاربری بالا از خدمات سایت شما استفاده کنند.
