วิธีสร้าง Marquee ข้อความอย่างง่ายด้วย Divi

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

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

มาเริ่มกันเลย.

แอบมอง

ดาวน์โหลดเค้าโครงฟรี

หากต้องการใช้การออกแบบจากบทช่วยสอนนี้ คุณจะต้องดาวน์โหลดโดยใช้ปุ่มด้านล่างก่อน ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

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

ดาวน์โหลด

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

สมัครสมาชิกช่อง Youtube ของเรา

ในการนำเข้าเลย์เอาต์ไปยังเพจของคุณ เพียงแตกไฟล์ zip แล้วลากไฟล์ json ไปที่ Divi Builder

ไปที่บทช่วยสอนกันไหม

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

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

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

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

ส่วนที่ 1: การสร้าง Marquee ข้อความอย่างง่ายใน Divi

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

นี่คือวิธีการทำ

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

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

• ความกว้างสูงสุด: 200px
• ช่องว่างภายใน: บน 10px, ด้านล่าง 10px
• มุมกลม: 10px
• กล่องเงา: ดูภาพหน้าจอ
• แนวนอนล้น: ซ่อน
• ล้นแนวตั้ง: ซ่อน

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

เมื่อแถวเสร็จสิ้น ให้เพิ่มโมดูลข้อความใหม่ลงในแถว

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

• เนื้อหา: “นี่คือประโยค”

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

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

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

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

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

ผลลัพธ์

ทีนี้มาดูผลลัพธ์กัน

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

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

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

<p>This is a sentence in a marquee with a <a href="#">link</a></p>

เพิ่มความกว้างและระยะขอบเพื่อรองรับบรรทัดข้อความที่ยาวขึ้น

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

ดังนั้น เราจำเป็นต้องปรับระยะขอบและความเข้มของแอนิเมชัน

• ความกว้าง: 207%
• ระยะขอบ: -207% ซ้าย 207% ขวา
• ความเข้มของแอนิเมชั่น: 75%

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

ผลลัพธ์

นี่คือผลลัพธ์สุดท้าย

การหยุดแอนิเมชั่นข้อความ Marquee บน Hover

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

เพิ่ม CSS Snippet เพื่อหยุดภาพเคลื่อนไหวชั่วคราวบน Hover

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

animation-play-state: paused;

ผลสุดท้าย

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

ส่วนที่ 2: การสร้าง Text Marquee เป็นองค์ประกอบการออกแบบที่ตอบสนองใน Divi

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

ในการดำเนินการนี้ เราจะใช้เลย์เอาต์ที่สร้างไว้ล่วงหน้าสำหรับหน้าแรกของ Divi Job Recruiter

เพิ่มเค้าโครงสำเร็จรูป

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

ลบเนื้อหาพิเศษด้วยเค้าโครง

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

การสร้างแอนิเมชั่นข้อความ Marquee

อย่างที่คุณเห็น คำว่า "ว่าจ้าง" ถูกใช้เป็นองค์ประกอบการออกแบบข้อความขนาดใหญ่แล้วในโมดูลข้อความในส่วนที่สอง เราจะเปลี่ยนโมดูลข้อความนั้นเป็นองค์ประกอบการออกแบบปะรำข้อความที่ตอบสนองได้ สิ่งสำคัญในการทำให้ข้อความ Marquee ตอบสนองคือ ตรวจสอบให้แน่ใจว่าโมดูลแถวและข้อความขยายความกว้างเต็มความกว้างของหน้าต่างเบราว์เซอร์ เราสามารถทำได้โดยใช้ความกว้าง 100% จากนั้นเราสามารถใช้หน่วยความยาว vw สำหรับขนาดตัวอักษร สิ่งนี้จะทำให้ขนาดข้อความเหมาะสมกับความกว้างของเบราว์เซอร์ หลังจากนั้น เราจะใช้หลักการเดียวกันกับที่เราเคยสร้างตัวอย่างข้อความปะรำข้อความอย่างง่ายก่อนหน้านี้

นี่คือวิธีการทำ

อัปเดตการตั้งค่าแถว

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

อย่างไรก็ตาม เราจำเป็นต้องปรับการตั้งค่าที่เหลือดังนี้

• ระยะขอบ: -24vw ด้านล่าง
• แปลงแกนแปล Y: -24vw
• แนวนอนล้น: ซ่อน
• ล้นแนวตั้ง: ซ่อน

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

อัปเดตการออกแบบข้อความโมดูลข้อความ

ตอนนี้ สิ่งที่คุณต้องทำคืออัปเดตโมดูลข้อความเพื่อแปลงเป็นองค์ประกอบการออกแบบปะรำข้อความขนาดใหญ่

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

• สีข้อความ: rgba(255,255,255,0.16)
• ขนาดตัวอักษร: 36vw
• ระยะขอบ: -100% ซ้าย, 100% ขวา

ขนาดข้อความกำลังใช้หน่วยความยาว vw ดังนั้นข้อความจะปรับขนาดอย่างเหมาะสมกับความกว้างของเบราว์เซอร์

เพิ่มแอนิเมชั่นให้กับโมดูลข้อความ

• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ซ้าย
• ระยะเวลาแอนิเมชั่น: 10000ms
• ความเข้มของแอนิเมชั่น: 100%
• ภาพเคลื่อนไหวความเร็ว Curve: เชิงเส้น
• ภาพเคลื่อนไหวซ้ำ: Loop

การออกแบบขั้นสุดท้าย

ตรวจสอบการออกแบบขั้นสุดท้าย

ความคิดสุดท้าย

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

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!