วิธีสร้างการออกแบบข้อความโค้งใน Divi

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

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

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

แอบมอง

นี่คือตัวอย่างการออกแบบข้อความโค้งที่เราจะสร้างในบทช่วยสอนนี้

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

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

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

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

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

ดาวน์โหลด

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

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

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

แนวคิดพื้นฐานเบื้องหลังการสร้างข้อความโค้งใน Divi

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

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

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

และนี่คือตัวอย่างของโมดูลข้อความเดียวกันที่หมุนทีละ 20 องศา

เริ่มต้น

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

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

การสร้างการออกแบบข้อความโค้ง

การสร้างส่วนและแถว

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

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

• ไล่สีพื้นหลังด้านซ้าย: #1e003d
• ไล่สีพื้นหลังด้านขวา: #121212
• ประเภทการไล่ระดับสี: เรเดียล

• ภาพพื้นหลัง: [ใส่รูปภาพของโลโก้ประมาณ 100px คูณ 100px]
• ขนาดภาพพื้นหลัง: ขนาดจริง

บันทึกการตั้งค่าแล้วข้ามไปที่การตั้งค่าแถวและอัปเดตสิ่งต่อไปนี้:

• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ความสูงขั้นต่ำ: 400px
• ส่วนสูง: 40vw
• ความสูงสูงสุด: 600px
• ช่องว่างภายในที่กำหนดเอง: ด้านบน 0px, ด้านล่าง 0px

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

CSS องค์ประกอบหลักของคอลัมน์:

display:flex;
justify-content:center;

การสร้างโมดูลข้อความสำหรับแต่ละตัวอักษร

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

• เนื้อหา: ง (เพียงตัวอักษรเดียว)
• แบบอักษรข้อความ: Ubuntu Mono (แบบอักษรแบบโมโนสเปซใด ๆ ก็ได้)
• สีข้อความ: #ffffff
• ขนาดตัวอักษร: 5vw (เดสก์ท็อป), 40px (โทรศัพท์)
• การวางแนวข้อความ: center
• ความสูงขั้นต่ำ: 200px
• ส่วนสูง: 20vw
• ความสูงสูงสุด: 300px

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

• กำเนิดการแปลง: 100% (หรือด้านล่าง)

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

position: absolute !important;

การสร้างและหมุนโมดูลข้อความอื่นๆ

ในการสร้างตัวอักษรที่เหลือ เราจะทำซ้ำโมดูลข้อความ เมื่อเราทำซ้ำโมดูลข้อความแล้ว สิ่งที่เราต้องทำคืออัปเดตตัวอักษรแล้วเพิ่มการหมุน 45 องศาสำหรับโมดูลใหม่แต่ละโมดูล

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

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

• เนื้อหา: i
• เปลี่ยนการหมุนแกน z: 45deg

ดำเนินกระบวนการทำซ้ำโมดูลข้อความ จากนั้นอัปเดตโมดูลข้อความด้วยตัวอักษรใหม่และเพิ่มการหมุนการแปลง 45 องศา นี่คือรายละเอียดของการอัปเดตโมดูลข้อความที่เหลืออีก 6 รายการ:

โมดูลข้อความ 3

• เนื้อหา: v
• เปลี่ยนการหมุนแกน z: 90deg

โมดูลข้อความ4

• เนื้อหา: i
• เปลี่ยนการหมุนแกน z: 135deg

โมดูลข้อความ 5

• เนื้อหา: d
• เปลี่ยนการหมุนแกน z: 180deg

โมดูลข้อความ6

• เนื้อหา: i
• เปลี่ยนการหมุนแกน z: 225deg

โมดูลข้อความ7

• เนื้อหา: v
• เปลี่ยนการหมุนแกน z: 270deg

โมดูลข้อความ8

• เนื้อหา: i
• เปลี่ยนการหมุนแกน z: 315deg

แค่นั้นแหละ! ตอนนี้ตรวจสอบผลลัพธ์สุดท้าย

ผลสุดท้าย

การปรับขนาดข้อความและระดับการหมุนสำหรับข้อความที่ยาวขึ้น

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

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

ภายใต้การตั้งค่าองค์ประกอบ ให้เปลี่ยนขนาดข้อความเป็น 40px บนเดสก์ท็อป

บันทึกการตั้งค่า จากนั้นเปิดการตั้งค่าสำหรับโมดูลข้อความแต่ละโมดูล และอัปเดตตัวอักษรและการหมุนของแต่ละโมดูล ปล่อยให้โมดูลข้อความแรกหมุน 0 องศา แล้วเพิ่มการหมุนแกน z 10 องศาสำหรับโมดูลข้อความทุกอันที่ตามมา จากนั้นทำซ้ำโมดูลข้อความเพื่อให้ได้ตัวอักษรมากขึ้นตามต้องการ ในตัวอย่างนี้ ฉันจะสะกดคำว่า "elegant.themes"

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

• โมดูลข้อความ1
  • เนื้อหา: e
  • เปลี่ยนการหมุนแกน z: 0deg
• โมดูลข้อความ2
  • เนื้อหา: l
  • เปลี่ยนการหมุนแกน z: 10deg
• โมดูลข้อความ3
  • เนื้อหา: e
  • เปลี่ยนการหมุนแกน z: 20deg
• โมดูลข้อความ4
  • เนื้อหา: g
  • เปลี่ยนการหมุนแกน z: 30deg
• โมดูลข้อความ 5
  • เนื้อหา:
  • เปลี่ยนการหมุนแกน z: 40deg
• โมดูลข้อความ6
  • เนื้อหา: น
  • เปลี่ยนการหมุนแกน z: 50deg
• โมดูลข้อความ7
  • เนื้อหา: t
  • เปลี่ยนการหมุนแกน z: 60deg
• โมดูลข้อความ8
  • เนื้อหา: .
  • เปลี่ยนการหมุนแกน z: 70deg
• โมดูลข้อความ 9
  • เนื้อหา: t
  • เปลี่ยนการหมุนแกน z: 80deg
• โมดูลข้อความ 10
  • เนื้อหา: h
  • เปลี่ยนการหมุนแกน z: 90deg
• โมดูลข้อความ 10
  • เนื้อหา: e
  • เปลี่ยนการหมุนแกน z: 100deg
• โมดูลข้อความ 11
  • เนื้อหา: m
  • เปลี่ยนการหมุนแกน z: 110deg
• โมดูลข้อความ 12
  • เนื้อหา: e
  • เปลี่ยนการหมุนแกน z: 120deg
• โมดูลข้อความ13
  • เนื้อหา: s
  • เปลี่ยนการหมุนแกน z: 130deg

นี่คือผลลัพธ์จนถึงตอนนี้

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

นี่คือการออกแบบขั้นสุดท้าย

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

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

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

และถ้าคุณต้องการเพิ่มแอนิเมชั่นให้กับตัวอักษรโค้งของคุณ ให้อ่านบทความของเราเกี่ยวกับวิธีทำให้ตัวอักษรเคลื่อนไหว

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

ไชโย!