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

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

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

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

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

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

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

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

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

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

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

ถัดไป เพิ่มโมดูลข้อความ ลงในคอลัมน์ ซึ่งจะใช้เป็นหัวเรื่องหรือพาดหัวสำหรับส่วนของหน้า

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

ตัวเลือกเนื้อหา
เนื้อหา: [ป้อนข้อความสำหรับชื่อ]

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

สีข้อความ: เบา
แบบอักษรของข้อความ: Arimo
ขนาดตัวอักษรของข้อความ: 56px
ระยะห่างของตัวอักษรข้อความ: 1px
ความสูงของบรรทัดข้อความ: 1em

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

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

สีไล่ระดับพื้นหลัง: #121212, #ffffff
ประเภทการไล่ระดับสี: เชิงเส้น
ทิศทางการไล่ระดับสี: 198deg
ตำแหน่งเริ่มต้น: 45%
ตำแหน่งสุดท้าย: 45%

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

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

ทำให้แถวนี้เต็มความกว้าง: ใช่
ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
ความกว้างของรางน้ำ: 4
ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่
ช่องว่างภายในแบบกำหนดเอง: 1% บน 5% ขวา 5% ล่าง 5% ซ้าย

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

ตอนนี้เพิ่มอีกหนึ่งแถวที่มีโครงสร้าง ⅔ ⅓ (2 คอลัมน์) ใต้แถวที่คุณเพิ่งสร้างขึ้นโดยตรง

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

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

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

วิดีโอ MP4/URL: [ป้อน URL ของวิดีโอของคุณ]
URL ภาพซ้อนทับ: [ป้อน URL ภาพซ้อนทับ]

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

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

อัปเดตเนื้อหาของวิดีโอเพื่อรวม URL และภาพหน้าปกที่ถูกต้อง

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

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

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

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

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

สีข้อความ: เบา

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

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

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

สีไล่ระดับพื้นหลัง: #4999c1, #121212
ประเภทการไล่ระดับสี: เชิงเส้น
ทิศทางการไล่ระดับสี: 198deg
ตำแหน่งเริ่มต้น: 45%
ตำแหน่งสุดท้าย: 45%

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

ทำให้แถวนี้เต็มความกว้าง: ใช่
ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
ความกว้างของรางน้ำ: 4
ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่
ช่องว่างภายในที่กำหนดเอง: 5% บน, 5% ขวา, 5% ด้านล่าง, 5% ซ้าย

ยอดเยี่ยม! คุณทำส่วนแรกเสร็จแล้ว เราเกือบจะเสร็จแล้ว ตรวจสอบความคืบหน้าเพื่อให้ห่างไกล

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

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

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

สีไล่ระดับพื้นหลัง: #ffffff, #121212 (สีเหล่านี้อยู่ตรงข้ามกับส่วนแรก)

ถัดไป อัปเดตการตั้งค่าโมดูลข้อความในส่วนที่ซ้ำกันดังต่อไปนี้:

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

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

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

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

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

สีไล่ระดับพื้นหลัง: #121212, #4999c1 (โดยทั่วไปคุณจะสลับลำดับของสีเพื่อให้อยู่ในลำดับที่ตรงกันข้ามกับส่วนแรก)

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

ทีนี้มาดูผลลัพธ์หลังจากเพิ่มส่วนที่สอง…

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

นี่คือสิ่งที่ดูเหมือนหลังจากเพิ่มส่วนที่สาม:

แค่นั้นแหละ! ทั้งหมดเสร็จสิ้น

ตอบสนอง?

เลย์เอาต์นี้ดูดีกว่าบนมือถือจริงๆ โดยไม่ต้องดัดแปลงใดๆ ตรวจสอบออก!

การปรับแต่งเพิ่มเติม

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

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

คุณยังสามารถเพิ่ม Video Slider Module ลงในตารางที่คอลัมน์ด้านซ้าย

ขึ้นมา…

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

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

สนุก!