วิธีเพิ่มเงากล่องด้านเดียวให้กับองค์ประกอบการออกแบบใน Divi

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

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

แอบมอง

นี่คือตัวอย่างคร่าวๆ ของการออกแบบเลย์เอาต์คำถามที่พบบ่อยที่เราจะสร้างโดยใช้เงากล่องด้านเดียว

เริ่มต้น

ในการเริ่มต้น คุณจะต้องสร้างหน้าใหม่ จากแดชบอร์ด WordPress ให้ไปที่หน้า > เพิ่มใหม่ จากนั้นตั้งชื่อเพจของคุณและปรับใช้ตัวสร้างภาพ เลือกตัวเลือก “เลือกเค้าโครงล่วงหน้า” จากป๊อปอัป Load from Library ให้ค้นหาและเลือก Therapist Layout Pack จากนั้นเลือกเค้าโครงหน้าคำถามที่พบบ่อยของนักบำบัดโรค แล้วคลิก "ใช้เค้าโครงนี้"

ตอนนี้คุณพร้อมที่จะเริ่มออกแบบแล้ว

ส่วนที่ 1: การจัดระเบียบเค้าโครง

ในเลย์เอาต์ที่สร้างไว้ล่วงหน้านี้ เราจะมุ่งความสนใจไปที่ส่วนที่สองที่มีคำถามจำลองภายในโมดูลสลับหลายโมดูล สำหรับผู้เริ่มต้น ให้เปลี่ยนเค้าโครงคอลัมน์ของแถวเป็นสามคอลัมน์ (1/3 1/3 1/3)

ถัดไป ย้ายโมดูลทั้งหมดในคอลัมน์ 2 ไปยังคอลัมน์ 3 โดยใช้คุณสมบัติ Multiselect ของ Divi ในการดำเนินการนี้ ให้กด Command (หรือ Control) ค้างไว้ แล้วคลิกแต่ละโมดูลในคอลัมน์ 2 จนกว่าจะเลือกทั้งหมด จากนั้นลากไปที่คอลัมน์ 3

ตอนนี้เราต้องเพิ่มพื้นที่แถวของเราอีกหน่อย เปิดการตั้งค่าแถวและอัปเดตสิ่งต่อไปนี้:

ความกว้าง: 80%
ความกว้างของรางน้ำ: 2
ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่

ส่วนที่ 2: การออกแบบโมดูลสลับ

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

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

เปิดสลับสีข้อความ: #ffffff
เปิดสลับสีพื้นหลัง: rgba(0,0,0,0)
ปิดสลับสีข้อความ: #ffffff
ปิดสลับสีพื้นหลัง: rgba(0,0,0,0)

สีข้อความ: #ffffff

Custom Padding: 3vw บน, 3vw ล่าง, 2vw ซ้าย, 2vw ขวา

ตอนนี้เราสามารถเพิ่มกล่องเงาทางด้านซ้ายของโมดูลสลับของเราโดยอัปเดตตัวเลือกเงาของกล่องดังต่อไปนี้:

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

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

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

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

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

ตำแหน่งแนวนอนของกล่องเงา: 30px

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

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

ส่วนที่ 3: การเพิ่มเงากล่องด้านเดียวให้กับคอลัมน์

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

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

กล่องเงา: 30px 0px 70px -45px rgba (0,0,0,0.4)

ถ้าคุณไม่คุ้นเคยกับ CSS คุณควรจะสามารถรับรู้ความคล้ายคลึงของโค้ดกับการตั้งค่าโมดูลกล่องเงาที่มีอยู่ในตัวสร้าง Divi ในโค้ดด้านบน…

30px คือค่าสำหรับตำแหน่งแนวนอน
0px คือค่าสำหรับตำแหน่งแนวตั้ง
70px คือค่าความชัดของภาพ
-45px คือค่าความแรงของการแพร่กระจาย
rgba(0,0,0,0.4) คือสีเงา

ฉันให้เงาของกล่องคอลัมน์มีความชัดเจนมากกว่าโมดูลสลับเพื่อสร้างความลึกที่มากขึ้นเล็กน้อย

ในการเพิ่มเงากล่องด้านซ้ายให้กับคอลัมน์ 3 คุณจะต้องเพิ่ม CSS ต่อไปนี้ในองค์ประกอบหลักของคอลัมน์ 3:

box-shadow: -30px 0px 70px -45px rgba(0,0,0,0.4)

อีกครั้ง ความแตกต่างเพียงอย่างเดียวระหว่าง CSS นี้กับ CSS ที่ใช้สำหรับคอลัมน์ 1 คือตำแหน่งแนวนอนเชิงลบ

ส่วนที่ 4: การเพิ่มไอคอน Blurb ลงในคอลัมน์ 2

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

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

ไอคอนสี: rgba(203,241,252,0.37)
ขนาดตัวอักษรของไอคอน: 20vw
มาร์จิ้นที่กำหนดเอง: 0px Bottom

ถัดไป ทำซ้ำโมดูลการนำเสนอเพื่อสร้างโมดูลเพิ่มเติมด้านล่าง

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

ขนาดตัวอักษรของไอคอน: 9vw
ความกว้าง: 40%
การจัดตำแหน่งโมดูล: ขวา
มาร์จิ้นที่กำหนดเอง: -2vw

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

ส่วนที่ 5: การจัดโมดูลให้อยู่ตรงกลางในแนวตั้งในคอลัมน์ 2

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

margin: auto

ตอนนี้โมดูลการนำเสนอทั้งหมดจะถูกจัดกึ่งกลางในแนวตั้งภายในคอลัมน์ 2

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

พื้นหลังไล่ระดับสีซ้าย: #616ce1
ไล่สีพื้นหลังด้านขวา: #3846e0

แค่นั้นแหละ. ตอนนี้การออกแบบเสร็จสมบูรณ์แล้ว

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

และสังเกตว่าเงาของกล่องขยายและหดตัวอย่างไรเมื่อเปิดและปิดการสลับ

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

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

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

ไชโย!