วิธีเพิ่มแอนิเมชั่นบล็อกข้อความ CSS ให้กับหัวข้อของคุณด้วย Divi

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

ดาวน์โหลดเค้าโครงแอนิเมชั่นบล็อกข้อความฟรี

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

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

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

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

ดาวน์โหลด

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

มาเริ่มสร้างใหม่กันเถอะ!

เพิ่มมาตรา #1

พื้นหลังไล่โทนสี

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

• สี 1: #ff0f2b
• สี 2: #c10b1a
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 63deg

ระยะห่าง

ไปที่แท็บการออกแบบของส่วนและใช้ค่าการเติมด้านบนและด้านล่างแบบกำหนดเองต่อไปนี้ในขนาดหน้าจอต่างๆ:

• ด้านบน: 7vw (เดสก์ท็อป), 20vw (แท็บเล็ต), 25vw (โทรศัพท์)
• ช่วงล่าง: 7vw (เดสก์ท็อป), 20vw (แท็บเล็ต), 25vw (โทรศัพท์)

ชายแดน

เพิ่มเส้นขอบให้กับส่วนด้วย

• ความกว้างของเส้นขอบ: 2vw (บน ซ้าย ขวา)
• ความกว้างขอบล่าง: 0vw
• สีเส้นขอบ: #ffffff

เพิ่มแถวใหม่

โครงสร้างคอลัมน์

ดำเนินการต่อโดยเพิ่มแถวใหม่ในส่วนโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

ขนาด

เปิดการตั้งค่าแถวและเปลี่ยนการตั้งค่าขนาดตามลำดับ:

• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

เพิ่มโมดูลข้อความลงในคอลัมน์

เพิ่มเนื้อหา H1

จากนั้น เพิ่มโมดูลข้อความด้วยพาดหัว H1 ที่คุณเลือก

เพิ่มแท็ก Div ให้กับแต่ละคำในหัวข้อ H1

สลับไปที่แท็บข้อความของข้อความพาดหัว และเพิ่ม div ที่แตกต่างกันในแต่ละคำในพาดหัวของคุณ CSS ID จะต้องแตกต่างกันในแต่ละคำ

<h1><div id="word-1" class="display-state">Ready</div>
<div id="word-2" class="display-state">to</div>
<div id="word-3" class="display-state">Build</div>
<div id="word-4" class="display-state">Beautiful</div>
<div id="word-5" class="display-state">Websites?</div></h1>

การตั้งค่าข้อความ H1

ไปที่แท็บการออกแบบของโมดูลและแก้ไขการตั้งค่าข้อความ H1 ตามนั้น:

• แบบอักษรของหัวเรื่อง: Work Sans
• น้ำหนักแบบอักษรของหัวเรื่อง: ปานกลาง
• หัวเรื่องสีข้อความ: #ffffff
• ขนาดข้อความของหัวเรื่อง: 4vw (เดสก์ท็อป), 5vw (แท็บเล็ต), 6vw (โทรศัพท์)
• ความสูงของบรรทัดหัวเรื่อง: 1.4em

ระยะห่าง

จากนั้นแก้ไขค่าระยะขอบตามขนาดหน้าจอต่างๆ

• ระยะขอบซ้าย: 20vw (เดสก์ท็อปและแท็บเล็ต), 15vw (โทรศัพท์)
• ระยะขอบขวา: 35vw (เดสก์ท็อป), 20vw (แท็บเล็ต), 15vw (โทรศัพท์)

เพิ่มโมดูลโค้ดลงในคอลัมน์

ใส่โค้ด CSS

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

<style>

.display-state {
display: inline !important;
}

#word-1 {
-webkit-animation: slide-right 0.5s linear 0.3s both;
	        animation: slide-right 0.5s linear 0.3s both;
}

#word-2 {
-webkit-animation: slide-right 0.5s linear 0.6s both;
	        animation: slide-right 0.5s linear 0.6s both;
}

#word-3 {
-webkit-animation: slide-right 0.5s linear 0.9s both;
	        animation: slide-right 0.5s linear 0.9s both;
}

#word-4 {
-webkit-animation: slide-right 0.5s linear 1.2s both;
	        animation: slide-right 0.5s linear 1.2s both;
}
#word-5 {
-webkit-animation: slide-right 0.5s linear 1.5s both;
	        animation: slide-right 0.5s linear 1.5s both;
}

@-webkit-keyframes slide-right {
0% {
background-color: #000;
opacity: 0.5;
color: transparent;
}

1% {
opacity: 1;
}
}

</style>

ระยะห่าง

ไปที่แท็บการออกแบบของโมดูลและลบช่องว่างภายในเริ่มต้นทั้งหมด

• ขอบล่าง: 0px

เพิ่มโมดูลปุ่มลงในคอลัมน์

เพิ่มสำเนา

