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

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

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

ดาวน์โหลดเค้าโครงส่วนฮีโร่ที่มีตำแหน่งแอบโซลูทในแถบด้านล่างได้ฟรี

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

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

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

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

ดาวน์โหลด

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

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

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

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

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

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

• สี 1: rgba(0,0,0,0.62)
• สี 2: rgba(0,0,0,0.97)
• วางการไล่ระดับสีเหนือภาพพื้นหลัง: ใช่

ภาพพื้นหลัง

อัปโหลดภาพพื้นหลังที่คุณเลือกต่อไป

ระยะห่าง

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

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

ล้น

เรากำลังซ่อนส่วนล้นเช่นกัน

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

เพิ่มแถว #1

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

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

ระยะห่าง

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

• มาร์จิ้นสูงสุด: 20%
• ขอบล่าง: 20%

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

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

ถึงเวลาเพิ่มโมดูล โดยเริ่มจากโมดูลข้อความแรกที่มีเนื้อหา H1 ที่คุณเลือก

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

ไปที่แท็บการออกแบบของโมดูลและจัดรูปแบบข้อความ H1 ดังนี้:

• แบบอักษรของหัวเรื่อง: Work Sans
• หัวเรื่องสีข้อความ: #ffffff
• ขนาดข้อความหัวเรื่อง:
  • เดสก์ท็อป: 80px
  • แท็บเล็ต: 50px
  • โทรศัพท์: 40px
• การเว้นวรรคหัวเรื่อง:
  • เดสก์ท็อป: -4px
  • แท็บเล็ตและโทรศัพท์: -2px

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

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

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

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

แก้ไขการตั้งค่าข้อความของโมดูลตามลำดับ:

• แบบอักษรข้อความ: เปิด Sans
• สีข้อความ: #a0a0a0

ขนาด

แก้ไขการตั้งค่าการปรับขนาดด้วย

• ความกว้าง:
  • เดสก์ท็อป: 68%
  • แท็บเล็ตและโทรศัพท์: 100%

เพิ่มโมดูลปุ่มลงในคอลัมน์

เพิ่มสำเนา

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

เพิ่มลิงค์

เพิ่มลิงค์ปุ่ม

• URL ลิงก์ของปุ่ม: #

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

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

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• สีข้อความของปุ่ม: #ffffff
• ความกว้างของขอบปุ่ม: 0px

• แบบอักษรของปุ่ม: Work Sans
• แสดงไอคอนปุ่ม: ใช่
• ตำแหน่งไอคอนปุ่ม: ซ้าย

เพิ่มแถว #2

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

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

ขนาด

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

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่
• ความกว้าง:
  • เดสก์ท็อป: 100%
  • แท็บเล็ตและโทรศัพท์: 80%
• ความกว้างสูงสุด: 2560px

ระยะห่าง

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

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

กล่องเงา

ใส่เงากล่องด้วย

• ความแรงของกล่องเงาเบลอ: 80px
• ความแรงของการกระจายเงาของกล่อง: 50px
• เงาสี: rgba(135,135,135,0.08)

ตำแหน่ง

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

• ตำแหน่ง:
  • เดสก์ท็อป: Absolute
  • แท็บเล็ตและโทรศัพท์: Default
• ที่ตั้ง: Bottom Center

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

ระยะห่าง

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

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

ชายแดน

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

• ขอบบน:
  • ความกว้างขอบด้านบน: 5px
  • สีขอบด้านบน:
    • ค่าเริ่มต้น: rgba(255,255,255,0)
    • โฮเวอร์: #ffffff
• ขอบล่าง:
  • ความกว้างขอบล่าง:
    • เดสก์ท็อปและแท็บเล็ต: 0px
    • โทรศัพท์: 3px
  • สีขอบล่าง: rgba(255,255,255,0.11)
• ขอบซ้าย:
  • ความกว้างของขอบด้านซ้าย:
    • เดสก์ท็อป: 0px
    • แท็บเล็ต: 3px
    • โทรศัพท์: 0px
  • ขอบซ้ายสี: rgba(255,255,255,0.11)

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

ระยะห่าง

ไปที่การตั้งค่าของคอลัมน์ที่สอง เพิ่มค่าการเติมลงในการตั้งค่าการเว้นวรรค

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

ชายแดน

และรวมเส้นขอบตอบสนองต่อไปนี้:

• ขอบบน:
  • ความกว้างขอบด้านบน: 5px
  • สีขอบด้านบน:
    • ค่าเริ่มต้น: rgba(255,255,255,0)
    • โฮเวอร์: #ffffff
