Divi طوری طراحی شده است که با آن سازگار باشد از WooCommerce. برای ادغام از WooCommerce، باید آخرین نسخه را نصب کنید از WooCommerce.

افزونه WooCommerce است تجارت الکترونیک که ما توصیه می کنیم، زیرا دارای بهترین مجموعه از ویژگی ها، رابط کاربری است و از بهترین شیوه های کدنویسی پیروی می کند. پس از فعال سازی افزونه، دو بخش جدید «ووکامرس» و «محصولات» به داشبورد وردپرس اضافه شده است. می توانید از این مناطق برای تنظیم تنظیمات تجارت الکترونیک و انتشار محصولات جدید استفاده کنید. می توانید پیدا کنید مستندات کامل در WooCommerce اینجا هستید .

لطفا توجه داشته باشید که حتی اگر سازنده شامل ماژول های مختلف WooCommerce است ، شما می توانید به تنهایی از WooCommerce استفاده کنید بدون اینکه سازنده کاملا خوب باشد. همانطور که در مستندات آنها نشان داده شده است ، می توانید صفحات استانداردی برای Checkout ، سبد خرید و غیره ایجاد کنید. همچنین می توانید مستقیماً به دسته های تجارت جهانی خود پیوند دهید ، یا از آن استفاده کنید کوتاه فعال WooCommerce در یک ماژول متن Divi. این به شما آزادی می دهد که هر کاری را انجام دهید.

نحوه اضافه کردن ماژول فروشگاه به صفحه خود

قبل از اینکه بتوانید یک ماژول فروشگاهی را به صفحه خود اضافه کنید، ابتدا باید به Divi Builder بروید. از وقتی که تم دیوی در وب سایت خود نصب شده است، متوجه یک دکمه خواهید شد از Divi ساز استفاده کنید در هر زمان که صفحه جدیدی ایجاد کردید ، بالای ویرایشگر پست قرار بگیرید. برای فعال سازی Divi Builder و دسترسی به همه ماژول های Divi Builder بر روی این دکمه کلیک کنید. سپس بر روی دکمه کلیک کنید از Visual Builder استفاده کنید برای شروع ژنراتور در حالت تصویری. همچنین می توانید بر روی دکمه کلیک کنید از Visual Builder استفاده کنید اگر به داشبورد وردپرس خود متصل هستید ، وب سایت خود را در پیش زمینه مرور می کنید.

پس از ورود به Visual Builder ، می توانید بر روی دکمه خاکستری بعلاوه کلیک کنید تا یک ماژول جدید به صفحه خود اضافه کنید. ماژول های جدید فقط می توانند در داخل ردیف ها اضافه شوند. اگر صفحه جدیدی را شروع می کنید ، به یاد داشته باشید که ابتدا یک ردیف به صفحه خود اضافه کنید. ما آموزش های خوبی در مورد استفاده از عناصر خط Division و بخش Divi داریم.

ماژول فروشگاه را در لیست ماژول ها پیدا کرده و بر روی آن کلیک کنید تا به صفحه شما اضافه شود. لیست ماژول ها قابل جستجو است ، به این معنی که شما می توانید کلمه "shop" را نیز تایپ کنید و سپس برای جستجوی خودکار و افزودن ماژول فروشگاه ، enter را کلیک کنید! پس از اضافه شدن ماژول ، لیست گزینه های ماژول به شما خوش آمد می گوید. این گزینه ها به سه گروه اصلی تقسیم می شوند: محتویات , تصور et پیشرفته .

از مثال موردی استفاده کنید: نمایش جدیدترین محصولات در صفحه اصلی با استفاده از ماژول Shop

برای این مثال ، من از ماژول فروشگاه برای نمایش جدیدترین محصولات در یک صفحه اصلی استفاده می کنم.

در اینجا صفحه ای با چهار محصول ارائه شده است.

بیایید شروع.

از سازنده بصری برای افزودن یک بخش منظم با یک ردیف عرض کامل (1 ستون) استفاده کنید. پارامتر row را تغییر دهید تا پهنای آن با عرض ناودان سفارشی 2 تمام شود.

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

تنظیمات ماژول را به شرح زیر به روز کنید:

گزینه های محتوا

نوع: محصولات اخیر
تعداد محصولات: 4

گزینه های طراحی