โมดูลต่อไปที่เราต้องการคือโมดูลปุ่ม ป้อนสำเนาที่คุณเลือก

การตั้งค่าปุ่ม

ไปที่แท็บการออกแบบของโมดูลและเปลี่ยนการตั้งค่าปุ่มตามลำดับ:

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
• สีข้อความของปุ่ม: #ffffff
• สีพื้นหลังของปุ่ม: #000000
• ความกว้างของขอบปุ่ม: 0px

• แบบอักษรของปุ่ม: Work Sans

ระยะห่าง

จากนั้นไปที่การตั้งค่าระยะห่างและใช้ค่าระยะขอบและช่องว่างภายในที่กำหนดเองกับขนาดหน้าจอต่างๆ

• ขอบบน: 3vw (เดสก์ท็อป),
• ระยะขอบซ้าย: 20vw (เดสก์ท็อปและแท็บเล็ต), 15vw (โทรศัพท์)
• ด้านบน: 1.2vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 4vw (โทรศัพท์)
• Padding ด้านล่าง: 1.2vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 4vw (โทรศัพท์)
• ช่องว่างภายในด้านซ้าย: 1.8vw (เดสก์ท็อป), 3vw (แท็บเล็ต), 6vw (โทรศัพท์)
• Padding ขวา: 1.8vw (เดสก์ท็อป), 3vw (แท็บเล็ต), 6vw (โทรศัพท์)

แอนิเมชั่น

ปรับแต่งการตั้งค่าแอนิเมชั่นด้วย

• สไตล์แอนิเมชั่น: Flip
• ทิศทางของแอนิเมชั่น: ลง
• ภาพเคลื่อนไหวล่าช้า: 2000ms
• ความเข้มของแอนิเมชั่น: 100%
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%
• ภาพเคลื่อนไหวความเร็ว Curve: Ease-In-Out
• ภาพเคลื่อนไหวซ้ำ: Once

เพิ่มส่วน #2

ดำเนินการต่อโดยเพิ่มส่วนปกติใหม่ด้านล่างส่วนก่อนหน้า

ระยะห่าง

เปิดการตั้งค่าส่วนและลบช่องว่างด้านบนเริ่มต้น

• ช่องว่างภายในด้านบน: 0px

เพิ่มแถวใหม่

โครงสร้างคอลัมน์

ดำเนินการต่อโดยเพิ่มแถวใหม่โดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

ขนาด

โดยไม่ต้องเพิ่มโมดูลใดๆ ให้เปิดการตั้งค่าแถวและอนุญาตให้แถวใช้ความกว้างทั้งหมดของคอนเทนเนอร์ส่วน

• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

เพิ่มโมดูลข้อความลงในคอลัมน์

เพิ่มเนื้อหา

จากนั้น เพิ่มโมดูลข้อความพร้อมเนื้อหาคำอธิบายที่คุณเลือก

สีพื้นหลัง

เพิ่มสีพื้นหลังสีขาว

• สีพื้นหลัง: #ffffff

การตั้งค่าข้อความ

ไปที่แท็บการออกแบบของโมดูลและแก้ไขการตั้งค่าข้อความตามลำดับ:

• แบบอักษรของข้อความ: Work Sans
• สีข้อความ: #9b9b9b
• ขนาดตัวอักษร: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 2.6em

ระยะห่าง

เพิ่มค่าการเว้นวรรคแบบกำหนดเองในขนาดหน้าจอต่างๆ ด้วย

• ขอบบน: -5vw (เดสก์ท็อป), -20vw (แท็บเล็ต), -27vw (โทรศัพท์)
• ระยะขอบซ้าย: 20vw (เดสก์ท็อป), 13vw (แท็บเล็ต), 8vw (โทรศัพท์)
• ระยะขอบขวา: 20vw (เดสก์ท็อป), 13vw (แท็บเล็ต), 8vw (โทรศัพท์)
• ด้านบน: 5vw (เดสก์ท็อป), 7vw (แท็บเล็ตและโทรศัพท์)
• Padding ด้านล่าง: 5vw (เดสก์ท็อป), 7vw (แท็บเล็ตและโทรศัพท์)
• Padding ซ้าย: 3vw (เดสก์ท็อป), 5vw (แท็บเล็ต), 6vw (โทรศัพท์)
• ช่องว่างภายในด้านขวา: 3vw (เดสก์ท็อป), 5vw (แท็บเล็ต), 6vw (โทรศัพท์)

กล่องเงา

และทำการตั้งค่าโมดูลให้สมบูรณ์โดยใช้เงากล่องที่ละเอียดอ่อน แค่นั้นแหละ!

• ความแรงของกล่องเงาเบลอ: 50px
• เงาสี: rgba(0,0,0,0.1)

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ในขั้นสุดท้ายในหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

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

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

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