วิธีเพิ่มรูปภาพให้กับข้อความใน Elementor

ต้องการทราบวิธีการเพิ่มรูปภาพในข้อความใน Elementor ?

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

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

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

การเพิ่มรูปภาพไปยัง Elementor Text

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

ดูเพิ่มเติม: Elementor: วิธีเพิ่มสารบัญ

เพิ่มวิดเจ็ตชื่อในกล่องแก้ไข

ไปที่แผงการตั้งค่าเพื่อแทนที่ข้อความเริ่มต้นภายใต้แท็บ เนื้อหา.

อ่านคู่มือของเราได้ที่: Elementor: วิธีใช้ตัวเลือกสี

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

จากนั้นไปที่แท็บ สูง และเปิดบล็อค ประเพณี CSS และวางโค้ด CSS ต่อไปนี้ แทนที่ URL รูปภาพด้วย URL รูปภาพของคุณเอง

selector .elementor-heading-title
{
     background: url("https://www.wppagebuilders.com/wp-content/uploads/2020/05/gradient-progress-bar-elementor.jpg") green repeat 30% 70%  ;
     -webkit-background-clip:text;
     -webkit-text-fill-color:transparent;
}

นี่คือตัวอย่าง

รับ Elementor Pro ทันที!

สรุป

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

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

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

...