Sticky Bars همچنان عنصر محبوب طراحی وب است. آنها بدون داشتن مزاحمت مانند پنجره های بازشو ، برای هدایت تبدیل ها بسیار عالی هستند.
در این مورد، یک نوار چسبنده برای محصولات طراحی خواهیم کرد از WooCommerce با استفاده از ماژول های Woo از DIVI. نوار چسبنده می تواند شامل هر ماژول باشد DIVI. برای این آموزش، ما یک نوار چسبنده ایجاد می کنیم که شامل دکمه "افزودن به سبد خرید" است تا زمانی که کاربر صفحه را به پایین اسکرول می کند قابل مشاهده باشد. علاوه بر این، ما همچنین یک نوار اعلان سبد خرید ایجاد خواهیم کرد تا کاربران همیشه دکمه "مشاهده سبد خرید" را پس از کلیک روی دکمه "افزودن به سبد خرید" مشاهده کنند.
با نگه داشتن این CTA های مهم ، این عناصر نوار چسبنده به افزایش تبدیل کمک می کنند.
بررسی
در اینجا پیش نمایش آنچه در این آموزش طراحی خواهیم کرد ، آورده شده است.
قسمت 1: طراحی نوار چسب در صفحه محصول
ما قصد داریم از یک محصول ساده شبیه سازی شده برای این مثال استفاده کنیم ، بنابراین شما باید یک محصول جدید ایجاد کنید یا یک محصول موجود را ویرایش کنید. اطلاعات محصول برای این آموزش مهم نیست. اطمینان حاصل کنید که اصول اولیه مانند عنوان محصول ، قیمت ، توضیحات ، تصویر و غیره را داشته باشید.
هنگامی که یک محصول ساده آماده شد، برای ویرایش محصول در باطن و استقرار کلیک کنید DIVI سازنده در صفحه محصول. در قسمت Divi Page Settings، "Fullwidth" را برای طرح بندی انتخاب کنید، سپس روی "Build on Front" کلیک کنید.
صفحه محصول باید به این شکل باشد.
در زیر اولین ردیف حاوی آرد سوخاری و اعلامیه سبد ، یک ردیف جدید با طرح یک ستون اضافه کنید.
تنظیمات خط
قبل از افزودن ماژول ، تنظیمات خط را به شرح زیر به روز کنید:
- رنگ پسزمینه: # 333333
- از عرض ناودان سفارشی استفاده کنید: بله
- عرض روده: 1
- عرض: 100٪
- اثاثه یا لوازم داخلی: 0px Top، 0px پایین
خط را چسبناک کنید
برای چسبناک کردن خط ، کد CSS سفارشی زیر را به عنصر اصلی دسک تاپ اضافه کنید:
position: -webkit-sticky !important; position: sticky !important; top: 50px;
سپس کد CSS زیر را به همان عنصر اصلی برای نمایش تبلت اضافه کنید:
top: 0px;
اگر با ویژگی css "position: sticky" آشنایی ندارید ، این نوعی مخلوط کردن بین موقعیت ثابت و موقعیت نسبی است که عنصر (در این حالت خط) با آن پیمایش می کند. ظرف را تا زمانی که به موقعیت تعیین شده در بالا یا پایین صفحه (یا جبران مشخص شده) برسد. در این مثال ، از بالای پنجره مرورگر مقدار افست را روی 50px تنظیم می کنیم (جایی برای ارتفاع یک سرصفحه ثابت پیش فرض روی دسک تاپ). سپس ، در رایانه لوحی ، برای اصلاح خط / نوار چسب در بالای مرورگر در تلفن همراه ، جابجایی به "top: 0px" تغییر می یابد.
توجه: هنگام افزودن CSS به جعبه ، خطاهایی را که مشاهده می کنید نادیده بگیرید. کد خوب کار خواهد کرد
بعد از CSS ، شاخص Z را به صورت زیر به روز کنید:
- شاخص Z: 10
اکنون با پیمایش کاربر از صفحه محصول ، این خط چسبناک خواهد شد.
ستون CSS سفارشی
قبل از اینکه شروع به پر کردن خط با محتویات، باید مطمئن شویم که ماژول داخل ردیف تک ستونی ما به جای عمودی، به صورت افقی تراز می شود. برای انجام این کار با ویژگی flex می توانیم از یک ترفند ساده CSS استفاده کنیم. تنظیمات ستون را باز کنید و CSS سفارشی زیر را به عنصر اصلی اضافه کنید:
display:flex; align-items:center;
این از طراحی خط چسبنده ما مراقبت می کند. اکنون باید خط را با آن پر کنیم محتویات.
عنوان وو اضافه کنید
ماژول جدید عنوان Woo را به ستون خط چسبنده اضافه کنید.
سپس تنظیمات را به شرح زیر به روز کنید:
- عنوان متن رنگ: #ffffff
- اندازه عنوان متن: 28px (دسک تاپ) ، 20px (رایانه لوحی) ، 16px (تلفن)
- عرض: 30٪
- اثاثه یا لوازم داخلی: 2vw در بالا ، 2vw در پایین ، 2vw در سمت چپ ، 2vw در سمت راست
قیمت وو را اضافه کنید
سپس با کلیک کردن بر روی نماد خاکستری به علاوه که در هنگام شنا کردن روی ماژول عنوان woo که اخیراً ایجاد کرده اید ، یک ماژول قیمت Woo را اضافه کنید.
سپس تنظیمات Woo Price را به شرح زیر به روز کنید:
- اندازه متن قیمت: 28px (دسک تاپ) ، 20px (رایانه لوحی) ، 16px (تلفن)
- عرض: 30٪
- اثاثه یا لوازم داخلی: 2vw در بالا ، 2vw در پایین ، 2vw در سمت چپ ، 2vw در سمت راست
- عرض مرز راست: 1px
- رنگ مرز مناسب: #777777
- عرض مرز چپ: 1px
- رنگ حاشیه سمت چپ: #777777
افزودن ماژول افزودن به سبد خرید
برای آخرین عنصر از محتویات، یک ماژول Woo Add to Cart را درست بعد از ماژول Woo Price اضافه کنید.
سپس تنظیمات را به شرح زیر به روز کنید:
با پنهان کردن قسمت مقدار و مقدار موجودی در تلفن همراه ، عنصر افزودن به سبد خرید را ساده کنید.
- قسمت کمیت نمایش: خاموش (رایانه لوحی)
- نمایش سهام: خاموش
- تراز متن: درست است
- از دکمه های سفارشی برای دکمه استفاده کنید: بله
- اندازه متن دکمه: 18px (رایانه لوحی) ، 14px (تلفن)
- رنگ متن دکمه: #ffffff
- رنگ پس زمینه دکمه: #0c71c3
- عرض حاشیه دکمه: 0px
- عرض: 40٪
- اثاثه یا لوازم داخلی: 2vw در سمت چپ ، 2vw در سمت راست
نتیجه
بیایید ببینیم چه چیزی در صفحه زنده مشاهده می شود.
2 Part: نوار اطلاع رسانی Basket ایجاد کنید
ایجاد یک نوار اعلان چرخ دستی چسب در واقع شامل چند مرحله ساده است ، اما نتیجه می تواند بسیار موثر باشد. همانطور که قبلاً می دانید ، اعلامیه سبد خرید فقط هنگامی ظاهر می شود که کاربر دکمه "افزودن به سبد خرید" را کلیک کند. اما این مرحله مهم بعدی در فرآیند خرید است که کاربران را به صفحه پرداخت می رساند. بنابراین وقتی اعلان سبد خرید به عنوان یک میله چسب در پایین پنجره ظاهر می شود ، بیشتر در معرض دید کاربر قرار می گیرد.
برای ایجاد نوار چسب اعلان سبد خرید ، ابتدا یک ردیف یک ستونی جدید در پایین صفحه محصول ایجاد کنید. سپس تنظیمات ردیف را به صورت زیر به روز کنید:
- عرض: 100٪
- اثاثه یا لوازم داخلی: 0px در بالا ، 0px در پایین
خط را با اضافه کردن CSS سفارشی زیر به عنصر اصلی چسبناک کنید:
position: -webkit-sticky !important; position: sticky !important; bottom: 0px;
توجه: همانطور که قبلاً انجام دادیم ، می توانید خطاهایی را که هنگام افزودن ویژگی Position: sticky ظاهر می شوند نادیده بگیرید.
ردیف هنگام پیمایش به پایین پنجره می چسبد.
سپس شاخص z را به روز کنید تا در پیش زمینه قرار گیرد ، مانند این موارد:
- شاخص Z: 10
ماژول اطلاع رسانی سبد را اضافه کنید
پس از ایجاد خط ، ماژول Woo Cart Notice را به خط اضافه کرده و تنظیمات را به شرح زیر به روز کنید:
- اندازه متن (تلفن): 15px
- حاشیه: 0em در پایین
خودشه ! اینکه آیا می خواهید مورد هشدار دهنده پیش فرض سبد خرید را در بالای صفحه حذف کنید یا خیر ، به خود شما بستگی دارد ، اما بهتر است آن را برای تبدیل بهتر بگذارید.
نتیجه نهایی
در اینجا نتیجه نهایی به نظر می رسد.
آخرین افکار
امیدوارم که این مقاله به ما کمک کند تا نحوه ایجاد میله های چسبنده برای صفحات محصول خود در Divi را درک کنیم. ما نحوه ایجاد یک نوار چسبناک را که شامل عنوان محصول ، قیمت و دکمه افزودن به سبد خرید است توضیح دادیم. و همچنین نحوه ایجاد یک میله چسبناک را نشان دادیم. هر دوی این موارد باید روند خرید را آسان کرده و تبدیل را تقویت کند. و ما حتی به پلاگین هم احتیاج نداریم!
