วิธีสร้างเค้าโครงกริดอันน่าทึ่งด้วยโมดูลวิดีโอของ Divi (ตอนที่ 3)

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

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

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

ผลลัพธ์สุดท้ายจะออกมาเป็นอย่างไร

แนวคิดและแรงบันดาลใจ

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

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

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

การใช้การออกแบบด้วย Divi

ขั้นแรก เพิ่มส่วนปกติที่มีโครงสร้าง 1/4 1/2 1/4 (2 คอลัมน์)

ถัดไป เพิ่มโมดูลวิดีโอในคอลัมน์แรก

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

ตัวเลือกเนื้อหา

วิดีโอ MP4/URL: [ป้อน URL สำหรับวิดีโอ]
URL การซ้อนทับรูปภาพ: [อัปโหลดรูปภาพที่กำหนดเองสำหรับวิดีโอของคุณหรือสร้างโดยอัตโนมัติจากวิดีโอ]

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

จากนั้นเพิ่มโมดูลตัวแบ่งใต้โมดูลวิดีโอโดยตรง

ในการตั้งค่าตัวแบ่ง ใต้ปุ่ม ตั้งค่าความสูงของตัวแบ่งเป็น 20

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

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

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

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

ตัวเลือกเนื้อหา

สีพื้นหลัง: #333333

ตัวเลือกการออกแบบ:

ช่องว่างภายในที่กำหนดเอง: 0px บน, 0px ล่าง

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

แก้ไขการตั้งค่าแถวของคุณด้วยการอัปเดตต่อไปนี้:

ตัวเลือกเนื้อหา:

สีไล่ระดับพื้นหลัง: rgba(255,255,255,0.58) and #b684e8
ทิศทางการไล่ระดับสี: 360deg
คอลัมน์ 1 สีพื้นหลัง: rgba(0,0,0,0.69)
คอลัมน์ 2 สีพื้นหลัง: rgba(255,255,255,0.45)
คอลัมน์ 1 สีพื้นหลัง: rgba(0,0,0,0.85)

ตัวเลือกการออกแบบ

ทำให้แถวนี้เต็มความกว้าง: ใช่
ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
ความกว้างของรางน้ำ: 1
ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่
ช่องว่างภายในที่กำหนดเอง: 0px บน, 0px ล่าง
ระยะขอบที่กำหนดเอง: 0px บน, 0px ล่าง
คอลัมน์ที่ 1: ด้านบน 20px ด้านขวา 20px ด้านล่าง 20px ด้านซ้าย 20px
คอลัมน์ที่ 2: ด้านบน 20px ด้านขวา 20px ด้านล่าง 20px ด้านซ้าย 20px
คอลัมน์ที่ 3: ด้านบน 20px ด้านขวา 20px ด้านล่าง 20px ด้านซ้าย 20px

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

ตอนนี้ได้เวลาเพิ่มแถวที่สองแล้ว ไปข้างหน้าและเพิ่มแถวโครงสร้างอีก 1/4 1/2 1/4 (3 คอลัมน์) ใต้แถวแรก

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

ตอนนี้ สำหรับการตั้งค่าแถวของคุณ สิ่งที่คุณต้องอัปเดตคือ ตัวเลือกเนื้อหา ดังนี้:

พื้นหลังไล่ระดับ: ไม่มี (ลบอันที่คัดลอกมา)
คอลัมน์ 1 สีพื้นหลัง: rgba(0,0,0,0.69)
คอลัมน์ 2 สีพื้นหลัง: rgba(0,0,0,0.0) – เหมือนกับ none หรือ transparent
คอลัมน์ 3 สีพื้นหลัง: rgba(0,0,0,0.35)

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

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

ตัวเลือกเนื้อหา

ชื่อเรื่อง: [ป้อนชื่อหน้าหรือวิดีโอ]
เนื้อหา: [ป้อนเนื้อหาหรือคำอธิบายของวิดีโอหรือหน้า]

ตัวเลือกการออกแบบ

สีข้อความ: เบา
การวางแนวข้อความ: ศูนย์
แบบอักษรของส่วนหัว: PT Sans
ขนาดตัวอักษรของส่วนหัว: 52px
ระยะห่างของตัวอักษรส่วนหัว: 1px
แบบอักษรของร่างกาย: PT Sans
ขนาดตัวอักษรของร่างกาย: 20px

ในที่สุดก็ถึงเวลาสำหรับแถวสุดท้ายแล้ว แน่นอน คุณสามารถเพิ่มได้อีกหากต้องการ

ไปข้างหน้าและเพิ่มแถวโครงสร้าง 1/4 1/4 1/4 1/4 (4 คอลัมน์) ใต้แถวก่อนหน้า

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

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

ตัวเลือกเนื้อหา

คอลัมน์ 1 สีพื้นหลัง: rgba(0,0,0,0.34)
คอลัมน์ 2 สีพื้นหลัง: rgba(0,0,0,0.69)
คอลัมน์ 3 สีพื้นหลัง: rgba(0,0,0,0.34)
คอลัมน์ 4 สีพื้นหลัง: rgba(0,0,0,0.69)

ตัวเลือกการออกแบบ

คอลัมน์ที่ 4 ช่องว่างภายในที่กำหนดเอง: 20px 20px 20px 20px

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

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

ตรวจสอบเค้าโครงกริดใหม่ของคุณ...

การสร้างเวอร์ชันไลท์

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

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

ตัวเลือกเนื้อหา:

สีพื้นหลัง: rgba(0,0,0,0.12)

อัปเดตการตั้งค่าแถวทั้งหมดดังนี้:

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

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

ตัวเลือกการออกแบบ

สีข้อความ: Dark

ที่จะทำมัน! ตรวจสอบรุ่นไลท์

เปลี่ยนการออกแบบได้อย่างง่ายดายด้วยตัวเลือกพื้นหลังของส่วน

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

ดูความแตกต่างที่สามารถทำได้ด้วยการเพิ่มภาพพื้นหลังในการตั้งค่าส่วน

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

ขึ้นมา…

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

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

สนุก!