วิธีเปิดเผยเนื้อหาด้วยเอฟเฟกต์ชัตเตอร์โฮเวอร์ใน Divi

การเปิดเผยเนื้อหาของโมดูลเมื่อวางเมาส์เหนืออาจมีประโยชน์บางประการ 1) อาจเป็นวิธีที่ดีในการออกแบบหน้าเว็บของคุณให้มีขนาดกะทัดรัดหรือสวยงามยิ่งขึ้นในตอนแรก 2) ช่วยประหยัดพื้นที่ 3) สามารถดึงดูดผู้ใช้ให้โต้ตอบกับเพจของคุณได้ 4) มันดูเท่ :) แนวคิดพื้นฐานคือการแสดงเพียงส่วนหนึ่งของเนื้อหาโมดูล (เช่น ทีเซอร์) ซึ่งทำให้ผู้เข้าชมสามารถวางเมาส์เหนือเพื่อดูเพิ่มเติมได้ เมื่อพวกเขาวางเมาส์เหนือโมดูล เนื้อหาทั้งหมดจะถูกเปิดเผยด้วยเอฟเฟกต์โฮเวอร์ที่ราบรื่นซึ่งเปิดและปิดเหมือนชัตเตอร์

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

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ ของสิ่งที่เราจะสร้างร่วมกัน

เริ่มต้น

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

ในการเริ่มต้น ให้สร้างเพจใหม่ ตั้งชื่อเพจ จากนั้นปรับใช้ Divi Builder เพื่อสร้างที่ส่วนหน้า เลือกตัวเลือก "เลือกเค้าโครงที่สร้างไว้ล่วงหน้า" จากนั้นจากป๊อปอัป Divi Library ให้เลือกชุด Day Spa Layout แล้วคลิกเพื่อใช้เค้าโครงหน้า Landing Page

เมื่อโหลดเลย์เอาต์ลงบนเพจแล้ว คุณก็พร้อมที่จะเริ่ม!

การเพิ่มตัวแบ่งที่ด้านบนและด้านล่างของ Blurb

เลื่อนลงมาที่หน้าหัวข้อ “ประสบการณ์สปาสุดหรู” พร้อมคำกล่าวทั้งสี่ประการ เราจะใช้แถวที่มีคำประกาศสี่คำเพื่อเริ่มการออกแบบ

การเพิ่มตัวแบ่งแรก

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

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

สีพื้นหลัง: #ffffff
สี (ของตัวแบ่ง): #ffffff
น้ำหนักตัวแบ่ง: 100px
ส่วนสูง: 100px
ระยะขอบที่กำหนดเอง: 0px ด้านล่าง

พื้นหลังสีขาวตรงกับพื้นหลังของส่วนของเราเนื่องจากเราไม่ต้องการเห็น ตรวจสอบว่าน้ำหนักและส่วนสูงของตัวแบ่งเท่ากัน

การเพิ่มตัวแบ่งที่สอง (สีส้ม)

ถัดไป สร้างตัวแบ่งอื่นโดยตรงภายใต้ตัวแบ่งที่คุณเพิ่งสร้าง และอัปเดตสิ่งต่อไปนี้:

สี: #ff7a6b
น้ำหนักตัวแบ่ง: 2px
ส่วนสูง: 2px
ระยะขอบที่กำหนดเอง: 0px ด้านล่าง

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

บันทึกหน้าของคุณ

การคัดลอกและวางตัวแบ่งรอบๆ การนำเสนอ

ตอนนี้เราพร้อมที่จะคัดลอกและวางตัวแบ่งของเราด้านบนและด้านล่างของคำประกาศในแต่ละคอลัมน์ เพื่อให้กระบวนการนี้ง่ายขึ้นเล็กน้อย ปรับใช้โหมดโครงร่างโดยเปิดเมนูการตั้งค่าที่ด้านล่างของหน้าแล้วคลิกไอคอนโครงร่าง (หรือใช้ shft + w)

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

ถัดไป กลับไปที่มุมมองเดสก์ท็อป (shft + w) เพื่อสิ้นสุดการออกแบบ หน้าของคุณควรมีลักษณะเช่นนี้

การปรับแต่งโมดูล Blurb

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

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

ใต้แท็บเนื้อหา ให้เพิ่มเนื้อหาจำลองสองสามบรรทัด

จากนั้นปิดใช้งานเงากล่องรูปภาพทั้งหมด

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

Custom Margin (ค่าเริ่มต้น): -100px ด้านบน, -65px ด้านล่าง
มาร์จิ้นที่กำหนดเอง (โฮเวอร์): 0px บน, 0px ล่าง

Custom Padding (โฮเวอร์): 10px บน, 10px ด้านล่าง

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

ตอนนี้ตรวจสอบผลลัพธ์จนถึงตอนนี้

สังเกตว่าด้านบนและด้านล่างของแต่ละโมดูลถูกซ่อนอยู่หลังตัวแบ่งจนกว่าคุณจะวางเมาส์เหนือพวกมัน

ทำความสะอาดเอฟเฟกต์ชัตเตอร์โฮเวอร์

การจัดวางโมดูลให้อยู่ตรงกลางแนวตั้ง

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

เปิดการตั้งค่าแถวและทำให้ความสูงของคอลัมน์เท่ากัน

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

align-items: center;

วิธีนี้จะช่วยให้แน่ใจว่าโมดูลต่างๆ อยู่ในแนวตั้งตรงกลางคอลัมน์ ทำให้เราได้เอฟเฟกต์ชัตเตอร์ขึ้นและลง

ให้ความสูงของแถวคงที่

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

นี่คือสิ่งที่คุณต้องทำ

ก่อนอื่น ในการตั้งค่าแถว ให้กำหนด CSS ID ให้กับแถวของคุณ:

CSS ID: ความสูงคงที่

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

@media (min-width: 980px) {
#fixed-height {
  height: 600px;
}
}

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

แค่นั้นแหละ!

ผลสุดท้าย

ตรวจสอบการออกแบบขั้นสุดท้าย

และนี่คือเอฟเฟกต์โฮเวอร์ชัตเตอร์

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

มาร์จิ้นที่กำหนดเอง (แท็บเล็ต): 0px บน, 0px ล่าง

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

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

ไชโย!