วิธีการออกแบบส่วนท้าย (2025 บทช่วยสอน)

เผยแพร่แล้ว: 2025-02-03

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

มาดำน้ำกันเถอะ

สารบัญ
  • 1 ส่วนท้ายของเว็บไซต์คืออะไร?
    • 1.1 ทำไมการมีส่วนท้ายจึงสำคัญ?
  • 2 องค์ประกอบส่วนท้ายที่สำคัญ
    • 2.1 1. ข้อมูลการติดต่อ
    • 2.2 2. ข้อมูลลิขสิทธิ์และกฎหมาย
    • 2.3 3. การนำทาง
    • 2.4 4. เรียกร้องให้ดำเนินการ (CTA)
  • 3 หลักการออกแบบสำหรับส่วนท้ายที่มีประสิทธิภาพ
  • 4 วิธีการออกแบบส่วนท้ายสำหรับเว็บไซต์ของคุณ
    • 4.1 Divi คืออะไร?
    • 4.2 วิธีการออกแบบส่วนท้ายตั้งแต่เริ่มต้น
  • 5 ยกระดับส่วนท้ายของเว็บไซต์ของคุณด้วย Divi

ส่วนท้ายของเว็บไซต์คืออะไร?

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

ทำไมการมีส่วนท้ายจึงสำคัญ?

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

  • การเสริมแรงแบรนด์: ส่วนท้ายแสดงโลโก้สีและฟอนต์ของคุณอย่างสม่ำเสมอเสริมเอกลักษณ์ของแบรนด์ในทุกหน้า
  • ข้อมูลการติดต่อ: รายละเอียดการติดต่อที่เข้าถึงได้ง่ายของส่วนท้ายช่วยให้ผู้เยี่ยมชมติดต่อคุณได้อย่างรวดเร็วและง่ายดาย
  • ข้อมูลทางกฎหมายและความเป็นส่วนตัว: ส่วนท้ายเป็นสถานที่ตั้งศูนย์กลางสำหรับข้อมูลทางกฎหมายและความเป็นส่วนตัวที่สำคัญเพื่อให้มั่นใจว่ามีความโปร่งใสและการปฏิบัติตาม
  • ประสบการณ์ผู้ใช้ที่ได้รับการปรับปรุง: ส่วนท้ายที่จัดระเบียบอย่างดีช่วยเพิ่มการนำทางของผู้ใช้โดยให้การเข้าถึงหน้าเว็บที่สำคัญและแผนที่ไซต์ง่ายขึ้นเพื่อปรับปรุงการใช้งานโดยรวม
  • ประโยชน์ SEO: ส่วนท้ายที่ออกแบบมาอย่างดีอาจรวมถึงลิงก์ที่มีค่าไปยังเว็บไซต์อื่น ๆ (ลิงก์ย้อนกลับ) และโปรไฟล์โซเชียลมีเดียการปรับปรุงตำแหน่งในหน้าการจัดอันดับเครื่องมือค้นหา (SERPS) และ SEO

องค์ประกอบส่วนท้ายที่สำคัญ

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

1. ข้อมูลติดต่อ

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

2. ข้อมูลลิขสิทธิ์และกฎหมาย

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

3. การนำทาง

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

4. เรียกร้องให้ดำเนินการ (CTA)

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

หลักการออกแบบสำหรับส่วนท้ายที่มีประสิทธิภาพ

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

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

วิธีการออกแบบส่วนท้ายสำหรับเว็บไซต์ของคุณ

มีหลายวิธีในการออกแบบส่วนท้ายสำหรับเว็บไซต์ของคุณ เครื่องมือออกแบบเว็บเช่น Figma, Framer หรือ Sketch เหมาะอย่างยิ่งสำหรับการรีดแบบต้นแบบสำหรับการออกแบบของคุณหรือคุณสามารถดำน้ำด้วยเครื่องมือเช่น Divi และออกแบบส่วนท้ายแบบเรียลไทม์ สำหรับบทช่วยสอนนี้เราจะใช้ Divi เพื่อแสดงให้คุณเห็นว่ามันง่ายเพียงใดในการออกแบบส่วนท้ายด้วยโลโก้ไอคอนโซเชียลมีเดียการเลือกใช้อีเมลและลิงก์ที่สำคัญบางอย่าง-ทั้งหมดในเวลาเพียงไม่กี่นาที

Divi คืออะไร?

วิธีการออกแบบส่วนท้าย

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

วิธีการออกแบบส่วนท้าย

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

Divi เว็บไซต์ด่วน

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

การสร้างเว็บไซต์ Divi AI

