ตัวพิมพ์ใหญ่ข้อความให้กล่องข้อความเลื่อนไปที่ .ของคุณ เว็บไซต์เว็บ ที่ดึงดูดผู้อ่านด้วยข้อความที่ตัดตอนมาที่เป็นประโยชน์ เนื้อหา. เรียกอีกอย่างว่าทิกเกอร์ (หรือทิกเกอร์ข่าว) และมักใช้เพื่อแสดงกระแสข่าวสารอัปเดตอย่างต่อเนื่องที่ด้านบนหรือด้านล่างของหน้า . โดยปกติแล้ว การเลื่อนภาพเคลื่อนไหวจะดำเนินการโดยใช้บรรทัดเดียว เนื้อหา ในลักษณะวนซ้ำเพื่อให้ข้อมูลปรากฏซ้ำๆ น่าเสียดายที่ <marquee>เนื่องจากแท็ก html ล้าสมัยเราจึงใช้ CSS และ JavaScript ในการสร้าง marquees ในทุกวันนี้ อย่างไรก็ตามด้วย Divi คุณสามารถสร้างสี่เหลี่ยมผืนผ้าการเลือกอย่างง่ายโดยไม่ต้องกังวลกับโค้ดที่กำหนดเอง

ในบทช่วยสอนนี้เราจะอธิบายว่าการสร้างข้อความการเลือกอย่างง่ายด้วย Divi นั้นง่ายเพียงใด เราจะดูวิธีหยุดการเลื่อนภาพเคลื่อนไหวข้อความบนโฮเวอร์และวิธีเพิ่มข้อความเลื่อนขนาดใหญ่เป็นองค์ประกอบการออกแบบเฉพาะสำหรับส่วนหัวของคุณ

ขอเริ่มต้น

การสำรวจ

สิ่งที่คุณต้องเริ่มต้น

ในการเริ่มต้นคุณต้องมีสิ่งต่อไปนี้:

1. Le ธีม Divi ติดตั้งและใช้งานอยู่
2. หน้าใหม่ที่สร้างขึ้นเพื่อสร้างตั้งแต่เริ่มต้นบน front-end (ตัวสร้างภาพ)

หลังจากนั้นคุณจะมีผืนผ้าใบว่างเปล่าเพื่อเริ่มออกแบบใน Divi

จุดเริ่มต้นของความคิด

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

นี่คือวิธีที่จะทำ

เริ่มต้นด้วยการสร้างส่วนปกติพร้อมแถวของคอลัมน์

จากนั้นก่อนเพิ่มโมดูลให้อัปเดตแถวด้วยความกว้างคงที่กล่องเงาและรัศมีดังนี้:

• ความกว้างสูงสุด: 200px
• เบาะ: 10px ที่ด้านบน, 10px ที่ด้านล่าง
• มุมมน: 10px
• Box Shadow: ดูภาพหน้าจอ
• ล้นแนวนอน: ซ่อน
• แนวตั้งล้น: ซ่อน

เพิ่มโมดูลข้อความ

เมื่อบรรทัดเสร็จสมบูรณ์ให้เพิ่มโมดูลข้อความใหม่ลงในบรรทัด

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

• ร่างกาย: "นี่คือประโยค"

การออกแบบโมดูลข้อความ

อัพเดตพารามิเตอร์การออกแบบโมดูลข้อความดังนี้:

• ระยะขอบ: -100% ทางด้านซ้าย, 100% ทางด้านขวา

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

• รูปแบบภาพเคลื่อนไหว: สไลด์
• ทิศทางของภาพเคลื่อนไหว: ขวา
• ระยะเวลาการเคลื่อนไหว: 5000 มิลลิวินาที
• ความเข้มของภาพเคลื่อนไหว: 100%
• แอนิเมชันเริ่มต้นความทึบ: 100%
• ภาพเคลื่อนไหวของกราฟความเร็ว: เส้นตรง
• ทำซ้ำภาพเคลื่อนไหว: วนซ้ำ

ผล

มาดูผลกันเลย

การสร้างบรรทัดข้อความที่ยาวขึ้น

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

ก่อนอื่นบนโมดูลข้อความและแทนที่เนื้อความของข้อความด้วยสิ่งต่อไปนี้:

นี่คือเฟสที่มี ลิงค์

เพิ่มความกว้างและระยะขอบให้พอดีกับบรรทัดข้อความที่ยาวที่สุด

ดังที่คุณอาจสังเกตเห็นข้อความถูกแบ่งออกเป็นสามบรรทัดแทนที่จะเป็นบรรทัดเดียว

ดังนั้นเราจำเป็นต้องปรับระยะขอบและความเข้มของภาพเคลื่อนไหว

• ความกว้าง: 207%
• ระยะขอบ: -207% ทางด้านซ้าย, 207% ทางด้านขวา
• ความเข้มของภาพเคลื่อนไหว: 75%

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

ผล

นี่คือผลสุดท้าย

หยุดภาพเคลื่อนไหวข้อความการเลือกชั่วคราวเมื่อวางเมาส์เหนือ

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

เพิ่มข้อมูลโค้ด CSS เพื่อหยุดภาพเคลื่อนไหวชั่วคราวเมื่อวางเมาส์เหนือ

ในการเพิ่มข้อมูลโค้ด css ให้เปิดการตั้งค่าโมดูลข้อความและเพิ่มโค้ด CSS ที่กำหนดเองต่อไปนี้ในองค์ประกอบหลัก ใต้แท็บโฮเวอร์ :

แอนิเมชันเพลย์สเตท: หยุดชั่วคราว;

ผลสุดท้าย

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

นั่นคือทั้งหมดสำหรับบทช่วยสอนนี้ฉันหวังว่ามันจะสอนวิธีเพิ่มข้อความเลื่อนบน Divi