วิธีสร้างภาพตัดปะแบบโต้ตอบโดยใช้ตัวเลือกตำแหน่งของ Divi

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

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

มาเริ่มกันเลย!

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ ของเค้าโครงภาพตัดปะแบบโต้ตอบที่เราจะสร้างในบทช่วยสอนนี้

ดาวน์โหลดเค้าโครงฟรี

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

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

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

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

ดาวน์โหลด

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

ในการนำเข้าเลย์เอาต์ไปยังเพจของคุณ เพียงแตกไฟล์ zip แล้วลากไฟล์ JSON ไปที่ Divi Builder

ไปกวดวิชากันเถอะ

สิ่งที่คุณต้องการเพื่อเริ่มต้น

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi
2. สร้างหน้าใหม่ใน WordPress และใช้ Divi Builder เพื่อแก้ไขหน้าในส่วนหน้า (ตัวสร้างภาพ)
3. เลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น"

หลังจากนั้น คุณจะมีผืนผ้าใบเปล่าเพื่อเริ่มออกแบบใน Divi

การสร้างภาพต่อกันด้วยตัวเลือกตำแหน่งของ Divi

การเพิ่มประสิทธิภาพแถวและคอลัมน์

ในการเริ่มต้น ให้สร้างแถวหนึ่งคอลัมน์

การตั้งค่าแถว

ต่อไป เราต้องอัปเดตแถวเพื่อไม่ให้มีช่องว่างระหว่างโมดูล (ผ่านความกว้างของรางน้ำ) ดังนั้นเราจะตั้งค่าความกว้างของรางน้ำเป็น 1 และเรายังต้องตรวจสอบให้แน่ใจว่าแถวมีความกว้างเต็มความกว้างของหน้าต่างเบราว์เซอร์ เพื่อให้เราสามารถใช้ประโยชน์จากหน่วยความยาว vw เพื่อวางตำแหน่งภาพของเรา (หน่วยความยาว vw (ความกว้างวิวพอร์ต) สัมพันธ์กับความกว้างของหน้าต่างเบราว์เซอร์) ด้วยการตั้งค่าความกว้างเป็น 100% เราสามารถใช้หน่วยความยาว vw เพื่อจัดตำแหน่งรูปภาพของเราภายในแถว/คอลัมน์ เพื่อให้ตำแหน่งยังคงไม่เปลี่ยนแปลงบนความกว้างของเบราว์เซอร์ทั้งหมดเพื่อการออกแบบที่ตอบสนองอย่างราบรื่น และเพื่อซ่อนภาพที่ล้นออกมานอกแถว เราจำเป็นต้องตั้งค่าโอเวอร์โฟลว์เป็นซ่อน

ในการดำเนินการนี้ ให้ปรับการตั้งค่าแถวให้เหมาะสมดังนี้:

การตั้งค่าความสูงของคอลัมน์

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

ในการดำเนินการนี้ ให้เปิดการตั้งค่าแถวและอัปเดตการตั้งค่าคอลัมน์โดยเพิ่ม CSS ที่กำหนดเองต่อไปนี้ในองค์ประกอบหลัก

height: 40vw;

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

height: auto !important;

การเพิ่มข้อความชื่อเรื่อง

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

เนื้อหาของโมดูลข้อความ

จากนั้นอัปเดตข้อความด้วยเนื้อหาต่อไปนี้:

<h2>Recent Work</h2>

การตั้งค่าโมดูลข้อความ

จากนั้นอัปเดตการตั้งค่าโมดูลข้อความดังนี้:

• หัวข้อ 2 แบบอักษร: Limelight
• การจัดตำแหน่งข้อความหัวเรื่อง 2: center
• หัวเรื่อง 2 สีข้อความ: #24005b
• หัวเรื่อง 2 ขนาดข้อความ: 5vw (เดสก์ท็อปและแท็บเล็ต), 50px (โทรศัพท์)
• ความกว้าง: 100%
• ความกว้างสูงสุด: 35vw (เดสก์ท็อปและแท็บเล็ต), 100% (โทรศัพท์)
• ตำแหน่ง: Absolute (เดสก์ท็อป), ค่าเริ่มต้น (โทรศัพท์)
• ออฟเซ็ตแนวนอน (เดสก์ท็อป): 35vw

การสร้างและการจัดตำแหน่งรูปภาพ

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

การเพิ่มประสิทธิภาพภาพแรกด้วยเอฟเฟ็กต์โฮเวอร์ ไลท์บ็อกซ์ และการจัดตำแหน่งแบบสัมบูรณ์

ขั้นแรก เพิ่มโมดูลรูปภาพภายใต้โมดูลข้อความ

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

ขนาดภาพเมื่อวางเมาส์เหนือ

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

• สเกลการแปลง (โฮเวอร์): 115%

การวางตำแหน่งสัมบูรณ์ด้วยลำดับความสำคัญดัชนี Z บน Hover

