วิธีเปลี่ยนรูปแบบแพ็คเค้าโครงอย่างรวดเร็วด้วยการค้นหาและแทนที่

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

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

สิ่งที่ค้นหาและแทนที่ใน divi 5

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

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

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

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

วิธีค้นหาและแทนที่รูปแบบเค้าโครงช่วยได้เร็วขึ้น

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

ใช้ค้นหาและแทนที่ใน Divi 5

กระบวนการตรงไปตรงมา: ทริกเกอร์จากฟิลด์สไตล์ใด ๆ เลือกสิ่งที่จะแทนที่และใช้การเปลี่ยนแปลงในหลายโมดูล ลองเดินผ่านมันด้วยตัวอย่างจริง

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

สิ่งนี้จะเปิดแผง ค้นหาและแทนที่ ด้วยตัวเลือกมากมาย:

• (1) องค์ประกอบแหล่งที่มา: สิ่งนี้กำหนดการตั้งค่าที่คุณกำหนดเป้าหมายเช่นขนาดข้อความสีหรือช่องว่างภายใน มันถูกเลือกโดยอัตโนมัติตามตำแหน่งที่คุณเปิดแผง
• (2) ค้นหาค่า: ค่าปัจจุบันที่ใช้ในเค้าโครงของคุณ นี่อาจเป็นขนาดตัวอักษรเช่น 30px รหัสสีเช่น #000000 หรือการตั้งค่าการออกแบบอื่น ๆ สิ่งนี้จะได้รับการเพิ่มโดยอัตโนมัติ
• (3) แทนที่ค่า: ค่าใหม่ที่คุณต้องการใช้ Divi ค้นหาค่าการจับคู่และแทนที่ด้วยอันนี้
• (4) ค้นหาและแทนที่ในสถานที่: เลือกที่ควรใช้การเปลี่ยนแปลง คุณสามารถ จำกัด ไว้ในโมดูลเดียวส่วนหรือทั้งหน้า
• (5) ค้นหาและแทนที่ในประเภทองค์ประกอบ: ตัดสินใจว่าโมดูลการเปลี่ยนแปลงใดควรส่งผลกระทบ คุณสามารถนำไปใช้กับโมดูลทั้งหมดหรือเฉพาะประเภทเฉพาะเช่นปุ่มข้อความหรือพึมพำ
• (6) แทนที่ฟิลด์ที่เหมือนกันเท่านั้น: เปิดใช้งานเพื่ออัปเดตเฉพาะฟิลด์ที่ตรงกับค่าค้นหา สิ่งนี้จะช่วยหลีกเลี่ยงการเปลี่ยนแปลงโดยบังเอิญกับองค์ประกอบที่ไม่เกี่ยวข้อง

ตัวอย่างเช่นเรากำลังเปลี่ยนขนาดตัวอักษรจาก 30px เป็นแคลมป์ของเหลว (20px, 4VW, 50px) เราได้เลือก ทั้งหน้า และ องค์ประกอบทั้งหมด เนื่องจากเราต้องการอัปเดตหัวข้อทั้งหมดในหน้า

คลิกปุ่ม ค้นหาและแทนที่ และดูว่าเกิดอะไรขึ้น ส่วนหัวทั้งหมดที่มีขนาดตัวอักษร 30px ตอนนี้มีค่าของเหลวแคลมป์ ()

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

เรียนรู้ทุกอย่างเกี่ยวกับการค้นหาและแทนที่ของ Divi

ใช้ตัวแปรการออกแบบในการค้นหาและแทนที่

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

ลองดำเนินการต่อด้วยตัวอย่างเดียวกันอัปเดตขนาดตัวอักษรส่วนหัวทั้งหมด แต่คราวนี้แทนที่จะเปลี่ยน 30px ด้วยค่าตัวหนีบโดยตรงเราจะแทนที่ด้วยตัวแปรที่มีชื่อว่า ขนาดตัวอักษร H3

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

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

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

คลิก ค้นหาและแทนที่ เพื่อใช้การเปลี่ยนแปลง ส่วนหัวทั้งหมดที่ใช้ 30px จะอ้างอิงตัวแปร ขนาดตัวอักษร H3 แทนหมายเลขคงที่

