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

Divi یک تم پاسخگو است و دومی با چندین افزونه دیگر از جمله افزونه های دیگر سازگار است از WooCommerce. امروز قصد داریم به شما نشان دهیم که چگونه یک انیمیشن متفاوت به محصولات خود بدهید از WooCommerce.

گاهی اوقات سبک از از WooCommerce ممکن است کمی ناکافی باشد، به خصوص اگر سبک CSS شما کمی متفاوت باشد. این آموزش که کمی فنی خواهد بود (کمی CSS و هیچ چیز دیگر) ، به شما امکان می دهد این را اصلاح کنید.

آموزش های دیگر با موضوع Divi

• سایت های رستوران 5 که از موضوع دووی استفاده می کنند
• نحوه اضافه کردن متن به یک محصول WooCommerce در Divi
• نحوه تغییر رنگ منو بین صفحات در Divi
• ویژگی هایی که شما در مورد Divi نمی دانید
• نحوه ایجاد کشویی در دیوی
• نحوه ویرایش نقش کاربر در Divi

بیایید شروع.

تغییر نماد برای متن روی ماوس

به طور پیش فرض ، هنگامی که از WooCommerce با Divi استفاده می کنید و بالای یک محصول حرکت می کنید ، یک نماد کوچک "+" را می بینید که یک فونت است (را-آیکون) پیشنهاد شده توسط دیوی و به شرح زیر است:

تغییر تنظیمات به یک نماد دیگر در تنظیمات واقعاً آسان است ، اما اگر می خواهید متنی اضافه کنید ، این چیز دیگری است؟ من نحوه دستیابی به این هدف را با قطعه های CSS امروز به شما نشان می دهم و همچنین کدهای اختیاری برای افزودن به سایت شما نیز به شما ارائه می دهم.

در اینجا چیزی است که ما یک بار کامل خواهیم کرد:

چرا به هر حال از متن به جای نماد استفاده می شود؟

من می توانم به دلایلی فکر کنم که می توانند شما را در این امر انجام دهند:

برای تعریف نمای منحصر به فرد به مغازه خود: هر کاری که می توانید برای تمیز کردن سایت Divi / WooCommerce از سایت دیگر انجام دهید ، همیشه کار خوبی است.

استفاده از کلمه ای مانند "مشاهده" یا "خرید" ممکن است منجر به تبدیل بیشتر شود: همه باید آنچه را که برای وب سایت خود بهتر است انجام دهند و شما می توانید از تست یکپارچه A / B در دیوی استفاده کنید تا در این زمینه کمک کنید.

منبع الهام

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

اجرای ماوس بر روی متن

مرحله 1: پوشش رنگ

ابتدا رنگ پوشش شناور را تغییر خواهیم داد. انجام این کار در Divi بسیار آسان است. در ماژول فروشگاه خود به "بروید پارامترهای طراحی پیشرفته پیشرفته و رنگ خود را انتخاب کنید.

مرحله 2: اضافه کردن CSS

کد CSS زیر در " گزینه های تم> CSS سفارشی یا روی صفحه سبک تم کودک خود قرار دهید.

.woocommerce .et_overlay: قبل از سمت چپ: 0؛ حاشیه سمت چپ: 0؛ محتوا: 'مشاهده'؛ / *** متن شما در اینجا *** / font-family: 'Source With Pro'، Arial! / *** فونت خود را انتخاب کنید *** / متن-تبدیل: حروف بزرگ؛ اندازه قلم: 24px؛ رنگ: #fff؛ / *** رنگ متن را تنظیم کنید *** / font-weight: bold؛ متن-تراز: مرکز؛ عرض: 100٪؛ بالشتک: 5px 0؛ }

اگر می خواهید محصولاتتان نسبتاً گرد باشد ، می توانید این کد اختیاری را اضافه کنید:

.woocommerce ul.products li.product a img، .et_overlay {border-radius: 50٪؛ }

این همه!

اکنون می توانید به فروشگاه خود مراجعه کرده و ببینید که تغییرات شما چگونه مورد توجه قرار می گیرد.

[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