Divi: ธีม WordPress ที่ดีที่สุดของเวลาทั้งหมด!

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

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

ขอเริ่มต้น

เพิ่มเค้าโครงที่กำหนดไว้ล่วงหน้า

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

Divi เทมเพลตโมเดล

ลบเนื้อหาเพิ่มเติมด้วยโครงร่าง

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

ส่วนการปรับเปลี่ยนการออกแบบ Divi

การสร้างภาพเคลื่อนไหวข้อความการเลือก

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

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

สร้างเว็บไซต์ของคุณอย่างง่ายดายด้วย Elementor

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

อัพเดตพารามิเตอร์ของบรรทัด

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

การกำหนดค่าความกว้างโมดูลบรรทัด Divi

แต่เราต้องปรับค่าพารามิเตอร์ที่เหลือดังนี้

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

การกำหนดค่าการตั้งค่าเส้น Divi

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

อัพเดทโมดูลข้อความออกแบบข้อความ

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

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

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

ขนาดข้อความใช้หน่วยความยาว vw ดังนั้นข้อความจึงพอดีกับความกว้างของเบราว์เซอร์ได้ดี

การกำหนดค่าโมดูลข้อความ Divi

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

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

การกำหนดค่าภาพเคลื่อนไหวข้อความ Diviการออกแบบขั้นสุดท้าย

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

นักแสดงแอนิเมชั่นที่ได้รับการว่าจ้างคิดสุดท้าย

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

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

เพื่อสุขภาพของคุณ!

2 หุ้น
หุ้น2
ทวีต
Enregistrer