สร้างส่วนการติดต่อแบบลอยตัวพร้อมเอฟเฟกต์การเลื่อนบน Divi

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

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

สร้างโครงสร้างองค์ประกอบ

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

เพิ่มหัวข้อใหม่

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

ในแท็บเนื้อหาให้เพิ่มพื้นหลังของแผนที่ที่คุณสร้างใน Photoshop

• ภาพพื้นหลัง: แผนที่ที่คุณแก้ไข

การเว้นวรรค

จากนั้นปรับแต่งการตั้งค่าระยะห่างของส่วนในแท็บออกแบบ

• ขอบบนและล่าง: 50vh
• ช่องว่างภายในด้านล่าง: 0vw

ความชัดเจน

จากนั้นตั้งค่าโอเวอร์โฟลว์ให้มองเห็นได้

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

ตำแหน่ง

สุดท้ายตั้งค่าดัชนี Z ของส่วนนี้เป็น 10

• ดัชนี Z: 10

เพิ่มบรรทัดใหม่

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

ตอนนี้เป็นเวลาที่จะเพิ่มบางสิ่ง ขั้นแรกเพิ่มแถวที่มี 2 คอลัมน์

ปรับขนาด

เปิดพารามิเตอร์บรรทัดและปรับขนาดดังนี้

• ความกว้าง
  • สำนักงาน: 90%
  • แท็บเล็ตและโทรศัพท์: 80%
• ความกว้างสูงสุด: 90%

ความชัดเจน

คลิกที่แท็บขั้นสูงจากนั้นปรับการล้น

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

ตำแหน่ง

ตั้งค่าแถวให้สมบูรณ์โดยแก้ไขการตั้งค่าตำแหน่ง

• ตำแหน่ง: ญาติ
• แหล่งกำเนิดออฟเซ็ต: ซ้ายบน
• ออฟเซ็ตแนวตั้ง
  • เดสก์ท็อป: -8vw

การตั้งค่าคอลัมน์ 1

พื้นหลัง

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

• สีทึบ: # 25274d

การเว้นวรรค

ปรับการตั้งค่าระยะห่างถัดไป

• แผ่นรองบนและล่าง
  • เดสก์ท็อปและแท็บเล็ต: 7vw
• แพ็ดดิ้งซ้ายและขวา
  • เดสก์ท็อป: 3vw
  • แท็บเล็ตและโทรศัพท์: 6vw

ชายแดน

จากนั้นเพิ่มมุมโค้งมนบางส่วนในการตั้งค่าเส้นขอบ

• มุมโค้งมน: 10px ทั้งสี่มุม

ผลเลื่อน

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

• ผลการแปลงเลื่อน: เคลื่อนไหวในแนวตั้ง
• ชุดการเคลื่อนที่แนวตั้ง / เดสก์ท็อป
  • เริ่มออฟเซ็ต: 4
  • กลางออฟเซ็ต: 0 (ที่ 50%)
  • การสิ้นสุดออฟเซ็ต: -4
• การเคลื่อนที่ในแนวตั้ง / แท็บเล็ตและชุดโทรศัพท์
  • เริ่มออฟเซ็ต: 4
  • การชดเชยระดับกลาง: 0 (ที่ 40% และ 60%)
  • ออฟเซ็ตสิ้นสุด: -3
• ทริกเกอร์เอฟเฟกต์การเคลื่อนไหว: ตรงกลางขององค์ประกอบ

การตั้งค่าคอลัมน์ 2

ตำแหน่ง

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

• ตำแหน่ง: ญาติ
• ต้นกำเนิดของออฟเซ็ต: ซ้ายบน
• ชดเชยแนวตั้ง
  • สำนักงาน: 25vw

เลื่อนเอฟเฟกต์

นอกจากนี้เรายังเพิ่มการเคลื่อนไหวแนวตั้งในคอลัมน์นี้

• ผลการแปลงเลื่อน: การเคลื่อนไหวในแนวตั้ง
• กำหนดการเคลื่อนไหวแนวตั้ง / เดสก์ท็อป
  • เริ่มการชดเชย: 2
  • ค่าชดเชยเฉลี่ย: 0 (ที่ 50%)
  • ออฟเซ็ตสิ้นสุด: -2
• กำหนดการเคลื่อนที่แนวตั้ง / แท็บเล็ตและโทรศัพท์
  • เริ่มการชดเชย: 0
  • ค่าชดเชยเฉลี่ย: 0 (ที่ 50%)
  • ออฟเซ็ตสิ้นสุด: -2
• ทริกเกอร์เอฟเฟกต์การเคลื่อนไหว: องค์ประกอบด้านบน

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

เนื้อหา

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

ข้อความชื่อ

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

• ระดับชื่อเรื่อง: H2
• ตัวอักษร: Palanquin Dark
• น้ำหนักตัวอักษร: ตัวหนา
• แบบอักษร: TT
• สี: เหลือง # ffd868
• ขนาด
  • สำนักงาน: 5vw
  • แท็บเล็ต: 10vw
  • โทรศัพท์: 12vw
• ระยะห่างตัวอักษร: 4px

เพิ่มโมดูลฟอร์มผู้ติดต่อลงในคอลัมน์ 1

เนื้อหา

ใต้โมดูลข้อความ ให้เพิ่ม แบบฟอร์มติดต่อ. นี่คือฟิลด์ที่เราใช้:

• ชื่อ
• อีเมลล์
• วัสดุ
• ระบุความประสงค์หรือขอข้อมูลเพิ่มเติม

การป้องกันสแปม

