วิธีสร้างคอลัมน์ที่ทับซ้อนกันด้วยคอลัมน์ของ Divi & ตัวเลือกการแปลง

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

สำหรับการออกแบบนี้ เราจะใช้สามสี ได้แก่ สีส้มสดใส #ff8300 สีเหลืองอบอุ่น #ffd400 และการไล่ระดับสีฟ้าที่โดดเด่น #0c99c1 คุณสามารถใช้การออกแบบคอลัมน์ที่ทับซ้อนกันนี้กับโครงการเว็บไซต์ได้ในเวลาไม่นาน

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

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

1. สร้างส่วนปกติใหม่ + แถวสามคอลัมน์

สิ่งแรกที่คุณต้องทำคือสร้างส่วนปกติที่มีแถวสามคอลัมน์

ปรับระยะห่างของมาตรา

เพิ่มช่องว่างด้านบนและด้านล่างของส่วน

• แผ่นรองด้านบน: 4vw
• แผ่นรองด้านล่าง: 16vw

ปรับขนาดและระยะห่างของแถว

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

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

หลังจากนั้น แก้ไขการตั้งค่าระยะห่าง:

• ช่องว่างภายในด้านล่าง: 0px
• ช่องว่างภายในด้านซ้าย: 11vw
• ช่องว่างภายในด้านขวา: 8vw

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

เพิ่มพื้นหลังการไล่ระดับสีถัดไป:

• สไตล์พื้นหลัง: ไล่โทนสี
• สีแรก : ขาว #ffffff
• สีที่สอง: ส้ม #ff8300
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 180 องศา
• ตำแหน่งเริ่มต้น: 35%
• ตำแหน่งสุดท้าย: 35%

2. คอลัมน์สไตล์

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

คอลัมน์ 1

ขั้นตอนแรกของการจัดสไตล์คอลัมน์คือมุมโค้งมนและเงาของกล่อง:

• เส้นขอบ: 20px ที่มุมมนทั้งหมด
• Box Shadow: ตัวเลือกเงากล่องแรก
• ตำแหน่งแนวตั้งเงาของกล่อง: 0px
• ความแรงของกล่องเงาเบลอ: 80px
• เงาสี: rgba(0,0,0,0.3)
• ตำแหน่งเงาของกล่อง: ด้านนอก

* ก่อนเพิ่มการตั้งค่าการแปลงใดๆ เราจะคัดลอกและวางลักษณะรายการเหล่านี้ในคอลัมน์ที่สองและสาม

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

• แปลงแปล:
  • เดสก์ท็อป: แกน x = 3vw แกน y = 14.2vw
  • แท็บเล็ตและโทรศัพท์: แกน x = -14vw. แกน y = 16vw
• การมองเห็น: ดัชนี Z 10

คอลัมน์ 2

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

• ความแรงของกล่องเงาเบลอ: 50px

ดำเนินการต่อโดยเพิ่มค่าการเว้นวรรคแบบกำหนดเองลงในคอลัมน์ 2

• แผ่นรองด้านบน:
  • เดสก์ท็อป = 3vw
  • แท็บเล็ต + โทรศัพท์ = 5vw
• แผ่นรองด้านล่าง:
  • เดสก์ท็อป = 5vw
  • แท็บเล็ต + โทรศัพท์ = 7vw
• ช่องว่างภายในด้านซ้าย:
  • เดสก์ท็อป = 2vw
  • แท็บเล็ต + โทรศัพท์ = 4vw
• ช่องว่างภายในด้านขวา:
  • เดสก์ท็อป = 2vw
  • แท็บเล็ต + โทรศัพท์ = 4vw

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

• แปลงแปล:
  • แท็บเล็ตและโทรศัพท์: แกน x = 9vw. แกน y = 13vw
• การมองเห็น: ดัชนี Z 9

คอลัมน์ 3

ต่อแถวที่สาม! เพิ่มความแรงเงาของกล่องเงาของเงากล่องที่มีอยู่แล้ว

• ความแรงของกล่องเงาเบลอ: 50px

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

• พื้นหลัง: ไล่โทนสี
• ไล่ระดับสีหนึ่ง: #0c99c1
• ไล่ระดับสีสอง: rgba (5,0,78,0.72)
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 220 องศา
• ตำแหน่งเริ่มต้น: 0%
• ตำแหน่งสุดท้าย: 100%

