Divi: วิธีนำเสนอคุณสมบัติบนแท็บโฮเวอร์

คุณต้องการนำเสนอฟังก์ชันหรือผลิตภัณฑ์ของคุณในรูปแบบของแท็บ Divi ด้วยเอฟเฟกต์โฮเวอร์?

คุณกำลังมองหาวิธีที่สร้างสรรค์ในการแสดงคุณลักษณะและ/หรือผลิตภัณฑ์บนหน้าเว็บของคุณหรือไม่? 

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

เอฟเฟกต์การเลื่อนแท็บจะเกิดขึ้นบนเดสก์ท็อปเท่านั้น ในขนาดหน้าจอที่เล็กกว่า จะปรากฏในรูปร่างปกติ

Let 's go!

การสำรวจ

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

มาเริ่มกระบวนการสร้างกับ Divi . กันเถอะ

เพิ่มหัวข้อใหม่

พื้นหลังไล่ระดับสี

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

• ซ้ายสี: #f2f2f2
• สีขวา: #ffffff
• ทิศทางการไล่ระดับสี: 87 องศา
• ตำแหน่งซ้าย: 20%
• ตำแหน่งขวา: 80%

การเว้นวรรค

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

• ช่องว่างภายใน (บนและล่าง): 0px

เพิ่มบรรทัดใหม่

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

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

สีพื้นหลัง

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

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

ขนาดและการจัดตำแหน่ง

ในแท็บ ออกแบบ, ดึงตัวเลือกลง การกำหนดขนาด และเปลี่ยนการตั้งค่าต่อไปนี้:

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: YESS
• ความกว้างของรางน้ำ: 1
• ความกว้าง : 400px
• การจัดแนวแถว: ซ้าย

เลื่อนขนาด

เปลี่ยนตัวเลือก ความกว้าง ในการตั้งค่าขนาดโฮเวอร์ ซึ่งจะทำให้เส้นขยายออกเมื่อวางเมาส์เหนือ

• ความกว้าง (โฮเวอร์): 2 พิกเซล

การเว้นวรรค

จากนั้นไปที่การตั้งค่าระยะห่างในตัวเลือก การเว้นวรรค

• ช่องว่างภายใน (บนและล่าง): 0px

เส้นขอบ (เดสก์ท็อป)

เพิ่ม '20px' ที่มุมบนขวาของบรรทัด และเพิ่มเส้นขอบด้านซ้ายให้กับบรรทัด

• มุมโค้งมน (เดสก์ท็อป): 20px (มุมขวาบน)
• ความกว้างของเส้นขอบด้านซ้าย: 20px
• ขอบซ้ายสี: #6d44ff

เส้นขอบบนโฮเวอร์

ลบมุมมนขวาบนของ '20px' เมื่อวางเมาส์เหนือโดยเพิ่ม '0px' แทน

กล่องเงา (เดสก์ท็อป)

สุดท้ายเพิ่มเงาที่ละเอียดอ่อน

• ความแรงของกล่องเงาเบลอ: 80px
• ความแรงของการกระจายเงาของกล่อง: -10px
• เงาสี: rgba(0,0,0,0.11)

โฮเวอร์เงา

และเปลี่ยนสีเงาเป็นสีโปร่งใสอย่างสมบูรณ์เมื่อวางเมาส์เหนือ

• เงากล่อง: rgba(255,255,255,0)

เพิ่มโมดูล Blurb ให้กับ Row

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

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

เมื่อคุณเพิ่มโมดูลแล้ว ให้เพิ่มบางส่วน เนื้อหา เดจาด Choix

เลือกไอคอน

จากนั้นเลือกไอคอนที่คุณต้องการ

การตั้งค่าไอคอน

และเปลี่ยนรูปลักษณ์ของไอคอนในการตั้งค่าไอคอน ไปที่แท็บ ออกแบบ

• ไอคอนสี: #5323ff
• ตำแหน่งรูปภาพ/ไอคอน: ด้านบน
• ความกว้างของรูปภาพ/ไอคอน: 50px

การตั้งค่าชื่อข้อความ (เดสก์ท็อป)

จากนั้นเปลี่ยนการตั้งค่าชื่อเรื่อง

• แบบอักษรของชื่อเรื่อง: Poppins
• การจัดตำแหน่งข้อความ: กึ่งกลาง
• ชื่อข้อความสี: #5323ff
• ขนาดข้อความชื่อเรื่อง: 25px
• ระยะห่างระหว่างตัวอักษร: -1px
• ความสูงของสาย: 1 em

