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

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

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

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

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

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

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

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

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

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

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

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

ถัดไป เพิ่มโมดูลวิดีโอในคอลัมน์ด้านซ้าย

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

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

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

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

เล่นไอคอนสี: rgba(255,255,255,0.87)

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

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

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

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

ชื่อเรื่อง: [ป้อนชื่อวิดีโอ]
เนื้อหา: [ป้อนคำอธิบายของวิดีโอ]
ลิงค์: [คุณสามารถป้อน URL ลิงค์ไปยังหน้าอื่นได้หากต้องการ]
ใช้ไอคอน: ใช่
ไอคอน: [เลือกไอคอน]

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

ไอคอนสี: #666666
สีข้อความ: เบา
การวางแนวข้อความ: ศูนย์
แบบอักษรส่วนหัว: Roboto
ขนาดตัวอักษรของส่วนหัว: 52px
ระยะห่างของตัวอักษรส่วนหัว: 1px
แบบอักษรของร่างกาย: เปิด Sans
ขนาดตัวอักษรของร่างกาย: 20px
สีข้อความ: #dddddd
Custom Padding บนเดสก์ท็อป: 5% ด้านบน (คุณอาจต้องปรับค่านี้ขึ้นอยู่กับจำนวนข้อความที่คุณมีในคำอธิบายของคุณ)
Custom Padding บนแท็บเล็ตและสมาร์ทโฟน: 20px บน, 20px ด้านล่าง

ตัวเลือกขั้นสูง

แอนิเมชั่นรูปภาพ/ไอคอน: จากขวาไปซ้าย (แอนิเมชั่นนี้รวมกับไอคอนลูกศรจะดึงความสนใจไปที่วิดีโอทางด้านซ้ายมากขึ้น

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

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

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

ภาพพื้นหลัง: [ป้อนภาพพื้นหลัง (ของฉันคือ 2000 x 2200)]

ใช้เอฟเฟกต์พารัลแลกซ์: ใช่
วิธีพารัลแลกซ์: ทรูพารัลแลกซ์

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

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

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

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

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

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

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

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

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

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

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

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

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

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

สำหรับตัวอย่างนี้ ฉันได้เพิ่มอีกสองแถวทำให้รวมเป็นสี่แถว ตรวจสอบผลลัพธ์สุดท้าย

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

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

สำหรับการแก้ไขเหล่านี้ การใช้มุมมองโครงร่างอาจง่ายกว่าเล็กน้อย

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

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

ภาพพื้นหลัง: [ใส่ภาพพื้นหลังสีอ่อน]

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

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

คอลัมน์ 2 สีพื้นหลัง: rgba(255,255,255,0.68)

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

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

ไอคอนสี: #333333
สีข้อความ: Dark
สีข้อความส่วนหัว: #444444
แบบอักษรของร่างกาย: Roboto
สีข้อความ: #666666

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

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

คอลัมน์ 1 สีพื้นหลัง: rgba(255,255,255,0.45)

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

แค่นั้นแหละ! ตรวจสอบผลลัพธ์สุดท้าย

ตอบสนอง?

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

ขึ้นมา…

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

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

ไชโย!