โปรดทราบ:: บทความนี้จัดทำขึ้นเพื่อความสะดวกของคุณ ได้รับการแปลโดยอัตโนมัติโดยใช้ซอฟต์แวร์การแปลและอาจไม่ได้รับการพิสูจน์อักษร บทความฉบับภาษาอังกฤษนี้ควรถือเป็นฉบับทางการที่คุณสามารถค้นหาข้อมูลล่าสุดได้มากที่สุด คุณสามารถเข้าถึงได้ที่นี่
จัดกลางแบบฟอร์มบนเทมเพลต HubSpot
อัปเดตล่าสุด: กุมภาพันธ์ 13, 2025
สามารถใช้ได้กับการสมัครใช้บริการใดๆ ต่อไปนี้ ยกเว้นที่ระบุไว้:
|
|
Marketing Hub Basic เดิม |
คุณสามารถจัดกึ่งกลางแบบฟอร์มบนเทมเพลต HubSpot โดยใช้โมดูลตัวเว้นวรรคในแนวนอนหรือ CSS ที่กำหนดเอง
การใช้โมดูลตัวเว้นระยะแนวนอน
- ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > ตัวจัดการการออกแบบ
- คลิกชื่อเทมเพลตในตัวค้นหาเพื่อแก้ไข
- ในตัวตรวจสอบทางด้านขวาให้คลิก + เพิ่มเพื่อแทรกโมดูลตัวเว้นวรรคแนวนอนใหม่สองโมดูลโมดูลหนึ่งไปทางซ้ายและอีกโมดูลหนึ่งไปทางขวาของโมดูลแบบฟอร์มของคุณ
การใช้ CSS แบบกำหนดเอง
- ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > ตัวจัดการการออกแบบ
- ในตัวค้นหาให้ค้นหาไฟล์ CSS ของคุณภายในโฟลเดอร์จากนั้นคลิกเพื่อเลือกในเครื่องมือแก้ไข
- เพิ่มรหัสต่อไปนี้เพื่อจัดกึ่งกลางแบบฟอร์มทั้งหมดของคุณในเว็บไซต์ของคุณ:
/* To center the form within its module and applying a max-width */ form.hs-form, .hs_cos_wrapper .form-title { max-width:600px;display: block;margin:0 auto;}/* To center the form title within a form module */.hs_cos_wrapper .form-title {text-align:center;}/* To center the form submit button */.hs_submit {text-align:center;}
- หากคุณต้องการจัดกึ่งกลางแบบฟอร์มเฉพาะคุณสามารถเพิ่มคลาสที่กำหนดเองลงในโมดูลแบบฟอร์มของคุณบนเทมเพลตของคุณแล้วปรับ CSS ของคุณให้ใช้กับโมดูลที่มีคลาสนั้นเท่านั้น ตัวอย่างเช่นหากคุณเพิ่มแบบฟอร์มศูนย์ชั้นเรียนที่กำหนดเองลงในโมดูลแบบฟอร์มของคุณบนเทมเพลตของคุณ CSS ของคุณจะมีลักษณะดังนี้:
/* To center the form within its module and applying a max-width */ form.hs-form, .center-form .hs_cos_wrapper .form-title { max-width:600px;display: block;margin:0 auto;}/* To center the form title within a form module */.center-form.hs_cos_wrapper .form-title {text-align:center;}/* To center the form submit button */.center-form.hs_submit {text-align:center;}
- ที่มุมขวาบนให้คลิกเผยแพร่การเปลี่ยนแปลง
Design Manager
ขอบคุณสำหรับคำติชมของคุณ ซึ่งมีความหมายมากสำหรับเรา
แบบฟอร์มนี้ใช้สำหรับคำติชมเอกสารเท่านั้น เรียนรู้วิธีขอความช่วยเหลือจาก HubSpot