วิธีเพิ่มการจัดรูปแบบ CSS Focus State ให้กับองค์ประกอบเมื่อกรอกแบบฟอร์ม Divi

หนึ่งในเป้าหมายหลักของเว็บไซต์ส่วนใหญ่คือการส่งแบบฟอร์ม นี่คือวิธีที่บริษัทต่างๆ ได้รับโอกาสในการขาย สมาชิกอีเมล และอื่นๆ การออกแบบเว็บที่มีประสิทธิภาพสามารถทำให้การส่งแบบฟอร์มมีส่วนร่วมมากขึ้นสำหรับผู้เยี่ยมชม และวิธีหนึ่งที่จะเพิ่มการมีส่วนร่วมคือการเพิ่มรูปแบบเพิ่มเติมให้กับแบบฟอร์มในระหว่างกระบวนการ "กรอก" ในการทำเช่นนี้ เราสามารถควบคุมพลังของสถานะโฟกัสใน CSS ได้ อันที่จริง Divi มีตัวเลือกรูปแบบการโฟกัสสำหรับฟิลด์แบบฟอร์มที่มีอยู่ภายในโมดูลแบบฟอร์มของ Divi (ผู้ติดต่อ, อีเมล Optin ฯลฯ) ดังนั้นคุณจึงไม่ต้องพึ่งพา CSS ภายนอกเพื่อจัดรูปแบบฟิลด์แบบฟอร์มเหล่านั้นในสถานะโฟกัส

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

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

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ เกี่ยวกับการออกแบบที่เราจะสร้างในบทช่วยสอนนี้

ดาวน์โหลดเค้าโครงฟรี

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

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

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

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

ดาวน์โหลด

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

ในการนำเข้าเค้าโครงส่วนไปยังไลบรารี Divi ของคุณ ให้ไปที่ Divi Library

คลิกปุ่มนำเข้า

ในป๊อปอัปการพกพา ให้เลือกแท็บนำเข้าและเลือกไฟล์ดาวน์โหลดจากคอมพิวเตอร์ของคุณ

จากนั้นคลิกปุ่มนำเข้า

เมื่อเสร็จแล้ว เค้าโครงส่วนจะพร้อมใช้งานใน Divi Builder

ไปกวดวิชากันเถอะ

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

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

1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi
2. สร้างหน้าใหม่ใน WordPress และใช้ Divi Builder เพื่อแก้ไขหน้าในส่วนหน้า (ตัวสร้างภาพ)
3. เลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น"

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

การใช้ :focus-within CSS Pseudo-Class

เนื่องจาก Divi มีตัวเลือกในการกำหนดสไตล์ฟิลด์ของฟอร์มในสถานะโฟกัสอยู่แล้ว บทช่วยสอนนี้จึงเกี่ยวกับการขยายสไตล์การโฟกัสนั้นไปยังองค์ประกอบอื่นๆ ด้วย เพื่อให้ได้รูปแบบสถานะการโฟกัสเพิ่มเติม เราจะใช้ Divi Builder และตัวอย่าง CSS ที่กำหนดเองบางส่วนที่ใช้ :focus pseudo-class

ไม่ต้องกังวล มันไม่ซับซ้อนอย่างที่คิด

ความแตกต่างระหว่าง :โฟกัส และ :โฟกัส-ภายใน

:จุดสนใจ

คล้ายกับ :hover :focus pseudo-class ใน CSS ถูกใช้เพื่อใช้การจัดสไตล์กับองค์ประกอบเมื่อใดก็ตามที่อยู่ในสถานะโฟกัส สถานะโฟกัสมักจะถูกทริกเกอร์โดยคลิกที่องค์ประกอบ เช่น ช่องใส่ข้อมูลในแบบฟอร์ม ตัวอย่างเช่น เมื่อผู้ใช้คลิกภายในฟิลด์แบบฟอร์ม จะเปิดใช้งานสถานะโฟกัสสำหรับฟิลด์นั้น สิ่งนี้ช่วยให้คุณใช้ :focus psuedo-class เพื่อกำหนดเป้าหมายรูปแบบของฟิลด์นั้นใน CSS

