การจัดการขนาดตัวอักษรและตัวอักษรด้วย Divi 5

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

โพสต์นี้สอนวิธีจัดการแบบอักษรและขนาดตัวอักษรใน Divi 5 สร้างตัวอักษรที่ตอบสนองได้อย่างสวยงามบนอุปกรณ์

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

ข้อควรพิจารณาเมื่อคิดผ่านแบบอักษรสำหรับเว็บไซต์ใหม่

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

• ความสามารถในการอ่าน : เลือกแบบอักษรที่ชัดเจนโดยเฉพาะอย่างยิ่งสำหรับข้อความร่างกาย
• ความสอดคล้อง : จำกัด แบบอักษรของคุณ - สองหรือสามทำงานได้ดีที่สุดโดยมีอย่างน้อยหนึ่งรายการสำหรับส่วนหัวและหนึ่งสำหรับข้อความร่างกาย
• การตอบสนอง : ตรวจสอบให้แน่ใจว่าฟอนต์ปรับให้เข้ากับขนาดหน้าจอที่แตกต่างกัน (เหมาะอย่างยิ่งจาก 320px ถึง 1440px)
• ความเข้ากันได้ : เลือกใช้แบบอักษรที่ปลอดภัยบนเว็บหรือเป็นที่นิยมเพื่อหลีกเลี่ยงปัญหาการแสดงผล

วิธีการจัดการแบบอักษรและขนาดตัวอักษรใน Divi 5

มาใช้เค้าโครงที่ทำไว้ล่วงหน้าจากห้องสมุดของ Divi เราจะเลือกเค้าโครงหน้า Landing Page จากชุด“ Business CV” และปรับปรุงตัวอักษรโดยใช้คุณสมบัติใหม่ของ Divi 5 หากคุณมีไซต์ Divi 5 ที่มีอยู่ แต่ต้องการปรับปรุงการพิมพ์คุณสามารถทำตามขั้นตอนเดียวกันนี้โดยไม่ต้องใช้เค้าโครงนี้

ขั้นตอนที่ 1: การเลือกการจับคู่แบบอักษร

การจับคู่แบบอักษรที่ดีผสมผสานสไตล์และความสามารถในการอ่าน Google Fonts ยังเป็นเดิมพันที่ปลอดภัยเนื่องจากมันถูกสร้างขึ้นใน Divi และใช้งานง่าย

ในตัวอย่างด้านล่างเราจะยึดติดกับการใช้ Poppins ของ Layout Pack สำหรับหัวเรื่องและข้อความร่างกาย คุณสามารถลองจับคู่ Lora และ Roboto ได้เช่นกัน

ขั้นตอนที่ 2: การตั้งค่าแบบอักษรสำหรับส่วนหัวหลักและร่างกาย

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

มีตัวแปรฟอนต์เริ่มต้นสองตัวสำหรับหัวเรื่องหลักและฟอนต์ตัวอักษรของคุณ ไปที่ส่วนฟอนต์และตั้งค่า " poppins " เป็นตัวอักษรหัวเรื่องและ " หุ่นยนต์ " เป็นตัวอักษรของร่างกาย

ตั้งค่าแบบอักษรของคุณให้ตรงกับความต้องการการออกแบบและแบรนด์ของคุณ

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

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

ขั้นตอนที่ 3: การสร้างขนาดตัวอักษร

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

วิธีที่คุณสร้างขนาดตัวอักษรของคุณสำหรับแต่ละระดับหัวเรื่องข้อความร่างกายและสถานการณ์ข้อความอื่น ๆ ขึ้นอยู่กับคุณทั้งหมด

ของเหลวผิดพิมพ์ด้วยแคลมป์ ()

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

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

คุณสามารถทดสอบการปรับขนาดตัวอักษรของคุณในเอกสาร HTML ง่าย ๆ เพื่อดูสิ่งต่าง ๆ ที่โดดเดี่ยว (สามารถทำได้ภายใน Divi) นี่คือสิ่งที่ขนาดตัวอักษรข้างต้นดูเหมือนกับการจับคู่แบบอักษร

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

หน่วยแก้ไขด้วยจุดพัก

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

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

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

ขั้นตอนที่ 5: การเพิ่มขนาดตัวอักษรจากตัวแปรตัวแปรไปยังที่ตั้งไว้ล่วงหน้า

ด้วยชุดตัวแปรหมายเลขของคุณ (หรืออย่างน้อยสูตร) ​​ก็ถึงเวลาที่จะนำไปใช้กับที่ตั้งไว้ล่วงหน้า หนึ่งในกรณีการใช้งานที่ดีที่สุดสำหรับกลุ่มตัวเลือกที่ตั้งไว้ล่วงหน้าคือการพิมพ์ คุณสามารถสร้างเซเว่น (7) หัวเรื่อง/ตัวเลือกชื่อ กลุ่มที่ตั้งไว้ล่วงหน้าที่คุณสามารถใช้สำหรับโมดูลใด ๆ ที่ใช้ฟิลด์หัวเรื่อง/ชื่อเรื่อง (เช่นหัวเรื่อง, Blurb, หีบเพลงและโมดูลบุคคลเป็นต้น)

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

การกำหนดค่าคงที่ให้กับจุดพัก

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

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

การกำหนดฟังก์ชั่นแคลมป์ () (ง่ายขึ้น)

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

คุณจะตั้งค่าระดับหัวเรื่อง H1-H6 แต่ละระดับเป็น กลุ่มตัวเลือกที่กำหนดเองใหม่ที่ตั้งไว้ล่วงหน้า

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

แนวทางปฏิบัติที่ดีที่สุดสำหรับแบบอักษรใน Divi 5

หากต้องการเพิ่มการพิมพ์ของคุณให้สูงสุดโปรดจำเคล็ดลับเหล่านี้:

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

การพิมพ์ใน Divi 5 คือลมหายใจของอากาศบริสุทธิ์

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

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

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

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