انتقل إلى المحتوى

تخصيص ويدجت نموذج الاشتراك

بشكل افتراضي، يستخدم ويدجت نموذج الاشتراك نمطًا محايدًا يعمل على معظم الصفحات. بعد إضافة كود التضمين، يمكنك مطابقته مع الهوية البصرية لموقعك عن طريق تعيين خصائص CSS المخصصة على عنصر pushwoosh-subscribe-widget. القيم الموجودة في الجداول أدناه تحل محل القيم الافتراضية.

تخصيص الألوان

Anchor link to
المتغيرالوصفالقيمة الافتراضية
--esw-primary-colorاللون الأساسي للأزرار والروابط واللمسات المميزة#0E72E5
--esw-primary-hoverلون العناصر الأساسية عند التمرير#1A85FF
--esw-text-colorلون النص الرئيسي#4B5057
--esw-text-secondaryالنص الثانوي (العناصر النائبة، التسميات التوضيحية)#969CA3
--esw-backgroundخلفية الويدجت#FFFFFF
--esw-surface-colorلون السطح (عند التمرير، الخلفية الثانوية)#F7F9FA
--esw-border-colorلون الحدود#DCE1E5
--esw-border-color-focusلون الحدود في حالة التركيز#0E72E5
--esw-error-colorلون الخطأ#E52E59
--esw-success-colorلون النجاح#479900
--esw-success-bgخلفية رسالة النجاح#F7F9FA

الطباعة

Anchor link to
المتغيرالوصفالقيمة الافتراضية
--esw-font-familyعائلة الخطRoboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
--esw-font-size-baseحجم الخط الأساسي14px
--esw-font-size-titleحجم خط العنوان18px
--esw-font-size-labelحجم خط تسمية الحقل12px
--esw-font-size-smallالنص الصغير (الأخطاء، الملاحظات)12px
--esw-font-weight-regularالوزن العادي400
--esw-font-weight-mediumالوزن المتوسط500
--esw-font-weight-boldالوزن الغامق700
--esw-line-height-baseارتفاع السطر الأساسي1.4
--esw-line-height-titleارتفاع سطر العنوان1.2

الأحجام والمسافات

Anchor link to
المتغيرالوصفالقيمة الافتراضية
--esw-input-heightارتفاع حقل الإدخال36px
--esw-button-heightارتفاع الزر36px
--esw-spacing-xsمسافة صغيرة جدًا4px
--esw-spacing-smمسافة صغيرة8px
--esw-spacing-mdمسافة متوسطة16px
--esw-spacing-lgمسافة كبيرة24px
--esw-popup-widthعرض النافذة المنبثقة380px
--esw-popup-max-widthأقصى عرض للنافذة المنبثقة90vw

المظهر

Anchor link to
المتغيرالوصفالقيمة الافتراضية
--esw-border-radiusنصف قطر الزاوية للعناصر4px
--esw-border-radius-popupنصف قطر زاوية النافذة المنبثقة8px
--esw-shadow-popupظل صندوق النافذة المنبثقة0 0 6px rgba(0, 0, 0, 0.06), 0 10px 16px rgba(0, 0, 0, 0.1)

أمثلة

Anchor link to
pushwoosh-subscribe-widget {
--esw-primary-color: #ff6b6b;
--esw-border-radius: 12px;
--esw-font-family: "Inter", sans-serif;
}