การจัดการเนื้อหาซ้ำ ๆ ด้วยตัวแปรการออกแบบของ Divi 5

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

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

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

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

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

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

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

ประเภทของตัวแปรการออกแบบ

Divi 5 ให้คุณกำหนดตัวแปรการออกแบบสำหรับหกประเภทที่แตกต่างกัน แต่ละคนมีจุดประสงค์ที่แตกต่าง:

• ตัวแปรข้อความ: สตริงข้อความธรรมดาที่ใช้ซ้ำได้ คุณสามารถกำหนดตัวแปรข้อความได้เช่นชื่อ บริษัท หมายเลขโทรศัพท์แท็กไลน์สำเนาปุ่ม ฯลฯ
• ตัวแปรตัวอักษร: ทำให้การพิมพ์ที่สอดคล้องกันง่ายขึ้น ตัวอย่างเช่นกำหนดตระกูลฟอนต์สำหรับหัวข้อ (H1 ถึง H6) และข้อความร่างกาย
• ตัวแปรตัวเลข: ขนาดมาตรฐานเช่นช่องว่างภายในระยะขอบและความสูงของเส้น ตัวอย่างเช่นกำหนดและใช้การตั้งค่าการรองรับการรองลงกับทุกส่วนของคุณ
• ตัวแปรสี: รุ่นที่ทันสมัยและ ได้รับการอัพเกรด สีทั่วโลกเพื่อความสอดคล้องทั่วทั้งไซต์
• ตัวแปรลิงค์: กำหนด URL ที่ใช้บ่อยเช่นลิงก์โซเชียลปุ่มหรือหน้ากฎหมาย
• ตัวแปรรูปภาพ: บันทึกภาพทั่วไปเช่นโลโก้ บริษัท ของคุณลวดลายพื้นหลังภาพผลิตภัณฑ์ ฯลฯ เพื่อนำกลับมาใช้ใหม่ได้อย่างง่ายดาย

เรียนรู้ทุกอย่างเกี่ยวกับตัวแปรการออกแบบ

วิธีการสร้างและใช้ตัวแปรการออกแบบ

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

การสร้างตัวแปรใหม่

ภายในตัวสร้าง Divi ให้เข้าถึง ตัวจัดการตัวแปร โดยคลิกที่ไอคอน DataStack (ไอคอนสามชั้นในแถบเครื่องมือสร้าง)

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

คลิก เพิ่มสตริงส่วนกลาง เพื่อเพิ่มตัวแปรข้อความใหม่

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

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

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

การใช้ตัวแปร

สมมติว่าฉันต้องการเปลี่ยนที่อยู่ในส่วนท้ายของฉัน

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

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

เราบันทึกที่อยู่ของเราเป็น ที่อยู่ ในการใช้ตัวแปร ที่อยู่ ให้คลิกที่

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

ประเภทของเนื้อหาซ้ำ ๆ บนเว็บไซต์

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

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

กรณีการใช้งานจริง: ตัวแปรการออกแบบทำให้เนื้อหาซ้ำซ้อนง่ายขึ้น

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

1. การอัปเดตปุ่มสำเนาระหว่างการขาย

การอัปเดตการคัดลอกปุ่มชื่อผลิตภัณฑ์คำอธิบาย ฯลฯ ได้กลายเป็นงานที่สามารถแก้ไขได้เพียงครั้งเดียวเพื่อสะท้อนการเปลี่ยนแปลงทั่วทั้งไซต์ สมมติว่าฉันกำลังขาย Black Friday ในร้านค้าออนไลน์ของฉันและฉันต้องการแสดง ส่วนลด 30% ในแต่ละปุ่มหน้าแรก

ฉันสามารถ ทำได้อย่างง่ายดายในการแก้ไขครั้งเดียวโดยใช้ตัวแปร ข้อความ ฉันได้สร้างและบันทึกตัวแปรข้อความชื่อ ปุ่ม (ปิด 30%) ด้วย ร้านค้าค่าสตริงตอนนี้ (ลด 30% !! ) ดังนั้นเราจึงต้องใช้มันเพียงครั้งเดียวกับปุ่มทั้งหมดเพื่อสะท้อนสำเนา

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

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

2. การขยายสีธีมไปยังปุ่มทั้งหมด

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

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

3. การจัดการค่านิยมทั่วโลกสำหรับการพิมพ์

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

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

4. บันทึกและจัดการแบบอักษรทั่วโลกได้อย่างมีประสิทธิภาพมากขึ้น

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

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

5. บันทึกลวดลายพื้นหลังของคุณเพื่อการเข้าถึงที่รวดเร็ว

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

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

6. เพิ่มลิงค์การซื้อทันที

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

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

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

แนวทางปฏิบัติที่ดีที่สุดสำหรับการใช้ตัวแปรการออกแบบอย่างมีประสิทธิภาพ

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

1. เริ่มเล็ก

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

2. ทำตามอนุสัญญาการตั้งชื่อที่ชัดเจน

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

3. อัปเดตตัวแปรก่อนหน้าไซต์

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

4. อย่าใช้มากเกินไปเป็นกลยุทธ์

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

ตัวแปรออกแบบทำให้การจัดการเนื้อหาง่ายขึ้น

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

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

ดาวน์โหลด Divi 5 Alpha ล่าสุด

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

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

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