วิธีใช้หน่วยความยาว vw และ vh เพื่อออกแบบแบบฟอร์มการติดต่อที่ตอบสนองใน Divi

เผยแพร่แล้ว: 2019-06-12

แบบฟอร์มบนเว็บมีความสำคัญอย่างยิ่งต่อความสำเร็จของเว็บไซต์ของคุณ สิ่งนี้สมเหตุสมผลเมื่อพิจารณาว่าธุรกิจออนไลน์ส่วนใหญ่ต้องพึ่งพารูปแบบต่างๆ เช่น การเลือกอีเมลและแบบฟอร์มการติดต่อเพื่อสร้างรายได้ด้วยการสร้างรายชื่ออีเมลและสื่อสารกับผู้ซื้อที่มีศักยภาพ และทุกวันนี้ เราต้องตรวจสอบให้แน่ใจว่าเรากำลังออกแบบฟอร์มที่ตอบสนองได้ซึ่งจะดูดีบนเบราว์เซอร์และอุปกรณ์เคลื่อนที่ทั้งหมด

ในบทช่วยสอนนี้ ฉันจะแสดงวิธีออกแบบแบบฟอร์มการติดต่อที่ตอบสนองโดยใช้หน่วยความยาว vw และ vh ใน Divi เราจะอธิบายวิธีการปรับขนาดและช่องว่างของช่องป้อนข้อมูลและปุ่มต่างๆ ที่จะปรับตามความกว้างและความสูงของเบราว์เซอร์ของคุณ วิธีนี้จะช่วยให้คุณมองเห็นฟอร์มได้สูงสุดบนอุปกรณ์ทั้งหมด แม้ในมุมมองแนวนอนบนโทรศัพท์มือถือ

ในการทำเช่นนี้ เราจะใช้การตั้งค่าในตัวของ Divi ซึ่งช่วยให้คุณปรับแต่งข้อความในฟอร์ม ฟิลด์ และปุ่มต่างๆ ได้อย่างง่ายดาย

มาเริ่มกันเลย.

แอบมอง

เดสก์ทอป

ยาเม็ด

โทรศัพท์ (แนวตั้ง)

โทรศัพท์ (แนวนอน)

ดาวน์โหลดเค้าโครงแบบฟอร์มการติดต่อที่ตอบสนองได้ฟรี (รวมถึงแบบฟอร์ม Optin อีเมลที่ตอบสนองด้วย!)

หากต้องการใช้การออกแบบจากบทช่วยสอนนี้ คุณจะต้องดาวน์โหลดโดยใช้ปุ่มด้านล่างก่อน ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

เข้าร่วมจดหมายข่าว Divi แล้วเราจะส่งอีเมลสำเนาชุดเค้าโครงหน้า Landing Page ของ Divi ที่ดีที่สุดให้คุณ พร้อมแหล่งข้อมูล เคล็ดลับ และลูกเล่นที่น่าตื่นตาตื่นใจและฟรีอีกมากมายของ Divi ทำตามแล้วคุณจะเป็นผู้เชี่ยวชาญ Divi ในเวลาไม่นาน หากคุณสมัครรับข้อมูลแล้ว เพียงพิมพ์ที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลดเพื่อเข้าถึงชุดเค้าโครง

คุณสมัครสำเร็จแล้ว โปรดตรวจสอบที่อยู่อีเมลของคุณเพื่อยืนยันการสมัครของคุณและเข้าถึงชุดเค้าโครง Divi รายสัปดาห์ฟรี!

ในการนำเข้าเลย์เอาต์ไปยังเพจของคุณ เพียงแตกไฟล์ zip แล้วลากไฟล์ json ไปที่ Divi Builder

ไปที่บทช่วยสอนกันไหม

สิ่งที่คุณต้องการเพื่อเริ่มต้น

ในการเริ่มต้น คุณจะต้องมีการตั้งค่าต่อไปนี้:

ธีม Divi ติดตั้งและใช้งานอยู่
หน้าใหม่ที่สร้างขึ้นเพื่อสร้างตั้งแต่เริ่มต้นที่ส่วนหน้า (ตัวสร้างภาพ)
เครื่องดื่มที่คุณโปรดปราน (ไม่จำเป็น เว้นแต่คุณยังไม่ได้ดื่มกาแฟ)

