روشی که صفحه محصول خود را طراحی می کنید تأثیر فوری بر رفتار شما دارد آخرین بازدید. طراحی صفحه محصول با طراحی خوب و شخصی می تواند این امکان را فراهم کند آخرین بازدید تا راحت تر تصمیم بگیرند که آیا می خواهند محصول شما را بخرند یا خیر. اگر به دنبال راهی برای جذاب‌تر کردن صفحه محصول خود هستید، احتمالاً این آموزش را دوست خواهید داشت. 

ما به شما نشان خواهیم داد که چگونه با استفاده از 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 .

افزونه زمینه سفارشی adavanced را نصب کنید

به قسمت های دلخواه بروید و گروه جدیدی از زمینه ها را اضافه کنید

پس از نصب و فعال سازی افزونه ACF ، می توانید به قسمتهای سفارشی خود دسترسی پیدا کرده و یک گروه زمینه جدید اضافه کنید.

زمینه های acf ایجاد کنید

تنظیمات گروه زمینه

به گروه جدید فیلدهای خود عنوان بدهید و اجازه دهید فقط در صفحات محصول نمایش داده شود.

  • "نوع پیام" با "محصول" برابر است
قوانین اضافه کنید

اولین فیلد را اضافه کنید

در ادامه با افزودن یک قسمت جدید برای عنوان اولین محصول خود ادامه دهید.

  • Field Label: عنوان مزیت 1
  • نوع فیلد: متن
فیلد ac را اضافه کنید
Divi سفارشی سازی زمینه

مرحله را برای قسمتهای باقیمانده تکرار کنید

همین کار را برای سایر مزایای محصول و توضیحات آنها نیز انجام دهید. همه این فیلدها به نوع فیلد "Text" اختصاص یافته به آنها نیاز دارند.

  • عنوان خدمات 1
  • شرح مزایا 1
  • عنوان خدمات 2
  • شرح مزایا 2
  • عنوان خدمات 3
  • شرح مزایا 3
  • عنوان خدمات 4
  • شرح مزایا 4
قسمتهای acf را ​​پیکربندی کنید

2. مزایایی را به محصولات اضافه کنید

محصولی جدید را باز یا اضافه کنید

پس از ایجاد گروه و زمینه های زمینه ، می توانید مزایای محصول را در سطح فردی به محصولات خود اضافه کنید. محصولی را به انتخاب خود باز کنید یا محصول جدیدی ایجاد کنید.

ایجاد محصول Divi

قسمت مزایای محصول را تکمیل کنید

و مزایای محصول را برآورده سازید.

قسمتهای مزایای divi را پر کنید

3. یک الگوی صفحه محصول را در Divi Theme Builder ایجاد کنید

به Divi Theme Builder بروید و یک الگوی جدید اضافه کنید

وقت آن است که با Divi شروع کنیم! برای ایجاد الگوی جدید ، به Divi Theme Builder بروید و روی "افزودن الگوی جدید" کلیک کنید.

تم سازنده Divi

از یک الگوی برای همه محصولات استفاده کنید

ما از این الگو در همه محصولات استفاده می کنیم ، اما در صورت تمایل محصولاتی را با دسته یا برچسب خاص انتخاب کنید.

همه محصولات ووکامرس را اضافه کنید

وارد ویرایشگر قالب بدنه مدل شوید

سپس با کلیک بر روی "Add custom body" و انتخاب "Create custom body" بدنه مدل را وارد کنید.

بدن divi ساختمان

بخش شماره 1 را ویرایش کنید

رنگ پس زمینه

پس از ورود به ویرایشگر الگو ، متوجه بخشی خواهید شد. آن قسمت را باز کرده و رنگ زمینه را به سیاه تغییر دهید.

  • رنگ زمینه: # 000000
پیکربندی قسمت Divi

فاصله

به برگه طراحی بخش بروید و مقداری بالشتک سفارشی بالا و پایین اضافه کنید.

  • بالشتک بالایی: 10px
  • بالشتک پایین: 10px
پیکربندی فاصله بخش Divi

یک خط جدید اضافه کنید

ساختار ستون