ในการวางตำแหน่งภาพ เราจะใช้ตำแหน่งสัมบูรณ์กับหน่วยความยาว vw อัพเดทตัวเลือกตำแหน่งดังนี้:

บนเดสก์ท็อป (และแท็บเล็ต)

• ตำแหน่ง: สัมบูรณ์
• ตำแหน่ง: บนซ้าย
• ออฟเซ็ตแนวตั้ง: 5vw
• ออฟเซ็ตแนวนอน: -2vw

ทางโทรศัพท์

• ตำแหน่ง: Default

บนโฮเวอร์

• ดัชนี Z: 2

การออกแบบภาพและการตั้งค่าที่ตอบสนอง

จากนั้นอัปเดตสิ่งต่อไปนี้:

• การจัดตำแหน่งรูปภาพ: ซ้าย (เดสก์ท็อป), กึ่งกลาง (โทรศัพท์)
• ความกว้าง: 75% (โทรศัพท์)
• ความกว้างสูงสุด: 20vw (เดสก์ท็อปและแท็บเล็ต), 100% (โทรศัพท์)
• ขอบ (โทรศัพท์): 30px ด้านล่าง
• กล่องเงา: ดูภาพหน้าจอ
• ความอิ่มตัว: 0% (เดสก์ท็อป), 100% (โฮเวอร์)

การใช้รูปภาพแรกเป็นเทมเพลตสำหรับการสร้างและจัดตำแหน่งรูปภาพอื่นๆ อย่างรวดเร็ว

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

นี่คือกระบวนการ...

1. ทำซ้ำรูปภาพโดยคลิกที่ไอคอนที่ซ้ำกัน รูปภาพที่ซ้ำกันจะถูกจัดวางในตำแหน่งเดียวกันโดยสมบูรณ์ตรงด้านบนของรูปภาพที่คุณกำลังทำซ้ำ
2. ลากรูปภาพเข้าที่ เนื่องจากรูปภาพที่ซ้ำกันจะสืบทอดหน่วยความยาว vw ของรูปภาพก่อนหน้า คุณสามารถใช้ไอคอนลากเพื่อจัดตำแหน่งรูปภาพให้ตรงตามที่คุณต้องการภายในแถวได้
3. อัปเดตรูปภาพด้วยรูปภาพใหม่
4. ปรับขนาดของภาพโดยใช้ตัวเลือกขนาดในตัว

นี่คือภาพประกอบของสิ่งที่จะเกิดขึ้นเมื่อสร้างภาพที่สอง

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

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

อัปเดตรูปภาพ #2

• ออฟเซ็ตแนวตั้ง: 10.06 vw
• ออฟเซ็ตแนวนอน: 16.51 vw
• ความกว้างสูงสุด: 18 vw

รูปภาพ #3 อัปเดต

• ออฟเซ็ตแนวตั้ง: 24.25vw
• ออฟเซ็ตแนวนอน: 7.13vw
• ความกว้างสูงสุด: 20vw

รูปภาพ #4 อัปเดต

• ออฟเซ็ตแนวตั้ง: 17.69vw
• ออฟเซ็ตแนวนอน: 31.91vw
• ความกว้างสูงสุด: 18vw

รูปภาพ #5 อัปเดต

• ออฟเซ็ตแนวตั้ง: 12vw
• ออฟเซ็ตแนวนอน: 46.82vw
• ความกว้างสูงสุด: 15vw

รูปภาพ #6 อัปเดต

• ออฟเซ็ตแนวตั้ง: 19.13vw
• ออฟเซ็ตแนวนอน: 58.84vw
• ความกว้างสูงสุด: 12vw

รูปภาพ #7 อัปเดต

• ออฟเซ็ตแนวตั้ง: 28.24vw
• ออฟเซ็ตแนวนอน: 54.2vw
• ความกว้างสูงสุด: 10vw

รูปภาพ #8 อัปเดต

• ออฟเซ็ตแนวตั้ง: 32.5vw
• ออฟเซ็ตแนวนอน: 74.04vw
• ความกว้างสูงสุด: 8vw

รูปภาพ #9 อัปเดต

• ออฟเซ็ตแนวตั้ง: 1.01vw
• ออฟเซ็ตแนวนอน: 75.5vw
• ความกว้าง: 27vw
• ความกว้างสูงสุด: 27vw

เพิ่มภาพพื้นหลัง

หากต้องการสัมผัสสุดท้าย ให้เพิ่มภาพพื้นหลังในส่วนนี้ เท่านี้ก็เสร็จเรียบร้อย!

ผลสุดท้าย

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

นี่คือการออกแบบบนจอแสดงผลของโทรศัพท์

การเปลี่ยนตำแหน่งสำหรับรูปภาพสำหรับการออกแบบเลย์เอาต์ต่างๆ

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

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

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

ตำแหน่งมุมบนขวา

ตำแหน่งมุมล่างซ้าย

ตำแหน่งมุมล่างขวา

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

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

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

ไชโย!