หลังจากนั้น คุณจะมีผืนผ้าใบเปล่าเพื่อเริ่มสร้างแบบฟอร์มตอบสนองใน Divi

เหตุใดจึงต้องใช้หน่วยความยาว vw และ vh สำหรับการออกแบบที่ตอบสนอง

หน่วยความยาวคือค่าที่จำเป็นสำหรับองค์ประกอบขนาดและพื้นที่บนหน้าเว็บของคุณ น่าจะเป็นหน่วยความยาวที่ใช้บ่อยที่สุดในการออกแบบเว็บคือพิกเซลและเปอร์เซ็นต์ ตัวอย่างเช่น พิกเซลเป็นหน่วยความยาวทั่วไปที่ใช้ในการปรับขนาดข้อความ หน่วยความยาว em มักใช้สำหรับความสูงของบรรทัด และหน่วยความยาวแบบเปอร์เซ็นต์มักใช้สำหรับระยะห่างและองค์ประกอบการปรับขนาดสำหรับการออกแบบที่ตอบสนอง อันที่จริง ค่าหน่วยความยาวเริ่มต้นสำหรับองค์ประกอบ Divi (โมดูล แถว ส่วน) สร้างขึ้นโดยใช้หน่วยความยาวทั่วไปเหล่านี้

หน่วยความยาวจะเป็นแบบสัมบูรณ์ (คงขนาดเดิมโดยไม่คำนึงถึงขนาดขององค์ประกอบอื่นๆ) หรือแบบสัมพันธ์ (เปลี่ยน/มาตราส่วนขึ้นอยู่กับขนาดขององค์ประกอบอื่นๆ) ตัวอย่างเช่น พิกเซลเป็นหน่วยความยาวสัมบูรณ์ ดังนั้น หากเนื้อความของข้อความมีขนาดแบบอักษร 16px ข้อความจะยังคงเป็น 16px ไม่ว่าขนาดของคอนเทนเนอร์จะเป็นอย่างไร แต่เปอร์เซ็นต์และ em เป็นหน่วยความยาวสัมพัทธ์ ดังนั้นความสูงของเส้นที่มีค่า em จะปรับตามขนาดข้อความขององค์ประกอบที่เปลี่ยนไป และเนื่องจากเปอร์เซ็นต์เป็นหน่วยความยาวสัมพัทธ์ด้วย แถวที่มีความกว้าง 80% จะเท่ากับ 80% ของคอนเทนเนอร์ (หรือส่วน)

หน่วยความยาว vw และ vh ยังเป็นหน่วยความยาวสัมพัทธ์ แต่แทนที่จะสัมพันธ์กับคอนเทนเนอร์หลักขององค์ประกอบ จะสัมพันธ์กับวิวพอร์ตของเบราว์เซอร์จริง ความกว้างของวิวพอร์ต (vw) สัมพันธ์กับความกว้างของเบราว์เซอร์ และความสูงของวิวพอร์ต (vh) สัมพันธ์กับความสูงของเบราว์เซอร์ การใช้หน่วยความยาวเหล่านี้เป็นวิธีหนึ่งที่จะทำให้การออกแบบของคุณสอดคล้องกันในทุกเบราว์เซอร์ เนื่องจากจะปรับขนาดตามวิวพอร์ต ทำให้ขนาดของแต่ละองค์ประกอบสามารถคาดเดาได้มากขึ้นและจัดการได้ง่ายโดยไม่ต้องกังวลกับการให้แต่ละองค์ประกอบมีขนาดแตกต่างกันในแต่ละอุปกรณ์หรือเบรกพอยต์ที่ตอบสนอง หน่วยความยาว vh มีประโยชน์เป็นพิเศษสำหรับหน้าจอโทรศัพท์มือถือ เนื่องจากจะพิจารณาความสูงของวิวพอร์ตของโทรศัพท์ในมุมมองแนวตั้งและแนวนอน

เทคนิคนี้ใช้ได้ผลดีที่สุดสำหรับการออกแบบที่ขึ้นอยู่กับการแสดงผลแบบเต็มความกว้างขนาดใหญ่บนเดสก์ท็อป ซึ่งจะปรับขนาดได้อย่างราบรื่นเมื่อผู้ใช้ปรับความกว้างของเบราว์เซอร์