รับ Divi

วิธีการออกแบบส่วนท้ายตั้งแต่เริ่มต้น

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

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

แนวทางของแบรนด์

เข้าสู่เว็บไซต์ WordPress ของคุณและนำทางไปยัง Divi> Theme Builder

Divi Theme Builder

จากนั้นคลิก เพิ่มส่วนท้ายทั่วโลก จากนั้น สร้างส่วนท้ายทั่วโลก เพื่อเปิดตัวสร้างธีม

เพิ่มส่วนหัวของ Divi Global

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

วิธีการออกแบบส่วนท้าย

จากนั้นเลือก เลย์เอาต์สามคอลัมน์ จากตัวเลือกที่มีอยู่

3 คอลัมน์แถว Divi

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

การตั้งค่าส่วน divi

คลิก + เพิ่มสีพื้นหลัง เพื่อเลือกสีพื้นหลังสำหรับส่วนของเรา

วิธีการออกแบบส่วนท้าย

ใช้ #406171 เป็นสี หากต้องการบันทึกสีเป็นสีทั่วโลกให้คลิกที่ ไอคอน + เพื่อเพิ่ม เมื่อคุณเพิ่มสีพื้นหลังให้คลิก ปุ่มสีเขียว เพื่อบันทึก

วิธีการออกแบบส่วนท้าย

เพิ่มโลโก้

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

โมดูลภาพ Divi

เลือก + เพิ่มอิมเมจ เพื่ออัปโหลดโลโก้ของคุณด้วยการตั้งค่าโมดูลรูปภาพที่ใช้งานอยู่

เพิ่มภาพลงใน Divi

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

แท็บ Divi Design

ภายใต้เมนูแบบเลื่อนลงของการจัดตำแหน่งตั้งค่า การจัดตำแหน่งภาพ ทางด้านซ้าย บนเดสก์ท็อปและ ตรงกลาง บนแท็บเล็ตและมือถือ จากนั้นคลิก แท็บการปรับขนาด และตั้งค่าความกว้างเป็น 50% สำหรับเดสก์ท็อปและแท็บเล็ตและ 40% สำหรับมือถือ


เมื่อเสร็จแล้วให้คลิก ปุ่มสีเขียว เพื่อบันทึกโมดูล

วิธีการออกแบบส่วนท้าย

เพิ่มไอคอนโซเชียลมีเดีย

คลิก ไอคอนสีเทา + ใต้โลโก้เพื่อเพิ่มโมดูลใหม่และเลือกโมดูล ติดตามโซเชียลมีเดีย

วิธีการออกแบบส่วนท้าย

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

วิธีการออกแบบส่วนท้าย

หากต้องการเพิ่มพื้นหลังในแต่ละแพลตฟอร์มโซเชียลมีเดียให้คลิก ไอคอนเกียร์ เพื่อแก้ไข

วิธีการออกแบบส่วนท้าย

ใช้ #EE8B22 สำหรับสีพื้นหลัง ทำซ้ำขั้นตอนเหล่านี้เพื่อแก้ไขไอคอนสำหรับ X และ Instagram

วิธีการออกแบบส่วนท้าย

จากนั้นสลับไปที่แท็บการออกแบบและเพิ่มการตั้งค่าต่อไปนี้:

  • การจัดตำแหน่งโมดูล: ซ้าย (เดสก์ท็อป), ศูนย์ (ตารางและมือถือ)
  • ไอคอนสี: #ffffff
  • ใช้ไอคอนที่กำหนดเองขนาด: ใช่
  • ขนาดไอคอนที่กำหนดเอง: 20px
  • มุมโค้งมนชายแดน: 100px

เมื่อเสร็จแล้วไอคอนของคุณควรมีภาพด้านล่าง

วิธีการออกแบบส่วนท้าย

เพิ่มโมดูลหัวเรื่อง

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

วิธีการออกแบบส่วนท้าย

คลิกแท็บการออกแบบและเพิ่มการตั้งค่าต่อไปนี้:

  • ระดับหัวเรื่อง: H3
  • หัวเรื่องฟอนต์: คนที่โชคดีที่สุด
  • การจัดตำแหน่งข้อความหัวเรื่อง: ศูนย์
  • หัวเรื่องสีข้อความ: #ffffff
  • หัวเรื่องขนาดข้อความ: 24px
  • การเว้นวรรคจดหมายหัวเรื่อง: 1px

เมื่อการตั้งค่าทั้งหมดอยู่ในสถานที่หัวเรื่องของคุณควรมีลักษณะเหมือนภาพด้านล่าง

