Divi: วิธีสร้างเมนูล้อหมุนบนโฮเวอร์

คุณต้องการสร้างเมนู Divi ดั้งเดิมในรูปแบบของวงล้อหมุนเมื่อโฮเวอร์หรือไม่?

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

ในบทช่วยสอนนี้ เราจะแสดงวิธีสร้างวงล้อเมนูที่หมุนได้เมื่อวางเมาส์เหนือใน Divi ซึ่งสามารถทำได้โดยใช้ตัวเลือก Divi ในตัวและตัวอย่าง css ที่กำหนดเอง

การสำรวจ

ก่อนเข้าสู่บทช่วยสอนนี้ มาดูผลลัพธ์ที่เราต้องการบรรลุก่อน

ดาวน์โหลด DIVI ทันที!!!

สร้างหน้าใหม่ด้วย Divi Builder

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

จากแดชบอร์ด WordPress ให้ไปที่ หน้า> เพิ่มใหม่ เพื่อสร้างเพจใหม่

ตั้งชื่อเรื่องที่เหมาะกับคุณแล้วคลิก ใช้ Divi Builder

จากนั้นคลิกที่ เริ่มสร้าง (สร้างจากรอยขีดข่วน)

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

การออกแบบวงล้อเมนูหมุนใน Divi

สร้างส่วนและบรรทัด 1

ในส่วนที่เป็นค่าเริ่มต้น ให้เพิ่มแถวที่มีโครงสร้างคอลัมน์ต่อไปนี้

จากนั้นเพิ่มโมดูลข้อความในบรรทัดที่มีเนื้อหาต่อไปนี้

ถัดไป อัปเดตการออกแบบข้อความดังนี้:

• แบบอักษรข้อความ: แบ่งปันเทค
• ระยะห่างของตัวอักษรข้อความ: 1px
• หัวเรื่อง 2 ขนาดข้อความ: 8vw

เพิ่มบรรทัดที่ 2 เพื่อสร้างวงล้อ

ต่อไป เราต้องเพิ่มแถวใหม่ลงในคอลัมน์ด้านล่างแถวที่ 1

ก่อนที่เราจะเริ่มเพิ่มโมดูลข้อความสำหรับลิงก์ของเรา เราต้องออกแบบบรรทัดของเราให้เป็นวงล้อ ในแถวนั้นจะต้องมีการเพิ่มประสิทธิภาพมากมายในการออกแบบวงล้อของเรา

อ่าน: วิธีเปิดเผยเนื้อหาบนตัวแบ่งส่วนโฮเวอร์ใน Divi 

ในการเริ่มต้น ให้เปิดการตั้งค่าแถวที่ 2 และอัปเดตสิ่งต่อไปนี้:

• สีพื้นหลัง: #02366b
• สีไล่ระดับพื้นหลังด้านซ้าย: rgba(0,0,0,0.45)
• สีไล่ระดับพื้นหลังด้านขวา: #02366b
• ประเภทการไล่ระดับสี: วงกลม
• ทิศทางเรเดียล: ศูนย์กลาง
• ตำแหน่งเริ่มต้น: 36%
• ตำแหน่งสิ้นสุด: 0%

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 500px
• ความกว้างสูงสุด: 500px (เดสก์ท็อป), อัตโนมัติ (แท็บเล็ตและโทรศัพท์)
• ความสูง: 500px (เดสก์ท็อป), อัตโนมัติ (แท็บเล็ตและโทรศัพท์)
• Padding (เดสก์ท็อป): 0px (บนและล่าง)
• Padding (แท็บเล็ตและโทรศัพท์): 20px (บน ล่าง และซ้าย)
• มาร์จิ้น (โทรศัพท์): -10% (ขวา)

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

• มุมโค้งมน: 50%

จากนั้นเราสามารถเพิ่มการออกแบบวงกลมอีกระดับโดยใช้เงากล่องได้ดังนี้:

