วิธีใช้โมดูลรูปภาพในตำแหน่งที่แน่นอนเป็นพื้นหลังพารัลแลกซ์ซูมออกด้วย Divi

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

ดาวน์โหลดเค้าโครงโมดูลภาพตำแหน่งแอบโซลูทฟรี

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

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

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

ดาวน์โหลด

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

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

เพิ่มมาตราใหม่

สีพื้นหลัง

เริ่มต้นด้วยการเพิ่มส่วนใหม่ในหน้าที่คุณกำลังทำงานอยู่ เปิดการตั้งค่าส่วนและเปลี่ยนสีพื้นหลัง

• สีพื้นหลัง: #000000

ขนาด

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

• ความกว้าง: 95%
• การจัดตำแหน่งส่วน: ศูนย์

ระยะห่าง

เพิ่มค่าการเว้นวรรคแบบกำหนดเองด้วย

• มาร์จิ้นสูงสุด: 5%
• ขอบล่าง: 5%
• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

ล้น

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

• แนวนอนล้น: ซ่อน
• ล้นแนวตั้ง: ซ่อน

เพิ่มแถวใหม่

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

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

ขนาด

โดยไม่ต้องเพิ่มโมดูลใด ๆ ให้เปิดการตั้งค่าแถวและแก้ไขการตั้งค่าการปรับขนาดดังนี้:

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

ระยะห่าง

ลบช่องว่างด้านบนและด้านล่างเริ่มต้นทั้งหมดถัดไป

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

เพิ่มโมดูลข้อความ #1 ให้กับคอลัมน์

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

จากนั้น เพิ่มโมดูลข้อความแรกด้วยเนื้อหา H2 ที่คุณเลือก

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

ไปที่แท็บการออกแบบของโมดูลและเปลี่ยนการตั้งค่าข้อความ H2 ตามนั้น:

• หัวข้อ 2 แบบอักษร: Lato
• หัวข้อ 2 น้ำหนักแบบอักษร: เบา
• หัวเรื่อง 2 สีข้อความ: #ffffff
• หัวเรื่อง 2 ขนาดข้อความ: 4vw (เดสก์ท็อป), 8vw (แท็บเล็ตและโทรศัพท์)
• หัวเรื่อง 2 ระยะห่างตัวอักษร: 1px

ระยะห่าง

เราจะเพิ่มค่าการเว้นวรรคแบบกำหนดเองด้วย

• ขอบบน: 25vw (เดสก์ท็อป), 50vw (แท็บเล็ตและโทรศัพท์)
• ระยะขอบซ้าย: 5%
• ระยะขอบขวา: 5%

เพิ่มโมดูลข้อความ #2 ไปยังคอลัมน์

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

โมดูลต่อไปที่เราต้องการคือโมดูลข้อความอื่น เพิ่มเนื้อหาคำอธิบายที่คุณเลือก

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

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

• แบบอักษรของข้อความ: Lato
• สีข้อความ: #ffffff
• ขนาดตัวอักษร: 0.8vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 2.1em

ขนาด

ปรับเปลี่ยนความกว้างตามขนาดหน้าจอต่างๆ ต่อไป

• ความกว้าง: 800px (เดสก์ท็อป), 80% (แท็บเล็ต), 90% (โทรศัพท์)

ระยะห่าง

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

• มาร์จิ้นสูงสุด: 2%
• ขอบล่าง: 2%
• ระยะขอบซ้าย: 5%
• ระยะขอบขวา: 5%

เพิ่มโมดูลปุ่มลงในคอลัมน์

เพิ่มสำเนา

ไปยังโมดูลถัดไป ซึ่งเป็นโมดูลปุ่ม เพิ่มสำเนาที่คุณเลือก

การตั้งค่าปุ่ม

จากนั้น ไปที่แท็บออกแบบและจัดรูปแบบปุ่มตามนั้น:

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 1.5vw (เดสก์ท็อป), 2.5vw (แท็บเล็ต), 3vw (โทรศัพท์)
• สีข้อความของปุ่ม: #ffffff
• ไล่ระดับสี 1: rgba(255,255,255,0)
• ไล่ระดับสี 2: #ffffff
• ประเภทการไล่ระดับสี: เชิงเส้น
• ตำแหน่งเริ่มต้น: 98%
• ตำแหน่งสุดท้าย: 98%

• ความกว้างของขอบปุ่ม: 0px
• แบบอักษรของปุ่ม: Lato
• น้ำหนักแบบอักษรของปุ่ม: หนัก
• แสดงไอคอนปุ่ม: ใช่
• ตำแหน่งไอคอนปุ่ม: ซ้าย
• แสดงเฉพาะไอคอนเมื่อวางเมาส์เหนือปุ่ม: ไม่

ระยะห่าง

เรากำลังใช้ค่าการเว้นวรรคแบบกำหนดเองในขนาดหน้าจอต่างๆ ด้วยเช่นกัน

• ขอบล่าง: 7vw (เดสก์ท็อป), 20vw (แท็บเล็ต), 25vw (โทรศัพท์)
• ระยะขอบซ้าย: 5%
• ระยะขอบขวา: 5%

เพิ่มโมดูลรูปภาพที่ด้านบนของคอลัมน์

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

ปล่อยให้กล่องรูปภาพว่าง

ปล่อยให้กล่องรูปภาพว่างเปล่า

ภาพพื้นหลัง

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

• ใช้เอฟเฟกต์พารัลแลกซ์: ใช่
• วิธีพารัลแลกซ์: CSS

ขนาด

ไปที่แท็บการออกแบบของโมดูลและบังคับให้เต็มความกว้าง

• บังคับเต็มความกว้าง: ใช่

ระยะห่าง

เพิ่มช่องว่างด้านบนและด้านล่างที่กำหนดเองในขนาดหน้าจอต่างๆ ด้วย

• ด้านบน: 27vw (เดสก์ท็อป), 54vw (แท็บเล็ต), 68vw (โทรศัพท์)
• ช่วงล่าง: 27vw (เดสก์ท็อป), 54vw (แท็บเล็ต), 68vw (โทรศัพท์)

ตำแหน่ง

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

• ตำแหน่ง: Absolute
• ตำแหน่ง: บนซ้าย

เอฟเฟกต์เลื่อนขึ้นและลง

และเราจะดำเนินการตั้งค่าโมดูลให้เสร็จสิ้นโดยการเพิ่มเอฟเฟกต์การเลื่อนขึ้นและลง

• เปิดใช้งานการปรับขนาดขึ้นและลง: ใช่
• สเกลเริ่มต้น: 150% (ที่ 30%)
• ระดับกลาง: 150% (ที่ 45%)
• สเกลสิ้นสุด: 100% (ที่ 55%)
• ทริกเกอร์เอฟเฟกต์การเคลื่อนไหว: กลางองค์ประกอบ

โคลนทั้งส่วนเท่าที่จำเป็น

เมื่อคุณทำส่วนแรกเสร็จแล้ว คุณสามารถโคลนได้มากเท่าที่คุณต้องการ

เปลี่ยนสำเนาสำหรับแต่ละส่วนที่ซ้ำกัน

ตรวจสอบให้แน่ใจว่าคุณเปลี่ยนสำเนาสำหรับแต่ละรายการที่ซ้ำกัน

เปลี่ยนภาพพื้นหลังของโมดูลรูปภาพสำหรับแต่ละส่วนที่ซ้ำกัน

พร้อมกับภาพพื้นหลังโมดูลภาพและคุณทำเสร็จแล้ว!

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ในขั้นสุดท้ายในหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

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

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

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