ข้ามไปยังเนื้อหา
เอกสารสำหรับนักพัฒนาการสนับสนุน ขอสาธิต เข้าสู่ระบบ
Pushwoosh.com

ปรับแต่งวิดเจ็ตฟอร์มการสมัครสมาชิก

โดยค่าเริ่มต้น วิดเจ็ตฟอร์มการสมัครสมาชิกจะใช้สไตล์ที่เป็นกลางซึ่งใช้งานได้กับหน้าเว็บส่วนใหญ่ หลังจากที่คุณเพิ่ม โค้ดฝัง แล้ว คุณสามารถปรับให้เข้ากับเอกลักษณ์ทางภาพของเว็บไซต์ของคุณได้โดยการตั้งค่าคุณสมบัติที่กำหนดเองของ 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;
}