วิธีเพิ่มแบบฟอร์มติดต่อด้านล่างในหน้าทั้งหมดโดยอัตโนมัติด้วยตัวสร้างธีมของ Divi

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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

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

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

ดาวน์โหลด

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

ภาพรวมการสอน

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

1. ตั้งค่าหน้าเว็บไซต์โดยใช้ Layout Pack of Choice

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

2. ไปที่ตัวสร้างธีม Divi และเพิ่มเทมเพลตหน้าใหม่

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

ไปที่ Divi Theme Builder บนเว็บไซต์ของคุณ ที่นั่น เพิ่มเทมเพลตใหม่

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

• ใช้บน: ทุกหน้า

เริ่มสร้างเทมเพลต Body

เมื่อคุณสร้างเทมเพลตใหม่แล้ว คุณสามารถเริ่มสร้างเนื้อหาแบบกำหนดเองได้

3. เพิ่มเนื้อหาของหน้าไปยังเนื้อหาเทมเพลต

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

ระยะห่าง

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

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

เพิ่มแถวใหม่

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

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

ขนาด

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

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

ระยะห่าง

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

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

เพิ่มโมดูลเนื้อหาโพสต์ลงในคอลัมน์

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

4. เพิ่มแบบฟอร์มการติดต่อด้านล่างไปยังเนื้อหาเทมเพลต

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

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

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

• สี 1: #ffffff
• สี 2: #ffc077
• ตำแหน่งเริ่มต้น: 50%
• ตำแหน่งสุดท้าย: 50%

CSS ID

รวมรหัส CSS ด้วย

• CSS ID: ติดต่อ

เพิ่มแถวใหม่

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

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

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

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

โมดูลแรกที่เราต้องการในคอลัมน์แรกคือโมดูลข้อความ ป้อนเนื้อหาที่คุณเลือก

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

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

• หัวข้อ 2 แบบอักษร: มอนต์เซอร์รัต
• ส่วนหัว 2 น้ำหนักแบบอักษร: ตัวหนา
• หัวเรื่อง 2 สีข้อความ: #000000
• ขนาดข้อความของหัวเรื่อง 2: 70px (เดสก์ท็อป), 48px (แท็บเล็ต), 36px (โทรศัพท์)
• ส่วนหัว 2 ความสูงของบรรทัด: 1.2em

ขนาด

เพิ่มความกว้างสูงสุดด้วย

• ความกว้างสูงสุด: 750px

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

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

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

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

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

• แบบอักษรข้อความ: Cardo
• น้ำหนักแบบอักษรของข้อความ: ตัวหนา
• สีข้อความ: rgba(0,0,0,0.03)
• ขนาดตัวอักษร: 150px (เดสก์ท็อป), 100px (แท็บเล็ต), 60px (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 1em

ระยะห่าง

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

• ขอบบน: -0.8em (เดสก์ท็อป), -100px (แท็บเล็ต), -80px (โทรศัพท์)
• ระยะขอบซ้าย: -0.8em (เดสก์ท็อปและแท็บเล็ต), -60px (โทรศัพท์)

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

เพิ่มฟิลด์ที่จำเป็นทั้งหมด

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

เปลี่ยนช่องชื่อและอีเมลแบบเต็มความกว้าง

ดำเนินการต่อโดยเปลี่ยนช่องชื่อและที่อยู่อีเมลแบบเต็มความกว้าง

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

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

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

• ฟิลด์สีพื้นหลัง: #ffffff

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

แก้ไขการตั้งค่าปุ่มถัดไป

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 14px
• สีข้อความของปุ่ม: #ffffff
• สีพื้นหลังของปุ่ม: #000000 (ค่าเริ่มต้น), #ff2a38 (โฮเวอร์)
• ความกว้างของขอบปุ่ม: 8px

• ปุ่มสีเส้นขอบ: rgba(0,0,0,0)
• รัศมีเส้นขอบของปุ่ม: 0px
• ระยะห่างระหว่างตัวอักษรของปุ่ม: 2px
• น้ำหนักแบบอักษรของปุ่ม: Ultra Bold
• รูปแบบตัวอักษรของปุ่ม: ตัวพิมพ์ใหญ่
• ไอคอนปุ่ม: ค้นหาในรายการ

ชายแดน

เพิ่มรัศมีเส้นขอบด้วย

• ทุกมุม: 5px

กล่องเงา

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

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

โบนัส: เพิ่มไอคอนจุดยึดด้านล่างขวาคงที่ให้กับตัวเทมเพลต

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

ระยะห่าง

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

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

ดัชนี Z

เพิ่มดัชนี z ของส่วนด้วย เพื่อให้แน่ใจว่าไอคอนจะยังคงอยู่ที่ด้านบนของเนื้อหาหน้าทั้งหมด

• ดัชนี Z: 99999

เพิ่มแถวใหม่

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

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

ขนาด

เปิดการตั้งค่าแถวและอนุญาตให้แถวใช้ความกว้างทั้งหมดของส่วน

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

ระยะห่าง

ลบช่องว่างภายในด้านบนและด้านล่างเริ่มต้นทั้งหมดด้วย

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

เพิ่มโมดูล Blurb ให้กับคอลัมน์

เว้นช่องชื่อเรื่องและเนื้อหาว่างไว้

ในการแสดงไอคอนด้านล่างขวา เราจะใช้โมดูล Blurb ตรวจสอบว่าคุณเว้นช่องชื่อและเนื้อหาว่างไว้

เลือกไอคอน

จากนั้นเลือกไอคอนที่คุณต้องการ

ลิงค์

เชื่อมโยงไอคอนกับส่วนติดต่อโดยเพิ่ม ID ไปยัง URL ลิงก์โมดูล

• URL ลิงค์โมดูล: #contact

สีพื้นหลัง

เปลี่ยนสีพื้นหลังของโมดูลด้วย

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

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

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

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

ขนาด

แก้ไขการตั้งค่าขนาดของโมดูลด้วย

• ความกว้าง: 100px
• การจัดตำแหน่งโมดูล: ขวา

ระยะห่าง

และเพิ่ม padding ด้านบนและด้านล่างแบบกำหนดเอง

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

ชายแดน

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

• ทุกมุม: 100px

กล่องเงา

เพิ่มเงากล่องด้วย

• ความแรงของกล่องเงาเบลอ: 50px
• ความแรงของการกระจายเงาของกล่อง: -15px
• เงาสี: rgba(0,0,0,0.23)

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

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

bottom: 20px;
right: 20px;
position: fixed;

นำเสนอภาพ CSS

และลบช่องว่างภายในด้านล่างเริ่มต้นของรูปภาพของโมดูลด้วย

margin-bottom: 0px;

6. บันทึกการเปลี่ยนแปลงตัวสร้างธีมทั้งหมด & ดูตัวอย่างผล

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

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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