بیایید با اضافه کردن یک خط جدید به بخشی که ساختار زیر را دارد ادامه دهیم:

پیکربندی طرح ماژول خط

فاصله

بدون اضافه کردن حالت ، اجازه دهید تنظیمات ردیف را باز کنیم و تنظیمات فاصله را انجام دهیم.

  • از Personal Gutter استفاده کنید: بله
  • عرض روده: 1
  • عرض: 90٪
  • حداکثر عرض: 100٪
تنظیمات فاصله ماژول خط

فاصله

تمام فاصله داخلی بالا و پایین را حذف کنید.

  • حاشیه داخلی بالا: 0px
  • حاشیه داخلی کم: 0px
تنظیمات فاصله ماژول خط Divi

ماژول Woo Cart Notice را به ستون اضافه کنید

محتوای پویا

تنها ماژولی که در این خط و بخش به آن نیاز داریم ، ماژول Woo Cart Notice است. اطمینان حاصل کنید که "این محصول" در بخش پویا انتخاب شده است.

  • محصول: این محصول
تنظیمات woo cart توجه ماژول تقسیم

زمینه رنگی

سپس تنظیمات ماژول را باز کرده و از یک پس زمینه شفاف استفاده کنید.

  • رنگ پس زمینه: rgba (0,0,0,0،XNUMX،XNUMX،XNUMX)
تنظیمات divi ماژول سبد خرید

تنظیمات متن

به برگه "Design" بروید و قلم متن را تغییر دهید.

  • قلم متن: کارلا
تنظیمات قلم ماژول Divi

تنظیم دکمه

تنظیمات افزونه را با تعریف تنظیمات سبک تمام کنید:

  • از دکمه های سفارشی برای دکمه استفاده کنید: بله
  • اندازه متن دکمه: 20px
  • رنگ متن دکمه: # 000000
  • زمینه دکمه: # ffd623
  • عرض مرز دکمه: 0px
  • دکمه حاشیه گرد: 0px
تنظیمات رنگ ماژول اطلاع از سبد خرید وو
  • قلم دکمه: اسوالد
  • دکمه سبک قلم: Shift
وو سبد خرید تنظیم رنگ طراحی ماژول
  • حاشیه داخلی بالا: 20px
  • حاشیه داخلی کم: 20px
  • حاشیه داخلی سمت چپ: 50px
  • حاشیه سمت راست داخلی: 50px
ماژول طراحی پیکربندی اعلان سبد خرید

بخش شماره 2 را اضافه کنید

پیشینه شیب

بخش عادی دیگری را در زیر بخش قبلی اضافه کنید. سپس تنظیمات را باز کرده و از پس زمینه گرادیان به شرح زیر استفاده کنید:

  • رنگ 1: # 000000
  • رنگ 2: #ffffff
  • نقطه شروع:
    • دسکتاپ: 30٪
    • قرص: 57٪
    • تلفن: 54٪
  • پایان موقعیت:
    • دسکتاپ: 30٪
    • قرص: 57٪
    • تلفن: 54٪
تنظیم قسمت عقب ماژول خط Divi

فاصله

بیایید به تب Design برویم و یک حاشیه داخلی زیاد اضافه کنیم.

  • بالشتک بالایی: 150px
پیکربندی فاصله ماژول خط Divi

یک خط جدید اضافه کنید

ساختار ستون

با افزودن یک خط جدید با همان ساختاری که در زیر نشان داده شده است ، ادامه دهید:

پیکربندی سبک Divi

اندازه

بدون اضافه کردن هیچگونه حالت ، هنوز تنظیمات را باز کرده و فاصله را به صورت زیر تغییر می دهیم:

  • از روده های سفارشی استفاده کنید: بله
  • فضای ناودان: 1
  • عرض: 95٪
  • حداکثر عرض: 2560px
  • تراز خط: مرکز
ماژول divi پیکربندی ناودان

فاصله

ما حاشیه داخلی بالایی را نیز حذف خواهیم کرد.

  • بالشتک بالایی: 0px
پیکربندی فاصله ماژول Divi

عنصر اصلی

و به مرکز دادن محتویات ستون روی DeskTop، ما از دو خط کد CSS در عنصر اصلی خط ماژول استفاده خواهیم کرد.