ตอนนี้ มาเพิ่มระยะห่างกัน

• แผ่นรองด้านบน:
  • เดสก์ท็อป = 3vw
  • แท็บเล็ต + โทรศัพท์ = 10vw
• แผ่นรองด้านล่าง:
  • เดสก์ท็อป = 3vw
  • แท็บเล็ต + โทรศัพท์ = 7vw
• ช่องว่างภายในด้านซ้าย:
  • เดสก์ท็อป = 1.5vw
  • แท็บเล็ต + โทรศัพท์ = 10vw
• ช่องว่างภายในด้านขวา:
  • เดสก์ท็อป = 1.5vw
  • แท็บเล็ต + โทรศัพท์ = 10vw

สุดท้ายแต่ไม่ท้ายสุด เราจะสร้างคอลัมน์ที่สามทับซ้อนกับคอลัมน์ที่สองโดยเปลี่ยนการตั้งค่าการแปลงการแปลง

• แปลงแปล:
  • เดสก์ท็อป: แกน x = -10vw แกน y = 14.2vw
  • แท็บเล็ต: แกน x = -14vw. แกน y = 9vw
  • โทรศัพท์: แกน x = -14vw. แกน y = 11vw
• การมองเห็น: ดัชนี Z 9

นี่คือตัวอย่างคอลัมน์ของเราก่อนที่จะเพิ่มโมดูล

3. เพิ่มโมดูลให้กับคอลัมน์ & จัดรูปแบบให้

ตอนนี้ มาเพิ่มโมดูลในแต่ละคอลัมน์กัน!

คอลัมน์ 1

ในคอลัมน์ที่หนึ่ง เราจะแทรกโมดูลรูปภาพและโมดูลข้อความ เพิ่มโมดูลรูปภาพก่อน

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

แทรกรูปภาพของลูกค้าของคุณและจัดรูปแบบดังนี้:

• การจัดตำแหน่ง: ซ้าย
• บังคับเต็มความกว้าง: ใช่

เพิ่มเส้นขอบด้านล่างให้กับรูปภาพด้วย

• สีขอบล่าง: สีเหลือง #ffd400
• ความกว้างขอบล่าง: 9px
• สไตล์เส้นขอบ: ของแข็ง

2. เพิ่มโมดูลข้อความ

เพิ่มโมดูลข้อความใหม่ด้านล่างโมดูลรูปภาพ และใส่ชื่อและตำแหน่งของไคลเอ็นต์

• ชื่อ: หัวเรื่อง 4
• ตำแหน่ง: ย่อหน้า

หลังจากเพิ่มเนื้อหาแล้ว เราจะกำหนดรูปแบบการตั้งค่าข้อความ:

• แบบอักษรข้อความ: Nunito Sans
• น้ำหนักแบบอักษรของข้อความ: ปกติ
• การจัดตำแหน่งข้อความ: กึ่งกลาง
• สีข้อความ: ดำ #000000
• ขนาดข้อความ:
  • เดสก์ท็อป = 0.8vw
  • แท็บเล็ต = 1.8vw
  • โทรศัพท์ = 2.8vw

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

• ข้อความหัวเรื่อง: H4
• หัวข้อที่ 4 แบบอักษร: Poppins
• หัวข้อที่ 4 น้ำหนักแบบอักษร: ตัวหนา
• หัวเรื่อง 4 สีข้อความ: สีดำ #000000
• หัวเรื่อง 4 ขนาดข้อความ:
  • เดสก์ท็อป = 1vw
  • แท็บเล็ต = 3vw
  • โทรศัพท์ = 4vw

เราจะเปลี่ยนการตั้งค่าการเว้นวรรคด้วย:

• มาร์จิ้นสูงสุด:
  • เดสก์ท็อป = 1.5vw
  • แท็บเล็ต = 3vw
  • โทรศัพท์ = 7vw
• ขอบล่าง:
  • เดสก์ท็อป = 1.5vw
  • แท็บเล็ต = 3vw
  • โทรศัพท์ = 7vw

คอลัมน์ของคุณควรมีลักษณะดังนี้เมื่อคุณเสร็จสิ้นทั้งสองโมดูล:

คอลัมน์ 2

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

1. เพิ่มโมดูลข้อความ

