เปลี่ยนเว็บไซต์ใหม่ใน 5 นาทีด้วยแอตทริบิวต์ขยาย

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

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

คุณลักษณะขยายอะไรใน Divi 5

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

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

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

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

แอตทริบิวต์ที่ขยายได้อย่างไรช่วยเปลี่ยนโฉมเว็บไซต์ได้เร็วขึ้น

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

การใช้แอตทริบิวต์ขยายใน Divi 5

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

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

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

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

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

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

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

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

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

การใช้ตัวเลือกกลุ่มที่ตั้งไว้ล่วงหน้าพร้อมแอตทริบิวต์ขยาย

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

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

กลับไปที่ตัวอย่างปุ่มเพื่อทำความเข้าใจวิธีการทำงาน

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

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

เมื่อคุณขยาย Divi ไม่เพียงแค่คัดลอกลุค มันใช้ที่ตั้งไว้ล่วงหน้าที่บันทึกไว้เบื้องหลัง ดังนั้นปุ่มอื่น ๆ ที่สัมผัสได้ตอนนี้ใช้ค่าที่ตั้งไว้เดียวกัน

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

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

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

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

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

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

วิธีเปลี่ยนโฉมเว็บไซต์ด้วยแอตทริบิวต์ขยาย

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

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

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

ลองเดินผ่านสิ่งที่ควรอัปเดต

เปลี่ยนโมดูลคีย์ให้กับเค้าโครง

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

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

โมดูลหัวเรื่องใหม่

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

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

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

ข้อความใหม่ของร่างกายเพื่อการอ่านที่ดีขึ้น

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

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

การเปลี่ยนพรมแดน

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

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

เปลี่ยนโฉมหน้าอื่น ๆ โดยใช้ค่าที่ตั้งไว้ล่วงหน้า

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

ค่าที่ตั้งไว้ล่วงหน้าที่บันทึกไว้ของคุณจะปรากฏในทุกหน้า

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

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

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

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

เคล็ดลับ Pro: ใช้แอตทริบิวต์ขยายด้วยตัวแปรการออกแบบ

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

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

ขยายคุณลักษณะช่วยให้คุณเปลี่ยนใจเลื่อมใสได้โดยไม่ต้องสร้างใหม่

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

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