วิธีการเน้นรายละเอียดการติดต่อในส่วนท้ายของคุณด้วย Divi

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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

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

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

ดาวน์โหลด

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

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

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

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

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

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

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

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

สีพื้นหลัง

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

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

เพิ่มแถว #1

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

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

ขนาด

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

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

ระยะห่าง

เพิ่ม padding ด้านล่างต่อไป

• ช่องว่างภายในด้านล่าง: 1%

องค์ประกอบหลักของคอลัมน์ CSS

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

เดสก์ทอป:

display: flex;
flex-direction: row;

แท็บเล็ตและโทรศัพท์:

display: block;

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

เนื้อหาที่ปรับเปลี่ยนตามอุปกรณ์

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

วางเมาส์เหนือเนื้อหา

แก้ไขเนื้อหาโฮเวอร์ต่อไป

สีพื้นหลัง

จากนั้นใช้สีพื้นหลัง

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

โฮเวอร์สีพื้นหลัง

แก้ไขสีพื้นหลังบนโฮเวอร์

• โฮเวอร์สีพื้นหลัง: #00ff88

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

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

• หัวข้อ 3 แบบอักษร: Oswald
• ส่วนหัว 3 น้ำหนักแบบอักษร: ตัวหนา
• รูปแบบตัวอักษรของหัวเรื่อง 3: ตัวพิมพ์ใหญ่ & ขีดเส้นใต้
• การจัดแนวข้อความหัวเรื่อง 3: Center
• หัวเรื่อง 3 สีข้อความ: #000000
• หัวเรื่อง 3 ขนาดข้อความ:
  • เดสก์ท็อป: 2.5vw
  • แท็บเล็ต: 4.5vw
  • โทรศัพท์: 5.5vw

ขนาด

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

• ความกว้าง: 100%

ระยะห่าง

จากนั้น ใช้ค่าการเว้นวรรคแบบตอบสนองต่อไปนี้:

• ขอบล่าง:
  • เดสก์ทอป: /
  • แท็บเล็ตและโทรศัพท์: 1%
• ระยะขอบขวา:
  • เดสก์ท็อป: 1%
  • แท็บเล็ตและโทรศัพท์: 0%
• ช่องว่างภายในด้านบน: 10vh
• ช่องว่างภายใน: 10vh

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

ใช้โค้ด CSS บรรทัดต่อไปนี้กับโมดูลด้วย:

flex: 1;
position: relative !important;
transition: flex 800ms !important;

โฮเวอร์องค์ประกอบหลัก CSS

และเปลี่ยนคุณสมบัติ CSS flex องค์ประกอบหลักโฮเวอร์

flex: 3;

โคลนโมดูลข้อความสองครั้ง

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

แก้ไขโมดูลข้อความ #2

เปลี่ยนเนื้อหา & วางเมาส์เหนือเนื้อหา

เปิดโมดูลข้อความที่ซ้ำกันครั้งแรกและแก้ไขเนื้อหาที่ตอบสนองและโฮเวอร์

เปลี่ยนระยะห่าง

ลบระยะขอบด้านขวาของโมดูลนี้ด้วย

แก้ไขโมดูลข้อความ #3

เปลี่ยนเนื้อหา & วางเมาส์เหนือเนื้อหา

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

เปลี่ยนระยะห่าง

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

• ระยะขอบซ้าย:
  • เดสก์ท็อป: 1%
  • แท็บเล็ตและโทรศัพท์: 0%

เพิ่มแถว #2

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

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

สีพื้นหลัง

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

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

ขนาด

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

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

ระยะห่าง

แก้ไขการตั้งค่าระยะห่างของแถวด้วย

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

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

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

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

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

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

• หัวข้อ 4 แบบอักษร: Oswald
• รูปแบบตัวอักษรของหัวเรื่อง 4: ตัวพิมพ์ใหญ่
• หัวเรื่อง 4 สีข้อความ: #ffffff
• หัวเรื่อง 4 ขนาดข้อความ:
  • เดสก์ท็อป: 26px
  • แท็บเล็ต: 22px
  • โทรศัพท์: 18px
• ส่วนหัว 4 ความสูงของบรรทัด: 1.3em

ระยะห่าง

ใช้ระยะขอบด้านล่างด้วย

• ขอบล่าง: 20px

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

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

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

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

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

• แบบอักษรของลิงก์: Lato
• ลิงค์สีข้อความ: #00ff88
• ขนาดข้อความลิงก์: 17px

ระยะห่าง

ใช้ระยะขอบด้านล่างที่ตอบสนองต่อไป

• ขอบล่าง:
  • เดสก์ท็อป: 0px
  • แท็บเล็ตและโทรศัพท์: 50px

ใช้คอลัมน์ 1

ลบคอลัมน์ 2, 3 และ 4

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

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

และนำคอลัมน์แรกกลับมาใช้ใหม่โดยการโคลนสามครั้ง

เปลี่ยนเนื้อหาที่ซ้ำกันทั้งหมด

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

ลบขอบด้านล่างของโมดูลข้อความ #2 ในคอลัมน์ 4

และลบระยะขอบด้านล่างของโมดูลข้อความสุดท้ายในคอลัมน์ 4

เพิ่มแถว #3

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

ไปยังแถวถัดไปและแถวสุดท้าย ใช้โครงสร้างคอลัมน์ต่อไปนี้:

ขนาด

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

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

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

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

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

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

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

• แบบอักษรของข้อความ: Lato
• ขนาดตัวอักษร: 17px

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

โคลนโมดูลข้อความในคอลัมน์ 1 หนึ่งครั้ง และวางสำเนาในคอลัมน์ 2

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

เปลี่ยนเนื้อหาของโมดูลที่ซ้ำกัน

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

และใช้การจัดแนวข้อความตอบสนองที่แตกต่างกัน

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

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

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

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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