คุณเคยคิดบ้างไหมว่าคุณรู้วิธีแสดงข้อความเหนือภาพด้วย Elementor ?

ในบทช่วยสอนใหม่นี้ เราจะแสดงวิธีการทำ

หากคุณไม่รู้ว่าเราจะพูดถึงเรื่องอะไรในวันนี้ เราขอเชิญคุณชมวิดีโอต่อไปนี้:

ถ้าอย่างนั้นเราก็กลับไปดูว่าทำไมเราถึงมาที่นี่

เพื่อให้บทช่วยสอนนี้สมบูรณ์ คุณจะต้อง Elementor เวอร์ชัน Proเนื่องจากเราจะใช้โค้ด CSS ที่กำหนดเองซึ่งรองรับโดย . เวอร์ชันนี้เท่านั้นElementor.

ค้นพบคำแนะนำของเราเกี่ยวกับ: วิธีสร้างแกลเลอรีรูปภาพด้วย Elementor

มาสร้างส่วนใหม่ที่มีโครงสร้าง 3 คอลัมน์กัน จากนั้นในแผง เรามากำหนด การวางฟอร์ม sur ความสูงขั้นต่ำแล้วก็ ความสูงขั้นต่ำ คลิกเลย VH และตั้งค่าตัวเลื่อนไปที่ 100.

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

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

อ่าน: Elementor: วิธีซูมการ์ดโปรไฟล์

จากนั้นบน การจัดแนวแนวตั้ง มาเลือกกัน สภาพแวดล้อม.

จากนั้นวาง วิดเจ็ตชื่อเรื่อง ใน ส่วนด้านใน เข้าเป็น Title Photograph กันเถอะ และเลือก Alignment กันเถอะ ศูนย์.

ในแท็บ สไตล์ มาปรับเปลี่ยนสีของ Title ให้มองเห็นได้ถ้าไม่ใช่

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

ดูสิ่งนี้ด้วย: Elementor: วิธีเพิ่มตัวแบ่งเพื่อสร้างส่วน

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

ในส่วน ชายแดน มาแก้ไขทั้งหมดกันเถอะ รัศมีเส้นขอบจาก12. ใน กล่องเงา, ตั้งค่าตัวเลื่อนไปที่ 0 สำหรับ ตามแนวนอน, To 0 สำหรับแนวตั้ง, ถึง 40 บน Blur ถึง -10 ออกอากาศ คุณควรเห็นเอฟเฟกต์เงาที่สวยงามใต้ภาพของคุณ

เกี่ยวกับ ซ้อนทับพื้นหลัง, เลือก คลาสสิก เพื่อ ประเภทพื้นหลัง และ Couleur เลือกอย่างหนึ่ง สีดำ, บนความทึบ ให้ตั้งค่าตัวเลื่อนเป็น 0.55

ในแท็บ สูง, มาคว้า 20 สำหรับมาร์จิ้นทั้งหมด

มาเลือกของเรา ส่วนภายใน และไปที่แท็บของมัน สูง ในส่วน CSS ที่กำหนดเอง ให้คัดลอกและวางข้อมูลโค้ดต่อไปนี้:

/*Afficher ou masquer un contenu au survol*/
selector{
    opacity: 0;
    transition: 0.5s ease-in-out;
}
selector:hover{
    opacity: 1;
}

(หากคุณไม่มีส่วนนี้ แสดงว่าคุณไม่มีเวอร์ชัน Pro หากคุณต้องการดำเนินการต่อ คุณต้องอัปเกรดเวอร์ชันของคุณ)

เลือกคอลัมน์กลางของส่วนของเราอีกครั้งในแท็บ สไตล์และในส่วน ซ้อนทับพื้นหลังตรวจสอบว่าเราอยู่บนแท็บ ปกติ, มาลงกันเถอะ ความทึบ à 0.

จากนั้นคลิกที่แท็บ ภาพรวมจากนั้นในวัน คลาสสิก เพื่อ ประเภทพื้นหลัง และ Couleur, เลือก สีเข้มจากนั้นความทึบ sur 0.55, และสำหรับ ระยะเวลาการเปลี่ยนผ่าน มาตั้งค่าตัวเลื่อนเป็น 0.5.

นี่คือผลลัพธ์สุดท้ายของการจัดการของเรา

ทำซ้ำคอลัมน์ของเรา 2 ครั้งแล้วลบคอลัมน์ว่างอีก 2 คอลัมน์ สิ่งที่เหลืออยู่คือการเปลี่ยนภาพพื้นหลังและ เนื้อหา โปรแกรมแก้ไขข้อความสำหรับ 2 คอลัมน์ใหม่

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

ดังนั้น. คุณเพิ่งแสดงข้อความเหนือรูปภาพด้วยปุ่ม สร้างหน้า Elementor.

รับ Elementor Pro ทันที!

สรุป

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

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

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

...