วิธีสร้างแถบ Sticky Footer ด้วยตัวเลือก Sticky ของ Divi

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

ดาวน์โหลดเทมเพลต Global Footer ฟรี

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

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

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

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

ดาวน์โหลด

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

1. สร้างเทมเพลตส่วนท้ายใหม่

ไปที่ตัวสร้างธีม Divi และเพิ่มส่วนท้ายใหม่หรือส่วนท้ายที่กำหนดเอง

เริ่มต้นด้วยการไปที่ Divi Theme Builder ที่ส่วนหลังของเว็บไซต์ WordPress ของคุณ ที่นั่น ให้เพิ่มส่วนท้ายส่วนกลางหรือส่วนท้ายแบบกำหนดเองใหม่

เริ่มสร้างตั้งแต่เริ่มต้น

เริ่มสร้างเทมเพลตส่วนท้ายตั้งแต่เริ่มต้น

2. สร้างการออกแบบส่วนท้าย

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

สีพื้นหลัง

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

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

เพิ่มแถว #1

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

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

สีพื้นหลัง

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

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

ขนาด

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

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 90%
• ความกว้างสูงสุด: 2580px
• การจัดแนวแถว: กึ่งกลาง

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 5px (แท็บเล็ตและโทรศัพท์เท่านั้น)
• ช่องว่างภายในด้านล่าง: 5px (แท็บเล็ตและโทรศัพท์เท่านั้น)

ชายแดน

ถัดไป เพิ่มมุมโค้งมนที่ตอบสนองต่อการตั้งค่าเส้นขอบ

• ทุกมุม:
  • เดสก์ท็อป: 30px
  • แท็บเล็ตและโทรศัพท์: 15px

ล้น

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

• ล้นแนวนอน: มองเห็นได้
• ล้นแนวตั้ง: มองเห็นได้

การมองเห็นคอลัมน์ 1 และ 3

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

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

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

ได้เวลาเพิ่มโมดูล โดยเริ่มจากโมดูล Blurb ในคอลัมน์ 1 เพิ่มเนื้อหาที่คุณเลือก

เลือกไอคอน

เลือกไอคอนถัดไป

การตั้งค่าไอคอน

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

• สีไอคอน: #f5d72e
• ไอคอนวงกลม: ใช่
• วงกลม สี: #000000
• ตำแหน่งรูปภาพ/ไอคอน: ด้านบน
• การจัดตำแหน่งรูปภาพ/ไอคอน: กึ่งกลาง
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 32px

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

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

• การจัดตำแหน่งข้อความ: กึ่งกลาง
• สีข้อความ: เบา

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

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

• แบบอักษรของชื่อเรื่อง: Poppins
• ชื่อข้อความสี: #000000

การตั้งค่าข้อความเนื้อหา

แก้ไขการตั้งค่าข้อความเนื้อหาด้วย

• แบบอักษรของร่างกาย: Poppins
• น้ำหนักแบบอักษรของร่างกาย: Ultra Bold
• ขนาดข้อความ: 20px

ขนาด

ใส่ความกว้างของเนื้อหาเป็น "100%" ในการตั้งค่าการปรับขนาดถัดไป

• ความกว้างของเนื้อหา: 100%

ระยะห่าง

หากต้องการสร้างการทับซ้อน ให้เพิ่มระยะขอบบนที่เป็นค่าลบในการตั้งค่าระยะห่าง

• ขอบบน: -60px

แอนิเมชั่น

และทำการตั้งค่าโมดูลให้สมบูรณ์โดยลบแอนิเมชั่นไอคอนในการตั้งค่าแอนิเมชั่น

• แอนิเมชั่นรูปภาพ/ไอคอน: ไม่มีแอนิเมชั่น

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

เมื่อคุณสร้าง Blurb Module แรกในคอลัมน์ 1 เสร็จแล้ว ให้โคลน 1 ครั้งแล้ววางสำเนาในคอลัมน์ 3