เพิ่มโมดูลข้อความใหม่และเพิ่มคำว่า 'คำรับรอง' ลงในกล่องเนื้อหา

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

• สีพื้นหลัง: สีเหลือง #ffd400

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

• แบบอักษรของข้อความ: Poppins
• น้ำหนักแบบอักษรของข้อความ: ตัวหนา
• การจัดตำแหน่งข้อความ: กึ่งกลาง
• สีข้อความ: ขาว #ffffff
• ขนาดตัวอักษร: 23px
• ระยะขอบขวา: -50px
• ระยะขอบซ้าย: -50px
• ช่องว่างภายในด้านบน: 15px
• ช่องว่างภายใน: 15px

สุดท้ายแต่ไม่ท้ายสุด เราจะปรับการตั้งค่าการแปลงดังนี้:

• แปลงแปล:
  • เดสก์ท็อป = 17vw บนแกน x
  • แท็บเล็ต = 24vw บนแกน x, 1vw บนแกน y
  • โทรศัพท์ = 20vw บนแกน x, 1vw บนแกน y
• Transform Rotate: 32 องศาบนแกนแรก

2. เพิ่มโมดูล Blurb

เมื่อคุณทำโมดูลแรกเสร็จแล้ว ก็ถึงเวลาเพิ่มโมดูลการนำเสนอ

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

หลังจากนั้น ให้แทรกเนื้อหา เลือกไอคอน และจัดรูปแบบไอคอนดังนี้:

• ใช้ไอคอน: ใช่ ดวงดาว
• สีไอคอน: Yellow #ffd400
• ตำแหน่งไอคอน: ซ้าย
• ใช้ขนาดแบบอักษรของไอคอน: ใช่ 48px

ดำเนินการต่อโดยกำหนดสไตล์ข้อความชื่อที่ระดับ H4

• ข้อความชื่อเรื่อง: H4
• แบบอักษรของชื่อเรื่อง: Poppins
• น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
• ชื่อแบบอักษรสี: สีดำ #ffffff

• ขนาดข้อความชื่อเรื่อง:
  • เดสก์ท็อป = 1.2vw
  • แท็บเล็ต = 2.3vw
  • โทรศัพท์ = 3.3vw
• ความสูงของบรรทัดชื่อเรื่อง:
  • เดสก์ท็อป = 2vw
  • แท็บเล็ต = 3.4vw
  • โทรศัพท์ = 4.6vw

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

• แบบอักษรของข้อความ: Nunito Sans
• น้ำหนักตัวข้อความ: กึ่งหนา
• สีของตัวหนังสือ: Black #000000
• ขนาดข้อความเนื้อหา:
  • เดสก์ท็อป = 0.7vw
  • แท็บเล็ต = 1.6vw
  • โทรศัพท์ = 2.4vw
• ความสูงของเส้นร่างกาย:
  • เดสก์ท็อป = 1.6vw
  • แท็บเล็ต = 4vw
  • โทรศัพท์ = 5vw

เราต้องการให้การนำเสนอกว้างน้อยกว่าคอลัมน์ เพื่อให้สำเร็จ เราจะปรับความกว้าง ระยะขอบ และค่าช่องว่างภายใน

ขั้นแรก เราจะปรับความกว้างของการนำเสนอ:

• ความกว้างของเนื้อหา: 100%
• ความกว้าง:
  • เดสก์ท็อป = 58.4%
  • แท็บเล็ต + โทรศัพท์ = 90%

จากนั้นการตั้งค่าระยะห่าง:

• อัตรากำไรขั้นต้น: 3vw
• ระยะขอบล่าง: 3vw
• ระยะขอบขวา: -24vw
• ช่องว่างภายในด้านซ้าย: 0px
• ช่องว่างภายในด้านขวา: 4px

3. เพิ่มตัวแบ่ง

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

• ดูตัวแบ่ง: ใช่
• ตัวแบ่งสี : ดำ #oooooo
• ตัวแบ่งน้ำหนัก: 1px

เราเกือบจะอยู่ที่นั่นแล้ว! นี่คือสิ่งที่ผลลัพธ์ของเราดูเหมือนจนถึงขณะนี้:

คอลัมน์ 3

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

1. เพิ่มโมดูลข้อความ

สิ่งแรกที่เราจะเพิ่มลงในคอลัมน์นี้คือโมดูลข้อความ

