วิธีสร้าง Divi Mobile Contact Bar ด้วย Click-to-Call, Email, SMS และ Direction Links

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

ในบทช่วยสอนนี้ เราจะแสดงวิธีสร้างแถบติดต่อมือถือ Divi ด้วยลิงก์คลิกเพื่อโทร อีเมล SMS และเส้นทาง ในการทำเช่นนี้ เราจะใช้ตัวสร้าง Divi เพื่อออกแบบแถบและปุ่มในส่วนท้ายส่วนกลาง จากนั้นเราจะเพิ่ม URL ที่กำหนดเองให้กับลิงก์ติดต่อแต่ละลิงก์เพื่อนำฟังก์ชันที่เราต้องการกลับบ้าน

มาเริ่มกันเลย!

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ เกี่ยวกับการออกแบบที่เราจะสร้างในบทช่วยสอนนี้

ดาวน์โหลดเค้าโครงฟรี

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

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

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

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

ดาวน์โหลด

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

วิธีเพิ่มเทมเพลตแถบติดต่อถาวรดาวน์โหลดไปยังไซต์ Divi ของคุณ

คำเตือน!: การเพิ่มเทมเพลตนี้จะแทนที่เทมเพลตเว็บไซต์เริ่มต้น (หากมี) บนไซต์ Divi ของคุณ เราขอแนะนำให้เพิ่มสิ่งนี้ลงในไซต์ทดสอบ เพื่อไม่ให้คุณทำอะไรผิดพลาดในไซต์ที่ใช้งานจริง

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

จากนั้นไปที่ WordPress Dashboard และไปที่ Divi > Theme Builder

จากนั้นคลิกไอคอนการพกพาที่ด้านบนขวาของหน้า

ภายในป๊อปอัปการพกพา ให้เลือกไฟล์ JSON ที่คุณเพิ่งคลายซิปแล้วเลือกตัวเลือก “ดาวน์โหลดข้อมูลสำรองก่อนนำเข้า” ในกรณีที่คุณมีบางอย่างในเทมเพลตเว็บไซต์เริ่มต้นก่อนหน้านี้ที่คุณไม่ต้องการแทนที่

จากนั้นคลิกปุ่มนำเข้า

สุดท้าย บันทึกการเปลี่ยนแปลง Theme Builder และดูหน้าสดเพื่อดูแถบส่วนท้ายคงที่

เอาล่ะ ไปที่บทช่วยสอนกันเลยดีกว่าไหม

ส่วนที่ 1: การสร้างส่วนท้ายส่วนกลาง

สำหรับบทช่วยสอนนี้ เราจะเพิ่มแถบติดต่อสำหรับอุปกรณ์เคลื่อนที่ที่ส่วนท้ายส่วนกลางโดยใช้ Divi Theme Builder เริ่มต้นด้วยการไปที่ Divi > Theme Builder จากนั้นคลิก Global Footer Area ภายในเทมเพลตเว็บไซต์เริ่มต้น จากดรอปดาวน์ ให้เลือกสร้างส่วนท้ายส่วนกลาง

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

เลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น"

ส่วนที่ 2: การสร้างแถบเนื้อหาคงที่

ภายใน Global Footer Layout Editor ให้เริ่มกระบวนการออกแบบโดยการเพิ่มแถวหนึ่งคอลัมน์ไปยังส่วนเริ่มต้น

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

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

• ส่วนสูง: 80px

นี่เป็นสิ่งสำคัญสำหรับการสร้างช่องว่างที่ด้านล่างของหน้าซึ่งในที่สุดแถวคงที่จะหยุดนิ่ง เราจะนำช่องว่างภายในด้านบนและด้านล่างเริ่มต้นออกด้วย

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

การตั้งค่าแถว

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

พื้นหลัง

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

ขนาด

• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%
• ส่วนสูง: สืบทอด

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

ระยะห่าง

• ช่องว่างภายใน: 0px บน, 0px ล่าง, 15% ซ้าย, 15% ขวา

CSS ที่กำหนดเอง

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

display:flex;
flex-wrap:nowrap;
align-items:center;

ตำแหน่งคงที่

ในการทำให้แถวคงที่เพื่อให้ลอยอยู่ที่ด้านล่างของหน้าจอ เราต้องกำหนดตำแหน่งคงที่ที่ตำแหน่งล่างซ้ายดังนี้:

• ตำแหน่ง: คงที่
• ตำแหน่ง: ล่างซ้าย
• ดัชนี Z: 99999

ส่วนที่ 3: การสร้าง Call-to-Click, Email, SMS และ Direction Links

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

การออกแบบปุ่มคลิกเพื่อโทร

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

เนื้อหา

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

• ชื่อเรื่อง: Call
• ใช้ไอคอน: ใช่
• ไอคอน: โทรศัพท์

พื้นหลัง

ให้สีพื้นหลังสีขาว:

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

การตั้งค่าการออกแบบ

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

ไอคอน

• ไอคอนสี: #751136
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 2em