دسکتاپ:

نمایش: flex؛ align-things: center؛

تبلت و تلفن:

صفحه نمایش: بلوک؛
تنظیمات سبک ماژول Divi

ماژول Woo Image را به ستون 1 اضافه کنید

محتوای پویا

وقت آن است که ماژول ها را اضافه کنیم ، ما با ماژول Woo Images در ستون 1 شروع می کنیم. اطمینان حاصل کنید که "این محصول" انتخاب شده است.

  • محصول: این محصول
تنظیمات ماژول تصویر محصول Woocommerce

جلوه انیمیشن پیمایش عمودی

ما با استفاده از افکت پیمایش حرکت افقی در برگه پیشرفته ، حرکت ظریف را به تصویر اضافه می کنیم.

  • حرکت عمودی را فعال کنید: بله
  • شروع افست:
    • دفتر: -4
    • تبلت و تلفن: 0
  • میانگین افست: 0
  • پایان افست: 0
  • اثر حرکت ماشه: وسط عنصر
تنظیم ماژول تصویر Divi

ماژول عنوان Woo را به ستون 2 اضافه کنید

محتوای پویا

در ستون 2، اولین ماژول مورد نیاز ما یک ماژول عنوان Woo است. مطمئن شوید که "این محصول" در کادر انتخاب شده است محتویات پویا

  • محصول: این محصول
شبکه سود محصول

تنظیمات متن عنوان

سپس به برگه طراحی بروید و متن عنوان را به صورت زیر سبک دهید:

  • فونت عنوان: اسوالد
  • سبک فونت عنوان: بزرگ
  • عنوان متن رنگ: # ffd623
  • اندازه متن عنوان: 80px
تنظیم طرح ماژول عنوان Divi

فاصله

با اضافه کردن حاشیه های چپ و راست ، ماژول عنوان Woo را تکمیل کنید.

  • حاشیه سمت چپ: 5٪
  • حاشیه راست: 5٪
تنظیم ماژول عنوان Divi

ماژول توضیحات Woo را به ستون 2 اضافه کنید

محتوای پویا

بیایید به ماژول بعدی برویم ، که یک ماژول توصیف Woo است. ما از محتوای پویای زیر برای این استفاده می کنیم:

  • محصول: این محصول
  • نوع توضیحات: توضیحات کوتاه
تنظیمات ماژول توضیحات محصول

تنظیمات متن

به برگه طراحی ماژول بروید و متناسب با آن تنظیمات متن را تغییر دهید:

  • قلم متن: کارلا
  • رنگ متن: #dbdbdb
  • اندازه متن: 17 px (میزکار و رایانه لوحی) ، 15 عدد (تلفن)
  • ارتفاع خط متن: 1,9 em
تقسیم ماژول تنظیم رنگ

اندازه

سپس عرض را در اندازه های مختلف صفحه تغییر دهید.

  • عرض: 59٪ (دسکتاپ) ، 82٪ (رایانه لوحی و تلفن)
تنظیم عرض ماژول خلاصه Divi

فاصله

با افزودن مقادیر حاشیه سفارشی در تنظیمات فاصله ، ماژول توصیف Woo را کامل کنید.

  • حاشیه بالایی: 50px
  • حاشیه پایین: 100px
  • حاشیه سمت چپ: 5٪
  • حاشیه راست: 5٪
ماژول توصیف محصول Divi

ماژول Blurb را به ستون 2 اضافه کنید

محتوای پویا

برای نشان دادن مزایای محصول که در قسمت XNUMX این آموزش اضافه کردیم ، از Blurb Mods استفاده خواهیم کرد. اولین حالت Blurb را اضافه کنید و از محتوای پویای اولین محصول برای عنوان و بدنه استفاده کنید.

  • عنوان: مزایای عنوان 1
  • بدن: توضیحات مزایا 1
تنظیم متن ماژول خلاصه Divi

آپلود تصویر

تصویری را بارگذاری کنید یا بعداً از نمادی به انتخاب خود استفاده کنید. موارد ابتدایی را که در طول این آموزش استفاده کرده ایم می توانید در پوشه بارگیری که در ابتدای این آموزش می توانید بارگیری کنید ، پیدا کنید.