เราจะเพิ่มชื่อใน H3 และข้อความย่อหน้าเล็กน้อยลงในกล่องเนื้อหา

ไปข้างหน้าและจัดรูปแบบการตั้งค่าข้อความตามลำดับ:

• แบบอักษรข้อความ: Nunito Sans
• น้ำหนักแบบอักษรของข้อความ: ปกติ
• สีแบบอักษรของข้อความ: ขาว #ffffff
• ขนาดตัวอักษรข้อความ:
  • เดสก์ท็อป = 0.8vw
  • แท็บเล็ต=- 2vw
  • โทรศัพท์ = 2.6vw
• ความสูงของบรรทัดข้อความ:
  • เดสก์ท็อป = 1.5vw
  • แท็บเล็ต = 4vw
  • โทรศัพท์ = 5vw

ทำโมดูลข้อความให้สมบูรณ์โดยกำหนดสไตล์การตั้งค่าข้อความส่วนหัว

• ข้อความหัวเรื่อง: H3
• หัวข้อ 3 แบบอักษร: Poppins
• ส่วนหัว 3 น้ำหนักแบบอักษร: ตัวหนา
• หัวเรื่อง 3 สีข้อความ: สีขาว #ffffff
• หัวเรื่อง 3 ขนาดข้อความ:
  • เดสก์ท็อป = 1.1vw
  • แท็บเล็ต = 3vw
  • โทรศัพท์ = 4vw
• ส่วนหัว 3 ความสูงของเส้น:
  • เดสก์ท็อป = 1.5vw
  • แท็บเล็ต = 3vw
  • โทรศัพท์ = 4.5vw

2. เพิ่มโมดูลตัวแบ่ง

ดำเนินการต่อโดยเพิ่มโมดูลตัวแบ่งในคอลัมน์ 3 หากต้องการจัดรูปแบบตัวแบ่ง เราจะคัดลอกและวางลักษณะตัวแบ่งจากแบบที่คุณพบในคอลัมน์ 2

เปิดการตั้งค่าตัวแบ่งและเปลี่ยนสีจากสีดำเป็นสีขาว เสริมฟองน้ำด้านบนและด้านล่างด้วย

• ตัวแบ่งสี: ขาว #ffffff
• ช่องว่างภายในด้านบน: 40px
• ช่องว่างภายในด้านล่าง: 20px

3. เพิ่มโมดูลปุ่ม

ไปยังโมดูลสุดท้ายซึ่งเป็นโมดูลปุ่ม เพิ่มสำเนาที่คุณเลือก

ไปที่แท็บออกแบบและจัดรูปแบบปุ่มดังนี้:

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม:
  • เดสก์ท็อป = 0.8vw
  • แท็บเล็ต = 2.4vw
  • โทรศัพท์ = 3vw
• สีข้อความของปุ่ม: สีขาว #ffffff

• สีพื้นหลังของปุ่ม: ไล่ระดับสี
• ไล่ระดับสีหนึ่ง: สีเหลือง #ffd400
• ไล่โทนสีที่สอง: ส้ม #ff8300
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 202deg.

• ความกว้างของขอบปุ่ม: 0px
• ระยะห่างระหว่างตัวอักษรของปุ่ม: 1px
• แบบอักษรของปุ่ม: Nunito Sans
• น้ำหนักแบบอักษรของปุ่ม: หนัก
• รูปแบบตัวอักษรของปุ่ม: TT

เพื่อให้ปุ่มดูดีในทุกขนาดหน้าจอ เราจะปรับช่องว่างภายในของปุ่มดังนี้:

เดสก์ทอป

• ช่องว่างภายในด้านบน: 1vw
• ช่องว่างภายใน: 1vw
• ช่องว่างภายในด้านขวา: 3vw
• ช่องว่างภายในด้านซ้าย: 3vw

ยาเม็ด

• ช่องว่างภายในด้านบน: 2vw
• แผ่นรองด้านล่าง: 2vw
• ช่องว่างภายในด้านขวา: 6vw
• ช่องว่างภายในด้านซ้าย: 6vw

โทรศัพท์

• ช่องว่างภายในด้านบน: 3vw
• แผ่นรองด้านล่าง: 3vw
• ช่องว่างภายในด้านขวา: 8vw
• ช่องว่างภายในด้านซ้าย: 8vw

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

ห่อ

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