วิธีการออกแบบส่วนท้าย (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 รวมถึงโลโก้สีแบรนด์และแบบอักษรของคุณ
เว็บไซต์ด่วนทุกเว็บไซต์สร้างมาพร้อมกับหน้าเว็บหลักทั้งหมดเทมเพลตตัวสร้างธีมตัวสร้างโมดูลการออกแบบที่ตั้งไว้ล่วงหน้าและสไตล์ระดับโลกทำให้การออกแบบสอดคล้องกันทั่วทั้งเว็บไซต์ นอกเหนือจากเว็บไซต์เริ่มต้นคุณสามารถเลือกใช้เว็บไซต์ Ai ที่สร้างขึ้นจาก Divi AI ด้วย Divi AI เว็บไซต์ของคุณมาพร้อมกับทุกสิ่งที่ไซต์เริ่มต้นทำ แต่ช่วยให้คุณสามารถใช้ข้อความข้อความเพื่อเขียนคำอธิบายของเว็บไซต์ที่คุณต้องการสร้าง คุณยังสามารถเลือกการสร้างแบรนด์ของคุณหรืออนุญาตให้ Divi AI สร้างขึ้น
รับ Divi
วิธีการออกแบบส่วนท้ายตั้งแต่เริ่มต้น
แม้ว่าคุณสามารถใช้ Divi AI หรือไซต์ด่วนเพื่อสร้างส่วนท้ายที่มีประสิทธิภาพ แต่คุณสามารถออกแบบได้ตั้งแต่เริ่มต้นจากการสร้างภาพและธีม
ก่อนที่เราจะเริ่มออกแบบส่วนท้ายมันเป็นความคิดที่ดีที่จะมีเทมเพลตแนวทางแบรนด์เช่นภาพด้านล่าง เทมเพลตนี้ช่วยให้คุณเริ่มต้นด้วยแนวทางโลโก้สีแบรนด์และแบบอักษรเพื่อช่วยเหลือคุณเมื่อคุณออกแบบส่วนท้าย ก้าวไปข้างหน้าเราจะใช้เทมเพลตนี้เป็นแนวทาง
เข้าสู่เว็บไซต์ WordPress ของคุณและนำทางไปยัง Divi> Theme Builder
จากนั้นคลิก เพิ่มส่วนท้ายทั่วโลก จากนั้น สร้างส่วนท้ายทั่วโลก เพื่อเปิดตัวสร้างธีม
เมื่อตัวสร้างธีมเปิดตัวคุณจะได้พบกับกระดานชนวนเปล่า เริ่มต้นด้วยการคลิกที่ ไอคอนสีเขียว เพื่อเพิ่มแถวลงในส่วนท้าย
จากนั้นเลือก เลย์เอาต์สามคอลัมน์ จากตัวเลือกที่มีอยู่
ก่อนที่เราจะเพิ่มเนื้อหาเราจะต้องเพิ่มสีพื้นหลังในส่วนของเรา ในการทำเช่นนั้นให้คลิกที่ ไอคอนเกียร์ (การตั้งค่า) ที่ด้านบนซ้ายของส่วน
คลิก + เพิ่มสีพื้นหลัง เพื่อเลือกสีพื้นหลังสำหรับส่วนของเรา
ใช้ #406171 เป็นสี หากต้องการบันทึกสีเป็นสีทั่วโลกให้คลิกที่ ไอคอน + เพื่อเพิ่ม เมื่อคุณเพิ่มสีพื้นหลังให้คลิก ปุ่มสีเขียว เพื่อบันทึก
เพิ่มโลโก้
ด้วยโครงสร้างแถวของเราในสถานที่ถึงเวลาที่จะเพิ่มเนื้อหาบางอย่าง เริ่มต้นด้วยการเพิ่ม โมดูลรูปภาพ ลงในคอลัมน์แรกของแถว
เลือก + เพิ่มอิมเมจ เพื่ออัปโหลดโลโก้ของคุณด้วยการตั้งค่าโมดูลรูปภาพที่ใช้งานอยู่
เมื่ออัพโหลดโลโก้ของคุณเราจะต้องทำการเปลี่ยนแปลงบางอย่างดังนั้นคลิก แท็บการออกแบบ เพื่อเริ่มต้น
ภายใต้เมนูแบบเลื่อนลงของการจัดตำแหน่งตั้งค่า การจัดตำแหน่งภาพ ทางด้านซ้าย บนเดสก์ท็อปและ ตรงกลาง บนแท็บเล็ตและมือถือ จากนั้นคลิก แท็บการปรับขนาด และตั้งค่าความกว้างเป็น 50% สำหรับเดสก์ท็อปและแท็บเล็ตและ 40% สำหรับมือถือ
เมื่อเสร็จแล้วให้คลิก ปุ่มสีเขียว เพื่อบันทึกโมดูล
เพิ่มไอคอนโซเชียลมีเดีย
คลิก ไอคอนสีเทา + ใต้โลโก้เพื่อเพิ่มโมดูลใหม่และเลือกโมดูล ติดตามโซเชียลมีเดีย
ด้วยการตั้งค่าโมดูลที่ใช้งานอยู่ให้คลิกปุ่ม เพิ่มปุ่มโซเชียลเน็ตเวิร์กใหม่ เพื่อเพิ่มแพลตฟอร์มโซเชียลมีเดียที่คุณเลือก สำหรับบทช่วยสอนนี้เราจะเพิ่ม Facebook, X และ Instagram
หากต้องการเพิ่มพื้นหลังในแต่ละแพลตฟอร์มโซเชียลมีเดียให้คลิก ไอคอนเกียร์ เพื่อแก้ไข
ใช้ #EE8B22 สำหรับสีพื้นหลัง ทำซ้ำขั้นตอนเหล่านี้เพื่อแก้ไขไอคอนสำหรับ X และ Instagram
จากนั้นสลับไปที่แท็บการออกแบบและเพิ่มการตั้งค่าต่อไปนี้:
- การจัดตำแหน่งโมดูล: ซ้าย (เดสก์ท็อป), ศูนย์ (ตารางและมือถือ)
- ไอคอนสี: #ffffff
- ใช้ไอคอนที่กำหนดเองขนาด: ใช่
- ขนาดไอคอนที่กำหนดเอง: 20px
- มุมโค้งมนชายแดน: 100px
เมื่อเสร็จแล้วไอคอนของคุณควรมีภาพด้านล่าง

เพิ่มโมดูลหัวเรื่อง
ต่อไปเราจะเพิ่ม โมดูลส่วนหัว ลงในคอลัมน์ที่สองของเรา คลิกไอคอนสีเทา +และเลือกโมดูลหัวเรื่องเพื่อเพิ่ม เขียน บริการของเรา ในฟิลด์หัวเรื่องเมื่อกล่องโต้ตอบปรากฏขึ้น
คลิกแท็บการออกแบบและเพิ่มการตั้งค่าต่อไปนี้:
- ระดับหัวเรื่อง: H3
- หัวเรื่องฟอนต์: คนที่โชคดีที่สุด
- การจัดตำแหน่งข้อความหัวเรื่อง: ศูนย์
- หัวเรื่องสีข้อความ: #ffffff
- หัวเรื่องขนาดข้อความ: 24px
- การเว้นวรรคจดหมายหัวเรื่อง: 1px
เมื่อการตั้งค่าทั้งหมดอยู่ในสถานที่หัวเรื่องของคุณควรมีลักษณะเหมือนภาพด้านล่าง
เพิ่มโมดูลข้อความ
ต่อไปเราจะเพิ่ม โมดูล ข้อความใต้โมดูลหัวเรื่องเพื่อแสดงลิงก์ที่สำคัญในคอลัมน์ที่สองของเรา Divi เพิ่มข้อความตัวยึดตำแหน่งลงในโมดูลโดยค่าเริ่มต้นดังนั้นเราต้องลบว่าก่อนที่จะเพิ่มข้อความใหม่
แม้ว่าเราสามารถใช้โมดูลเมนูได้ที่นี่ แต่ก็สมเหตุสมผลกว่าที่จะใช้โมดูลข้อความและเพิ่มลิงก์ในแต่ละบรรทัดของข้อความ เนื่องจากเรากำลังสร้างส่วนท้ายสำหรับเว็บไซต์อาหารสัตว์เลี้ยงเราจะต้องรวมลิงก์ที่สำคัญไปยังหน้าภายในที่เป็นประโยชน์ต่อผู้ใช้เช่นอาหารสัตว์เลี้ยงและขนมความเป็นอยู่ที่ดีของเล่นของเล่น สาย จูง ฯลฯ แต่ละลิงก์
ด้วยลิงก์ของคุณในสถานที่คลิกแท็บการออกแบบและเพิ่มการตั้งค่าต่อไปนี้ภายใต้เมนู ลิงก์ข้อความ :
- ตัวอักษรข้อความ: อินเตอร์
- การจัดตำแหน่งข้อความลิงก์: ซ้าย (เดสก์ท็อป), ศูนย์ (แท็บเล็ตและมือถือ)
- ลิงก์สีข้อความ: #EE8B22
- ลิงก์ขนาดข้อความ: 16px
- ความสูงของสายเชื่อมโยง: 1.3EM
เพิ่มโมดูลการเลือกใช้อีเมล
ในคอลัมน์ที่สามของเราเราจะเพิ่ม โมดูลการเลือกใช้อีเมล สำหรับการรวบรวมข้อมูลผู้ใช้ แนวคิดคือการให้ลูกค้าที่มีศักยภาพลงทะเบียนเพื่อรับจดหมายข่าวเพื่อรับการอัปเดตเกี่ยวกับผลิตภัณฑ์และบริการใหม่
ในแท็บเนื้อหาเพิ่มการตั้งค่าต่อไปนี้:
- ชื่อเรื่อง: ลงทะเบียนเพื่อจัดการข้อเสนอที่ยอดเยี่ยม!
- ปุ่ม: ลงทะเบียนตอนนี้!
- Body: เข้าร่วมแพ็คของเรา! ลงทะเบียนเพื่อรับจดหมายข่าวของเราและรับส่วนลดพิเศษการเข้าถึงผลิตภัณฑ์ใหม่และอัปเดตเกี่ยวกับยอดขายที่กำลังจะมาถึง นอกจากนี้รับข้อเสนอการต้อนรับพิเศษสำหรับการสมัครสมาชิก!
- บัญชีอีเมล: เลือกจากหนึ่งใน 20 ผู้ให้บริการอีเมลรวมถึง MailChimp, ActiveCampaign, HubSpot และอื่น ๆ หากคุณต้องการความช่วยเหลือในการกำหนดค่าการเลือกใช้ให้ตรวจสอบโพสต์นี้
- ฟิลด์: สลับ ใช้ฟิลด์ชื่อเดียว เป็น ใช่
- การกระทำที่ประสบความสำเร็จ: เลือกที่จะแสดงข้อความหรือเปลี่ยนเส้นทางไปยัง URL อื่น
- ความเป็นมา: โปร่งใส
ในแท็บการออกแบบเพิ่มการตั้งค่าเค้าโครงต่อไปนี้:
- เค้าโครง: ร่างกายด้านบนรูปแบบที่ด้านล่าง
- ชื่อ FullWidth: สลับไปที่ใช่
- ส่งอีเมล FullWidth: สลับไปที่ใช่
การตั้งค่าฟิลด์:
- ฟิลด์พื้นหลังสี: #ffffff
- สีข้อความฟิลด์: #406171
- สีพื้นหลังโฟกัสฟิลด์: #EE8B22
- ฟิลด์โฟกัสสีข้อความ: #ffffff
- ฟิลด์ฟิลด์: อินเตอร์
- ทุ่งมุมโค้งมน: 5px
- ความกว้างของเขตแดน: 2px
- ฟิลด์สีชายแดน: #EE8B22
การตั้งค่าข้อความชื่อเรื่อง:
- ตัวอักษรชื่อเรื่อง: คนที่โชคดีที่สุด
- การจัดตำแหน่งข้อความชื่อ: ซ้าย
- ชื่อข้อความชื่อ: #ffffff
- ขนาดข้อความชื่อ: 24px
- ระยะห่างจดหมายชื่อ: 1px
การตั้งค่าข้อความร่างกาย:
- ตัวอักษรร่างกาย: อินเตอร์
- การจัดตำแหน่งข้อความร่างกาย: ซ้าย
- สีข้อความร่างกาย: #FFFFFF
- ความสูงของเส้นร่างกาย: 1.3EM
การตั้งค่าปุ่ม:
- ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: สลับไปที่ใช่
- ปุ่มขนาดข้อความ: 16px
- ปุ่มข้อความสี: #ffffff
- ปุ่มพื้นหลัง: #EE8B22
- ปุ่มความกว้างของเส้นขอบ: 0px
- รัศมีเส้นขอบปุ่ม: 5px
- แบบอักษรปุ่ม: อินเตอร์
- น้ำหนักตัวอักษรน้ำหนัก: semibold
- ไอคอนปุ่มแสดง: ไม่
- ปุ่มพิมพ์: 12px (ด้านบนและล่าง)
เพิ่มส่วนใหม่
สุดท้ายเราจะต้องเพิ่มส่วนใหม่สำหรับข้อมูลลิขสิทธิ์และเมนูข้อกำหนดในการให้บริการของเราลงในส่วนท้ายของเรา คลิก ไอคอนสีน้ำเงิน ภายใต้ส่วนที่มีอยู่และเลือก ส่วนปกติ
เลือก แถวคอลัมน์ 1/3 +/2/3
ตั้งค่าสีพื้นหลังของส่วนเป็น #38A2DB และระยะห่าง (ในแท็บการออกแบบ) เป็น 10px ด้านบนและด้านล่างจากนั้นบันทึกการเปลี่ยนแปลง
เพิ่มโมดูลข้อความไปยังคอลัมน์ด้านซ้าย แทนที่จะเพิ่มข้อความในร่างกายให้คลิก ไอคอนเนื้อหาแบบไดนามิก เราจะเพิ่มข้อมูลลิขสิทธิ์ของเราที่นี่เพื่ออัปเดตทุกปีโดยที่คุณไม่เปลี่ยนด้วยตนเอง
เมื่อกล่องโต้ตอบปรากฏขึ้นให้เลือก วันที่ปัจจุบัน จากรายการตัวเลือก
เมื่อกล่องโต้ตอบข้อความปรากฏขึ้นให้ป้อนการตั้งค่าต่อไปนี้:
- ก่อนหน้า: สัญลักษณ์ลิขสิทธิ์ (ตัวเลือก + G บนแป้นพิมพ์ของคุณ)
- หลังจาก: ชื่อธุรกิจของคุณ อย่าลืมออกจากพื้นที่ก่อนเข้าสู่ข้อความ!
- รูปแบบวันที่: กำหนดเอง
- รูปแบบวันที่ที่กำหนดเอง: Y
บันทึกการเปลี่ยนแปลงก่อนมุ่งหน้าไปยังแท็บการออกแบบเพื่อจัดสไตล์ข้อความของคุณ บนแท็บการออกแบบให้ปล่อยให้การตั้งค่าทั้งหมดในการตั้งค่าเริ่มต้นของพวกเขายกเว้นการสร้างข้อความ #FFFFFF และเปลี่ยนตระกูลฟอนต์เป็น อินเตอร์
เพิ่มโมดูลเมนู
โมดูลสุดท้ายที่จะเพิ่มลงในส่วนท้ายของเราคือโมดูลเมนู เราจะเพิ่มลงในคอลัมน์ที่ถูกต้องของส่วนใหม่ของเรา คุณต้องสร้างเมนูล่วงหน้าโดยการนำทางไปยังรูปลักษณ์> เมนู เมนูส่วนท้ายนี้ควรมีข้อมูลทางกฎหมายใด ๆ ในเว็บไซต์ของคุณเช่นหน้านโยบายความเป็นส่วนตัวหรือหน้าข้อกำหนดและเงื่อนไข
ด้วยการตั้งค่าของโมดูลเมนูที่ใช้งานอยู่ให้เลือกตัวเลือกต่อไปนี้:
- เมนู: เลือกเมนูข้อมูลทางกฎหมายของคุณ
- ความเป็นมา: โปร่งใส
ในการตั้งค่าการออกแบบให้เลือกการตั้งค่าต่อไปนี้:
เค้าโครง:
- สไตล์: ฝ่ายซ้ายจัดแนว
ข้อความเมนู:
- สีลิงค์ที่ใช้งานอยู่: #ffffff
- ตัวอักษรเมนู: อินเตอร์
- เมนูสีข้อความ: #ffffff
- การจัดตำแหน่งข้อความ: ขวา
การตั้งค่าเมนูแบบเลื่อนลง:
มีเพียงไม่กี่สิ่งที่จะเปลี่ยนแปลงที่นี่เนื่องจากเมนูของคุณไม่มีลิงก์เมนูย่อย การตั้งค่าเหล่านี้จะนำไปใช้กับเมนูมือถือรุ่นของคุณเมื่อผู้คนดูไซต์ของคุณจากสมาร์ทโฟนหรือแท็บเล็ต:
- เมนูมือถือสีพื้นหลัง: #38A2DB
- เมนูข้อความมือถือสี: #ffffff
ในที่สุดเปลี่ยนสีไอคอนเมนูแฮมเบอร์เกอร์ภายใต้แท็บไอคอนเป็น #FFFFFF
เพิ่มสัมผัสการตกแต่ง
ตอนนี้การออกแบบส่วนท้ายของเราเสร็จสมบูรณ์แล้วมีการแก้ไขจรจัดไม่กี่อย่างที่เราต้องทำ ดังที่คุณจะสังเกตเห็นว่าชื่อของโมดูลการเลือกใช้อีเมลไม่ได้สอดคล้องกับเมนูบริการที่มุ่งหน้าในคอลัมน์ใกล้เคียง นั่นเป็นเพราะ Divi เพิ่มช่องว่างภายในโดยค่าเริ่มต้น ในการแก้ไขปัญหานี้ให้เปิดการตั้งค่าโมดูลตัวเลือกอีเมลและนำทางไปยังแท็บการออกแบบ ภายใต้เมนูดรอปดาวน์ระยะห่างให้เพิ่ม 0px padding ไปที่ด้านบนและด้านล่างและซ้ายและขวาเพื่อลบระยะห่างที่น่าอึดอัดใจ
สุดท้ายในขณะที่ข้อมูลลิขสิทธิ์และเมนูทางกฎหมายของเราอยู่ในแนวตั้งบนเดสก์ท็อปพวกเขาไม่ได้เข้าแถวหน้าจอขนาดเล็ก
หากต้องการแก้ไขสิ่งนี้ให้คลิก แท็บขั้นสูง สำหรับแถว ภายใต้ CSS ที่กำหนดเองให้เลือกองค์ประกอบหลักและนำทางไปยังการตั้งค่าที่ตอบสนอง ในฟิลด์ CSS เพิ่มสิ่งต่อไปนี้สำหรับแท็บเล็ต:
display:flex;
เมื่อคุณเสร็จสิ้นการเปลี่ยนแปลงให้คลิก ปุ่มบันทึกสีเขียว เพื่อบันทึกส่วนท้ายของคุณ
คลิก X ที่ด้านบนขวาของตัวสร้างธีมเพื่อออก
สุดท้ายคลิก ปุ่มบันทึกการเปลี่ยนแปลง เพื่อให้ส่วนท้ายของคุณมีชีวิตอยู่
อย่างที่คุณเห็น Divi ทำให้ง่ายต่อการออกแบบส่วนท้ายของเว็บไซต์ในไม่กี่นาที
ยกระดับส่วนท้ายของเว็บไซต์ของคุณด้วย Divi
ส่วนท้ายของเว็บไซต์ที่ออกแบบมาอย่างดีเป็นมากกว่าเพียงแค่หลังจากนั้น เป็นส่วนสำคัญของเว็บไซต์ที่ประสบความสำเร็จโดยนำเสนออสังหาริมทรัพย์ที่มีค่าสำหรับข้อมูลที่สำคัญการเสริมสร้างแบรนด์และประสบการณ์ผู้ใช้โดยรวม ด้วยการผสมผสานหลักการออกแบบที่สำคัญเช่นความสามารถในการอ่านความสอดคล้องของแบรนด์และเนื้อหาที่อุดมไปด้วย SEO คุณสามารถออกแบบส่วนท้ายที่ให้บริการผู้เข้าชมและเพิ่มสถานะออนไลน์ของคุณได้อย่างมีประสิทธิภาพ การออกแบบส่วนท้ายที่สวยงามและใช้งานได้ด้วยเครื่องมือเช่น Divi นั้นง่ายอย่างไม่น่าเชื่อ โดยทำตามขั้นตอนเหล่านี้คุณสามารถสร้างส่วนท้ายที่ตรงกับความต้องการของคุณและทิ้งความประทับใจที่ยั่งยืนให้กับผู้ชมของคุณ
เราได้สร้างตารางที่มีประโยชน์ซึ่งแสดงคุณสมบัติทั้งหมดของธีม Divi เพื่อช่วยให้คุณเข้าใจพลังที่แท้จริงของมัน
คนร่าง | ||
---|---|---|
ราคาเริ่มต้น | $ 89/ปี | เยี่ยม |
เลย์เอาต์ฟรี | 2,600+ | เรียนรู้เพิ่มเติม |
โมดูลการออกแบบ | 200 | เรียนรู้เพิ่มเติม |
Divi เว็บไซต์ด่วน | เว็บไซต์เริ่มต้นหรือเว็บไซต์ Ai ที่สร้างขึ้น | เรียนรู้เพิ่มเติม |
ผู้สร้างภาพ | ตัวสร้างหน้าลากแล้ววาง | เรียนรู้เพิ่มเติม |
ตัวสร้างธีม | ความสามารถในการแก้ไขแบบเต็มไซต์ | เรียนรู้เพิ่มเติม |
การบูรณาการอีคอมเมิร์ซ | โมดูลเฉพาะของ WooCommerce 20+ | เรียนรู้เพิ่มเติม |
การรวมชุดรูปแบบ | Divi รวมเข้ากับปลั๊กอิน WordPress ยอดนิยม | เรียนรู้เพิ่มเติม |