วิธีผสมผสานการคัดลอกบน Scroll ด้วยการตั้งค่าตำแหน่งของ Divi & เอฟเฟกต์การเลื่อน
เผยแพร่แล้ว: 2021-09-08วิธีที่คุณใช้คุณสมบัติในตัวของ Divi อย่างสร้างสรรค์สามารถสร้างความแตกต่างในการออกแบบเพจของคุณได้ เอฟเฟกต์การเลื่อนของ Divi ช่วยให้คุณสร้างการโต้ตอบที่สวยงามบนสกรอลล์ได้ วันนี้ เรากำลังเพิ่มบทช่วยสอนอื่นในรายการสิ่งที่คุณทำได้ด้วยเอฟเฟกต์การเลื่อนในตัวของ Divi โดยเฉพาะอย่างยิ่ง เราจะแสดงวิธีผสมผสานการคัดลอกบนสกรอลล์ เมื่อแรกเห็น สำเนาจะวางอยู่ใต้รูปภาพประกอบ อย่างไรก็ตาม ทันทีที่คุณเลื่อนไปยังจุดใดจุดหนึ่ง สำเนาจะปรากฏที่ด้านบนของรูปภาพผลิตภัณฑ์และจะเริ่มผสมกับรูปภาพ สิ่งนี้นำไปสู่เอฟเฟกต์ที่สะดุดตาซึ่งดูง่ายดาย คุณจะสามารถดาวน์โหลดไฟล์ Layout JSON ได้ฟรีเช่นกัน!
ไปกันเถอะ
ดูตัวอย่าง
ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน มาดูผลลัพธ์คร่าวๆ ของหน้าจอขนาดต่างๆ
เดสก์ทอป
มือถือ
ดาวน์โหลด The Layout ฟรี
หากต้องการวางเลย์เอาต์ฟรี ก่อนอื่นคุณต้องดาวน์โหลดโดยใช้ปุ่มด้านล่าง ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม
ดาวน์โหลดฟรี
เข้าร่วมจดหมายข่าว Divi แล้วเราจะส่งอีเมลสำเนาชุดเค้าโครงหน้า Landing Page ของ Divi ที่ดีที่สุดให้คุณ พร้อมแหล่งข้อมูล เคล็ดลับ และลูกเล่นที่น่าตื่นตาตื่นใจและฟรีอีกมากมายของ Divi ทำตามแล้วคุณจะเป็นผู้เชี่ยวชาญ Divi ในเวลาไม่นาน หากคุณสมัครรับข้อมูลแล้ว เพียงพิมพ์ที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลดเพื่อเข้าถึงชุดเค้าโครง
คุณสมัครสำเร็จแล้ว โปรดตรวจสอบที่อยู่อีเมลของคุณเพื่อยืนยันการสมัครของคุณและเข้าถึงชุดเค้าโครง Divi รายสัปดาห์ฟรี!
มาเริ่มสร้างใหม่กันเถอะ!
เพิ่ม 2x Placeholder Sections
เพิ่มมาตราใหม่
เริ่มต้นด้วยการเพิ่มส่วนตัวยึดตำแหน่งในหน้าที่คุณกำลังทำงานอยู่
ขนาด
เปิดการตั้งค่าส่วนและเปลี่ยนความสูงในการตั้งค่าการปรับขนาด
- ส่วนสูง: 50vh
ส่วนโคลน
โคลนส่วนหนึ่งครั้ง ซึ่งจะทำให้คุณมีตัวยึดตำแหน่งสองส่วนในหน้าของคุณ ส่วนตัวยึดตำแหน่งเหล่านี้จะช่วยให้คุณเห็นผลสุดท้ายหลังจากผ่านบทช่วยสอน บนเว็บไซต์ที่ใช้งานจริง ส่วนตัวยึดตำแหน่งจะถูกแทนที่ด้วยส่วนปกติที่คุณใช้ตลอดทั้งหน้า
เพิ่มส่วนใหม่ระหว่างส่วนตัวยึดตำแหน่ง
เมื่อส่วนตัวยึดอยู่ในตำแหน่งแล้ว ให้เพิ่มส่วนใหม่ระหว่างส่วนของตัวยึด
สีพื้นหลัง
เปิดการตั้งค่าส่วนและใช้สีพื้นหลังสีขาว
- สีพื้นหลัง: #ffffff
ระยะห่าง
ไปที่แท็บการออกแบบของส่วนและแก้ไขค่าการเติมด้านบนและด้านล่างตามลำดับ:
- ช่องว่างภายในด้านบน: 10vh
- ช่องว่างภายใน: 10vh
เพิ่มแถว #1
โครงสร้างคอลัมน์
ดำเนินการต่อโดยเพิ่มแถวใหม่ในส่วนโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:
ขนาด
โดยไม่ต้องเพิ่มโมดูล ให้เปิดการตั้งค่าแถว ไปที่การตั้งค่าการปรับขนาด และแก้ไขค่าความกว้างและความกว้างสูงสุด
- ความกว้าง: 100%
- ความกว้างสูงสุด: 100%
เพิ่มโมดูลข้อความลงในคอลัมน์
เพิ่มสำเนา
โมดูลเดียวที่เราต้องการสำหรับแถวนี้คือโมดูลข้อความ เพิ่มสำเนาที่คุณเลือก
การตั้งค่าข้อความ
ไปที่แท็บการออกแบบของโมดูลและเปลี่ยนการตั้งค่าข้อความตามลำดับ:
- แบบอักษรของข้อความ: มอนต์เซอร์รัต
- น้ำหนักแบบอักษรของข้อความ: Ultra Bold
- รูปแบบตัวอักษรของข้อความ: ตัวพิมพ์ใหญ่
- สีข้อความ: #fff2ea
- ขนาดตัวอักษร: 11vw
- ความสูงของบรรทัดข้อความ: 1em
- การจัดตำแหน่งข้อความ: กึ่งกลาง
เพิ่มแถว #2
โครงสร้างคอลัมน์
เพิ่มแถวอื่นในส่วนโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:
ขนาด
โดยไม่ต้องเพิ่มโมดูล ให้เปิดการตั้งค่าแถวและเปลี่ยนการตั้งค่าขนาดดังนี้:
- ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
- ความกว้างของรางน้ำ: 2
- ความกว้าง: 90%
- การจัดแนวแถว: กึ่งกลาง
เพิ่มโมดูลรูปภาพลงในคอลัมน์
อัพโหลดภาพ
เพิ่ม Image Module ลงในคอลัมน์ของแถว อัปโหลดรูปภาพที่คุณเลือก
การจัดตำแหน่ง
ไปที่แท็บการออกแบบของโมดูลและเปลี่ยนการจัดแนวรูปภาพตามลำดับ:
- การจัดตำแหน่งภาพ: กึ่งกลาง
ขนาด
จากนั้นไปที่การตั้งค่าการปรับขนาดและบังคับเต็มความกว้างบนโมดูล
- บังคับเต็มความกว้าง: ใช่
เพิ่มโมดูลปุ่มลงในคอลัมน์
เพิ่มสำเนา
โมดูลถัดไปและโมดูลสุดท้ายที่เราจะเพิ่มลงในคอลัมน์คือโมดูลปุ่ม ใช้สำเนาที่คุณเลือก
การจัดตำแหน่งปุ่ม
ไปที่แท็บออกแบบและเปลี่ยนการจัดตำแหน่งปุ่ม
- การจัดตำแหน่งปุ่ม: กึ่งกลาง
การตั้งค่าปุ่ม
จากนั้น จัดรูปแบบปุ่มดังนี้:
- ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
- ขนาดข้อความของปุ่ม: 16px
- สีข้อความของปุ่ม: #000000
- สีพื้นหลังของปุ่ม: #ffffff
- ความกว้างของขอบปุ่ม: 0px
- ระยะห่างระหว่างตัวอักษรของปุ่ม: 2px
- แบบอักษรของปุ่ม: มอนต์เซอร์รัต
- น้ำหนักแบบอักษรของปุ่ม: ตัวหนา
- รูปแบบตัวอักษรของปุ่ม: ตัวพิมพ์ใหญ่
ระยะห่าง
ใช้ค่าช่องว่างภายในที่กำหนดเองในการตั้งค่าการเว้นวรรคด้วย
- ช่องว่างภายในด้านบน: 20px
- ช่องว่างภายในด้านล่าง: 20px
- ช่องว่างภายในด้านซ้าย: 5%
- ช่องว่างภายในด้านขวา: 5%
เพิ่มการวางตำแหน่งที่แน่นอนให้กับแถว #1
เมื่อคุณทำแถวที่สองเสร็จแล้ว ให้กลับไปที่แถว #1 เปิดการตั้งค่าของแถวไปที่แท็บขั้นสูงแล้วเปลี่ยนส่วนแบบสัมบูรณ์ เมื่อทำเช่นนี้ แถวและโมดูลข้อความที่อยู่ภายในจะถูกวางไว้ใต้แถวที่มีโมดูลรูปภาพ
- ตำแหน่ง: Absolute
- ที่ตั้ง: Center
โคลนแถว #1 & วางซ้ำด้านล่างแถว #2
เพื่อให้โมดูลข้อความปรากฏที่ด้านบนของรูปภาพ เราจำเป็นต้องมีแถวอื่นที่มีค่าดัชนี z สูงกว่า โคลนแถวแรกและวางสำเนาไว้ใต้แถวที่สอง
ใช้เอฟเฟกต์กับแถว #3
เพิ่มดัชนี Z
เปิดแถวที่ซ้ำกันและเปลี่ยนดัชนี z ในแท็บขั้นสูง
- ดัชนี Z: 12
เปลี่ยนสีข้อความ
เปิดโมดูลข้อความในแถวและเปลี่ยนสีข้อความ
- สีข้อความ: #1e1e1e
ใช้ Blend Mode กับ Row
จากนั้นเปิดการตั้งค่าแถวและเปลี่ยนโหมดผสมผสานในการตั้งค่าตัวกรอง
- โหมดผสมผสาน: โอเวอร์เลย์
ใช้เอฟเฟกต์การเลื่อนบนโมดูลข้อความในแถว #3
เพิ่มเอฟเฟกต์เฟดดิ้งเข้าและออก
ทำบทช่วยสอนให้เสร็จสิ้นโดยเปิดโมดูลข้อความอีกครั้ง ไปที่เอฟเฟกต์การเลื่อนและเปิดใช้เอฟเฟกต์เฟดเข้าและออก แค่นั้นแหละ!
- เปิดใช้งานการเฟดเข้าและออก: ใช่
- ความทึบเริ่มต้น: 0%
- ความทึบปานกลาง: 0% (ที่ 26%)
- ความทึบสิ้นสุด: 100% (ที่ 28%)
- ทริกเกอร์เอฟเฟกต์การเคลื่อนไหว: กลางองค์ประกอบ
ดูตัวอย่าง
เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ในขั้นสุดท้ายในหน้าจอขนาดต่างๆ
เดสก์ทอป
มือถือ
ความคิดสุดท้าย
ในโพสต์นี้ เราได้แสดงให้คุณเห็นถึงวิธีการสร้างสรรค์ด้วยเอฟเฟกต์การเลื่อนในตัวของ Divi โดยเฉพาะอย่างยิ่ง เราได้แสดงให้คุณเห็นถึงวิธีการผสมผสานการคัดลอกบนสกรอลล์ ตอนแรกสำเนาดูเหมือนจะอยู่ใต้ภาพ หลังจากเลื่อน สำเนาจะแสดงตัวเหนือรูปภาพและกลมกลืนกับรูปภาพ คุณสามารถดาวน์โหลดไฟล์ JSON ได้ฟรีเช่นกัน! หากคุณมีคำถามหรือข้อเสนอแนะโปรดแสดงความคิดเห็นในส่วนความคิดเห็นด้านล่าง
หากคุณอยากเรียนรู้เพิ่มเติมเกี่ยวกับ Divi และรับ Divi freebies เพิ่มเติม อย่าลืมสมัครรับจดหมายข่าวทางอีเมลและช่อง YouTube ของเรา เพื่อที่คุณจะได้เป็นหนึ่งในคนกลุ่มแรกๆ ที่รู้จักและรับประโยชน์จากเนื้อหาฟรีนี้เสมอ