สำหรับคำอธิบายโดยละเอียดเพิ่มเติมเกี่ยวกับหน่วยความยาว โปรดดูคู่มือนี้เกี่ยวกับการใช้หน่วยความยาวใน Divi

ส่วนที่ 1: การออกแบบแบบฟอร์มการติดต่อแบบโต้ตอบใน Divi

การสร้างส่วนและแถว

สร้างส่วนปกติด้วยแถวหนึ่งคอลัมน์ ก่อนเพิ่มโมดูลใดๆ ให้อัปเดตการตั้งค่าส่วนดังนี้:

พื้นหลังไล่ระดับสีซ้าย: #fd7b5b
ไล่ระดับพื้นหลังไปทางขวา สี: #a92200

จากนั้นเปิดการตั้งค่าแถวและให้การไล่ระดับสีพื้นหลัง

ไล่สีพื้นหลังด้านซ้าย: #ffdb8b
ไล่ระดับพื้นหลังไปทางขวา สี: #fdb15b

ต่อไป ให้ปรับขนาดแถวโดยใช้หน่วยความยาว vw เพื่อให้ปรับขนาดด้วยเบราว์เซอร์

ความกว้าง: 66vw (เดสก์ท็อป), 66vw (แท็บเล็ต), 100% (โทรศัพท์)
ความกว้างสูงสุด: 66vw (เดสก์ท็อป), 66vw (แท็บเล็ต), 100% (โทรศัพท์)
ความสูงขั้นต่ำ: 100vh (โทรศัพท์)

ช่องว่างภายใน: 0px บน, 0px ด้านล่าง

ค่า 66vw จะทำให้แน่ใจว่าแถวจะยังคงเหลือประมาณสองในสามของความกว้างของวิวพอร์ตของเบราว์เซอร์ ค่า 100vh บนจอแสดงผลของโทรศัพท์จะตรวจสอบให้แน่ใจว่าความสูงของแถวเท่ากับความสูงของวิวพอร์ตของโทรศัพท์ (ไม่บังคับ แต่เป็นการสัมผัสที่ดีสำหรับการแสดงพื้นที่เนื้อหาแถวบนโทรศัพท์อย่างเหมาะสมที่สุด)

โปรดสังเกตว่าความกว้างของแถวถูกตั้งค่าเป็น 100% (ไม่ใช่ 100vw) เนื่องจาก 100vw จะไม่พิจารณาความกว้างของแถบเลื่อนเมื่อคุณเลื่อนลงมาที่หน้า ดังนั้นจึงเป็นการดีกว่าเสมอที่จะใช้เปอร์เซ็นต์สำหรับการแสดงผลแบบเต็มความกว้าง

การสร้างแบบฟอร์มการติดต่อ

เมื่อวางแถวเข้าที่แล้ว เราก็สามารถเพิ่มโมดูลแบบฟอร์มการติดต่อลงในแถวได้แล้ว

เมื่อเพิ่มแบบฟอร์มการติดต่อแล้ว ให้อัปเดตเนื้อหาตามชื่อและปิดใช้งาน captcha

ชื่อเรื่อง: ติดต่อเรา
แสดงแคปต์ชา: NO

ทำให้ฟิลด์เต็มความกว้าง

สำหรับการออกแบบนี้ ฉันจะใช้ฟิลด์แบบเต็มความกว้าง สิ่งนี้จะช่วยให้ฉันเพิ่มระยะห่างที่สอดคล้องกันระหว่างฟิลด์ (เนื่องจากไม่มีการใช้ทุ่น) และจะช่วยให้ฉันสามารถกำหนดความกว้างที่กำหนดเองให้กับแต่ละฟิลด์สำหรับการออกแบบที่ไม่ซ้ำกันในภายหลัง สำหรับตอนนี้ ให้เปิดการตั้งค่าสำหรับทั้งฟิลด์ชื่อและอีเมล และตั้งค่าตัวเลือก "ทำให้เต็มความกว้าง" เป็น "ใช่"

การเพิ่มประสิทธิภาพฟิลด์สำหรับการออกแบบที่ตอบสนอง

