วิธีสร้างส่วนโฮเวอร์ด้วยการตั้งค่าการปรับขนาดและโอเวอร์โฟลว์ใหม่ของ Divi

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

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

ไปกันเถอะ!

ดูตัวอย่าง

ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน มาดูผลลัพธ์คร่าวๆ ของหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

ดาวน์โหลดเค้าโครงส่วนโฮเวอร์ฟรี

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

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

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

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

ดาวน์โหลด

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

เข้าใกล้

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

1. เพิ่มส่วนแรกในหน้าของคุณ

สมมติว่าคุณกำลังเริ่มต้นการออกแบบใหม่บนหน้าใหม่เอี่ยม สิ่งแรกที่คุณต้องทำคือเพิ่มส่วนปกติใหม่เข้าไป

2. เพิ่มแถวใหม่ที่มีชื่อส่วน

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

3. ปรับแต่งส่วนที่เหลือของเนื้อหาส่วน (เพิ่มแถวและโมดูลได้มากเท่าที่ต้องการ)

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

4. แก้ไขค่าดีฟอลต์และโฮเวอร์สูงสุดของส่วน

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

5. ซ่อนโอเวอร์โฟลว์แนวตั้ง

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

5. ทำซ้ำขั้นตอนสำหรับทุกส่วนในหน้า

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

สมัครสมาชิกช่อง Youtube ของเรา

มาเริ่มสร้างใหม่กันเถอะ!

เพิ่มมาตราใหม่

สีพื้นหลังเริ่มต้น

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

• สีพื้นหลัง: #000000

โฮเวอร์สีพื้นหลัง

เปลี่ยนสีพื้นหลังนี้เมื่อโฮเวอร์

• สีพื้นหลัง: #ffffff

เพิ่มแถว #1

โครงสร้างคอลัมน์

ดำเนินการต่อโดยเพิ่มแถวแรกในส่วนของคุณโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

เพิ่มโมดูลข้อความ

เพิ่มเนื้อหา H2

เพิ่มโมดูลข้อความในแถวใหม่ของคุณถัดไป เพิ่มสำเนา H2 บางส่วนพร้อมกับสัญลักษณ์ '▼' ที่ระบุว่ามีบางสิ่งที่จะเกิดขึ้นต่อไป

การตั้งค่าข้อความ H2

ไปที่แท็บการออกแบบของโมดูลและเปลี่ยนการตั้งค่าข้อความ H2

• หัวข้อ 2 แบบอักษร: Trebuchet
• หัวข้อที่ 2 น้ำหนักแบบอักษร: Ultra Bold
• การจัดตำแหน่งข้อความหัวเรื่อง 2: ซ้าย
• หัวเรื่อง 2 สีข้อความ: #ff0f3b
• ขนาดข้อความของหัวเรื่อง 2: 100px (เดสก์ท็อป), 80px (แท็บเล็ต), 60px (โทรศัพท์)
• หัวเรื่อง 2 ระยะห่างตัวอักษร: -5px

เพิ่มโมดูลตัวแบ่ง

ทัศนวิสัย

โมดูลที่สองและสุดท้ายที่เราต้องการในแถวนี้คือโมดูลตัวแบ่ง ตรวจสอบให้แน่ใจว่าคุณเปิดใช้งานตัวเลือก 'แสดงตัวแบ่ง' ในการตั้งค่าการมองเห็น

• แสดงตัวแบ่ง: ใช่

สี

จากนั้นไปที่แท็บออกแบบและเปลี่ยนสีตัวแบ่ง

• สี: #ff0f3b

ขนาด

แก้ไขการตั้งค่าขนาดของโมดูลด้วย

• น้ำหนักตัวแบ่ง: 2px
• ความกว้าง: 14%

เพิ่มแถว #2

โครงสร้างคอลัมน์

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

เพิ่มโมดูลข้อความลงในคอลัมน์ 1

เพิ่มเนื้อหา

วางโมดูลข้อความในคอลัมน์แรกพร้อมเนื้อหาที่คุณเลือก

การตั้งค่าข้อความ

ไปที่แท็บออกแบบของโมดูลข้อความแล้วเปลี่ยนการวางแนวข้อความ

• การวางแนวข้อความ: Justify

เพิ่มโมดูลข้อความในคอลัมน์ 2

เพิ่มเนื้อหา

เพิ่มโมดูลข้อความในคอลัมน์ที่สองพร้อมกับเนื้อหาบางส่วนที่คุณเลือก

การตั้งค่าข้อความ

อีกครั้ง เปลี่ยนการวางแนวข้อความในการตั้งค่าข้อความของโมดูล

• การวางแนวข้อความ: Justify

เพิ่มการตั้งค่าการปรับขนาดให้กับ Section

ขนาดเริ่มต้น

เมื่อคุณทำส่วนของคุณเสร็จแล้ว ก็ถึงเวลาสร้างเอฟเฟกต์โฮเวอร์ เปิดการตั้งค่าส่วนและเปลี่ยนความสูงสูงสุดในขนาดหน้าจอต่างๆ:

• ความสูงสูงสุด: 300px (เดสก์ท็อป), 280px (แท็บเล็ต), 260px (โทรศัพท์)

เลื่อนขนาด

เปิดใช้งานตัวเลือกโฮเวอร์บนความสูงสูงสุดด้วย และเพิ่มค่าที่สูงพอที่จะครอบคลุมองค์ประกอบทั้งหมดในหน้าจอขนาดต่างๆ ค่านี้ช่วยให้แน่ใจว่าองค์ประกอบทั้งหมดของคุณแสดงขึ้นโดยไม่เกินขนาดเริ่มต้นของคอนเทนเนอร์ส่วน

• ความสูงสูงสุด: 5000px

ล้นแนวตั้ง

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

• ล้นแนวตั้ง: ซ่อน

การเปลี่ยนผ่าน

เพื่อสร้างการเปลี่ยนแปลงที่ราบรื่น เรากำลังเปลี่ยนการตั้งค่าการเปลี่ยนในแท็บขั้นสูงด้วย

• ระยะเวลาการเปลี่ยนภาพ: 800ms
• ความล่าช้าในการเปลี่ยน: 500ms

โคลนทั้งส่วนได้มากเท่าที่ต้องการ

เมื่อคุณสร้างส่วนโฮเวอร์แรกเสร็จแล้ว คุณสามารถโคลนได้มากเท่าที่คุณต้องการ

เปลี่ยนชื่อส่วน

แน่นอน คุณจะต้องการเปลี่ยนชื่อหัวข้อของรายการที่ซ้ำกัน

เปลี่ยนสีข้อความ H2

เพื่อสร้างรูปแบบต่างๆ ในการออกแบบ เราจะเปลี่ยนสีข้อความของโมดูลที่ไฮไลต์ในหน้าจอการพิมพ์ด้านล่างด้วย

• หัวเรื่อง 2 สีข้อความ: #c4c4c4

เปลี่ยนสีตัวแบ่ง

พร้อมกับสีตัวแบ่งที่มาพร้อมกับโมดูลข้อความ

• สี: #c4c4c4

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ในขั้นสุดท้ายในหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

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

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

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