:focus-ภายใน

เป้าหมาย :focus pseudo-class (หรือแทน) การจัดสไตล์ขององค์ประกอบที่อยู่ในสถานะโฟกัส อย่างไรก็ตาม :focus-within pseudo-class ได้ก้าวไปอีกขั้น :focus-within pseudo-class กำหนดเป้าหมายการจัดสไตล์ขององค์ประกอบที่อยู่ในโฟกัส และ องค์ประกอบใดๆ ที่มีองค์ประกอบอยู่ในโฟกัส ซึ่งหมายความว่าคุณสามารถกำหนดเป้าหมายองค์ประกอบหลักขององค์ประกอบที่อยู่ในโฟกัส และใช้สไตล์เหล่านั้นในขณะที่องค์ประกอบนั้นอยู่ในโฟกัส กล่าวอีกนัยหนึ่ง ฉันสามารถคลิกภายในเขตข้อมูลแบบฟอร์มและเปลี่ยนสีพื้นหลังของเขตข้อมูลแบบฟอร์ม (โดยใช้ :focus ) และเปลี่ยนสีพื้นหลังส่วนหลักของเขตข้อมูลแบบฟอร์มได้ (โดยใช้ :focus-within )

การเพิ่มการจัดรูปแบบสถานะโฟกัสให้กับองค์ประกอบเมื่อกรอกแบบฟอร์ม Divi

ตอนนี้เราพอจะเข้าใจแล้วว่า :focus และ :focus ทำงานอย่างไร มาทดสอบกันโดยเพิ่มการจัดรูปแบบการโฟกัสเข้าด้วยกันในบทช่วยสอนนี้

เพิ่มเค้าโครงที่สร้างไว้ล่วงหน้า

ในการเริ่มต้น ให้เพิ่มเลย์เอาต์ที่สร้างไว้ล่วงหน้าของหน้าติดต่อบล็อกการเดินทางเพื่อเริ่มต้นการออกแบบสำหรับบทช่วยสอนนี้ และรับแบบฟอร์มการติดต่อที่พร้อมใช้งานเป็นตัวอย่างของเรา ในการดำเนินการนี้ ให้คลิกไอคอนโหลดจากไลบรารีจากเมนูการตั้งค่าตัวสร้าง ใต้แท็บเลย์เอาต์ที่สร้างไว้ล่วงหน้า ให้คลิกที่ Travel Blog Layout Pack แล้วเลือกเลย์เอาต์ของหน้าติดต่อ จากนั้นคลิกปุ่ม 'ใช้เค้าโครงนี้'

อัปเดตการตั้งค่าแบบฟอร์มการติดต่อ

ในรูปแบบหน้าติดต่อ เปิดการตั้งค่าสำหรับโมดูลแบบฟอร์มการติดต่อและอัปเดตชื่อด้วยข้อความ "ติดต่อ"

สไตล์โฟกัสฟิลด์

ภายใต้แท็บออกแบบ อัปเดตสไตล์โฟกัสฟิลด์ดังนี้:

• ฟิลด์โฟกัสสีพื้นหลัง: rgba(255,107,90,0.15)
• ฟิลด์โฟกัสสีข้อความ: #000000

สิ่งนี้จะกำหนดรูปแบบสถานะโฟกัสของฟิลด์จริง (ตัวเลือกที่สะดวกสำหรับการตั้งค่า Divi Builder)

แบบฟอร์มติดต่อ CSS Class

ถัดไป เพิ่ม CSS ที่กำหนดเองลงในแบบฟอร์มการติดต่อภายใต้แท็บขั้นสูงดังนี้:

• CSS Class: Divi-form-focus

นี่จะเป็นคลาสที่เราใช้เพื่อกำหนดเป้าหมายรูปแบบฟอร์มเมื่อเน้นฟิลด์ของฟอร์ม

อัปเดตการตั้งค่าคอลัมน์