پیکربندی divi خلاصه ماژول تصویر

تنظیمات تصویر / آیکون

به برگه طراحی ماژول بروید و تنظیمات تصویر / آیکون را به شرح زیر تغییر دهید:

  • قرار دادن تصویر / آیکن: بالا
  • تراز تصویر / آیکون: سمت چپ
ماژول تنظیم Divi

عنوان تنظیمات متن

تنظیمات متن عنوان را در مرحله بعدی تغییر می دهیم.

  • قلم عنوان: اسوالد
  • عنوان سبک قلم: حروف بزرگ
  • اندازه متن عنوان: 25px
پیکربندی قلم ماژول خلاصه divi

تنظیمات متن بدن

همراه با تنظیمات متن بدن.

  • قلم بدنه: کارلا
  • اندازه متن: 17 px (میزکار و رایانه لوحی) ، 15 عدد (تلفن)
  • ارتفاع خط بدنه: 1,9 em
پیکربندی خلاصه ماژول متن div i

اندازه

سپس به تنظیمات اندازه بروید و عرض ها را تغییر دهید. مهم است که از عرض اصلی کمتر از 50٪ استفاده کنید ، این به ما امکان می دهد در مراحل بعدی دو ماژول Blurb را در کنار هم نشان دهیم.

  • عرض تصویر: 25٪
  • عرض: 49٪
اندازه ماژول خلاصه divi را پیکربندی کنید

فاصله

ما همچنین با استفاده از مقادیر padding سفارشی در اندازه های مختلف صفحه ، فضاهای اطراف ماژول Blurb را اضافه خواهیم کرد.

  • بالشتک بالایی: 8٪
  • بالشتک پایین: 8٪
  • بالشتک چپ: 8٪ (دسک تاپ و تبلت) ، 2٪ (تلفن)
  • بالشتک سمت راست: 8٪ (رومیزی و رایانه لوحی) 2٪ (تلفن)
فاصله ماژول خلاصه divi را پیکربندی کنید

عنصر اصلی

اکنون می خواهیم اطمینان حاصل کنیم که ماژول Summary در دو مرحله متن را در کنار هم نمایش می دهد. ابتدا اطمینان حاصل خواهیم کرد که عرض ماژول کمتر از 50٪ است (مانند مرحله قبل). بعد ، ما از ویژگی موجود در ردیف استفاده خواهیم کرد. ما این ویژگی CSS را در بخش پیشرفته به عنصر اصلی اضافه خواهیم کرد.

صفحه نمایش: نشان دهنده بلوک؛
ماژول divi کد css را اضافه کنید

کلون کردن ماژول خلاصه 3 بار

پس از اتمام اولین حالت Blurb ، می توانید آن را سه بار شبیه سازی کنید. به طور خودکار مشاهده خواهید کرد که ماژول های Blurb در یک شبکه ظاهر می شوند.

بخش تقسیم نام محصول

تصاویر ماژول Blurb را ویرایش کنید

تصویر را در هر غلاف تکراری Blurb ویرایش کنید. می توانید آنها را در پوشه بارگیری که ممکن است در ابتدای این مقاله بارگیری کرده باشید ، پیدا کنید.

تصویر ماژول خلاصه Divi

محتوای پویا ماژول Blurb را اصلاح کنید

همچنین محتوای پویا هر یک از ماژول های Blurb را تکرار کنید.

  • عنوان: عنوان خدمات (2,3،4 یا XNUMX)
  • بدن: شرح مزایا (2,3،4 یا XNUMX)
قوانین ماژول خلاصه Divi

مرزها را به صورت جداگانه به ماژول های Blurb اضافه کنید

تنظیمات حاشیه Blurb Module 1

اکنون ، برای پایان دادن به طراحی شبکه خود ، می خواهیم حاشیه هایی را به ماژول های Blurb در سطح فردی اضافه کنیم. اولین حالت Blurb را باز کرده و از حاشیه مستقیم استفاده کنید.

  • عرض حاشیه راست: 1 پیکسل
  • رنگ حاشیه سمت راست: # ffd623
