วิธีเพิ่มเอฟเฟกต์โฮเวอร์ให้กับสมาชิกในทีม Bios ใน Divi

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

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

ไปกันเถอะ!

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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

ระยะห่าง

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

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

เพิ่มแถว #1

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

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

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

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

เพิ่มโมดูลข้อความชื่อลงในคอลัมน์โดยเลือกสำเนา H2 บางส่วน

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

จากนั้นไปที่การตั้งค่าข้อความ H2 และทำการเปลี่ยนแปลงลักษณะที่ปรากฏของสำเนา

• หัวข้อที่ 2 แบบอักษร: Cinzel
• รูปแบบตัวอักษรของหัวเรื่อง 2: ตัวพิมพ์ใหญ่
• การจัดแนวข้อความหัวเรื่อง 2: Center
• หัวเรื่อง 2 ขนาดข้อความ: 70px

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

ทัศนวิสัย

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

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

ตัวแบ่งสี

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

• ตัวแบ่งสี: #333333

ขนาด

ต่อไป เราจะลดขนาดของตัวแบ่งและจัดกึ่งกลาง

• ความกว้าง: 26%
• การจัดตำแหน่งโมดูล: ศูนย์

เพิ่มแถว #2

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

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

ขนาด

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

• ใช้ความกว้างที่กำหนดเอง: ใช่
• หน่วย: PX
• กำหนดความกว้าง: 2000px
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่

ระยะห่าง

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

• ขอบบน: 50px
• ขอบล่าง: 50px
• ช่องว่างภายในด้านบน: 10px
• ช่องว่างภายในด้านล่าง: 10px
• ช่องว่างภายในด้านซ้าย: 5px
• ช่องว่างภายในด้านขวา: 5px
• คอลัมน์ 1, 2 และ 3 ช่องว่างภายในด้านซ้าย: 5px
• คอลัมน์ 1, 2 และ 3 ช่องว่างภายในด้านขวา: 5px

กล่องเงา

นอกจากนี้เรายังเพิ่มความลึกให้กับแถวของเราด้วยการเพิ่มเงาของกล่องด้วยการตั้งค่าต่อไปนี้:

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

เพิ่มโมดูลรูปภาพในคอลัมน์ 1

อัปโหลดรูปภาพไปยังโมดูลรูปภาพ

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

ตัวกรอง

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

• ความอิ่มตัว: 0%

เพิ่มโมดูล Blurb ลงในคอลัมน์ 1

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

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

เลือกไอคอน

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

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

จากนั้น เราจะเลือกสีพื้นหลังแบบโปร่งใสทั้งหมด

• สีพื้นหลัง: rgba(255,255,255,0)

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

และเราจะเปลี่ยนสีนั้นเมื่อโฮเวอร์

• สีพื้นหลัง: rgba(255,255,255,0.88)

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

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

• สีไอคอน: #ffffff
• ไอคอนวงกลม: ใช่
• วงกลม สี: #000000
• ตำแหน่งไอคอน: ซ้าย
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 50px

การตั้งค่าไอคอนโฮเวอร์

อย่างไรก็ตาม เราไม่ต้องการให้ไอคอนปรากฏเมื่อวางเมาส์เหนือ นั่นเป็นเหตุผลที่เราจะใช้สีที่โปร่งใสทั้งหมดแทน

• ไอคอนสี: rgba(255,255,255,0)
• วงกลมสี: rgba(255,255,255,0)

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

ถัดไป ไปที่การตั้งค่าข้อความชื่อและทำการเปลี่ยนแปลงบางอย่าง

• แบบอักษรของชื่อเรื่อง: Cinzel
• น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
• รูปแบบตัวอักษรของชื่อเรื่อง: ตัวพิมพ์เล็ก
• ชื่อข้อความสี: #000000
• ขนาดข้อความชื่อเรื่อง: 0px

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

แก้ไขขนาดข้อความเมื่อวางเมาส์เหนือ

• ขนาดข้อความชื่อเรื่อง: 30px

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

แก้ไขการตั้งค่าข้อความเนื้อหาด้วย

• แบบอักษรของร่างกาย: เปิด Sans
• สีข้อความ: #000000
• ขนาดข้อความเนื้อหา: 0px
• ความสูงของเส้นร่างกาย: 1.8em

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

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

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

ระยะห่างเริ่มต้น

สุดท้ายแต่ไม่ท้ายสุด เราจะต้องสร้างการทับซ้อนระหว่างโมดูล Blurb และโมดูลรูปภาพโดยใช้ระยะขอบบนสุดติดลบ

• ขอบบน: -3.7vw (เดสก์ท็อป), -9vw (แท็บเล็ตและโทรศัพท์)
• ขอบล่าง: 1.5vw (แท็บเล็ต), 2vw (โทรศัพท์)

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

เปลี่ยนค่าระยะขอบและช่องว่างภายในที่กำหนดเองเมื่อวางเมาส์เหนือ

• ขอบบน: -11.38vw
• ช่องว่างภายในด้านบน: 20px
• ช่องว่างภายในด้านล่าง: 20px
• ช่องว่างภายในด้านขวา: 50px

โคลนทั้งสองโมดูลสองครั้ง & วางซ้ำในคอลัมน์ที่เหลือ

เราสร้างเอฟเฟกต์โฮเวอร์ชีวภาพตัวแรกเสร็จแล้ว เพื่อประหยัดเวลา เราสามารถโคลนทั้งสองโมดูลในคอลัมน์ 1 สองครั้ง และวางรายการที่ซ้ำกันในสองคอลัมน์ที่เหลือ

เปลี่ยนรูปภาพและเนื้อหาของโมดูล Blurb

อย่าลืมเปลี่ยนรูปภาพใน Image Module และคัดลอกใน Blurb Module เพื่อจบส่วนสมาชิกในทีม!

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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