วิธีเปลี่ยนตัวแบ่งแนวนอนเป็นเส้นแนวตั้งด้วย Divi

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

ในสัปดาห์นี้ โดยเป็นส่วนหนึ่งของการริเริ่มการออกแบบ Divi ที่กำลังดำเนินอยู่ เราจะแสดงวิธีเปลี่ยนโมดูลตัวแบ่งแนวนอนมาตรฐานที่เราทุกคนรู้จักให้เป็นแนวตั้งโดยใช้ Divi's Moving Company Layout Pack เป็นตัวอย่าง แนวทางนี้จะเป็นประโยชน์อย่างยิ่งหากคุณกำลังพยายามสร้างไทม์ไลน์บนหน้าเว็บของคุณ เป็นการดีที่จะใช้สำหรับส่วน 'วิธีการทำงาน' และอื่นๆ อีกมากมาย หลังจากตั้งค่าตัวแบ่งแนวตั้ง เราจะเพิ่มโมดูล Blurb เพื่อสร้างเอฟเฟกต์ไทม์ไลน์ บทช่วยสอนนี้ไม่ต้องใช้โค้ด CSS และอิงตามตัวเลือกในตัวของ Divi เท่านั้น

ไปกันเถอะ!

ดูตัวอย่าง

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

มาเริ่มสร้างกันเลย: เพิ่มหน้าใหม่ & อัพโหลดหน้า Landing Page ของแพ็คเลย์เอาต์การย้ายบริษัท

เพิ่มหน้าใหม่และสลับไปยัง Visual Builder

เริ่มต้นด้วยการเพิ่มหน้าใหม่ เพิ่มชื่อเรื่อง และเปลี่ยนไปใช้ Visual Builder

เลือกเลย์เอาต์ที่สร้างไว้ล่วงหน้า

เมื่อคุณทำเช่นนั้น คุณจะมีความสามารถในการสร้างตั้งแต่เริ่มต้น เลือกเค้าโครงที่สร้างไว้ล่วงหน้า หรือโคลนหน้าที่มีอยู่ เราจะใช้หน้า Landing Page ของ Moving Company Layout Pack เพื่อสร้างผลลัพธ์สุดท้าย ดังนั้นไปข้างหน้าและเรียกดูเค้าโครงที่สร้างไว้ล่วงหน้า

เลือกหน้า Landing Page ของชุดเค้าโครงบริษัทขนย้าย

เลื่อนลงมาที่เลย์เอาต์ที่สร้างไว้ล่วงหน้าจนกว่าคุณจะเจอ Moving Company Layout Pack และอัปโหลดแลนดิ้งเพจไปยังเพจของคุณ

เริ่มสร้างเส้นแบ่งเวลาแนวตั้ง

ค้นหาส่วนไทม์ไลน์

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

เพิ่มส่วนมาตรฐานใหม่ด้านล่าง

ด้านล่างส่วนนี้ ให้เพิ่มส่วนมาตรฐาน

วางแถว 'วิธีการทำงาน' ในส่วนใหม่

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

เพิ่มแถวใหม่

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

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

ระยะห่าง

ก่อนเพิ่มโมดูลใดๆ ให้เปิดการตั้งค่าแถวของคุณและเพิ่ม '60px' ที่ระยะขอบด้านบน

เพิ่มโมดูลตัวแบ่งในคอลัมน์ 1

ซ่อนตัวแบ่ง

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

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

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

• สี 1: #e0aa25
• สี 2: #c11000

ขนาด

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

ระยะห่าง

ในการยืดโมดูลตัวแบ่งในแนวตั้ง เราจะเพิ่ม '480px' ลงในช่องว่างด้านบนและด้านล่างแบบกำหนดเองของโมดูลตัวแบ่งของเรา และ voila เรามีตัวแบ่งแนวตั้งของเราแล้ว!

เพิ่มโมดูล Blurb ของส่วนก่อนหน้าไปยังคอลัมน์ 1

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

แก้ไขโมดูล Blurb #1

เพิ่มสีพื้นหลัง

เราจะใช้หนึ่งในคุณสมบัติด้านประสิทธิภาพของ Divi เพื่อเพิ่มความเร็วให้กับกระบวนการในขณะที่แก้ไข Blurb Modules ของเรา เราจะนำการเปลี่ยนแปลงทั้งหมดไปใช้กับโมดูล Blurb แรก จากนั้นเราจะคัดลอกสไตล์ของโมดูลและเพิ่มไปยังโมดูล Blurb อื่นๆ ในคลิกเดียว เปิดโมดูล Blurb แรกของคุณและเพิ่ม 'rgba(255,255,255,0.73)' เป็นสีพื้นหลัง

เปลี่ยนขนาดตัวอักษรของไอคอน

สิ่งต่อไปที่คุณต้องทำคือเปลี่ยนขนาดแบบอักษรของไอคอนเป็น '65px'

ลบระยะห่าง

นอกจากนี้ เราจะลบระยะขอบทั้งหมดในการตั้งค่าการเว้นวรรคด้วย ในภายหลัง เราจะเพิ่มระยะขอบให้กับโมดูล Blurb แต่ละรายการเนื่องจากค่าต่างกัน

คัดลอกรูปแบบโมดูล Blurb และเพิ่มไปยังโมดูล Blurb ที่เหลืออยู่

คัดลอกรูปแบบโมดูล Blurb

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

วางรูปแบบโมดูลบนโมดูล Blurb ที่เหลืออยู่

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

โมดูลการเว้นระยะห่าง

โมดูล Blurb #1

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

โมดูล Blurb #3

เปิดโมดูล Blurb ล่าสุดของคุณ และเพิ่ม '150px' ที่ระยะขอบด้านล่าง

วางโมดูลรูปภาพในคอลัมน์ 2

ค้นหาภาพ

ตอนนี้เราไปต่อที่คอลัมน์ 2 ได้แล้ว! โมดูลเดียวที่เราต้องการคือโมดูลรูปภาพ เรากำลังนำเพจที่มีอยู่แล้วในเพจของเรากลับมาใช้ใหม่ ดังนั้น ไปข้างหน้าและค้นหามัน:

วางรูปภาพในคอลัมน์ 2

วางแล้วลากไปที่คอลัมน์ที่สองของคุณถัดไป

เปลี่ยนระยะห่าง

ในการตั้งศูนย์ในแนวตั้ง เราจะเพิ่มระยะขอบลงไป:

• ขอบบน: 300px (เดสก์ท็อป), 30px (แท็บเล็ตและโทรศัพท์)
• ขอบล่าง: 50px (แท็บเล็ตและโทรศัพท์)

ลบส่วนก่อนหน้า & ถัดไป

เราสร้างส่วนของเราเสร็จแล้ว! สิ่งสุดท้ายที่ต้องทำคือลบส่วนที่เกินออก

ดูตัวอย่าง

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

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

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