วิธีการออกแบบส่วนท้าย

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

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

วิธีการออกแบบส่วนท้าย

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

วิธีการออกแบบส่วนท้าย

ด้วยลิงก์ของคุณในสถานที่คลิกแท็บการออกแบบและเพิ่มการตั้งค่าต่อไปนี้ภายใต้เมนู ลิงก์ข้อความ :

วิธีการออกแบบส่วนท้าย

  • ตัวอักษรข้อความ: อินเตอร์
  • การจัดตำแหน่งข้อความลิงก์: ซ้าย (เดสก์ท็อป), ศูนย์ (แท็บเล็ตและมือถือ)
  • ลิงก์สีข้อความ: #EE8B22
  • ลิงก์ขนาดข้อความ: 16px
  • ความสูงของสายเชื่อมโยง: 1.3EM

เพิ่มโมดูลการเลือกใช้อีเมล

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

ในแท็บเนื้อหาเพิ่มการตั้งค่าต่อไปนี้:

วิธีการออกแบบส่วนท้ายด้วย divi

  • ชื่อเรื่อง: ลงทะเบียนเพื่อจัดการข้อเสนอที่ยอดเยี่ยม!
  • ปุ่ม: ลงทะเบียนตอนนี้!
  • Body: เข้าร่วมแพ็คของเรา! ลงทะเบียนเพื่อรับจดหมายข่าวของเราและรับส่วนลดพิเศษการเข้าถึงผลิตภัณฑ์ใหม่และอัปเดตเกี่ยวกับยอดขายที่กำลังจะมาถึง นอกจากนี้รับข้อเสนอการต้อนรับพิเศษสำหรับการสมัครสมาชิก!
  • บัญชีอีเมล: เลือกจากหนึ่งใน 20 ผู้ให้บริการอีเมลรวมถึง MailChimp, ActiveCampaign, HubSpot และอื่น ๆ หากคุณต้องการความช่วยเหลือในการกำหนดค่าการเลือกใช้ให้ตรวจสอบโพสต์นี้
  • ฟิลด์: สลับ ใช้ฟิลด์ชื่อเดียว เป็น ใช่
  • การกระทำที่ประสบความสำเร็จ: เลือกที่จะแสดงข้อความหรือเปลี่ยนเส้นทางไปยัง URL อื่น
  • ความเป็นมา: โปร่งใส
ในแท็บการออกแบบเพิ่มการตั้งค่าเค้าโครงต่อไปนี้:

วิธีการออกแบบส่วนท้ายด้วย divi

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

วิธีการออกแบบส่วนท้ายด้วย divi

  • ฟิลด์พื้นหลังสี: #ffffff
  • สีข้อความฟิลด์: #406171
  • สีพื้นหลังโฟกัสฟิลด์: #EE8B22
  • ฟิลด์โฟกัสสีข้อความ: #ffffff
  • ฟิลด์ฟิลด์: อินเตอร์
  • ทุ่งมุมโค้งมน: 5px
  • ความกว้างของเขตแดน: 2px
  • ฟิลด์สีชายแดน: #EE8B22
การตั้งค่าข้อความชื่อเรื่อง:

วิธีการออกแบบส่วนท้ายด้วย divi

  • ตัวอักษรชื่อเรื่อง: คนที่โชคดีที่สุด
  • การจัดตำแหน่งข้อความชื่อ: ซ้าย
  • ชื่อข้อความชื่อ: #ffffff
  • ขนาดข้อความชื่อ: 24px
  • ระยะห่างจดหมายชื่อ: 1px
การตั้งค่าข้อความร่างกาย:

วิธีการออกแบบส่วนท้ายด้วย divi

  • ตัวอักษรร่างกาย: อินเตอร์
  • การจัดตำแหน่งข้อความร่างกาย: ซ้าย
  • สีข้อความร่างกาย: #FFFFFF
  • ความสูงของเส้นร่างกาย: 1.3EM
การตั้งค่าปุ่ม:

วิธีการออกแบบส่วนท้ายด้วย divi

  • ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: สลับไปที่ใช่
  • ปุ่มขนาดข้อความ: 16px
  • ปุ่มข้อความสี: #ffffff
  • ปุ่มพื้นหลัง: #EE8B22
  • ปุ่มความกว้างของเส้นขอบ: 0px
  • รัศมีเส้นขอบปุ่ม: 5px
  • แบบอักษรปุ่ม: อินเตอร์
  • น้ำหนักตัวอักษรน้ำหนัก: semibold
  • ไอคอนปุ่มแสดง: ไม่
  • ปุ่มพิมพ์: 12px (ด้านบนและล่าง)

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

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

