ไม่เป็นความลับที่หน้า "เกี่ยวกับเรา" จะช่วยกระตุ้นให้เกิดการคลิกของคุณ เว็บไซต์. นอกจากนี้ยังเป็นเพจประเภทนี้ที่จะเน้นถึงส่วนที่เป็นมนุษย์ของธุรกิจที่อยู่เบื้องหลัง เว็บไซต์เว็บ. เมื่อทราบสิ่งนี้ เราตระหนักดีว่าสิ่งสำคัญคือต้องใส่ใจกับวิธีที่เราจัดโครงสร้างหน้า ข้อมูลประเภทใดที่เราแบ่งปัน และวิธีที่เราสร้างปฏิสัมพันธ์
สิ่งหนึ่งที่คุณสามารถทำได้เพื่อปรับปรุงประสบการณ์ใช้งานเพจคือการจัดเตรียมส่วนสมาชิกในทีมที่ทำให้พนักงานของคุณเป็นที่สนใจ ยิ่งไปกว่านั้นคุณสามารถเพิ่มเอฟเฟกต์โฮเวอร์ทางชีวภาพให้กับรูปภาพของสมาชิกในทีมโดยใช้ตัวเลือกในตัวของ Divi เท่านั้น
วิธีนี้จะช่วยให้คุณประหยัดพื้นที่ในหน้าที่คุณกำลังทำงานอยู่และสร้างการโต้ตอบระหว่างคุณและคุณเมื่อวางเมาส์เหนือ ผู้เข้าชม.
ในบทช่วยสอนนี้เราจะแสดงวิธีไปที่นั่นทีละขั้นตอน เมื่อได้แนวทางแล้วคุณจะสามารถปรับแต่งรูปแบบการออกแบบให้เหมาะกับความต้องการของคุณเองได้
Let 's go!
การสำรวจ
ก่อนที่เราจะดำน้ำในบทช่วยสอนเรามาดูผลลัพธ์ของขนาดหน้าจอที่แตกต่างกัน
สำนัก
ตอบสนอง
เริ่มสร้างใหม่กันเถอะ
เพิ่มหัวข้อใหม่
การเว้นวรรค
สร้างเพจใหม่หรือเปิดเพจที่มีอยู่และเพิ่มส่วนใหม่โดยใช้ค่าการเติมที่กำหนดเองต่อไปนี้:
- ช่องว่างภายในที่ดีที่สุด: 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 เท่านั้น เราได้เน้นย้ำถึงความสำคัญในการสร้างเพจที่ดีเนื่องจากเป็นหนึ่งในเว็บไซต์ที่มีผู้เยี่ยมชมมากที่สุด
การใช้เอฟเฟ็กต์โฮเวอร์ชีวภาพสำหรับรูปภาพของสมาชิกในทีมไม่เพียง แต่ช่วยปรับปรุงคุณภาพของเพจของคุณเท่านั้น แต่ยังสร้างปฏิสัมพันธ์กับผู้เยี่ยมชมของคุณด้วย หากคุณมีคำถามหรือข้อเสนอแนะอย่าลืมแสดงความคิดเห็นในส่วนความคิดเห็นด้านล่าง!
สวัสดี,
ขอบคุณสำหรับบทช่วยสอนนี้มีประโยชน์มากสำหรับฉัน
อย่างไรก็ตามฉันพบปัญหาเล็ก ๆ 2 ปัญหา:
- ไม่ใช้พื้นหลังโฮเวอร์ (ฉันรู้สึกว่ามันอยู่หลังภาพ ... )
- สะพานลอยไม่เปิดในลักษณะเดียวกับในตัวอย่าง (ข้อความของฉันยังคงอยู่ที่ความสูงเดียวกับไอคอนและไม่เปิดขึ้นด้านบน) ซึ่งให้รูปลักษณ์ที่สวยงาม
คุณมีทางออกหรือไม่? ขอบคุณ
ขอให้มีความสุขมาก ๆ ในตอนเย็นนี้นะ
สวัสดี,
คุณสามารถแชร์ภาพหน้าจอได้หรือไม่?
สวัสดี,
ขอบคุณสำหรับบทช่วยสอนนี้มีการอธิบายเป็นอย่างดี
อย่างไรก็ตามฉันมีปัญหาเมื่อวางเมาส์เหนือโฮเวอร์ของฉันสั่นและไม่ไหล คุณรู้หรือไม่ว่าสิ่งนี้เกิดจากอะไร?
Merci
สวัสดีส
ไม่มีความคิดเสียใจ