วิธีตั้งค่าขนาดที่กำหนดเองสำหรับไอคอนปุ่ม Elementor

วิธีกำหนดขนาดไอคอนปุ่มElementor ? ในบทช่วยสอนนี้ เราจะแสดงให้คุณเห็นถึงวิธีการทำให้สำเร็จด้วย CSS . แบบกำหนดเอง

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

ค้นพบ วิธีการติดตั้ง Elementor บน WordPress

ตามค่าเริ่มต้น วิดเจ็ตปุ่ม Elementor สามารถปรับแต่งขนาดไอคอนได้ แต่ตัวเลือกนี้จำกัดไว้ที่ห้าขนาดตัวเลือกคงที่ (เล็กพิเศษ เล็ก กลาง ใหญ่ และใหญ่พิเศษ) ไม่เพียงแต่จำกัดเพียงห้าตัวเลือกที่เลือกเท่านั้น แต่การตั้งค่าไม่ได้แยกจากกัน ซึ่งหมายความว่าเมื่อคุณต้องการตั้งค่าขนาด จะส่งผลต่อองค์ประกอบสองส่วนของปุ่ม (ไอคอนและข้อความ)

บางทีคุณอาจสงสัยว่า "เป็นไปได้ไหมที่จะกำหนดขนาดที่กำหนดเองสำหรับไอคอนปุ่ม Elementor? ” Elementor อะไรก็เกิดขึ้นได้ คุณสามารถทำได้ง่ายๆ โดยไม่ต้องใช้ส่วนเสริม

วิธีการตั้งค่าขนาดไอคอนที่กำหนดเองของปุ่ม Elementor

ก่อนเริ่มบทช่วยสอนนี้ เราต้องการแจ้งให้คุณทราบว่าบทช่วยสอนนี้จะทำงานกับ CSS ที่กำหนดเองของ Elementor ฟังก์ชัน CSS ที่กำหนดเองใช้ได้เฉพาะใน Elementor Pro.

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

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

อ่าน: Elementor: วิธีสร้างรูปร่างที่กำหนดเอง

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

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

ตกลงตอนนี้เราจะแก้ปัญหานี้ ในการตั้งค่าวิดเจ็ต ให้ไปที่แท็บ สูง -> CSS ที่กำหนดเอง.

คัดลอกข้อมูลโค้ด CSS ด้านล่างแล้ววางลงในช่อง CSS ที่กำหนดเอง.

selector .elementor-button-icon { font-size:100px; color: inherit;
}
selector .elementor-button-text {margin:auto;}

คุณปรับแต่งขนาดไอคอนได้โดยเปลี่ยนค่าข้อมูลโค้ด CSS (ดูภาพด้านล่าง)

ที่นั่น!. อย่าลืมบันทึกหรือ ประกาศ โครงการของคุณถ้าคุณต้องการ

รับ Elementor Pro ทันที!!!

สรุป

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

ส่วนเสริม Elementor ที่เราขอแนะนำคือ JetElements โดย Crocoblock JetElements มีวิดเจ็ต Elementor มากกว่า 40 รายการ คุณจะพบวิดเจ็ตปุ่มที่ให้คุณปรับแต่งขนาดของไอคอนปุ่มได้

ด้วยวิดเจ็ต ปุ่ม จาก JetElements การปรับแต่งขนาดไอคอนปุ่มทำได้ง่ายมากและราบรื่น

ดังนั้น ! บทความนี้จะแสดงวิธีกำหนดขนาดสำหรับไอคอนปุ่มของ Elementor สำหรับบทความนี้ หากคุณมีข้อกังวลใด ๆ เกี่ยวกับวิธีการเดินทางไปที่นั่น แจ้งให้เราทราบภายใน ความเห็น.

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

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

...