ถัดไป เปิดการตั้งค่าสำหรับคอลัมน์หลักของแบบฟอร์มการติดต่อ

การขยายความ

• เบาะ: 5% บน, 5% ล่าง, 3% ซ้าย, 3% ขวา

คลาส CSS ของคอลัมน์

ภายใต้แท็บขั้นสูง ให้คอลัมน์ CSS Class ต่อไปนี้:

• CSS Class: Divi-column-focus

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

เพิ่มส่วน CSS Class

ในการใช้ CSS เพื่อกำหนดเป้าหมายสไตล์ของส่วนเมื่อมีการโฟกัสฟิลด์ของแบบฟอร์ม (รวมถึงองค์ประกอบย่อยของส่วน) ให้เปิดการตั้งค่าสำหรับส่วนที่มีแบบฟอร์มการติดต่อและเพิ่มคลาส CSS ต่อไปนี้:

• CSS Class: หาร-section-focus

การเพิ่ม CSS แบบกำหนดเองด้วย Code Module

ตามที่กล่าวไว้ก่อนหน้านี้ เราจะใช้ :focus CSS pseudo-class เพื่อจัดรูปแบบองค์ประกอบ Divi อื่นๆ เมื่อโฟกัสฟิลด์ของฟอร์ม องค์ประกอบที่เราจะจัดรูปแบบ (แบบฟอร์ม คอลัมน์ และส่วน) ได้รับคลาสที่กำหนดเองแล้ว ซึ่งเราสามารถใช้เพื่อกำหนดเป้าหมายใน CSS ของเรา (“dvi-form-focus”, “dvi-column-focus” , “ส่วน-ส่วนโฟกัส”).

ตอนนี้ สิ่งที่เราต้องทำคือเพิ่มโค้ด CSS ของเรา ในการดำเนินการดังกล่าว ให้เพิ่มโมดูลโค้ดภายใต้โมดูลแบบฟอร์มการติดต่อ

จากนั้นวางโค้ดต่อไปนี้ในพื้นที่เนื้อหาโค้ด:

อย่าลืมห่อโค้ดด้วยแท็ก รูปแบบที่ จำเป็น

  /*add smooth transitions for focus state styles*/
  .divi-form-focus, .divi-column-focus, .divi-section-focus, .divi-form-focus h2 {
    transition: all 300ms
  }
  
  /*style form module h2 heading in form focus state*/
  .divi-form-focus:focus-within h2 {
    font-size: 14px !important;
    color: #888888;
  }
  
  /*style parent column in form focus state*/
  .divi-column-focus:focus-within {
		background: #ffffff;
    transform: scale(1.2);
    box-shadow: 0 0 30px rgba(0,0,0,0.2);
  }
  
  /*style parent section in form focus state*/
  .divi-section-focus:focus-within {
    background: rgba(255,107,90,0.15);
  }
 

สังเกตว่าข้อมูลโค้ด CSS แต่ละรายการที่มีคลาส CSS ขององค์ประกอบ (เช่น “dvi-column-form”) มี :focus-within pseudo-class เพื่อแสดงสไตล์ของคลาสองค์ประกอบนั้นเมื่อโฟกัสฟิลด์ของฟอร์ม ตัวอย่างข้อมูลหนึ่งจัดรูปแบบ h2 (หรือชื่อ) ของแบบฟอร์มในสถานะโฟกัสของแบบฟอร์ม ตัวอย่างข้อมูลหนึ่งจัดรูปแบบคอลัมน์หลักในสถานะโฟกัสของฟอร์ม และตัวอย่างข้อมูลหนึ่งจะกำหนดรูปแบบส่วนหลักในสถานะโฟกัสของแบบฟอร์ม

ผลสุดท้าย

นี่คือผลลัพธ์สุดท้าย สังเกตว่าองค์ประกอบต่างๆ เปลี่ยนรูปแบบอย่างไรเมื่อกรอกแบบฟอร์ม

ความคิดสุดท้าย

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

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!