วิธีที่เร็วที่สุดในการอัปเดตการออกแบบหน้าของคุณด้วย Divi 5

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

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

8 ขั้นตอนในการอัปเดตการออกแบบหน้าของคุณด้วย Divi 5

สำหรับบทช่วยสอนนี้เราใช้หน้าธุรกิจ CV Landing Page จากห้องสมุด Layout Pack Divi

สมัครสมาชิกช่อง YouTube ของเรา

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

1. เพิ่มประสิทธิภาพแดชบอร์ดของคุณสำหรับการแก้ไขที่ปราศจากสิ่งรบกวน

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

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

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

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

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

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

2. ตั้งค่าตัวแปรการออกแบบทั่วโลกของคุณก่อน

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

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

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

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

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

3. แทนที่ค่าคงที่ด้วยตัวแปรการออกแบบ

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

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

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

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

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

4. ใช้แอตทริบิวต์ขยายเพื่อใช้การอัปเดตในไม่กี่วินาที

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

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

คลิกขวาที่ภาพสไตล์และเลือก ขยายแอตทริบิวต์

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

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

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

5. บันทึกการแก้ไขที่ใช้ซ้ำได้เป็นตัวเลือกที่ตั้งไว้ล่วงหน้า

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

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

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

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

6. ใช้สำเนา/วางเพื่อการเปลี่ยนแปลงครั้งเดียวอย่างรวดเร็ว

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

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

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

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

7. สลับระหว่างจุดพักที่กำหนดเองเพื่อให้มุมมองตอบสนองสมบูรณ์แบบ

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

หากจำเป็นคุณสามารถกำหนดจุดพักของคุณเองเพื่อควบคุมเพิ่มเติม

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

8. อัปเดตตัวแปรการออกแบบของคุณเพื่อรีเฟรชเค้าโครงทั้งหมดทันที

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

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

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

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

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

ปรับแต่งเวิร์กโฟลว์ Divi 5 ของคุณ

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

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

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

และถ้าคุณสงสัยว่าเครื่องมือเหล่านี้สามารถติดตามเวิร์กโฟลว์ของคุณได้หรือไม่พวกเขาสามารถทำได้อย่างแน่นอนเพราะ ...

Divi 5 ได้รับการออกแบบให้ปรับให้เข้ากับวิธีการทำงานของคุณ

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

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

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