آیکون شناور رنگ: # ea1d63
پلیس: باز بدون
عنوان فونت اندازه: 24px
جایزه پلیس: باز بدون
اندازه فونت قیمت: 20px

گزینه های پیشرفته (CSS سفارشی)

تیتر:

متن تراز: مرکز؛
پس زمینه: #fff؛
حاشیه بالا: -10px! قابل توجه است؛

جایزه:

متن تراز: مرکز؛
پس زمینه: #fff؛
اثاثه یا لوازم داخلی: 15px؛

همین! این نتیجه نهایی است.

گزینه های محتویات فروشگاه

در برگه محتوا ، تمام عناصر محتوای ماژول ، مانند متن ، تصاویر و آیکون ها را پیدا خواهید کرد. همه اینها را کنترل می کند چی به نظر می رسد که در ماژول شما همیشه در این برگه یافت می شود.

نوع

نوع محصولی را که می خواهید در خوراک محصول خود نمایش دهید انتخاب کنید. شما می توانید از میان محصولات اخیر که همه محصولات شما را به ترتیب زمانی ، محصولات ویژه ، محصولات فروش ، محصولات پر فروش یا محصولات دارای بالاترین قیمت به نمایش می گذارند ، انتخاب کنید.

تعداد محصولات

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

شامل دسته بندی ها

دسته هایی را که می خواهید گنجانید انتخاب کنید.

تعداد ستون ها

تعداد ستون ها را برای نمایش در ماژول فروشگاه خود انتخاب کنید. برای یک ردیف 4 ستونی باید از 1 ستون استفاده شود. برای ستونی که 3/3 فضای ردیف را اشغال می کند باید از 4 ستون استفاده شود. از ستون 2 باید برای ستونی استفاده شود که 1/2 فضای نور را اشغال می کند. برای ستون 1/4 فضای ردیف باید از یک ستون استفاده شود.

تنظیم مجدد توسط

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

برچسب مدیریت

این برچسب ماژول را در سازنده تغییر می دهد تا به راحتی شناسایی شود. وقتی از نمای WireFrame در Visual Builder استفاده می کنید ، این برچسب ها در بلوک ماژول رابط Divi Builder ظاهر می شوند.

گزینه های طراحی کارگاه

در زبانه Design ، تمام گزینه های یک ظاهر طراحی شده ماژول ، مانند قلم ها ، رنگ ها ، اندازه و فاصله را پیدا خواهید کرد. این برگه ای است که برای تغییر ظاهر ماژول خود استفاده خواهید کرد. هر ماژول Divi دارای یک لیست طولانی از تنظیمات طراحی است که می توانید برای تغییر هر چیزی از آنها استفاده کنید.

نماد روکش

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

رنگ پوشش

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

نماد انتخابگر

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

رنگ نشان تجاری

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

فونت عنوان

با انتخاب قلم مورد نظر از منوی کشویی می توانید قلم متن عنوان خود را تغییر دهید. Divi ده ها فونت عالی ارائه شده توسط Google Fonts را ارائه می دهد. به طور پیش فرض ، Divi از قلم Open Sans برای تمام متنهای صفحه شما استفاده می کند. همچنین می توانید سبک متن خود را با استفاده از گزینه های پررنگ ، مورب ، حروف بزرگ و زیر خط تنظیم کنید.

اندازه فونت عنوان

در اینجا می توانید اندازه متن عنوان خود را تنظیم کنید. می توانید نوار لغزنده محدوده را بکشید تا اندازه متن خود را کم یا زیاد کنید یا مقدار اندازه متن مورد نظر را مستقیماً در قسمت ورودی در سمت راست نوار لغزنده وارد کنید. قسمتهای ورودی از واحدهای اندازه گیری مختلف پشتیبانی می کنند ، به این معنی که شما می توانید بسته به مقدار اندازه خود "px" یا "em" را وارد کنید تا نوع واحد آن تغییر کند.

رنگ متن عنوان

به طور پیش فرض ، تمام رنگ های متن در Divi با رنگ سفید یا خاکستری تیره ظاهر می شوند. اگر می خواهید رنگ متن عنوان خود را تغییر دهید ، با استفاده از این گزینه رنگ مورد نظر را از انتخاب کننده رنگ انتخاب کنید.

فاصله نامه های عنوان

