การจัดการแบรนด์ของคุณด้วยตัวแปร Divi Design

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

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

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

การจัดการแบรนด์ของคุณด้วยตัวแปรตัวแปรใหม่ของ Divi

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

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

ค้นหาไอคอนนี้เพื่อตั้งค่าและใช้ตัวแปรการออกแบบ

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

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

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

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

การจัดการแบรนด์ด้วยตัวแปรการออกแบบแต่ละประเภท

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

1. การเข้าถึงสีแบรนด์ของคุณ

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

คุณสามารถ:

• สร้างตัวแปรโปร่งใส (เช่นสีปฐมภูมิ 80%, สีหลัก 60%ฯลฯ )
• ทำให้เฉดสีหลักที่เบาลงและเข้มขึ้น
• เปลี่ยนสีของคุณได้ตลอดเวลาและดูอัปเดตผ่านเว็บไซต์ของคุณในโมดูลที่ใช้สีเหล่านั้น

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

2. การตั้งค่าแบบอักษรของแบรนด์ของคุณ

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

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

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

3. การอัปโหลดรูปแบบโลโก้ของคุณ

ภาพที่สอดคล้องกันเป็นส่วนสำคัญในการนำเสนอแบรนด์ของคุณ

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

ตัวแปรการออกแบบจะช่วยให้คุณประหยัดเวลาด้วยภาพใด ๆ ในการออกแบบของคุณที่คุณ 1) ใช้หลายครั้งในหลาย ๆ หน้าและ 2) เปลี่ยนค่อนข้างบ่อย

4. การบันทึกข้อมูลแบรนด์ที่เกิดขึ้นซ้ำ

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

ตัวแปรข้อความช่วยด้วยความสอดคล้องและความเร็วเมื่อใช้สำหรับสิ่งต่าง ๆ เช่น:

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

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

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

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

5. อัปเดตลิงก์แคมเปญของแบรนด์ของคุณ

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

คุณยังสามารถใช้ URL เพื่อจัดเก็บและกำหนด:

• ทบทวนหน้า (เช่นโปรไฟล์ธุรกิจ Google ของคุณ)
• CRM หรือหน้า Landing Page
• รูปแบบที่ซ่อนอยู่หรือข้อเสนอสมาชิก
• โทรศัพท์: และ mailto: ลิงค์
• จัดการลิงค์พันธมิตรหรือ CRM ในจุดเดียว
• ลิงก์ไปยังพอร์ตโฟลิโอ Behance หรือ GitHub ของคุณ

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

6. การจัดการตัวแปรตัวเลขที่เกิดซ้ำ

ใช่ - ตัวเลขเช่นกัน คุณสามารถกำหนดหน่วยสำหรับระยะห่างขนาดและภาพเคลื่อนไหว ตัวเลขสามารถบันทึกเป็นหน่วย CSS ทุกประเภทเช่น:

พิกเซล (PX), เปอร์เซ็นต์ ( %), EMS (EM), รูท EMS (REM), ความสูงของวิว พอร์ต (VH), ความกว้างของ วิว พอร์ต ( VW), Viewport ต่ำสุด (VMIN), Viewport Maximum (VMAX), หน่วยเศษส่วน ( MM ) (PC), องศา (DEG), เรเดียน (RAD), Gradians (Grad), Turns (Turn), วินาที, วินาที , มิลลิวินาที (MS)

นอกจากนี้คุณยังสามารถเข้าถึงฟังก์ชั่นที่ตั้งไว้สำหรับแคลมป์ (), min (), สูงสุด () และ calc ()

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

ใช้ตัวแปรหมายเลขเพื่อตั้งค่า:

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

ปรับปรุงแบรนด์ของคุณด้วยตัวแปรการออกแบบของ Divi

ต้องการจัดการแบรนด์ของคุณเหมือนมืออาชีพหรือไม่? ใช้ตัวแปรการออกแบบของ Divi เพื่อสร้างอย่างชาญฉลาดและเร็วขึ้น วางแผนองค์ประกอบพื้นฐานของแบรนด์เว็บไซต์ของคุณและใช้พวกเขาอย่างเป็นอะตอมตลอด

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