วิธีออกแบบภาพสะท้อนสำหรับรูปภาพและข้อความใน Divi

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

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

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

แอบมอง

นี่คือตัวอย่างคร่าวๆ ของการออกแบบที่เราจะสร้างในบทช่วยสอนนี้

ดาวน์โหลดเค้าโครงข้อความและภาพสะท้อนได้ฟรี

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

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

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

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

ดาวน์โหลด

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

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

ไปที่บทช่วยสอนกันไหม

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

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

ในการเริ่มต้น สิ่งที่คุณต้องมีคือ Divi ตรวจสอบให้แน่ใจว่าได้ติดตั้งและใช้งานธีม Divi แล้ว เราจะสร้างการออกแบบของเราตั้งแต่เริ่มต้นโดยใช้ Divi Builder ที่ส่วนหน้า (ตัวสร้างภาพ) คุณจะต้องใช้ภาพจำลองสองสามภาพสำหรับบทช่วยสอนนี้ (ภาพพื้นหลังประมาณ 1920px x 600px และภาพอื่นประมาณ 500px x 350px)

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

แนวคิดพื้นฐานเบื้องหลังการสร้างภาพและการสะท้อนข้อความใน Divi

แนวคิดพื้นฐานเบื้องหลังการสร้างการออกแบบการสะท้อนใน Divi ประกอบด้วยสามขั้นตอน:

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

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

วิธีสร้างภาพสะท้อน

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

จากนั้นเพิ่มโมดูลรูปภาพในแถว

อัปโหลดรูปภาพที่คุณต้องการจากแกลเลอรีสื่อไปยังโมดูลรูปภาพ จากนั้นอัปเดตการตั้งค่ารูปภาพต่อไปนี้:

ความกว้างสูงสุด: 600px
การจัดตำแหน่งโมดูล: ศูนย์
มาร์จิ้นที่กำหนดเอง: 0px ด้านล่าง

สร้างภาพสะท้อนในกระจก

ในการสร้างเอฟเฟกต์การสะท้อน ขั้นแรกเราต้องสร้างสำเนาภาพสะท้อนใต้ภาพโดยตรง

เมื่อต้องการทำเช่นนี้ ทำซ้ำโมดูลรูปภาพ จากนั้นให้อัปเดตการตั้งค่าของภาพที่ซ้ำกันดังนี้:

ความทึบ: 40%
เปลี่ยนขนาดแกน X: -100%

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

สิ่งนี้จะดูแลการออกแบบการสะท้อนพื้นฐาน อย่างไรก็ตาม เราสามารถเพิ่มการไล่ระดับสีเพิ่มเติมให้กับภาพด้านล่างเพื่อการออกแบบการสะท้อนที่สมจริงยิ่งขึ้น

เพิ่มการไล่ระดับสีทับซ้อนโดยใช้โมดูลข้อความ

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

ไปข้างหน้าและสร้างโมดูลข้อความใต้ภาพด้านล่าง

ลบเนื้อหาเริ่มต้นเพื่อให้โมดูลข้อความว่างเปล่า

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

พื้นหลังไล่ระดับสีซ้าย: rgba(255,255,255,0)
ไล่สีพื้นหลังด้านขวา: #ffffff

ความกว้าง: 100%
ส่วนสูง: 50%

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

position: absolute !important;
top: 50%;

ตำแหน่งที่แน่นอนของโมดูลข้อความนี้จะซ้อนทับโมดูลข้อความที่ครึ่งล่างของแถว

ลองดูว่าการออกแบบเป็นอย่างไร

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

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

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

สีพื้นหลัง: #000000
ความกว้าง: 100%:
ความกว้างสูงสุด: 100%;
ช่องว่างภายในที่กำหนดเอง: ด้านบน 0px, ด้านล่าง 0px

ทีนี้มาดูผลลัพธ์กัน

การเพิ่มข้อความลงในโมดูลข้อความซ้อนทับ

โปรดจำไว้ว่า เนื่องจากเราใช้โมดูลข้อความเป็นภาพซ้อนทับบนภาพด้านล่าง เราจึงสามารถเพิ่มเนื้อหาบางส่วนได้หากต้องการ

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

เนื้อหา: “ภาพสะท้อน”
สีข้อความ: #ffffff
ขนาดข้อความ: 30px
การวางแนวข้อความ: center

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

นี่คือการออกแบบขั้นสุดท้ายของการสะท้อนภาพ

การสร้างการสะท้อนข้อความใน Divi

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

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

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

อัปเดตเนื้อหาด้วยคำว่า "Reflection"

จากนั้นอัปเดตการตั้งค่าการออกแบบดังนี้:

แบบอักษรของข้อความ: Oswald
รูปแบบตัวอักษรของข้อความ: TT
สีข้อความ: #333333
ขนาดข้อความ: 10vw
ความสูงของบรรทัดข้อความ: .9em
การวางแนวข้อความ: center
มาร์จิ้นที่กำหนดเอง: 0px ด้านล่าง
แผ่นรองแบบกำหนดเอง: 4vw top

อัปเดตการตั้งค่าแถว

เมื่อโมดูลข้อความของเราได้รับการปรับแต่งแล้ว ก็ถึงเวลาอัปเดตการตั้งค่าของแถว

เปิดการตั้งค่าแถวและอัปเดตสิ่งต่อไปนี้:

ภาพพื้นหลัง: แทรกภาพพื้นหลัง
ความกว้างของรางน้ำ: 1
ความกว้าง: 100%
ความกว้างสูงสุด: 100%
ช่องว่างภายในที่กำหนดเอง: ด้านบน 0px, ด้านล่าง 0px

นี่คือสิ่งที่การออกแบบดูเหมือนจนถึงตอนนี้

การสร้างแถวข้อความสะท้อนแสง

ในการสร้างข้อความสะท้อนสำหรับการออกแบบนี้ เราจะสะท้อนทั้งแถวเพื่อให้เราสามารถรวมภาพพื้นหลังในการสะท้อน

ทำซ้ำแถวและอัปเดตสิ่งต่อไปนี้:

เปลี่ยนสเกลแกน Y: -100%

ตอนนี้แถวด้านล่างเป็นภาพสะท้อนของแถวด้านบน ตอนนี้ สิ่งที่เราต้องทำคือเพิ่มโอเวอร์เลย์

เพิ่มการไล่ระดับสีทับซ้อนโดยใช้โมดูลข้อความ

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

ไปข้างหน้าและสร้างโมดูลข้อความใหม่ภายใต้โมดูลข้อความในแถวด้านล่าง

เปิดการตั้งค่าโมดูลข้อความใหม่และลบเนื้อหาเพื่อให้โมดูลข้อความว่างเปล่า

จากนั้นอัปเดตการตั้งค่าดังนี้:

ไล่สีพื้นหลังด้านซ้าย: #ffffff
พื้นหลังไล่ระดับสีขวา: rgba(255,255,255,0.13)
ตำแหน่งเริ่มต้น: 38%

ความกว้าง: 100%
ส่วนสูง: 100%

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

position: absolute !important;
top: 0;

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

ผลสุดท้าย

ตรวจสอบผลลัพธ์สุดท้าย

นี่คือการออกแบบเดียวกันโดยไม่มีภาพพื้นหลัง

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

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

ฉันพบว่าภาพสะท้อนดูดีบนส่วนหัวของหน้าและในการแสดงภาพสำหรับผลงานชิ้นหนึ่ง และฉันแน่ใจว่ามีการใช้งานอื่นๆ อีกมากมายเช่นกัน

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

ไชโย!