• ความชัดเจนของกล่องเงาเบลอ: 0px
• ความแรงของการกระจายเงาของกล่อง: 210px
• เงาสี: rgba(2,54,107,0.66)

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

display:flex;align-items:center;

การเพิ่มลิงค์

แต่ละลิงค์ในวงล้อจะถูกสร้างขึ้นด้วยโมดูล ข้อความ. เราจะสร้างทั้งหมดหกโมดูล ข้อความ. ห้าโมดูล ข้อความ จะมีลิงค์สำหรับวงล้อและอีกอันจะมีชื่อของเมนู

เริ่มต้นด้วยการสร้างโมดูล "ข้อความ" ใหม่

ถัดไป อัปเดตการตั้งค่าข้อความดังนี้:

• บอดี้สูท: “องค์ประกอบ 1”

• แบบอักษรข้อความ: แบ่งปันเทค
• สีข้อความ: #ffffff
• ขนาด: 16px (ค่าเริ่มต้น), 20px (โฮเวอร์)
• ระยะห่างระหว่างตัวอักษร: 1px
• ความสูงของบรรทัดข้อความ: 60px
• ความกว้าง: 250px (เดสก์ท็อป), อัตโนมัติ (แท็บเล็ตและโทรศัพท์)
• ส่วนสูง: 60px
• ช่องว่างภายใน (ซ้าย): 20px

บันทึกการตั้งค่าสำหรับตอนนี้ จากนั้นทำซ้ำโมดูลข้อความ 4 ครั้งเพื่อสร้างโมดูลข้อความทั้งหมด 5 โมดูล

การวางตำแหน่งลิงก์ข้อความ/โมดูล

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

ค้นพบยัง: วิธีสร้างตารางคอลัมน์ของเหลวบนโฮเวอร์ใน Divi

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

ลิงค์ 1

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

• Transform Translate (แกน Y): 120 px (เดสก์ท็อป), 0 px (แท็บเล็ตและโทรศัพท์)

• Transform Rotate (แกน Z): 60 องศา (เดสก์ท็อป), 0 px (แท็บเล็ตและโทรศัพท์)

• ที่มา: 50% (กลางขวา)

ลิงค์ 2

เปิดการตั้งค่าโมดูลข้อความสำหรับลิงก์ 2 และอัปเดตสิ่งต่อไปนี้:

• แปลง
  • แปล (แกน Y): 60px (เดสก์ท็อป), 0px (แท็บเล็ตและโทรศัพท์)
  • การหมุนแกน Z: 30deg (เดสก์ท็อป), 0px (แท็บเล็ตและโทรศัพท์)
  • ที่มา: 50% (กลางขวา)

ลิงค์ 3

เนื่องจากโมดูลข้อความสำหรับลิงก์ 3 อยู่ตรงกลาง เราจึงสามารถปล่อยให้มันเข้าที่

ลิงค์ 4

เปิดการตั้งค่าโมดูลข้อความสำหรับลิงก์ 2 และอัปเดตสิ่งต่อไปนี้:

• แปลง :
  • แปลแกน Y: -60px (เดสก์ท็อป), 0px (แท็บเล็ตและโทรศัพท์)
  • การหมุนแกน Z: -30deg (เดสก์ท็อป), 0px (แท็บเล็ตและโทรศัพท์)
  • แหล่งกำเนิด: 50% (กลางขวา)

ลิงค์ 5

เปิดการตั้งค่าโมดูลข้อความสำหรับลิงก์ 2 และอัปเดตสิ่งต่อไปนี้:

• แปลง :
  • แปลแกน Y: -120px (เดสก์ท็อป), 0px (แท็บเล็ตและโทรศัพท์)
  • การหมุนแกน Z: -60deg (เดสก์ท็อป), 0px (แท็บเล็ตและโทรศัพท์)
  • ที่มา: 50% (กลางขวา)

ทีนี้มาดูผลลัพธ์กัน สังเกตว่าลิงก์/ข้อความในโมดูลข้อความทำงานอย่างสมบูรณ์ตามเส้นรอบวงของวงกลมได้อย่างไร

