ดาวน์โหลดส่วนไทม์ไลน์ฟรีที่สร้างด้วยตัวเลือกการแปลงของ Divi

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

ไปกันเถอะ!

ดูตัวอย่าง

ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน มาดูผลลัพธ์คร่าวๆ ของหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

ดาวน์โหลดเค้าโครงส่วนไทม์ไลน์ได้ฟรี

ในการวางเค้าโครงส่วนของไทม์ไลน์ฟรี ก่อนอื่นคุณต้องดาวน์โหลดโดยใช้ปุ่มด้านล่าง ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

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

ดาวน์โหลด

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

มาเริ่มสร้างใหม่กันเถอะ!

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

เพิ่มมาตราใหม่

ระยะห่าง

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

• แผ่นรองด้านบน: 12vw
• ช่องว่างภายใน: 0vw

เพิ่มแถว #1

โครงสร้างคอลัมน์

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

ขนาด

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

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

ทัศนวิสัย

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

เพิ่มโมดูลรูปภาพ

อัพโหลดภาพประกอบ

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

ขนาด

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

• บังคับเต็มความกว้าง: ใช่

เพิ่มแถว #2

โครงสร้างคอลัมน์

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

ขนาด

โดยไม่ต้องเพิ่มโมดูลใดๆ ให้เปิดการตั้งค่าแถวและอนุญาตให้แถวใช้ความกว้างทั้งหมดของหน้าจอ

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

ระยะห่าง

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

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

เพิ่มโมดูล Blurb ลงในคอลัมน์ 1

เพิ่มเนื้อหา

ได้เวลาเริ่มเพิ่มโมดูลแล้ว! เพิ่มโมดูล Blurb ในคอลัมน์ 1 ป้อนเนื้อหาที่คุณต้องการ

เลือกไอคอน

ดำเนินการต่อโดยเลือกไอคอนที่คุณต้องการ

พื้นหลังไล่โทนสี

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

• สี 1: #a5c4ff
• สี 2: #ffffff
• ตำแหน่งเริ่มต้น: 40%
• ตำแหน่งสุดท้าย: 40%

การตั้งค่าไอคอน

จากนั้นไปที่แท็บออกแบบและเปลี่ยนการตั้งค่าไอคอน

• สีไอคอน: #ffffff
• ตำแหน่งไอคอน: Top
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 5vw (เดสก์ท็อป), 17vw (แท็บเล็ต), 18vw (โทรศัพท์)

การตั้งค่าข้อความชื่อเรื่อง

ไปที่การตั้งค่าข้อความชื่อและแก้ไขตัวเลือกตามนั้น:

• แบบอักษรของชื่อเรื่อง: Didact Gothic
• น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
• การจัดตำแหน่งข้อความชื่อเรื่อง: Center
• ขนาดข้อความชื่อเรื่อง: 1.1vw (เดสก์ท็อป), 2.7vw (แท็บเล็ต), 4vw (โทรศัพท์)
• ความสูงของบรรทัดชื่อเรื่อง: 2.8em

การตั้งค่าข้อความเนื้อหา

ทำสิ่งเดียวกันสำหรับการตั้งค่าข้อความเนื้อหา

• แบบอักษรของร่างกาย: เปิด Sans
• การจัดตำแหน่งข้อความเนื้อหา: กึ่งกลาง
• ขนาดตัวอักษร: 0.7vw (เดสก์ท็อป), 1.5vw (แท็บเล็ต), 2.1vw (โทรศัพท์)
• ความสูงของเส้นร่างกาย: 2em

ระยะห่าง

นอกจากนี้ เรายังเพิ่มค่าระยะขอบและช่องว่างภายในที่กำหนดเอง ซึ่งเราจะปรับแต่งตามขนาดหน้าจอต่างๆ