วางเมาส์เหนือการตั้งค่าชื่อข้อความ

และเปลี่ยนความสูงของแถวหัวเรื่องเมื่อวางเมาส์เหนือ

• ความสูงของบรรทัดหัวเรื่อง: 1,5 em

การตั้งค่าข้อความเนื้อหา (เดสก์ท็อป)

ถัดไป ไปที่การตั้งค่าข้อความเนื้อหาและทำการเปลี่ยนแปลงบางอย่าง ซึ่งรวมถึงการเปลี่ยนขนาดข้อความเป็น '0px' ซึ่งจะช่วยให้เราทำให้ข้อความเนื้อหาปรากฏเฉพาะเมื่อวางเมาส์เหนือ

• แบบอักษรของร่างกาย: Poppins
• น้ำหนักแบบอักษรของร่างกาย: เบา
• การจัดตำแหน่งข้อความ: กึ่งกลาง
• สีข้อความ: #000000
• ขนาดข้อความ: 0px (เดสก์ท็อป), 15px (แท็บเล็ตและโทรศัพท์)
• ความสูงของสาย: 2,2 em

การตั้งค่าข้อความเนื้อหาบนโฮเวอร์

เพื่อให้แน่ใจว่าข้อความเนื้อหาปรากฏบนโฮเวอร์ ให้เปลี่ยนขนาดข้อความโฮเวอร์

• ขนาดข้อความเนื้อหา: 15px

ระยะห่าง (เดสก์ท็อป)

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

• ช่องว่างภายใน (บนและล่าง): 80px

โฮเวอร์ระยะห่าง

เราจะเปลี่ยนการตั้งค่าระยะห่างโฮเวอร์

• ช่องว่างภายใน (บนและล่าง): 80px
• Padding (ซ้ายและขวา): 20vw

โคลนแถว 3 ครั้ง

เมื่อคุณแก้ไขแถวแรกและโมดูล Blurb เสร็จแล้ว คุณสามารถดำเนินการต่อและโคลนแถวได้มากเท่าที่ต้องการ

แก้ไขบรรทัดและโมดูล Blurb #2

เปลี่ยนสีเส้นขอบ

เริ่มต้นด้วยการเปลี่ยนสีขอบด้านซ้ายของเส้น

• ขอบซ้ายสี: #00ffcc

แก้ไขเนื้อหาและไอคอน Blurb

ถัดไป เปิดการตั้งค่าโมดูล Blurb และเปลี่ยนไอคอน

เปลี่ยนสีไอคอนโมดูล Blurb

ด้วยสีไอคอน

• ไอคอนสี: #00eda6

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

และสีของข้อความชื่อเรื่อง

• สีข้อความชื่อเรื่อง: #00eda6

แก้ไขบรรทัดและ Burb #3 โมดูล

สีเส้นขอบ

มาเปลี่ยนสีขอบของเส้นด้านซ้ายกัน

• สีขอบซ้าย: #afebff

แก้ไขเนื้อหาและไอคอน Blurb

มาเปลี่ยนไอคอนและ เนื้อหา ของข้อความการนำเสนอ

เปลี่ยนสีไอคอนโมดูล Blurb

เปลี่ยนสีไอคอนด้วย

• สีไอคอน: #68d9ff

เปลี่ยนสีข้อความชื่อเรื่อง

และสีของข้อความชื่อเรื่องด้วย

• ชื่อข้อความสี: #68d9ff

แก้ไขบรรทัดและโมดูล Blurb #4

เปลี่ยนสีเส้นขอบ

ในโมดูลถัดไปและสุดท้าย เปลี่ยนสีของเส้นขอบด้านซ้ายของบรรทัดด้วย

• สีขอบซ้าย: #dd87cf

แก้ไขเนื้อหาและไอคอน Blurb

เปิดโมดูล Blurb ในแถวแล้วเปลี่ยนไอคอนและ เนื้อหา ดูโมดูล

เปลี่ยนสีไอคอนโมดูล Blurb

ด้วยสีไอคอน

• สีไอคอน: #dd6aca

เปลี่ยนสีข้อความชื่อเรื่อง

และสีของข้อความชื่อเรื่องด้วย

• สีข้อความของชื่อเรื่อง: #dd6aca

การสำรวจ

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

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

สรุป

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

แนวทางนี้จะช่วยให้คุณแบ่งปันเนื้อหาเกี่ยวกับคุณลักษณะหรือผลิตภัณฑ์แบบโต้ตอบได้ 

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

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

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

...