เปลี่ยนเนื้อหาและไอคอน

เปลี่ยนเนื้อหาและไอคอนสำหรับรายการที่ซ้ำกัน

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

เลือกไอคอน

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

สีพื้นหลัง

เพิ่มสีพื้นหลังต่อไป

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

การตั้งค่าไอคอน

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

• สีไอคอน: #ffffff
• ตำแหน่งรูปภาพ/ไอคอน: ด้านบน
• การจัดตำแหน่งรูปภาพ/ไอคอน: กึ่งกลาง
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 30px

ขนาด

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

• ความกว้าง: 70px
• การจัดตำแหน่งโมดูล: ศูนย์
• ส่วนสูง: 40px

ระยะห่าง

จากนั้น ใช้ค่าระยะขอบและช่องว่างภายในแบบกำหนดเองกับขนาดหน้าจอต่างๆ

• ขอบบน: -20px (แท็บเล็ตและโทรศัพท์เท่านั้น)
• ช่องว่างภายในด้านบน: 5px
• ช่องว่างภายในด้านล่าง: 0px

ชายแดน

ถัดไป เพิ่มมุมโค้งมนให้กับการตั้งค่าเส้นขอบ

• ทุกมุม: 10px

แอนิเมชั่น

และลบแอนิเมชั่นเริ่มต้นในการตั้งค่าแอนิเมชั่น

• แอนิเมชั่นรูปภาพ/ไอคอน: ไม่มีแอนิเมชั่น

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

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

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

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

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

• น้ำหนักแบบอักษรของข้อความ: กึ่งหนา
• ขนาดตัวอักษร: 18px
• ความสูงของบรรทัดข้อความ: 1.8em
• การจัดตำแหน่งข้อความ: กึ่งกลาง

เพิ่มแถว #2

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

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

ขนาด

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

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

ระยะห่าง

เพิ่มระยะขอบด้านบนและด้านล่างบางส่วนต่อไป

• ขอบบน: 50px
• ขอบล่าง: 50px

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

อัพโหลดภาพ

เพิ่มโมดูลรูปภาพในคอลัมน์ 1 และอัปโหลดโลโก้หรือรูปภาพประเภทใดก็ได้ที่คุณเลือก

ขนาด

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

• ความกว้าง: 59%
• การจัดตำแหน่งโมดูล: ซ้าย

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

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

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

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

เปลี่ยนการตั้งค่าข้อความ H3 ของโมดูลดังนี้:

• หัวข้อ 3 แบบอักษร: Poppins
• ส่วนหัว 3 น้ำหนักแบบอักษร: ตัวหนา
• หัวเรื่อง 3 สีข้อความ: #6d6d6d

Clone Text Module 3x & กระจายทั่วคอลัมน์ 3 & 4

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

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

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

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

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

เพิ่มโมดูลข้อความอื่นด้านล่างโมดูลข้อความก่อนหน้าในคอลัมน์ 2 และเพิ่มเนื้อหาที่เชื่อมโยงบางส่วนที่คุณเลือก

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

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

• แบบอักษรของข้อความ: Poppins
• ขนาดตัวอักษร: 30px
• ความสูงของบรรทัดข้อความ: 1em
• การจัดตำแหน่งข้อความ: ซ้าย
• สีข้อความ: เบา

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

เปลี่ยนสีข้อความลิงค์ด้วย

• สีของข้อความลิงก์: #ffffff

โคลนโมดูลข้อความตามต้องการ

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

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

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

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

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

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

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

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

• แบบอักษรของข้อความ: Poppins
• ขนาดตัวอักษร: 22px
• ความสูงของบรรทัดข้อความ: 1em
• การจัดตำแหน่งข้อความ: ซ้าย
• สีข้อความ: เบา

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

แก้ไขสีข้อความลิงค์ด้วย

• ลิงค์สีข้อความ: #ea6c01

