การสร้างส่วน "กระบวนการของเรา" ด้วยโครงสร้างคอลัมน์ใหม่ของ Divi

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

ไปกันเถอะ!

ดูตัวอย่าง

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

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

สีพื้นหลัง

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

• สีพื้นหลัง: #3a1dad

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 170px
• ช่องว่างภายในด้านล่าง: 170px

ทัศนวิสัย

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

เพิ่มแถว #1

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

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

เพิ่มพื้นหลังไล่ระดับให้กับคอลัมน์ 1, 3 & 5

ในการสร้างเอฟเฟกต์โฮเวอร์ที่ดี เราจะเพิ่มพื้นหลังแบบไล่ระดับให้กับคอลัมน์ 1, 3 และ 5 คอลัมน์เหล่านี้เป็นคอลัมน์ที่แต่ละคอลัมน์จะมีขั้นตอนของกระบวนการ เราจะใช้สองคอลัมน์ที่เหลือเพื่อเชื่อมต่อขั้นตอนต่างๆ เข้าด้วยกัน แต่ละคอลัมน์ในสามคอลัมน์ที่เรากล่าวถึงจะต้องมีพื้นหลังไล่ระดับสีเหมือนกัน:

• สี 1: #580cf2
• สี 2: rgba(41,196,169,0)
• คอลัมน์ 1 ประเภทการไล่ระดับสี: เรเดียล
• คอลัมน์ 1 ตำแหน่งเริ่มต้น: 38%
• คอลัมน์ 1 ตำแหน่งสิ้นสุด: 38%

ขนาด

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

• ทำให้แถวนี้เต็มความกว้าง: ใช่

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px
• คอลัมน์ 1 ช่องว่างภายในด้านบน: 20px
• ช่องว่างภายในคอลัมน์ 1 ด้านล่าง: 20px
• คอลัมน์ 3 ช่องว่างภายในด้านบน: 20px
• คอลัมน์ 3 ช่องว่างภายใน: 20px
• คอลัมน์ 5 ช่องว่างภายในด้านบน: 20px
• คอลัมน์ 5 ช่องว่างภายใน: 20px

โคลนแถว #1 Twice

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

แก้ไขรายการซ้ำครั้งแรก

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

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

ลบการเว้นวรรคคอลัมน์

ในทำนองเดียวกัน ให้ลบการเติมแบบกำหนดเองของคอลัมน์ทั้งหมดที่ใช้กับคอลัมน์ 1, 3 และ 5

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

เพิ่ม Blurb Module ไปยังคอลัมน์แรกของแถว #1

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

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

เลือกไอคอน

เรายังใช้ไอคอนต่อไปนี้ซึ่งระบุตำแหน่งที่จะมองหาขั้นตอนต่อไป:

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

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

• สีพื้นหลัง: #3a1dad

โฮเวอร์สีพื้นหลัง

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

• สีพื้นหลัง: rgba(255,255,255,0)

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

ดำเนินการต่อโดยไปที่การตั้งค่าไอคอนและทำการเปลี่ยนแปลงบางอย่าง

• ไอคอนสี: #9d8ad8
• ตำแหน่งไอคอน: Top
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 80px

การตั้งค่าไอคอนโฮเวอร์

ใช้สีไอคอนและขนาดแบบอักษรอื่นบนโฮเวอร์

• สีไอคอน: #ffffff
• ขนาดตัวอักษรของไอคอน: 120px

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

ถัดไป ไปที่การตั้งค่าข้อความและทำการเปลี่ยนแปลงบางอย่าง

• การวางแนวข้อความ: ศูนย์
• สีข้อความ: เบา

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

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

• น้ำหนักแบบอักษรของชื่อเรื่อง: Ultra Bold
• รูปแบบตัวอักษรของชื่อเรื่อง: ตัวพิมพ์ใหญ่

การเปลี่ยนผ่าน

เพื่อสร้างการเปลี่ยนแปลงที่ราบรื่น เราจะเพิ่มระยะเวลาการเปลี่ยนแปลง

• ระยะเวลาการเปลี่ยนภาพ: 500ms

