วิธีการแทนที่แบบอักษรด้วยตัวแปรการออกแบบแบบอักษรของ Divi 5

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

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

เหตุใดแบบอักษรคงที่จึงสามารถสร้างปัญหาได้

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

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

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

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

สิ่งที่คุณควรใช้แทน: ตัวแปรการออกแบบของ Divi 5

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

Divi เสนอตัวแปรหกประเภท: ตัวเลขข้อความรูปภาพลิงก์สีและแบบอักษร ตัวแปรฟอนต์เริ่มต้นสองตัวพร้อมใช้งาน: หนึ่งตัวสำหรับส่วนหัวและอีกตัวหนึ่งสำหรับข้อความร่างกาย ตัวจัดการตัวแปรอยู่ในแถบด้านซ้ายภายใต้ไอคอนฐานข้อมูล

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

กลุ่มตัวเลือกที่ตั้งไว้ล่วงหน้าทำอะไร

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

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

คู่มือทีละขั้นตอนเพื่อสร้างระบบฟอนต์แบบไดนามิกด้วย Divi 5

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

1. สร้างตัวแปรตัวอักษรสำหรับระบบใหม่ของคุณ

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

• ตั้งค่าแบบอักษรหลักของคุณ: คลิกตัวแปรหัวเรื่อง เลือกครอบครัวและน้ำหนักของคุณจากนั้นบันทึกไว้ ทำเช่นเดียวกันกับข้อความร่างกาย แต่เลือกสิ่งที่สะอาดและอ่านง่าย
• เพิ่มฟอนต์เพิ่มเติมหากจำเป็น: การออกแบบบางอย่างจำเป็นต้องใช้แบบอักษรเพิ่มเติมสำหรับคำพูดคำรับรองหรือข้อความพิเศษ คลิก“ เพิ่มตัวแปรใหม่” และตั้งชื่อที่ชัดเจน
• กรอกรายละเอียดทั้งหมด: ตัวแปรแต่ละตัวมีตระกูลตัวอักษรน้ำหนักสไตล์และการตั้งค่าอื่น ๆ ใช้น้ำหนักตัวหนาสำหรับพาดหัวน้ำหนักปกติสำหรับข้อความร่างกายและตัวเอียงเมื่อคุณต้องการเพิ่มการเน้น
• ทำให้ชื่อของคุณง่ายขึ้น: แทนที่จะทำให้ฉลากสับสนเรียกพวกเขาว่า "ใบเสนอราคาแบบอักษร" หรือ "ไฮไลต์ฟอนต์"
• อย่าลืมบันทึก: การเปลี่ยนแปลงของคุณจะไม่ติดจนกว่าคุณจะกดปุ่มบันทึก

เว็บไซต์ส่วนใหญ่ต้องการแบบอักษรและตัวอักษรเท่านั้น เพิ่มตัวแปรพิเศษสำหรับความต้องการการออกแบบพิเศษไม่ใช่การปรับแต่งข้อความเล็ก ๆ ตัวแปรที่น้อยลงทำให้การสร้างเนื้อหาใหม่ง่ายขึ้นมาก

2. เพิ่มตัวแปรตัวเลขสำหรับขนาดตัวอักษร

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

เริ่มต้นด้วยขนาดหัวเรื่องของคุณ สร้างตัวแปรชื่อ H1, H2, H3 และอื่น ๆ ตั้งค่าแต่ละตัวเป็นขนาดที่แตกต่างกันซึ่งเหมาะสมสำหรับการออกแบบของคุณ คุณสามารถใช้ค่าพิกเซลปกติเช่น 32px หรือหน่วยตอบสนองเช่นแคลมป์ () สำหรับขนาดที่ปรับให้เข้ากับหน้าจออื่น ๆ

ข้อความร่างกายต้องการตัวแปรขนาดของมันเช่นกัน เรียกมันว่าบางอย่างเช่น "ขนาดร่างกาย" และตั้งค่าให้เป็นขนาดการอ่านที่สะดวกสบายโดยปกติจะอยู่ที่ประมาณ 16px ถึง 18px

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

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

เว็บไซต์ส่วนใหญ่ต้องการแบบอักษรและตัวอักษรเท่านั้น เพิ่มตัวแปรพิเศษสำหรับความต้องการการออกแบบพิเศษไม่ใช่การปรับแต่งข้อความเล็ก ๆ ตัวแปรที่น้อยลงทำให้การสร้างเนื้อหาใหม่ง่ายขึ้นมาก

3. ใช้ค้นหาและแทนที่เพื่อแลกเปลี่ยนแบบอักษรคงที่

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

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

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

ค้นหาและแทนที่งานขนาดตัวอักษรด้วย คลิกขวาที่ฟิลด์ขนาดตัวอักษรใด ๆ เพื่อเข้าถึงแผงการเปลี่ยนเดียวกัน สิ่งนี้ช่วยให้คุณสามารถสลับขนาดระดับองค์ประกอบเช่น 24px ด้วยตัวแปรหมายเลขของคุณ

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

ตั้งค่าขอบเขตการเปลี่ยนของคุณ

ค้นหาและแทนที่การควบคุมตำแหน่งที่เกิดการเปลี่ยนแปลง เลือก“ ทั้งหน้า” เพื่ออัปเดตแบบอักษรในรูปแบบทั้งหมดของคุณ เลือก“ องค์ประกอบปัจจุบันและเด็ก” เพื่อ จำกัด การเปลี่ยนแปลงส่วนที่เฉพาะเจาะจงและสิ่งที่ซ้อนอยู่ภายใน

คุณยังสามารถกำหนดเป้าหมายคอนเทนเนอร์หลักหรือพื้นที่หน้าเฉพาะ

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

หลีกเลี่ยงการเปลี่ยนโดยไม่ตั้งใจ

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

สิ่งนี้จะช่วยให้รัศมีเส้นขอบของคุณอยู่ที่ 10px แม้ว่าคุณจะเปลี่ยนแบบอักษรที่เรียกว่า "10px" หรือสิ่งที่คล้ายกัน

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

4. ทำงานผ่านระบบแบบอักษรของคุณ

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

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

5. สร้างที่ตั้งไว้ล่วงหน้าด้วยตัวแปรของคุณ

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

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

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

ค่าที่ตั้งไว้ล่วงหน้าการพิมพ์เหล่านี้ทำงานกับโมดูลใด ๆ ที่มีฟิลด์ข้อความ โมดูล Blurb, เนื้อหาหีบเพลง, ข้อความรับรองและแบบฟอร์มการติดต่อทั้งหมดยอมรับการตั้งค่าที่ตั้งไว้เดียวกันทั้งหมด ความเข้ากันได้ข้ามโมดูลนี้ช่วยลดงานการจัดแต่งทรงผมซ้ำ ๆ

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

6. ขยายตัวแปรใหม่ของคุณในทุกองค์ประกอบ

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

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

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

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

วิธีการที่เป็นระเบียบนี้ระบุการจัดรูปแบบความขัดแย้งก่อนและควบคุมกระบวนการอัปเดต

Divi 5 ทำให้การพิมพ์ง่ายขึ้น

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

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

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