في البرنامج التعليمي السابق ، ونحن قدمتم ديفي. بالنسبة لأولئك الذين لا يعرفون ، فإن Divi هو وورد موضوع قسط من تصميم الفريق أنيقة ثيمات الذي يقدم خدمات متنوعة على ووردبريس وتصميم الإضافات والموضوعات.
Divi هو سمة سريعة الاستجابة والأخير متوافق مع العديد من المكونات الإضافية الأخرى من بين أمور أخرى لدينا WooCommerce. سنشرح لك اليوم كيفية تقديم رسوم متحركة مختلفة لمنتجاتك WooCommerce.
في بعض الأحيان أسلوب WooCommerce قد يكون غير مناسب بعض الشيء، خاصة إذا كان أسلوب CSS الخاص بك مختلفًا بعض الشيء. هذا البرنامج التعليمي، والذي سيكون تقنيًا بعض الشيء (قليلا المغلق ولا شيء غير ذلك) ، سيسمح لك بمعالجة هذا.
دروس أخرى في موضوع Divi
- المواقع 5 للاستخدام مطعم ديفي موضوع
- كيفية إضافة نص على ديفي المنتج WooCommerce
- كيفية تغيير لون القائمة بين الصفحات على ديفي
- الميزات التي لا تعرفها عن Divi
- كيفية إنشاء شريط التمرير على ديفي
- كيفية تحرير دور المستخدم على Divi
دعونا نبدأ.
تعديل أيقونة للنص على الماوس
بشكل افتراضي ، عندما تستخدم WooCommerce مع Divi وتحوم فوق أحد المنتجات ، ترى رمز "+" صغير يمثل خطًا (جعل أيقونة) مقترح من Divi وهو كما يلي:
من السهل حقًا تغيير ذلك إلى رمز مختلف في الإعدادات ، ولكن إذا كنت تريد إضافة بعض النصوص ، فهل هذا شيء آخر؟ سأوضح لك كيفية تحقيق ذلك باستخدام مقتطفات CSS اليوم ، وسأقوم أيضًا بتضمين رمز اختياري لإضافته إلى موقعك.
إليك ما سنكمله مرة واحدة:
لماذا استخدام النص بدلاً من الرمز على أي حال؟
يمكنني التفكير في بعض الأسباب التي يمكن أن تجعلك تفعل هذا:
لتحديد إعطاء نظرة فريدة لمتجرك: أي شيء يمكنك القيام به لتمييز موقع Divi / WooCommerce الخاص بك عن موقع آخر هو دائمًا شيء جيد.
قد يؤدي استخدام كلمة مثل "عرض" أو "شراء" إلى مزيد من التحويل: يحتاج الجميع إلى القيام بما هو أفضل لموقعهم على الويب ، ويمكنك الاستفادة من اختبار A / B المدمج على Divi للمساعدة في ذلك.
مصدر الهام
لقد تصفحت مؤخرًا موقعًا يحتوي على نص حول تحوم المنتج. لقد رأيت بالطبع مواقع التجارة الإلكترونية الأخرى التي تحتوي على كلمات بدلاً من رموز على المنتج وهي تحوم ، لذلك لم يكن هذا مفهومًا جديدًا. لم أضطر أبدًا إلى القيام بذلك على موضوع ديفي، وعندما رأيت ذلك ، وضعت نفسي في تحد وأدركت أنه من السهل حقًا تنفيذ ذلك. مع وجود القليل جدًا من التعليمات البرمجية المطلوبة ، فأنت متأكد من عدم التأثير على أداء مدونتك.
تنفيذ الماوس فوق النص
الخطوة 1: تراكب اللون
سنقوم بتغيير لون التراكب عند التمرير أولاً. هذا من السهل للغاية القيام به على Divi. في وحدة متجرك ، انتقل إلى " معلمات التصميم المتقدمة المتقدمة واختر لونك.
الخطوة 2: إضافة CSS
كود CSS التالي في " خيارات الموضوع> CSS مخصص أو على ورقة أنماط موضوع طفلك.
.woocommerce .et_overlay: قبل {left: 0؛ الهامش الأيسر: 0؛ المحتوى: "عرض" ؛ / *** نصك هنا *** / font-family: 'Source Without Pro'، Arial! / *** اختر خطك *** / text-convert: أحرف كبيرة؛ حجم الخط: 24px؛ اللون: # ff؛ / *** قم بتعيين لون النص *** / font-weight: bold؛ محاذاة النص: المركز ؛ العرض: 100٪ ؛ الحشو: 5px 0 ؛ }
إذا كنت تريد أن تكون منتجاتك مستديرة ، فيمكنك إضافة هذا الرمز الاختياري:
.woocommerce ul.products li.product وIMG، .et_overlay {الحدود بين دائرة نصف قطرها: 50٪، }
هذا كل شيئ !
يمكنك الآن زيارة متجرك ومعرفة كيفية أخذ تغييراتك في الاعتبار.
[vc_row center_row = "نعم"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" selected "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] قم بتنزيل موضوع DIVI [/ vcex_button] [/ width_cumnol] [] [vc_cull] »1/2 ″] [vcex_button url =" https://www.elegantthemes.com/affiliates/idevaffiliate.php؟id=23065&url=40632&tid1=tutorials "target =" blank "layout =" expand "align =" center " font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] DOWNLOAD TEMPLATES DIVI [/ vcex_button] [/ vc_column] [/ vc_row]
دروس ديفي أخرى
- المواقع 5 للاستخدام مطعم ديفي موضوع
- كيفية إضافة نص على منتج Divi WooCommerce
- كيفية تغيير لون القائمة بين صفحات Divi
- كيفية تخصيص شبكات بلوق مع ديفي
- كيفية استخدام دور ديفي محرر على وورد
- كيفية إنشاء كامل الشاشة المنزلق ديفي
- كيفية تغيير لون القوائم بين صفحات Divi
- الميزات التي ربما لا تعرفها عن Divi
- كيفية استخدام Divi Builder على وورد
- كيفية استخدام وحدة Divi Video scrolling
- كيفية استخدام وحدة Divi Builder Flip
- كيفية إضافة وحدة شهادة على Divi Builder
- كيفية استخدام وحدة Divi النصية
- كيفية إنشاء شريط التمرير على ديفي
- كيفية تحرير دور مستخدم Divi
- كيفية استخدام وحدة Divi Social Media
- كيفية استخدام وحدة متجر على موضوع ووردبرس]
- كيفية استخدام وحدة Divi الشريط الجانبي
- كيفية استخدام Divi Price Table Module
- كيفية استخدام وحدة العنوان لمنشورات Divi
- كيفية إضافة وحدة فيديو ديفي
- كيفية استخدام وحدة الملاحة المادة
- كيفية استخدام وحدة البحث Divi
- كيفية استخدام وحدة محفظة Divi
- كيفية استخدام وحدة الشخص على Divi Builder
- كيفية استخدام وحدة المحفظة مع فلتر Divi
- كيفية استخدام وحدة المنزلق بعرض كامل
- كيفية استخدام Divi Builder Image Module
- كيفية استخدام وحدة التنقل كاملة العرض في Divi Builder
- كيفية استخدام وحدة معرض الصور
- كيفية استخدام وحدة بطاقة Divi Builder Full-Width
- كيفية استخدام وحدة Divi Full Width Portfolio
- كيفية استخدام وحدة الرأس Divi ذات العرض الكامل
- كيفية استخدام Divi Counter Module
- كيفية استخدام شريط التمرير المقالات على Divi Builder
- كيفية استخدام وحدة Divi Email Optin
نص مختلف لكل منتج؟ تقول لإضافته إلى منتجات جديدة؟ كيف وأين؟
المادة السوبر ، شكرا لك على هذه النصيحة. وإذا أردنا نصًا مختلفًا حسب المنتج ، كيف؟
مرحبا برايس ،
في هذه الحالة ، يمكنك إضافة نص مختلف على منتج WooCommerce الجديد.
سوبر! شكرا لهذه النصيحة.
على الرحب و السعة.