วิธีเพิ่มการ์ด Floating About ลงในไซต์ Divi ของคุณ

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

ดูตัวอย่าง

เดสก์ทอป

มือถือ

1. สร้างเทมเพลตเพจ

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

ใช้ตัวสร้างธีมเพื่อสร้างเทมเพลต

ในการเริ่มต้น ให้ไปที่ Divi – Theme Builder ในแดชบอร์ด WordPress ของคุณ เลือกส่วน Custom Body ของหน้าที่คุณต้องการใช้ Floating about card หรือ Global Body เพื่อนำไปใช้กับทุกที่

เมื่อคุณโหลด Divi Visual Builder แล้ว ให้เลือก Start from Scratch เมื่อมีตัวเลือก

เพิ่ม 1-Column Row และ Post Content Module

จากนั้นเลือกแถวคอลัมน์เดียวเมื่อได้รับแจ้ง

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

ปรับมาตราและระยะห่างแถว

เมื่อมีสิ่งเหล่านี้ เราจำเป็นต้องทำการปรับระยะห่างสองสามครั้ง ไปที่การตั้งค่า ส่วน (เส้นขอบสีน้ำเงินในตัวสร้าง Divi) และลบช่องว่างภายในด้านบนและด้านล่างทั้งหมด คุณทำได้ภายใต้แท็บ Design ส่วนหัว Spacing แล้วตั้งค่า 0px เป็น Top และ Bottom ภายใต้ Padding

บันทึกการเปลี่ยนแปลงของคุณและป้อนการตั้งค่า แถว อีกครั้ง ตั้งค่าการเติมด้าน บน และ ด้านล่าง เป็น 0px

ถัดไป ให้ค้นหาหัวข้อ การปรับขนาด และสลับ Use Custom Gutter Width และตั้งค่าเป็น 1 จากนั้นตั้งค่า Width และ Max Width เป็น 100%

เมื่อเตรียมการเสร็จแล้ว มาเริ่มทำการ์ดลอยตัวกันเถอะ!

2. เพิ่มบัตรลอย

เพิ่มส่วนใหม่และแถว

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

เพิ่มโมดูล Blurb

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

ปรับการตั้งค่าส่วนและแถว

เมื่อเข้าที่แล้ว เราจำเป็นต้องปรับช่องว่างภายในและตำแหน่งของแถวและส่วนนี้ ก่อนอื่น ให้ไปที่การตั้งค่า Section และตั้งค่า Top and Bottom Padding เป็น 0px ภายใต้ Display – Spacing

จากนั้นภายใต้แท็บ ขั้นสูง ให้ค้นหาส่วนหัวของ ตำแหน่ง ตั้งค่า ดัชนี Z เป็น 12 ยิ่งตัวเลขสูง หน้าส่วนและเนื้อหาก็จะยิ่งอยู่ข้างหน้า และเนื่องจากเป็นการ์ดแบบลอย เราจึงต้องการให้การ์ดลอยเหนือองค์ประกอบอื่นๆ ทั้งหมด

สุดท้าย ไปที่การตั้งค่า Row และตั้งค่า padding ที่ด้าน บน และ ด้านล่าง เป็น 0px อีกครั้ง

เนื้อหาโมดูล Blurb

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

ตั้งค่าสีพื้นหลัง

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

เลือกรูปการ์ด

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

กำหนดมุมการ์ด

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

การจัดตำแหน่งข้อความ

ภายใต้ส่วนหัวของ ข้อความ ให้ตั้งค่าการ จัดแนวข้อความ ให้อยู่ตรงกลาง

จัดรูปแบบข้อความชื่อการ์ดลอย

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

• แบบอักษร: Poppins
• น้ำหนักแบบอักษร: ตัวหนา
• สีข้อความ: # 22303f
• ขนาดตัวอักษร: 20px
• ความสูงของสาย: 1.3em

