هنگام ایجاد صفحه محصول در Divi ، می توانیم از ماژول آکاردئون برای نمایش اطلاعات محصول با استفاده از محتوای پویا استفاده کنیم. با این وجود فضای بی نظیری در صفحه حفظ می شود ، به شما یک طراحی منحصر به فرد برای صفحات محصول می دهد.
در این آموزش ، ما به شما نشان خواهیم داد که چگونه از ویژگی محتوای پویای Divi برای ایجاد آکاردئون اطلاعات محصول و همچنین نحوه طراحی آکاردئون (و محتوای آن) با استفاده از Divi Visual Builder استفاده کنید.
بیایید شروع.
بررسی
در اینجا پیش نمایش طرحی که در این آموزش خواهیم ساخت وجود دارد.
به خاطر داشته باشید که برای دستیابی به همان نتایج ، باید تنظیمات محصول را همانطور که در این آموزش توضیح داده شده داشته باشید.
شروع
برای شروع ، باید موارد زیر را انجام دهید:
- اگر قبلاً این کار را نکرده اید، آن را نصب و فعال کنید تم دیوی نصب شده است (یا اگر از افزونه Divi Builder استفاده نمی کنید تم دیوی).
- افزونه را نصب و فعال کنید از WooCommerce. اگر پیکربندی کنید از WooCommerce برای اولین بار، برای آماده سازی فروشگاه خود، باید جادوگر راه اندازی اولیه را اجرا کنید. پس از اتمام، شما آماده هستید تا محصولات جدید خود را اضافه کنید.
- مطابق شکل زیر یک محصول جدید ایجاد کنید.
تنظیم محصول نمونه
برای پیکربندی محصول نمونه این آموزش ، به Products> Add New بروید. به محصول عنوان "ماساژ (یک جلسه)" بدهید و برای استفاده از Divi Builder کلیک کنید.
سپس تنظیمات صفحه محصول و اطلاعات مربوط به محصول زیر را به روز کنید:
1. در زیر تنظیمات صفحه Divi ، طرح No Sidebar را انتخاب کنید.
2. یک دسته محصول را اضافه یا انتخاب کنید
3. تصویر محصول را اضافه کنید
4. محتوای توضیحات را اضافه کنید.
5. تحت اطلاعات از محصول، نوع محصول را به محصول متغیر تغییر دهید.
6. صفتی به نام "Type" با مقادیر زیر اضافه کنید: سوئدی | سنگ داغ | رایحه درمانی | بافت عمیق. اطمینان حاصل کنید که "برای تغییرات استفاده می شود" را انتخاب کنید.
7. سپس در تب Variations در زیر ضامن données از محصول، از ورودی کشویی برای ایجاد تغییرات از همه ویژگی ها استفاده کنید.
8. "تنظیم قیمتهای منظم" را از منوی کشویی انتخاب کنید تا قیمت مرتب برای سه متغیر تعیین شود.
9. در کادر گفتگوی ، مقدار "50" را وارد کرده و OK را انتخاب کنید.
10. پس از اتمام ، محصول را ذخیره یا منتشر کنید.
اکنون آماده هستید تا طرح خود را با آکاردئون محصول سفارشی شروع کنید.
ایجاد آکاردئون اطلاعات محصول با محتوای پویا در Divi
طرح پیش فرض محصول با استفاده از ماژول های مختلف Woo اطلاعات محصول را نمایش می دهد. برای این مثال ، ما می خواهیم از آکاردئون برای نمایش سه اطلاعات اصلی در مورد محصول استفاده کنیم: توضیحات محصول ، اطلاعات اضافی محصول و بررسی محصول. این سه قسمت از مطالب در حال حاضر در ماژول woo tabs نمایش داده می شوند. تمام کاری که ما باید انجام دهیم حذف ماژول woo tabs و جایگزینی آن با ماژول آکاردئون با همان اطلاعات معرفی شده از طریق محتوای پویا است.
در اینجا چگونگی انجام این کار است.
ابتدا برای استفاده از Divi در سیستم front-end برای استقرار مولد بصری کلیک کنید. سپس ماژول Woo Tabs را حذف کنید.
سپس یک ماژول جدید Accordion اضافه کنید تا زبانه ها جایگزین شوند.
در پنجره بازشو تنظیمات آکاردئون ، روی نماد چرخ دنده در اولین آکاردئون کلیک کنید تا تنظیمات جداگانه آکاردئون باز شود.
عنوان "درباره محصول" را وارد کنید.
سپس بر روی جعبه ورودی محتوای بدن حرکت کنید و روی نماد محتوای پویا کلیک کنید.
"توضیحات محصول" را از لیست محتوای پویا انتخاب کنید.
این توضیحات طولانی از کالایی را که ما برای محصول تعریف کرده ایم در باطن نمایش می دهد.
پس از نصب اولین محتوای آکاردئون ، تنظیمات آکاردئون دوم را باز کنید و موارد زیر را به روز کنید:
- عنوان: مشخصات
سپس محتوای پویا "اطلاعات اضافی درباره محصول" را به بدن اضافه کنید.
پس از آماده شدن محتوای آکاردئون دوم ، یک عنصر آکاردئون جدید اضافه کنید و تنظیمات آکاردئون را به شرح زیر به روز کنید:
- عنوان: اطلاعات اضافی
سپس محتوای پویا "نظرات محصول" را به بدنه اضافه کنید تا مورد / محتوای بررسی محصول را جاسازی کنید.
توجه: مطمئن شوید که حداقل یک بررسی محصول اضافه کرده اید تا محتوای آن را در صفحه زنده مشاهده کنید.
طراحی توافق نامه محصول و محتوا با Divi
اکنون که آکاردئون اطلاعات محصول ما محتوای پویایی برای نمایش اطلاعات محصول دارد ، ما آماده هستیم تا آن را با استفاده از تنظیمات ماژول داخلی آکاردئون شخصی سازی کنیم.
تنظیمات ماژول Accordion را باز کنید و موارد زیر را به روز کنید:
- رنگ نماد: # ff9375
- از اندازه قلم نماد استفاده کنید: بله
- اندازه قلم آیکون: 26px
- تغییر رنگ پس زمینه: #ffffff
- عنوان متن را باز کنید Color: #ff9375
- عنوان متن: #222222
- قلم عنوان: لاتو
- عنوان فونت: ضخیم
- عنوان فونت سبک: TT
- عنوان متن اندازه: 20px
- فضای حروف عنوان: 0.2em
- ارتفاع خط عنوان: 2em
- قلم بدنه: لاتو
- اندازه متن بدن: 16px
- ارتفاع بدن: 1.8em
- رنگ متن پیوند: #ff9375
با این کار تمام پیوندهای شما در محتوای پویا برای هر آکاردئون ، مانند رتبه بندی ستاره ، هدف قرار می گیرد.
- رنگ متن لیست بدون کنترل: # ff9375
- نوع سبک لیست ناموزون: دایره
- تورفتگی مورد لیست نشده: 5٪
- عرض مرز: 0px
- عرض مرز بالا: 1px
- رنگ مرز بالا: #222222
و برای آخرین مرحله ، یک عصاره css کوچک اضافه می کنیم تا حاشیه پیش فرض بین مقیاس آکاردئون را استخراج کنیم.
در برگه Advanced ، CSS زیر را به عنصر Toggle اضافه کنید:
margin-bottom: 0px;
حال بیایید طراحی نهایی آکاردئون اطلاعات محصول را ببینیم.
تنظیمات نهایی در طرح
برای مطابقت با طرح آکاردئون می توان چند تنظیم در چیدمان ایجاد کرد. به عنوان مثال ، ما می توانیم فونت هر یک از ماژول ها را به Lato تنظیم کنیم ، یک حاشیه و شعاع مرزی سفارشی در اطراف لیست کشویی متغیر اضافه کنیم و دکمه افزودن به سبد خرید را با یک رنگ زمینه ثابت به روز کنیم مناسب او است.
پس از اتمام ، در اینجا نتیجه نهایی است.
من این طرح را به عنوان یک بارگیری رایگان در بالا قرار داده ام. لطفا در صورت تمایل آن را برای خودتان بررسی کنید. توجه داشته باشید که برای دستیابی به همان نتایج باید پیکربندی محصول را که در این آموزش توضیح داده شده است داشته باشید.
توجه: رنگ پیش فرض برای اکثر موارد از WooCommerce یک محصول در Divi از مقدار رنگ ثانویه تنظیمات سفارشی‌سازی تم به ارث می‌رسد. ممکن است به‌روزرسانی این رنگ ثانویه پس از ماژول رنگ‌ها توسط woo آسان‌تر باشد.
آخرین افکار
همانطور که یاد گرفته ایم ، ماژول های Woo تنها مواردی نیستند که می توان برای استخراج اطلاعات محصول پویا استفاده کرد. آکاردئون اطلاعات محصول مثالی عالی در مورد نحوه استفاده از هر ماژول Divi برای نمایش اطلاعات محصول به روشی منحصر به فرد و مختصر است. به راحتی می توانید طرح های جدید و مهیج آکاردئون را برای صفحات محصول خود کشف کنید. و البته می توانید به جای آکاردئون از چند ماژول راکر استفاده کنید تا به نتایج مشابه برسید.
