การสร้างเค้าโครงแบบเต็มหน้าจอด้วยการเปลี่ยนภาพพื้นหลังแบบพารัลแลกซ์ใน Divi

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

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

แอบมอง

ดูการออกแบบบางส่วนที่เราจะสร้างร่วมกัน

เริ่มต้น

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

สำหรับบทช่วยสอนนี้ สิ่งที่คุณต้องมีคือ Divi และชุดรูปภาพเพื่อใช้สำหรับรูปภาพผลิตภัณฑ์และภาพพื้นหลังต่างๆ ฉันใช้รูปภาพจาก Juice Shop Layout Pack ของเรา คุณสามารถดาวน์โหลดไฟล์ zip ที่มีรูปภาพเหล่านี้ได้ที่ด้านล่างของบล็อกโพสต์ที่มีชุดเลย์เอาต์นี้ เพียงคลิกปุ่ม "ดาวน์โหลดแอสเซทรูปภาพความละเอียดเต็ม"

เตรียมหน้าใหม่ของคุณ

เมื่อคุณมีภาพพร้อมแล้ว สร้างหน้าใหม่และตั้งชื่อหน้าของคุณ จากนั้นปรับใช้ Divi Builder และเลือก "สร้างจากศูนย์" จากนั้นคลิกปุ่มเพื่อสร้างที่ส่วนหน้า

ตอนนี้คุณพร้อมที่จะม้วนแล้ว!

แนวคิดพื้นฐาน

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

นี่คือวิธีการทำ

การสร้างส่วนหัวแบบเต็มความกว้าง

ขั้นแรก คุณจะต้องสร้างส่วนเต็มความกว้างใหม่ แล้วเพิ่มโมดูลส่วนหัวแบบเต็มความกว้างในส่วน

อัปเดตการตั้งค่าส่วนหัวแบบเต็มความกว้างด้วยเนื้อหาบางส่วนดังต่อไปนี้:

ชื่อเรื่อง “น้ำมะเขือเทศ”
ปุ่ม # 1 ลิงก์ข้อความ: “ดูสูตร”
เนื้อหา: “เนื้อหาของคุณอยู่ที่นี่ แก้ไขหรือลบข้อความนี้ในบรรทัดหรือในการตั้งค่าเนื้อหาของโมดูล”
ภาพโลโก้: [ดูภาพหน้าจอ] (รูปภาพมีขนาด 240px x 300px)

ตอนนี้ให้อัปเดตการออกแบบส่วนหัวของคุณต่อไปดังนี้:

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

ทำให้เต็มหน้าจอ: ใช่

แสดงปุ่มเลื่อนลง: ใช่
ไอคอน: ดูภาพหน้าจอ
เลื่อนลงไอคอนสี: #222222

สีข้อความ: Dark

ระดับหัวเรื่อง: H2
แบบอักษรของชื่อเรื่อง: Raleway
ขนาดข้อความชื่อเรื่อง: 50px

แบบอักษรของร่างกาย: Lato
ขนาดข้อความเนื้อหา: 16px
ระยะห่างระหว่างตัวอักษร: 1px

ขนาดข้อความปุ่มเดียว: 16px
ปุ่ม fOne สีข้อความ: #ffffff
สีพื้นหลังปุ่มเดียว: #222222
รัศมีเส้นขอบหนึ่งปุ่ม: 50px
ปุ่มหนึ่งตัวอักษรเว้นวรรค: 2px
รูปแบบตัวอักษรปุ่มเดียว: TT

ความกว้าง: 45% (เดสก์ท็อป), 60% (แท็บเล็ต), 100% (สมาร์ทโฟน)

บันทึกการตั้งค่า.

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

การเพิ่มพื้นหลังของส่วน

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

การทำซ้ำส่วนต่างๆ

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

การสร้างภาพพื้นหลังแบบคงที่โดยใช้ภาพพื้นหลังส่วนเดียวกันกับ CSS Parallax

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

ตรวจสอบผลลัพธ์

การใช้ภาพพื้นหลังที่แตกต่างกันด้วย CSS Parallax Transitions