فاصله حروف بر فاصله بین هر حرف تأثیر می گذارد. اگر می خواهید فضای بین هر حرف را در متن عنوان خود افزایش دهید ، از نوار لغزنده محدوده برای تنظیم فضا استفاده کنید یا اندازه فاصله دلخواه را در قسمت ورودی در سمت راست نوار لغزنده وارد کنید. قسمتهای ورودی از واحدهای مختلف اندازه گیری پشتیبانی می کنند ، به این معنی که می توانید بسته به مقدار اندازه خود "px" یا "em" را وارد کنید تا نوع واحد آن تغییر کند.

ارتفاع خط عنوان

ارتفاع خط فاصله بین هر سطر از متن عنوان شما را تحت تأثیر قرار می دهد. اگر می خواهید فضای بین هر خط را افزایش دهید ، از نوار لغزنده محدوده برای تنظیم فضا استفاده کنید یا اندازه فاصله دلخواه را در قسمت ورودی وارد کنید واقع در سمت راست مکان نما. قسمتهای ورودی از واحدهای اندازه گیری مختلف پشتیبانی می کنند ، به این معنی که شما می توانید بسته به مقدار اندازه خود "px" یا "em" را وارد کنید تا نوع واحد آن تغییر کند.

سیاست قیمت

با انتخاب قلم مورد نظر خود از منوی کشویی می توانید قلم متن قیمت خود را تغییر دهید. Divi دارای ده ها فونت عالی است که توسط Google Fonts طراحی شده اند. به طور پیش فرض ، Divi از قلم Open Sans برای تمام متنهای صفحه شما استفاده می کند. همچنین می توانید سبک متن خود را با استفاده از گزینه های درشت ، حروف بزرگ ، حروف بزرگ و زیر خط تنظیم کنید.

اندازه قلم قیمت

در اینجا می توانید اندازه متن قیمت خود را تنظیم کنید. می توانید نوار لغزنده محدوده را بکشید تا اندازه متن خود را کم یا زیاد کنید یا مستقیماً مقدار اندازه متن مورد نظر را در قسمت ورودی سمت راست نوار لغزنده وارد کنید. قسمتهای ورودی از واحدهای اندازه گیری مختلف پشتیبانی می کنند ، به این معنی که شما می توانید بسته به مقدار اندازه خود "px" یا "em" را وارد کنید تا نوع واحد آن تغییر کند.

رنگ متن قیمت

به طور پیش فرض ، تمام رنگ های متن در Divi با رنگ سفید یا خاکستری تیره ظاهر می شوند. اگر می خواهید رنگ متن قیمت خود را تغییر دهید ، با استفاده از این گزینه رنگ مورد نظر را از انتخاب کننده رنگ انتخاب کنید.

فاصله نامه های قیمت

فاصله حروف بر فاصله بین هر حرف تأثیر می گذارد. اگر می خواهید فضای بین هر حرف را در متن قیمت خود افزایش دهید ، از نوار لغزنده محدوده برای تنظیم فضا استفاده کنید یا اندازه فاصله دلخواه را در قسمت ورودی در سمت راست نوار لغزنده وارد کنید. قسمتهای ورودی از واحدهای اندازه گیری مختلف پشتیبانی می کنند ، به این معنی که شما می توانید بسته به مقدار اندازه خود "px" یا "em" را وارد کنید تا نوع واحد آن تغییر کند.

ارتفاع خط قیمت

ارتفاع ردیف بر فضای بین هر ردیف متن قیمت شما تأثیر می گذارد اگر می خواهید فضای بین هر ردیف را افزایش دهید ، از نوار لغزنده محدوده برای تنظیم فضا استفاده کنید یا اندازه فاصله دلخواه را در قسمت ورودی وارد کنید واقع در سمت راست مکان نما. قسمتهای ورودی از واحدهای مختلف اندازه گیری پشتیبانی می کنند ، به این معنی که می توانید بسته به مقدار اندازه خود "px" یا "em" را وارد کنید تا نوع واحد آن تغییر کند.

گزینه های پیشرفته فروشگاه

در برگه پیشرفته ، گزینه هایی را پیدا می کنید که ممکن است طراحان وب با تجربه تر ، مانند ویژگی های سفارشی CSS و HTML ، مفید باشند. در اینجا می توانید CSS سفارشی را به عناصر مختلف ماژول اعمال کنید. همچنین می توانید کلاسها و شناسه های CSS سفارشی را به ماژول اعمال کنید ، که می تواند برای سفارشی کردن ماژول در پرونده style.css موضوع کودک شما استفاده شود.

