วิธีออกแบบส่วนฮีโร่หลายคอลัมน์ที่ไม่ซ้ำใครด้วยส่วนพิเศษของ Divi

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

ไปกันเถอะ!

ดูตัวอย่าง

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

ดาวน์โหลดเค้าโครงส่วนฮีโร่แบบหลายคอลัมน์ได้ฟรี

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

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

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

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

ดาวน์โหลด

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

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

เพิ่มส่วนพิเศษใหม่

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

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

สีพื้นหลัง

เปิดการตั้งค่าส่วนและเพิ่มสีพื้นหลังสีขาว

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

ขนาด

เรากำลังตรวจสอบให้แน่ใจว่าไม่มีช่องว่างระหว่างคอลัมน์ของส่วนต่างๆ ด้วยการเปลี่ยนการตั้งค่าการปรับขนาด

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

ระยะห่าง

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

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

เพิ่มแถว #1

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

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

ระยะห่าง

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

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

เพิ่มโมดูลข้อความลงในคอลัมน์

เพิ่มย่อหน้า & เนื้อหา H1

ได้เวลาเริ่มเพิ่มโมดูลแล้ว! เพิ่มโมดูลข้อความใหม่พร้อมเนื้อหาย่อหน้าและ H1 ที่คุณเลือก

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

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

• แบบอักษรข้อความ: เปิด Sans
• ขนาดตัวอักษร: 0.9vw (เดสก์ท็อป), 1.6vw (แท็บเล็ต), 2.2vw (โทรศัพท์)

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

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

• แบบอักษรของหัวเรื่อง: เปิด Sans
• น้ำหนักแบบอักษรของหัวเรื่อง: กึ่งหนา
• รูปแบบตัวอักษรของหัวเรื่อง: ตัวพิมพ์ใหญ่
• หัวเรื่องข้อความสี: #000000
• ขนาดข้อความหัวเรื่อง: 4vw
• ความสูงของบรรทัดหัวเรื่อง: 1.1em

ระยะห่าง

เพิ่มค่าช่องว่างภายในที่กำหนดเองด้วย

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

เพิ่มแถว #2

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

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

ระยะห่าง

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

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

เพิ่มโมดูลข้อความ #1 ลงในคอลัมน์ 1

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

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

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

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

• แบบอักษรของหัวเรื่อง 3: เปิด Sans
• หัวข้อ 3 น้ำหนักแบบอักษร: กึ่งหนา
• หัวข้อ 3 รูปแบบตัวอักษร: ตัวพิมพ์ใหญ่
• หัวเรื่อง 3 สีข้อความ: #000000
• หัวเรื่อง 3 ขนาดตัวอักษร: 1.5vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 2.5vw (โทรศัพท์)

ระยะห่าง

ดำเนินการต่อโดยเพิ่มระยะขอบบนบนโทรศัพท์

• อัตรากำไรขั้นต้น: 2vw (โทรศัพท์เท่านั้น)

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

ทัศนวิสัย

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

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

เส้น

เปลี่ยนสีเส้นต่อไป

• สีของเส้น: #000000

ระยะห่าง

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

• อัตรากำไรขั้นต้น: 2vw
• ระยะขอบล่าง: 2vw
• ระยะขอบขวา: 2vw

เพิ่มโมดูลข้อความ #2 ไปยังคอลัมน์ 1

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

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

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

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