การใช้ภาพพื้นหลังที่แตกต่างกัน (ที่มี CSS Parallax) สำหรับแต่ละส่วนจะเปลี่ยนความรู้สึกของการออกแบบเมื่อคุณเลื่อนดู เนื่องจากเราได้เปิดใช้งาน CSS Parallax สำหรับภาพพื้นหลังสี่ส่วนแล้ว สิ่งที่เราต้องทำคือเปลี่ยนรูปภาพแต่ละภาพให้แตกต่างออกไป ในกรณีนี้ ฉันเพียงแค่เพิ่มผลิตภัณฑ์เวอร์ชันใหญ่เป็นภาพพื้นหลังสำหรับแต่ละส่วน

เมื่อคุณมีภาพพื้นหลังที่แตกต่างกัน (ด้วย CSS Parallax) สำหรับแต่ละส่วนจากสี่ส่วน ให้ตรวจดูผลลัพธ์

การใช้ภาพพื้นหลังที่แตกต่างกันด้วยการเปลี่ยนภาพพารัลแลกซ์ที่แท้จริง

หากคุณต้องการเปลี่ยนเอฟเฟกต์การเปลี่ยนภาพพื้นหลัง คุณสามารถเปลี่ยนวิธีพารัลแลกซ์จาก CSS เป็น True Parallax สำหรับภาพพื้นหลังทั้งสี่ส่วน

เปิดการตั้งค่าส่วนใดส่วนหนึ่งและเปลี่ยนวิธี CSS เป็น "True Parallax"

จากนั้นคุณจะต้องทำเช่นเดียวกันกับอีกสามส่วนที่เหลือ หรือคุณสามารถคลิกขวาที่ตัวเลือก Parallax Method และเลือก "Extend Parallax Method" กับโมดูลส่วนหัวแบบเต็มความกว้างทั่วทั้งหน้า

เมื่อเสร็จแล้ว ให้ตรวจสอบเอฟเฟกต์การเปลี่ยนภาพพื้นหลัง

สำรวจการจัดตำแหน่งโมดูลต่างๆ

การเปลี่ยนการจัดตำแหน่งโมดูลส่วนหัวแบบเต็มความกว้างเป็นเรื่องง่าย เนื่องจากโมดูลส่วนหัวแบบเต็มความกว้างของเรามีความกว้างที่กำหนดเองที่ 45% คุณจึงปรับการจัดตำแหน่งโมดูลไปทางซ้าย ตรงกลาง หรือทางขวาได้อย่างง่ายดายเพื่อให้ได้เลย์เอาต์ที่แตกต่างกัน ฉันชอบการจัดตำแหน่งกึ่งกลางกับพื้นหลังแบบคงที่เป็นพิเศษ

หากต้องการจัดโมดูลให้อยู่ตรงกลาง ให้เปิดการตั้งค่าส่วนหัวแบบเต็มและอัปเดตการ จัดแนวโมดูล เป็น Centered

หากต้องการจัดแนวโมดูลทางด้านขวาของหน้า เพียงแค่อัปเดตการ จัดตำแหน่งโมดูล ให้อยู่ใน แนว ขวา

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

ต่อไปนี้คือตัวอย่างการจัดตำแหน่งกึ่งกลางด้วยพื้นหลังแบบคงที่ (รูปภาพพื้นหลังเดียวกันสำหรับแต่ละรายการที่มี CSS Parallax)

ต่อไปนี้คือตัวอย่างการจัดตำแหน่งกึ่งกลางด้วยรูปภาพพื้นหลังต่างๆ โดยใช้วิธี CSS Parallax

ต่อไปนี้คือตัวอย่างการจัดตำแหน่งกึ่งกลางด้วยภาพพื้นหลังต่างๆ โดยใช้วิธี True Parallax

นี่คือตัวอย่างการจัดตำแหน่งที่ถูกต้องกับภาพพื้นหลังต่างๆ โดยใช้ css และพารัลแลกซ์จริงร่วมกัน

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

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

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!