แบบอักษรชื่อเรื่อง

• รูปแบบตัวอักษร Tite: TT
• การจัดตำแหน่งข้อความชื่อเรื่อง: Center
• ชื่อข้อความสี: #751136
• ขนาดข้อความชื่อเรื่อง: 1em

ขนาดตัวอักษร

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

อัปเดตข้อความเนื้อหาดังนี้:

• ขนาดข้อความเนื้อหา: 12px

ขนาด

กำหนดความสูงและความกว้างของการนำเสนอดังนี้:

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

ช่องว่างภายในและมุม

• บุนวม: 0.5em ด้านบน

กล่องเงา

• กล่องเงา: ดูภาพหน้าจอ
• กล่องเงาตำแหน่งแนวนอน: 0px
• ตำแหน่งแนวตั้งเงาของกล่อง: 2px
• เงาสี: rgba(255,255,255,0.55)

CSS ที่กำหนดเอง

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

display:flex;
align-items:center;

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

margin-bottom: 0.3em;

การเพิ่ม URL ลิงค์การโทร

ในการเพิ่ม URL ลิงก์การโทรที่จะเริ่มต้นการโทรบนโทรศัพท์มือถือ ให้เพิ่มหมายเลขหลังคำนำหน้า "tel:"

• โมดูลลิงค์ URL: tel:555-555-5555

การออกแบบปุ่มอีเมล

หากต้องการสร้างปุ่มอีเมล ให้ทำซ้ำทั้งคอลัมน์

การเพิ่มไอคอนอีเมลและลิงค์ URL

จากนั้นอัปเดตคำประกาศที่ซ้ำกันในคอลัมน์ 2 ด้วยชื่อและไอคอนใหม่

ในการเพิ่ม URL ลิงก์การโทรที่จะเริ่มต้นอีเมลในแอพมือถือ ให้เพิ่มที่อยู่อีเมลหลังคำนำหน้า “mailto:”

• โมดูลลิงค์ URL: mailto:[ป้องกันอีเมล]

การออกแบบปุ่ม SMS (ข้อความ)

หากต้องการสร้างปุ่ม SMS ให้ทำซ้ำคอลัมน์ 2

การเพิ่มไอคอน SMS และ URL ลิงค์

จากนั้นอัปเดตคำประกาศที่ซ้ำกันในคอลัมน์ 2 ด้วยชื่อและไอคอนใหม่

ในการเพิ่ม URL ลิงก์การโทรที่จะเริ่มต้นอีเมลในแอพมือถือ ให้เพิ่มที่อยู่อีเมลหลังคำนำหน้า “sms:”

• URL ลิงค์โมดูล: sms:+155555555

การออกแบบปุ่มทิศทาง

ในการสร้างปุ่ม SMS ให้ทำซ้ำคอลัมน์ 3

การเพิ่มไอคอนเส้นทางและลิงค์ URL

จากนั้นอัปเดตคำประกาศที่ซ้ำกันในคอลัมน์ 3 ด้วยชื่อและไอคอนใหม่

ในการเพิ่ม URL ลิงก์การโทรที่จะเริ่มต้นเส้นทางผ่าน Google Maps ให้ใช้โครงสร้าง URL ทิศทางเหล่านี้

สำหรับบทช่วยสอนนี้ เราจะเพิ่มลิงก์เส้นทางที่จะสร้างเส้นทางจากตำแหน่งปัจจุบันของผู้ใช้ไปยัง GooglePlex ใน Mountain View, CA

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

  https://www.google.com/maps/dir/?api=1&destination=1600+amphitheatre+pkwy+mountain+view+CA

ในการเพิ่มที่อยู่ของคุณเองลงใน URL ให้แทนที่ข้อความหลัง “destination=” ใน URL ตรวจสอบให้แน่ใจว่าได้แยกคำด้วยเครื่องหมายบวก (“+”)

การคลิกปุ่มควรให้สิ่งที่คล้ายกันกับคุณ ...

ซ่อนส่วนบนเดสก์ท็อป

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

• ปิดการใช้งานบน: เดสก์ท็อป

ผลลัพธ์สุดท้าย

ลิงค์ติดต่อเพิ่มเติม

ด้วย HTML5 คุณจะไม่จำกัดหมายเลขโทรศัพท์ คุณสามารถเพิ่มคำกระตุ้นการตัดสินใจอื่นๆ เช่น อีเมล การส่งข้อความ แฟกซ์ ฯลฯ โปรโตคอล HTML5 ได้แก่:

tel: – โทรออก
mailto: – เปิดแอปอีเมล
โทร: เปิด Skype
sms: – ส่งข้อความ
แฟกซ์: – ส่งแฟกซ์

และหากต้องการ คุณสามารถเพิ่มลิงก์ Waze เป้าหมายสำหรับ URL เส้นทางได้

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

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

สำหรับข้อมูลเพิ่มเติม โปรดดูโพสต์ของเราที่ ลิงก์โทรศัพท์

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!