شناسه CSS

یک شناسه CSS اختیاری برای استفاده برای این ماژول وارد کنید. از یک شناسه می توان برای ایجاد یک سبک CSS سفارشی یا پیوند دادن به بخشهای خاصی از صفحه خود استفاده کرد.

کلاس CSS

کلاسهای CSS اختیاری را برای استفاده برای این ماژول وارد کنید. برای ایجاد یک سبک CSS سفارشی می توان از کلاس CSS استفاده کرد. می توانید چندین کلاس را که با فاصله از هم جدا شده اند ، اضافه کنید. با استفاده از گزینه های طرح زمینه Divi یا تنظیمات موجود در صفحه Divi Builder می توانید از این کلاسها در طرح زمینه Divi child یا سبک CSS سفارشی که به صفحه خود اضافه می کنید یا به وب سایت خود استفاده کنید.

CSS سفارشی

CSS سفارشی همچنین می تواند بر روی ماژول و هر یک از واحدهای داخلی ماژول اعمال شود. در بخش CSS سفارشی ، یک قسمت متنی پیدا می کنید که می توانید برگه های سبک CSS سفارشی را مستقیماً به هر عنصر اضافه کنید. ورودی های CSS در این تنظیمات از قبل با برچسب های سبک بسته بندی شده اند. بنابراین کافیست قوانین CSS را که با نقطه ویرگول جدا شده اند وارد کنید.

دید

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

[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" expanded "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "مسطح" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] دانلود تم DIVI [/ vcex_button] [/vcex_button] [um»_cum] » 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "expanded" align = "center" font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffrightnfaff" DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

سایر آموزشهای دوگانه

• سایت های رستوران 5 که از موضوع دووی استفاده می کنند
• چگونه برای اضافه کردن متن در محصول Divi WooCommerce
• چگونه می توان رنگ منو را بین صفحات Divi تغییر داد
• نحوه شخصی سازی شبکه های یک وبلاگ با Divi
• نحوه استفاده از ویرایشگر نقش دووی در وردپرس
• نحوه ایجاد یک نوار لغزنده تمام صفحه Divi
• چگونگی تغییر رنگ منوها بین صفحات Divi
• ویژگی هایی که احتمالاً در مورد Divi نمی دانید
• نحوه استفاده از Divi Builder در وردپرس
• نحوه استفاده از ماژول پیمایش ویدئو Divi
• نحوه استفاده از ماژول Flip Builder Divi
• نحوه اضافه کردن ماژول توصیفی در Divi Builder
• نحوه استفاده از ماژول متن دووی
• نحوه ایجاد کشویی در دیوی
• نحوه ویرایش نقش کاربر Divi
• نحوه استفاده از ماوی رسانه اجتماعی Divi
• نحوه استفاده از ماژول فروشگاه با موضوع WordPress Divi
• نحوه استفاده از ماوی نوار کناری Divi
• نحوه استفاده از ماژول جدول قیمت دووی
• چگونه از عنوان ماژول نشریات دووی استفاده کنیم
• نحوه اضافه کردن ماژول ویدیویی از دیوی
• نحوه استفاده از ماژول ناوبری مقاله
• چگونه از ماوی جستجوی Divi استفاده کنیم
• چگونه از ماژول کیف پول Divi استفاده کنیم
• نحوه استفاده از ماژول شخص در Divi Builder
• نحوه استفاده از ماژول کیف پول با فیلتر Divi
• نحوه استفاده از ماژول کشویی عرض کامل
• نحوه استفاده از ماژول Image Divid Builder
• نحوه استفاده از ماژول ناوبری تمام عرض Divi Builder
• نحوه استفاده از ماژول گالری تصاویر
• نحوه استفاده از ماوی کارت Width Divi Builder
• نحوه استفاده از ماژول Portfolio Full Width Divi
• نحوه استفاده از ماژول هدر تمام عیار Divi
• چگونه از ماوی شمارنده Divi استفاده کنیم
• نحوه استفاده از نوار لغزنده مقالات در Divi Builder
• نحوه استفاده از ماژول Divi ایمیل Optin