วิธีการออกแบบที่ตั้งไว้ล่วงหน้าเปลี่ยนกระบวนทัศน์การออกแบบ Divi อย่างไร

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

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

เสาหลักสองเสาของการออกแบบที่ตั้งไว้ล่วงหน้า

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

Element Presets: แพ็คเกจการออกแบบที่ใช้ซ้ำได้

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

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

ตัวเลือกกลุ่มที่ตั้งไว้ล่วงหน้า: การควบคุมการออกแบบแบบแยกส่วน

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

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

การสร้างเวิร์กโฟลว์ที่มีโครงสร้างด้วยการตั้งค่าล่วงหน้า

ตอนนี้เราได้แสดงให้คุณเห็นเสาหลักสองเสาใน Divi และอธิบายความแตกต่างสั้น ๆ ให้ผ่านเคล็ดลับในการสร้างเวิร์กโฟลว์ที่มีโครงสร้าง

ขั้นตอนที่ 1: กำหนดรูปแบบหลักด้วยการตั้งค่ากลุ่มตัวเลือก

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

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

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

ขั้นตอนที่ 2: สร้างองค์ประกอบที่ตั้งไว้ล่วงหน้าสำหรับโมดูลเฉพาะ

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

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

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

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

ขั้นตอนที่ 3: นำไปใช้และปรับตามต้องการ

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

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

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

ขั้นตอนที่ 4: จัดรูปแบบของคุณไว้ภายในห้องสมุด Divi

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

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

ขั้นตอนที่ 5: วนซ้ำและปรับปรุง

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

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

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

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

ประโยชน์ของเวิร์กโฟลว์ที่ตั้งไว้ล่วงหน้า

ตอนนี้เราได้ผ่านพื้นฐานของการสร้างเวิร์กโฟลว์ที่มีโครงสร้างด้วยการตั้งค่าล่วงหน้าของ Divi ลองไปดูประโยชน์บางอย่างที่มาพร้อมกับวิธีการนี้

ความเร็ว: ลดเวลาการออกแบบด้วยการตั้งค่าล่วงหน้าที่พร้อมใช้งาน

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

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

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

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

ความสอดคล้อง: รักษาสไตล์ที่สม่ำเสมอในหน้าเว็บ

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

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

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

ความสามารถในการปรับขนาด: ขยายและอัปเดตการออกแบบไซต์ได้อย่างง่ายดาย

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

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

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

ความยืดหยุ่น: แทนที่องค์ประกอบของแต่ละบุคคลโดยไม่ทำลายระบบ

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

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

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

เริ่มออกแบบอย่างชาญฉลาดด้วยการตั้งค่าล่วงหน้าใน Divi 5

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