คุณต้องการสร้างปุ่มลอยโดยเปิดดัชนี Z หรือไม่? Elementor ?

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

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

ใน Elementorมีสองวิธีในการสร้างปุ่มการทำงานแบบลอย ได้แก่:

  • โดยการตั้งค่า Z-Index
  • โดยการสร้างหน้าต่างป๊อปอัป -Popup-

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

แต่ก่อนอื่น ให้ค้นหาว่า: วิธีการติดตั้ง Elementor บน WordPress

วิธีสร้างปุ่มการดำเนินการลอยตัวใน Elementor

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

กับ Elementor Proคุณยังสามารถเข้าถึงคุณสมบัติ CSS ที่กำหนดเองซึ่งเราจะใช้ในบทช่วยสอนนี้

ไปที่ตัวแก้ไข Elementor ของคุณ คุณสามารถแก้ไขเนื้อหาที่มีอยู่ของคุณ (หน้า บทความ ฯลฯ...) หรือสร้างใหม่ ในบทช่วยสอนนี้ เราจะปรับเปลี่ยนหน้า

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

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

สร้างปุ่มลอยตัวด้วยดัชนี Z

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

ไปที่แท็บ สูง. ในพารามิเตอร์ เค้าโครง, กำหนดความกว้าง บนอินไลน์ (รถยนต์) กำหนด ตำแหน่งบน Fixed, ชุด แนวนอน บน ขวา และปรับมัน décalage ตามที่ต้องการ

สร้างปุ่มลอยตัวด้วยดัชนี Z

ต่อไป เราจะกำหนดสิ่งสำคัญในวิธีนี้ ในสนาม Z-ดัชนี, ใส่หมายเลข 9999 มันจะทำให้ปุ่มอยู่ข้างหน้าเสมอ (ลอย)

สร้างปุ่มลอยตัวด้วยดัชนี Z

ตอนนี้ได้เวลาหมุนปุ่มการทำงานแบบลอยตัว อยู่ใต้แท็บเสมอ สูง, เข้าถึง คลาส css จากบล็อก แบบ, แล้วเขียน rotate ข้างใน.

ดูเพิ่มเติม: Elementor: แนะนำตัวสร้างหน้า WordPress ที่ดีที่สุด

หลังจากนั้นไปที่บล็อก CSS ที่กำหนดเอง จากนั้นวางโค้ดต่อไปนี้ลงในช่อง:

.rotate.rotate
{transform: rotate(90deg);}

คุณจะเห็นว่าปุ่มเพิ่งหมุน แต่มีช่องว่างแปลก ๆ ระหว่างด้านข้างของหน้าจอ มาแก้ไขโดยการปรับค่า décalage ที่ -92

สร้างปุ่มลอยตัวด้วยดัชนี Z

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

สร้างปุ่มลอยตัวด้วยดัชนี Z

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

อ่าน: Elementor: วิธีโยกย้ายเว็บไซต์ WordPress

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

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

รับ Elementor Pro ทันที!

สรุป

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

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

แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.

...