• แบบอักษรข้อความ: เปิด Sans
• ขนาดตัวอักษร: 0.6vw (เดสก์ท็อป), 1.1vw (แท็บเล็ต), 2vw (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 2em

ระยะห่าง

เพิ่มแผ่นรองด้านล่างและด้านขวาด้วย

• ขอบล่าง: 5vw (โทรศัพท์เท่านั้น)
• ระยะขอบขวา: 2vw

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

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

เปลี่ยนเนื้อหา

ตรวจสอบให้แน่ใจว่าคุณเปลี่ยนเนื้อหาทั้งหมดในโมดูลข้อความ

เพิ่มแถว #3

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

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

ระยะห่าง

เปิดการตั้งค่าแถวและแก้ไขค่าระยะห่าง

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

เพิ่มโมดูลข้อความลงในคอลัมน์ 1

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

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

เพิ่มลิงค์

เพิ่มลิงก์ไปยังโมดูลทั้งหมดด้วย

สีพื้นหลัง

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

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

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

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

• แบบอักษรข้อความ: เปิด Sans
• น้ำหนักแบบอักษรของข้อความ: Ultra Bold
• รูปแบบตัวอักษรของข้อความ: ตัวพิมพ์ใหญ่
• การจัดตำแหน่งข้อความ: กึ่งกลาง
• สีข้อความ: #ffffff
• ขนาดตัวอักษร: 1vw (เดสก์ท็อป), 1.7vw (แท็บเล็ต), 2.5vw (โทรศัพท์)

ระยะห่าง

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

• ขอบบน: 4vw (เดสก์ท็อป), 11vw (แท็บเล็ต), 0vw (โทรศัพท์)
• แผ่นรองด้านบน: 4vw
• แผ่นรองด้านล่าง: 4vw

โมดูลข้อความโคลน & วางซ้ำในคอลัมน์ 2

เมื่อคุณสร้างโมดูลข้อความในคอลัมน์ 1 เสร็จแล้ว คุณสามารถลอกแบบและวางสำเนาในคอลัมน์ที่สอง

เปลี่ยนเนื้อหา

ตรวจสอบให้แน่ใจว่าคุณเปลี่ยนเนื้อหาและลิงก์

เปลี่ยนสีพื้นหลัง

เช่นเดียวกับสีพื้นหลัง

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

เปลี่ยนสีข้อความ

จากนั้นไปที่แท็บออกแบบและเปลี่ยนสีข้อความ

• สีข้อความ: #000000

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

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

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

เพิ่มโมดูลรูปภาพในคอลัมน์ส่วน 2

อัพโหลดภาพ

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

ขนาด

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

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

ตัวกรอง

แก้ไขการตั้งค่าตัวกรองต่อไป

• ความอิ่มตัว: 0%
• ความสว่าง: 50%

เพิ่มโมดูลข้อความในคอลัมน์ส่วน2

เพิ่มย่อหน้า & เนื้อหา H3

โมดูลที่สองที่เราต้องการในคอลัมน์นี้คือโมดูลข้อความ ป้อนย่อหน้าและเนื้อหา H3 ที่คุณเลือก

สีพื้นหลัง

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

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

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

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

• แบบอักษรข้อความ: เปิด Sans
• สีข้อความ: #ffffff
• ขนาดตัวอักษร: 0.9vw (เดสก์ท็อป), 1.6vw (แท็บเล็ต), 2.2vw (โทรศัพท์)

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

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

• แบบอักษรของหัวเรื่อง 3: เปิด Sans
• หัวข้อ 3 น้ำหนักแบบอักษร: กึ่งหนา
• หัวข้อ 3 รูปแบบตัวอักษร: ตัวพิมพ์ใหญ่
• หัวเรื่อง 3 สีข้อความ: #ffffff
• หัวเรื่อง 3 ขนาดตัวอักษร: 1.5vw (เดสก์ท็อป), 2.5vw (แท็บเล็ต), 3vw (โทรศัพท์)

ระยะห่าง

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

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

โคลนทั้งสองโมดูล & วางรายการที่ซ้ำกันในส่วนคอลัมน์ 3 (ลำดับที่กลับกัน)

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

เปลี่ยนโมดูลข้อความ

เปลี่ยนสีพื้นหลัง

เปิดโมดูลข้อความที่ซ้ำกันในคอลัมน์ส่วนที่สามและเปลี่ยนสีพื้นหลัง

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

เปลี่ยนสีข้อความ

เปลี่ยนสีข้อความถัดไป

• สีข้อความ: #000000

เปลี่ยนสีข้อความ H3

พร้อมกับสีข้อความ H3

• หัวเรื่อง 3 สีข้อความ: #000000

เปลี่ยนโมดูลรูปภาพ

เปลี่ยนภาพ

อัปโหลดรูปภาพอื่นไปยัง Image Module ที่ซ้ำกันต่อไป

เปลี่ยนตัวกรอง

และเปลี่ยนการตั้งค่าตัวกรอง

• ความอิ่มตัว: 0%
• ความสว่าง: 147%

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

ตำแหน่ง

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

ทัศนวิสัย

ตรวจสอบให้แน่ใจว่าได้เปิดใช้งานตัวเลือก 'แสดงตัวแบ่ง'

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

เส้น

เพิ่มสีเส้นต่อไป

• สีเส้น: #ffffff

แปลงร่างหมุน

และแปลงตัวแบ่งแนวนอนเป็นแนวตั้งโดยแก้ไขค่าการหมุนของการแปลงด้านซ้าย

• ซ้าย: 270deg

แปลงแปล

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

• ขวา: -19vw (เดสก์ท็อป)
• ด้านล่าง: -11vw (เดสก์ท็อป), -24vw (แท็บเล็ต)

ทัศนวิสัย

และซ่อนโมดูลทั้งหมดบนโทรศัพท์

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

ตำแหน่ง

ต้องเพิ่มโมดูลตัวแบ่งถัดไปและสุดท้ายที่นี่:

ทัศนวิสัย

ตรวจสอบให้แน่ใจว่าได้เปิดใช้งานตัวเลือก 'แสดงตัวแบ่ง'

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

เส้น

ไปที่แท็บออกแบบและเปลี่ยนสีเส้น

• สีของเส้น: #000000

แปลงร่างหมุน

แปลงตัวแบ่งแนวนอนเป็นแนวตั้งถัดไป

• ซ้าย: 270deg

แปลงแปล

และจัดตำแหน่งตัวแบ่งใหม่โดยใช้การตั้งค่าการแปลการแปลง

• ขวา: 2vw
• ด้านล่าง: -11vw (เดสก์ท็อป), -24vw (แท็บเล็ต)

ทัศนวิสัย

เพื่อให้แน่ใจว่าตัวแบ่งปรากฏที่ด้านบนของโมดูลรูปภาพด้านล่าง เราจะเพิ่มดัชนี Z ในการตั้งค่าการมองเห็น เราจะซ่อนโมดูลทั้งหมดบนโทรศัพท์ด้วย

• ดัชนี Z: 2

ดูตัวอย่าง

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

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

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

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