• ขอบล่าง:
  • ความกว้างขอบล่าง:
    • เดสก์ท็อปและแท็บเล็ต: 0px
    • โทรศัพท์: 3px
  • สีขอบล่าง: rgba(255,255,255,0.11)
• ขอบซ้าย:
  • ความกว้างของขอบด้านซ้าย:
    • เดสก์ท็อป: 3px
    • แท็บเล็ต: 3px
    • โทรศัพท์: 0px
  • ขอบซ้ายสี: rgba(255,255,255,0.11)

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

ระยะห่าง

คอลัมน์ที่สามต้องการค่าการเติมที่กำหนดเองเช่นกัน

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

ชายแดน

พร้อมกับการตั้งค่าเส้นขอบต่อไปนี้:

• ขอบบน:
  • ความกว้างขอบด้านบน: 5px
  • สีขอบด้านบน:
    • ค่าเริ่มต้น: rgba(255,255,255,0)
    • โฮเวอร์: #ffffff
• ขอบซ้าย:
  • ความกว้างของขอบด้านซ้าย:
    • เดสก์ท็อป: 3px
    • แท็บเล็ต: 3px
    • โทรศัพท์: 0px
  • ขอบซ้ายสี: rgba(255,255,255,0.11)

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

สีพื้นหลัง

ไปยังคอลัมน์สุดท้าย เพิ่มสีพื้นหลังสีขาว

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

ระยะห่าง

ใช้ค่าการเติมที่ตอบสนองแบบกำหนดเองบางค่า

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

ตำแหน่ง

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

• ตำแหน่ง:
  • เดสก์ท็อป: Absolute
  • แท็บเล็ตและโทรศัพท์: Default
• ตำแหน่ง: ล่างขวา

โมดูลปุ่มโคลนในแถวก่อนหน้า & วางซ้ำในคอลัมน์ 1 ของแถวใหม่

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

เปลี่ยนการจัดตำแหน่งปุ่ม

เปิดโมดูลปุ่มที่ซ้ำกันและเปลี่ยนการจัดตำแหน่ง

• การจัดตำแหน่งปุ่ม: กึ่งกลาง

เปลี่ยนการคัดลอก & ลิงก์

แก้ไขสำเนาและลิงก์ของโมดูลถัดไป

ปุ่มโคลนในคอลัมน์ 1 สองครั้ง & วางรายการซ้ำในคอลัมน์ 2 & 3

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

เปลี่ยนการคัดลอก & ลิงก์

เปลี่ยนสำเนาและลิงก์สำหรับแต่ละรายการที่ซ้ำกัน

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

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

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

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

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

• แบบอักษรของหัวเรื่อง 2: Work Sans
• หัวเรื่อง 2 สีข้อความ: #000000
• หัวเรื่อง 2 ระยะห่างตัวอักษร: -2px

ระยะห่าง

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

• ขอบล่าง: 10%

เพิ่มโมดูลแบบฟอร์มการติดต่อในคอลัมน์ 4

ทำให้ฟิลด์เต็มความกว้าง

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

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

การตั้งค่าฟิลด์

ไปที่แท็บการออกแบบของโมดูลและแก้ไขการตั้งค่าฟิลด์ดังต่อไปนี้:

• ฟิลด์สีพื้นหลัง: #ffffff
• ฟิลด์ข้อความสี: #000000
• ช่องว่างภายในสูงสุด: 4%
• ฟิลด์ด้านล่างแพ็ดดิ้ง: 4%
• ฟอนต์ฟิลด์: Work Sans
• ขนาดข้อความของฟิลด์: 13px

การตั้งค่าข้อความแคปต์ชา

จากนั้นทำการเปลี่ยนแปลงการตั้งค่าข้อความแคปต์ชา

• แบบอักษร Captcha: Work Sans
• สีข้อความแคปต์ชา: #000000

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

เรากำลังจัดสไตล์ปุ่มด้วย

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 17px
• สีข้อความของปุ่ม: #ffffff
• สีพื้นหลังของปุ่ม: #000000
• ความกว้างของขอบปุ่ม: 0px

• รัศมีเส้นขอบของปุ่ม: 0px
• ระยะห่างระหว่างตัวอักษรของปุ่ม: -1px
• แบบอักษรของปุ่ม: Work Sans

ชายแดน

และสุดท้ายแต่ไม่ท้ายสุด เราจะรวมความกว้างของเส้นขอบด้านล่าง แค่นั้นแหละ!

• อินพุตความกว้างขอบด้านล่าง: 1px
• ใส่สีขอบด้านล่าง: #dddddd

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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