ก่อนที่จะจัดแต่งทรงผมโมดูลของ แบบฟอร์มติดต่อ. เปิดใช้งานการป้องกันสแปมและเชื่อมต่อบัญชี ReCaptcha ของคุณ

• ใช้บริการป้องกันสแปม: ใช่
• ผู้ให้บริการ: ReCaptcha
• เลือกบัญชี

เดส์แชมส์

สลับไปที่แท็บออกแบบและจัดรูปแบบฟิลด์ดังนี้

• สีพื้นหลัง: สีน้ำเงินเข้ม # 25274d
• สีข้อความ: สีเทาอ่อน # d1d1d1
• โฟกัสสีพื้นหลัง: สีน้ำเงินเข้ม # 25274d
• สีข้อความของโฟกัส: เทาอ่อน # d1d1d1
• ตัวอักษร: Palanquin
• สไตล์: TT
• ขนาดตัวอักษร
  • สำนักงาน: 0.9vw
  • แท็บเล็ต: 2vw
  • โทรศัพท์: 3vw
• ระยะห่างตัวอักษร: 1px

ปุ่ม

จากนั้นทำให้ปุ่มมีสไตล์

• สไตล์ที่กำหนดเอง: ใช่
• ขนาดตัวอักษร: 20px
• สีข้อความ: น้ำเงินเข้ม # 25274d
• สีพื้นหลัง: เหลือง # ffd868
• รัศมีชายแดน: 7px
• สีไอคอน: สีน้ำเงินเข้ม # 25274d
• ขอบบน: 5px

ปรับขนาด

จากนั้นเราปรับเปลี่ยนพารามิเตอร์การปรับขนาด

• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

การเว้นวรรค

เราจะเพิ่มช่องว่างภายในด้านบน

• เสริมด้านบน: 4vw

ชายแดน

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

• ทางเข้าที่มีมุมโค้งมน: 6px ที่มุมทั้งสี่
• คอมเมนต์รูปแบบเส้นขอบ: ทั้งสี่ด้าน
• ความกว้างชายแดนทางเข้า: 2px
• รายการเส้นขอบสี: เหลือง # ffd868

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

เนื้อหา

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

• Facebook
• Twitter
• LinkedIn

ของลูกหนี้เพื้อนำมาชำระหนี

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

บริบทของบทความ

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

• สี: น้ำเงินเข้ม # 25274d

ไอคอนองค์ประกอบ

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

• สี: เหลือง # ffd868
• ขนาดตัวอักษรของไอคอน
  • โต๊ะและแท็บเล็ต: 31 พิกเซล
  • โทรศัพท์: 26 px

ระยะห่างรายการ

จากนั้นเพิ่มระยะห่างเล็กน้อยเพื่อแยกไอคอนออกจากกัน

• ระยะขอบขวา: 1vw

คัดลอกและวางสไตล์รายการ

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

การวางแนว

สลับไปที่แท็บการออกแบบหลักและตรวจสอบให้แน่ใจว่าโมดูลอยู่ในแนวซ้าย

• การจัดตำแหน่งของโมดูล: left

ปรับขนาด

จากนั้นปรับขนาดของโมดูล

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

การเว้นวรรค

ยังล้างการเติมเริ่มต้นทั้งหมด

• ส่วนบน, ล่าง, ซ้ายและขวา: 0vw

ชายแดน

สุดท้ายเพิ่มมุมโค้งมนในการตั้งค่าเส้นขอบ การดำเนินการนี้จะปรับเส้นขอบของไอคอนทั้งหมดพร้อมกัน

• มุมโค้งมน
  • ด้านซ้ายและขวา: 7 พิกเซล
  • ด้านล่างซ้ายและขวา: 0px

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

เนื้อหา

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

• พื้นที่ทั่วไป: 1587 สุขุมวิทซอย 21 กรุงเทพฯประเทศไทย
• จุดขาย : ศูนย์การค้าเอ็มโพเรียมชั้น 2
• โทรศัพท์: (321) 564 2398
• อีเมล์: [ป้องกันอีเมล]

สิ่งแวดล้อม

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

• สี: น้ำเงินเข้ม # 25274d

ตำรา

สลับไปที่แท็บออกแบบและจัดรูปแบบข้อความ

• ตัวอักษร: Palanquin
• สี: เหลือง # ffd868
• ขนาด: 18px

การเว้นวรรค

เพิ่มค่าระยะห่างที่กำหนดเอง

• ส่วนต่างกำไรสูงสุด
  • สำนักงาน: -60px
  • แท็บเล็ตและโทรศัพท์: -50 พิกเซล
• ด้านบน, ล่าง, ซ้ายและขวาช่องว่างภายใน
  • สำนักงาน: 3vw
  • แท็บเล็ต: 6vw
  • โทรศัพท์: 8vw

ชายแดน

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

• มุมโค้งมน: 10 พิกเซลที่ด้านขวาบนซ้ายล่างและล่างขวา

การสำรวจ

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

แหล่งข้อมูลเพิ่มเติม

C'est บริการสารสนเทศ อาจเสริมกับสิ่งที่คุณเพิ่งอ่าน สามารถใช้เพิ่มเติมหรือโดยผู้ที่ไม่มี ธีม Divi.

• วิธีการเพิ่มแบบฟอร์มการติดต่อป๊อปอัพใน WordPress
• วิธีเพิ่มแบบฟอร์มดรอปดาวน์บนส่วนหัวส่วนกลางบน Divi
• 5 ปลั๊กอินเพื่อสร้างแบบฟอร์มการติดต่อ

จะเสร็จสิ้น

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