จากนั้น เราต้องเข้าไปที่ Responsiveness settings และเปลี่ยนขนาดของชื่อสำหรับอุปกรณ์มือถือ เปลี่ยน ขนาดข้อความของชื่อเรื่อง เป็น 14px

จัดรูปแบบข้อความของการ์ด

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

จากนั้นคลิกที่แท็บ ลิงก์ (ไอคอนลูกโซ่) และสลับ สีของข้อความลิงก์ เป็นสีเสริมสำหรับไซต์ของคุณ เราเลือก #97c357 .

การปรับขนาดบัตรเกี่ยวกับ

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

• ความกว้างของภาพ: 75%
• ความกว้างของเนื้อหา: 25vw
• ความกว้าง: 25vw
• ความกว้างสูงสุด: 30vw

ภายใต้การตั้งค่าการตอบสนอง ให้ปรับค่าต่อไปนี้:

• ความกว้างของเนื้อหา: 90vw
• ความกว้าง: 90vw
• ความกว้างสูงสุด: 95vw

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

ระยะห่างสำหรับ Blurb

หัวข้อ Spacing เป็นการแก้ไขด่วน โดยคุณต้องตั้งค่า Left Margin เป็น 0px , Top and Bottom Padding เป็น 2vw และ Padding ซ้าย และ ขวา เป็น 1vw

สำหรับการตั้งค่าที่ตอบสนอง เฉพาะการเติมด้าน บน และ ด้านล่าง เท่านั้นที่จะเปลี่ยนแปลง เราจะตั้งค่าเหล่านี้ที่ 5%

เพิ่มกล่องเงา

เนื่องจากการ์ดลอยตัวจะติดอยู่ที่ตำแหน่ง เราต้องการให้การ์ดดูเหมือนลอยอยู่เหนือเนื้อหาของคุณจริงๆ เอฟเฟกต์นี้ง่ายพอโดยการเพิ่มเงากล่องพื้นฐานให้กับโมดูล ตัวเลือกนี้อยู่ภายใต้ Box Shadow และเราเลือกเงาด้านล่างพื้นฐาน

การปรับ CSS ที่ตอบสนอง

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

ดังนั้นเราจึงต้องการเพิ่ม display:none; ใต้ฟิลด์ Blurb Image สำหรับอุปกรณ์พกพาเท่านั้น ภายใต้ Custom CSS

แก้ไขและลอยการ์ดด้วยการตั้งค่าตำแหน่ง

สุดท้าย เราจะวางตำแหน่งการ์ดในตำแหน่งที่ต้องการให้ลอย อันดับแรก เราต้องการไปที่แท็บ Advanced และเลื่อนไปที่ Position เลือก แก้ไข จากเมนูดรอปดาวน์

ถัดไป ค้นหาตัวเลือก ตำแหน่ง นี่คือจุดบนหน้าจอที่ไพ่ลอยอยู่ สำหรับเดสก์ท็อป เราต้องการให้อยู่ที่มุมล่างของหน้าจอ ดังนั้นเราจึงคลิกสี่เหลี่ยมที่สัมพันธ์กับสิ่งนั้น เรายังต้องการให้ออฟเซ็ตเล็กน้อยจากขอบหน้าต่าง ดังนั้นเราจะเปลี่ยน Vertical Offset เป็น 3% และ Horizontal Offset เป็น 2%

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

นอกจากนี้ เราจะเปลี่ยนเฉพาะ Vertical Offset สำหรับมือถือเท่านั้น ตั้งค่านี้เป็น 3% ไม่จำเป็นต้องออฟเซ็ตแนวนอนเพราะเป็นความกว้างของหน้าจอมือถือและอยู่ตรงกลาง

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

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

เดสก์ทอป

มือถือ

บทสรุป

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

คุณใช้การ์ดลอยเพื่อทำอะไรในเว็บไซต์ของคุณ? แจ้งให้เราทราบในความคิดเห็น!