في البرنامج التعليمي السابق ، ونحن قدمتم ديفيبالنسبة لأولئك الذين لا يعرفون، Divi هو موضوع WordPress متميز تم تصميمه بواسطة الفريق أنيقة ثيمات الذي يقدم خدمات متنوعة على ووردبريس وتصميم الإضافات والموضوعات.

Divi قالب متجاوب ومتوافق مع العديد من الإضافات الأخرى، بما في ذلك WooCommerce. سنشرح لك اليوم كيفية إضفاء رسوم متحركة مختلفة على منتجات WooCommerce.

أحيانًا قد يكون تصميم WooCommerce غير دقيق، خاصةً إذا كان تصميم CSS مختلفًا بعض الشيء. هذا البرنامج التعليمي، الذي سيكون تقنيًا بعض الشيء (قليلا المغلق ولا شيء غير ذلك) ، سيسمح لك بمعالجة هذا.

دروس أخرى في موضوع Divi

دعونا نبدأ.

تعديل أيقونة للنص على الماوس

بشكل افتراضي ، عندما تستخدم WooCommerce مع Divi وتحوم فوق أحد المنتجات ، ترى رمز "+" صغير يمثل خطًا (جعل أيقونة) مقترح من Divi وهو كما يلي:

من السهل حقًا تغيير ذلك إلى رمز مختلف في الإعدادات ، ولكن إذا كنت تريد إضافة بعض النصوص ، فهل هذا شيء آخر؟ سأوضح لك كيفية تحقيق ذلك باستخدام مقتطفات CSS اليوم ، وسأقوم أيضًا بتضمين رمز اختياري لإضافته إلى موقعك.

إليك ما سنكمله مرة واحدة:

لماذا استخدام النص بدلاً من الرمز على أي حال؟

يمكنني التفكير في بعض الأسباب التي يمكن أن تجعلك تفعل هذا:

لتحديد إعطاء نظرة فريدة لمتجرك: أي شيء يمكنك القيام به لتمييز موقع Divi / WooCommerce الخاص بك عن موقع آخر هو دائمًا شيء جيد.

قد يؤدي استخدام كلمة مثل "عرض" أو "شراء" إلى مزيد من التحويل: يحتاج الجميع إلى القيام بما هو أفضل لموقعهم على الويب ، ويمكنك الاستفادة من اختبار A / B المدمج على Divi للمساعدة في ذلك.

مصدر الهام

لقد قمت مؤخرًا بتصفح موقع يحتوي على نص منتج معلق. لقد رأيت بالطبع مواقع أخرى للتجارة الإلكترونية تحتوي على كلمات بدلاً من الأيقونات على المنتج الذي يظهر فوقها، لذا لم يكن هذا مفهومًا جديدًا. لم يسبق لي أن اضطررت إلى القيام بذلك على موضوع 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 تعليقات

أبحر بيخت في 8 أغسطس 2019 الساعة 22:58 صباحًا

نص مختلف لكل منتج؟ تقول لإضافته إلى منتجات جديدة؟ كيف وأين؟
رد
brice bayle في 30 مايو 2018 الساعة 5:18 صباحًا

المادة السوبر ، شكرا لك على هذه النصيحة. وإذا أردنا نصًا مختلفًا حسب المنتج ، كيف؟
رد
- تييري برتراند في 31 مايو 2018 الساعة 6:12 صباحًا
  
  مرحبا برايس ،
  
  في هذه الحالة ، يمكنك إضافة نص مختلف على منتج WooCommerce الجديد.
  رد
لورا في 26 أبريل 2018 الساعة 16:48 مساءً

سوبر! شكرا لهذه النصيحة.
رد
- تييري برتراند في 26 أبريل 2018 الساعة 17:21 مساءً
  
  على الرحب و السعة.
  رد