กลับไปที่การตั้งค่าแบบฟอร์มการติดต่อ ตอนนี้เราสามารถปรับแต่งฟิลด์แบบฟอร์มโดยใช้หน่วยความยาว vw และ vh อัปเดตสิ่งต่อไปนี้:

สีข้อความของฟิลด์: #333333
Fields Margin (เดสก์ท็อปและแท็บเล็ต): 2vw บนสุด 2vw ล่าง
Fields Margin (โทรศัพท์): 2vh บน, 2vh bottom

Fields Padding (เดสก์ท็อปและแท็บเล็ต): 1vw บน, 1vw ล่าง, 2vw ซ้าย, 2vw ขวา
Fields Padding (โทรศัพท์): 2vh บน, 2vh ล่าง, 2vh ซ้าย, 2vh ขวา

ขนาดข้อความของฟิลด์: 2.5vw (เดสก์ท็อป), 4vh (โทรศัพท์)

หมายเหตุ: การใช้ 4vh สำหรับโทรศัพท์จะทำให้ขนาดข้อความของคุณมีขนาดเท่ากับความสูงของหน้าจอโทรศัพท์มือถือ ซึ่งจะเป็นประโยชน์สำหรับการดูแบบฟอร์มในหน้าจอโทรศัพท์แนวนอน (หันโทรศัพท์ไปด้านข้าง) แต่ถ้าคุณต้องการขนาดข้อความที่สอดคล้องกันมากขึ้น คุณอาจต้องการใช้หน่วยความยาวพิกเซลสำหรับขนาดข้อความของฟิลด์บนจอแสดงผลของโทรศัพท์

การออกแบบข้อความชื่อเรื่อง

สำหรับข้อความชื่อเรื่อง ให้ปรับแต่งสิ่งต่อไปนี้:

ระดับหัวเรื่อง: H2
แบบอักษรของชื่อเรื่อง: Karla
น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
สีข้อความของชื่อเรื่อง: #f56845
ขนาดตัวอักษรของชื่อเรื่อง: 7vw (เดสก์ท็อป), 8vh (โทรศัพท์)
ระยะห่างของตัวอักษรชื่อเรื่อง: 1vw
ความสูงของบรรทัดชื่อเรื่อง: 0.6em

เพิ่มประสิทธิภาพปุ่มเพื่อการออกแบบที่ตอบสนองตามอุปกรณ์

สำหรับปุ่มแบบฟอร์มการติดต่อ เราจะเพิ่มการเว้นวรรคและขนาดข้อความที่คล้ายกับช่องที่เราออกแบบไว้ก่อนหน้านี้

คลิกเพื่อใช้สไตล์ปุ่มแบบกำหนดเองและอัปเดตสิ่งต่อไปนี้:

ขนาดข้อความของปุ่ม: 2.5vw (เดสก์ท็อป), 4vh (โทรศัพท์)
สีข้อความของปุ่ม: #ffffff
สีพื้นหลังของปุ่ม: #333333
ความกว้างของขอบปุ่ม: 0px
รัศมีเส้นขอบของปุ่ม: 0px
แบบอักษรของปุ่ม: มอนต์เซอร์รัต
ระยะขอบของปุ่ม (เดสก์ท็อป): 1vw บน, 0px ซ้าย, 0px ขวา
ขอบปุ่ม (โทรศัพท์): 1vh ด้านบน
ปุ่ม Padding (เดสก์ท็อป): 3vw บน, 3vw ด้านล่าง
ปุ่ม Padding (โทรศัพท์): 3vh บน, 3vh ด้านล่าง

ปุ่มกล่องเงา: ดูภาพหน้าจอ
กล่องเงาตำแหน่งแนวนอน: 2em
ตำแหน่งแนวตั้งของกล่องเงา: 0.4em
เงาสี: rgba(245,104,69,0.29)

เพิ่มระยะห่างในแบบฟอร์มการติดต่อ

ถัดไป เพิ่มการเติมแบบฟอร์มการติดต่อโดยใช้หน่วยความยาว vw และเงากล่องลงในฟิลด์แบบฟอร์มดังนี้:

Padding (เดสก์ท็อป): 3vw บน, 3vw ล่าง, 5vw ซ้าย, 5vw ขวา
Padding (โทรศัพท์): บน 5vh, 5vh ล่าง, 3vh ซ้าย, 3vh ขวา