นี่คือที่ที่มันน่าสนใจ ต้องการปรับขนาดตัวอักษรนี้ในภายหลังหรือไม่? ไปที่ ตัวจัดการตัวแปร เปิดตัวแปรขนาดตัวอักษร H3 และเปลี่ยนค่า อัปเดตแคลมป์เป็นแคลมป์ (24px, 5VW, 60px) และทุกหัวข้อโดยใช้การอัปเดตตัวแปรนี้โดยอัตโนมัติ

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

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

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

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

วิธีการแทนที่สไตล์ในชุดเลย์เอาต์

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

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

1. ตรวจสอบรูปแบบการออกแบบเค้าโครงของคุณ

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

• ขนาดตัวอักษร: 30px ใช้สำหรับส่วนหัว H3 ทั้งหมดและ 48px สำหรับ H2S ในหลาย ๆ หน้า
• ฟอนต์: Poppins ใช้อย่างสม่ำเสมอสำหรับส่วนหัวทั้งหมด
• ปุ่มหลัก: สีพื้นหลังคือ #4449E0 พร้อมข้อความสีขาว
• Padding: ส่วนใหญ่ใช้ 60px ด้านบนและด้านล่าง
• ไอคอน Blurb: ขนาดไอคอนถูกตั้งค่าเป็น 24px
• Blurb Borders: ไม่มีการใช้ชายแดนกับโมดูล Blurb
• พื้นหลังส่วน: สีเขียว #47BE68 ปรากฏในส่วนท้ายของส่วนท้ายเกือบทุกหน้า

ทั้งหมดนี้ถูกป้อนด้วยตนเองเป็นค่าคงที่ภายในแต่ละโมดูล ตัวอย่างเช่นโมดูล Blurb ใช้ #4449E0 สำหรับสีไอคอนและความกว้าง 24px

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

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

2. บันทึกตัวแปรการออกแบบของคุณ

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

การสร้างตัวแปรสี

ในตัวอย่างก่อนหน้านี้ฉันพบว่าไอคอน Blurb ใช้สี #4449E0 แต่ฉันต้องการเปลี่ยนเป็นสีแบรนด์หลักของฉัน #6C012A ในการทำเช่นนั้นฉันจะสร้าง ตัวแปรสี

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

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

การสร้างตัวแปรตัวเลข

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

การสร้างตัวแปรแบบอักษร

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

เสร็จแล้ว ตอนนี้ตัวอักษรนี้จะสามารถเลือกได้ในฟิลด์ข้อความหัวเรื่องทั้งหมดตลอดทั้งเค้าโครง

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

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

3. ใช้ค้นหาและแทนที่เพื่อใช้ตัวแปร

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

การเปลี่ยนสีของไอคอน

ก่อนอื่นลองเปลี่ยนสีของไอคอนเป็นตัวแปร สีแบรนด์หลัก ที่บันทึกไว้ของเรา นำทางไปยัง การตั้งค่าของ Blurbs> Design> Image & Icon ตอนนี้โฮเวอร์เหนือตัวเลือก สีไอคอน แล้วคลิกที่จุดสามจุด เลือก ค้นหาและแทนที่

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

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

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

การเปลี่ยนฟอนต์หัวข้อทั้งหมด

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

อัปเดตความกว้างของเส้นขอบของโมดูล Blurb ทั้งหมด

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

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

ขั้นตอนโบนัส: สร้างและบันทึกที่ตั้งไว้ล่วงหน้า (ไม่บังคับ)

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

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

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

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

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

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

เรียนรู้ทุกอย่างเกี่ยวกับกลุ่มตัวเลือกของ Divi ที่ตั้งไว้ล่วงหน้า

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

4. ใช้กระบวนการเดียวกันกับหน้าอื่น ๆ

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

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

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

อัปเดตหน้า Landing Page โดยใช้ตัวแปรค้นหาและแทนที่และออกแบบตัวแปรของ Divi

ทำการแก้ไขแบบเค้าโครงในไม่กี่วินาทีด้วยการค้นหาและแทนที่

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

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

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