ماژول خلاصه divi پیکربندی حاشیه گرد

همچنین یک حاشیه پایین به اولین ماژول Blurb اضافه کنید.

  • عرض مرز پایین: 1px
  • رنگ حاشیه پایین: # 000000
حاشیه پایین divi را پیکربندی کنید
تنظیمات حاشیه Blurb Module 2

سپس ماژول Blurb دوم را باز کرده و از مرز پایین استفاده کنید.

  • عرض مرز پایین: 1px
  • رنگ حاشیه پایین: # 000000
divi خلاصه ماژول پیکربندی
تنظیمات حاشیه Blurb Module 3

طرح شبکه را با اضافه کردن یک مرز مستقیم به ماژول سوم Blurb تکمیل کنید.

  • عرض حاشیه راست: 1 پیکسل
  • رنگ حاشیه سمت راست: # ffd623
شبکه سود محصول

اضافه کردن وو اضافه کردن به سبد ماژول در ستون 2

محتوای پویا

آخرین ماژولی که در طراحی خود به آن نیاز داریم ، ماژول Woo Add to Cart است. اطمینان حاصل کنید که "این محصول" در منطقه محتوای پویا انتخاب شده باشد.

  • محصول: این محصول
به تنظیمات ماژول divi کارت اضافه کنید

تنظیمات زمینه

به برگه طراحی بعدی بروید و تنظیمات قسمت را تغییر دهید.

  • زمینه زمینه رنگ: #ffffff
  • رنگ متن متن: # 000000
پیکربندی ماژول رنگ سبک اضافه کردن به divi سبد خرید
  • زمینه های گرد: 0px (همه گوشه ها)
  • عرض مرزهای پایین مزارع: 1px
  • رنگ مرز پایین فیلدها: # 000000
فاصله قسمت divi را پیکربندی کنید

تنظیمات دکمه

سپس دکمه را مطابق آن سبک دهید:

  • از دکمه های سفارشی برای دکمه استفاده کنید: بله
  • اندازه متن دکمه: 20 پیکسل
  • رنگ متن دکمه: # 000000
  • رنگ پس زمینه دکمه: # ffd623
  • عرض مرز دکمه: 0px
  • شعاع مرزی دکمه: 0px
طراحی دکمه divi را پیکربندی کنید
  • قلم دکمه: اسوالد
  • سبک قلم دکمه: بزرگ
دکمه divi را پیکربندی کنید
  • بالشتک بالایی: 20px
  • بالشتک پایین: 20px
  • لبه چپ: 50px
  • بالشتک راست: 50 پیکسل
اندازه ماژول divi را پیکربندی کنید

فاصله

و با افزودن مقادیر حاشیه سفارشی ، پارامترهای ماژول را تکمیل کنید.

  • حاشیه بالایی: 100px
  • حاشیه سمت چپ: 5٪
فاصله divi را پیکربندی کنید

3. ذخیره تغییرات در ایجاد کننده موضوع و پیش نمایش نتیجه

پس از اتمام طراحی الگوی صفحه محصول ، می توانید تمام تغییرات Theme Builder خود را ذخیره کرده و نتیجه را روی محصولات خود نشان دهید!

طراحی divi را ذخیره کنید
تغییرات divi را ذخیره کنید

بررسی

اکنون که همه مراحل را طی کردیم ، بیایید نگاهی نهایی به ظاهر آن در اندازه های مختلف صفحه بیندازیم.

نتیجه نمایش

آخرین افکار

در این مقاله ، ما به شما نشان داده ایم که چگونه با الگوی صفحه بعدی محصول Divi خود خلاق شوید. به طور خاص ، ما به شما نشان داده ایم که چگونه یک شبکه سود محصول پویا برای افزودن مزایای اضافی به صفحه محصول خود بگنجانید. ما این آموزش را با استفاده از Divi در ترکیب با پلاگین Advanced Custom Fields ایجاد کردیم. همچنین می توانید فایل JSON را به صورت رایگان بارگیری کنید! اگر س questionsال یا پیشنهادی دارید ، در صورت تمایل در قسمت نظرات زیر نظر دهید.