วิธีรวมพื้นหลังรูปภาพและตัวเลือกเงากล่องด้วย Divi

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

ตัวอย่างแรก

เดสก์ทอป

มือถือ

ตัวอย่างที่สอง

เดสก์ทอป

มือถือ

ตัวอย่างที่สาม

เดสก์ทอป

มือถือ

ตัวอย่างที่สี่

เดสก์ทอป

มือถือ

วิธีรวมพื้นหลังรูปภาพและตัวเลือกเงากล่องด้วย Divi

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

ตัวอย่างแรก

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

เพิ่มแถวสองคอลัมน์

คอลัมน์ 1 สีพื้นหลัง

เพิ่มแถวสองคอลัมน์ในส่วนมาตรฐานและเลือก 'rgba(12,113,195,0.11)' เป็นสีพื้นหลังของคอลัมน์ 1

ระยะห่าง

จากนั้นไปที่แท็บออกแบบ เพิ่ม '200px' ที่ระยะขอบด้านบน และ '150px' ที่ช่องว่างภายในด้านล่างของคอลัมน์แรก

เพิ่มโมดูลรูปภาพในคอลัมน์แรก (เดสก์ท็อปและแท็บเล็ต)

ขนาด

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

ระยะห่าง

จากนั้น เปิดหมวดหมู่ย่อยการเว้นวรรค เปิดใช้งานตัวเลือก 'แสดงช่องว่างใต้รูปภาพ' เพิ่ม '-150px' ที่ระยะขอบด้านบน และ '-110px' ที่ระยะขอบซ้ายของรูปภาพ

กล่องเงา

เลื่อนลงไปที่แท็บและใช้เงาของกล่องต่อไปนี้กับรูปภาพ:

• ตำแหน่งแนวนอนของกล่องเงา: 80px
• ตำแหน่งแนวตั้งเงาของกล่อง: 80px
• ความแรงของกล่องเงาเบลอ: 0px
• ความแรงของการกระจายเงาของกล่อง: 6px
• เงาสี: rgba(173,173,173,0.79)
• ตำแหน่งเงาของกล่อง: เงาด้านนอก

ทัศนวิสัย

สุดท้าย ไปที่แท็บขั้นสูงและปิดใช้งาน Image Module บนมือถือ

โมดูลภาพโคลน (โทรศัพท์)

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

เปลี่ยนเงากล่อง

สิ่งแรกที่เราต้องเปลี่ยนคือเงาของกล่อง แทนที่จะใช้การตั้งค่าเดสก์ท็อป ให้ใช้การตั้งค่าต่อไปนี้แทน:

• กล่องเงาตำแหน่งแนวนอน: 33px
• ตำแหน่งแนวตั้งเงาของกล่อง: 78px
• ความแรงของกล่องเงาเบลอ: 0px
• ความแรงของการกระจายเงาของกล่อง: 6px
• เงาสี: rgba(173,173,173,0.79)
• ตำแหน่งเงาของกล่อง: เงาด้านนอก
  

ทัศนวิสัย

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

ตัวอย่างที่สอง

ต่อไป เรามีตัวอย่างที่สองซึ่งมีลักษณะดังนี้บนเดสก์ท็อป:

เพิ่มแถวสองคอลัมน์

พื้นหลังไล่ระดับแถว

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

• สีแรก: rgba(237,240,0,0.55)
• สีที่สอง: rgba(255,255,255,0)
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: ศูนย์กลาง
• ตำแหน่งเริ่มต้น: 50.8%
• ตำแหน่งสุดท้าย: 50.8%

ขนาด

ไปที่แท็บ Design และเปิดใช้งานตัวเลือก 'Make This Row Fullwidth'

ระยะห่าง

สุดท้าย เพิ่มช่องว่างบนสุด '200px' ลงในคอลัมน์ที่สอง

เพิ่มโมดูลรูปภาพในคอลัมน์แรก

ระยะห่าง

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

กล่องเงา

เลื่อนลงไปที่แท็บเดียวกันและใช้การตั้งค่าต่อไปนี้สำหรับหมวดหมู่ย่อย Box Shadow:

• กล่องเงาตำแหน่งแนวนอน: 0px
• ตำแหน่งแนวตั้งเงาของกล่อง: 2px
• ความชัดเจนของเงากล่อง: 56px
• ความแรงของการกระจายเงาของกล่อง: 12px
• เงาสี: rgba(0,0,0,0.3)
• ตำแหน่งเงาของกล่อง: เงาด้านนอก

โมดูลภาพโคลน & วางในคอลัมน์ที่สอง

การตั้งค่าสำหรับ Image Module ภายในคอลัมน์ที่สองจะเหมือนกัน ไปข้างหน้า โคลน Image Module และวางไว้ในคอลัมน์ที่สอง

ตัวอย่างที่สาม

ต่อไปเราจะแสดงวิธีการบรรลุผลดังต่อไปนี้:

เพิ่มแถวหนึ่งคอลัมน์

