روشی که صفحه محصول خود را طراحی می کنید تأثیر فوری بر رفتار شما دارد آخرین بازدید. طراحی صفحه محصول با طراحی خوب و شخصی می تواند این امکان را فراهم کند آخرین بازدید تا راحت تر تصمیم بگیرند که آیا می خواهند محصول شما را بخرند یا خیر. اگر به دنبال راهی برای جذابتر کردن صفحه محصول خود هستید، احتمالاً این آموزش را دوست خواهید داشت.
ما به شما نشان خواهیم داد که چگونه با استفاده از Divi و افزونه Advanced Custom Fields، یک شبکه مزایای محصول پویا را در طراحی خود بگنجانید. ما با ایجاد یک گروه زمینه برای مزایا شروع خواهیم کرد. سپس فیلدهای سفارشی را در صفحه محصول خود پر می کنیم و آن را درج می کنیم محتویات پویا در قالب صفحه محصول ما.
نتیجه احتمالی
قبل از اینکه به آموزش برویم ، بیایید نگاهی سریع به نتیجه در اندازه های مختلف صفحه بیندازیم.
1. افزونه ACF Plugin And Product Benefit Field Group را نصب کنید
افزونه Advanced Custom Fields را نصب کنید
برای نمایش مزایای مختلف محصول در بکاند محصولات خود، از افزونه استفاده میکنیم رایگان فیلدهای سفارشی پیشرفته به خود دسترسی داشته باشید WordPress backend> Plugins> Add new> Find plugin ACF> Install> Active .
به قسمت های دلخواه بروید و گروه جدیدی از زمینه ها را اضافه کنید
پس از نصب و فعال سازی افزونه ACF ، می توانید به قسمتهای سفارشی خود دسترسی پیدا کرده و یک گروه زمینه جدید اضافه کنید.
تنظیمات گروه زمینه
به گروه جدید فیلدهای خود عنوان بدهید و اجازه دهید فقط در صفحات محصول نمایش داده شود.
- "نوع پیام" با "محصول" برابر است
اولین فیلد را اضافه کنید
در ادامه با افزودن یک قسمت جدید برای عنوان اولین محصول خود ادامه دهید.
- Field Label: عنوان مزیت 1
- نوع فیلد: متن
مرحله را برای قسمتهای باقیمانده تکرار کنید
همین کار را برای سایر مزایای محصول و توضیحات آنها نیز انجام دهید. همه این فیلدها به نوع فیلد "Text" اختصاص یافته به آنها نیاز دارند.
- عنوان خدمات 1
- شرح مزایا 1
- عنوان خدمات 2
- شرح مزایا 2
- عنوان خدمات 3
- شرح مزایا 3
- عنوان خدمات 4
- شرح مزایا 4
2. مزایایی را به محصولات اضافه کنید
محصولی جدید را باز یا اضافه کنید
پس از ایجاد گروه و زمینه های زمینه ، می توانید مزایای محصول را در سطح فردی به محصولات خود اضافه کنید. محصولی را به انتخاب خود باز کنید یا محصول جدیدی ایجاد کنید.
قسمت مزایای محصول را تکمیل کنید
و مزایای محصول را برآورده سازید.
3. یک الگوی صفحه محصول را در Divi Theme Builder ایجاد کنید
به Divi Theme Builder بروید و یک الگوی جدید اضافه کنید
وقت آن است که با Divi شروع کنیم! برای ایجاد الگوی جدید ، به Divi Theme Builder بروید و روی "افزودن الگوی جدید" کلیک کنید.
از یک الگوی برای همه محصولات استفاده کنید
ما از این الگو در همه محصولات استفاده می کنیم ، اما در صورت تمایل محصولاتی را با دسته یا برچسب خاص انتخاب کنید.
وارد ویرایشگر قالب بدنه مدل شوید
سپس با کلیک بر روی "Add custom body" و انتخاب "Create custom body" بدنه مدل را وارد کنید.
بخش شماره 1 را ویرایش کنید
رنگ پس زمینه
پس از ورود به ویرایشگر الگو ، متوجه بخشی خواهید شد. آن قسمت را باز کرده و رنگ زمینه را به سیاه تغییر دهید.
- رنگ زمینه: # 000000
فاصله
به برگه طراحی بخش بروید و مقداری بالشتک سفارشی بالا و پایین اضافه کنید.
- بالشتک بالایی: 10px
- بالشتک پایین: 10px
یک خط جدید اضافه کنید
ساختار ستون
بیایید با اضافه کردن یک خط جدید به بخشی که ساختار زیر را دارد ادامه دهیم:
فاصله
بدون اضافه کردن حالت ، اجازه دهید تنظیمات ردیف را باز کنیم و تنظیمات فاصله را انجام دهیم.
- از Personal Gutter استفاده کنید: بله
- عرض روده: 1
- عرض: 90٪
- حداکثر عرض: 100٪
فاصله
تمام فاصله داخلی بالا و پایین را حذف کنید.
- حاشیه داخلی بالا: 0px
- حاشیه داخلی کم: 0px
ماژول Woo Cart Notice را به ستون اضافه کنید
محتوای پویا
تنها ماژولی که در این خط و بخش به آن نیاز داریم ، ماژول Woo Cart Notice است. اطمینان حاصل کنید که "این محصول" در بخش پویا انتخاب شده است.
- محصول: این محصول
زمینه رنگی
سپس تنظیمات ماژول را باز کرده و از یک پس زمینه شفاف استفاده کنید.
- رنگ پس زمینه: rgba (0,0,0,0،XNUMX،XNUMX،XNUMX)
تنظیمات متن
به برگه "Design" بروید و قلم متن را تغییر دهید.
- قلم متن: کارلا
تنظیم دکمه
تنظیمات افزونه را با تعریف تنظیمات سبک تمام کنید:
- از دکمه های سفارشی برای دکمه استفاده کنید: بله
- اندازه متن دکمه: 20px
- رنگ متن دکمه: # 000000
- زمینه دکمه: # ffd623
- عرض مرز دکمه: 0px
- دکمه حاشیه گرد: 0px
- قلم دکمه: اسوالد
- دکمه سبک قلم: Shift
- حاشیه داخلی بالا: 20px
- حاشیه داخلی کم: 20px
- حاشیه داخلی سمت چپ: 50px
- حاشیه سمت راست داخلی: 50px
بخش شماره 2 را اضافه کنید
پیشینه شیب
بخش عادی دیگری را در زیر بخش قبلی اضافه کنید. سپس تنظیمات را باز کرده و از پس زمینه گرادیان به شرح زیر استفاده کنید:
- رنگ 1: # 000000
- رنگ 2: #ffffff
- نقطه شروع:
- دسکتاپ: 30٪
- قرص: 57٪
- تلفن: 54٪
- پایان موقعیت:
- دسکتاپ: 30٪
- قرص: 57٪
- تلفن: 54٪
فاصله
بیایید به تب Design برویم و یک حاشیه داخلی زیاد اضافه کنیم.
- بالشتک بالایی: 150px
یک خط جدید اضافه کنید
ساختار ستون
با افزودن یک خط جدید با همان ساختاری که در زیر نشان داده شده است ، ادامه دهید:
اندازه
بدون اضافه کردن هیچگونه حالت ، هنوز تنظیمات را باز کرده و فاصله را به صورت زیر تغییر می دهیم:
- از روده های سفارشی استفاده کنید: بله
- فضای ناودان: 1
- عرض: 95٪
- حداکثر عرض: 2560px
- تراز خط: مرکز
فاصله
ما حاشیه داخلی بالایی را نیز حذف خواهیم کرد.
- بالشتک بالایی: 0px
عنصر اصلی
و به مرکز دادن محتویات ستون روی DeskTop، ما از دو خط کد CSS در عنصر اصلی خط ماژول استفاده خواهیم کرد.
دسکتاپ:
نمایش: flex؛ align-things: center؛
تبلت و تلفن:
صفحه نمایش: بلوک؛
ماژول Woo Image را به ستون 1 اضافه کنید
محتوای پویا
وقت آن است که ماژول ها را اضافه کنیم ، ما با ماژول Woo Images در ستون 1 شروع می کنیم. اطمینان حاصل کنید که "این محصول" انتخاب شده است.
- محصول: این محصول
جلوه انیمیشن پیمایش عمودی
ما با استفاده از افکت پیمایش حرکت افقی در برگه پیشرفته ، حرکت ظریف را به تصویر اضافه می کنیم.
- حرکت عمودی را فعال کنید: بله
- شروع افست:
- دفتر: -4
- تبلت و تلفن: 0
- میانگین افست: 0
- پایان افست: 0
- اثر حرکت ماشه: وسط عنصر
ماژول عنوان Woo را به ستون 2 اضافه کنید
محتوای پویا
در ستون 2، اولین ماژول مورد نیاز ما یک ماژول عنوان Woo است. مطمئن شوید که "این محصول" در کادر انتخاب شده است محتویات پویا
- محصول: این محصول
تنظیمات متن عنوان
سپس به برگه طراحی بروید و متن عنوان را به صورت زیر سبک دهید:
- فونت عنوان: اسوالد
- سبک فونت عنوان: بزرگ
- عنوان متن رنگ: # ffd623
- اندازه متن عنوان: 80px
فاصله
با اضافه کردن حاشیه های چپ و راست ، ماژول عنوان Woo را تکمیل کنید.
- حاشیه سمت چپ: 5٪
- حاشیه راست: 5٪
ماژول توضیحات Woo را به ستون 2 اضافه کنید
محتوای پویا
بیایید به ماژول بعدی برویم ، که یک ماژول توصیف Woo است. ما از محتوای پویای زیر برای این استفاده می کنیم:
- محصول: این محصول
- نوع توضیحات: توضیحات کوتاه
تنظیمات متن
به برگه طراحی ماژول بروید و متناسب با آن تنظیمات متن را تغییر دهید:
- قلم متن: کارلا
- رنگ متن: #dbdbdb
- اندازه متن: 17 px (میزکار و رایانه لوحی) ، 15 عدد (تلفن)
- ارتفاع خط متن: 1,9 em
اندازه
سپس عرض را در اندازه های مختلف صفحه تغییر دهید.
- عرض: 59٪ (دسکتاپ) ، 82٪ (رایانه لوحی و تلفن)
فاصله
با افزودن مقادیر حاشیه سفارشی در تنظیمات فاصله ، ماژول توصیف Woo را کامل کنید.
- حاشیه بالایی: 50px
- حاشیه پایین: 100px
- حاشیه سمت چپ: 5٪
- حاشیه راست: 5٪
ماژول Blurb را به ستون 2 اضافه کنید
محتوای پویا
برای نشان دادن مزایای محصول که در قسمت XNUMX این آموزش اضافه کردیم ، از Blurb Mods استفاده خواهیم کرد. اولین حالت Blurb را اضافه کنید و از محتوای پویای اولین محصول برای عنوان و بدنه استفاده کنید.
- عنوان: مزایای عنوان 1
- بدن: توضیحات مزایا 1
آپلود تصویر
تصویری را بارگذاری کنید یا بعداً از نمادی به انتخاب خود استفاده کنید. موارد ابتدایی را که در طول این آموزش استفاده کرده ایم می توانید در پوشه بارگیری که در ابتدای این آموزش می توانید بارگیری کنید ، پیدا کنید.
تنظیمات تصویر / آیکون
به برگه طراحی ماژول بروید و تنظیمات تصویر / آیکون را به شرح زیر تغییر دهید:
- قرار دادن تصویر / آیکن: بالا
- تراز تصویر / آیکون: سمت چپ
عنوان تنظیمات متن
تنظیمات متن عنوان را در مرحله بعدی تغییر می دهیم.
- قلم عنوان: اسوالد
- عنوان سبک قلم: حروف بزرگ
- اندازه متن عنوان: 25px
تنظیمات متن بدن
همراه با تنظیمات متن بدن.
- قلم بدنه: کارلا
- اندازه متن: 17 px (میزکار و رایانه لوحی) ، 15 عدد (تلفن)
- ارتفاع خط بدنه: 1,9 em
اندازه
سپس به تنظیمات اندازه بروید و عرض ها را تغییر دهید. مهم است که از عرض اصلی کمتر از 50٪ استفاده کنید ، این به ما امکان می دهد در مراحل بعدی دو ماژول Blurb را در کنار هم نشان دهیم.
- عرض تصویر: 25٪
- عرض: 49٪
فاصله
ما همچنین با استفاده از مقادیر padding سفارشی در اندازه های مختلف صفحه ، فضاهای اطراف ماژول Blurb را اضافه خواهیم کرد.
- بالشتک بالایی: 8٪
- بالشتک پایین: 8٪
- بالشتک چپ: 8٪ (دسک تاپ و تبلت) ، 2٪ (تلفن)
- بالشتک سمت راست: 8٪ (رومیزی و رایانه لوحی) 2٪ (تلفن)
عنصر اصلی
اکنون می خواهیم اطمینان حاصل کنیم که ماژول Summary در دو مرحله متن را در کنار هم نمایش می دهد. ابتدا اطمینان حاصل خواهیم کرد که عرض ماژول کمتر از 50٪ است (مانند مرحله قبل). بعد ، ما از ویژگی موجود در ردیف استفاده خواهیم کرد. ما این ویژگی CSS را در بخش پیشرفته به عنصر اصلی اضافه خواهیم کرد.
صفحه نمایش: نشان دهنده بلوک؛
کلون کردن ماژول خلاصه 3 بار
پس از اتمام اولین حالت Blurb ، می توانید آن را سه بار شبیه سازی کنید. به طور خودکار مشاهده خواهید کرد که ماژول های Blurb در یک شبکه ظاهر می شوند.
تصاویر ماژول Blurb را ویرایش کنید
تصویر را در هر غلاف تکراری Blurb ویرایش کنید. می توانید آنها را در پوشه بارگیری که ممکن است در ابتدای این مقاله بارگیری کرده باشید ، پیدا کنید.
محتوای پویا ماژول Blurb را اصلاح کنید
همچنین محتوای پویا هر یک از ماژول های Blurb را تکرار کنید.
- عنوان: عنوان خدمات (2,3،4 یا XNUMX)
- بدن: شرح مزایا (2,3،4 یا XNUMX)
مرزها را به صورت جداگانه به ماژول های Blurb اضافه کنید
تنظیمات حاشیه Blurb Module 1
اکنون ، برای پایان دادن به طراحی شبکه خود ، می خواهیم حاشیه هایی را به ماژول های Blurb در سطح فردی اضافه کنیم. اولین حالت Blurb را باز کرده و از حاشیه مستقیم استفاده کنید.
- عرض حاشیه راست: 1 پیکسل
- رنگ حاشیه سمت راست: # ffd623
همچنین یک حاشیه پایین به اولین ماژول Blurb اضافه کنید.
- عرض مرز پایین: 1px
- رنگ حاشیه پایین: # 000000
تنظیمات حاشیه Blurb Module 2
سپس ماژول Blurb دوم را باز کرده و از مرز پایین استفاده کنید.
- عرض مرز پایین: 1px
- رنگ حاشیه پایین: # 000000
تنظیمات حاشیه Blurb Module 3
طرح شبکه را با اضافه کردن یک مرز مستقیم به ماژول سوم Blurb تکمیل کنید.
- عرض حاشیه راست: 1 پیکسل
- رنگ حاشیه سمت راست: # ffd623
اضافه کردن وو اضافه کردن به سبد ماژول در ستون 2
محتوای پویا
آخرین ماژولی که در طراحی خود به آن نیاز داریم ، ماژول Woo Add to Cart است. اطمینان حاصل کنید که "این محصول" در منطقه محتوای پویا انتخاب شده باشد.
- محصول: این محصول
تنظیمات زمینه
به برگه طراحی بعدی بروید و تنظیمات قسمت را تغییر دهید.
- زمینه زمینه رنگ: #ffffff
- رنگ متن متن: # 000000
- زمینه های گرد: 0px (همه گوشه ها)
- عرض مرزهای پایین مزارع: 1px
- رنگ مرز پایین فیلدها: # 000000
تنظیمات دکمه
سپس دکمه را مطابق آن سبک دهید:
- از دکمه های سفارشی برای دکمه استفاده کنید: بله
- اندازه متن دکمه: 20 پیکسل
- رنگ متن دکمه: # 000000
- رنگ پس زمینه دکمه: # ffd623
- عرض مرز دکمه: 0px
- شعاع مرزی دکمه: 0px
- قلم دکمه: اسوالد
- سبک قلم دکمه: بزرگ
- بالشتک بالایی: 20px
- بالشتک پایین: 20px
- لبه چپ: 50px
- بالشتک راست: 50 پیکسل
فاصله
و با افزودن مقادیر حاشیه سفارشی ، پارامترهای ماژول را تکمیل کنید.
- حاشیه بالایی: 100px
- حاشیه سمت چپ: 5٪
3. ذخیره تغییرات در ایجاد کننده موضوع و پیش نمایش نتیجه
پس از اتمام طراحی الگوی صفحه محصول ، می توانید تمام تغییرات Theme Builder خود را ذخیره کرده و نتیجه را روی محصولات خود نشان دهید!
بررسی
اکنون که همه مراحل را طی کردیم ، بیایید نگاهی نهایی به ظاهر آن در اندازه های مختلف صفحه بیندازیم.
آخرین افکار
در این مقاله ، ما به شما نشان داده ایم که چگونه با الگوی صفحه بعدی محصول Divi خود خلاق شوید. به طور خاص ، ما به شما نشان داده ایم که چگونه یک شبکه سود محصول پویا برای افزودن مزایای اضافی به صفحه محصول خود بگنجانید. ما این آموزش را با استفاده از Divi در ترکیب با پلاگین Advanced Custom Fields ایجاد کردیم. همچنین می توانید فایل JSON را به صورت رایگان بارگیری کنید! اگر س questionsال یا پیشنهادی دارید ، در صورت تمایل در قسمت نظرات زیر نظر دهید.