ทุกสิ่งที่คุณจำเป็นต้องรู้ตัวแปรการออกแบบใน Divi 5

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

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

Divi 5 พร้อมที่จะใช้กับเว็บไซต์ใหม่ แต่เราไม่แนะนำให้แปลงเว็บไซต์ที่มีอยู่เป็น Divi 5

ตัวแปรการออกแบบใน Divi 5 คืออะไร?

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

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

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

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

ตัวแปรการออกแบบทำงานอย่างไร?

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

ลองผ่านประเภทของตัวแปรการออกแบบที่คุณสามารถเพิ่มลงในเว็บไซต์ของคุณ

1. ตัวแปรสี

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

2. ตัวแปรตัวอักษร

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

3. ตัวแปรตัวเลข

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

4. ตัวแปรภาพ

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

5. ตัวแปรข้อความ

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

6. ตัวแปรลิงก์

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

ประโยชน์ของการใช้ตัวแปรการออกแบบ

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

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

ตัวอย่างที่ใช้งานได้จริงโดยใช้ตัวแปรการออกแบบใน Divi 5

ตอนนี้เราได้ครอบคลุมพื้นฐานของตัวแปรการออกแบบลองมาดูกันว่าคุณสามารถรวมตัวแปรที่คุณสร้างได้อย่างไรตลอดทั้งเว็บไซต์ของคุณ

ตัวอย่างที่ 1: การพิมพ์ที่ตอบสนอง

หนึ่งในวิธีที่มีประสิทธิภาพมากที่สุดในการใช้ตัวแปรการออกแบบใน Divi 5 คือตัวหนีบ () เพื่อกำหนดขนาดข้อความ คุณสามารถตั้งค่าตัวแปรการออกแบบสำหรับแท็ก H1 ของคุณเช่น 26px, 5VW, 90px ฟังก์ชั่น CLAMP () กำหนดค่าภายในช่วงที่กำหนดทำให้มีประโยชน์อย่างไม่น่าเชื่อสำหรับการพิมพ์ที่ตอบสนอง ต้องใช้สามอาร์กิวเมนต์: ค่าต่ำสุดค่าที่ต้องการและค่าสูงสุด

ในกรณีนี้ค่าต่ำสุดคือ 26px - มั่นใจได้ว่าข้อความจะไม่หดตัวต่ำกว่าขนาดนี้ไม่ว่าหน้าจอจะเล็กแค่ไหน ค่าที่ต้องการคือ 5VW (ความกว้างของวิวพอร์ต) หรือ 5% ของความกว้างของหน้าจอ ในที่สุด 90px แสดงถึงขนาดสูงสุดที่ข้อความจะเป็นเช่นนั้นไม่ว่าวิวพอร์ตจะใหญ่แค่ไหน

ตัวอย่างที่ 2: เส้นขอบที่สอดคล้องกัน

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

ตัวอย่างที่ 3: การสร้างแบรนด์สม่ำเสมอ

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

ตัวอย่างที่ 4: การอัปเดตเนื้อหา

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

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

เริ่มต้นด้วยตัวแปรการออกแบบ

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

การเริ่มต้นใช้งานตัวแปรการออกแบบเป็นเรื่องง่าย เปิดใช้งาน Visual Builder และคลิกไอคอน ตัวแปรตัวจัดการ

เมื่อเปิดการตั้งค่าตัวจัดการตัวแปรให้คลิก แท็บตัวเลข เพื่อขยาย

คลิกปุ่ม + เพิ่มหมายเลขทั่วโลก เพื่อเปิดการตั้งค่าตัวแปร

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

กำหนดชื่อ - เช่น รัศมีเส้นขอบ - และกำหนดค่า 15 ให้กับตัวแปร

สุดท้ายบันทึกตัวแปรโดยคลิกปุ่ม บันทึกตัวแปร

ใช้ตัวแปรการออกแบบใน Divi 5

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

โฮเวอร์ระหว่างฟิลด์รัศมีเส้นขอบด้านบนและด้านขวาในการตั้งค่ารัศมีเส้นขอบเพื่อเปิดเผย ไอคอนเนื้อหาแบบไดนามิก

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

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

การสร้างตัวแปรสำหรับการพิมพ์ที่ตอบสนอง

ตามที่ระบุไว้คุณสามารถสร้างตัวแปรการออกแบบสำหรับการพิมพ์ที่ตอบสนองโดยใช้ฟังก์ชั่น Clamp () ใช้แท็บหมายเลขเดียวกันเพื่อสร้างหมายเลขทั่วโลกใหม่สำหรับหัวเรื่อง H1 เลือก แคลมป์ จากรายการดรอปดาวน์เพิ่ม H1 เป็นชื่อและป้อน 26px, 5VW, 82px สำหรับค่า บันทึกการเปลี่ยนแปลง

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

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

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

ปลดล็อกศักยภาพในการออกแบบด้วยตัวแปรการออกแบบ

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

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

Divi 5 พร้อมที่จะใช้กับเว็บไซต์ใหม่ แต่เราไม่แนะนำให้แปลงเว็บไซต์ที่มีอยู่เป็น Divi 5