Element Presets & Option Group Presets: ความแตกต่างอธิบาย

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

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

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

องค์ประกอบที่ตั้งไว้ล่วงหน้าคืออะไร?

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

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

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

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

กลุ่มตัวเลือกที่ตั้งไว้ล่วงหน้าคืออะไร?

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

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

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

Element Presets vs ตัวเลือกกลุ่มที่ตั้งไว้ล่วงหน้า: ความแตกต่างที่สำคัญ

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

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

กลุ่มตัวเลือกที่ตั้งไว้ล่วงหน้า

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

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

วิธีใช้ Element Presets และกลุ่มตัวเลือกที่ตั้งไว้ล่วงหน้าใน Divi 5

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

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

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

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

ขั้นตอนที่ 2: สร้างองค์ประกอบที่ตั้งไว้ล่วงหน้า

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

ขั้นตอนที่ 3: ปรับแต่งด้วยการแก้ไขที่ตั้งไว้ล่วงหน้า

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

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

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

ทำไมพวกเขาถึงทำงานร่วมกันได้ดีขึ้นด้วยกัน

• ประสิทธิภาพการออกแบบที่เพิ่มขึ้น: กลุ่มตัวเลือกที่ตั้งไว้ล่วงหน้าจัดการรายละเอียด nitty-gritty (เช่นการพิมพ์หรือเงากล่อง) ในขณะที่ Element Presets ช่วยให้คุณเปิดตัวส่วนที่มีสไตล์แถวคอลัมน์หรือโมดูลในไม่กี่วินาที
• การออกแบบที่สอดคล้องกันมากขึ้น: รูปแบบที่ใช้ร่วมกันยังคงซิงค์ผ่านการตั้งค่าล่วงหน้าของกลุ่มตัวเลือกและการตั้งค่าองค์ประกอบที่ตั้งไว้ให้แน่ใจว่าเลย์เอาต์มีลักษณะเหมือนกันทุกที่ที่ใช้
• มันส่งเสริมความสามารถในการปรับขนาด: เปลี่ยนหนึ่งตัวเลือกกลุ่มที่ตั้งไว้ล่วงหน้า (เช่นขนาดตัวอักษร) และการตั้งค่าล่วงหน้าที่เชื่อมโยงทุกครั้งจะอัปเดตทันที - สมบูรณ์แบบสำหรับเว็บไซต์ที่กำลังเติบโตซึ่งจำเป็นต้องมีหน้าเพิ่มเติม
• มันเป็นข้อพิสูจน์ในอนาคต: คำแนะนำแผนงานของ Divi 5 ที่กลุ่มตัวเลือก Nesting ตั้งค่าไว้ล่วงหน้าภายใน Element Presets

อนาคตขององค์ประกอบและกลุ่มตัวเลือกที่ตั้งไว้ล่วงหน้าใน Divi 5

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

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

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

ออกแบบอัจฉริยะด้วยการตั้งค่ากลุ่มตัวเลือก

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

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

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