วิธีเพิ่มไอคอนโฮเวอร์โซเชียลให้กับรูปภาพของสมาชิกในทีมด้วย Divi

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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

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

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

ดาวน์โหลด

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

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

เพิ่มมาตรา #1

สีพื้นหลัง

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

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

ระยะห่าง

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

• แผ่นรองด้านบน
  • เดสก์ท็อปและแท็บเล็ต: 100px
  • โทรศัพท์: 50px
• แผ่นรองด้านล่าง:
  • เดสก์ท็อปและแท็บเล็ต: 100px
  • โทรศัพท์: 50px

เพิ่มแถวใหม่

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

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

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

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

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

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

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

• แบบอักษรของหัวเรื่อง: Alata
• หัวเรื่องสีข้อความ: #ffffff
• ขนาดข้อความหัวเรื่อง:
  • เดสก์ท็อป: 50px
  • แท็บเล็ต: 45px
  • โทรศัพท์: 35px
• ความสูงของบรรทัดหัวเรื่อง: 1.2em

เพิ่มโมดูลตัวแบ่งให้กับคอลัมน์

ทัศนวิสัย

ต่อไป เราจะเพิ่มโมดูลตัวแบ่ง ตรวจสอบให้แน่ใจว่าเปิดใช้งานตัวเลือก "แสดงตัวแบ่ง"

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

เส้น

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

• สีเส้น: #ffffff

ขนาด

เปลี่ยนการตั้งค่าการปรับขนาดด้วย

• น้ำหนักตัวแบ่ง: 2px
• ความกว้างสูงสุด: 100px
• ส่วนสูง: 2px

เพิ่มโมดูลข้อความ #2 ไปยังคอลัมน์

เพิ่มคำอธิบาย เนื้อหา

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

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

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

• แบบอักษรของข้อความ: Alata
• สีข้อความ: #7c7c7c
• ขนาดตัวอักษร: 17px
• ความสูงของบรรทัดข้อความ: 1.9em

ระยะห่าง

ลบระยะขอบด้านล่างเริ่มต้นด้วย

• ขอบล่าง: 0px

เพิ่มส่วน #2

พื้นหลังไล่โทนสี

เพิ่มส่วนอื่นด้านล่างของส่วนก่อนหน้าและใช้พื้นหลังแบบไล่ระดับสี

• สี 1: #0f0f0f
• สี 2: #000000
• ตำแหน่งเริ่มต้น: 10%
• ตำแหน่งสุดท้าย: 10%

ระยะห่าง

แก้ไขการตั้งค่าระยะห่างถัดไป

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

เพิ่มแถวใหม่

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

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

ขนาด

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

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 2px

เพิ่มโมดูลการติดตามโซเชียลมีเดียในคอลัมน์ 1

เพิ่มเครือข่ายโซเชียลทางเลือก

โมดูลแรกที่เราต้องการในแถวของเราคือ Social Media Follow Module ในคอลัมน์ 1 เพิ่มเครือข่ายโซเชียลที่คุณเลือก

ลบสีพื้นหลังเครือข่ายโซเชียลแต่ละสีแยกกัน

จากนั้นเปิดแต่ละเครือข่ายโซเชียลแยกกันและลบสีพื้นหลัง

เพิ่มลิงก์ไปยังแต่ละเครือข่ายโซเชียลแยกกัน

เพิ่มลิงก์ที่เกี่ยวข้องไปยังแต่ละเครือข่ายโซเชียลด้วย

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

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

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

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

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

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

ภาพพื้นหลัง

จากนั้นอัปโหลดภาพพื้นหลัง

• ขนาดภาพพื้นหลัง: ปก
• การผสมผสานภาพพื้นหลัง: ทวีคูณ

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

ไปที่แท็บการออกแบบของโมดูลและเปลี่ยนการจัดตำแหน่ง

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

ไอคอน

ปรับเปลี่ยนสีของไอคอนด้วย

• ไอคอนสี: rgba(0,0,0,0)

ระยะห่าง