• ระยะขอบซ้าย: 3vw
• ระยะขอบขวา: 3vw
• ขอบล่าง: 5vw (แท็บเล็ต), 7vw (โทรศัพท์)
• Padding ด้านบน: 2vw (เดสก์ท็อป), 6vw (แท็บเล็ตและโทรศัพท์)
• Padding ด้านล่าง: 2vw (เดสก์ท็อป), 6vw (แท็บเล็ตและโทรศัพท์)
• Padding ซ้าย: 3vw (เดสก์ท็อป), 9vw (แท็บเล็ตและโทรศัพท์)
• ช่องว่างภายในด้านขวา: 3vw (เดสก์ท็อป), 9vw (แท็บเล็ตและโทรศัพท์)

ชายแดน

ไปที่การตั้งค่าเส้นขอบและเพิ่ม '20px' ในแต่ละมุม

กล่องเงา

สุดท้ายแต่ไม่ท้ายสุด ให้สร้างความลึกบนหน้าโดยเพิ่มเงาของกล่องที่ละเอียดอ่อนลงในโมดูล Blurb

• ความแรงของกล่องเงาเบลอ: 80px
• เงาสี: rgba(0,0,0,0.1)

โคลนโมดูล Blurb สามครั้ง & วางซ้ำในคอลัมน์ที่เหลือ

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

เปลี่ยนพื้นหลังไล่ระดับของซ้ำ #1

เปิดสำเนาแรก (โมดูล Blurb ในคอลัมน์ 2) และปรับเปลี่ยนสีแรกของพื้นหลังไล่ระดับสี

• สี 1: #ffa5ae

เปลี่ยนพื้นหลังไล่ระดับของซ้ำ #2

ทำสิ่งเดียวกันสำหรับ Blurb Module ในคอลัมน์ 3

• สี 1: #f7e3a0

เปลี่ยนพื้นหลังไล่ระดับของซ้ำ #3

และแก้ไขพื้นหลังการไล่ระดับสีของ Blurb Module ล่าสุดด้วย

• สี 1: #caa5ff

เพิ่มการตั้งค่าการแปลงไปยังโมดูล Blurb

เพิ่ม Transform Translate to Blurb Module #1

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

• ด้านล่าง: 2vw (เดสก์ท็อป), 0vw (แท็บเล็ตและโทรศัพท์)
• ขวา: -106vw (เดสก์ท็อป), 0vw (แท็บเล็ต & โทรศัพท์)

เพิ่ม Transform Translate to Blurb Module #2

ไปที่โมดูล Blurb ที่สองและเปลี่ยนค่าการแปลการแปลงตามนั้น:

• ล่าง: 16.6vw (ล่าง), 0vw (แท็บเล็ตและโทรศัพท์)
• ขวา: -78vw (ขวา), 0vw (แท็บเล็ต & โทรศัพท์)

เพิ่ม Transform Translate to Blurb Module #3

เปิดโมดูล Blurb ในคอลัมน์ 3 ถัดไป และใช้ค่าการแปลการแปลงต่อไปนี้:

• ด้านล่าง: 17vw (เดสก์ท็อป), 0vw (แท็บเล็ตและโทรศัพท์)
• ขวา: -46vw (เดสก์ท็อป), 0vw (แท็บเล็ต & โทรศัพท์)

เพิ่ม Transform Translate to Blurb Module #4

ทำสิ่งเดียวกันสำหรับโมดูล Blurb ล่าสุด โดยใช้ค่าต่อไปนี้:

• ด้านล่าง: -66vw (เดสก์ท็อป), 0vw (แท็บเล็ตและโทรศัพท์)
• ขวา: -24vw (เดสก์ท็อป), 0vw (แท็บเล็ต & โทรศัพท์)

เพิ่มขอบด้านล่างเชิงลบให้กับแถว #2

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

• ระยะขอบล่าง: -15vw (เดสก์ท็อป), 0vw (แท็บเล็ตและโทรศัพท์)

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ขั้นสุดท้ายกัน

เดสก์ทอป

มือถือ

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

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