ดาวน์โหลดการออกแบบส่วน CTA Column Swipe Hero ฟรีสำหรับ Divi

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

ดาวน์โหลดส่วนฮีโร่ฟรี

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

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

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

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

ดาวน์โหลด

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

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

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

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

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

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

• สี 1: #ffffff
• สี 2: #f5ede5
• ทิศทางการไล่ระดับสี: 90deg
• ตำแหน่งเริ่มต้น: 17%
• ตำแหน่งสุดท้าย: 17%

ระยะห่าง

ไปที่แท็บการออกแบบ และเพิ่มการเติมด้านบนและด้านล่างแบบกำหนดเองในขนาดหน้าจอต่างๆ

• ด้านบน: 5vw (เดสก์ท็อป), 10vw (แท็บเล็ต), 13vw (โทรศัพท์)
• Padding ด้านล่าง: 5vw (เดสก์ท็อป), 10vw (แท็บเล็ต), 13vw (โทรศัพท์)

เพิ่มแถว #1

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

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

สีพื้นหลัง

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

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

ขนาด

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

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 60vw (เดสก์ท็อป), 100% (แท็บเล็ตและโทรศัพท์)
• ความกว้างสูงสุด: 100%
• การจัดแนวแถว: ขวา

ระยะห่าง

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

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

ชายแดน

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

• ความกว้างของเส้นขอบด้านซ้าย: 6px
• สีขอบซ้าย: #FFFFFF

กล่องเงา

เพิ่มเงาของกล่องเพื่อสร้างความลึกในส่วนฮีโร่

• ความชัดเจนของกล่องเงาเบลอ: 100px
• เงาสี: rgba(0,0,0,0.22)

CSS Class

และใช้คลาส CSS ในแท็บขั้นสูง ในโพสต์นี้ เราจะใช้คลาส CSS นี้เพื่อซ่อนแถบเลื่อน

• CSS Class: เลื่อนแถบเลื่อน

องค์ประกอบหลัก

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

display: grid;
grid-template-columns: repeat(6, 100%);
grid-column-gap: 2vw;

ล้น

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

• ล้นแนวนอน: เลื่อน
• ล้นแนวตั้ง: ซ่อน

การตั้งค่าคอลัมน์

เมื่อคุณตั้งค่าแถวเสร็จแล้ว คุณสามารถเปิดการตั้งค่าของคอลัมน์แรกได้

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

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

• สี 1: rgba(245,237,229,0.91)
• สี 2: rgba (219,34,65,0.84)
• ตำแหน่งเริ่มต้น: 35%
• ตำแหน่งสุดท้าย: 81%
• วางการไล่ระดับสีเหนือภาพพื้นหลัง: ใช่

ภาพพื้นหลัง

พร้อมกับภาพพื้นหลัง

• ขนาดภาพพื้นหลัง: ปก
• ตำแหน่งภาพพื้นหลัง: Center
• เล่นซ้ำภาพพื้นหลัง: ไม่เล่นซ้ำ

ระยะห่าง

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

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

ชายแดน

ดำเนินการต่อโดยเพิ่มรัศมีเส้นขอบ '20px' ให้กับแต่ละมุมในการตั้งค่าเส้นขอบ

องค์ประกอบหลัก

อีกส่วนที่สำคัญในการทำงานนี้คือการเพิ่มโค้ด CSS หนึ่งบรรทัดลงในองค์ประกอบหลักของคอลัมน์

width: 100% !important;

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

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

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

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

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

• หัวข้อ 3 แบบอักษร: Poppins
• ส่วนหัว 3 น้ำหนักแบบอักษร: เบา
• หัวเรื่อง 3 สีข้อความ: #e92640
• หัวเรื่อง 3 ขนาดตัวอักษร: 1.5vw (เดสก์ท็อป), 3.5vw (แท็บเล็ต), 4.5vw (โทรศัพท์)

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

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

โมดูลต่อไปที่เราต้องการคือโมดูลข้อความอื่น ป้อนเนื้อหาย่อหน้าที่คุณเลือก

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

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

• แบบอักษรของข้อความ: Poppins
• น้ำหนักแบบอักษรของข้อความ: เบา
• สีข้อความ: #e92640
• ขนาดตัวอักษร: 0.8vw (เดสก์ท็อป), 1.9vw (แท็บเล็ต), 2.8vw (โทรศัพท์)

