วิธีสร้างปุ่มไล่โทนสีหลากสีใน Elementor

คุณต้องการสร้างปุ่มไล่ระดับสีหลากสีใน Elementor ?

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

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

วิธีสร้างปุ่มไล่โทนสีหลากสีใน Elementor

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

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

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

selector .elementor-button {
  background: linear-gradient(121.28deg, #A4006C 0%, #FFECA8 100%), linear-gradient(121.28deg, #69003F 0%, #FFF8F8 100%), linear-gradient(238.72deg, #00FFFF 0%, #0212A4 100%), radial-gradient(67.16% 100% at 50% 0%, #FF00B8 0%, #FFFFFF 100%), linear-gradient(140.54deg, #7000FF 0%, #001AFF 72.37%), linear-gradient(307.43deg, #FFE927 0%, #00114D 100%), radial-gradient(107% 142.8% at 15.71% 104.5%, #FFFFFF 0%, #A7AA00 100%), #FFFFFF;
background-blend-mode: overlay, difference, difference, overlay, difference, difference, difference, normal;
}

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

บล็อกการประกาศ CSS เริ่มต้นด้วยเครื่องหมายปีกกาเปิด ( {'' ) และลงท้ายด้วยเครื่องหมายปีกกาปิด (''} ).

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

Remarque: นอกจากนี้คุณยังสามารถ สร้างชื่อการไล่ระดับสีใน Elementor .

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

สรุป

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

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

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

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

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

...