โคลนโมดูลข้อความตามต้องการ

โคลนโมดูลนี้หลายครั้งเท่าที่คุณต้องการ

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

และแน่นอน เปลี่ยนเนื้อหาและลิงก์ตามต้องการ

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

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

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

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

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

• แบบอักษรของข้อความ: Poppins
• ขนาดตัวอักษร: 16px
• ความสูงของบรรทัดข้อความ: 1.8em
• การจัดตำแหน่งข้อความ: ซ้าย
• สีข้อความ: เบา

เพิ่มโซเชียลมีเดียตามคอลัมน์ 4

เพิ่มเครือข่ายโซเชียลทางเลือก

จากนั้น เพิ่ม Social Media Follow Module ที่ส่วนท้ายของคอลัมน์ เพิ่มเครือข่ายโซเชียลที่คุณเลือก

ลบสีพื้นหลังของโซเชียลเน็ตเวิร์กแต่ละแบบแยกกัน

ลบสีพื้นหลังของแต่ละเครือข่ายโซเชียลแยกกัน

ระยะห่าง

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

• ขอบบน: -15px
• ระยะขอบซ้าย: -8px

เพิ่มแถว #3

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

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

ขนาด

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

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 2
• ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่
• ความกว้างสูงสุด: 2580px

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

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

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

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

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

• แบบอักษรของข้อความ: Poppins
• สีข้อความ: #595959
• ขนาดตัวอักษร: 13px
• การจัดตำแหน่งข้อความ: กึ่งกลาง

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

แก้ไขสีข้อความลิงค์ด้วย

• ลิงค์สีข้อความ: #595959

Clone Text Module สองครั้ง & วางซ้ำในคอลัมน์ที่เหลือ

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

เปลี่ยนการจัดแนวข้อความ

เปลี่ยนการจัดแนวข้อความสำหรับโมดูลข้อความที่ซ้ำกันแต่ละโมดูลตามลำดับ:

• โมดูลข้อความในคอลัมน์ 2:
  • เดสก์ท็อป: ศูนย์
  • แท็บเล็ตและโทรศัพท์: ซ้าย

• โมดูลข้อความในคอลัมน์ 3:
  • เดสก์ท็อป: ถูกต้อง
  • แท็บเล็ตและโทรศัพท์: ซ้าย

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

และเปลี่ยนเนื้อหาในโมดูลที่ซ้ำกันทั้งสองเช่นกัน

3. ใช้เอฟเฟกต์ Sticky กับแถบส่วนท้าย

เปิดแถว #1 & ใช้การตั้งค่าติดหนึบ

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

• ตำแหน่งติดหนึบ: ติดที่ด้านล่าง
• ออฟเซ็ตล่างหนึบ:
  • เดสก์ท็อป: 50px
  • แท็บเล็ตและโทรศัพท์: 20px

สไตล์ปักหมุดแถว

สีพื้นหลัง

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

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

ใช้รูปแบบที่ติดหนึบกับโมดูล Blurb ในคอลัมน์ 1 & 3

การตั้งค่าไอคอน

ถัดไป เปิดโมดูล Blurb ในคอลัมน์ 1 และ 3 แล้วเพิ่มสีวงกลมแบบติดหนึบ

• สี Sticky Circle: #ea6c01

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

เพิ่มสีข้อความหัวเรื่องด้วย

• สีข้อความชื่อติดหนึบ: #ea6c01

ใช้รูปแบบที่ติดหนึบกับโมดูล Blurb ในคอลัมน์ 2

สีพื้นหลัง

จากนั้นเปิดโมดูล Blurb ในคอลัมน์ 2 และใช้สีพื้นหลังแบบติดหนึบ

• สีพื้นหลังแบบติดหนึบ: #ea6c01

4. บันทึกการเปลี่ยนแปลงตัวสร้างเทมเพลตและธีมทั้งหมด

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

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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