ข้ามไปยังเนื้อหาหลัก

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

Divi: ธีม WordPress ที่ใช้ง่ายที่สุด

Divi: ธีม WordPress ที่ดีที่สุดของเวลาทั้งหมด!

ขึ้น ดาวน์โหลด 701.000 แล้วDivi เป็นธีม WordPress ที่ได้รับความนิยมมากที่สุดในโลก สมบูรณ์และใช้งานง่ายและมาพร้อมกับเทมเพลตฟรีมากกว่า 62 [แนะนำ]

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

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

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

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

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

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

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

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

การเว้นวรรค

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

  • ขอบบนและล่าง: 50vh
  • ช่องว่างภายในด้านล่าง: 0vw
การกำหนดค่าระยะห่างของส่วน Divi 1

ความชัดเจน

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

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

ตำแหน่ง

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

  • ดัชนี Z: 10
ตำแหน่งส่วน Divi

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

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

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

แถวมีสองคอลัมน์ divi

ปรับขนาด

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

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

ความชัดเจน

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

  • ล้นแนวนอนและแนวตั้ง: มองเห็นได้
การกำหนดค่า Divi line overflow

ตำแหน่ง

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

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

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

พื้นหลัง

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

  • สีทึบ: # 25274d
สีของคอลัมน์ 1 divi

การเว้นวรรค

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

สร้างเว็บไซต์ของคุณอย่างง่ายดายด้วย Elementor

Elementor ช่วยให้คุณสร้างการออกแบบเว็บไซต์ได้อย่างง่ายดายด้วยรูปลักษณ์แบบมืออาชีพ หยุดจ่ายเงินแพงสำหรับสิ่งที่คุณสามารถทำได้ด้วยตัวเอง [ฟรี]

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

ชายแดน

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

  • มุมโค้งมน: 10px ทั้งสี่มุม
ส่วน Divi ขอบโค้งมน

ผลเลื่อน

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

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

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

ตำแหน่ง

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

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

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

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

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

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

เนื้อหา

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

โมดูลเนื้อหาคอลัมน์ 1

ข้อความชื่อ

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

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

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

เนื้อหา

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

  • ชื่อ
  • E-mail
  • วัสดุ
  • ข้อความ
เพิ่มแบบฟอร์มติดต่อ Divi

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

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

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

เดส์แชมส์

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

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

ปุ่ม

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

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

ปรับขนาด

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

  • ความกว้าง: 100%
  • ความกว้างสูงสุด: 100%
การกำหนดค่าขนาด Divi

การเว้นวรรค

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

คุณกำลังมองหาธีมและปลั๊กอิน WordPress ที่ดีที่สุดหรือไม่?

ดาวน์โหลดปลั๊กอินและธีม WordPress ที่ดีที่สุดใน Envato และสามารถสร้างเว็บไซต์ของคุณได้ง่ายๆ ดาวน์โหลดมากกว่า 49.720.000 [EXCLUSIVE]

  • เสริมด้านบน: 4vw
ระยะห่าง Divi

ชายแดน

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

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

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

เนื้อหา

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

  • Facebook
  • Twitter
  • LinkedIn
โมดูลติดตามเราบนเครือข่ายสังคม

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

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

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

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

  • สี: น้ำเงินเข้ม # 25274d
แก้ไขพื้นหลัง divi 1

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

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

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

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

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

  • ระยะขอบขวา: 1vw
การกำหนดค่าระยะห่างการแบ่งปันทางสังคม

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

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

คัดลอกองค์ประกอบสไตล์
วางองค์ประกอบสไตล์ Divi

การวางแนว

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

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

ปรับขนาด

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

  • ความกว้าง: 100%
กำหนดค่าขนาด Divi

การเว้นวรรค

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

  • ส่วนบน, ล่าง, ซ้ายและขวา: 0vw
กำหนดค่าระยะห่าง Divi

ชายแดน

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

  • มุมโค้งมน
    • ด้านซ้ายและขวา: 7 พิกเซล
    • ด้านล่างซ้ายและขวา: 0px
การกำหนดค่าเส้นขอบโมดูล Divi

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

เนื้อหา

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

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

สิ่งแวดล้อม

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

  • สี: น้ำเงินเข้ม # 25274d
การกำหนดค่าพื้นหลังโมดูลข้อความ

ตำรา

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

สร้างร้านค้าออนไลน์ได้อย่างง่ายดาย

ดาวน์โหลดฟรี WooCommerce ปลั๊กอินอีคอมเมิร์ซที่ดีที่สุดในการขายผลิตภัณฑ์ทางกายภาพและดิจิทัลของคุณบน WordPress [แนะนำ]

  • ตัวอักษร: Palanquin
  • สี: เหลือง # ffd868
  • ขนาด: 18px
แบบอักษรข้อความโมดูล Divi

การเว้นวรรค

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

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

ชายแดน

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

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

การสำรวจ

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

ส่วนติดต่อลอย

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

แหล่งข้อมูลสามารถเสริมสิ่งที่คุณเพิ่งอ่านได้ สามารถใช้เพิ่มเติมได้หรือโดยผู้ที่ไม่มีธีม Divi

จะเสร็จสิ้น

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

บทความนี้ประกอบด้วยข้อคิดเห็น 0

แสดงความคิดเห็น

ที่อยู่อีเมล์ของคุณจะไม่ถูกเผยแพร่ ช่องที่ต้องการถูกทำเครื่องหมาย *

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

กลับไปด้านบน