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

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

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

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

Let 's go!

การสำรวจ

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

สำนัก

Divi-ชีวภาพเลื่อน-ผลเดสก์ทอป gif.gif

ตอบสนอง

Divi-ชีวภาพโฉบผล-มือถือ gif.gif

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

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

การเว้นวรรค

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

  • ช่องว่างภายในที่ดีที่สุด: 100px
  • ช่องว่างภายในด้านล่าง: 100px

ผลโฮเวอร์ชีวภาพ

เพิ่มแถว 1

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

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

ผลโฮเวอร์ชีวภาพ

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

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

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

ผลโฮเวอร์ชีวภาพ

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

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

  • หัวเรื่อง 2 ตัวอักษร: Cinzel
  • ชื่อรูปแบบตัวอักษร 2: ตัวพิมพ์เล็ก
  • หัวเรื่องการจัดแนวข้อความ 2: กึ่งกลาง
  • หัวเรื่องข้อความขนาด 2: 70px

ผลโฮเวอร์ชีวภาพ

เพิ่มโมดูลการหาร

ความชัดเจน

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

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

ผลโฮเวอร์ชีวภาพ

สีของตัวคั่น

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

  • สีของตัวคั่น: # 333333

ผลโฮเวอร์ชีวภาพ

ปรับขนาด

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

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

ผลโฮเวอร์ชีวภาพ

เพิ่มบรรทัด 2

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

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

ผลโฮเวอร์ชีวภาพ

ปรับขนาด

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

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

ผลโฮเวอร์ชีวภาพ

การเว้นวรรค

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

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

ผลโฮเวอร์ชีวภาพ

กล่องเงา

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

  • Box Shadow Blur Force: 80px
  • กำลังขยายเงาของกล่อง: -14px
  • สีเงา: rgba (0,0,0,0,3)

ผลโฮเวอร์ชีวภาพ

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

โหลดรูปภาพลงในโมดูลรูปภาพ

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

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

ผลโฮเวอร์ชีวภาพ

ฟิลเตอร์

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

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

ผลโฮเวอร์ชีวภาพ

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

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

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

ผลโฮเวอร์ชีวภาพ

เลือกไอคอน

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

ผลโฮเวอร์ชีวภาพ

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

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

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

ผลโฮเวอร์ชีวภาพ

สีพื้นหลังบนสะพานลอย

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

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

ผลโฮเวอร์ชีวภาพ

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

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

  • ไอคอนสี: #ffffff
  • ไอคอนวงกลม: ใช่
  • สีวงกลม: # 000000
  • ตำแหน่งไอคอน: ซ้าย
  • ใช้ Icon Font Size: ใช่
  • ขนาดตัวอักษรของไอคอน: 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
  • Padding ยอดนิยม: 20px
  • ช่องว่างภายในด้านล่าง: 20px
  • ที่หุ้มเบาะ: 50px

ผลโฮเวอร์ชีวภาพ

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

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

ผลโฮเวอร์ชีวภาพ

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

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

ผลโฮเวอร์ชีวภาพ

การสำรวจ

ตอนนี้เราได้ทำตามขั้นตอนทั้งหมดแล้วมาดูขั้นสุดท้ายว่าเราดูขนาดหน้าจอต่างๆกันอย่างไร

สำนัก

ผลโฮเวอร์ชีวภาพ

ตอบสนอง

ผลโฮเวอร์ชีวภาพ

คิดสุดท้าย

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

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