เพิ่มป้ายเมนู

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

ถัดไป อัปเดตเนื้อหาเนื้อหาดังต่อไปนี้:

Menu

จากนั้น เพื่อเพิ่มความเร็วในการออกแบบ ให้คัดลอกสไตล์โมดูลข้อความสำหรับลิงก์ 3 และวางสไตล์โมดูลเหล่านี้ลงในโมดูลข้อความใหม่

จากนั้นให้อัปเดตสิ่งต่อไปนี้:

• ความสูงของบรรทัดข้อความ: 300px (เดสก์ท็อป), 20px (แท็บเล็ตและโทรศัพท์)
• ความสูง: เรียกคืนการตั้งค่าเริ่มต้น (อัตโนมัติ)

• เปลี่ยนการหมุน (แกน Z): 180 องศา (เดสก์ท็อป), 0 องศา (แท็บเล็ตและโทรศัพท์)
• กำเนิดการแปลง: 50% (กลางขวา)

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

position: absolute!important;

ตอนนี้หาผลลัพธ์ คุณควรเห็นรายการเมนูคว่ำลงทางด้านขวาของวงล้อ

เพิ่มเอฟเฟกต์โฮเวอร์หมุนให้กับเส้น/วงล้อ

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

• เปลี่ยนการหมุน (แกน Z): 180 องศา (เดสก์ท็อป), 0 องศา (โฮเวอร์), 0 องศา (แท็บเล็ตและโทรศัพท์)

ถัดไป อัปเดตการตั้งค่าการเปลี่ยนดังนี้:

• ระยะเวลาการเปลี่ยนภาพ: 450ms
• การเปลี่ยนเส้นโค้งความเร็ว: Ease-in-Out

ตอนนี้ดูว่าวงล้อหมุนอย่างไรเมื่อวางเมาส์เหนือมัน

การสร้างเค้าโครงสองคอลัมน์สำหรับส่วน

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

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

เปิดการตั้งค่าส่วนและเพิ่ม CSS ที่กำหนดเองต่อไปนี้ในองค์ประกอบหลัก:

display:flex;

อัพเดทระยะห่างบรรทัดที่ 1

ถัดไป อัพเดตขนาดและระยะห่างของบรรทัดที่ 1 ดังนี้:

• ความกว้าง: 40% (เดสก์ท็อป)
• มาร์จิ้น (เดสก์ท็อป): เหลือ 5%

ผลสุดท้าย

ตอนนี้เรามาดูผลสุดท้าย

ดาวน์โหลด DIVI ทันที!!!

การออกแบบครึ่งล้อทางเลือก

การออกแบบทางเลือกที่ดีคือการซ่อนครึ่งวงล้อด้านขวาไว้ด้านนอกของส่วน เพื่อให้ลิงก์ถูกซ่อนและเปิดเผยเมื่อวางเมาส์เหนือ 

ในการทำเช่นนี้ ไปข้างหน้าและทำซ้ำส่วนทั้งหมดที่มีภาพวาดที่เราเพิ่งสร้างขึ้น 

ในส่วนที่ซ้ำกัน ให้อัปเดตพารามิเตอร์ในบรรทัดที่ 1 ดังนี้:

• ความกว้าง: 70% (เดสก์ท็อป)

ถัดไป อัปเดตพารามิเตอร์ในบรรทัดที่ 2 เพื่อผลักล้อออกจากส่วนดังนี้:

• ระยะขอบ: -250px ขวา

เราจำเป็นต้องใช้ -250px เพราะความกว้างรวมของวงล้อคือ 500px และเราต้องการซ่อนครึ่งบรรทัดพอดี

จากนั้นตั้งค่าการเปิดเผยของส่วนเป็นซ่อนดังนี้:

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

นี่คือผลสุดท้าย

ดาวน์โหลด DIVI ทันที!!!

สรุป

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

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

ปรึกษาได้นะคะ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.

แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.

...