ระยะห่าง

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

• ขอบล่าง: 18vw (เดสก์ท็อป), 30vw (แท็บเล็ต), 42vw (โทรศัพท์)

เพิ่มโมดูลปุ่มไปที่คอลัมน์ 1

เพิ่มสำเนา

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

การตั้งค่าปุ่ม

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

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 0.8vw (เดสก์ท็อป), 1.8vw (แท็บเล็ต), 2.5vw (โทรศัพท์)
• สีข้อความของปุ่ม: #f5ede5
• ความกว้างของขอบปุ่ม: 1px
• สีเส้นขอบของปุ่ม: #f5ede5
• รัศมีเส้นขอบของปุ่ม: 5px
• แบบอักษรของปุ่ม: Poppins

ระยะห่าง

เพิ่มขนาดของปุ่มโดยเพิ่มค่าช่องว่างภายในที่กำหนดเองในขนาดหน้าจอต่างๆ

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

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

ทัศนวิสัย

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

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

เส้น

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

• สีเส้น: #f5ede5

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

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

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

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

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

• แบบอักษรของข้อความ: Poppins
• น้ำหนักแบบอักษรของข้อความ: เบา
• สีข้อความ: #f5ede5
• ขนาดตัวอักษร: 0.8vw (เดสก์ท็อป), 1.9vw (แท็บเล็ต), 2.8vw (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 2.3em

ระยะห่าง

เพิ่มระยะขอบด้านบนด้วย

• อัตรากำไรขั้นต้น: 2vw

โคลนคอลัมน์สูงสุด 5 ครั้ง & ใช้ซ้ำสำหรับ CTA อื่นๆ

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

เพิ่มแถว #2

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

ต่อแถวสอง! เราจะใช้แถวนี้เพื่อสร้างการทับซ้อนกับแถวก่อนหน้า เลือกโครงสร้างคอลัมน์ต่อไปนี้:

ขนาด

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

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

ระยะห่าง

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

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

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

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

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

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

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

• แบบอักษรของหัวเรื่อง: Poppins
• หัวเรื่องข้อความสี: #e92741
• ขนาดข้อความของหัวเรื่อง: 3vw (เดสก์ท็อป), 5vw (แท็บเล็ต), 7vw (โทรศัพท์)

ระยะห่าง

เพิ่มค่ามาร์จิ้นต่อไป

• ขอบบน: -35vw (เดสก์ท็อป), 7vw (แท็บเล็ต), 10vw (โทรศัพท์)
• ระยะขอบซ้าย: 5vw
• ระยะขอบขวา: 12vw

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

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

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

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

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

• แบบอักษรของข้อความ: Poppins
• น้ำหนักแบบอักษรของข้อความ: เบา
• สีข้อความ: #e92741
• ขนาดตัวอักษร: 0.8vw (เดสก์ท็อป), 1.9vw (แท็บเล็ต), 2.8vw (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 2.8em

ระยะห่าง

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

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

เพิ่มโมดูลปุ่มไปที่คอลัมน์ 1

เพิ่มสำเนา

โมดูลต่อไปที่เราต้องการคือโมดูลปุ่ม ป้อนสำเนาที่คุณเลือก

การตั้งค่าปุ่ม

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

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 0.9vw
• สีข้อความของปุ่ม: #e92741
• สีพื้นหลังของปุ่ม: #f5ede5
• ความกว้างของขอบปุ่ม: 0px
• รัศมีเส้นขอบของปุ่ม: 5px
• แบบอักษรของปุ่ม: Poppins

ระยะห่าง

เรากำลังเพิ่มขนาดของปุ่มด้วยการเพิ่มค่าการเว้นวรรคแบบกำหนดเอง

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

กล่องเงา

เสร็จสิ้นการออกแบบโมดูลปุ่มโดยเพิ่มเงาของกล่องที่ละเอียดอ่อน

• ตำแหน่งแนวตั้งของกล่องเงา: 20px
• ความแรงของกล่องเงาเบลอ: 50px
• ความแรงของการกระจายเงาของกล่อง: -5px
• เงาสี: rgba(0,0,0,0.19)

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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