เพิ่มส่วน divi ใหม่

เลือก แถวคอลัมน์ 1/3 +/2/3

วิธีการออกแบบส่วนท้ายด้วย divi

ตั้งค่าสีพื้นหลังของส่วนเป็น #38A2DB และระยะห่าง (ในแท็บการออกแบบ) เป็น 10px ด้านบนและด้านล่างจากนั้นบันทึกการเปลี่ยนแปลง

วิธีการออกแบบส่วนท้ายด้วย divi

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

เนื้อหาแบบไดนามิกของ Divi

เมื่อกล่องโต้ตอบปรากฏขึ้นให้เลือก วันที่ปัจจุบัน จากรายการตัวเลือก

เลือกวันที่ปัจจุบัน

เมื่อกล่องโต้ตอบข้อความปรากฏขึ้นให้ป้อนการตั้งค่าต่อไปนี้:

วิธีการออกแบบส่วนท้ายด้วย divi

  • ก่อนหน้า: สัญลักษณ์ลิขสิทธิ์ (ตัวเลือก + G บนแป้นพิมพ์ของคุณ)
  • หลังจาก: ชื่อธุรกิจของคุณ อย่าลืมออกจากพื้นที่ก่อนเข้าสู่ข้อความ!
  • รูปแบบวันที่: กำหนดเอง
  • รูปแบบวันที่ที่กำหนดเอง: Y

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

วิธีการออกแบบส่วนท้ายด้วย divi

เพิ่มโมดูลเมนู

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

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

วิธีการออกแบบส่วนท้ายด้วย divi

  • เมนู: เลือกเมนูข้อมูลทางกฎหมายของคุณ
  • ความเป็นมา: โปร่งใส

ในการตั้งค่าการออกแบบให้เลือกการตั้งค่าต่อไปนี้:

เค้าโครง:

เค้าโครงเมนู Divi

  • สไตล์: ฝ่ายซ้ายจัดแนว
ข้อความเมนู:

ตัวเลือกข้อความเมนู divi

  • สีลิงค์ที่ใช้งานอยู่: #ffffff
  • ตัวอักษรเมนู: อินเตอร์
  • เมนูสีข้อความ: #ffffff
  • การจัดตำแหน่งข้อความ: ขวา
การตั้งค่าเมนูแบบเลื่อนลง:

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

ตัวเลือกเมนูมือถือ Divi

  • เมนูมือถือสีพื้นหลัง: #38A2DB
  • เมนูข้อความมือถือสี: #ffffff

ในที่สุดเปลี่ยนสีไอคอนเมนูแฮมเบอร์เกอร์ภายใต้แท็บไอคอนเป็น #FFFFFF

สีเมนูมือถือ

เพิ่มสัมผัสการตกแต่ง

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

ลบช่องว่างจากโมดูล Optin อีเมล Divi

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

เมนู divi ที่ไม่ถูกต้องบนมือถือ

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

display:flex;

Divi Custom CSS

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

บันทึกส่วนท้ายของ Divi

คลิก X ที่ด้านบนขวาของตัวสร้างธีมเพื่อออก

ออกจากตัวสร้างธีม

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

บันทึกการเปลี่ยนแปลงส่วนท้ายของ Divi

อย่างที่คุณเห็น Divi ทำให้ง่ายต่อการออกแบบส่วนท้ายของเว็บไซต์ในไม่กี่นาที

ยกระดับส่วนท้ายของเว็บไซต์ของคุณด้วย Divi

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

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

คนร่าง
ราคาเริ่มต้น $ 89/ปี เยี่ยม
เลย์เอาต์ฟรี 2,600+ เรียนรู้เพิ่มเติม
โมดูลการออกแบบ 200 เรียนรู้เพิ่มเติม
Divi เว็บไซต์ด่วน เว็บไซต์เริ่มต้นหรือเว็บไซต์ Ai ที่สร้างขึ้น เรียนรู้เพิ่มเติม
ผู้สร้างภาพ ตัวสร้างหน้าลากแล้ววาง เรียนรู้เพิ่มเติม
ตัวสร้างธีม ความสามารถในการแก้ไขแบบเต็มไซต์ เรียนรู้เพิ่มเติม
การบูรณาการอีคอมเมิร์ซ โมดูลเฉพาะของ WooCommerce 20+ เรียนรู้เพิ่มเติม
การรวมชุดรูปแบบ Divi รวมเข้ากับปลั๊กอิน WordPress ยอดนิยม เรียนรู้เพิ่มเติม