วิธีใช้ Row Box Shadows อย่างสร้างสรรค์ด้วย Divi

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

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

ผลลัพธ์

เดสก์ทอป

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

มือถือ

และแบบนี้บนมือถือ:

วิธีใช้ Row Box Shadows อย่างสร้างสรรค์ด้วย Divi

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

รูปแบบส่วนหัว

สิ่งแรกที่คุณต้องทำคือเลือกรูปแบบส่วนหัวที่เหมาะสม ไปที่ แดชบอร์ด WordPress ของคุณ > ปรับแต่ง > ส่วนหัวและการนำทาง > รูปแบบส่วนหัว > และเลือก 'กึ่งกลาง' เป็นสไตล์ส่วนหัว

แถบเมนูหลัก

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

• ซ่อนภาพโลโก้: เปิดใช้งาน
• ความสูงของเมนู: 211
• โลโก้ความสูงสูงสุด: 30
• ขนาดตัวอักษร: 16
• ระยะห่างระหว่างตัวอักษร: 2
• แบบอักษร: Lato Light
• รูปแบบตัวอักษร: ตัวพิมพ์ใหญ่
• สีข้อความ: #FFFFFF
• สีของลิงค์ที่ใช้งาน: #FFFFFF
• สีพื้นหลัง: rgba(255,255,255,0)
• สีพื้นหลังของเมนูแบบเลื่อนลง: rgba(255,255,255,0)

ส่วนแรก

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

พื้นหลังไล่ระดับมาตรา

ส่วนนี้จะต้องมีพื้นหลังไล่ระดับต่อไปนี้:

• สีแรก: #ea2e7d
• สีที่สอง: #edd900
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 110deg
• ตำแหน่งเริ่มต้น: 0%
• ตำแหน่งสุดท้าย: 100%

ระยะห่าง

ไปที่แท็บออกแบบ ภายในหมวดหมู่ย่อยการเว้นวรรค ให้ใช้ '100px' สำหรับช่องว่างภายในด้านบน และ '200px' สำหรับช่องว่างภายในด้านล่าง

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

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

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

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

พื้นหลังไล่ระดับคอลัมน์

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

• สีแรก: rgba(237,217,0,0.77)
• สีที่สอง: rgba(255,255,255,0)
• ประเภทการไล่ระดับสีของคอลัมน์: เชิงเส้น
• ทิศทางการไล่ระดับของคอลัมน์: 180deg
• ตำแหน่งเริ่มต้นของคอลัมน์: 0
• ตำแหน่งสิ้นสุดคอลัมน์: 100

ขนาด

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

• ใช้ความกว้างที่กำหนดเอง: ใช่
• ความกว้างที่กำหนดเอง: 27%

ระยะห่าง

จากนั้น ใช้ '20px' สำหรับ Custom Padding ด้านบน ขวา ล่าง และซ้ายของแถว

โมดูลข้อความ

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

• แบบอักษรของข้อความ: Arvo
• ขนาดตัวอักษรของข้อความ: 98px
• สีข้อความ: #FFFFFF
• ระยะห่างของตัวอักษรข้อความ: 32px
• ความสูงของบรรทัดข้อความ: 1.4em
• การวางแนวข้อความ: ศูนย์

ส่วนที่สอง

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

พื้นหลังไล่ระดับมาตรา

ขั้นแรก ใช้พื้นหลังไล่ระดับสีต่อไปนี้สำหรับส่วนนี้:

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

ระยะห่าง

ถัดไป ไปที่แท็บออกแบบ และเพิ่ม '100px' ลงในช่องว่างภายในด้านล่าง

แถวสองคอลัมน์แรก

สีพื้นหลังของแถว

เพิ่มแถวสองคอลัมน์แรกในส่วนใหม่นี้ และใช้ '#dddddd' เป็นสีพื้นหลัง

พื้นหลังไล่ระดับคอลัมน์ 1

คอลัมน์แรกจะต้องมีพื้นหลังไล่ระดับต่อไปนี้:

• สีแรก: #6ac922
• สีที่สอง: #b6c1b2
• คอลัมน์ 1 ประเภทการไล่ระดับสี: เชิงเส้น
• คอลัมน์ 1 ทิศทางการไล่ระดับสี: 136deg
• คอลัมน์ 1 ตำแหน่งเริ่มต้น: 23%
• คอลัมน์ 1 ตำแหน่งสิ้นสุด: 100%

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

เลื่อนลงและใช้ '#dddddd' เป็นสีพื้นหลังของคอลัมน์ 2

ขนาด

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

• ใช้ความกว้างที่กำหนดเอง: เปิดใช้งาน
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1

ระยะห่าง

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

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

กล่องเงา

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

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

โมดูลข้อความแรก

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

• แบบอักษรของข้อความ: Arvo
• ขนาดตัวอักษรของข้อความ: 34px
• สีข้อความ: #7a7a7a
• การวางแนวข้อความ: ศูนย์

โมดูลข้อความที่สอง

เพิ่มโมดูลข้อความอื่นแต่ใช้การตั้งค่าต่อไปนี้แทน:

• แบบอักษรของข้อความ: Lato Light
• การวางแนวข้อความ: ศูนย์

เปิดหมวดหมู่ย่อยการปรับขนาด ใช้ความกว้าง '75%' และเลือกการจัดตำแหน่งโมดูลตรงกลาง

สุดท้าย เพิ่มระยะขอบบนเป็น '50px'

แถวสองคอลัมน์ที่สอง

สีพื้นหลังของแถว

เพิ่มแถวสองคอลัมน์ในส่วนและเลือก '#b99bc1' เป็นสีพื้นหลัง

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

เลื่อนลงและเลือก '#dddddd' สำหรับสีพื้นหลังของคอลัมน์ 1

ขนาด

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

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

ระยะห่าง

ถัดไป ใช้ช่องว่างภายในต่อไปนี้:

• ช่องว่างบน ขวา ล่าง และซ้าย: 0px
• คอลัมน์ 1 ช่องว่างด้านบนสุด: 150px (เดสก์ท็อป), 0px (แท็บเล็ตและโทรศัพท์)
• ช่องว่างภายในคอลัมน์ 1 ด้านล่าง: 50px (เดสก์ท็อป), 0px (แท็บเล็ตและโทรศัพท์)
• คอลัมน์ 2 ช่องว่างด้านบน: 150px
• คอลัมน์ที่ 2 ช่องว่างภายใน: 150px

กล่องเงา

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

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

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

ดำเนินการต่อโดยเพิ่ม Image Module ในคอลัมน์แรก หลังจากอัปโหลดรูปภาพแล้ว ให้ทำการตั้งค่าต่อไปนี้กับหมวดหมู่ย่อยการเว้นวรรค:

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

เปิดหมวดหมู่ย่อย Box Shadow และใช้เงาของกล่องต่อไปนี้:

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

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

เพิ่ม Image Module อื่นในคอลัมน์เดียวกันและใช้ระยะขอบต่อไปนี้:

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

จากนั้นเลื่อนลงและใช้เงาของกล่องต่อไปนี้:

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

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

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

ผลลัพธ์

เดสก์ทอป

ขั้นตอนทั้งหมดในโพสต์นี้จะนำไปสู่ผลลัพธ์ต่อไปนี้บนเดสก์ท็อป:

มือถือ

และผลลัพธ์ต่อไปนี้บนมือถือ:

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

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

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

ภาพเด่นโดย Dmitry Guzhanin / shutterstock.com