จากนั้นไปที่การตั้งค่าการเว้นวรรคและใช้ค่าต่อไปนี้:

• ขอบล่าง: 0px
• แผ่นรองด้านบน:
  • เดสก์ท็อป: 250px
  • แท็บเล็ต: 450px
  • โทรศัพท์: 200px
• ช่องว่างภายในด้านล่าง: 20px

ชายแดน

เรากำลังเปลี่ยนการตั้งค่าเส้นขอบเช่นกัน

• ทุกมุม: 100px
• ความกว้างของเส้นขอบ: 2px
• เส้นขอบสี: rgba(255,255,255,0)

โฮเวอร์ชายแดน

ใช้เส้นขอบสีอื่นเมื่อวางเมาส์เหนือ

• โฮเวอร์เส้นขอบสี: #ffffff

CSS Class

จากนั้นไปที่แท็บขั้นสูงและใช้คลาส CSS ที่กำหนดเอง

• CSS Class: team-socials

วางเมาส์เหนือองค์ประกอบ

และทำการตั้งค่าโมดูลให้สมบูรณ์โดยเปิดใช้งานการตั้งค่าโฮเวอร์บนองค์ประกอบ before และคัดลอกและวางโค้ด CSS ต่อไปนี้:

content: "Connect with me!";
font-family: "Alata";
color: white !important;
position: absolute;
margin-top: -30px;

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

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

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

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

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

• การจัดตำแหน่งข้อความ: กึ่งกลาง
• สีข้อความ: เบา

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

จัดรูปแบบข้อความชื่อเรื่องถัดไป

• แบบอักษรของชื่อเรื่อง: Alata
• ขนาดข้อความชื่อเรื่อง:
  • เดสก์ท็อป: 27px
  • แท็บเล็ต: 25px
  • โทรศัพท์: 22px

การตั้งค่าข้อความตำแหน่ง

จากนั้น แก้ไขการตั้งค่าข้อความตำแหน่ง

• แบบอักษรของตำแหน่ง: Alata
• ขนาดข้อความตำแหน่ง:
  • เดสก์ท็อป: 17px
  • แท็บเล็ตและโทรศัพท์: 15px

ระยะห่าง

ใช้ช่องว่างด้านบนและด้านล่างที่กำหนดเองกับการตั้งค่าระยะห่าง

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

ชายแดน

และทำการตั้งค่าโมดูลให้สมบูรณ์โดยใช้การตั้งค่าเส้นขอบต่อไปนี้:

• ความกว้างของเส้นขอบ: 1px
• สีเส้นขอบ: #ffffff

ลบคอลัมน์ที่เหลืออยู่ของ Row

เมื่อคุณเสร็จสิ้นโมดูลในคอลัมน์ 1 แล้ว คุณสามารถลบสองคอลัมน์ที่เหลือของแถวได้

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

นำคอลัมน์ 1 กลับมาใช้ใหม่โดยการโคลนสองครั้ง

โคลนทั้งแถว

จากนั้นโคลนทั้งแถวกี่ครั้งก็ได้ตามต้องการ

เปลี่ยนเนื้อหาที่ซ้ำกันทั้งหมด

โซเชียลมีเดียตามลิงค์

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

โซเชียลมีเดียติดตามภาพพื้นหลัง

จากนั้น เปลี่ยนภาพพื้นหลังในแต่ละโมดูลติดตามโซเชียลมีเดีย

เนื้อหาโมดูลบุคคล

และทำการเปลี่ยนแปลงโดยแก้ไขเนื้อหาในแต่ละโมดูลบุคคล

เพิ่มโมดูลโค้ดด้านล่างโมดูลข้อความสุดท้ายในแถว #1 ของส่วน #1

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

เพิ่มโค้ด CSS

คัดลอกและวางโค้ด CSS ต่อไปนี้ เสร็จแล้ว:

<style>
.team-socials:hover li a.icon:before {
  color: black !important;
}

.team-socials:hover li a.icon {
  background-color: white;
}
</style>

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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