คอลัมน์ 1 สีพื้นหลัง

เพิ่มแถวหนึ่งคอลัมน์และเลือก 'rgba(193,145,163,0.6)' เป็นสีพื้นหลังของคอลัมน์แรก

เพิ่มโมดูลรูปภาพ

ภาพพื้นหลังไล่โทนสี

จากนั้น เพิ่ม Image Module ลงในคอลัมน์และใช้พื้นหลังไล่ระดับสีต่อไปนี้:

• สีแรก: #e2e2e2
• สีที่สอง: rgba(255,255,255,0)
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 180deg
• ตำแหน่งเริ่มต้น: 50%
• ตำแหน่งสุดท้าย: 50%

ชายแดน

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

• ใช้เส้นขอบ: ใช่
• สีเส้นขอบ: #000000
• ความกว้างของเส้นขอบ: 3px
• สไตล์เส้นขอบ: ของแข็ง

ขนาด

ถัดไป เพิ่มความกว้างต่อไปนี้ในโมดูลรูปภาพ:

• เดสก์ท็อป: 85%
• แท็บเล็ตและโทรศัพท์: 100%

ระยะห่าง

จากนั้น เปิดหมวดหมู่ย่อย Spacing และทำการขยายและนำไปใช้กับ Image Module ต่อไปนี้:

• ระยะขอบซ้าย: 80px (เดสก์ท็อป), 0px (แท็บเล็ตและโทรศัพท์)
• ช่องว่างบน ขวา ล่าง และซ้าย: 30px

กล่องเงา

สุดท้าย เพิ่มเงากล่องด้วยการตั้งค่าต่อไปนี้:

• กล่องเงาตำแหน่งแนวนอน: 0px
• ตำแหน่งแนวตั้งเงาของกล่อง: 0px
• ความชัดเจนของเงากล่อง: 0px
• ความแรงของการกระจายเงาของกล่อง: 39px
• เงาสี: rgba(0,0,0,0.22)
• ตำแหน่งเงาของกล่อง: เงาด้านนอก

ตัวอย่างที่สี่

และในที่สุดก็; ตัวอย่างสุดท้ายที่เราจะแสดงให้คุณเห็นถึงวิธีการสร้างใหม่มีลักษณะดังนี้:

เพิ่มแถวสองคอลัมน์

เริ่มต้นด้วยการเพิ่มแถวสองคอลัมน์ แถวนี้จะไม่ต้องการการตั้งค่าเพิ่มเติมใดๆ ซึ่งแตกต่างจากตัวอย่างก่อนหน้านี้ที่เราจัดการในโพสต์นี้

เพิ่มโมดูลรูปภาพในคอลัมน์แรก

พื้นหลังไล่โทนสี

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

• สีแรก: rgba(255,255,255,0)
• สีที่สอง: rgba(92,0,158,0.46)
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 138deg
• ตำแหน่งเริ่มต้น: 55%
• ตำแหน่งสุดท้าย: 55%

ระยะห่าง

จากนั้นไปที่แท็บ ออกแบบ และใช้การตั้งค่าต่อไปนี้สำหรับประเภทย่อยการเว้นวรรค:

• แสดงช่องว่างด้านล่างภาพ: ใช่
• ช่องว่างภายในด้านขวา: 30px
• ช่องว่างภายในด้านล่าง: 30px

เพิ่มโมดูลรูปภาพที่สองในคอลัมน์แรก

สีพื้นหลัง

ดำเนินการต่อโดยเพิ่ม Image Module อื่นด้านล่างของโมดูลก่อนหน้าและใช้ 'rgba(96,96,96,0.42)' เป็นสีพื้นหลัง

ระยะห่าง

จากนั้นไปที่แท็บออกแบบและใช้การตั้งค่าต่อไปนี้สำหรับประเภทย่อยการเว้นวรรค:

• แสดงช่องว่างด้านล่างภาพ: ใช่
• ขอบบน: -250px (เดสก์ท็อป), -150 (แท็บเล็ต), -100 (โทรศัพท์)
• ระยะขอบขวา: -150px (เดสก์ท็อป), 0px (แท็บเล็ตและโทรศัพท์)
• ระยะขอบซ้าย: 150px
• ช่องว่างภายในด้านบน: 30px
• ช่องว่างภายในด้านซ้าย: 30px

กล่องเงา

สุดท้าย เปิดหมวดหมู่ย่อย Box Shadow และใช้การตั้งค่าต่อไปนี้:

• กล่องเงาตำแหน่งแนวนอน: 0px
• ตำแหน่งแนวตั้งเงาของกล่อง: 2px
• ความแรงของกล่องเงาเบลอ: 0px
• ความแรงของการกระจายเงาของกล่อง: 24px
• สีเงา: #e2e2e2
• ตำแหน่งเงาของกล่อง: เงาด้านนอก

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

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

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

ภาพเด่นโดย Creative Stall / shutterstock.com