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

การสำรวจ

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

การสอน Divi แสดงตัวอย่างชื่อภาพเคลื่อนไหว

เริ่มการออกแบบกันเถอะ

เพิ่มส่วน # 1

พื้นหลังไล่ระดับสี

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

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

การเว้นวรรค

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

  • การเสริมด้านบน: 7vw (เดสก์ท็อป), 20vw (แท็บเล็ต), 25vw (โทรศัพท์)
  • ช่องว่างด้านล่าง: 7vw (โต๊ะทำงาน), 20vw (แท็บเล็ต), 25vw (โทรศัพท์)
การกำหนดค่าระยะห่างของส่วน Divi

ชายแดน

นอกจากนี้ยังเพิ่มเส้นขอบให้กับส่วน

  • ความกว้างชายแดน: 2vw (บน, ซ้าย, ขวา)
  • ความกว้างชายแดนด้านล่าง: 0vw
  • สีเส้นขอบ: #ffffff
การกำหนดค่าเส้นขอบส่วน Divi

เพิ่มบรรทัดใหม่

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

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

การกำหนดค่าโครงร่างคอลัมน์ Divi

ปรับขนาด

เปิดพารามิเตอร์ line และแก้ไขพารามิเตอร์การกำหนดขนาดตาม:

  • ความกว้าง: 100%
  • ความกว้างสูงสุด: 100%
การกำหนดค่าความกว้างของคอลัมน์ Divi

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

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

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

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

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

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

พร้อม
ที่
สร้าง
สวย
เว็บไซต์?

เพิ่มแท็กโมดูลข้อความ Divi

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

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

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

การเว้นวรรค

จากนั้นเปลี่ยนค่าระยะขอบบนหน้าจอขนาดต่างๆ

  • ระยะขอบซ้าย: 20vw (โต๊ะและแท็บเล็ต), 15vw (โทรศัพท์)
  • ระยะขอบขวา: 35vw (เดสก์ท็อป), 20vw (แท็บเล็ต), 15vw (โทรศัพท์)
การกำหนดค่าระยะห่างโมดูลข้อความ Divi

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

ใส่รหัส 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>

วางรหัส divi css

การเว้นวรรค

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

  • ขอบล่าง: 0px
ปรับแต่งนักเวทย์โมดูล Divi

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

เพิ่มสำเนา

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

ทำสำเนาของโมดูล boton divi

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

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

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

การเว้นวรรค

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

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

นิเมชั่น

ปรับแต่งการตั้งค่าภาพเคลื่อนไหวด้วย

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

เพิ่มส่วน # 2

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

เพิ่มส่วน Divi ใหม่

การเว้นวรรค

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

  • การเสริมด้านบน: 0px
กำหนดค่าระยะห่างของส่วน Divi

เพิ่มบรรทัดใหม่

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

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

เพิ่มคอลัมน์ Divi ส่วนใหม่

ปรับขนาด

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

  • ความกว้าง: 100%
  • ความกว้างสูงสุด: 100%
ขนาดส่วน Divi

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

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

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

การตั้งค่าข้อความโมดูล Divi

สีพื้นหลัง

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

  • สีพื้นหลัง: #ffffff
การกำหนดสีแบบอักษร Divi

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

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

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

การเว้นวรรค

เพิ่มค่าระยะห่างที่กำหนดเองบนหน้าจอขนาดต่างๆ

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

กล่องเงา

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

  • ความแรงของกล่องเงาเบลอ: 50px
  • สีเงา: rgba (0,0,0,0,1)
โมดูลข้อความ Divi การกำหนดค่าเงา

การสำรวจ

ตอนนี้เราได้ทำตามขั้นตอนทั้งหมดแล้วเรามาดูขั้นสุดท้ายกันว่าจะมีหน้าตาเป็นอย่างไรในขนาดหน้าจอต่างๆ

การสอน Divi ผลลัพธ์สุดท้าย

คิดสุดท้าย

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

แปลจาก: ElegantThemes