โคลนโมดูล Blurb & วางในคอลัมน์ที่ไม่สม่ำเสมอ (ทั้งแถว #1 & #3)

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

เปลี่ยนเนื้อหาและไอคอนของแต่ละรายการซ้ำ

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

เพิ่มตัวแบ่งแนวนอนในคอลัมน์ที่สองของแถว #1

ทัศนวิสัย

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

• แสดงตัวแบ่ง: ใช่

ตัวแบ่งสี

เปลี่ยนสีตัวแบ่งถัดไป

• สี: #dddddd

ระยะห่าง

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

• ขอบบน: 150px
• ระยะขอบซ้าย: -60px
• ขวา: -60px

โคลนตัวแบ่งแนวนอน & วางในคอลัมน์คู่ (ทั้งแถว #1 & #3)

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

เพิ่มตัวแบ่งแนวตั้งในคอลัมน์แรกของแถว #2

ทัศนวิสัย

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

• แสดงตัวแบ่ง: ไม่

สีพื้นหลัง

เพิ่มสีพื้นหลังให้กับโมดูลถัดไป

• สีพื้นหลัง: #dddddd

ขนาด

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

• ความกว้าง: 0.5%
• การจัดตำแหน่งโมดูล: ศูนย์

ระยะห่าง

ในการเพิ่มความสูงของตัวแบ่งแนวตั้ง เราจะใช้ค่าระยะห่างแบบกำหนดเองบางค่า

• ขอบบน: 20px
• ช่องว่างภายในด้านบน: 120px
• ช่องว่างภายในด้านล่าง: 120px

โคลนตัวแบ่งแนวตั้ง & วางซ้ำในคอลัมน์ 5 ของแถว #2

ลอกแบบตัวแบ่งแนวตั้งที่คุณสร้างและวางไว้ในคอลัมน์สุดท้ายของแถวที่สอง

เพิ่มโมดูลข้อความชื่อเรื่องลงในคอลัมน์ 3 ของแถว #2

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

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

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

ไปที่การตั้งค่าข้อความหัวข้อและทำการเปลี่ยนแปลงลักษณะที่ปรากฏของชื่อของคุณ

• หัวข้อที่ 2 น้ำหนักแบบอักษร: Ultra Bold
• การจัดแนวข้อความหัวเรื่อง 2: Center
• หัวเรื่อง 2 สีข้อความ: rgba(255,255,255,0.09)
• ขนาดข้อความของหัวเรื่อง 2: 220px (เดสก์ท็อป), 150px (แท็บเล็ต), 100px (โทรศัพท์)
• หัวเรื่อง 2 ระยะห่างตัวอักษร: -50px (เดสก์ท็อป), -30px (แท็บเล็ต), -25px (โทรศัพท์)

ระยะห่าง

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

• ขอบบน: 30px
• ระยะขอบซ้าย: -800px
• ระยะขอบขวา: -800px

สร้างทางเลือกสำหรับแท็บเล็ตและโทรศัพท์

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

สีพื้นหลัง

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

• สีพื้นหลัง: #3a1dad

ระยะห่าง

เพิ่มค่าการเติมด้านบนและด้านล่างที่กำหนดเอง

• ช่องว่างภายในด้านบน: 170px
• ช่องว่างภายในด้านล่าง: 170px

ทัศนวิสัย

และซ่อนส่วนบนเดสก์ท็อปในการตั้งค่าการมองเห็น

เพิ่มแถว #1

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

แทนที่จะใช้แถว 6 คอลัมน์ ดังที่เราทำกับส่วนเดสก์ท็อป เราใช้คอลัมน์เดียวเท่านั้น

โมดูลข้อความชื่อโคลนของส่วนก่อนหน้า & วางในแถว #1

โคลนโมดูลข้อความชื่อเรื่องของส่วนเดสก์ท็อปของคุณ และวางสำเนาในแถวใหม่ของคุณ

ลบระยะห่าง

ดำเนินการต่อโดยลบการตั้งค่าระยะห่างของโมดูลนี้

เพิ่มแถว #2

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

จากนั้น ให้เพิ่มอีกแถวที่มีหนึ่งคอลัมน์

Clone Blurb Module ของส่วนก่อนหน้า & วางในแถว #2

โคลนขั้นตอนใดขั้นตอนหนึ่งของโมดูล Blurb ในส่วนเดสก์ท็อป และวางสำเนาในแถวใหม่ของคุณ

เปลี่ยนไอคอน

เปลี่ยนไอคอนเป็นไอคอนที่ชี้ลง

เปลี่ยนขนาด

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

• ความกว้าง: 39% (แท็บเล็ต), 59% (โทรศัพท์)
• การจัดตำแหน่งโมดูล: ศูนย์

โคลนตัวแบ่งแนวตั้งของส่วนก่อนหน้า & วางในแถว #2

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

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

เปลี่ยนการตั้งค่าระยะห่างของโมดูลนี้เพื่อลดความสูง

• ช่องว่างภายในด้านบน: 50px
• ช่องว่างภายในด้านล่าง: 50px

โคลนทั้งสองโมดูลได้หลายครั้งที่คุณต้องการ

คุณสามารถโคลนทั้งสองโมดูลได้มากเท่าที่คุณต้องการเพื่อแสดงขั้นตอนกระบวนการทั้งหมดบนขนาดหน้าจอที่เล็กกว่า

ดูตัวอย่าง

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

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

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