วิธีสร้างไทม์ไลน์ด้วยโมดูล Blurb ของ Divi

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

ผลลัพธ์

ลักษณะที่ปรากฏของไทม์ไลน์นั้นทำได้ด้วยองค์ประกอบการออกแบบสององค์ประกอบ เส้นที่ข้ามทั้งสามโมดูล Blurb และตัวเลข เวอร์ชันเดสก์ท็อปมีลักษณะดังนี้:

และรุ่นมือถือมีลักษณะดังนี้:

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

วิธีสร้างไทม์ไลน์ด้วยโมดูล Blurb ของ Divi

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

เพิ่มมาตราฐาน

ส่วนสีพื้นหลัง

เริ่มต้นด้วยการเพิ่มส่วนมาตรฐานใหม่และใช้ 'rgba(0,0,0,0.12)' เป็นสีพื้นหลัง

ส่วนเสริม

ไปที่แท็บออกแบบและใช้ช่องว่างภายในด้านบนขนาด '300px'

เพิ่มแถวสามคอลัมน์ (ไทม์ไลน์)

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

เมื่อคุณสร้างส่วนแล้ว ให้เพิ่มแถวสามคอลัมน์ลงไป ภายในแท็บเนื้อหาของแถวนั้น ให้ใช้ '#e09900' เป็นสีพื้นหลังของคอลัมน์ 1 '#0c71c3' เป็นสีพื้นหลังของคอลัมน์ 2 และ '#8300e9' เป็นสีพื้นหลังของคอลัมน์ 3

ขนาด

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

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

ระยะขอบและช่องว่างภายในที่กำหนดเอง

ถัดไป เพิ่ม Custom Padding และ Custom Margin ต่อไปนี้ในแถว:

• ช่องว่างภายในด้านบน: 1px
• ช่องว่างภายในด้านล่าง: 0px
• ระยะขอบด้านล่าง: -200px

และเพิ่ม '3px' ลงในช่องว่างด้านบนและด้านล่างของแต่ละคอลัมน์

ปิดการใช้งานบนแท็บเล็ตและโทรศัพท์

สุดท้าย ปิดการใช้งานแถวทั้งบนแท็บเล็ตและโทรศัพท์

เพิ่มแถวสามคอลัมน์อื่น (โมดูล Blurb)

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

เมื่อคุณสร้างแถวสามคอลัมน์แรกแล้ว คุณสามารถสร้างแถวที่สองที่อยู่ด้านล่างแถวนั้นได้ (พวกมันใช้ส่วนเดียวกัน) แต่ละคอลัมน์ต้องมีพื้นหลังแบบไล่ระดับสีที่มีการตั้งค่าเหมือนกัน แต่มีสีแรกต่างกัน:

• สีแรก: #e09900 (คอลัมน์ 1), #0c71c3 (คอลัมน์ 2), #8300e9 (คอลัมน์ 3)
• สีที่สอง: rgba(255, 255, 255, 0)
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 180deg
• ตำแหน่งเริ่มต้น: 73%
• ตำแหน่งสุดท้าย: 92%

ทำให้แถวเต็มความกว้าง

จากนั้นไปที่แท็บ Design และเปิดใช้งานตัวเลือก 'Make This Row Fullwidth'

แถวที่กำหนดเอง Padding

เปิดหมวดหมู่ย่อยระยะห่างและใช้ Custom Padding & Custom Margin ต่อไปนี้สำหรับแถว:

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านขวา: 60px
• ช่องว่างภายในด้านล่าง: 100px
• ช่องว่างภายในด้านซ้าย: 60px
• อัตรากำไรขั้นต้น: -100px

เพิ่ม '5px' ลงในช่องว่างด้านบนสุดของแต่ละคอลัมน์ด้วย

โมดูล Blurb

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

เลื่อนลงไปที่แท็บเดิมและใช้ '#f4f4f4' เป็นสีพื้นหลัง

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

• ไอคอนสี: #e09900
• ตำแหน่งรูปภาพ/ไอคอน: ซ้าย
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 50px

ภายในหมวดข้อความย่อย ตรวจสอบให้แน่ใจว่าได้เปิดใช้งานการวางแนวข้อความทางด้านซ้าย

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

• แบบอักษรของส่วนหัว: Crete Round
• การจัดตำแหน่งข้อความส่วนหัว: ซ้าย
• ขนาดตัวอักษรของส่วนหัว: 32px
• ความสูงของบรรทัดส่วนหัว: 1em

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

• การจัดตำแหน่งข้อความเนื้อหา: ซ้าย
• ขนาดตัวอักษรของร่างกาย: 12px
• ความสูงของเส้นร่างกาย: 1.7em

เราจะใช้เส้นขอบที่มีการตั้งค่าต่อไปนี้เช่นกัน:

• ใช้เส้นขอบ: ใช่
• สีเส้นขอบ: #000000
• ความกว้างของเส้นขอบ: 2px
• สไตล์เส้นขอบ: จุด

ถัดไป เปิดหมวดหมู่ย่อย Sizing และใช้ '279px' สำหรับ Content Width และ '100%' สำหรับ Width

สุดท้าย เพิ่ม '30px' ที่ช่องว่างด้านบน ขวา ล่าง และซ้าย

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

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

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

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

• ขนาดตัวอักษรของข้อความ: 21px
• สีข้อความ: #FFFFFF
• ความสูงของบรรทัดข้อความ: 1.7em
• การวางแนวข้อความ: ศูนย์

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

สุดท้าย ใช้ระยะขอบบนเป็น '-100px' และเพิ่ม '50px' ที่ช่องว่างด้านบนและด้านล่าง

โคลน Blurb & โมดูลข้อความ

เมื่อคุณทำคอลัมน์แรกเสร็จแล้ว คุณสามารถโคลนทั้งสองโมดูลและวางไว้ในอีกสองคอลัมน์ที่เหลือได้ สิ่งเดียวที่คุณจะต้องเปลี่ยนคือไอคอนการนำเสนอ, สีประกาศ และสีไล่ระดับสีแรกของโมดูลข้อความเป็น '#0c71c3' สำหรับคอลัมน์ที่สองและ '#8300e9' สำหรับคอลัมน์สุดท้าย

ปิดการใช้งานบนแท็บเล็ตและโทรศัพท์

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

โคลนแถวสามคอลัมน์ (แท็บเล็ตและโทรศัพท์)

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

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

แถวบนแท็บเล็ตและโทรศัพท์จะต้องมีพื้นหลังแบบไล่ระดับสีต่อไปนี้:

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

แถวแพดดิ้ง

ลบช่องว่างภายในและระยะขอบแบบกำหนดเองทั้งหมดที่ใช้ในเวอร์ชันเดสก์ท็อปและเพิ่ม '100px' ลงในช่องว่างด้านบนสุด

ปิดการใช้งานบนเดสก์ท็อป

สุดท้ายนี้ แทนที่จะปิดการใช้งานแถวบนโทรศัพท์และแท็บเล็ต ให้ปิดการใช้งานบนเดสก์ท็อปแทน

ผลลัพธ์

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

และผลลัพธ์ต่อไปนี้บนแท็บเล็ตและโทรศัพท์:

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

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

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